@charset "UTF-8";
/*
 * branchline 201209
 */
@import url("https://fonts.googleapis.com/css2?family=Jua&family=Nerko+One&family=Overpass:wght@400;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700;800&family=Noto+Sans+JP:wght@400;500;700&display=swap");
.blind {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

.blind.focusable:active, .blind.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*! normalize.scss v0.1.0 | MIT License | based on git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
    font-family: sans-serif;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/**
 * Remove default margin.
 */
body {
    margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
    display: inline-block;
    /* 1 */
    vertical-align: baseline;
    /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
    display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
    background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
    outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
    font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
    background: #ff0;
    color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
    border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
    overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
    margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
    overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
    color: inherit;
    /* 1 */
    font: inherit;
    /* 2 */
    margin: 0;
    /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
    overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
    cursor: pointer;
    /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
    line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
    border: 0;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
    overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
    font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}

p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

button,
input {
    margin: 0;
    padding: 0;
    color: #111;
}

.svg {
    display: block;
}

hr {
    display: none;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

* {
    word-break: keep-all;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

div.uploader input {
    padding-right: 145px;
}

/* NotoSans CJK (subset) https://www.google.com/get/noto/#sans-kore */
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 250;
    src: url(/fonts/NotoSans-Thin.eot);
    src: url(/fonts/NotoSans-Thin.eot?#iefix) format("embedded-opentype"), url(/fonts/NotoSans-Thin.woff2) format("woff2"), url(/fonts/NotoSans-Thin.woff) format("woff"), url(/fonts/NotoSans-Thin.ttf) format("truetype");
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: url(/fonts/NotoSans-Light.eot);
    src: url(/fonts/NotoSans-Light.eot?#iefix) format("embedded-opentype"), url(/fonts/NotoSans-Light.woff2) format("woff2"), url(/fonts/NotoSans-Light.woff) format("woff"), url(/fonts/NotoSans-Light.ttf) format("truetype");
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 350;
    src: url(/fonts/NotoSans-DemiLight.eot);
    src: url(/fonts/NotoSans-DemiLight.eot?#iefix) format("embedded-opentype"), url(/fonts/NotoSans-DemiLight.woff2) format("woff2"), url(/fonts/NotoSans-DemiLight.woff) format("woff"), url(/fonts/NotoSans-DemiLight.ttf) format("truetype");
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/NotoSans-Regular.eot);
    src: url(/fonts/NotoSans-Regular.eot?#iefix) format("embedded-opentype"), url(/fonts/NotoSans-Regular.woff2) format("woff2"), url(/fonts/NotoSans-Regular.woff) format("woff"), url(/fonts/NotoSans-Regular.ttf) format("truetype");
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url(/fonts/NotoSans-Medium.eot);
    src: url(/fonts/NotoSans-Medium.eot?#iefix) format("embedded-opentype"), url(/fonts/NotoSans-Medium.woff2) format("woff2"), url(/fonts/NotoSans-Medium.woff) format("woff"), url(/fonts/NotoSans-Medium.ttf) format("truetype");
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/NotoSans-Bold.eot);
    src: url(/fonts/NotoSans-Bold.eot?#iefix) format("embedded-opentype"), url(/fonts/NotoSans-Bold.woff2) format("woff2"), url(/fonts/NotoSans-Bold.woff) format("woff"), url(/fonts/NotoSans-Bold.ttf) format("truetype");
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
    src: url(/fonts/NotoSans-Black.eot);
    src: url(/fonts/NotoSans-Black.eot?#iefix) format("embedded-opentype"), url(/fonts/NotoSans-Black.woff2) format("woff2"), url(/fonts/NotoSans-Black.woff) format("woff"), url(/fonts/NotoSans-Black.ttf) format("truetype");
}

/* form */
input[type="text"], input[type="password"], input[type="number"], input[type="tel"], input[type="email"], input[type="date"], input[type="search"], textarea.textarea, select.select {
    font-size: 20px;
    font-weight: normal;
    color: #000;
}

input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="date"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder, textarea.textarea::-webkit-input-placeholder, select.select::-webkit-input-placeholder {
    color: #676767;
}

input[type="text"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="number"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="date"]::-moz-placeholder, input[type="search"]::-moz-placeholder, textarea.textarea::-moz-placeholder, select.select::-moz-placeholder {
    color: #676767;
}

input[type="text"]:-moz-placeholder, input[type="password"]:-moz-placeholder, input[type="number"]:-moz-placeholder, input[type="tel"]:-moz-placeholder, input[type="email"]:-moz-placeholder, input[type="date"]:-moz-placeholder, input[type="search"]:-moz-placeholder, textarea.textarea:-moz-placeholder, select.select:-moz-placeholder {
    color: #676767;
}

input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="number"]:-ms-input-placeholder, input[type="tel"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="date"]:-ms-input-placeholder, input[type="search"]:-ms-input-placeholder, textarea.textarea:-ms-input-placeholder, select.select:-ms-input-placeholder {
    color: #676767;
}

input[type="text"], input[type="password"], input[type="number"], input[type="tel"], input[type="email"], input[type="date"], input[type="search"] {
    -webkit-appearance: none;
    height: 50px;
    background-color: transparent;
    box-sizing: border-box;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="date"]:focus, input[type="search"]:focus {
    border-color: transparent;
}

input[type="text"][disabled], input[type="password"][disabled], input[type="number"][disabled], input[type="tel"][disabled], input[type="email"][disabled], input[type="date"][disabled], input[type="search"][disabled] {
    background-color: #f7f7f7;
}

input[type="text"][readonly], input[type="password"][readonly], input[type="number"][readonly], input[type="tel"][readonly], input[type="email"][readonly], input[type="date"][readonly], input[type="search"][readonly] {
    background-color: #f7f7f7;
}

.input-text {
    height: 50px;
    border: 0 none;
    box-sizing: border-box;
}

.text-area {
    width: 100%;
    resize: none;
    box-sizing: border-box;
    height: 300px;
    border: 0 none;
    background: transparent;
    font-weight: normal;
    padding: 30px 0;
}

.text-area textarea {
    border: 0 none;
    width: 100%;
    height: 100%;
    resize: none;
}

.insert {
    display: flex;
}

.input-search {
    position: relative;
    padding: 0 30px 0 10px;
    height: 70px;
    line-height: 68px;
    width: 100%;
    margin: 0 auto;
    border-bottom: 2px solid #000;
    box-sizing: border-box;
}

.input-search input {
    width: 100%;
    height: 100%;
    border: 0;
    background-color: transparent;
}

.input-search .btn-search {
    width: 30px;
    height: 30px;
    background: url("/images/home/ico_search.png") 0 center no-repeat;
    background-size: 30px;
    border: 0 none;
    position: absolute;
    right: 0;
    top: 24px;
}

@media screen and (max-width: 768px) {
    .input-search {
        height: 59px;
        line-height: 55px;
    }
    .input-search .btn-search {
        top: 11px;
    }
}

.hyphen {
    display: inline-block;
    font-size: 20px;
    color: #292929;
    line-height: 36px;
    vertical-align: top;
    margin: 0 10px;
}

.check-wrap {
    min-height: 36px;
}

.check-wrap .check {
    display: inline-block;
    margin-right: 6px;
    line-height: 24px;
    margin-top: 5px;
}

.radio-wrap .radio {
    vertical-align: middle;
}

input[type=checkbox] {
    margin-left: -2px;
    margin-top: -2px;
    opacity: 0;
    position: absolute;
}

input[type=checkbox] + label {
    display: inline-block;
    height: 24px;
    margin-left: 0;
    padding-left: 36px;
    background: url("/images/home/ico/ico_checkbox_r_off.png") no-repeat 0 0;
    background-size: 24px;
    vertical-align: middle;
    font-weight: normal;
    color: #646464;
}

input[type=checkbox]:checked + label {
    background: url("/images/home/ico/ico_checkbox_r_on.png") no-repeat 0 0;
    background-size: 24px;
}

input[type=radio] {
    margin-left: -2px;
    margin-top: -2px;
    opacity: 0;
    position: absolute;
}

input[type=radio] + label {
    display: inline-block;
    margin-left: 0;
    margin-right: 34px;
    font-size: 20px;
    padding-left: 38px;
    line-height: 24px;
    background: url("/images/home/radio.png") no-repeat 0 center;
    background-size: 24px;
    color: #676767;
    font-weight: normal;
}

input[type=radio]:checked + label {
    background: url("/images/home/radio_active.png") no-repeat 0 center;
    background-size: 24px;
}

@media screen and (max-width: 768px) {
    input[type="text"], input[type="password"], input[type="number"], input[type="tel"], input[type="email"], input[type="date"], input[type="search"] {
        font-size: 14px;
    }
    input[type=radio] + label {
        font-size: 16px;
        padding-left: 33px;
        width: 74px;
        margin-right: 40px;
        margin-bottom: 10px;
    }
}

.resource .searchform, .faq .searchform {
    max-width: 630px !important;
}

.resource .searchform .insert .input-search, .faq .searchform .insert .input-search {
    max-width: 400px;
    margin-left: 30px;
}

.faq .searchform .selectric-items {
    min-height: 415px;
}

.select-box {
    display: inline-block;
    width: 180px;
}

.selectric-wrapper {
    position: relative;
    cursor: pointer;
}

.selectric-responsive {
    width: 100%;
}

.selectric {
    border-bottom: 2px solid #000;
    position: relative;
}

.selectric .label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 38px 0 10px;
    font-size: 1.25rem;
    line-height: 68px;
    color: #676767;
    height: 68px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 500;
}

.selectric .button {
    display: block;
    position: absolute;
    right: 0;
    top: 20px;
    width: 32px;
    height: 32px;
    text-align: center;
}

.selectric .button:after {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/images/home/select_arrow_01.png") 0 0 no-repeat;
    background-size: 32px;
}

/* 	.selectric-focus .selectric {
border-color: #aaaaaa;
}

.selectric-hover .selectric {
	border-color: #c4c4c4;

	.button {
		color: #a2a2a2;

	&:after {
		border-top-color: #a2a2a2;
		}
	}
} */
.selectric-open {
    z-index: 9999;
}

.selectric-open .selectric {
    border-color: #c4c4c4;
}

.selectric-open .selectric-items {
    display: block;
    visibility: visible;
    opacity: 1;
    animation-name: select01;
    animation-duration: 700ms;
    animation-delay: 0ms;
}

.selectric-disabled {
    filter: alpha(opacity=50);
    opacity: 0.5;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.selectric-hide-select {
    position: relative;
    overflow: hidden;
    width: 0;
    height: 0;
}

.selectric-hide-select select {
    position: absolute;
    left: -100%;
}

.selectric-hide-select.selectric-is-native {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.selectric-hide-select.selectric-is-native select {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    border: none;
    z-index: 1;
    box-sizing: border-box;
    opacity: 0;
}

.selectric-input {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 1px !important;
    height: 1px !important;
    outline: none !important;
    border: none !important;
    background: none !important;
}

.selectric-temp-show {
    position: absolute !important;
    visibility: hidden !important;
    display: block !important;
}

/* Items box */
.selectric-items {
    display: none;
    position: absolute;
    width: 220px !important;
    left: -24px;
    top: -1px !important;
    background: #fffefa;
    border: 2px solid #000;
    z-index: 1;
    box-shadow: 0 0 10px -6px;
    border-radius: 10px;
    min-height: 350px;
}

.selectric-items .selectric-scroll {
    height: 100%;
    overflow: auto;
}

.selectric-above .selectric-items {
    top: auto;
    bottom: 100%;
}

.selectric-items:after {
    content: " ";
    position: absolute;
    top: 20px;
    right: 19px;
    width: 32px;
    height: 32px;
    background: url(/images/home/select_arrow.png) 0 0 no-repeat;
    background-size: 32px;
}

.selectric-items ul {
    list-style: none;
    padding: 0;
    margin: 0 20px;
    font-size: 1.25rem;
    line-height: 20px;
    min-height: 20px;
}

.selectric-items li {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    padding: 0 10px;
    color: #000;
    cursor: pointer;
    height: 68px;
    line-height: 68px;
    font-weight: 500;
}

.selectric-items li + li {
    border-top: 1px solid #c1a672;
}

.selectric-items li.selected {
    color: #000;
}

.selectric-items .disabled {
    filter: alpha(opacity=50);
    opacity: 0.5;
    cursor: default !important;
    background: none !important;
    color: #666 !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.selectric-items .selectric-group .selectric-group-label {
    font-weight: bold;
    padding-left: 10px;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: none;
    color: #444;
}

.selectric-items .selectric-group.disabled li {
    filter: alpha(opacity=100);
    opacity: 1;
}

.selectric-items .selectric-group li {
    padding-left: 25px;
}

@media screen and (max-width: 768px) {
    .resource #board-list .searchform, .faq #board-list .searchform {
        padding: 0 30px;
    }
    .resource #board-list .searchform .select-box, .faq #board-list .searchform .select-box {
        min-width: 110px;
    }
    .resource #board-list .searchform .selectric-items, .faq #board-list .searchform .selectric-items {
        height: 284px !important;
    }
    .resource .searchform .insert .input-search {
        margin-left: 20px;
    }
    .faq .searchform .insert .input-search {
        margin-left: 20px;
    }
    .selectric .label {
        height: 57px;
        line-height: 57px;
        font-size: 0.875rem;
    }
    .selectric-items {
        min-height: auto;
    }
    .selectric-items ul {
        margin: 0 10px;
    }
    .selectric-items ul li {
        font-size: 0.875rem;
        height: 56px;
        line-height: 56px;
    }
    .selectric-items::after {
        top: 13px;
    }
}

/* 컨트롤 버튼 제어 */
/*pagination*/
.pagination {
    margin-top: 60px;
    font-size: 0;
    line-height: 30px;
    text-align: center;
}

.pagination a, .pagination strong {
    display: inline-block;
    box-sizing: border-box;
    font-size: 16px;
    color: #000;
    line-height: 23px;
    font-family: "Overpass", sans-serif;
    margin: 0 7px;
}

.pagination strong {
    color: #000;
}

.pagination .page {
    display: inline-block;
    margin: 0 18px;
}

.pagination .page a, .pagination .page strong {
    display: inline-block;
    line-height: 34px;
    padding: 0;
    font-size: 16px;
    vertical-align: middle;
    color: #000;
}

.pagination .page a {
    text-decoration: none;
}

.pagination .page strong {
    color: #000;
    padding-bottom: 0px;
    color: #000;
    line-height: 28px;
    font-weight: bold;
    text-decoration: underline;
    text-underline-position: under;
}

.pagination .page strong span {
    color: #000;
    display: inline-block;
}

.pagination .btn {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 34px;
    text-decoration: none;
    vertical-align: middle;
    margin: 0 3px;
    overflow: hidden;
    text-indent: -9999px;
    font-size: 0.01em;
    color: transparent;
}

.pagination .btn:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 34px auto;
}

.pagination .btn.prev:after {
    background-image: url("/images/home/btn_prev.png");
}

.pagination .btn.next:after {
    background-image: url("/images/home/btn_next.png");
}

.pagination .btn.first:after {
    background-image: url("/images/home/btn_first.png");
}

.pagination .btn.last:after {
    background-image: url("/images/home/btn_last.png");
}

/*mobile pagination*/
.board-list-more {
    display: block;
    width: 60px;
    height: 62px;
    margin: 50px auto 0;
    background: url("/images/home/board_list_more.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.board-wrap.promotion {
    max-width: 1160px;
    margin: 0 auto;
    padding-top: 240px;
}

.board-wrap.promotion .content-header {
    text-align: center;
}

.board-wrap.promotion .content-header .section-title {
    display: inline-block;
    position: relative;
    font-size: 180px;
    padding-top: 0;
    line-height: 1.23;
    letter-spacing: -0.02em;
    font-family: "Overpass", sans-serif;
}

.board-wrap.promotion .content-header .section-title strong {
    display: inline-block;
    line-height: 1;
}

.board-wrap.promotion .content-header .section-title .bg-01 {
    position: absolute;
    left: 691px;
    top: 134px;
    width: 126px;
    height: 135px;
    background: url("/images/home/Element/puzzle_01@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.board-wrap.promotion .content-header .section-title .bg-02 {
    position: absolute;
    left: 866px;
    top: 120px;
    width: 91px;
    height: 116px;
    background: url("/images/home/Element/puzzle_02@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.board-wrap.promotion .content-header .section-title .bg-03 {
    position: absolute;
    left: -45px;
    top: -96px;
    width: 154px;
    height: 104px;
    background: url("/images/home/Element/effect03@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.board-wrap.promotion .content-header p {
    position: relative;
    font-size: 40px;
    line-height: 1.45;
    font-family: "Jua", sans-serif;
    letter-spacing: -0.02em;
}

.board-wrap.promotion .tab-wrap {
    margin-top: 130px;
    text-align: center;
}

.board-wrap.promotion .tab-wrap .tab li {
    width: auto;
    height: auto;
}

.board-wrap.promotion .tab-wrap .tab li + li {
    margin-left: 20px;
}

.board-wrap.promotion .tab-wrap .tab li a {
    font-weight: bold;
    line-height: 72px;
}

.board-wrap .board-list-more {
    display: block;
    width: 85px;
    height: 83px;
    margin: 50px auto 0;
    background: url("/images/home/more@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.board-wrap .item-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 960px;
    margin-top: 10px !important;
    margin: 0 auto;
}

.board-wrap .item-list li {
    margin-top: 60px;
    width: 50%;
    padding: 0 40px;
    box-sizing: border-box;
}

.board-wrap .item-list li span {
    display: block;
}

.board-wrap .item-list li .thumb {
    overflow: hidden;
    position: relative;
    border-radius: 20px;
}

.board-wrap .item-list li .thumb img {
    object-fit: cover;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
}

.board-wrap .item-list li .item-info {
    margin-top: 30px;
    padding: 0 10px;
    text-align: left;
}

.board-wrap .item-list li .item-info .desc {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 14px;
}

.board-wrap .item-list li .item-info .date {
    font-size: 16px;
    color: #adadad;
    font-weight: 600;
    font-family: "Overpass", sans-serif;
}

#chat-icon{
    bottom: 125px !important;
}

#regular_sub{
    position: fixed;
    height: 60px;
    width: 100%;
    background-color: #ffc000;
    color: white;
    text-align: center;
    line-height: 60px;
    font-size: 40px;
    bottom: 0px;
    z-index: 2;
    cursor: pointer;
}



@media screen and (max-width: 768px) {
    .board-wrap.promotion {
        padding-top: 120px;
    }
    .board-wrap.promotion .content-header .section-title {
        font-size: 70px;
        line-height: 1.25;
        letter-spacing: -0.02em;
        font-weight: bold;
    }
    .board-wrap.promotion .content-header .section-title .bg-01 {
        top: 53px;
        left: 232px;
        width: 59px;
        height: 64px;
    }
    .board-wrap.promotion .content-header .section-title .bg-02 {
        top: -30px;
        left: 300px;
        width: 70px;
        height: 88px;
        z-index: -1;
    }
    .board-wrap.promotion .content-header .section-title .bg-03 {
        display: none;
    }
    .board-wrap.promotion .content-header p {
        font-size: 1.5rem;
        margin-top: 5px;
    }
    .board-wrap.promotion .tab-wrap {
        margin-top: 60px;
    }
    .board-wrap.promotion .tab-wrap .tab li a {
        font-size: 16px;
        line-height: 54px;
        font-weight: bold;
        font-family: "Noto Sans KR", "돋움", Dotum, Helvetica, Arial, sans-serif;
        background-image: url("/images/home/mtab@2x.png");
        width: 108px;
        height: 54px;
    }
    .board-wrap.promotion .tab-wrap .tab li + li a {
        background-image: url("/images/home/mtab02@2x.png");
        width: 89px;
    }
    .board-wrap.promotion .tab-wrap .tab li + li.active a {
        background-image: url("/images/home/mtab_avtive02@2x.png");
    }
    .board-wrap.promotion .tab-wrap .tab li.active a {
        background-image: url("/images/home/mtab_avtive@2x.png");
    }
    .board-wrap.promotion .tab-cont {
        margin: 0 20px;
    }
    .board-wrap.promotion .tab-cont .item-list {
        display: contents;
    }
    .board-wrap.promotion .tab-cont .item-list li {
        margin-top: 40px;
        width: 100%;
        padding: 0;
    }
    .board-wrap.promotion .tab-cont .item-list li span {
        display: block;
    }
    .board-wrap.promotion .tab-cont .item-list li .item-info {
        display: block;
        text-align: left;
        margin-top: 20px;
        padding: 0 10px;
    }
    .board-wrap.promotion .tab-cont .item-list li .item-info .desc {
        font-size: 16px;
        line-height: 1.63;
        margin-bottom: 12px;
    }
    .board-wrap.promotion .tab-cont .item-list li .item-info .date {
        font-size: 16px;
        font-weight: 600;
        font-family: "Overpass", sans-serif;
    }
    .board-wrap .board-list-more {
        display: block !important;
        width: 60px;
        height: 60px;
    }
}

/* table */
/**********************************************************************************
 * normal
 * 일반 규격
 **********************************************************************************/
.data-table {
    margin-top: 80px;
    table-layout: fixed;
    width: 100%;
    padding: 0;
    border: 0;
    border-spacing: 0;
    border-collapse: initial;
    border-bottom: 2px solid #c1a672;
}

.data-table caption {
    margin: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
}

.data-table th, .data-table td {
    padding: 5px 6px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: normal;
    height: 70px;
    color: #000000;
    box-sizing: border-box;
}

.data-table th.left, .data-table td.left {
    text-align: left;
}

.data-table th.right, .data-table td.right {
    text-align: right;
}

.data-table thead {
    overflow: hidden;
}

.data-table thead th {
    color: #000;
    border-top: 2px solid #c1a672;
    border-bottom: 2px solid #c1a672;
    height: 80px;
    font-weight: 500;
    background: #fffefa;
}

.data-table thead th:first-child {
    border-left: 2px solid #c1a672;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.data-table thead th:last-child {
    border-right: 2px solid #c1a672;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.data-table td {
    border-bottom: 1px solid #e5dac5;
}

.data-table td:first-child {
    border-left: 0 none;
}

.data-table td:last-child {
    border-right: 0 none;
}

.data-table td .tag-notice {
    display: block;
    border: 2px solid #d8bb85;
    color: #c1a672;
    width: 68px;
    height: 36px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 36px;
    text-align: center;
    font-family: "Overpass", sans-serif;
}

.data-table td .tag-notice.mobile {
    display: none;
}

.data-table td .text {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.data-table td.date, .data-table td.no {
    font-family: "Overpass", sans-serif;
    font-weight: normal;
}

.data-table td .attach {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 25px;
    background: url("/images/home/attach.png") 0 0 no-repeat;
    background-size: 100% auto;
    vertical-align: middle;
}

.data-table .notice td {
    border-bottom: 1px solid #c1a672;
    font-weight: 500;
}

.data-table tr:last-child td {
    border-bottom: 0 none;
}

.data-table.question {
    margin-top: 150px;
    border-top: 2px solid #c1a672;
}

.data-table.question th, .data-table.question td {
    padding: 0;
    height: 89px;
    border-bottom: 1px solid #c1a672;
    font-weight: bold;
}

.data-table.question th.top, .data-table.question td.top {
    vertical-align: top;
    padding-top: 30px;
}

.data-table.question td .en {
    font-family: "Overpass", sans-serif;
}

.data-table.question tr:last-child th {
    border-bottom: 0 none;
}

.data-table.question tr:last-child td {
    border-bottom: 0 none;
}

@media screen and (max-width: 768px) {
    .data-table {
        display: block;
        table-layout: initial;
        border-top: 1px solid #c1a672;
        border-bottom: 1px solid #c1a672;
        border-collapse: collapse;
        margin-top: 50px;
    }
    .data-table thead {
        border: 0 !important;
        clip: rect(0 0 0 0) !important;
        height: 1px !important;
        margin: -1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
    }
    .data-table thead.focusable:active, .data-table thead.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }
    .data-table tbody {
        display: block;
    }
    .data-table tr {
        display: block;
        padding: 19px 0;
        border-bottom: 1px solid #e5dac5;
        width: 100%;
    }
    .data-table td {
        position: relative;
        display: block;
        border-bottom: 0 none;
        width: 100%;
        height: auto;
        text-align: left;
        font-size: 1rem;
        padding: 3px 0 2px;
        padding-right: 70px;
        line-height: 2;
    }
    .data-table td.no {
        display: none;
    }
    .data-table td.category {
        display: none;
    }
    .data-table td.date {
        position: relative;
    }
    .data-table td.date .attach {
        position: absolute;
        right: 0;
        top: 8px;
    }
    .data-table td .tag-notice {
        position: absolute;
        right: 0;
        top: 3px;
        width: auto;
        height: auto;
        line-height: 1;
        padding: 6px 9px;
        font-size: 12px;
        border-width: 1.5px;
    }
    .data-table td .tag-notice.mobile {
        display: block;
    }
    .data-table td .text {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        max-height: 3em;
        line-height: 1.5em;
        white-space: normal;
    }
    .data-table .notice {
        border-bottom: 1px solid #c1a672;
    }
    .data-table .notice td {
        border-bottom: 0 none;
    }
}

/* tab */
/**********************************************************************************
 * standard
 * 일반 규격
 **********************************************************************************/
.tab-wrap .tab-desc {
    font-size: 0.9375rem;
    margin-bottom: 24px;
}

.tab-wrap .tab-cont .cont-box {
    display: none;
}

.tab li {
    display: inline-flex;
}

.tab li + li {
    margin-left: 16px;
}

.tab li + li a {
    background-image: url("/images/home/tab_01@2x.png");
}

.tab li + li.active a {
    background-image: url("/images/home/tab_01_active@2x.png");
}

.tab li a {
    display: block;
    width: 160px;
    height: 65px;
    line-height: 63px;
    text-align: center;
    background: url("/images/home/tab.png") 0 0 no-repeat;
    color: #000;
    font-size: 1.375rem;
    border-radius: 23px;
    font-family: "Overpass", sans-serif;
    background-size: 100% auto;
}

.tab li a .num {
    display: inline-block;
    font-size: 0.75rem;
    line-height: 1;
    vertical-align: top;
    margin-top: 15px;
    margin-left: 4px;
}

.tab li.active a {
    background-image: url("/images/home/tab_active.png");
    color: #fff;
}

/* board-common */
.board-wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding-top: 240px;
}

.board-wrap .content-header {
    text-align: center;
}

.board-wrap .content-header .section-title {
    display: inline-block;
    position: relative;
    font-size: 180px;
    padding-top: 0;
    line-height: 1.23;
    letter-spacing: -0.02em;
    font-family: "Overpass", sans-serif;
}

.board-wrap .content-header .section-title strong {
    display: inline-block;
    line-height: 1;
}

.board-wrap .content-header .section-title .bg-01 {
    position: absolute;
    right: -113px;
    top: -20px;
    width: 100px;
    height: 84px;
    background: url("/images/home/Element/talk01@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.board-wrap .content-header .section-title .bg-02 {
    position: absolute;
    left: -86px;
    top: 135px;
    width: 195px;
    height: 178px;
    background: url("/images/home/Element/star@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.board-wrap .content-header p {
    position: relative;
    font-size: 40px;
    line-height: 1.45;
    font-family: "Jua", sans-serif;
    letter-spacing: -0.02em;
}

.board-wrap.resource .content-header .section-title .bg-01 {
    width: 110px;
    height: 74px;
    right: -105px;
    top: 35px;
    background-image: url("/images/home/Element/speaker01@2x.png");
}

.customer {
    max-width: 1160px;
    margin: 0 auto;
    padding-top: 240px;
}

.customer .content-header {
    text-align: center;
}

.customer .content-header .section-title {
    display: inline-block;
    position: relative;
    font-size: 180px;
    padding-top: 0;
    line-height: 1.23;
    letter-spacing: -0.02em;
    font-family: "Overpass", sans-serif;
}

.customer .content-header .section-title strong {
    display: inline-block;
    line-height: 1;
}

.customer .content-header .section-title .bg-01 {
    position: absolute;
    left: 284px;
    top: -69px;
    width: 186px;
    height: 208px;
    background: url("/images/home/Element/headset@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.customer .content-header .section-title .bg-02 {
    position: absolute;
    left: -64px;
    top: 178px;
    width: 110px;
    height: 108px;
    background: url("/images/home/Element/heart@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.customer .content-header .section-title .bg-03 {
    position: absolute;
    left: -145px;
    top: 160px;
    width: 40px;
    height: 40px;
    background: url("/images/home/Element/effect04@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.customer .content-header p {
    position: relative;
    font-size: 40px;
    line-height: 1.45;
    font-family: "Jua", sans-serif;
    letter-spacing: -0.02em;
}

.customer .info {
    color: #7c7c7c;
    font-size: 16px;
    margin-top: 30px;
    line-height: 1.5;
}

.customer .info p {
    position: relative;
    padding-left: 20px;
}

.customer .info p:before {
    content: '※';
    position: absolute;
    left: 0;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.customer .btn-area {
    margin-top: 70px;
    font-size: 18px;
    position: relative;
    text-align: center;
}

.customer .btn-area .btn {
    position: relative;
    display: inline-block;
    width: 180px;
    height: 70px;
    line-height: 70px;
    font-family: "Jua", sans-serif;
    text-align: center;
    text-decoration: underline;
    background: url("/images/home/btn_more@2x.png") center center no-repeat;
    background-size: auto 68px;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
}

.customer .btn-area .btn + .btn {
    margin-left: 15px;
}

.customer .btn-area .btn .ico {
    display: inline-block;
    width: 38px;
    height: 38px;
    background-size: 38px auto;
    vertical-align: top;
    margin-top: 16px;
    transition: margin 0.25s ease-in-out;
    margin-left: 6px;
}

.customer .btn-area .btn .ico.check {
    background: url("/images/home/btn_signup@2x.png") center center no-repeat;
    background-size: 38px;
}

.customer .btn-area .btn .ico.cancel {
    background: url("/images/home/btn_cancel@2x.png") center center no-repeat;
    background-size: 38px;
}

.customer .btn-area .btn:hover {
    background-size: auto 70px;
}

.customer .btn-area .btn:hover .ico {
    margin-left: 10px;
}

/* board-list */
#board-list .searchform {
    max-width: 500px;
    margin: 98px auto 0;
}

#board-list .mobile {
    display: none;
}

/*border-view*/
#board-view {
    margin-top: 150px;
}

.board-view-header {
    position: relative;
    padding: 28px 40px;
    background-color: #fbc600;
    border-radius: 20px;
}

.board-view-header .board-view-subject {
    font-size: 1.875rem;
    font-weight: bold;
}

.board-view-header .board-view-date {
    display: block;
    position: absolute;
    right: 40px;
    top: 52%;
    transform: translateY(-50%);
    font-family: "Overpass", sans-serif;
    font-size: 1.25rem;
    font-weight: bold;
}

.board-view-header .board-view-date .label {
    margin-right: 10px;
    font-weight: normal;
}

.board-view-attach {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0;
    border-bottom: 1px solid #c1a672;
}

.board-view-attach .category {
    display: block;
    padding: 0 20px;
    line-height: 37px;
    background: url("/images/home/category_01.png") 0 0 no-repeat;
    background-size: auto 37px;
    color: #c1a672;
    font-weight: bold;
}

.board-view-attach .category.category01 {
    background-image: url("/images/home/category_01.png");
}

.board-view-attach .category.category02 {
    background-image: url("/images/home/category_02.png");
}

.board-view-attach .category.category03 {
    background-image: url("/images/home/category_03.png");
}

.board-view-attach .category.category04 {
    background-image: url("/images/home/category_04.png");
}

.board-view-attach .attach {
    display: block;
    padding-left: 38px;
    background: url("/images/home/attach.png") 0 0 no-repeat;
    background-size: 24px;
    line-height: 24px;
    font-weight: bold;
    text-decoration: underline;
    text-underline-position: under;
    font-family: "Overpass", sans-serif;
    margin-top: 4px;
}

.board-view-body {
    padding: 50px 40px 40px;
}

.board-view-body p {
    font-size: 20px;
    white-space: pre-line;
}

.board-view-body .thumb {
    margin-top: 50px;
}

.board-view-body img {
    width: 100%;
}

.board-footer .board-button {
    display: block;
    width: 136px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Jua", sans-serif;
    border: 0 none;
    background: url("/images/home/btn_board_list.png") 0 0 no-repeat;
    background-size: 100% auto;
    margin: 0 auto;
}

.board-footer .board-footer-list {
    margin-top: 50px;
    border-top: 1px solid #c1a672;
    border-bottom: 1px solid #c1a672;
}

.board-footer .board-footer-list div {
    line-height: 70px;
    background: url("/images/home/board_prev.png") 20px center no-repeat;
    background-size: 18px auto;
}

.board-footer .board-footer-list div + div {
    border-top: 1px solid #e5dac5;
    background-image: url("/images/home/board_next.png");
}

.board-footer .board-footer-list div a {
    display: block;
    padding-left: 58px;
}

.board-footer .board-footer-list div .subject {
    margin-left: 30px;
}

.board-footer .board-footer-list div .date {
    float: right;
    padding-right: 20px;
}

.board-footer .board-footer-list .mobile {
    display: none;
}

@media screen and (max-width: 768px) {
    .board-wrap {
        padding-top: 126px;
    }
    .board-wrap .content-header .section-title {
        font-size: 80px;
        line-height: 1.25;
        letter-spacing: -0.02em;
        font-weight: bold;
    }
    .board-wrap .content-header .section-title .bg-01 {
        right: -45px;
        top: -16px;
        width: 50px;
        height: 42px;
    }
    .board-wrap .content-header .section-title .bg-02 {
        left: -21px;
        top: 62px;
        width: 92px;
        height: 178px;
    }
    .board-wrap .content-header p {
        font-size: 1.5rem;
        margin-top: 5px;
    }
    .board-wrap .board {
        margin: 0 20px;
    }
    .board-wrap.resource .content-header .section-title {
        font-size: 4.375rem;
    }
    .board-wrap.resource .content-header .section-title .bg-01 {
        width: 64px;
        height: 43px;
        right: -18px;
        top: -15px;
    }
    .board-wrap.resource .content-header .section-title .bg-02 {
        left: 29px;
        top: 53px;
    }
    #board-list .searchform {
        margin: 25px auto 0;
        padding: 0 60px;
    }
    #board-list .mobile {
        display: block;
    }
    #board-view {
        margin: 50px 20px 0;
    }
    .board-view-header {
        position: relative;
        padding: 15px 20px 15px;
        border-radius: 14px;
    }
    .board-view-header .board-view-subject {
        font-size: 1.5rem;
        font-weight: bold;
    }
    .board-view-header .board-view-date {
        position: static;
        font-size: 1rem;
        margin-top: 16px;
        font-weight: bold;
        transform: none;
    }
    .board-view-header .board-view-date .label {
        margin-right: 0;
    }
    .board-view-attach {
        display: block;
        padding: 20px 0;
        border-bottom: 1px solid #c1a672;
    }
    .board-view-attach .category {
        padding: 0 11px;
        font-size: 12px;
        font-weight: normal;
        height: 32px;
        line-height: 32px;
        background-image: url("/images/home/category_01_m.png");
        background-size: auto 32px;
    }
    .board-view-attach .category.category01 {
        background-image: url("/images/home/category_01_m.png");
    }
    .board-view-attach .category.category02 {
        background-image: url("/images/home/category_02_m.png");
    }
    .board-view-attach .category.category03 {
        background-image: url("/images/home/category_03_m.png");
    }
    .board-view-attach .category.category04 {
        background-image: url("/images/home/category_04_m.png");
    }
    .board-view-attach .attach {
        display: block;
        margin-top: 10px;
    }
    .board-view-body {
        padding: 30px 10px 0;
    }
    .board-view-body p {
        font-size: 1rem;
    }
    .board-view-body .thumb {
        margin-top: 40px;
    }
    .board-footer .board-button-wrap {
        display: none;
    }
    .board-footer .board-footer-list {
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        margin-top: 0;
        border-top: 1px solid #000;
        border-bottom: 0 none;
        z-index: 1;
        background-color: #fffcf6;
        transition: all 0.3s ease-out;
    }
    .board-footer .board-footer-list .board-button.mobile {
        display: block;
        background: none;
        line-height: 64px;
    }
    .board-footer .board-footer-list div {
        background: url("/images/home/board_prev_m@3x.png") center center no-repeat;
        background-size: 9px auto;
        width: 64px;
        height: 64px;
        float: left;
    }
    .board-footer .board-footer-list div + div {
        background-image: url("/images/home/board_next_m@3x.png");
        border-top: 0 none;
        float: right;
    }
    .board-footer .board-footer-list div a {
        display: block;
        padding-left: 0;
        width: 100%;
        height: 100%;
    }
    .board-footer .board-footer-list div .subject {
        margin-left: 30px;
    }
    .board-footer .board-footer-list div .date {
        float: right;
        padding-right: 20px;
    }
    .board-footer .board-footer-list.nav-down {
        bottom: -100px;
    }
    .board-footer .board-footer-list.nav-up {
        bottom: 0;
    }
    .customer {
        padding-top: 120px;
    }
    .customer .content-header .section-title {
        font-size: 70px;
        line-height: 1.25;
        letter-spacing: -0.02em;
        font-weight: bold;
    }
    .customer .content-header .section-title .bg-01 {
        top: -39px;
        left: auto;
        right: -65px;
        width: 81px;
        height: 91px;
        z-index: -1;
    }
    .customer .content-header .section-title .bg-02 {
        top: 79px;
        left: -26px;
        width: 50px;
        height: 48px;
    }
    .customer .content-header .section-title .bg-03 {
        top: 71px;
        left: -115px;
        width: 17px;
        height: 17px;
    }
    .customer .content-header p {
        font-size: 1.5rem;
        margin-top: 5px;
    }
    .customer .board {
        margin: 0 20px;
    }
    .customer .board .question {
        margin-top: 60px;
        display: table;
    }
    .customer .board .question tr {
        display: table-row;
        padding: 24px 0;
    }
    .customer .board .question tr th, .customer .board .question tr td {
        font-size: 16px;
        display: table-cell;
        height: 72px;
    }
    .customer .board .question tr th.top, .customer .board .question tr td.top {
        padding-top: 24px;
    }
    .customer .board .question tr th {
        padding-right: 20px;
    }
    .customer .board .question tr.category {
        display: block;
    }
    .customer .board .question tr.category th, .customer .board .question tr.category td {
        display: block;
        border: 0 none;
        height: auto;
    }
    .customer .board .question tr.category th {
        height: auto;
    }
    .customer .board .question tr.category .radio-wrap {
        margin-top: 20px;
        margin-bottom: -10px;
    }
    .customer .board .question tr input {
        font-size: 16px;
    }
    .customer .board .question tr .text-area {
        padding: 20px 0;
        height: 240px;
    }
    .customer .info {
        padding: 0 20px;
    }
    .customer .info p {
        font-size: 14px;
    }
    .customer .btn-area {
        display: flex;
        position: fixed;
        bottom: 0;
        margin-top: 0;
        border-top: 1px solid #000;
        background-color: #fffcf6;
        z-index: 2;
        width: 100%;
    }
    .customer .btn-area .btn {
        width: 50%;
        background: none !important;
        text-decoration: none;
    }
    .customer .btn-area .btn + .btn {
        margin-left: 0;
    }
    .customer .btn-area .btn.sign {
        border-right: 1px solid #000;
    }
    .eng .customer .board .question tr.category .radio-wrap {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .eng .customer .board .question tr.category .radio-wrap .radio {
        width: 50%;
    }
    .eng .customer .board .question tr.category .radio-wrap .radio label {
        width: auto;
        margin-right: 0;
    }
    .jp #board-list .searchform {
        padding: 0 50px;
    }
    .jp .resource #board-list .searchform, .jp .faq #board-list .searchform {
        padding: 0 20px;
    }
    .jp .customer .board .question tr.category .radio-wrap {
        display: flex;
        flex-wrap: wrap;
    }
    .jp .customer .board .question tr.category .radio-wrap .radio {
        width: 50%;
    }
    .jp input[type=radio] + label {
        width: auto;
    }
}

#header {
    position: fixed;
    top: 0;
    z-index: 20;
    width: 100%;
    transition: height .3s ease-in-out;
}

#header .header-wrap {
    position: relative;
}

#header .header-wrap h1.logo {
    font-size: 0;
    position: absolute;
    top: 40px;
    left: 50px;
}

#header .header-wrap h1.logo a {
    display: inline-block;
    width: 80px;
    height: 58px;
    background: url("/images/home/logo_eggschool.svg") 0 0 no-repeat;
    background-size: 100% auto;
    vertical-align: middle;
}

#header .header-wrap h1.kinder-logo {
    font-size: 0;
    position: absolute;
    top: 50px;
    left: 50px;
}

#header .header-wrap h1.kinder-logo a {
    display: inline-block;
    width: 59px;
    height: 40px;
    background: url("/images/home/logo_Kinder_kr_new.svg") 0 0 no-repeat;
    background-size: 100% auto;
    vertical-align: middle;
}

@keyframes scale {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

#header .header-wrap .utill-menu {
    position: absolute;
    right: 50px;
    top: 50px;
}

#header .header-wrap .utill-menu .language-select {
    display: inline-block;
    margin-top: 10px;
    position: relative;
    vertical-align: middle;
}

#header .header-wrap .utill-menu .language-select .label {
    display: block;
    font-family: "Overpass", sans-serif;
    font-size: 16px;
    padding-right: 44px;
    height: 38px;
    line-height: 38px;
    background: url("/images/home/ic_arrow_down1.svg") right 0 no-repeat;
    background-size: 38px auto;
    color: #fff;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    /*  &:hover{
                        background-size: 42px auto;
                        background-position: right 1px top -2px;
                        transition:all 0.25s ease-in-out;
                        margin-right: -4px;
                        padding-right: 48px;

                    } */
}

#header .header-wrap .utill-menu .language-select .label::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 8px;
    background: url("/images/home/ic_arrow.png") right 0 no-repeat;
    background-size: 12px auto;
    position: absolute;
    right: 13px;
    top: 50%;
    margin-top: -3px;
}

#header .header-wrap .utill-menu .language-select ul {
    position: absolute;
    left: -10px;
    top: 54px;
    width: 80px;
    height: 144px;
    text-align: center;
    background: #fbc600;
    background-size: 80px auto;
    font-size: 20px;
    line-height: 1.7;
    border: 6px;
    transition: height .2s ease-in-out, overflow .2s ease-in-out, visibility .2s ease-in-out;
    border-radius: 47% 47% 47% 42% / 42% 43% 43% 50%;
    visibility: hidden;
    opacity: 0;
}

#header .header-wrap .utill-menu .language-select ul.active {
    visibility: visible;
    opacity: 1;
    animation-name: select;
    animation-duration: 400ms;
    animation-delay: 0ms;
}

#header .header-wrap .utill-menu .language-select ul li:first-child {
    padding-top: 25px;
}

#header .header-wrap .utill-menu .language-select ul li a {
    position: relative;
    color: #fff;
}

#header .header-wrap .utill-menu .language-select ul li a:hover {
    color: #000;
}

#header .header-wrap .utill-menu .language-select ul li a:hover::after {
    right: auto;
    left: 0;
    width: 100%;
}

#header .header-wrap .utill-menu .language-select ul li a::after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 0;
    height: 2px;
    background-color: #000000;
    -webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

#header .header-wrap .utill-menu .language-select ul li.active a {
    color: #000000;
}

#header .header-wrap .utill-menu .language-select ul li.active a::after {
    right: auto;
    left: 0;
    width: 100%;
}

#header .header-wrap .utill-menu .language-select.active ul {
    /*   width: 84px;
                        height: 144px; */
    overflow: initial;
    visibility: visible;
}

#header .header-wrap .utill-menu .mypape-select {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

#header .header-wrap .utill-menu .mypape-select .label {
    display: inline-block;
    vertical-align: middle;
    width: 82px;
    height: 42px;
    line-height: 42px;
    background: url("/images/home/btn_mypage.svg") 0 0 no-repeat;
    background-size: 100% auto;
    margin-left: 16px;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    color: #fff;
}

#header .header-wrap .utill-menu .mypape-select ul {
    position: absolute;
    left: 10px;
    top: 51px;
    display: none;
    width: 92px;
    height: 144px;
    text-align: center;
    background: url("/images/home/mypage.svg") 0 0 no-repeat;
    background-size: 100% auto;
    padding-top: 18px;
    font-size: 14px;
    line-height: 2;
}

#header .header-wrap .utill-menu .mypape-select ul.active {
    visibility: visible;
    opacity: 1;
    animation-name: select;
    animation-duration: 400ms;
    animation-delay: 0ms;
}

#header .header-wrap .utill-menu .mypape-select ul li a {
    position: relative;
    color: #fff;
    opacity: 0.6;
}

#header .header-wrap .utill-menu .mypape-select ul li a:hover {
    opacity: 1;
}

#header .header-wrap .utill-menu .mypape-select ul li a:hover::after {
    right: auto;
    left: 0;
    width: 100%;
}

#header .header-wrap .utill-menu .mypape-select ul li a::after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 0;
    height: 1px;
    background-color: #fff;
    -webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

#header .header-wrap .utill-menu .mypape-select ul li.active a {
    opacity: 1;
}

#header .header-wrap .utill-menu .mypape-select ul li.active a::after {
    right: auto;
    left: 0;
    width: 100%;
}

#header .header-wrap .utill-menu .mypape-select.active ul {
    display: block;
}

#header .header-wrap .utill-menu .btn-buy {
    display: inline-block;
    vertical-align: middle;
    width: 90px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background: url("/images/home/btn_buy.svg") 0 0 no-repeat;
    background-size: 100% auto;
    color: #fff;
    font-size: 13.5px;
}

#header .header-wrap .utill-menu .btn-login {
    display: inline-block;
    vertical-align: middle;
    width: 82px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    background: url("/images/home/btn_login.svg") 0 0 no-repeat;
    background-size: 100% auto;
    margin-left: 16px;
    color: #fff;
    font-size: 14px;
}

#header .header-wrap .gnb {
    width: 650px;
    margin: 0 auto;
    padding-top: 64px;
}

#header .header-wrap .gnb .nav {
    width: 100%;
    text-align: center;
    overflow: hidden;
}

#header .header-wrap .gnb .nav .depth01 {
    position: relative;
    display: inline-block;
    padding: 0;
    width: 19%;
}

#header .header-wrap .gnb .nav .depth01 > a {
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    font-family: "Overpass", sans-serif;
    height: 42px;
    line-height: 42px;
}

#header .header-wrap .gnb .nav .depth01:hover, #header .header-wrap .gnb .nav .depth01.active {
    background: url("/images/home/bg_depth01_01_w.png") center 0 no-repeat;
}

#header .header-wrap .gnb .nav .depth01:nth-child(2):hover, #header .header-wrap .gnb .nav .depth01:nth-child(2).active {
    background: url("/images/home/bg_depth01_02_w.png") center 0 no-repeat;
}

#header .header-wrap .gnb .nav .depth01:nth-child(4):hover, #header .header-wrap .gnb .nav .depth01:nth-child(4).active {
    background: url("/images/home/bg_depth01_04_w.png") center 0 no-repeat;
}

#header .header-wrap .gnb .nav .depth02 {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 25px;
    padding-top: 30px;
    transform: translate(-50%, 0);
    width: 100%;
    transition: all 0.3s ease-out;
}

#header .header-wrap .gnb .nav .depth02 li {
    display: block;
    margin: 0;
}

#header .header-wrap .gnb .nav .depth02 li a {
    position: relative;
    font-size: 16px;
    line-height: 2.25;
    color: #7c7c7c;
}

#header .header-wrap .gnb .nav .depth02 li a:after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 0;
    height: 1px;
    background-color: #222;
    -webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

#header .header-wrap .gnb .nav .depth02 li:hover, #header .header-wrap .gnb .nav .depth02 li.active {
    background: no-repeat;
    background-image: none !important;
}

#header .header-wrap .gnb .nav .depth02 li:hover a, #header .header-wrap .gnb .nav .depth02 li.active a {
    color: #000;
}

#header .header-wrap .gnb .nav .depth02 li:hover a::after, #header .header-wrap .gnb .nav .depth02 li.active a::after {
    right: auto;
    left: 0;
    width: 100%;
}

#header.kinder-header {
    opacity: 0;
    -webkit-transform: translateY(-180px);
    transform: translateY(-180px);
    height: 110px;
    transition: height .3s ease-in-out;
}

#header.kinder-header .utill-menu {
    display: inline-block;
}

#header.kinder-header .utill-menu .language-select {
    margin-left: 30px;
}

#header.kinder-header::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: -110px;
    transition: top 0.3s ease-out;
}

#header.kinder-header.nav-down {
    transition: all 0.3s ease-out;
    background: #fff;
}

#header.kinder-header.nav-down::before {
    top: 0;
}

#header.kinder-header.nav-down h1.kinder-logo {
    top: 30px;
    transition: all 0.3s ease-out;
}

#header.kinder-header.nav-down .header-wrap .utill-menu {
    top: 30px;
    transition: all 0.3s ease-out;
}

#header.kinder-header.nav-down .header-wrap .utill-menu .language-select .label {
    color: #000000;
}

#header.kinder-header.nav-down .header-wrap .utill-menu .mypape-select .label {
    background-image: url("/images/home/btn_mypage_sticky.svg");
    color: #000;
}

#header.kinder-header.nav-down .header-wrap .utill-menu .mypape-select ul {
    background-image: url("/images/home/mypage_sticky.svg");
}

#header.kinder-header.nav-down .header-wrap .utill-menu .mypape-select ul li a {
    color: #7c7c7c;
    opacity: 1;
}

#header.kinder-header.nav-down .header-wrap .utill-menu .mypape-select ul li a:hover {
    color: #000000;
}

#header.kinder-header.nav-down .header-wrap .utill-menu .mypape-select ul li a::after {
    background-color: #000000;
}

#header.kinder-header.nav-down .header-wrap .utill-menu .mypape-select ul li.active a {
    color: #000000;
}

#header.kinder-header.nav-down .gnb {
    padding: 34px 0 70px;
    transition: all 0.3s ease-out;
}

#header.kinder-header.nav-down .gnb .nav .depth01 > a {
    color: #000000;
}

#header.kinder-header.nav-down .gnb .nav .depth01:hover, #header.kinder-header.nav-down .gnb .nav .depth01.active {
    background: url("/images/home/bg_depth01_01.png") center 0 no-repeat;
}

#header.kinder-header.nav-down .gnb .nav .depth01:nth-child(2):hover, #header.kinder-header.nav-down .gnb .nav .depth01:nth-child(2).active {
    background: url("/images/home/bg_depth01_02.png") center 0 no-repeat;
}

#header.kinder-header.nav-down .gnb .nav .depth01:nth-child(4):hover, #header.kinder-header.nav-down .gnb .nav .depth01:nth-child(4).active {
    background: url("/images/home/bg_depth01_04.png") center 0 no-repeat;
}

#header.kinder-header.nav-down .utill-menu {
    display: inline-block;
}

#header.kinder-header.nav-down .utill-menu .btn-login {
    background-image: url("/images/home/login_sticky.svg");
    color: #000;
}

#header.kinder-header.sticky {
    background: transparent;
    transition: all 0.3s ease-out;
}

#header.kinder-header.sticky::before {
    top: -100%;
}

#header.kinder-header.sticky h1.kinder-logo {
    top: 40px;
    transition: all 0.3s ease-out;
}

#header.kinder-header.sticky .header-wrap .utill-menu {
    top: 40px;
    transition: all 0.3s ease-out;
}

#header.kinder-header.sticky .header-wrap .utill-menu .language-select .label {
    color: #fff;
}

#header.kinder-header.sticky .header-wrap .utill-menu .mypape-select .label {
    background-image: url("/images/home/btn_mypage.svg");
}

#header.kinder-header.sticky .gnb {
    padding: 44px 0 60px;
    transition: all 0.3s ease-out;
}

#header.kinder-header.sticky .gnb .nav .depth01 a {
    color: #fff;
}

#header.kinder-header.sticky .gnb .nav .depth01:hover, #header.kinder-header.sticky .gnb .nav .depth01.active {
    background: url("/images/home/bg_depth01_01_w.png") center 0 no-repeat;
}

#header.kinder-header.sticky .gnb .nav .depth01:nth-child(2):hover, #header.kinder-header.sticky .gnb .nav .depth01:nth-child(2).active {
    background: url("/images/home/bg_depth01_02_w.png") center 0 no-repeat;
}

#header.kinder-header.sticky .gnb .nav .depth01:nth-child(4):hover, #header.kinder-header.sticky .gnb .nav .depth01:nth-child(4).active {
    background: url("/images/home/bg_depth01_04_w.png") center 0 no-repeat;
}

#header.kinder-header.sticky .utill-menu {
    display: inline-block;
}

#header.kinder-header.sticky .utill-menu .btn-login {
    background-image: url("/images/home/btn_login.svg");
}

#header.kinder-header.active, #header.kinder-header.active.sticky {
    height: 270px;
    transition: height .3s ease-in-out;
}

#header.kinder-header.active::before, #header.kinder-header.active.sticky::before {
    top: 0;
    border-bottom: 1px solid #dfdfdf;
}

#header.kinder-header.active .nav, #header.kinder-header.active.sticky .nav {
    overflow: inherit;
}

#header.kinder-header.active .nav .depth01 > a, #header.kinder-header.active.sticky .nav .depth01 > a {
    color: #000000;
}

#header.kinder-header.active .nav .depth01:hover, #header.kinder-header.active .nav .depth01.active, #header.kinder-header.active.sticky .nav .depth01:hover, #header.kinder-header.active.sticky .nav .depth01.active {
    background: url("/images/home/bg_depth01_01.png") center 0 no-repeat;
}

#header.kinder-header.active .nav .depth01:nth-child(2):hover, #header.kinder-header.active .nav .depth01:nth-child(2).active, #header.kinder-header.active.sticky .nav .depth01:nth-child(2):hover, #header.kinder-header.active.sticky .nav .depth01:nth-child(2).active,
#header.kinder-header.active .nav .depth01:nth-child(5):hover, #header.kinder-header.active .nav .depth01:nth-child(5).active, #header.kinder-header.active.sticky .nav .depth01:nth-child(5):hover, #header.kinder-header.active.sticky .nav .depth01:nth-child(5).active {
    background: url("/images/home/bg_depth01_02.png") center 0 no-repeat;
}

#header.kinder-header.active .nav .depth01:nth-child(4):hover, #header.kinder-header.active .nav .depth01:nth-child(4).active, #header.kinder-header.active.sticky .nav .depth01:nth-child(4):hover, #header.kinder-header.active.sticky .nav .depth01:nth-child(4).active {
    background: url("/images/home/bg_depth01_04.png") center 0 no-repeat;
}

#header.kinder-header.active .nav .depth02, #header.kinder-header.active.sticky .nav .depth02 {
    opacity: 1;
    transition: all 0.3s ease-in-out;
}

#header.kinder-header.active .nav .depth02 a, #header.kinder-header.active.sticky .nav .depth02 a {
    color: #7c7c7c;
}

#header.kinder-header.active .utill-menu .btn-login, #header.kinder-header.active.sticky .utill-menu .btn-login {
    background-image: url("/images/home/login_sticky.svg");
    color: #000;
}

#header.kinder-header.active .utill-menu .mypape-select .label, #header.kinder-header.active.sticky .utill-menu .mypape-select .label {
    background-image: url("/images/home/btn_mypage_sticky.svg");
    color: #000;
}

#header.kinder-header.active .utill-menu .language-select .label, #header.kinder-header.active.sticky .utill-menu .language-select .label {
    color: #000;
}

#header.kinder-header.board-header::before {
    background: transparent;
}

#header.kinder-header.board-header.active::before {
    background: #fff;
}

#header.kinder-header.board-header.nav-down {
    background: transparent;
}

#header.nav-up {
    top: -110px;
    transition: all 0.3s ease-out;
}

#wrap.eng #header .header-wrap h1.kinder-logo a, #wrap.jp #header .header-wrap h1.kinder-logo a {
    width: 300px;
    height: 50px;
    /*background: url("/images/home/logo_Kinder.svg") 0 0 no-repeat;*/
    background: url("/images/home/logo_Kinder_kr_new.svg") 0 0 no-repeat;
}

#wrap.eng #header .header-wrap .utill-menu .mypape-select ul, #wrap.jp #header .header-wrap .utill-menu .mypape-select ul {
    width: 122px;
    height: 140px;
    left: 0;
    padding-top: 5px;
    background-image: url("/images/home/images_eng/mypage.svg");
    line-height: 1.2;
}

#wrap.eng #header .header-wrap .utill-menu .mypape-select ul a, #wrap.jp #header .header-wrap .utill-menu .mypape-select ul a {
    font-weight: bold;
    font-family: "Overpass", sans-serif;
}

#wrap.eng #header .header-wrap .utill-menu .mypape-select ul li, #wrap.jp #header .header-wrap .utill-menu .mypape-select ul li {
    padding-top: 6px;
}

#wrap.eng #header .header-wrap .utill-menu .btn-buy, #wrap.jp #header .header-wrap .utill-menu .btn-buy {
    font-family: 'Overpass', sans-serif;
}

#wrap.eng #header .header-wrap .utill-menu .btn-login, #wrap.jp #header .header-wrap .utill-menu .btn-login {
    font-family: 'Overpass', sans-serif;
}

#wrap.eng #header .header-wrap .utill-menu .mypape-select .label, #wrap.jp #header .header-wrap .utill-menu .mypape-select .label {
    font-family: 'Overpass', sans-serif;
}

#wrap.eng #header.kinder-header.nav-down .header-wrap .utill-menu .mypape-select ul, #wrap.jp #header.kinder-header.nav-down .header-wrap .utill-menu .mypape-select ul {
    background-image: url("/images/home/images_eng/mypage_sticky.svg");
}


.snb_wrapper {
    position: fixed;
    right: 30px;
    bottom: 165px;
    z-index: 100;
}

.snb_wrapper,
.fixed_banner {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform .3s ease-in;
    transition: -webkit-transform .3s ease-in;
    -o-transition: transform .3s ease-in;
    transition: transform .3s ease-in;
    transition: transform .3s ease-in, -webkit-transform .3s ease-in;
}

.snb_wrapper.active,
.fixed_banner.active {
    -webkit-transform: translateY(-55px);
    -ms-transform: translateY(-55px);
    transform: translateY(-55px);
}

/* S: top button - 230921 */
.snb_wrapper {
    position: fixed;
    /*right: 0;*/
    /*bottom: 100px;*/
    z-index: 10;
    transform: translateY(0);
    transition: transform .3s ease-in;
}

.snb_top_btn {
    position: fixed;
    width: 55px;
    height: 55px;
    right: 25px;
    bottom: 15px;
    z-index: 12;
    display: inline-block;
    background: url(/images/home/renew/snb_top_arrow.png);
    background-size: contain;
    font-size: 0;
    opacity: 0;
    transition: opacity .3s ease-in;
}
.snb_top_btn.active {
    opacity: 1;
}
/* E: top button - 230921 */

.snb_wrapper .snb_link {
    margin-top: 0.8em;
}

.snb_wrapper .snb_link a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    font-family: "M PLUS 1p", sans-serif;
}

.snb_wrapper .snb_link p {
    width: 100%;
    position: absolute;
    top: 25%;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

.snb_wrapper .snb_link img {
    width: 100%;
}

.snb_wrapper .snb_link .guide p {
    font-size: 1.85rem;
}

.snb_wrapper .snb_link .guide .sm {
    font-size: 1.2rem;
    top: 27%;
}

@media (max-width: 750px) {
    .snb_wrapper {
        bottom: 14vw;
    }

    .snb_wrapper .snb_link {
        width: 100px;
    }

    .snb_wrapper .snb_link p {
        font-size: 1.25rem;
    }

    .snb_wrapper .snb_link .guide p {
        font-size: 1.48rem;
    }

    /* update top btn */
    .fixed_banner.active {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    .snb_top_btn.index {
        bottom: 8vh;
    }
    /* update top btn */

}

@media (max-width: 450px) {
    .snb_wrapper {
        right: 15px;
        bottom: 16vw;
    }

    .snb_wrapper .snb_link {
        width: 80px;
        margin-top: 0.5em;
    }

    .snb_wrapper .snb_link p {
        font-size: 1.05rem;
    }

    .snb_wrapper .snb_link .guide p {
        font-size: 1.2rem;
    }

    .snb_wrapper .snb_link .guide .sm {
        font-size: 0.75rem;
    }

    .snb_top_btn {
        width: 40px;
        height: 40px;
        right: 18px;
    }
}

/* S:jp_login_block */
.jp_login_block {
    max-width: 80vw;
    background-color: #f7f7f7;
    font-family: "Noto Sans JP", sans-serif;
    text-align: center;
    padding: 1.6em 0.1em;
    margin-left: 16px;
    margin-top: 1em;
    border-radius: 15px;
}

.jp_login_block .desc {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1em;
}

.jp_login_block .btn_login {
    display: inline-block;
    font-size: 23px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    background-color: #d71515;
    padding: 0.6em 1.3em 0.65em;
    border-radius: 3em;
}
/* E:jp_login_block */

@media screen and (max-width: 750px) {
    #header .header-wrap h1.logo {
        top: 24px;
        left: 20px;
    }
    #header .header-wrap h1.logo a {
        width: 62px;
        height: 44px;
    }
    #header .header-wrap .utill-menu {
        top: 24px;
        right: 20px;
    }
    #header .header-wrap .utill-menu .language-select {
        margin-top: 5px;
    }
}

@media screen and (max-width: 1200px) {
    .intro #header .header-wrap .utill-menu {
        display: block !important;
    }
    #header .header-wrap h1.kinder-logo {
        top: 24px !important;
        left: 20px;
        transition: none !important;
    }
    #header .header-wrap h1.kinder-logo a {
        width: 50px;
        height: 44px;
        background-size: 100% auto;
    }
    #header .header-wrap .gnb {
        display: none;
    }
    #header .header-wrap .utill-menu {
        display: none !important;
    }
    #header.kinder-header {
        height: auto;
        overflow: initial;
    }
    #header.kinder-header::before {
        display: none;
    }
    .btn-nav {
        transition: all 0.3s ease-out;
        display: inline-block;
        width: 24px;
        height: 24px;
        position: absolute;
        right: 20px;
        top: 34px;
        z-index: 13;
    }
    .btn-nav.sticky span {
        background-color: #000;
    }
    .btn-nav.close {
        z-index: 21;
        position: fixed;
        right: 20px;
        top: 34px;
    }
    .btn-nav.close span {
        width: 24px;
        background-color: #000;
        border-radius: 2px;
    }
    .btn-nav.close span.line-01 {
        margin-top: 12px;
        margin-bottom: 3px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
    }
    .btn-nav.close span.line-02 {
        opacity: 0;
    }
    .btn-nav.close span.line-03 {
        width: 24px;
        margin-top: -13px;
        margin-bottom: 14px;
        margin-left: 0;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
    }
    .btn-nav span {
        display: block;
        width: 24px;
        height: 2px;
        margin-bottom: 6px;
        background: #fff;
        transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out;
        border-radius: 2px;
    }
    .board-header .btn-nav span {
        background-color: #000;
    }
    #header.is-active {
        height: 100% !important;
    }
    #header.is-active .mobile.total-menu {
        opacity: 1;
        visibility: visible;
        width: 100%;
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
    .mobile.total-menu {
        position: fixed;
        top: 0;
        background-color: #fff;
        width: 100%;
        height: 100%;
        z-index: 10;
        opacity: 0;
        visibility: hidden;
        -webkit-transition-duration: .5s;
        transition-duration: .5s;
        min-height: -webkit-fill-available;
    }
    .mobile.total-menu .wrap {
        width: 100%;
        height: 100%;
        overflow: scroll;
    }
    .mobile.total-menu .language {
        display: flex;
        font-family: "Overpass", sans-serif;
        font-size: 16px;
        margin-left: 30px;
        padding-top: 28px;
    }
    .mobile.total-menu .language li + li {
        margin-left: 6px;
    }
    .mobile.total-menu .language a {
        display: inline-block;
        text-align: center;
        width: 40px;
        height: 36px;
        line-height: 36px;
        font-weight: 600;
    }
    .mobile.total-menu .language li.active a {
        background: url("/images/home/bg_language.png") center 0 no-repeat;
        background-size: 40px auto;
    }
    .mobile.total-menu .mobile-gnb {
        margin-left: 16px;
        margin-top: 40px;
    }
    .mobile.total-menu .depth01 {
        min-height: 64px;
        line-height: 64px;
        margin-top: 5px;
        overflow: hidden;
        /* &.active:nth-child(1){
                background: url($img + 'm_gnb_bg_01.png') 0 0 no-repeat;
                background-size: auto 64px;
                .depth01{
                    height: 164px;
                }
            }
            &.active:nth-child(2){
                 background: url($img + 'm_gnb_bg_02.png') 0 0 no-repeat;
                background-size: auto 64px;
                .depth01{
                    height: 164px;
                }
            }
            &.active:nth-child(3){
                 background: url($img + 'm_gnb_bg_03.png') 0 0 no-repeat;
                background-size: auto 64px;
                .depth01{
                    height: 164px;
                }
            }
            &.active:nth-child(4){
                 background: url($img + 'm_gnb_bg_04.png') 0 0 no-repeat;
                background-size: auto 64px;
                .depth01{
                    height: 164px;
                }
            } */
    }
    .mobile.total-menu .depth01.active:nth-child(1) {
        background: url("/images/home/m_gnb_bg_01.png") 15px 0 no-repeat;
        background-size: auto 69px;
    }
    .mobile.total-menu .depth01.active:nth-child(2) {
        background: url("/images/home/m_gnb_bg_02.png") 10px 0 no-repeat;
        background-size: auto 66px;
    }
    .mobile.total-menu .depth01.active:nth-child(3) {
        background: url("/images/home/m_gnb_bg_03.png") 10px 0 no-repeat;
        background-size: auto 66px;
    }
    .mobile.total-menu .depth01.active:nth-child(4),
    .mobile.total-menu .depth01.active:nth-child(5) {
        background: url("/images/home/m_gnb_bg_04.png") 10px 0 no-repeat;
        background-size: auto 66px;
    }
    .mobile.total-menu .depth01 > a {
        font-family: "Overpass", sans-serif;
        font-size: 30px;
        font-weight: 600;
        padding-left: 24px;
        box-sizing: border-box;
        display: block;
        letter-spacing: -3px;
    }
    .mobile.total-menu .depth01.active {
        height: auto;
    }
    .mobile.total-menu .depth01.active .depth02 {
        display: block;
    }
    .mobile.total-menu .depth01.active li.active a::after {
        right: auto;
        left: 0;
        width: 100%;
    }
    .mobile.total-menu .depth01 .depth02 {
        display: none;
        margin-top: 10px;
        margin-left: 24px;
        padding-bottom: 10px;
    }
    .mobile.total-menu .depth01 .depth02 li {
        line-height: 2;
    }
    .mobile.total-menu .depth01 .depth02 a {
        position: relative;
        font-size: 20px;
        font-weight: 600;
        line-height: 2;
    }
    .mobile.total-menu .depth01 .depth02 a::after {
        content: "";
        position: absolute;
        bottom: -1px;
        right: 0;
        width: 0;
        height: 1px;
        background-color: #222;
        -webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
        transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
        -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
        transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    }
    .mobile.total-menu .utill-nav {
        margin-top: 37px;
        margin-left: 24px;
    }
    .mobile.total-menu .utill-nav li + li {
        margin-top: 24px;
    }
    .mobile.total-menu .utill-nav li a {
        display: block;
        font-size: 24px;
        font-weight: 600;
        font-family: "Overpass", sans-serif;
    }
    .mobile.total-menu .footer-nav {
        padding-top: 40px;
        padding-bottom: 60px;
        margin-left: 40px;
    }
    .mobile.total-menu .footer-nav li:first-child a {
        padding-top: 40px;
        border-top: 1px solid #d1d1d1;
    }
    .mobile.total-menu .footer-nav li + li {
        margin-top: 20px;
    }
    .mobile.total-menu .footer-nav a {
        font-size: 16px;
        line-height: 1;
        display: block;
    }
    #wrap.eng #header .header-wrap h1.kinder-logo a, #wrap.jp #header .header-wrap h1.kinder-logo a {
        width: 62px;
        height: 44px;
        background: url(/images/home/logo_eggschool.svg) 0 0 no-repeat;
        background-size: 62px;
    }
}

/* S:quick menu */
.quick_menu_block {
    position: fixed;
    right: 50%;
    transform: translateX(50%);
    display: flex;
    justify-content: center;
    gap: 1.1em;
    bottom: 21%;
    z-index: 9;
}

.quick_menu_block:is(.right, .scroll) {
    bottom: 7em;
    right: 2em;
    flex-direction: column;
    transform: translateX(0);
}

.quick_menu.bg_red {
    --bg-menu: #d71515;
    --bg-icon: #f7d5d4;
}
.quick_menu.bg_yellow {
    --bg-menu: #ffcc00;
    --bg-icon: #ffea9c;
}
.quick_menu.bg_orange {
    --bg-menu: #ff8d11;
    --bg-icon: #fed9ac;
}

.quick_menu_block .quick_menu {
    display: inline-block;
    font-size: 1.7rem;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    background-color: var(--bg-menu);
    padding: 0.7em 1.3em;
    border-radius: 3em;
    box-shadow: 0.1em 0.2em 0.7em 1px rgba(0,0,0,0.25);
    -webkit-box-shadow: 0.1em 0.2em 0.7em 1px rgba(0,0,0,0.25);
    -moz-box-shadow: 0.1em 0.2em 0.7em 1px rgba(0,0,0,0.25);
}

.quick_menu_block:is(.right, .scroll) .quick_menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3em;
    padding: 0 0 0 1em;
    box-shadow: 0.1em 0.1em 0.3em 1px rgba(0,0,0,0.15);
    -webkit-box-shadow: 0.1em 0.1em 0.3em 1px rgba(0,0,0,0.15);
    -moz-box-shadow: 0.1em 0.1em 0.3em 1px rgba(0,0,0,0.15);
}

.quick_menu_block .quick_menu .icon {
    display: none;
    visibility: hidden;
}

.quick_menu_block:is(.right, .scroll) .quick_menu .icon {
    position: relative;
    top: -0.5px;
    right: -1.5px;
    display: block;
    visibility: visible;
    width: calc(2.7em + 2px);
    height: calc(2.7em + 2px);
}

.quick_menu_block .quick_menu .icon img {
    width: 3.75em;
    max-width: 200%;
    position: absolute;
    bottom: -0.53em;
    right: -0.5em;
    z-index: 3;
}

.quick_menu_block:is(.right, .scroll) .quick_menu .icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--bg-icon);
    border-radius: 50%;
    z-index: 1;
}

@media screen and (min-width: 751px){
    .quick_menu_block {
        transition: right 1s cubic-bezier(.25,.75,.5,1.25), bottom 1s cubic-bezier(.25,.75,.5,1.25);
    }

    .quick_menu_block:is(.right, .scroll) .quick_menu {
        background-color: #fff;
        color: #1b1b1b;
        border: 1px solid #eaeaea;
        transition: background-color 1s cubic-bezier(.25,.75,.5,1.25), color 0.8s cubic-bezier(.25,.75,.5,1.25), border 1s cubic-bezier(.25,.75,.5,1.25);
    }

    .quick_menu_block:is(.right, .scroll) .quick_menu:hover {
        background-color: var(--bg-menu);
        border: 1px solid var(--bg-menu);
        color: #fff;
    }
}

@media screen and (max-width: 1600px) {
    .quick_menu_block .quick_menu { font-size: 1.3rem; }
    .quick_menu_block:is(.right, .scroll) .quick_menu { font-size: 1.4rem; }
}

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

    .quick_menu_block {
        bottom: 30%;
        transition: bottom 1s cubic-bezier(.25,.75,.5,1.25);
    }

    .quick_menu_block:is(.right, .scroll) {
        width: 100%;
        flex-direction: row;
        gap: 0.5em;
        right: 0;
        bottom: 6.5%;
    }

    .quick_menu_block .quick_menu.login {
        display: none;
    }

    .quick_menu_block .quick_menu {
        font-size: 1.3rem;
        text-align: center;
    }

    .quick_menu_block:is(.right, .scroll) .quick_menu {
        font-size: 1.15rem;
        padding: 0.4em 0.5em 0.4em  0.7em;
    }

    .quick_menu_block:is(.right, .scroll) .quick_menu .icon {
        width: 2em;
        height: 2em;
    }

    .quick_menu_block .quick_menu .icon img {
        width: 3em;
    }

}
/* E:quick menu */

/* 푸터 */
#footer {
    position: relative;
    background: #fffcf6;
}

#footer .footer-wrap {
    max-width: 1160px;
    margin: 0 auto 0;
    padding-top: 280px;
    padding-bottom: 70px;
    color: #7c7c7c;
    font-size: 16px;
    background-image: linear-gradient(to right, #e7decb 60%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 16px 2px;
    background-repeat: repeat-x;
    background-position-y: 200px;
}

#footer .footer-wrap .footer-nav a {
    color: #7c7c7c;
}

#footer .footer-wrap .footer-nav li {
    display: inline-block;
}

#footer .footer-wrap .footer-nav li + li::before {
    content: '';
    display: inline-block;
    margin: 0 8px 0 5px;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: #7c7c7c;
    vertical-align: top;
    margin-top: 11px;
}

#footer .footer-wrap .footer-familySite {
    margin-top: 20px;
}


#footer .footer-wrap .footer-info {
    margin-top: 20px;
}

#footer .footer-wrap .footer-info .address {
    margin-bottom: 2px;
}

#footer .footer-wrap .footer-info > span:before {
    content: '';
    display: inline-block;
    margin: 0 8px 0 5px;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: #7c7c7c;
    vertical-align: top;
    margin-top: 11px;
}

#footer .footer-wrap .footer-info > span.ceo:before {
    display: none;
}

#footer .footer-wrap .copy {
    margin-top: 20px;
    line-height: 1.63;
}

#footer.intro-footer {
    position: absolute;
    z-index: 2;
    width: 100%;
}

#footer.intro-footer .footer-nav a {
    color: #ffffff;
}

#footer.intro-footer .footer-nav a::before {
    background-color: #fff;
}

#footer.intro-footer .footer-wrap {
    margin: 0 auto;
    color: #ffffff;
}

#footer.intro-footer .footer-wrap .footer-info span:before {
    background-color: #fff;
}

#wrap.eng #footer .footer-wrap .en {
    font-weight: bold;
}

@media screen and (max-width: 1200px) {
    #footer .footer-wrap {
        margin: 0 20px;
        padding-top: 170px;
        background-position-y: 100px;
    }
}

@media screen and (max-width: 750px) {
    #footer .footer-wrap {
        margin: 0 20px;
    }
    #footer .footer-wrap .business {
        display: block;
    }
    #footer .footer-wrap .business::before {
        display: none !important;
    }
}

html {
    font-size: 1rem;
    font-family: "Noto Sans KR", "돋움", Dotum, Helvetica, Arial, sans-serif;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    height: -webkit-fill-available;
    background: #fffcf6;
    /* -webkit-overflow-scrolling : touch !important; */
    scroll-behavior: smooth;
}

html.hidden {
    overflow: hidden;
}

html, html a {
    -webkit-font-smoothing: antialiased;
    text-decoration: none;
    color: #000;
}

body {
    color: #000;
    font-family: "Noto Sans KR", "돋움", Dotum, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    background: transparent;
    -webkit-text-size-adjust: none;
    /* -webkit-overflow-scrolling : touch !important; */
}

* {
    -webkit-text-size-adjust: none;
}

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.cont-left {
    float: left;
}

.cont-right {
    float: right;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.en {
    font-family: "Overpass", sans-serif !important;
}

.en02 {
    font-family: "Nerko One", cursive;
}

.jap {
    font-family: "M PLUS 1p", sans-serif;
}

.jap02 {
    font-family: "Noto Sans JP", sans-serif;
}

.kr {
    font-family: "Jua", sans-serif;
}

.w100 {
    width: 100%;
}

.mobile {
    display: none;
}

.em {
    font-style: normal;
}

.em.disable {
    color: #cccccc;
}

.em.slightly {
    color: #999999;
}

.em.weighty {
    color: #ce0017;
}

.em.weightiest {
    color: #93292c;
}

.em.warning {
    color: #db0510;
}

.ellipsis {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.multi-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    max-height: 3em;
    line-height: 1.5em;
    white-space: normal;
}

.asterisk:before {
    content: '*';
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    color: #c70000;
}

#wrap {
    min-height: -webkit-fill-available;
    margin-left: env(safe-area-inset-left);
    margin-right: env(safe-area-inset-right);
}

.skyscraper {
    position: fixed;
    right: 50px;
    bottom: 50px;
    transition: visibility 0.5s ease, opacity 0.5s ease;
    z-index: 1;
}

.skyscraper .btn-qna {
    display: block;
    padding-top: 70px;
    width: 60px;
    background: url("/images/home/ico_qna.png") center 0 no-repeat;
    background-size: 60px auto;
    font-size: 16px;
    text-align: center;
}

.skyscraper .btn-qna:hover + .bubble {
    visibility: visible;
    opacity: 1;
    animation-name: select;
    animation-duration: 700ms;
    animation-delay: 0ms;
}

.skyscraper .bubble {
    display: none;
    visibility: visible;
    opacity: 1;
}

.skyscraper .bubble {
    position: absolute;
    top: -140px;
    right: 30px;
    display: block;
    border-radius: 20px;
    border-bottom-right-radius: 0;
    background-color: #fbc600;
    padding: 20px 30px;
    opacity: 0;
    width: 316px;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 1.67;
}

.skyscraper .bubble::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: #fbc600;
    border-bottom: 0;
    border-right: 0;
    margin-left: -10px;
    margin-bottom: -20px;
}

@media screen and (max-width: 1140px) {
    .mobile {
        display: block;
    }
    .web {
        display: none;
    }
    .skyscraper {
        right: 20px;
    }
    .skyscraper.visible .bubble {
        top: -111px;
        padding: 15px 28px;
        width: 284px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 1.63;
        visibility: visible;
        opacity: 1;
        animation-name: select;
        animation-duration: 700ms;
        animation-delay: 0ms;
    }
    .skyscraper.visible .bubble::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-top-color: #fbc600;
        border-bottom: 0;
        border-right: 0;
        margin-left: -10px;
        margin-bottom: -20px;
    }
}

/*popup-wrap*/
.dimmed {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.layer-popup {
    display: none;
    z-index: 99;
    position: fixed;
    width: 100%;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto;
    min-width: 300px;
}

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

.layer-popup.center .popup-wrap {
    left: 0;
    top: 0;
    transform: translate(0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.layer-popup .popup-wrap {
    position: fixed;
    display: flex;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.layer-popup .btn-close {
    display: block;
    position: fixed;
    top: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    background: url("/images/home/btn_close.svg") center center no-repeat;
    background-size: 100% auto;
}

.layer-popup .popup-content h2 {
    font-size: 1.5rem;
    font-weight: normal;
}

.layer-popup .pop-button {
    margin-bottom: 15px;
}

#mainvideo .video-wrap video {
    width: 100%;
}

#mainvideo .dimmed {
    background: #000;
}

#mainvideo.layer-popup .btn-close {
    background: url("/images/home/btn_close_01.svg") center center no-repeat;
    background-size: 100% auto;
}

.intro-wrap .video {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.intro-wrap .video .playing {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.intro-wrap .video .dimmed {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.intro-wrap .wrap-bg .bg-01 {
    display: block;
    position: fixed;
    top: -62px;
    right: 418px;
    z-index: 1;
    opacity: 0;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
}

.intro-wrap .wrap-bg .bg-02 {
    display: block;
    position: fixed;
    bottom: -100px;
    right: -78px;
    z-index: 1;
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
}

.intro-wrap .fp-tableCell {
    display: flex;
    align-items: center;
}

.intro-wrap .section {
    position: relative;
    width: 1270px;
    margin: 0 auto;
    z-index: 1;
    height: 100vh;
    display: flex;
    align-items: center;
}

.intro-wrap .section .info {
    color: #fff;
}

.intro-wrap .section .info h2 {
    font-size: 26px;
}

.intro-wrap .scroll {
    position: absolute;
    left: 50%;
    bottom: -180px;
    writing-mode: tb-rl;
    transform: translate(-50%, 0);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    font-family: "Overpass", sans-serif;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in-out;
}

.intro-wrap .scroll:after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 80px;
    margin-top: 20px;
    background-color: #fff;
    margin-left: 3px;
    transition: all .2s ease-in-out;
    opacity: 0.35;
}

.intro-wrap #visual {
    width: 1240px;
}

.intro-wrap #visual .fp-tableCell {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.intro-wrap #visual .info {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.intro-wrap #visual .info h2 {
    font-size: 22px;
    font-weight: normal;
}

.intro-wrap #visual .info .sub-title {
    font-size: 70px;
    line-height: 1.23;
    margin-top: 20px;
}

.intro-wrap #visual .info .text {
    margin-top: 20px;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.47;
}

.intro-wrap #visual .carousel {
    position: absolute;
    left: -204px;
    top: 50%;
    z-index: -1;
    transform: translate(0, -50%) scale(0.8);
    width: 612px;
    height: 506px;
}

.intro-wrap #visual .carousel::before, .intro-wrap #visual .carousel::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: #efbd02;
    animation: shape1 10s linear infinite alternate;
    z-index: 1;
    will-change: border-radius, transform;
    transform-origin: 55% 55%;
    pointer-events: none;
}

.intro-wrap #elementary {
    width: 1170px;
}

.intro-wrap #elementary.active .info {
    animation-timing-function: cubic-bezier(0.52, 0.01, 0.16, 1);
    animation-name: revealText;
    animation-duration: 1400ms;
    animation-fill-mode: forwards;
    animation-delay: 230ms;
    opacity: 0;
}

.intro-wrap #elementary .info {
    margin-top: 40px;
}

.intro-wrap #elementary .info h2 {
    font-size: 22px;
}

.intro-wrap #elementary .info h2 span {
    display: block;
    margin-top: 30px;
}

.intro-wrap #elementary .info .sub-title {
    font-size: 34px;
    line-height: 1.29;
    margin-top: 30px;
}

.intro-wrap #elementary .info .text {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.55;
    margin-top: 16px;
}

.intro-wrap #elementary .item {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
}

.intro-wrap #elementary .item .thumb {
    position: relative;
    width: 625px;
    height: 544px;
    animation: shape2 7s linear infinite alternate;
    z-index: 1;
    will-change: border-radius, transform;
    transform-origin: 55% 55%;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
}

.intro-wrap #elementary .item .thumb img {
    width: 100%;
}

.intro-wrap #elementary .btn-meet {
    display: block;
    position: absolute;
    left: 0;
    top: 367px;
    font-family: "Nerko One", cursive;
    font-size: 30px;
    color: #fff;
    width: 158px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
    background: url("/images/home/btn_meet_01.png") 0 0 no-repeat;
    background-size: 100% auto;
    z-index: 1;
}

.intro-wrap #elementary .btn-meet .txt {
    position: relative;
    z-index: 1;
}

.intro-wrap #elementary .btn-meet .txt .ico-arrow {
    display: inline-block;
    width: 8px;
    height: 13px;
    margin-left: 10px;
    background: url("/images/home/ico_meet.png") 0 0 no-repeat;
}

.intro-wrap #kinder {
    width: 100%;
}

.intro-wrap #kinder.active .info {
    animation-timing-function: cubic-bezier(0.52, 0.01, 0.16, 1);
    animation-name: revealText;
    animation-duration: 1300ms;
    animation-fill-mode: forwards;
    animation-delay: 200ms;
    opacity: 0;
}

.intro-wrap #kinder .content {
    position: relative;
    width: 1310px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 1;
}

.intro-wrap #kinder .info {
    margin-top: 40px;
}

.intro-wrap #kinder .info h2 {
    font-size: 22px;
}

.intro-wrap #kinder .info h2 span {
    display: block;
    margin-top: 30px;
}

.intro-wrap #kinder .info .sub-title {
    font-size: 34px;
    line-height: 1.29;
    margin-top: 30px;
}

.intro-wrap #kinder .info .text {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.55;
    margin-top: 16px;
}

.intro-wrap #kinder .item {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
}

.intro-wrap #kinder .item .thumb {
    width: 625px;
    height: 544px;
    animation: shape3 12s linear infinite alternate;
    z-index: 1;
    will-change: border-radius, transform;
    transform-origin: 55% 55%;
    pointer-events: none;
    overflow: hidden;
    position: relative;
    z-index: -1;
}

.intro-wrap #kinder .item .thumb img {
    width: 100%;
}

.intro-wrap #kinder .btn-meet {
    display: block;
    position: absolute;
    right: 32px;
    bottom: 0;
    font-family: "Nerko One", cursive;
    font-size: 30px;
    color: #fff;
    width: 160px;
    height: 140px;
    line-height: 140px;
    text-align: center;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    background: url("/images/home/btn_meet_02.png") 0 0 no-repeat;
    background-size: 100% auto;
    z-index: 1;
}

.intro-wrap #kinder .btn-meet .txt {
    position: relative;
    z-index: 1;
}

.intro-wrap #kinder .btn-meet .txt .ico-arrow {
    display: inline-block;
    width: 8px;
    height: 13px;
    margin-left: 10px;
    background: url("/images/home/ico_meet.png") 0 0 no-repeat;
}

.intro-wrap #kinder .bg-03 {
    position: absolute;
    left: -60px;
    bottom: 164px;
}

.intro-wrap #kinder .video {
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    position: absolute;
    width: 100%;
    transition: all 0.5s ease-in-out;
}

.intro-wrap #kinder.active .video {
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease-in-out;
}

.intro-wrap .float-mark {
    position: fixed;
    width: 142px;
    height: 142px;
    right: 60px;
    bottom: 60px;
    background-image: url("/images/home/point_text.svg");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 100;
    animation: circleMark 7.5s linear 0s infinite;
    transition: 0.45s ease-out;
}

@media screen and (max-width: 1024px) {
    .intro-wrap .fp-tableCell {
        display: block;
    }
    .intro-wrap #visual {
        width: 100%;
        overflow: initial;
    }
    .intro-wrap #visual .info {
        margin-left: 20px;
    }
    .intro-wrap #elementary {
        width: 100%;
        display: block;
        z-index: 2;
        overflow: hidden;
    }
    .intro-wrap #elementary .info {
        padding-top: 240px;
        margin-top: 0;
        margin-left: 60px;
        position: relative;
        z-index: 1;
    }
    .intro-wrap #elementary .item {
        position: absolute;
        right: -46px;
        top: 80.8VW;
        transform: none;
    }
    .intro-wrap #elementary .item .thumb {
        /*  max-width: 366px;
                    max-height: 320px; */
        max-width: 625px;
        max-height: 544px;
        width: 97.6VW;
        height: 85.33333333333334VW;
    }
    .intro-wrap #elementary .item .btn-meet {
        width: 120px;
        height: 116px;
        line-height: 116px;
        top: 62px;
        left: -34px;
    }
    .intro-wrap #kinder .content {
        display: block;
        width: 100%;
    }
    .intro-wrap #kinder .info {
        padding-top: 240px;
        margin-top: 0;
        margin-left: 60px;
        position: relative;
        z-index: 1;
    }
    .intro-wrap #kinder .item {
        position: absolute;
        right: -61px;
        top: 70.2VW;
        left: auto;
        transform: none;
    }
    .intro-wrap #kinder .item .thumb {
        /*  max-width: 380px;
                    max-height: 350px; */
        max-width: 625px;
        max-height: 544px;
        width: 101.33333333333334VW;
        height: 93.33333333333333VW;
    }
    .intro-wrap #kinder .item .btn-meet {
        width: 120px;
        height: 106px;
        line-height: 106px;
        top: 74px;
        left: -34px;
    }
}

@media screen and (max-width: 750px) {
    .intro-wrap .web {
        display: none;
    }
    .intro-wrap .mobile {
        display: block;
    }
    .intro-wrap .section {
        width: 100%;
        height: 100vh;
    }
    .intro-wrap .fp-tableCell {
        display: block;
    }
    .intro-wrap #visual .carousel {
        width: 104VW;
        height: 86VW;
        left: -105px;
    }
    .intro-wrap #visual .carousel img {
        width: 100%;
    }
    .intro-wrap #visual .info {
        margin-left: 20px;
    }
    .intro-wrap #visual .info h2 {
        font-size: 3.733333333333334VW;
    }
    .intro-wrap #visual .info .sub-title {
        font-size: 12.266666666666666VW;
    }
    .intro-wrap #visual .info .text {
        font-size: 5.333333333333334VW;
        margin-top: 14px;
    }
    .intro-wrap #visual .wrap-bg .bg-02 {
        position: absolute;
        bottom: 80px;
        transition: all 0.5s ease-in-out;
    }
    .intro-wrap #visual.active .wrap-bg .bg-02 {
        bottom: 0;
        transition: all 0.5s ease-in-out;
        opacity: 1;
    }
    .intro-wrap #visual.active .scroll {
        font-size: 12px;
    }
    .intro-wrap #visual.active .scroll:after {
        height: 50px;
    }
    .intro-wrap #elementary .info {
        padding-top: 118px;
        margin-top: 0;
        margin-left: 20px;
    }
    .intro-wrap #elementary .info h2 {
        font-size: 3.733333333333334VW;
    }
    .intro-wrap #elementary .info h2 span {
        display: block;
        margin-top: 13px;
        width: 69.6VW;
    }
    .intro-wrap #elementary .info h2 span img {
        width: 100%;
    }
    .intro-wrap #elementary .info .sub-title {
        font-size: 6.933333333333333VW;
        line-height: 1.29;
        margin-top: 26px;
    }
    .intro-wrap #elementary .info .text {
        font-size: 4.266666666666667VW;
        font-weight: 500;
        line-height: 1.55;
        margin-top: 16px;
    }
    .intro-wrap #elementary .item {
        top: 94.8vw;
    }
    .intro-wrap #kinder {
        width: 100%;
        display: block;
        z-index: 2;
    }
    .intro-wrap #kinder .content {
        width: 100%;
        height: 100vh;
        display: block;
    }
    .intro-wrap #kinder .info {
        padding-top: 118px;
        margin-top: 0;
        margin-left: 20px;
    }
    .intro-wrap #kinder .info h2 {
        font-size: 3.733333333333334VW;
    }
    .intro-wrap #kinder .info h2 span {
        display: block;
        margin-top: 13px;
        width: 80.53333333333333VW;
    }
    .intro-wrap #kinder .info h2 span img {
        width: 100%;
    }
    .intro-wrap #kinder .info .sub-title {
        font-size: 6.933333333333333VW;
        line-height: 1.29;
        margin-top: 26px;
    }
    .intro-wrap #kinder .info .text {
        font-size: 4.266666666666667VW;
        font-weight: 500;
        line-height: 1.55;
        margin-top: 16px;
    }
    .intro-wrap #kinder .item {
        right: -61px;
        top: 90.8VW;
        left: auto;
        transform: none;
    }
    .intro-wrap #kinder .item .thumb {
        width: 380px;
        height: 350px;
    }
    .intro-wrap #kinder .item .btn-meet {
        width: 120px;
        height: 106px;
        top: 74px;
        left: -34px;
    }
    .intro-wrap #kinder .item .btn-meet img {
        width: 100%;
        height: auto;
    }
    .intro-wrap .wrap-bg .bg-01 {
        display: none;
    }
    .intro-wrap .wrap-bg .bg-02 {
        width: 168px;
        height: 165px;
        right: -59px;
        bottom: -58px;
    }
    .intro-wrap .wrap-bg .bg-02 img {
        width: 100%;
    }
    .intro-wrap .float-mark {
        display: none;
    }
}

.fp-viewing-0 .intro-wrap .scroll {
    bottom: 0;
    opacity: 1;
    visibility: visible;
    color: #fff;
    transition: all .5s ease-in-out;
}

.fp-viewing-0 .intro-wrap .scroll:after {
    height: 80px;
}

@media screen and (max-width: 750px) {
    .fp-viewing-0 .intro-wrap .scroll:after {
        height: 50px;
    }
}

@media screen and (max-width: 1024px) {
    .eng .intro-wrap #visual .info .sub-title {
        line-height: 1;
    }
    .eng .intro-wrap #elementary .item .btn-meet {
        top: 130px;
    }
    .eng .intro-wrap #elementary .info .sub-title {
        line-height: 1.1;
    }
    .eng .intro-wrap #elementary .info .text {
        line-height: 1.3;
    }
    .eng .intro-wrap #kinder .info .sub-title {
        line-height: 1.1;
    }
    .eng .intro-wrap #kinder .info .text {
        line-height: 1.3;
    }
    .eng .intro-wrap #kinder .item .btn-meet {
        top: 130px;
    }
    .jp .intro-wrap #visual .info .sub-title {
        line-height: 1.2;
    }
    .jp .intro-wrap #elementary .info .sub-title {
        font-weight: bold;
        width: 100%;
        word-break: break-all;
    }
    .jp .intro-wrap #elementary .info .text {
        word-break: break-all;
    }
    .jp .intro-wrap #kinder .info .sub-title {
        font-weight: bold;
        width: 100%;
        word-break: break-all;
    }
    .jp .intro-wrap #kinder .info .text {
        word-break: break-all;
    }
}

@media screen and (max-width: 750px) {
    .jp .intro-wrap #elementary .info h2 span, .eng .intro-wrap #elementary .info h2 span {
        width: 70.39999999999999VW;
    }
    .jp .intro-wrap #kinder .info h2 span, .eng .intro-wrap #kinder .info h2 span {
        width: 70.39999999999999VW;
    }
}

@media screen and (max-width: 320px) {
    .jp .intro-wrap #visual .info .sub-title {
        line-height: 1.2;
    }
}

@keyframes revealText {
    0% {
        transform: translate3d(0, 30%, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0%, 0);
        opacity: 1;
    }
}

@keyframes circleMark {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes shape1 {
    0% {
        border-radius: 49% 51% 43% 57% / 38% 45% 55% 62%;
    }
    10% {
        border-radius: 45% 55% 51% 49% / 43% 41% 59% 57%;
    }
    20% {
        border-radius: 42% 58% 47% 53% / 50% 47% 53% 50%;
    }
    30% {
        border-radius: 39% 61% 39% 61% / 54% 38% 62% 46%;
    }
    40% {
        border-radius: 37% 63% 30% 70% / 60% 32% 68% 40%;
    }
    50% {
        border-radius: 45% 55% 35% 65% / 56% 41% 59% 44%;
    }
    60% {
        border-radius: 51% 49% 43% 57% / 62% 46% 54% 38%;
    }
    70% {
        border-radius: 47% 53% 35% 65% / 67% 38% 62% 33%;
    }
    80% {
        border-radius: 53% 47% 42% 58% / 59% 45% 55% 41%;
    }
    90% {
        border-radius: 65% 35% 48% 52% / 51% 53% 47% 49%;
    }
    100% {
        border-radius: 49% 51% 43% 57% / 38% 45% 55% 62%;
    }
}

@keyframes shape2 {
    0% {
        border-radius: 46% 54% 29% 71% / 65% 68% 32% 35%;
    }
    10% {
        border-radius: 42% 58% 27% 73% / 68% 62% 38% 32%;
    }
    20% {
        border-radius: 39% 61% 23% 77% / 71% 53% 47% 29%;
    }
    30% {
        border-radius: 44% 56% 27% 73% / 65% 58% 42% 35%;
    }
    40% {
        border-radius: 46% 54% 31% 69% / 58% 63% 37% 42%;
    }
    50% {
        border-radius: 51% 49% 37% 63% / 53% 67% 33% 47%;
    }
    60% {
        border-radius: 54% 46% 41% 59% / 49% 72% 28% 51%;
    }
    70% {
        border-radius: 58% 42% 47% 53% / 43% 77% 23% 57%;
    }
    80% {
        border-radius: 48% 52% 43% 57% / 49% 68% 32% 51%;
    }
    90% {
        border-radius: 44% 56% 40% 60% / 52% 61% 39% 48%;
    }
    100% {
        border-radius: 46% 54% 29% 71% / 65% 68% 32% 35%;
    }
}

@keyframes shape3 {
    0% {
        border-radius: 58% 42% 62% 38% / 54% 59% 41% 46%;
    }
    10% {
        border-radius: 51% 49% 30% 70% / 47% 60% 40% 53%;
    }
    20% {
        border-radius: 54% 46% 32% 68% / 56% 63% 37% 44%;
    }
    30% {
        border-radius: 35% 65% 54% 46% / 44% 38% 62% 56%;
    }
    40% {
        border-radius: 71% 29% 55% 45% / 55% 36% 64% 45%;
    }
    50% {
        border-radius: 30% 70% 58% 42% / 33% 42% 58% 67%;
    }
    60% {
        border-radius: 62% 38% 26% 74% / 34% 39% 61% 66%;
    }
    70% {
        border-radius: 73% 27% 55% 45% / 39% 41% 59% 61%;
    }
    80% {
        border-radius: 32% 68% 57% 43% / 62% 42% 58% 38%;
    }
    90% {
        border-radius: 46% 54% 57% 43% / 35% 63% 37% 65%;
    }
    100% {
        border-radius: 58% 42% 62% 38% / 54% 59% 41% 46%;
    }
}

@keyframes translateY {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes video {
    0% {
        transform: scale(1.25);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounce {
    0% {
        transform: scale(1) translate(-50%, -50%);
        opacity: 0;
    }
    20% {
        transform: scale(1.2) translate(-40%, -40%);
        opacity: 1;
    }
    100% {
        transform: scale(1) translate(-50%, -50%);
        opacity: 1;
    }
}

@keyframes bounce-hidden {
    0% {
        transform: scale(1) translate(-50%, -50%);
        opacity: 1;
    }
    20% {
        transform: scale(1.2) translate(-40%, -40%);
        opacity: 1;
    }
    100% {
        transform: scale(1) translate(-50%, -50%);
        opacity: 0;
    }
}

@keyframes hideText {
    0% {
        transform: translate3d(0, 0%, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(0, -220%, 0);
        opacity: 1;
    }
}

@keyframes shewText {
    0% {
        transform: translate3d(0, 0%, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(0, -160%, 0);
        opacity: 1;
    }
}

@keyframes arrownext {
    0% {
        background-position: 0 center;
        opacity: 0;
    }
    30% {
        background-position: -10px center;
        opacity: 1;
    }
    60% {
        background-position: 10px center;
        opacity: 1;
    }
    100% {
        background-position: 0 center;
        opacity: 1;
    }
}

@keyframes arrowprev {
    0% {
        background-position: 0 center;
        opacity: 0;
    }
    30% {
        background-position: 10px center;
        opacity: 1;
    }
    60% {
        background-position: -10px center;
        opacity: 1;
    }
    100% {
        background-position: 0 center;
        opacity: 1;
    }
}

@keyframes select {
    0% {
        transform: scale(1);
        opacity: 0;
    }
    20% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes select01 {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    20% {
        transform: scale(1.03);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes video01 {
    0% {
        border-radius: 48% 52% 52% 48% / 43% 52% 48% 57%;
    }
    10% {
        border-radius: 62% 38% 58% 42% / 68% 30% 70% 32%;
    }
    20% {
        border-radius: 37% 63% 39% 61% / 47% 40% 60% 53%;
    }
    30% {
        border-radius: 34% 66% 31% 69% / 38% 53% 47% 62%;
    }
    40% {
        border-radius: 70% 30% 55% 45% / 57% 49% 51% 43%;
    }
    50% {
        border-radius: 28% 72% 36% 64% / 61% 57% 43% 39%;
    }
    60% {
        border-radius: 54% 46% 57% 43% / 40% 31% 69% 60%;
    }
    70% {
        border-radius: 66% 34% 57% 43% / 57% 63% 37% 43%;
    }
    80% {
        border-radius: 35% 65% 35% 65% / 33% 47% 53% 67%;
    }
    90% {
        border-radius: 58% 42% 50% 50% / 57% 55% 45% 43%;
    }
    100% {
        border-radius: 48% 52% 52% 48% / 43% 52% 48% 57%;
    }
}

.main {
    padding-top: 100vh;
    margin-bottom: -200px;
}

.main #main-visual {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    /*background: url('/images/home/renew/bg_main_visual.png') center center no-repeat;*/
    background-size: cover;
}

.main #main-visual .video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    animation-timing-function: cubic-bezier(0.52, 0.01, 0.16, 1);
    animation-name: video;
    animation-duration: 1800ms;
    animation-fill-mode: forwards;
    opacity: 0;
}

.main #main-visual .video .dimmed { background: rgba(0, 0, 0, 0.3);}

.main #main-visual .video .playing {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.main #main-visual .content {
    display: flex;
    align-items: center;
    position: relative;
    width: 1280px;
    height: 100vh;
    margin: 0 auto;
    color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
}

.main #main-visual .content .info h2 {
    font-size: 22px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(50px);
}

.main #main-visual .content .info .sub-title {
    font-size: 74px;
    font-weight: normal;
    line-height: 1.22;
    opacity: 0;
    transform: translateY(60px);
}

.main #main-visual .content .info .text {
    margin-top: 20px;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.47;
    opacity: 0;
    transform: translateY(60px);
}

.main #main-visual .content .info.hidden {
    animation-timing-function: cubic-bezier(0.52, 0.01, 0.16, 1);
    animation-name: hideText;
    animation-duration: 1000ms;
    animation-fill-mode: forwards;
    animation-delay: 200ms;
}

.main #main-visual .content .btn-paly {
    display: block;
    width: 170px;
    height: 148px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background: url("/images/home/btn_play.svg") 0 0 no-repeat;
    background-size: 100% auto;
    animation-timing-function: cubic-bezier(0.52, 0.01, 0.16, 1);
    animation-name: bounce;
    animation-duration: 800ms;
    animation-fill-mode: forwards;
    animation-delay: 100ms;
    opacity: 1;
}

.main #main-visual .content .btn-paly.hidden {
    animation-name: bounce-hidden;
    animation-duration: 1000ms;
    animation-delay: 0ms;
}

.main #main-visual .content .btn-paly.visible {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.52, 0.01, 0.16, 1);
    animation-name: bounce;
    animation-duration: 800ms;
    animation-fill-mode: forwards;
    animation-delay: 100ms;
}

.main #main-visual .scroll {
    position: absolute;
    left: 50%;
    bottom: 60px !important;
    writing-mode: tb-rl;
    transform: translate(-50%, 0);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    font-family: "Overpass", sans-serif;
}

.main #main-visual .scroll:after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 80px;
    margin-top: 20px;
    background-color: #fff;
    margin-left: 3px;
    transition: height 0.4s ease-out;
    opacity: 0.35;
}

.main #main-visual .scroll {
    opacity: 1;
    visibility: visible;
}

.main #main-visual .scroll.hidden {
    opacity: 0;
    visibility: hidden;
}

.main #main-visual .scroll.hidden:after {
    height: 0;
}

.main .content-primary {
    position: relative;
    background: #fffcf6;
}

.main #different {
    position: relative;
    padding-bottom: 120px;
}

.main #different .cont-wrap {
    width: 1320px;
    margin: 0 auto 0;
    padding-top: 190px;
}

.main #different .cont {
    position: relative;
    -webkit-transform: translateY(180px);
    transform: translateY(180px);
}

.main #different .cont h3 {
    position: absolute;
    left: 59px;
    top: -20px;
    z-index: 2;
}

.main #different .cont .item {
    position: relative;
    width: 500px;
    height: 470px;
    overflow: hidden;
}

.main #different .cont .item .playing {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 1px;
    box-sizing: border-box;
}

.main #different .cont .item:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url("/images/home/cont01_bg.png") 0 0 no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background-size: cover;
}

.main #different .cont .info {
    margin-top: 50px;
}

.main #different .cont .info .title {
    display: block;
    font-family: "Jua", sans-serif;
    font-size: 50px;
    line-height: 1.16;
    font-weight: normal;
}

.main #different .cont .info .text {
    font-size: 20px;
    font-weight: 500;
    margin-top: 16px;
    color: #676767;
}

.main #different .cont01 {
    float: left;
    margin-top: -1px;
}

.main #different .cont01 .item .playing {
    width: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.main #different .cont01 .item:after {
    background-image: url("/images/home/cont01_bg.png");
}

.main #different .cont01 .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main #different .cont01 .info {
    margin-left: 80px;
}

.main #different .cont01 .bg-01 {
    position: absolute;
    top: 284px;
    left: -61px;
    z-index: 1;
}

.main #different .cont01 .bg-02 {
    position: absolute;
    top: 576px;
    left: 440px;
    z-index: 1;
}

.main #different .cont01 .bg-02 img {
    width: 130px;
}

.main #different .cont02 {
    float: right;
}

.main #different .cont02::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 3;
    left: -147px;
    top: 70px;
    width: 2px;
    height: 600px;
    background-image: linear-gradient(#e7decb 60%, rgba(255, 255, 255, 0) 0%);
    background-position: center;
    background-size: 2px 16px;
    background-repeat: repeat-y;
}

.main #different .cont02 h3 {
    left: 50px;
}

.main #different .cont02 .item {
    width: 505px;
    height: 462px;
}

.main #different .cont02 .item::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    position: relative;
    left: 0;
    top: 0;
    background-color: #fffcf6;
    z-index: 2;
}

.main #different .cont02 .item .vidio {
    position: relative;
    width: 504px;
    height: 460px;
    overflow: hidden;
}

.main #different .cont02 .item .vidio::before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
    background-color: #fffcf6;
    z-index: 2;
}

.main #different .cont02 .item .vidio::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    position: relative;
    left: 0;
    top: 0;
    background-color: #fffcf6;
    z-index: 2;
}

.main #different .cont02 .item .playing {
    width: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.main #different .cont02 .item:after {
    background-image: url("/images/home/cont02_bg.png");
}

.main #different .cont02 .info {
    margin-left: 72px;
}

.main #different .cont02 .bg-01 {
    position: absolute;
    top: 62px;
    right: -112px;
    z-index: 2;
}

.main #different .cont02 .bg-02 {
    position: absolute;
    top: 455px;
    right: -39px;
    z-index: 2;
}

.main #different .cont02 .bg-02 img {
    width: 62px;
}

.main #different .cont03 {
    clear: both;
    width: 1160px;
    margin: 0 auto;
    padding-top: 130px;
}

.main #different .cont03:before {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    margin-bottom: 120px;
    background-image: linear-gradient(to right, #e7decb 60%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 16px 2px;
    background-repeat: repeat-x;
}

.main #different .cont03:after {
    content: '';
    display: block;
    clear: both;
}

.main #different .cont03 .info {
    float: left;
    margin-top: 110px;
}

.main #different .cont03 .info h3 {
    position: static;
    margin-left: -30px;
}

.main #different .cont03 .info .title {
    margin-top: 40px;
    font-size: 50px;
    line-height: 1.16;
}

.main #different .cont03 .item {
    float: right;
    width: 662px;
    height: 750px;
}

.main #different .cont03 .item:after {
    display: none;
}

.main #different .cont03 .bg-01 {
    position: absolute;
    top: 616px;
    left: 288px;
}

.main #different .cont03 .bg-01 img {
    width: 100px;
}

.main #different .section-bg .bg-01 {
    position: absolute;
    bottom: 376px;
    left: 120px;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.main #different .section-bg .bg-02 {
    position: absolute;
    bottom: 131px;
    left: -57px;
}

.main #episode {
    position: relative;
    padding: 120px 0;
    text-align: center;
    background-image: linear-gradient(to right, #e7decb 60%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 16px 2px;
    background-repeat: repeat-x;
    z-index: 1;
}

.main #episode .section-title {
    font-size: 50px;
    font-family: "Jua", sans-serif;
    line-height: 1.16;
    font-weight: normal;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.main #episode .summary {
    font-size: 20px;
    font-weight: 500;
    margin-top: 16px;
    color: #676767;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.main #episode .item-wrap {
    position: relative;
    width: 1160px;
    margin: 0 auto;
    margin-top: 70px;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.main #episode .item-list {
    display: flex;
    justify-content: space-between;
}

.main #episode .item-list .info {
    margin-top: 30px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.42;
}

.main #episode .swiper-slide {
    width: auto;
}

.main #episode .bg-wrap {
    margin-bottom: -50px;
}

.main #episode .bg-wrap span {
    position: absolute;
}

.main #episode .bg-wrap .bg-01 {
    right: -164px;
    bottom: 51px;
    opacity: 0;
    transform: scale(0);
}

.main #episode .bg-wrap .bg-01 img {
    width: 126px;
}

.main #episode .bg-wrap .bg-02 {
    right: -206px;
    bottom: -77px;
    opacity: 0;
    transform: scale(0);
}

.main #episode .bg-wrap .bg-02 img {
    width: 66px;
}

.main #episode .bg-wrap .bg-03 {
    right: -134px;
    bottom: -145px;
    transform: scale(0);
}

.main #episode .bg-wrap .bg-03 img {
    width: 50px;
}

.main #special-price {
    background-image: linear-gradient(to right, #e7decb 60%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 16px 2px;
    background-repeat: repeat-x;
    padding: 120px 0 5px 0;
    text-align: center;
}

.main #special-price .section-title {
    font-size: 50px;
    font-family: "Jua", sans-serif;
    line-height: 1.16;
    font-weight: normal;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.main #special-price .cont-wrap {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.main #special-price .cont-wrap::before {
    content: '';
    display: block;
    width: 2px;
    height: 250px;
    position: absolute;
    left: 50%;
    top: 79px;
    background-image: linear-gradient(#e7decb 60%, rgba(255, 255, 255, 0) 0%);
    background-position: center;
    background-size: 2px 16px;
    background-repeat: repeat-y;
}

.main #special-price .cont-wrap .cont {
    width: 464px;
    margin-top: 60px;
}

.main #special-price .cont-wrap .cont h3 {
    position: relative;
}

.main #special-price .cont-wrap .cont .info {
    height: 244px;
    font-family: "Jua", sans-serif;
    margin-top: -40px;
    padding-top: 65px;
    box-sizing: border-box;
    background: url("/images/home/price_cont_bg01.svg") 0 0 no-repeat;
}

.main #special-price .cont-wrap .cont .info .price {
    display: block;
    font-size: 60px;
    font-weight: normal;
}

.main #special-price .cont-wrap .cont .info .price span {
    font-size: 40px;
}

.main #special-price .cont-wrap .cont .info .total {
    display: inline-block;
    font-size: 34px;
    border-bottom: 2px solid #000;
    line-height: 0.9;
}

.main #special-price .cont-wrap .cont .info .total span {
    font-size: 26px;
}

.main #special-price .cont-wrap .cont .btn-more {
    display: block;
    margin-top: 35px;
    line-height: 1;
}

.main #special-price .cont-wrap .cont02 .info {
    background: url("/images/home/price_cont_bg02.svg") 0 0 no-repeat;
}

.main .btn-more {
    position: relative;
    display: block;
    width: 180px;
    height: 70px;
    line-height: 70px;
    margin: 60px auto 0;
    font-family: "Jua", sans-serif;
    background: url("/images/home/btn_more@2x.png") center center no-repeat;
    background-size: auto 68px;
    text-align: center;
    padding-right: 38px;
    transition: right 0.25s ease-in-out;
}

.main .btn-more span {
    display: inline-block;
    position: relative;
    line-height: 1;
    transition: all 0.25s ease-in-out;
    border-bottom: 1px solid #000;
}

.main .btn-more span::after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 0;
    height: 1px;
    background-color: #222;
    -webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.main .btn-more .ico {
    position: absolute;
    right: 48px;
    display: inline-block;
    width: 38px;
    height: 38px;
    background: url("/images/home/ok@2x.png") 0 center no-repeat;
    background-size: 38px auto;
    vertical-align: top;
    margin-top: 16px;
    transition: right 0.25s ease-in-out;
}

.main .btn-more:hover span {
    border: 0 none;
    letter-spacing: 0.1em;
}

.main .btn-more:hover span::after {
    right: auto;
    left: 0;
    width: 100%;
}

.main .btn-more:hover .ico {
    right: 45px;
}

#kYearContSwiper .thumb{
    margin: 0 auto;
}

#kYearContSwiper .thumb img{

}

#kYearContSwiper .info{
    margin-left: 0 !important;
}

#kYearContSwiper .kycwTitle{
    position: relative;
    margin-bottom: 20px;
}
#kYearContSwiper .kycwtLeft{
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}
#kYearContSwiper .kycwtLeft h4{
    font-size: 40px !important;
    line-height: 40px !important;
    font-family: inherit !important;
}

#kYearContSwiper .kycwtRight{
    position: relative;
    text-align: center;

}
#kYearContSwiper .kycwtRight h4{
    font-size: 20px !important;
    line-height: 20px !important;
    font-family: inherit !important;
}

#kYearContSwiper .swiper-wrapper .swiper-slide{
    display: initial !important;
}

@media screen and (min-width: 641px) {
    #kYearContSwiper .kycs2col1{
        float: left;
        width: 50%;
        padding-left: 25%;
        box-sizing: border-box;
    }
    #kYearContSwiper .kycs2col2{
        float: left;
        width: 50%;
        padding-left: 5%;
        box-sizing: border-box;
    }
}

#kYearContSwiper .kycs3col1{
    float: left;
    width: 70%;
}

#kYearContSwiper .kycs3col11{
    float: left;
    width: 50%;

}

#kYearContSwiper .kycs3col12{
    float: left;
    width: 50%;
}

#kYearContSwiper .kycs3col2{
    float: left;
    width: 30%;
}

#kYearContSwiper .kycsdl{
    text-align: left;
}

.clear_float {
    clear: both;
}

.kct_row{
    position: relative;
}



.kct_row .kctr_col{
    position: relative;
    width: 50%;
    float: left;
    border-radius: 50%;
    padding: 1vw;
    box-sizing: border-box;

}

.kct_row .kctr_col .kctrc_img{
    width: 100%;
    border-radius: 50%;
}

@media screen and (max-width: 2000px) {
    .main #main-visual .content .info .sub-title { font-size: 60px; }
    #wrap.jp .main #main-visual .content .info .sub-title .m_br { display: none; }
    .main #main-visual .scroll { bottom: -1em !important; }
}

@media screen and (max-width: 1200px) {
    .main #main-visual .content {
        width: 100%;
    }
    .main #main-visual .content .btn-paly {
        width: 87px;
        height: 76px;
    }
    .main #main-visual .scroll {
        font-size: 12px;
    }
    .main #main-visual .scroll:after {
        content: "";
        height: 30px;
        margin-top: 12px;
    }
    .main #different .cont-wrap {
        width: 100%;
        margin: 0 auto 0;
        padding-top: 90px;
        overflow: hidden;
    }
    .main #different .cont-wrap .cont h3 {
        position: relative;
        left: 10px;
        top: 0;
        width: 105px;
        margin-top: -30px;
    }
    .main #different .cont-wrap .cont h3 img {
        width: 100%;
    }
    .main #different .cont-wrap .cont .info {
        margin-left: 10px;
    }
    .main #different .cont-wrap .cont .info .title {
        line-height: 1.24;
    }
    .main #different .cont-wrap .cont .info .text {
        font-size: 16px;
        color: #676767;
    }
    .main #different .cont-wrap .cont01 {
        width: 500px;
        float: none;
        margin: 0 auto;
    }
    .main #different .cont-wrap .cont01 .item {
        display: block;
        margin-left: 0;
    }
    .main #different .cont-wrap .cont01 .item img {
        width: 100%;
    }
    .main #different .cont-wrap .cont01 .bg-01 {
        top: 191px;
        left: -23px;
    }
    .main #different .cont-wrap .cont01 .bg-01 img {
        width: 102px;
        height: 62px;
    }
    .main #different .cont-wrap .cont01 .bg-02 {
        top: auto;
        left: auto;
        right: 20px;
        bottom: 20px;
    }
    .main #different .cont-wrap .cont01 .bg-02 img {
        width: 78px;
    }
    .main #different .cont-wrap .cont02 {
        float: none;
        width: 505px;
        margin: 0 auto;
    }
    .main #different .cont-wrap .cont02:before {
        position: static;
        width: 100%;
        margin: 100px auto;
        height: 1px;
        background: url(/images/home/line_02.svg) center bottom no-repeat;
    }
    .main #different .cont-wrap .cont02 h3 {
        width: 140px;
    }
    .main #different .cont-wrap .cont02 .item {
        margin: 0 auto;
    }
    .main #different .cont-wrap .cont02 .item .vidio {
        width: calc(100% - 1px);
        height: 100%;
    }
    .main #different .cont-wrap .cont02 .bg-01 {
        top: 104px;
        right: -46px;
    }
    .main #different .cont-wrap .cont02 .bg-01 img {
        width: 172px;
    }
    .main #different .cont-wrap .cont02 .bg-02 {
        right: 40px;
        top: auto;
        bottom: 130px;
    }
    .main #different .cont-wrap .cont02 .bg-02 img {
        width: 36px;
    }
    .main #different .cont-wrap .cont03 {
        width: auto;
    }
    .main #different .cont-wrap .cont03:before {
        margin: 100px auto;
    }
    .main #different .cont-wrap .cont03 h3 {
        margin-top: 0;
        margin-left: 0;
        left: 0;
    }
    .main #different .cont-wrap .cont03 .info {
        float: none;
        margin-left: 50px;
    }
    .main #different .cont-wrap .cont03 .item {
        float: none;
        width: 100%;
        height: 100% !important;
        max-width: 662px;
        margin: 0 auto;
    }
    .main #different .cont-wrap .cont03 .item img {
        width: 100%;
    }
    .main #different .cont-wrap .cont03 .bg-01 {
        top: auto;
        bottom: 149px;
        width: 66px;
    }
    .main #different .cont-wrap .cont03 .bg-01 img {
        width: 100%;
    }
    .main #different .section-bg .bg-01 {
        top: 210px !important;
        bottom: auto !important;
        width: 40px !important;
    }
    .main #different .section-bg .bg-01 img {
        width: 100%;
    }
    .main #different .section-bg .bg-02 {
        top: 310px;
        bottom: auto;
        width: 121px;
    }
    .main #different .section-bg .bg-02 img {
        width: 100%;
    }
    .main #episode {
        position: relative;
        /* .btn-more{
                width: 134px;
                height: 46px;
                background: url($img + 'btn_more_m.png') 0 0 no-repeat;
                background-size: 100% auto;
                margin: 25px auto 0;
                img{
                    display: none;
                }
            } */
    }
    .main #episode .section-title {
        font-size: 34px;
        line-height: 1.24;
    }
    .main #episode .summary {
        font-size: 16px;
        line-height: 1.63;
        color: #676767;
    }
    .main #episode .item-wrap {
        width: auto;
        margin-top: 37px;
    }
    .main #episode .item-wrap .item-list .item {
        width: 155px;
    }
    .main #episode .item-wrap .item-list .item img {
        width: 100%;
    }
    .main #episode .item-wrap .item-list .info {
        font-family: Overpass;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.43;
        margin-top: 15px;
    }
    .main #episode .bg-wrap .bg-01 {
        right: 28px;
        bottom: -60px;
    }
    .main #episode .bg-wrap .bg-01 img {
        width: 72px;
    }
    .main #episode .bg-wrap .bg-02 {
        right: 17px;
        bottom: -110px;
    }
    .main #episode .bg-wrap .bg-02 img {
        width: 38px;
    }
    .main #episode .bg-wrap .bg-03 {
        right: 58px;
        bottom: -150px;
    }
    .main #episode .bg-wrap .bg-03 img {
        width: 30px;
    }
    .main #episode .swiper-slide {
        text-align: center;
        font-size: 18px;
    }
    .main #episode .swiper-pagination-bullets {
        position: relative;
        margin-top: 40px;
    }
    .main #episode .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background: transparent;
        border: 1px solid #d0c0a1;
        opacity: 1;
    }
    .main #episode .swiper-pagination-bullet-active {
        background: #ce0017;
        border: 1px solid #ce0017;
    }
    .main #episode .btn-more {
        display: block;
        width: 137px;
        height: 48px;
        line-height: 48px;
        margin: 12px auto 0;
        background-size: auto 48px;
        font-size: 14px;
        box-sizing: border-box;
        padding-right: 20px;
    }
    .main #episode .btn-more .ico {
        width: 24px;
        height: 23px;
        background-size: 24px;
        margin-top: 12px;
        right: 21px;
    }
    .main #special-price .section-title {
        font-size: 34px;
        line-height: 1.24;
    }
    .main #special-price .cont-wrap {
        width: auto;
        display: block;
    }
    .main #special-price .cont-wrap::before {
        display: none;
    }
    .main #special-price .cont-wrap .cont {
        width: 100%;
        margin-top: 50px;
    }
    .main #special-price .cont-wrap .cont .info {
        background-position: center center;
    }
    .main #special-price .btn-more {
        display: block;
        width: 137px;
        height: 48px;
        line-height: 48px;
        margin: 30px auto 0;
        background-size: auto 48px;
        font-size: 14px;
        box-sizing: border-box;
        padding-right: 20px;
    }
    .main #special-price .btn-more .ico {
        width: 24px;
        height: 23px;
        background-size: 24px;
        margin-top: 12px;
        right: 21px;
    }
}

@media screen and (max-width: 750px) {
    .main #main-visual .content {
        align-items: initial;
        padding-top: 16Vh;
    }
    .main #main-visual .content .info .sub-title {
        font-size: 2.875rem;
        line-height: 1.22;
    }

    #wrap.jp .main #main-visual .content .info .sub-title .m_br { display: block; }

    .main #main-visual .content .info .text {
        margin-top: 12px;
        font-size: 1.125rem;
        font-weight: bold;
    }
    .main #main-visual .content .btn-paly {
        position: fixed;
        top: auto;
        bottom: 110px;
        transform: translate(-50%, 0);
    }
    .main #main-visual .scroll {
        font-size: 12px;
    }
    .main #main-visual .scroll:after {
        content: "";
        height: 30px;
        margin-top: 12px;
    }
    .main #different .cont-wrap .cont {
        width: 100%;
        padding: 0 40px;
        margin: 0 auto;
        box-sizing: border-box;
    }
    .main #different .cont-wrap .cont h3 img {
        width: 100%;
    }
    .main #different .cont-wrap .cont .item {
        width: 100%;
    }
    .main #different .cont-wrap .cont .info {
        margin-top: 25px;
        margin-left: 10px;
    }
    .main #different .cont-wrap .cont .info .title {
        line-height: 1.24;
        font-size: 34px;
        margin-top: 20px;
    }
    .main #different .cont-wrap .cont .info .text {
        font-size: 16px;
        color: #676767;
    }
    .main #different .cont-wrap .cont01 .item {
        height: auto;
    }
    .main #different .cont-wrap .cont02 .item {
        padding-bottom: 71.2vw;
        height: 0;
    }
    .main #different .cont-wrap .cont02 .item .vidio {
        position: static;
    }
    .main #different .cont-wrap .cont03 .item {
        float: none;
        overflow: initial;
    }
    .main #different .cont-wrap .cont03 .thumb {
        margin: 0 -20px;
    }
    .main #different .section-bg .bg-01 {
        top: 0 !important;
    }
    .main #episode .swiper-slide {
        width: 155px !important;
    }
    .main #episode .swiper-pagination {
        display: block;
    }
    .main #special-price {
        /* .btn-more{
                display: block;
                width: 134px;
                height: 46px;
                margin: 40px auto 0;
                background: url($img + 'btn_more_m.png') 0 0 no-repeat;
                background-size: 100% auto;
                img{
                    display: none;
                }
            } */
    }
    .main #special-price .section-title {
        font-size: 34px;
        line-height: 1.24;
    }
    .main #special-price .cont-wrap {
        width: auto;
        display: block;
    }
    .main #special-price .cont-wrap::before {
        display: none;
    }
    .main #special-price .cont-wrap .cont {
        width: 100%;
        margin-top: 30px;
        padding: 0 40px;
        box-sizing: border-box;
    }
    .main #special-price .cont-wrap .cont h3 {
        height: 40px;
        margin: 0 auto 0;
    }
    .main #special-price .cont-wrap .cont h3 img {
        height: 100%;
    }
    .main #special-price .cont-wrap .cont .info {
        background-position: center center;
        background-size: 100% auto;
        height: 43.333333VW;
        box-sizing: border-box;
        padding-top: 7vw;
        max-width: 295px;
        max-height: 155px;
        margin: -20px auto 0;
    }
    .main #special-price .cont-wrap .cont .info .price {
        font-size: 34px;
    }
    .main #special-price .cont-wrap .cont .info .price span {
        font-size: 22px;
    }
    .main #special-price .cont-wrap .cont .info .total {
        font-size: 20px;
    }
    .main #special-price .cont-wrap .cont .info .total span {
        font-size: 15px;
    }
    .main #special-price .cont-wrap .cont .btn-more {
        width: 100px;
        height: 24px;
        margin: 20px auto 0;
        background: url("/images/home/btn_more_01_m.png") 0 0 no-repeat;
        background-size: 100%;
    }
    .main #special-price .cont-wrap .cont .btn-more img {
        display: none;
    }
    .main #episode {
        padding: 0;
    }
    .main #episode .section-title {
        padding-top: 100px;
    }
    .main #episode .item-wrap {
        padding-bottom: 100px;
    }
    .main #episode .bg-wrap {
        margin-bottom: 0;
    }
    .main #episode .bg-wrap .bg-01 {
        bottom: 30px;
    }
    .main #episode .bg-wrap .bg-02 {
        bottom: -20px;
    }
    .main #episode .bg-wrap .bg-03 {
        bottom: -50px;
    }
}

/* .eng .main #different .cont03{
    padding-top: 60px;
} */
@media screen and (max-width: 540px) {
    .main #special-price .cont-wrap .cont .info {
        padding-top: 8vw;
    }
}

@media screen and (max-width: 414px) {
    .main #main-visual .content {
        align-items: initial;
    }
    .main #main-visual .content .info .sub-title {
        font-size: 12.266666666666666vw;
        line-height: 1.15;
    }
    .main #different .cont-wrap .cont02 .item {
        /* height: 267px;
                        width: 293px;
                        padding-bottom: 0; */
        height: 0;
        width: 100%;
        margin: 0 auto;
        padding-bottom: 72.4vw;
    }
    .main #special-price .cont-wrap .cont .info {
        padding-top: 11vw;
    }
}

@media screen and (max-width: 320px) {
    .main #different .cont-wrap .cont01 .bg-02 {
        bottom: -36px;
    }
    .main #different .cont-wrap .cont02 .item {
        padding-bottom: 68.6vw;
    }
    .main #special-price .cont-wrap .cont .info .price {
        font-size: 9.066666666666666VW;
    }
}

@media screen and (max-width: 280px) {
    .main #different .cont-wrap .cont01 .bg-02 {
        bottom: -36px;
    }
    .main #different .cont-wrap .cont02 .item {
        padding-bottom: 63.6vw;
    }
    .main #different .cont-wrap .cont02 .bg-02 {
        bottom: 200px;
    }
}

#wrap.eng .main #main-visual .sub-title {
    line-height: 1.03;
}

#wrap.eng .main #different .cont h3 {
    width: 291px;
    height: 60px;
    background: url("/images/home/images_eng/cont_title_01_eng.svg") 0 0 no-repeat;
    background-size: auto 60px;
    line-height: 60px;
    text-align: center;
    font-size: 22px;
    font-family: "Overpass", sans-serif;
    color: #fff;
    font-weight: bold;
}

#wrap.eng .main #different .cont .info {
    font-family: "Overpass", sans-serif;
}

#wrap.eng .main #different .cont .info .title {
    letter-spacing: -0.04em;
    line-height: 1.08;
}

#wrap.eng .main #different .cont.cont02 h3 {
    width: 282px;
    background-image: url("/images/home/images_eng/cont_title_02_eng.svg");
}

#wrap.eng .main #different .cont.cont02 .info {
    margin-left: 50px;
}

#wrap.eng .main #different .cont.cont03 h3 {
    width: 301px;
    height: 61px;
    line-height: 61px;
    background-image: url("/images/home/images_eng/cont_title_03_eng.svg");
    background-size: auto 61px;
}

#wrap.eng .main #different .cont01 .bg-02 {
    top: 522px;
    left: 550px;
}

#wrap.eng .main #different .cont01 .bg-02 img {
    width: 120px;
}

#wrap.eng .main #different .cont03 .info h3 {
    margin-left: -15px;
}

#wrap.eng .main #different .cont03 .item {
    margin-right: -70px;
}

#wrap.eng .main .btn-more {
    padding-right: 42px;
}

#wrap.eng .main .btn-more span {
    font-weight: bold;
}

@media screen and (max-width: 1200px) {
    #wrap.eng .main #different .cont h3 {
        font-size: 14px;
        width: auto;
        height: 38px;
        background-size: auto 38px;
        line-height: 38px;
        padding: 0 20px;
        text-align: left;
    }
    #wrap.eng .main #different .cont.cont03 h3 {
        font-size: 14px;
        width: auto;
        height: 38px;
        background-size: auto 38px;
        line-height: 38px;
        padding: 0 36px;
        text-align: left;
    }
    #wrap.eng .main #different .cont03 .item {
        margin: 0 auto;
    }
    #wrap.eng .main #special-price .cont-wrap .cont {
        margin: 50px auto 0;
    }
    #wrap.eng .main .btn-more {
        display: block;
        width: 133px;
        height: 52px;
        line-height: 51px;
        margin: 12px auto 0;
        background-size: auto 51px;
        font-size: 14px;
        box-sizing: border-box;
        padding-right: 32px;
    }
}

@media screen and (max-width: 768px) {
    #wrap.eng .main #different .cont.cont02 .info {
        margin-left: 0;
    }
    #wrap.eng .main #main-visual .content .btn-paly {
        bottom: 90px;
    }
    .main #different .cont-wrap .cont02 {
        padding-bottom: 39px;
    }
}

@media screen and (max-width: 375px) {
    #wrap.eng .main #main-visual .content .info .sub-title {
        font-size: 9.266667VW;
    }
}

#wrap.jp div, #wrap.jp p, #wrap.jp span, #wrap.jp strong {
    word-break: break-all;
}

#wrap.jp .main #main-visual .content .info {
    margin-bottom: 60px;
}

#wrap.jp .main #main-visual .content .info .sub-title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
}

#wrap.jp .main #main-visual .content .info .text {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp .main #different .cont .info .title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
    font-size: 2.75rem;
    line-height: 1.32;
}

#wrap.jp .main #different .cont h3 {
    display: inline-block;
    text-align: center;
    font-family: "M PLUS 1p", sans-serif;
    font-size: 1.375rem;
    min-width: 174px;
    padding: 16px 22px;
    line-height: 1.5;
    box-sizing: border-box;
    background: url("/images/home/images_jap/cont_title_01_jp.svg") 0 0 no-repeat;
    background-size: auto 63px;
    color: #fff;
}

#wrap.jp .main #different .cont02 h3 {
    background-image: url("/images/home/images_jap/cont_title_02_jp.svg");
}

#wrap.jp .main #different .cont .info .text {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp .main #different .cont01 .bg-02 {
    top: 596px;
    left: 460px;
}

#wrap.jp .main #different .cont03 .bg-01 {
    top: 663px;
    left: 428px;
}

#wrap.jp .main #episode .section-title {
    font-family: "M PLUS 1p", sans-serif;
    font-size: 2.75rem;
    line-height: 1.32;
    font-weight: bold;
}

#wrap.jp .main #episode .summary {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp .main .btn-more {
    width: 210px;
    padding-right: 40px;
    letter-spacing: -0.03em;
    font-family: "M PLUS 1p", sans-serif;
    background-image: url("/images/home/images_jap/btn_more@2x.png");
}

#wrap.jp .main .btn-more span {
    font-family: "M PLUS 1p", sans-serif;
    font-size: 16px;
    font-weight: 500;
}

#wrap.jp .main #special-price .section-title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
    font-size: 2.75rem;
    line-height: 1.32;
}

#wrap.jp .main #special-price .cont-wrap .cont {
    width: 528px;
}

#wrap.jp .main #special-price .cont-wrap .cont.cont01 h3 {
    width: 320px;
    height: 65px;
    margin: 0 auto;
}

#wrap.jp .main #special-price .cont-wrap .cont h3 {
    width: 160px;
    height: 65px;
    margin: 0 auto;
}

#wrap.jp .main #special-price .cont-wrap .cont h3 img {
    width: 100%;
}

#wrap.jp .main #special-price .cont-wrap .cont .info {
    height: 248px;
    background-image: url("/images/home/images_jap/price_cont_bg01.svg");
}

#wrap.jp .main #special-price .cont-wrap .cont .info .price {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
    font-size: 3.75rem;
}

#wrap.jp .main #special-price .cont-wrap .cont .info .price span {
    font-size: 2.5rem;
}

#wrap.jp .main #special-price .cont-wrap .cont .info .total {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
}

#wrap.jp .main #special-price .cont-wrap .cont02 .info {
    background-image: url("/images/home/images_jap/price_cont_bg02.svg");
}

/* S:jp-review */
:root {
    --jp-font-family: "M PLUS 1p", "Noto Sans JP", sans-serif;
    --pc-main-section-p: 120px 0;
}

.ml_100 { margin-left: 0.5em; }
.mr_100 { margin-right: 0.5em; }

.font_center {
    text-align: center;
}

.d_inline_block {
    display: inline-block !important;
}

.review_section {
    position: relative;
    padding: 150px 0 50px;
    background-image: linear-gradient(to right, #e7decb 60%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 16px 2px;
    background-repeat: repeat-x;
    z-index: 1;
}

.review_section .container {
    width: 92%;
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.slider_container {
    position: relative;
    max-width: 1330px;
    width: 100%;
    margin: 0 auto;
}

.review_section .section-title {
    font-family: var(--jp-font-family);
    font-size: 3.75rem;
    text-align: center;
    margin-bottom: 0.2em;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.review_section .summary {
    font-family: var(--jp-font-family);
    font-size: 1.25rem;
    text-align: center;
    color: #676767;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.ico_link {
    position: relative;
    top: 0.2em;
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    background: url(/images/home/ok@2x.png) 0 0 no-repeat;
    background-size: contain;
}

.review_section .review_list_block {
    position: relative;
    margin-top: 3.5rem;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

/* swiper arrow custom */
#review .swiper_container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
    overflow-y: unset;
    list-style: none;
    z-index: 1;
    padding: 1.5em 15px 4.5em;
    box-sizing: border-box;
}

#review .paging {
    width: 100%;
}

#review .paging .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #d0c0a1;
    opacity: 1;
}

#review .paging .swiper-pagination-bullet-active {
    background: #ce0017;
    border: 1px solid #ce0017;
}

.review_list_block .swiper-container {
    padding: 1em;
}

.btn_circle_next,
.btn_circle_prev {
    width: 3.5rem;
    height: 3.5rem;
    background-color: #fffcf6;
    background-size: 100% auto;
    margin-top: 0;
    border-radius: 50%;
    border: 1.5px solid #000;
    box-sizing: border-box;
}

.btn_circle_next {
    right: -5.5rem;
    background-image: url(/images/home/btn_arrow_next.png);
}

.btn_circle_prev {
    left: -5.5rem;
    background-image: url(/images/home/btn_arrow_prev.png);
}

.review_box.swiper-slide {
    height: 100%;
}
/* swiper arrow custom */

.review_box {
    background-color: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 3px 1px 10px 5px rgba(179,179,179,0.2);
    -webkit-box-shadow: 3px 1px 10px 5px rgba(179,179,179,0.2);
    -moz-box-shadow: 3px 1px 10px 5px rgba(179,179,179,0.2);
    cursor: pointer;
}

.review_box .review_thumb {
    position: relative;
    overflow: hidden;
    background-color: #ededed;
}

.review_box .review_thumb.video::before {
    content: '';
    display: inline-block;
    width: 5em;
    height: 4.36em;
    background: url(/images/home/btn_play.svg) no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10;
}

.review_box .review_thumb .review_img {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.review_box .review_thumb::after {
    content: '';
    display: block;
    padding-bottom: 56.25%;
    z-index: -1;
}

.review_box .review_desc {
    padding:  1.75rem 1.25rem 1.5rem;
}

.review_box .author {
    font-family: var(--jp-font-family);
    font-size: 1.25rem;
    font-weight: 600;
    color: #242424;
    margin-bottom: 0.9em;
}

.review_box .author .info {
    position: relative;
    font-family: var(--jp-font-family);
    color: #a1a1a1;
    margin-left: 0.7em;
    padding-left: 0.7em;
}

.review_box .author .info::before {
    content: '';
    position: absolute;
    top: 0.3em;
    left: 0;
    display: inline-block;
    width: 2px;
    height: 0.9em;
    background-color: #7a7a7a;
}

.review_box .review_text {
    font-family: var(--jp-font-family);
    font-size: 1.145rem;
    font-weight: 400;
    color: #434343;
    line-height: 1.5;
    text-overflow: ellipsis;
    word-break: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
}

.review_box .review_text.nowrap {
    text-overflow: unset;
    overflow: unset;
    -webkit-line-clamp: unset;
}

.score_block {
    position: relative;
    width: 6.86rem;
    height: 1.1rem;
    background: url(/images/jp/new/ico_review_score.png) no-repeat;
    background-size: auto 100%;
    margin-bottom: 0.4em;
    z-index: 1;
}

.score_block .score {
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    background: url(/images/jp/new/ico_review_score_active.png) 0 0 no-repeat;
    background-size: auto 100%;
    width: auto;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.score_block .score.star_0 { width: 0; }
.score_block .score.star_1 { width: 20%; }
.score_block .score.star_2 { width: 40%; }
.score_block .score.star_3 { width: 60%; }
.score_block .score.star_4 { width: 80%; }
.score_block .score.star_5 { width: 100%; }


.input_star_block {
    position: relative;
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.4em;
    z-index: 1;
}

.input_star_block .star {
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
    background: url(/images/jp/new/ico_review_score.png) no-repeat;
    background-size: auto 100%;
    overflow: hidden;
    z-index: 3;
}

.input_star_block .star.active {
    background: url(/images/jp/new/ico_review_score_active.png) no-repeat;
    background-size: auto 100%;
}

.review_list_wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.2rem 1.8rem;
}

.border_block {
    background-color: #fff;
    border: 2px solid #c1a672;
    border-radius: 2.5rem;
    padding: 2.5rem 2rem;
    margin: 6.6rem auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 0;
}

.border_block .content_title {
    font-size: 2rem;
    font-weight: 600;
    color: #434343;
    letter-spacing: -4px;
}

.border_block .content_desc {
    font-size: 1.5rem;
    margin-top: 0.3em;
    letter-spacing: -2px;
}

.btn_rounded {
    font-weight: 600;
    border-radius: 30rem;
    padding: 0.2em 0.8em;
    cursor: pointer;
}

.btn_rounded .ico_arrow {
    position: relative;
    display: inline-block;
    width: 0.5em;
    background: url('/images/jp/new/arrow.png') center no-repeat;
    background-size: 100%;
    margin-left: 0.1em;
}

.btn_rounded .ico_arrow.down {
    transform: rotate(90deg);
}

.btn_rounded .ico_arrow::after {
    content: '';
    display: block;
    padding-bottom: 150%;
}

.btn_rounded.yellow {
    background-color: #ffcc00;
    color: #fff;
}

.btn_rounded.disabled,
.btn_rounded.gray {
    background-color: #A0A0A0;
    color: #fff;
}

.border_block .btn_rounded {
    height: auto;
    display: inline-block;
    font-size: 2rem;
    letter-spacing: -1px;
}

.review .btn_wrapper {
    padding: 6rem 0;
    text-align: center;
}

.review .btn_wrapper .btn_rounded {
    font-size: 3rem;
    letter-spacing: -4px;
}

.review .btn_wrapper .btn_rounded .ico_arrow.down {
    width: 0.4em;
}

.input_box {
    border: 1px solid #cecece;
    font-size: 0.9rem;
    font-weight: 400;
}

textarea.input_box {
    width: 100%;
    resize: none;
    padding: 0.8em;
    font-size: 1rem;
}

.file_box {
    padding: 0.2em 0;
    display: flex;
    justify-content: flex-start;
}

.file_box .file_name {
    width: 50%;
    min-width: 150px;
    min-height: 1.1rem;
    margin-right: 0.5em;
    padding-left: 0.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

.file_box input {
    display: none;
}

.btn_square.gray {
    background-color: #cecece;
    color: #1b1b1b;
}

.btn_square {
    padding: 0.2em 0.8em;
    font-weight: 600;
    letter-spacing: -2px;
    cursor: pointer;
}

.file_box .btn_square {
    font-size: 1.25rem;
}

.ck_circle label {
    font-size: 1em;
    color: #434343;
    padding: 0 !important;
    cursor: pointer;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.ck_circle label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.1em;
    background: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

.ck_circle input {
    position: absolute;
    visibility: hidden;
}

.ck_circle label::before {
    content: '';
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background-color: #fff;
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    margin-right: 0.375em;
    -webkit-transition: 0.25s ease;
    -o-transition: 0.25s ease;
    transition: 0.25s ease;
    border: 2px solid #626262;
}

.ck_circle input:checked + label::before {
    background-color: #cc0000;
    -webkit-box-shadow: inset 0 0 0 0.18em #fff;
    box-shadow: inset 0 0 0 0.18em #fff;
    border: 2px solid #cc0000;
}

.ck_rounded label {
    cursor: pointer;
    margin: 0 !important;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.1rem;
    color: #535353;
    width: auto !important;
    height: auto !important;
    padding-left: 1.5em !important;
    text-align: left;
    background-image: none !important;
}

.ck_rounded label::before {
    content: '';
    position: absolute;
    top: 0.2em;
    left: 0;
    display: inline-block;
    vertical-align: text-top;
    width: 0.9em;
    height: 0.9em;
    background-color: #fff;
    background-image: none !important;
    border: 2px solid #DADADA;
    border-radius: 0.25em;
    -webkit-transition: border-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    -o-transition: border-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transition: border-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.ck_rounded input:checked + label::before {
    background-image: none !important;
    background-color: #cc0000;
    border-color: #cc0000;
}

.ck_rounded input:checked + label::after {
    content: '';
    position: absolute;
    top: 0.3em;
    left: 0.365em;
    display: table;
    width: 0.3em;
    height: 0.48em;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-name: amCheckboxOut;
    animation-name: amCheckboxOut;
}

.ck_rounded input {
    display: none;
}

@-webkit-keyframes amCheckboxOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes amCheckboxOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/* E:jp-review */

@media screen and (max-width: 768px) {
    #wrap.jp .main #different .cont-wrap .cont h3 {
        padding: 11px 20px;
        font-size: 0.875rem;
        background-size: contain;
        min-width: 125px;
        line-height: 1.7;
    }
    #wrap.jp .main #different .cont-wrap .cont .info .title {
        font-size: 2.125rem;
    }
    #wrap.jp .main #different .cont-wrap .cont02 h3 {
        min-width: 165px;
    }
    #wrap.jp .main #different .cont-wrap .cont03 .bg-01 {
        top: 493px;
        left: 268px;
    }
    #wrap.jp .main #episode .section-title {
        padding: 0 34px;
        word-break: break-all;
        font-size: 2.125rem;
        padding-top: 100px;
    }
    #wrap.jp .main #episode .summary {
        padding: 0 36px;
        letter-spacing: -0.03em;
    }
    #wrap.jp .main .btn-more {
        width: 147px;
        padding-right: 16px;
    }
    #wrap.jp .main .btn-more span {
        font-size: 0.875rem;
    }
    #wrap.jp .main #different .cont-wrap .cont02 {
        padding-bottom: 0;
    }
    #wrap.jp .main #special-price .section-title {
        word-break: break-all;
        font-size: 2.125rem;
        padding: 0 20px;
    }
    #wrap.jp .main #special-price .cont-wrap .cont {
        width: 100%;
    }
    #wrap.jp .main #special-price .cont-wrap .cont.cont01 h3 {
        height: 40px;
        width: 218px;
    }
    #wrap.jp .main #special-price .cont-wrap .cont h3 {
        height: 40px;
    }
    #wrap.jp .main #special-price .cont-wrap .cont h3 img {
        width: auto;
        height: 40px;
    }
    #wrap.jp .main #special-price .cont-wrap .cont .info .price {
        font-size: 2rem;
    }
    #wrap.jp .main #special-price .cont-wrap .cont .info .price span {
        font-size: 1.375rem;
    }
    #wrap.jp .main #special-price .cont-wrap .cont .info {
        max-height: 143px;
    }
}

@media screen and (max-width: 280px) {
    .main #special-price .cont-wrap .cont {
        padding: 0 10px;
    }
    .main #special-price .cont-wrap .cont .info .price {
        font-size: 1.875rem;
    }
    .main #special-price .cont-wrap .cont .info .price span {
        font-size: 1.25rem;
    }
    #wrap.jp .main #special-price .cont-wrap .cont .info .price {
        font-size: 1.875rem;
    }
}

.sub {
    padding-top: 160px;
}

.sub #main-visual {
    width: 100%;
    height: 600px;
    overflow: hidden;
    position: fixed;
    top: 0;
    z-index: -1;
}

.sub #main-visual .video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    position: relative;
    transform: scale(1);
}

.sub #main-visual .video .playing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: 1;
}

.sub #main-visual .video .dimmed {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 2;
}

.sub .section-title {
    position: relative;
    font-size: 200px;
    font-weight: bold;
    text-align: center;
    font-family: "Overpass", sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 64px;
    line-height: 1.4;
}

.sub .section-title strong {
    display: block;
}

.sub .section-title .bg-wrap .bg-01 {
    display: block;
    width: 200px;
    height: 260px;
    position: absolute;
    left: -160px;
    top: -150px;
    background: url("/images/home/Element/rocket.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .section-title .bg-wrap .bg-02 {
    display: block;
    width: 100px;
    height: 124px;
    position: absolute;
    left: 629px;
    top: 209px;
    background: url("/images/home/Element/brid.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary {
    position: relative;
    background: #fffcf6;
}

.sub .content-primary section {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    padding-bottom: 120px;
    /* .swiper-slide > *{
                transform: translateY(40px);
                transition: all 0.4s ease;
                transition-delay: 0.2s;
            }

            .swiper-slide-active > * {
                transform: translateY(0px);
                opacity: 1;
            } */
}

.sub .content-primary section + section {
    padding-top: 130px;
    background-image: linear-gradient(to right, #e7decb 60%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 16px 2px;
    background-repeat: repeat-x;
}

.sub .content-primary section:last-child {
    padding-bottom: 0;
}

.sub .content-primary section .info {
    display: flex;
    justify-content: center;
    vertical-align: top;
    position: relative;
    z-index: 1;
}

.sub .content-primary section .sub-title {
    display: block;
    font-size: 4.625rem;
    line-height: 1.22;
    font-family: "Jua", sans-serif;
    font-weight: normal;
}

.sub .content-primary section .text {
    font-size: 1.25rem;
    font-weight: 500;
    color: #676767;
    margin-top: 16px;
}

.sub .content-primary section .text p {
    font-size: 1.25rem;
}

.sub .content-primary section .text p + p {
    margin-top: 24px;
}

.sub .content-primary section .bg-wrap .bg-01 {
    display: block;
    width: 540px;
    height: 516px;
    position: absolute;
    left: 726px;
    bottom: 40px;
    background: url("/images/home/Element/wave.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary section .bg-wrap .bg-02 {
    display: block;
    width: 86px;
    height: 76px;
    position: absolute;
    left: 580px;
    bottom: 120px;
    background: url("/images/home/Element/stone.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary section .swiper-pagination-bullets {
    position: relative;
    margin-top: 40px;
    font-size: 0;
}

.sub .content-primary section .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #d0c0a1;
    opacity: 1;
}

.sub .content-primary section .swiper-pagination-bullet-active {
    background: #ce0017;
    border: 1px solid #ce0017;
}

.sub .content-primary section .swiper-button-next {
    top: auto;
    bottom: 100px;
    width: 56px;
    height: 56px;
    background-color: #fffcf6;
    background-image: url("/images/home/btn_arrow_next.png");
    background-size: 100% auto;
    margin-top: 0;
    border-radius: 28px;
    border: 1.5px solid #000;
    box-sizing: border-box;
    /* &:hover{
                    animation-name: arrownext;
                    animation-duration: 700ms;
                    animation-delay: 0ms;
               } */
}

.sub .content-primary section .swiper-button-prev {
    top: auto;
    bottom: 100px;
    width: 56px;
    height: 56px;
    margin-top: 0;
    border-radius: 28px;
    border: 1.5px solid #000;
    box-sizing: border-box;
    background-color: #fffcf6;
    background-image: url("/images/home/btn_arrow_prev.png");
    background-size: 100% auto;
    /*  &:hover{
                    animation-name: arrowprev;
                    animation-duration: 705ms;
               } */
}

.sub .content-primary .story {
    padding-top: 20px;
    padding-bottom: 200px;
}

.sub .content-primary .story .sub-title {
    -webkit-transform: translateX(-70px);
    transform: translateX(-70px);
}

.sub .content-primary .story .text {
    margin-left: 90px;
    margin-top: 4px;
    -webkit-transform: translateX(70px);
    transform: translateX(70px);
}

.sub .content-primary#ourStory .our {
    max-width: initial;
    background: none;
    padding-top: 0;
    z-index: 0;
}

.sub .content-primary#ourStory .our .tab-wrap {
    max-width: 1160px;
    padding-top: 130px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    background-image: linear-gradient(to right, #e7decb 60%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 16px 2px;
    background-repeat: repeat-x;
}

.sub .content-primary#ourStory .our .tab-wrap .tab {
    margin-bottom: 50px;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#ourStory .our .tab-wrap .tab li a {
    line-height: 68px;
    font-weight: bold;
}

.sub .content-primary#ourStory .our .tab-wrap .title {
    font-size: 3.125rem;
    line-height: 1.16;
    font-family: "Jua", sans-serif;
    font-weight: normal;
    opacity: 0;
}

.sub .content-primary#ourStory .our .tab-wrap .summary {
    margin-top: 16px;
    color: #646466;
    font-size: 1.25rem;
    opacity: 0;
}

.sub .content-primary#ourStory .our .tab-wrap .cont-box {
    opacity: 0;
}

.sub .content-primary#ourStory .our .tab-wrap .cont-box.active {
    animation-timing-function: cubic-bezier(0.52, 0.01, 0.16, 1);
    animation-name: translateY;
    animation-duration: 1000ms;
    animation-fill-mode: forwards;
    animation-delay: 250ms;
}

.sub .content-primary#ourStory .our .tab-wrap .swiper-slide-active .title {
    opacity: 1;
    -webkit-transform: translateY(0);
    -khtml-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: transform 1.3s cubic-bezier(0.895, 0, 0.18, 1);
    -khtml-transition: transform 1.3s cubic-bezier(0.895, 0, 0.18, 1);
    -moz-transition: transform 1.3s cubic-bezier(0.895, 0, 0.18, 1);
    -ms-transition: transform 1.3s cubic-bezier(0.895, 0, 0.18, 1);
    -o-transition: transform 1.3s cubic-bezier(0.895, 0, 0.18, 1);
    transition: transform 1.3s cubic-bezier(0.895, 0, 0.18, 1);
}

.sub .content-primary#ourStory .our .tab-wrap .swiper-slide-active .summary {
    opacity: 1;
    -webkit-transform: translateY(0);
    -khtml-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: transform 1.3s cubic-bezier(0.895, 0, 0.18, 1);
    -khtml-transition: transform 1.3s cubic-bezier(0.895, 0, 0.18, 1);
    -moz-transition: transform 1.3s cubic-bezier(0.895, 0, 0.18, 1);
    -ms-transition: transform 1.3s cubic-bezier(0.895, 0, 0.18, 1);
    -o-transition: transform 1.3s cubic-bezier(0.895, 0, 0.18, 1);
    transition: transform 1.3s cubic-bezier(0.895, 0, 0.18, 1);
}

.sub .content-primary#ourStory .our #tabcont-01 {
    position: relative;
    width: 810px;
    margin: 0 auto;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#ourStory .our #tabcont-01 .thumb {
    width: 540px;
    height: 530px;
    margin: 70px auto 0;
}

.sub .content-primary#ourStory .our #tabcont-01 .thumb img {
    width: 100%;
}

.sub .content-primary#ourStory .our #tabcont-01 .bg-01 {
    display: block;
    width: 150px;
    height: 125px;
    position: absolute;
    left: -56px;
    top: -24px;
    background: url("/images/home/Element/nature01.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#ourStory .our #tabcont-02 .title {
    opacity: 1;
}

.sub .content-primary#ourStory .our #tabcont-02 .summary {
    opacity: 1;
}

.sub .content-primary#ourStory .our #tabcont-02 .bg-01 {
    display: block;
    width: 80px;
    height: 152px;
    position: absolute;
    left: 250px;
    top: 33px;
    background: url("/images/home/Element/pen.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#ourStory .our .item-list {
    display: flex;
    max-width: 860px;
    margin: 80px auto 0;
}

.sub .content-primary#ourStory .our .item-list li {
    margin-left: 45px;
    width: 33.3%;
}

.sub .content-primary#ourStory .our .item-list li:first-child {
    margin-left: 0;
}

.sub .content-primary#ourStory .our .item-list li:first-child .tnumb {
    max-width: 250px;
    margin-top: 12px;
}

.sub .content-primary#ourStory .our .item-list .thumb {
    display: block;
    max-width: 260px;
    margin: 0 auto;
    width: 100%;
}

.sub .content-primary#ourStory .our .item-list .thumb img {
    width: 100%;
}

.sub .content-primary#ourStory .our .item-list .text {
    display: block;
    margin-top: 25px;
    margin-left: 0;
    color: #000;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.sub .content-primary#ourStory .our .bg-wrap .bg-01 {
    display: block;
    width: 378px;
    height: 363px;
    position: absolute;
    left: -168px;
    top: 358px;
    background: url("/images/home/Element/egg.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#kindergarten .section-title {
    font-size: 11.25rem;
}

.sub .content-primary#kindergarten .section-title .bg-wrap .bg-01 {
    width: 400px;
    height: 394px;
    left: auto;
    right: -110px;
    top: -165px;
    bottom: auto;
    background-image: url("/images/home/Element/nature.png");
    background-size: 100% auto;
    opacity: 1 !important;
}

.sub .content-primary#kindergarten .sub-title {
    margin-top: 56px;
    display: block;
    font-size: 50px;
    line-height: 1.16;
    font-family: "Jua", sans-serif;
}

.sub .content-primary#kindergarten .story {
    padding-bottom: 120px;
}

.sub .content-primary#kindergarten .story .sub-title {
    font-size: 74px;
    margin-top: 0;
}

.sub .content-primary#kindergarten .story .info {
    justify-content: initial;
    padding-left: 58px;
}

.sub .content-primary#kindergarten .story .bg-wrap .bg-01 {
    width: 47px;
    height: 57px;
    left: -75px;
    top: 55px;
    bottom: auto;
    background-image: url("/images/home/Element/note.png");
    background-size: 100% auto;
}

.sub .content-primary#kindergarten .story .bg-wrap .bg-02 {
    width: 100px;
    height: 98px;
    left: -19px;
    top: 86px;
    bottom: auto;
    background-image: url("/images/home/Element/heart.png");
    background-size: 100% auto;
    z-index: 0;
}

.sub .content-primary#kindergarten .expertise {
    padding-bottom: 120px;
    text-align: center;
}

.sub .content-primary#kindergarten .expertise h3 {
    display: inline-block;
    position: relative;
    font-family: "Overpass", sans-serif;
    font-size: 6.25rem;
    font-weight: bold;
    background: url("/images/home/bg_h3_01.png") center bottom no-repeat;
    background-size: 434px auto;
    text-align: center;
    line-height: 1.48;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#kindergarten .expertise h3 .bg-heart {
    position: absolute;
    top: 0;
    right: -150px;
    display: block;
    width: 98px;
    height: 126px;
    background: url("/images/home/heart_01@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#kindergarten .expertise .content {
    margin-top: 120px;
    margin: 120px 50px 0;
    clear: both;
    text-align: left;
}

.sub .content-primary#kindergarten .expertise .content:before, .sub .content-primary#kindergarten .expertise .content:after {
    content: "";
    display: table;
}

.sub .content-primary#kindergarten .expertise .content:after {
    clear: both;
}

.sub .content-primary#kindergarten .expertise .content .item-info {
    float: right;
    position: relative;
    width: 44%;
    padding-left: 80px;
    box-sizing: border-box;
}

.sub .content-primary#kindergarten .expertise .content .item-info .sub-title {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#kindergarten .expertise .content .item-info .text {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#kindergarten .expertise .content .thumb {
    float: left;
    max-width: 588px;
    width: 56%;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#kindergarten .expertise .content .thumb img {
    width: 100%;
}

.sub .content-primary#kindergarten .en-contents {
    padding: 0;
    padding-bottom: 328px;
    max-width: none;
    background: none;
}

.sub .content-primary#kindergarten .en-contents .content {
    padding-top: 180px;
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    padding-left: 58px;
    box-sizing: border-box;
    background-image: linear-gradient(to right, #e7decb 60%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 16px 2px;
    background-repeat: repeat-x;
}

.sub .content-primary#kindergarten .en-contents .content .thumb {
    position: relative;
    margin-left: 40px;
}

.sub .content-primary#kindergarten .en-contents .content .thumb span {
    display: block;
}

.sub .content-primary#kindergarten .en-contents .content .thumb span img {
    width: 100%;
}

.sub .content-primary#kindergarten .en-contents .content .thumb span .label {
    display: block;
    text-align: center;
    margin-top: 10px;
}

.sub .content-primary#kindergarten .en-contents .content .thumb .big {
    width: 430px;
    height: 430px;
    position: relative;
    animation: video01 50s linear infinite alternate;
    z-index: 1;
    will-change: border-radius, transform;
    overflow: hidden;
    margin-top: 38px;
    z-index: 1;
}

.sub .content-primary#kindergarten .en-contents .content .thumb .big .playing {
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.sub .content-primary#kindergarten .en-contents .content .thumb .web {
    opacity: 0;
}

.sub .content-primary#kindergarten .en-contents .content .thumb .small {
    position: absolute;
    width: 120px;
}

.sub .content-primary#kindergarten .en-contents .content .thumb .small-01 {
    top: -62px;
    right: -74px;
    width: 228px;
    height: 235px;
}

.sub .content-primary#kindergarten .en-contents .content .thumb .small-01 .label {
    margin-left: 116px;
    margin-top: -103px;
}

.sub .content-primary#kindergarten .en-contents .content .thumb .small-02 {
    top: 65px;
    right: -194px;
    width: 314px;
    height: 149px;
}

.sub .content-primary#kindergarten .en-contents .content .thumb .small-02 .label {
    margin-left: 196px;
    margin-top: -18px;
}

.sub .content-primary#kindergarten .en-contents .content .thumb .small-03 {
    top: 259px;
    right: -197px;
    width: 300px;
    height: 152px;
}

.sub .content-primary#kindergarten .en-contents .content .thumb .small-03 .label {
    margin-left: 172px;
}

.sub .content-primary#kindergarten .en-contents .content .thumb .small-04 {
    top: 331px;
    right: -94px;
    width: 217px;
    height: 250px;
}

.sub .content-primary#kindergarten .en-contents .content .thumb .small-04 .label {
    margin-left: 100px;
}

.sub .content-primary#kindergarten .en-contents .content .thumb .small-05 {
    top: 332px;
    right: 80px;
    width: 124px;
    height: 304px;
}

.sub .content-primary#kindergarten .en-contents .content .thumb .small-06 {
    top: 325px;
    right: 241px;
    width: 143px;
    height: 304px;
}

.sub .content-primary#kindergarten .en-contents .content .item-info {
    position: relative;
    margin-left: 0;
    margin-top: -3px;
}

.sub .content-primary#kindergarten .en-contents .content .item-info .sub-title {
    margin-top: 0;
    letter-spacing: -0.02em;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#kindergarten .en-contents .content .item-info .text {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#kindergarten .en-contents .content .item-info .bg-01 {
    position: absolute;
    left: -134px;
    top: 0;
    display: block;
    width: 106px;
    height: 134px;
    background: url("/images/home/bg_01.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#kindergarten .en-contents .bg-wrap .bg-01 {
    display: block;
    width: 378px;
    height: 363px;
    position: absolute;
    left: -168px;
    top: 545px;
    background: url("/images/home/Element/egg.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#kindergarten .system {
    padding-top: 120px;
    padding-bottom: 120px;
}

.sub .content-primary#kindergarten .system .content {
    margin-left: 47px;
}

.sub .content-primary#kindergarten .system .content:before, .sub .content-primary#kindergarten .system .content:after {
    content: "";
    display: table;
}

.sub .content-primary#kindergarten .system .content:after {
    clear: both;
}

.sub .content-primary#kindergarten .system .content .thumb {
    float: left;
    width: 620px;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    opacity: 1;
}

.sub .content-primary#kindergarten .system .content .thumb img {
    width: 100%;
}

.sub .content-primary#kindergarten .system .content .item-info {
    float: right;
    position: relative;
    margin-top: 4px;
    margin-right: 80px;
}

.sub .content-primary#kindergarten .system .content .item-info .bg-01 {
    display: block;
    width: 101px;
    height: 100px;
    position: absolute;
    right: -83px;
    left: auto;
    top: 15px;
    background: url("/images/home/system_01.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#kindergarten .system .content .item-info .bg-02 {
    display: block;
    width: 198px;
    height: 152px;
    position: absolute;
    left: -18px;
    top: 382px;
    background: url("/images/home/system_02.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#kindergarten .road-map {
    text-align: center;
}

.sub .content-primary#kindergarten .road-map h3 {
    display: inline-block;
    position: relative;
    font-family: "Overpass", sans-serif;
    font-size: 6.25rem;
    font-weight: bold;
    background: url("/images/home/bg_h3_01.png") center bottom no-repeat;
    background-size: 434px auto;
    text-align: center;
    line-height: 1.48;
}

.sub .content-primary#kindergarten .road-map .content {
    margin-top: 120px;
    text-align: center;
}

.sub .content-primary#kindergarten .road-map .content .map-wrap {
    margin-top: 70px;
}

.sub .content-primary#kindergarten .road-map .content .map-wrap .map img {
    width: 100%;
}

.sub .content-primary#kindergarten .road-map .content .map-wrap::after {
    content: '';
    display: block;
    clear: both;
}

.sub .content-primary#kindergarten .road-map .content .map-wrap .sub-title {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#kindergarten .road-map .content .map-wrap .text {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#kindergarten .road-map .content .map-wrap .summary {
    float: right;
    text-align: left;
    margin-top: 10px;
    font-size: 0.75rem;
    line-height: 1.33;
}

.sub .content-primary#kindergarten .road-map .content .map-wrap .summary span {
    display: block;
}

.sub .content-primary#kindergarten .road-map .content .map-wrap .sub-title {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#kindergarten .road-map .content .map-wrap .text {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#kindergarten .road-map .content .btn-buy {
    margin-top: 6px;
}

.sub .content-primary#kindergarten .road-map .btn-buy {
    position: relative;
    display: block;
    width: 180px;
    height: 70px;
    line-height: 70px;
    margin: 60px auto 0;
    font-family: "Jua", sans-serif;
    background: url("/images/home/btn_more@2x.png") center center no-repeat;
    background-size: auto 68px;
    text-align: center;
    padding-right: 38px;
    transition: right 0.25s ease-in-out;
}

.sub .content-primary#kindergarten .road-map .btn-buy span {
    display: inline-block;
    position: relative;
    line-height: 1;
    transition: all 0.25s ease-in-out;
    border-bottom: 1px solid #000;
}

.sub .content-primary#kindergarten .road-map .btn-buy span::after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 0;
    height: 1px;
    background-color: #222;
    -webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.sub .content-primary#kindergarten .road-map .btn-buy .ico {
    position: absolute;
    right: 48px;
    display: inline-block;
    width: 38px;
    height: 38px;
    background: url("/images/home/ok@2x.png") 0 center no-repeat;
    background-size: 38px auto;
    vertical-align: top;
    margin-top: 16px;
    transition: right 0.25s ease-in-out;
}

.sub .content-primary#kindergarten .road-map .btn-buy:hover span {
    border: 0 none;
    letter-spacing: 0.1em;
}

.sub .content-primary#kindergarten .road-map .btn-buy:hover span::after {
    right: auto;
    left: 0;
    width: 100%;
}

.sub .content-primary#kindergarten .road-map .btn-buy:hover .ico {
    right: 45px;
}

.sub .content-primary#pre-k h3 {
    font-family: "Overpass", sans-serif;
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding-bottom: 10px;
    background: url("/images/home/bg_h3_02@2x.png") center bottom no-repeat;
    background-size: 238px auto;
    opacity: 0;
    -webkit-transform: translateY(80px);
    transform: translateY(80px);
}

@media screen and (max-width: 768px) {
    .sub .content-primary#pre-k h3 {
        font-size: 3.5625rem;
    }
}

.sub .content-primary#pre-k .sub-title {
    font-size: 50px;
    line-height: 1.16;
    margin-bottom: 10px;
    margin-top: 80px;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#pre-k .sub-title.mobile {
    display: none;
}

.sub .content-primary#pre-k .text-info {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#pre-k .text {
    font-size: 20px;
    font-weight: 500;
    color: #676767;
    margin-top: 14px;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#pre-k .sun {
    display: block;
    position: absolute;
    top: -145px;
    right: -84px;
    width: 324px;
    height: 310px;
    background: url("/images/home/Element/sun@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#pre-k .lighting {
    display: block;
    position: absolute;
    top: 150px;
    right: 220px;
    width: 85px;
    height: 120px;
    background: url("/images/home/Element/lighting@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#pre-k .story {
    text-align: center;
}

.sub .content-primary#pre-k .story .info {
    display: block;
    position: relative;
}

.sub .content-primary#pre-k .story .info .effect {
    display: block;
    position: absolute;
    bottom: -123px;
    left: 69px;
    width: 88px;
    height: 158px;
    background: url("/images/home/Element/effect000@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#pre-k .story .sub-title {
    font-size: 3.75rem;
    line-height: 1.33;
    margin-top: 0;
    opacity: 0;
    -webkit-transform: translateY(80px);
    transform: translateY(80px);
}

.sub .content-primary#pre-k .story .text {
    margin-top: 40px;
    margin-left: 0;
    font-size: 1.25rem;
    font-weight: 500;
    opacity: 0;
    -webkit-transform: translateY(80px);
    transform: translateY(80px);
}

.sub .content-primary#pre-k .program .content {
    display: flex;
    margin-top: 80px;
}

.sub .content-primary#pre-k .program .content .item-wrap {
    position: relative;
    margin-left: 80px;
}

.sub .content-primary#pre-k .program .content .item-wrap .sub-title {
    margin-top: 0;
}

.sub .content-primary#pre-k .program .content h4 {
    font-size: 24px;
    line-height: 1;
    margin-top: 40px;
    font-family: "Jua", sans-serif;
}

.sub .content-primary#pre-k .program .content .bg-bubble {
    display: block;
    position: absolute;
    top: -34px;
    right: -36px;
    width: 92px;
    height: 80px;
    background: url("/images/home/Element/bubble@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#pre-k .program .content .bg-bubble.mobile {
    display: none;
}

.sub .content-primary#pre-k .program .content .item-list {
    display: inline-flex;
    margin-top: 30px;
}

.sub .content-primary#pre-k .program .content .item-list .label {
    margin-top: 20px;
    display: block;
}

.sub .content-primary#pre-k .program .content .item-list li {
    width: 100px;
    text-align: center;
}

.sub .content-primary#pre-k .program .content .item-list li .item {
    width: 100px;
}

.sub .content-primary#pre-k .program .content .item-list li .item img {
    width: 100%;
}

.sub .content-primary#pre-k .program .content .item-list li + li {
    margin-left: 20px;
}

.sub .content-primary#pre-k .effect {
    text-align: center;
}

.sub .content-primary#pre-k .effect h3 {
    background: url("/images/home/bg_h3_03@2x.png") center bottom no-repeat;
    background-size: 166px auto;
}

.sub .content-primary#pre-k .effect .sub-title {
    position: relative;
    display: inline-block;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#pre-k .effect .bg-wrap .bg-01 {
    top: -144px;
    left: -179px;
    width: 189px;
    height: 129px;
    background: url("/images/home/Element/effect0001@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#pre-k .effect .bg-wrap .bg-02 {
    top: -48px;
    left: auto;
    right: -177px;
    width: 134px;
    height: 134px;
    background: url("/images/home/Element/effect0002@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#pre-k .effect .tab-wrap {
    margin-top: 50px;
}
.sub .content-primary#pre-k .effect .tab-wrap .tab{
    white-space: nowrap;
    overflow-x: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.sub .content-primary#pre-k .effect .tab-wrap .tab::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

.sub .content-primary#pre-k .effect .tab-wrap .tab li a {
    width: 194px;
    height: 55px;
    line-height: 1.3;
    font-size: 20px;
    text-align: center;
    background-size: 100% auto;
    padding: 22px 0;
    font-family: "Noto Sans KR", "돋움", Dotum, Helvetica, Arial, sans-serif;
}

.sub .content-primary#pre-k .effect .tab-wrap .tab li:nth-child(1) a {
    width: 214px;
    background-image: url("/images/home/tab_large_01.png");
    height: 54px !important;
    line-height: 24px !important;
    background-size: contain !important;
}

.sub .content-primary#pre-k .effect .tab-wrap .tab li:nth-child(2) a {
    background-image: url("/images/home/tab_large_02.png");
    height: 54px !important;
    line-height: 24px !important;
    background-size: contain !important;
}

.sub .content-primary#pre-k .effect .tab-wrap .tab li:nth-child(3) a {
    background-image: url("/images/home/tab_large_03.png");
    height: 54px !important;
    line-height: 24px !important;
    background-size: contain !important;
}

.sub .content-primary#pre-k .effect .tab-wrap .tab li:nth-child(4) a {
    background-image: url("/images/home/tab_large_02.png") !important;
    height: 54px !important;
    line-height: 24px !important;
    background-size: contain !important;
}

.sub .content-primary#pre-k .effect .tab-wrap .tab li.active:nth-child(1) a {
    width: 214px;
    background-image: url("/images/home/tab_large_01_on.png");
}

.sub .content-primary#pre-k .effect .tab-wrap .tab li.active:nth-child(2) a {
    background-image: url("/images/home/tab_large_02_on.png");
}

.sub .content-primary#pre-k .effect .tab-wrap .tab li.active:nth-child(3) a {
    background-image: url("/images/home/tab_large_03_on.png");
}

.sub .content-primary#pre-k .effect .tab-wrap .tab li.active:nth-child(4) a {
    background-image: url("/images/home/tab_large_02_on.png") !important;
}

.sub .content-primary#pre-k .effect .tab-wrap .tab-cont {
    max-width: 812px;
    margin: 0 auto;
}

.sub .content-primary#pre-k .effect .tab-wrap .tab-cont .swiper-slide-active .summary {
    opacity: 1;
}

.sub .content-primary#pre-k .effect .tab-wrap .tab-cont .summary {
    font-family: "Noto Sans KR", "돋움", Dotum, Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 500;
    margin-top: 30px;
    opacity: 0;
}

.sub .content-primary#pre-k .effect .tab-wrap .tab-cont .thumb {
    width: 540px;
    height: 530px;
    margin: 70px auto 0;
    transform: translate(0px, 0px) !important;
}

.sub .content-primary#pre-k .effect .tab-wrap .tab-cont .thumb img {
    width: 100%;
}

.sub .content-primary#pre-k .effect .tab-wrap .swiper-button-next {
    bottom: auto;
    top: 45%;
}

.sub .content-primary#pre-k .effect .tab-wrap .swiper-button-prev {
    bottom: auto;
    top: 45%;
}

.sub .content-primary#pre-k .package {
    text-align: center;
    max-width: 100%;
    padding: 0;
    background: none;
}

.sub .content-primary#pre-k .package .wrap {
    position: relative;
    padding-top: 130px;
    padding-bottom: 250px;
    max-width: 1160px;
    margin: 0 auto;
    background-image: linear-gradient(to right, #e7decb 60%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 16px 2px;
    background-repeat: repeat-x;
    z-index: 1;
}

.sub .content-primary#pre-k .package .package-wrap {
    max-width: 858px;
    position: relative;
    margin: 120px auto 0;
}

.sub .content-primary#pre-k .package .package-wrap .thumb {
    position: relative;
    z-index: 1;
    width: 858px;
    height: 465px;
}

.sub .content-primary#pre-k .package .package-wrap .thumb img {
    width: 100%;
}

.sub .content-primary#pre-k .package .package-wrap li {
    position: absolute;
    color: #a2854f;
}

.sub .content-primary#pre-k .package .package-wrap li::after {
    content: '';
    display: block;
    position: absolute;
    left: 60px;
    top: 82px;
    width: 112px;
    height: 109px;
    background: url("/images/home/package_line_01@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#pre-k .package .package-wrap li:nth-child(1) {
    left: -115px;
    top: -56px;
}

.sub .content-primary#pre-k .package .package-wrap li:nth-child(2) {
    right: -124px;
    top: 75px;
}

.sub .content-primary#pre-k .package .package-wrap li:nth-child(2)::after {
    left: -32px;
    background-image: url("/images/home/package_line_02@2x.png");
    width: 178px;
}

.sub .content-primary#pre-k .package .package-wrap li:nth-child(3) {
    left: -20px;
    bottom: -50px;
}

.sub .content-primary#pre-k .package .package-wrap li:nth-child(3)::after {
    top: -104px;
    left: 34px;
    width: 58px;
    height: 103px;
    background-image: url("/images/home/package_line_03@2x.png");
}

.sub .content-primary#pre-k .package .package-wrap li:nth-child(4) {
    left: 50%;
    bottom: 0px;
    margin-left: 10px;
}

.sub .content-primary#pre-k .package .package-wrap li:nth-child(4)::after {
    left: 55%;
    top: -93px;
    width: 8px;
    height: 86px;
    background-image: url("/images/home/package_line_04@2x.png");
}

.sub .content-primary#pre-k .package .package-wrap li:nth-child(5) {
    right: -160px;
    bottom: -38px;
}

.sub .content-primary#pre-k .package .package-wrap li:nth-child(5)::after {
    left: 24%;
    top: -92px;
    width: 50px;
    height: 89px;
    background-image: url("/images/home/package_line_05@2x.png");
}

#k1stli{
    left: -150px !important;
    top: 30px !important;
}

#k1stli::after{
    top: 28px !important;
}
#k2ndli{
    right: -25px !important;
    top: -25px !important;
}
#k2ndli::after{
    top: 75px !important;
}
#k3rdli{

}
#k4thli{
    bottom: -130px !important;
}
#k5thli{
    right: 300px !important;
    bottom: -75px !important;
}
#k6thli_after{
    bottom: -100px !important;
    right: -100px !important;
}
.sub .content-primary#pre-k .package .package-wrap #k6thli_after::after {
    left: 50%;
    width: 8px !important;
    height: 86px !important;
    background-image: url(/images/home/package_line_04@2x.png) !important;
    position: absolute;
    top: -90px;
}


.sub .content-primary#pre-k .package .bg-planet {
    position: absolute;
    top: -73px;
    right: -138px;
    width: 350px;
    height: 343px;
    background: url("/images/home/Element/effect0003@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#pre-k .curriculum {
    text-align: center;
}

.sub .content-primary#pre-k .curriculum h3 {
    background-image: url("/images/home/bg_h3_04@2x.png");
    background-size: 308px auto;
}

.sub .content-primary#pre-k .curriculum .sub-title {
    display: inline-block;
    position: relative;
}

.sub .content-primary#pre-k .curriculum .sub-title .heart {
    display: block;
    position: absolute;
    top: -101px;
    left: -58px;
    width: 98px;
    height: 126px;
    background: url("/images/home/heart_01@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#pre-k .curriculum .year-content {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.sub .content-primary#pre-k .curriculum .swiper-wrapper {
    margin: 0 auto;
}

.sub .content-primary#pre-k .curriculum .swiper-slide {
    display: flex;
    margin-top: 70px;
}

.sub .content-primary#pre-k .curriculum .swiper-slide.swiper-slide-active .thumb {
    opacity: 1;
}

.sub .content-primary#pre-k .curriculum .swiper-slide.swiper-slide-active .info {
    opacity: 1;
}

.sub .content-primary#pre-k .curriculum .swiper-slide .thumb {
    opacity: 0;
    width: 50%;
}

.sub .content-primary#pre-k .curriculum .swiper-slide .thumb img {
    width: 100%;
}

.sub .content-primary#pre-k .curriculum .swiper-slide .info {
    opacity: 0;
    display: block;
    margin-top: 53px;
    margin-left: 80px;
    text-align: left;
}

.sub .content-primary#pre-k .curriculum .swiper-slide .info h4 {
    display: block;
    font-family: "Overpass", sans-serif;
    font-size: 46px;
    font-weight: bold;
    line-height: 1;
}

.sub .content-primary#pre-k .curriculum .swiper-slide .info .title {
    display: block;
    margin-top: 40px;
    font-family: "Jua", sans-serif;
    font-size: 24px;
    font-weight: normal;
}

.sub .content-primary#pre-k .curriculum .swiper-slide .info dl {
    margin: 0;
}

.sub .content-primary#pre-k .curriculum .swiper-slide .info dt {
    margin-top: 15px;
    font-size: 20px;
    font-weight: bold;
}

.sub .content-primary#pre-k .curriculum .swiper-slide .info dd {
    font-size: 20px;
    font-weight: 500;
    color: #676767;
    margin-left: 0;
}

.sub .content-primary#pre-k .curriculum .swiper-slide .info dd + dt {
    margin-top: 40px;
}

.sub .content-primary#pre-k .curriculum .buy-btn-area {
    text-align: left;
    position: relative;
    padding: 34px 40px;
    max-width: 680px;
    height: 133px;
    margin: 120px auto 0;
    box-sizing: border-box;
    border-radius: 20px;
    background: url("/images/home/dashed@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#pre-k .curriculum .buy-btn-area .bug {
    display: block;
    position: absolute;
    left: 46px;
    top: -25px;
    width: 150px;
    height: 32px;
    background: url("/images/home/Element/bug@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#pre-k .curriculum .buy-btn-area p {
    font-size: 26px;
    font-family: "Jua", sans-serif;
    line-height: 1.46;
}

.sub .content-primary#pre-k .curriculum .buy-btn-area .btn-buy {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translate(0, -50%);
    font-family: "Jua", sans-serif;
    font-size: 18px;
    text-decoration: underline;
    height: 38px;
    line-height: 38px;
    padding-right: 52px;
    background: url("/images/home/ok@2x.png") right 0 no-repeat;
    background-size: 38px auto;
    transition: letter-spacing 0.25s ease-in-out;
}

.sub .content-primary#pre-k .curriculum .buy-btn-area .btn-buy:hover {
    letter-spacing: 0.1em;
}

.sub .content-primary#buy .section-title .bulb {
    display: block;
    width: 188px;
    height: 370px;
    position: absolute;
    right: 100px;
    top: -185px;
    background: url("/images/home/Element/bulb@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#buy .price {
    text-align: center;
}

.sub .content-primary#buy .price .price-title {
    position: relative;
    display: block;
    font-size: 60px;
    line-height: 1.33;
    font-family: "Jua", sans-serif;
    font-weight: normal;
    margin-top: 20px;
}

.sub .content-primary#buy .price .price-title .effect-buy {
    display: block;
    width: 152px;
    height: 105px;
    position: absolute;
    left: 164px;
    top: -23px;
    background: url("/images/home/Element/effect_buy.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.sub .content-primary#buy .price .thumb {
    max-width: 858px;
    max-height: 465px;
    margin: 110px auto 0;
}

.sub .content-primary#buy .price .thumb img {
    width: 100%;
}

.sub .content-primary#buy .price .cont-wrap {
    display: flex;
    position: relative;
    justify-content: space-between;
    text-align: left;
    margin-top: 80px;
}

.sub .content-primary#buy .price .cont-wrap::before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -1px;
    top: 0;
    width: 2px;
    height: 100%;
    background-image: linear-gradient(#e7decb 60%, rgba(255, 255, 255, 0) 0%);
    background-position: center;
    background-size: 2px 16px;
    background-repeat: repeat-y;
}

.sub .content-primary#buy .price .cont-wrap .cont {
    width: 50%;
    padding: 0 60px;
}

.sub .content-primary#buy .price .cont-wrap .cont-title {
    font-size: 50px;
    line-height: 1.16;
    font-family: "Jua", sans-serif;
    font-weight: normal;
}

.sub .content-primary#buy .price .cont-wrap .summary {
    margin-top: 30px;
    font-size: 20px;
    font-weight: 500;
    color: #676767;
}

.sub .content-primary#buy .price .cont-wrap .summary .em {
    color: #000;
}

.sub .content-primary#buy .price .cont-wrap .info {
    display: block;
    min-height: 1040px;
    margin-top: 60px;
    background-image: linear-gradient(to right, #e7decb 60%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 16px 2px;
    background-repeat: repeat-x;
}

.sub .content-primary#buy .price .cont-wrap .info h4 {
    font-size: 32px;
    line-height: 1;
    font-family: "Jua", sans-serif;
    padding-top: 60px;
    font-weight: normal;
}

.sub .content-primary#buy .price .cont-wrap .info h4 .small {
    font-size: 24px;
}

.sub .content-primary#buy .price .cont-wrap .info .info-title {
    display: block;
    font-size: 20px;
    line-height: 1;
    margin-top: 30px;
}

.sub .content-primary#buy .price .cont-wrap .info .info-text {
    font-size: 20px;
    margin-top: 16px;
    color: #676767;
    font-weight: 500;
}

.sub .content-primary#buy .price .cont-wrap .info .eggschool-app {
    margin-top: 24px;
}

.sub .content-primary#buy .price .cont-wrap .info .eggschool-app img {
    width: 186px;
}

.sub .content-primary#buy .price .cont-wrap .info span.info-text {
    display: block;
    color: #676767;
}

.sub .content-primary#buy .price .cont-wrap .info strong.info-text {
    display: block;
    color: #000;
    font-weight: bold;
}

.sub .content-primary#buy .price .cont-wrap .total {
    font-size: 60px;
    font-family: "Jua", sans-serif;
    text-align: center;
    line-height: 1;
}

.sub .content-primary#buy .price .cont-wrap .total span {
    font-size: 40px;
}

.sub .content-primary#buy .price .cont-wrap .btn-more {
    position: relative;
    display: block;
    width: 180px;
    height: 70px;
    line-height: 70px;
    margin: 60px auto 0;
    font-family: "Jua", sans-serif;
    background: url("/images/home/btn_more@2x.png") center center no-repeat;
    background-size: auto 68px;
    text-align: center;
    transition: right 0.25s ease-in-out;
}

.sub .content-primary#buy .price .cont-wrap .btn-more span {
    display: inline-block;
    position: relative;
    line-height: 1;
    transition: all 0.25s ease-in-out;
    border-bottom: 1px solid #000;
}

.sub .content-primary#buy .price .cont-wrap .btn-more span::after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 0;
    height: 1px;
    background-color: #222;
    -webkit-transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.sub .content-primary#buy .price .cont-wrap .btn-more .ico {
    /* position: absolute;
                            top: 0;
                            right: 48px; */
    display: inline-block;
    width: 38px;
    height: 38px;
    background: url("/images/home/ok@2x.png") 0 center no-repeat;
    background-size: 38px auto;
    vertical-align: top;
    margin-top: 16px;
    transition: right 0.25s ease-in-out;
    margin-left: 10px;
}

.sub .content-primary#buy .price .cont-wrap .btn-more:hover span {
    border: 0 none;
    letter-spacing: 0.1em;
}

.sub .content-primary#buy .price .cont-wrap .btn-more:hover span::after {
    right: auto;
    left: 0;
    width: 100%;
}

.sub .content-primary#buy .price .cont-wrap .btn-more:hover .ico {
    right: 45px;
}

.faq-tab-wrap {
    margin-top: 80px;
}

.faq-tab-wrap .tab li .btn {
    height: 66px;
    font-family: "Noto Sans KR", "돋움", Dotum, Helvetica, Arial, sans-serif;
    background: url("/images/home/tab01@2x.png") center 0 no-repeat;
    background-size: 100% auto;
    font-weight: 500;
}

.faq-tab-wrap .tab li .btn.type01 {
    width: 96px;
    background-image: url("/images/home/tab01@2x.png");
}

.faq-tab-wrap .tab li .btn.type02 {
    width: 162px;
    background-image: url("/images/home/tab02@2x.png");
}

.faq-tab-wrap .tab li .btn.type03 {
    width: 164px;
    background-image: url("/images/home/tab03@2x.png");
}

.faq-tab-wrap .tab li .btn.type04 {
    width: 162px;
    background-image: url("/images/home/tab04@2x.png");
}

.faq-tab-wrap .tab li .btn.type05 {
    width: 96px;
    background-image: url("/images/home/tab01@2x.png");
}

.faq-tab-wrap .tab li .btn.type06 {
    width: 162px;
    background-image: url("/images/home/tab06@2x.png");
}

.faq-tab-wrap .tab li .btn.type07 {
    width: 162px;
    background-image: url("/images/home/tab07@2x.png");
}

.faq-tab-wrap .tab li .btn.type08 {
    width: 96px;
    background-image: url("/images/home/tab01@2x.png");
}
.faq-tab-wrap .tab li .btn.type09 {
    width: 162px;
    background-image: url("/images/home/tab06@2x.png");
}

.faq-tab-wrap .tab li.active .btn {
    color: #fff;
}


.faq-tab-wrap .tab li.active .btn.type01 {
    width: 96px;
    background-image: url("/images/home/tab01_active@2x.png");
}

.faq-tab-wrap .tab li.active .btn.type02 {
    width: 162px;
    background-image: url("/images/home/tab02_active@2x.png");
}

.faq-tab-wrap .tab li.active .btn.type03 {
    width: 164px;
    background-image: url("/images/home/tab03_active@2x.png");
}

.faq-tab-wrap .tab li.active .btn.type04 {
    width: 162px;
    background-image: url("/images/home/tab04_active@2x.png");
}

.faq-tab-wrap .tab li.active .btn.type05 {
    width: 96px;
    background-image: url("/images/home/tab01_active@2x.png");
}

.faq-tab-wrap .tab li.active .btn.type06 {
    width: 162px;
    background-image: url("/images/home/tab06_active@2x.png");
}

.faq-tab-wrap .tab li.active .btn.type07 {
    width: 162px;
    background-image: url("/images/home/tab07_active@2x.png");
}

.faq-tab-wrap .tab li.active .btn.type08 {
    width: 96px;
    background-image: url("/images/home/tab01_active@2x.png");
}

.faq-tab-wrap .tab li.active .btn.type09 {
    width: 162px;
    background-image: url("/images/home/tab06_active@2x.png");
}

.faq-list {
    margin-top: 70px;
    border-top: 2px solid #c1a672;
    border-bottom: 2px solid #c1a672;
}

.faq-list li {
    position: relative;
    padding-left: 150px;
    padding-right: 97px;
    background: url("/images/home/faq_arrow.png") right 20px top 22px no-repeat;
    background-size: 37px auto;
    font-size: 20px;
}

.faq-list li + li {
    border-top: 1px solid #e5dac5;
}

.faq-list li.active {
    background-image: url("/images/home/faq_arrow_01.png");
    padding-bottom: 40px;
}

.faq-list li.active .question {
    font-weight: bold;
}

.faq-list li.active .answer {
    display: block;
}

.faq-list li .category {
    position: absolute;
    left: 0;
    top: 20px;
    width: 150px;
    text-align: center;
}

.faq-list li .category span {
    display: inline-block;
    border: 2px solid #d8bb85;
    color: #c1a672;
    font-size: 16px;
    border-radius: 45% 40% 40% 30% / 50% 40% 40% 44%;
    line-height: 34px;
    padding: 0 18px;
    font-weight: 500;
}

.faq-list li .question {
    position: relative;
    display: block;
    padding: 22px 0px;
    padding-left: 28px;
}

.faq-list li .question::before {
    content: 'Q';
    display: inline-block;
    font-family: "Overpass", sans-serif;
    font-size: 24px;
    position: absolute;
    left: 0;
    top: 22px;
    font-weight: bold;
}

.faq-list li .answer {
    position: relative;
    display: none;
    padding-left: 28px;
}

.faq-list li .answer::before {
    content: 'A';
    display: inline-block;
    font-family: "Overpass", sans-serif;
    font-size: 24px;
    position: absolute;
    left: 0;
    top: 3px;
    font-weight: bold;
}

.faq-list li .answer p {
    font-size: 20px;
}

.customer.faq .content-header .section-title .bg-01 {
    left: 284px;
    top: -69px;
}

#wrap.eng .sub #ourStory .our #tabcont-01 .summary {
    font-family: "Overpass", sans-serif;
}

#wrap.eng .sub #ourStory .our #tabcont-01 .thumb {
    opacity: 0;
}

#wrap.eng .sub #ourStory .our #tabcont-01 .swiper-slide-active .thumb {
    opacity: 1;
}

#wrap.eng .sub #ourStory .our .item-list .text {
    font-family: "Overpass", sans-serif;
    font-weight: 500;
}

@media screen and (max-width: 1160px) {
    .sub .section-title {
        font-size: 12.5rem;
    }
}

@media screen and (max-width: 1160px) and (max-width: 1200px) {
    .sub .section-title {
        font-size: calc(3.3rem + 12.26667vw) ;
    }
}

@media screen and (max-width: 1160px) {
    .sub .section-title .mobile {
        display: none;
    }
    .sub .section-title .bg-wrap .bg-wrap {
        left: -10px;
        top: -150px;
    }
    .sub .content-primary {
        padding: 1px 20px 0;
    }
    .sub .content-primary section .info .sub-title {
        font-size: 4.625rem;
        line-height: 1.22;
    }
}

@media screen and (max-width: 1160px) and (max-width: 1200px) {
    .sub .content-primary section .info .sub-title {
        font-size: calc(1.725rem + 3.86667vw) ;
    }
}

@media screen and (max-width: 1160px) {
    .sub .content-primary section .info .text {
        font-size: 1.125rem;
        letter-spacing: -0.36px;
    }
    .sub .content-primary section .info .text p {
        font-size: 1.125rem;
    }
    .sub .content-primary section .info .text p + p {
        margin-top: 14px;
    }
    .sub .content-primary section .bg-wrap .bg-01 {
        width: 329px;
        height: 315px;
        left: auto;
        right: -156px;
        bottom: -80px;
        z-index: 1;
    }
    .sub .content-primary section .bg-wrap .bg-02 {
        width: 55px;
        height: 48px;
        left: auto;
        right: 210px;
        bottom: -25px;
        z-index: 1;
    }
    .sub .content-primary section .swiper-container {
        z-index: 2;
    }
    .sub .content-primary section .swiper-button-prev {
        width: 50px;
        height: 50px;
        left: 0;
    }
    .sub .content-primary section .swiper-button-prev:hover {
        background-position: center center;
    }
    .sub .content-primary section .swiper-button-next {
        width: 50px;
        height: 50px;
        right: 0;
    }
    .sub .content-primary section .swiper-button-next:hover {
        background-position: center center;
    }
    .sub .content-primary section .story .text {
        margin-left: 7.758620689655173VW;
    }
    .sub .content-primary#ourStory .cont-title {
        font-size: 14px;
        font-weight: 600;
        width: 100px;
        height: 40px;
        line-height: 40px;
        margin: 0 auto;
        background: url("/images/home/tab_active.png") 0 0 no-repeat;
        background-size: 100% auto;
        color: #fff;
        font-weight: normal;
        margin-bottom: 20px;
        text-align: center;
    }
    .sub .content-primary#ourStory .our #tabcont-02 {
        display: block;
        position: relative;
        margin-top: 100px;
        padding-top: 100px;
        background: url(/images/home/line_05.png) 0 0 repeat-x;
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }
    .sub .content-primary#ourStory .our #tabcont-02 .bg-01 {
        width: 58px;
        height: 110px;
        left: auto;
        right: 1%;
        top: 45px;
    }
    .sub .content-primary#kindergarten .section-title {
        font-size: 11.25rem;
    }
}

@media screen and (max-width: 1160px) and (max-width: 1200px) {
    .sub .content-primary#kindergarten .section-title {
        font-size: calc(3.05rem + 10.93333vw) ;
    }
}

@media screen and (max-width: 1160px) {
    .sub .content-primary#kindergarten .story {
        padding-bottom: 120px;
    }
    .sub .content-primary#kindergarten .story .info {
        justify-content: initial;
        padding-left: 0;
    }
    .sub .content-primary#kindergarten .story .sub-title {
        font-size: 4.625rem;
        margin-top: 0;
    }
    #k1stli{
        left: 0px !important;
        top: 0px !important;
    }
}

@media screen and (max-width: 1160px) and (max-width: 1200px) {
    .sub .content-primary#kindergarten .story .sub-title {
        font-size: calc(1.725rem + 3.86667vw) ;
    }
}

@media screen and (max-width: 1160px) {
    .sub .content-primary#kindergarten .story .sub-title .mobile {
        display: none;
    }
    .sub .content-primary#kindergarten .expertise h3 {
        font-size: 6.25rem;
        background-size: contain;
    }
}

@media screen and (max-width: 1160px) and (max-width: 1200px) {
    .sub .content-primary#kindergarten .expertise h3 {
        font-size: calc(2.05rem + 5.6vw) ;
    }
}

@media screen and (max-width: 1160px) {
    .sub .content-primary#kindergarten .en-contents .content {
        display: block;
        padding-left: 0;
    }
    .sub .content-primary#kindergarten .en-contents .content .thumb {
        width: 430px;
        margin: 0 auto 0;
        padding-top: 38px;
    }
    .sub .content-primary#kindergarten .en-contents .content .thumb .web {
        display: block;
    }
    .sub .content-primary#kindergarten .en-contents .content .thumb .mobile {
        display: none;
    }
    .sub .content-primary#kindergarten .en-contents .content .thumb .big {
        margin-top: 0;
    }
    .sub .content-primary#kindergarten .system .content {
        margin-left: 0;
    }
    .sub .content-primary#kindergarten .system .content .item-info {
        margin-left: 0;
        width: 260px;
    }
    .sub .content-primary#kindergarten .system .content .thumb {
        width: calc( 100% - 390px);
    }
    .sub .content-primary#kindergarten .system .content .thumb .web {
        display: block;
    }
    .sub .content-primary#kindergarten .system .content .thumb .mobile {
        display: none;
    }
    .sub .content-primary#kindergarten .road-map h3 {
        font-size: 6.25rem;
        background-size: contain;
    }
}

@media screen and (max-width: 1160px) and (max-width: 1200px) {
    .sub .content-primary#kindergarten .road-map h3 {
        font-size: calc(2.05rem + 5.6vw) ;
    }
}

@media screen and (max-width: 1160px) {
    .sub .content-primary#kindergarten .road-map .map-wrap {
        margin-top: 40px;
    }
    .sub .content-primary#kindergarten .road-map .map-wrap .map {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .sub .content-primary#pre-k .program {
        text-align: center;
    }
    .sub .content-primary#pre-k .program h3 {
        display: inline-block;
    }
    .sub .content-primary#pre-k .program .bg-bubble {
        display: block;
        position: absolute;
        top: -20px;
        right: -99px;
        width: 69px;
        height: 60px;
        background: url("/images/home/Element/bubble@2x.png") 0 0 no-repeat;
        background-size: 100% auto;
    }
    .sub .content-primary#pre-k .program .sub-title {
        margin-top: 0;
        display: inline-block;
    }
    .sub .content-primary#pre-k .program .sub-title.web {
        display: none;
    }
    .sub .content-primary#pre-k .program .content {
        display: block;
        margin-top: 50px;
    }
    .sub .content-primary#pre-k .program .content h4 {
        margin-top: 30px;
        line-height: 1;
    }
    .sub .content-primary#pre-k .program .content .thumb {
        max-width: 590px;
        width: 100%;
        padding-left: 10px;
        box-sizing: border-box;
        margin: 40px auto 0;
    }
    .sub .content-primary#pre-k .program .content .thumb img {
        width: 100%;
    }
    .sub .content-primary#pre-k .program .content .item-wrap {
        width: 100%;
        margin-left: 10px;
        text-align: center;
    }
    .sub .content-primary#pre-k .program .content .item-wrap .item-list {
        margin-top: 14px;
    }
    .sub .content-primary#pre-k .program .content .item-wrap .item-list li {
        width: 68px;
    }
    .sub .content-primary#pre-k .program .content .item-wrap .item-list li + li {
        margin-left: 16px;
    }
    .sub .content-primary#pre-k .program .content .item-wrap .item-list li .item {
        width: 100%;
    }
    .sub .content-primary#pre-k .package .package-wrap {
        width: 100%;
        margin: 40px auto 0;
    }
    .sub .content-primary#pre-k .package .package-wrap .thumb {
        width: 100%;
        height: auto;
    }
    .sub .content-primary#pre-k .package .package-wrap .data-list {
        margin-top: 30px;
    }
    .sub .content-primary#pre-k .package .package-wrap .data-list li {
        position: relative;
        left: 0;
        top: 0;
        margin-left: 0 !important;
        padding-left: 10px;
    }
    .sub .content-primary#pre-k .package .package-wrap .data-list li::before {
        content: '-';
        display: inline-block;
        margin-right: 10px;
    }
    .sub .content-primary#pre-k .package .package-wrap .data-list li::after {
        display: none !important;
    }
    .sub .content-primary#pre-k .package .package-wrap .data-list li br {
        display: none;
    }
    .sub .content-primary#pre-k .curriculum .sub-title {
        max-width: 540px;
    }
    .sub .content-primary#pre-k .curriculum .swiper-wrapper {
        max-width: none;
    }
    .sub .content-primary#pre-k .curriculum .swiper-slide {
        display: block;
        margin-top: 40px;
    }
    .sub .content-primary#pre-k .curriculum .swiper-slide .thumb {
        max-width: 530px;
        width: 100%;
        height: auto;
        padding: 0 20px;
        box-sizing: border-box;
        margin: 0 auto;
    }
    .sub .content-primary#pre-k .curriculum .swiper-slide .info {
        margin-top: 40px;
        margin-left: 0;
        text-align: center;
    }
    .sub .content-primary#pre-k .curriculum .swiper-slide .info .title {
        margin-top: 30px;
    }
    .sub .content-primary#pre-k .curriculum .swiper-slide .info dd {
        font-size: 16px;
    }
    .sub .content-primary#pre-k .curriculum .swiper-pagination-bullets {
        bottom: auto;
    }
    .sub .content-primary#pre-k .curriculum .swiper-button-next, .sub .content-primary#pre-k .curriculum .swiper-button-prev {
        top: 50%;
        bottom: auto;
    }
    .sub .content-primary#buy .section-title {
        top: -41px;
    }
    .sub .content-primary#buy .section-title .bulb {
        width: 17.735849056603772VW;
    }
    .sub .content-primary#buy .price .price-title .effect-buy {
        left: 0;
    }
    .sub .content-primary#buy .price .cont-wrap {
        text-align: center;
    }
    .sub .content-primary#buy .price .cont-wrap .cont {
        padding: 0 5.660377358490567VW;
    }
    .sub .content-primary#buy .price .cont-wrap .cont-title {
        font-size: 34px;
    }
    .sub .content-primary#buy .price .cont-wrap .summary {
        font-size: 16px;
    }
    .sub .content-primary#buy .price .cont-wrap .info {
        min-height: 960px;
    }
    .sub .content-primary#buy .price .cont-wrap .info h4 {
        font-size: 24px;
    }
    .sub .content-primary#buy .price .cont-wrap .info h4 .em.weighty {
        display: block;
    }
    .sub .content-primary#buy .price .cont-wrap .info .info-title {
        font-size: 16px;
    }
    .sub .content-primary#buy .price .cont-wrap .info .info-text {
        font-size: 16px;
    }
    .sub .content-primary#buy .price .cont-wrap .info .info-text .em.weighty {
        display: block;
    }
    .sub .content-primary#buy .price .cont-wrap .total {
        font-size: 3.75rem;
    }
}

@media screen and (max-width: 1160px) and (max-width: 1200px) {
    .sub .content-primary#buy .price .cont-wrap .total {
        font-size: calc(1.55rem + 2.93333vw) ;
    }
}

@media screen and (max-width: 1160px) {
    .faq-tab-wrap {
        margin-top: 30px;
    }
    .faq-tab-wrap .select-wrap {
        max-width: 630px;
        margin: 0 auto;
    }
    .faq-tab-wrap .select-wrap .selectric {
        border: 2px solid #000;
        border-radius: 10px;
    }
    .faq-tab-wrap .select-wrap .selectric .label {
        margin: 0 38px 0 20px;
    }
    .faq-tab-wrap .select-wrap .selectric .button {
        right: 11px;
        top: 20px;
    }
    .faq-tab-wrap .tab-cont {
        margin: 0 20px;
    }
    .faq-tab-wrap .faq-list {
        margin-top: 50px;
        border-top: 1px solid #c1a672;
        border-bottom: 1px solid #c1a672;
    }
    .faq-tab-wrap .faq-list li {
        background: none;
        padding-left: 0;
        padding-right: 0;
    }
    .faq-tab-wrap .faq-list li .category {
        width: auto;
        left: auto;
        right: 0;
    }
    .faq-tab-wrap .faq-list li .category span {
        font-size: 12px;
        padding: 0 10px;
        line-height: 28px;
    }
    .faq-tab-wrap .faq-list li .question {
        font-size: 16px;
        padding-left: 30px;
        padding-right: 80px;
        word-break: break-all;
    }
    .faq-tab-wrap .faq-list li .question::before {
        font-size: 30px;
        top: 15px;
    }
    .faq-tab-wrap .faq-list li .answer p {
        font-size: 16px;
    }
    .faq-tab-wrap .faq-list li .answer::before {
        font-size: 30px;
        top: 0;
    }
    .faq-tab-wrap .faq-list li.active + li {
        border-top: 1px solid #c1a672;
    }
    .faq-tab-wrap .faq-list li.active + li .question {
        padding-bottom: 14px;
    }
}

@media screen and (max-width: 768px) {
    html, body {
        overflow-x: hidden;
    }
    .sub #main-visual {
        height: 403px;
        overflow: hidden;
    }
    .sub .section-title {
        top: -50px;
        padding-left: 0;
        font-size: 7.5rem;
        text-align: left;
        padding-top: 0;
        line-height: 1;
        transform: initial !important;
        box-sizing: border-box;
    }
    .sub .section-title .mobile {
        display: block;
    }
    .sub .section-title .bg-wrap .bg-01 {
        top: -50px;
        left: auto;
        right: -10px;
        width: 106px;
        height: 138px;
        opacity: 1 !important;
    }
    .sub .section-title .bg-wrap .bg-02 {
        top: auto;
        bottom: -30px;
        right: auto;
        left: 84px;
        width: 68px;
        height: 82px;
        opacity: 1 !important;
    }
    .sub .content-primary section .info {
        display: block;
        z-index: 2;
    }
    .sub .content-primary section .info .sub-title {
        font-size: 2.875rem;
        line-height: 1.22;
        transform: translate(0, 0px) !important;
    }
    .sub .content-primary section .info .text {
        font-size: 1rem;
        letter-spacing: -0.36px;
        margin-left: 0;
        margin-top: 20px;
        transform: translate(0, 0px) !important;
    }
    .sub .content-primary section .info .text p {
        font-size: 1.125rem;
    }
    .sub .content-primary section .info .text p + p {
        margin-top: 14px;
    }
    .sub .content-primary section .text {
        font-size: 1rem;
    }
    .sub .content-primary section .swiper-container {
        z-index: 2;
    }
    .sub .content-primary section .swiper-pagination-bullets {
        margin-top: 30px;
    }


    .sub .content-primary section .swiper-button-prev {
        bottom: 25%;
        width: 50px;
        height: 50px;
    }
    .sub .content-primary section .swiper-button-next {
        bottom: 25%;
        width: 50px;
        height: 50px;
    }
    .sub .content-primary section + section {
        padding-top: 100px;
    }
    .sub .content-primary .story {
        padding-top: 0;
        padding-bottom: 100px;
        z-index: 1;
    }
    .sub .content-primary .story .text {
        margin-left: 0;
        margin-top: 20px;
    }
    .sub .content-primary#ourStory .cont-title {
        margin: 0 0 20px;
    }
    .sub .content-primary#ourStory .our .tab-wrap {
        padding-top: 100px;
        text-align: left;
        z-index: 1;
    }
    .sub .content-primary#ourStory .our .tab-wrap .title {
        font-size: 2.125rem;
    }
    .sub .content-primary#ourStory .our .tab-wrap .summary {
        font-size: 1rem;
        line-height: 1.63;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    .sub .content-primary#ourStory .our .tab-wrap .item-list {
        display: block;
        margin: 50px auto 0;
    }
    .sub .content-primary#ourStory .our .tab-wrap .item-list li {
        width: 190px;
        margin: 0 auto;
        text-align: center;
    }
    .sub .content-primary#ourStory .our .tab-wrap .item-list li .text {
        margin-top: 14px;
        font-size: 1rem;
    }
    .sub .content-primary#ourStory .our .tab-wrap .item-list li + li {
        margin-top: 50px;
    }
    .sub .content-primary#ourStory .our #tabcont-01 {
        display: block;
        width: 100%;
    }
    .sub .content-primary#ourStory .our #tabcont-01 .bg-01 {
        width: 72px;
        height: 70px;
        left: 202px;
        top: -10px;
    }
    .sub .content-primary#ourStory .our #tabcont-01 .thumb {
        max-width: 420px;
        width: 100%;
        height: auto;
        padding: 0 20px;
        margin: 30px auto 0;
        box-sizing: border-box;
        opacity: 0;
    }
    .sub .content-primary#ourStory .our #tabcont-01 .swiper-slide-active .thumb {
        opacity: 1;
    }
    .sub .content-primary#ourStory .our .bg-wrap .bg-01 {
        width: 199px;
        height: 191px;
        top: 34%;
        left: -99px;
        z-index: 0;
    }
    .sub .content-primary#kindergarten .section-title {
        max-width: 400px;
        font-size: 6.2rem;
        text-align: left;
        margin: 10px 0 0;
        word-break: break-all;
        font-weight: bold;
        padding: 0;
    }
    .sub .content-primary#kindergarten .section-title .bg-wrap .bg-01 {
        width: 196px;
        height: 194px;
        right: -85px;
        top: -114px;
        opacity: 1 !important;
    }
    .sub .content-primary#kindergarten .sub-title {
        font-size: 3.5rem;
        line-height: 1.24;
        margin-top: 0;
    }
}

@media screen and (max-width: 768px) and (max-width: 1200px) {
    .sub .content-primary#kindergarten .sub-title {
        font-size: calc(1.5rem + 2.66667vw) ;
    }
}

@media screen and (max-width: 768px) {
    .sub .content-primary#kindergarten .story {
        max-width: 100%;
        padding-top: 0;
    }
    .sub .content-primary#kindergarten .story .sub-title {
        margin-top: 0;
        font-size: 5.1875rem;
    }
}

@media screen and (max-width: 768px) and (max-width: 1200px) {
    .sub .content-primary#kindergarten .story .sub-title {
        font-size: calc(1.8375rem + 4.46667vw) ;
    }
}

@media screen and (max-width: 768px) {
    .sub .content-primary#kindergarten .story .sub-title .mobile {
        display: block;
    }
    .sub .content-primary#kindergarten .story .text {
        margin-top: 20px;
    }
    .sub .content-primary#kindergarten .story .bg-wrap .bg-01 {
        left: auto;
        right: 40px;
        top: 54px;
        width: 40px;
        height: 48px;
    }
    .sub .content-primary#kindergarten .story .bg-wrap .bg-02 {
        width: 85px;
        height: 84px;
        left: 220px;
        top: 102px;
    }
    .sub .content-primary#kindergarten .expertise {
        padding-top: 100px;
        margin: 0;
        text-align: left;
    }
    .sub .content-primary#kindergarten .expertise h3 {
        position: relative;
        font-size: 3.5625rem;
        left: 0;
        transform: initial;
        margin-left: 10px;
    }
    .sub .content-primary#kindergarten .expertise h3 .bg-heart {
        top: -112px;
        right: -42px;
        width: 76px;
        height: 98px;
    }
    .sub .content-primary#kindergarten .expertise .content {
        margin: 50px 0 0;
    }
    .sub .content-primary#kindergarten .expertise .content .item-info {
        float: none;
        width: 100%;
        padding-left: 0;
        margin-left: 10px;
    }
    .sub .content-primary#kindergarten .expertise .content .item-info .title {
        margin-top: 0;
    }
    .sub .content-primary#kindergarten .expertise .content .thumb {
        float: none;
        width: 100%;
        margin-top: 50px;
    }
    .sub .content-primary#kindergarten .en-contents {
        padding-bottom: 100px;
    }
    .sub .content-primary#kindergarten .en-contents .content {
        position: relative;
        padding-top: 100px;
        z-index: 1;
    }
    .sub .content-primary#kindergarten .en-contents .content .thumb {
        width: auto;
        max-width: 430px;
        margin: 0 auto;
        padding-top: 50px;
        text-align: center;
    }
    .sub .content-primary#kindergarten .en-contents .content .thumb .web {
        display: none;
    }
    .sub .content-primary#kindergarten .en-contents .content .thumb .mobile {
        display: flex;
        margin-top: 22px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .sub .content-primary#kindergarten .en-contents .content .thumb .big {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
    }
    .sub .content-primary#kindergarten .en-contents .content .thumb .small {
        position: static;
        padding: 8px 10px;
        width: 33.3%;
        box-sizing: border-box;
        opacity: 1;
    }
    .sub .content-primary#kindergarten .en-contents .content .thumb .small .label {
        margin-top: 18px;
    }
    .sub .content-primary#kindergarten .en-contents .bg-wrap .bg-01 {
        top: -158px;
        left: -99px;
        width: 199px;
        height: 191px;
        bottom: auto;
        z-index: 0;
    }
    .sub .content-primary#kindergarten .system {
        padding-top: 80px;
    }
    .sub .content-primary#kindergarten .system .content {
        margin-left: 0;
    }
    .sub .content-primary#kindergarten .system .content .item-info {
        position: relative;
        float: none;
        margin: 0;
        margin-left: 10px;
    }
    .sub .content-primary#kindergarten .system .content .item-info .sub-title {
        margin-top: 0;
    }
    .sub .content-primary#kindergarten .system .content .item-info .bg-01 {
        left: 187px;
        right: auto;
        bottom: auto;
        top: -94px;
        width: 122px;
        height: 121px;
    }
    .sub .content-primary#kindergarten .system .content .item-info .bg-02 {
        left: 0;
        top: 920px;
        width: 168px;
        height: 128px;
    }
    .sub .content-primary#kindergarten .system .content .thumb {
        float: none;
        width: 100%;
        max-width: 414px;
        margin: 50px auto 0;
    }
    .sub .content-primary#kindergarten .system .content .thumb .web {
        display: none;
    }
    .sub .content-primary#kindergarten .system .content .thumb .mobile {
        display: block;
        max-width: 338px;
        margin: 0 auto 0;
    }
    .sub .content-primary#kindergarten .road-map {
        text-align: left;
        padding-top: 100px;
    }
    .sub .content-primary#kindergarten .road-map h3 {
        font-size: 3.1875rem;
        left: 0;
        transform: initial;
        margin-left: 10px;
        font-weight: bold;
        padding-right: 9px;
    }
    .sub .content-primary#kindergarten .road-map .content {
        text-align: left;
        margin-left: 10px;
        margin-top: 50px;
    }
    .sub .content-primary#kindergarten .road-map .content .map-wrap {
        margin-top: 40px;
    }
    .sub .content-primary#kindergarten .road-map .content .map-wrap .map {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .sub .content-primary#kindergarten .road-map .content .map-wrap .map img {
        min-width: 654px;
        width: 100%;
    }
    .sub .content-primary#kindergarten .road-map .content .map-wrap .summary {
        font-size: 10px;
        float: left;
    }
    .sub .content-primary#kindergarten .road-map .content .btn-buy {
        display: block;
        width: 137px;
        height: 48px;
        line-height: 48px;
        margin: 12px auto 0;
        background-size: auto 48px;
        font-size: 14px;
        box-sizing: border-box;
        padding-right: 20px;
    }
    .sub .content-primary#kindergarten .road-map .content .btn-buy .ico {
        width: 24px;
        height: 23px;
        background-size: 24px;
        margin-top: 12px;
        right: 14px;
    }
    .sub .content-primary#pre-k section {
        padding-bottom: 100px;
    }
    .sub .content-primary#pre-k .section-title {
        top: -44px;
        line-height: 1;
    }
    .sub .content-primary#pre-k .section-title strong {
        position: relative;
        z-index: 1;
        line-height: 1;
    }
    .sub .content-primary#pre-k .sub-title {
        margin-top: 50px;
        font-size: 2.125rem;
        line-height: 1.24;
        margin-left: 10px;
        margin-bottom: 40px;
    }
    .sub .content-primary#pre-k .text {
        font-size: 1rem;
        margin-top: 10px;
    }
    .sub .content-primary#pre-k h3 {
        text-align: left;
        background-position: left bottom !important;
        font-size: 3.5625rem;
        font-weight: bold;
        margin-left: 10px;
        background-image: url("/images/home/bg_h3_02_m@3x.png");
        background-size: auto 10px;
        padding-bottom: 20px;
    }
    .sub .content-primary#pre-k .sun {
        width: 199px;
        height: 188px;
        right: -98px;
        top: -185px;
    }
    .sub .content-primary#pre-k .lighting {
        width: 57px;
        height: 80px;
        right: 63px;
        top: 77px;
    }
    .sub .content-primary#pre-k .story {
        text-align: initial;
        margin-top: -26px;
    }
    .sub .content-primary#pre-k .story .sub-title {
        margin-top: 0;
        margin-left: 0;
        font-size: 2.875rem;
        line-height: 1.22;
        margin-bottom: 20px;
    }
    .sub .content-primary#pre-k .story .text {
        position: relative;
        z-index: 1;
        font-size: 1.125rem;
        margin-top: 0;
    }
    .sub .content-primary#pre-k .story .text br .web {
        display: none;
    }
    .sub .content-primary#pre-k .story .info .effect {
        left: 38px;
        bottom: -64px;
        width: 55px;
        height: 99px;
    }
    .sub .content-primary#pre-k .program {
        text-align: left;
    }
    .sub .content-primary#pre-k .program .content .thumb {
        margin: 0 auto 0;
    }
    .sub .content-primary#pre-k .effect {
        text-align: left;
    }
    .sub .content-primary#pre-k .effect h3 {
        background-image: url("/images/home/bg_h3_03_m@3x.png");
    }
    .sub .content-primary#pre-k .effect .bg-wrap .bg-01 {
        width: 85px;
        height: 58px;
        top: -228px;
        left: -11px;
    }
    .sub .content-primary#pre-k .effect .bg-wrap .bg-02 {
        width: 96px;
        height: 96px;
        top: -145px;
        left: 180px;
    }
    .sub .content-primary#pre-k .effect .tab-wrap {
        margin-top: 0;
        text-align: center;
    }
    .sub .content-primary#pre-k .effect .tab-wrap .tab li {
        width: auto;
        height: auto;
    }
    .sub .content-primary#pre-k .effect .tab-wrap .tab li + li {
        margin-left: 6px;
    }
    .sub .content-primary#pre-k .effect .tab-wrap .tab li a {
        padding: 15px;
        width: auto !important;
        height: auto !important;
        line-height: 1.5;
        font-size: 12px;
        background-size: 100% auto;
    }
    .sub .content-primary#pre-k .effect .tab-wrap .tab li:nth-child(1) a {
        background-image: url("/images/home/tab_large_01_m@3x.png");
        padding: 8px 9px !important;
    }
    .sub .content-primary#pre-k .effect .tab-wrap .tab li:nth-child(2) a {
        background-image: url("/images/home/tab_large_02_m@3x.png");
        padding: 7px 9px !important;
    }
    .sub .content-primary#pre-k .effect .tab-wrap .tab li:nth-child(3) a {
        background-image: url("/images/home/tab_large_03_m@3x.png");
    }
    .sub .content-primary#pre-k .effect .tab-wrap .tab li:nth-child(4) a {
        background-image: url("/images/home/tab_large_02_m@3x.png") !important;
    }

    .sub .content-primary#pre-k .effect .tab-wrap .tab li.active:nth-child(1) a {
        background-image: url("/images/home/tab_large_01_on_m@3x.png");
    }
    .sub .content-primary#pre-k .effect .tab-wrap .tab li.active:nth-child(2) a {
        background-image: url("/images/home/tab_large_02_on_m@3x.png");
    }
    .sub .content-primary#pre-k .effect .tab-wrap .tab li.active:nth-child(3) a {
        background-image: url("/images/home/tab_large_03_on_m@3x.png");
    }
    .sub .content-primary#pre-k .effect .tab-wrap .tab li.active:nth-child(4) a {
        background-image: url("/images/home/tab_large_02_on_m@3x.png") !important;
    }
    .sub .content-primary#pre-k .effect .tab-wrap .tab-cont {
        text-align: center;
    }
    .sub .content-primary#pre-k .effect .tab-wrap .tab-cont .thumb {
        max-width: 540px;
        width: 100%;
        height: auto;
        margin-top: 30px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .sub .content-primary#pre-k .effect .tab-wrap .tab-cont .summary {
        font-size: 18px;
        margin-top: 20px;
    }
    .sub .content-primary#pre-k .effect .swiper-button-next {
        bottom: auto;
        top: 40%;
    }
    .sub .content-primary#pre-k .effect .swiper-button-prev {
        bottom: auto;
        top: 40%;
    }
    .sub .content-primary#pre-k .package {
        text-align: left;
        padding-bottom: 0;
    }
    .sub .content-primary#pre-k .package .wrap {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .sub .content-primary#pre-k .package .bg-planet {
        top: -20px;
        width: 276px;
        height: 272px;
    }
    .sub .content-primary#pre-k .package .sub-title {
        margin-bottom: 0;
    }
    .sub .content-primary#pre-k .package .text {
        margin-left: 10px;
    }
    .sub .content-primary#pre-k .package .package-wrap .data-list li::before {
        position: absolute;
        left: 0;
    }
    .sub .content-primary#pre-k .curriculum {
        text-align: left;
        padding-bottom: 0;
    }
    .sub .content-primary#pre-k .curriculum h3 {
        background-image: url("/images/home/bg_h3_04_m@3x.png");
        background-size: 292px auto;
    }
    .sub .content-primary#pre-k .curriculum .sub-title br {
        display: none;
    }
    .sub .content-primary#pre-k .curriculum .sub-title .heart {
        left: auto;
        right: -10px;
        top: -50px;
        width: 54px;
        height: 72px;
    }
    .sub .content-primary#pre-k .curriculum .buy-btn-area {
        background-image: url("/images/home/dashed_m@3x.png");
        text-align: center;
        min-height: 177px;
        margin: 65px auto 0;
        padding: 30px 40px;
        max-width: 335px;
    }
    .sub .content-primary#pre-k .curriculum .buy-btn-area p {
        font-size: 20px;
    }
    .sub .content-primary#pre-k .curriculum .buy-btn-area .btn-buy {
        display: inline-block;
        position: static;
        margin-top: 10px;
        transform: initial;
    }
    .sub .content-primary#buy .section-title {
        top: -41px;
    }
    .sub .content-primary#buy .section-title .bulb {
        width: 92px;
        height: 180px;
        right: auto;
        left: 228px;
        top: -108px;
    }
    .sub .content-primary#buy .price .price-title {
        margin-top: 0;
        text-align: left;
        font-size: 46px;
    }
    .sub .content-primary#buy .price .price-title .effect-buy {
        display: none;
    }
    .sub .content-primary#buy .price .thumb {
        margin-top: 80px;
    }
    .sub .content-primary#buy .price .cont-wrap {
        display: block;
        text-align: center;
        margin-top: 60px;
    }
    .sub .content-primary#buy .price .cont-wrap::before {
        display: none;
    }
    .sub .content-primary#buy .price .cont-wrap .summary {
        margin: 16px auto 0;
    }
    .sub .content-primary#buy .price .cont-wrap .total {
        font-size: 46px;
        margin-top: 40px;
    }
    .sub .content-primary#buy .price .cont-wrap .total span {
        font-size: 22px;
    }
    .sub .content-primary#buy .price .cont-wrap .btn-buy {
        display: block;
        width: 137px;
        height: 48px;
        line-height: 48px;
        margin: 12px auto 0;
        background-size: auto 48px;
        font-size: 14px;
        box-sizing: border-box;
        padding-right: 20px;
    }
    .sub .content-primary#buy .price .cont-wrap .btn-buy .ico {
        width: 24px;
        height: 23px;
        background-size: 24px;
        margin-top: 12px;
        right: 21px;
    }
    .sub .content-primary#buy .price .cont-wrap .cont {
        width: 100%;
        padding: 0;
        min-height: auto;
    }
    .sub .content-primary#buy .price .cont-wrap .cont + .cont {
        margin-top: 100px;
        padding-top: 100px;
        background-image: linear-gradient(to right, #e7decb 60%, rgba(255, 255, 255, 0) 0%);
        background-position: top;
        background-size: 16px 2px;
        background-repeat: repeat-x;
    }
    .sub .content-primary#buy .price .cont-wrap .cont .info {
        min-height: initial;
        margin-top: 40px;
    }
    .sub .content-primary#buy .price .cont-wrap .cont .info h4 {
        padding-top: 40px;
        line-height: 1.5;
    }
    .sub .content-primary#buy .price .cont-wrap .cont .info .moon {
        margin-top: 30px;
    }
    .sub .content-primary#buy .price .cont-wrap .cont .info-title {
        margin-top: 20px;
    }
    .sub .content-primary#buy .price .cont-wrap .cont .info-text {
        max-width: 260px;
        margin: 10px auto 0;
    }
    .faq-tab-wrap {
        margin-top: 30px;
    }
    .faq-tab-wrap .select-wrap {
        padding: 0 30px;
    }
    .faq-tab-wrap .select-wrap .label {
        font-size: 20px;
    }
    .faq-tab-wrap .select-wrap .selectric .button {
        top: 14px;
    }
    .faq-tab-wrap .faq-list li .question::before {
        top: 20px;
    }
    .customer.faq .content-header .section-title strong {
        position: relative;
    }
    .customer.faq .content-header .section-title .bg-01 {
        left: auto;
        right: -65px;
        top: -47px;
    }
}

@media screen and (max-width: 320px) {
    .sub .content-primary#kindergarten .system .content .item-info .bg-02 {
        top: 781px;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .intro .video .playing {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

#wrap.jp #buy .price .price-title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
}

#wrap.jp #buy .price .cont-wrap .cont {
    padding: 0 40px;
}

#wrap.jp #buy .price .cont-wrap .cont .cont-title {
    font-weight: bold;
    font-family: "M PLUS 1p", sans-serif;
    line-height: 1.32;
}

#wrap.jp #buy .price .cont-wrap .cont .summary {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: bold;
    line-height: 1.5;
}

#wrap.jp #buy .price .cont-wrap .cont .info {
    min-height: 1179px;
}

#wrap.jp #buy .price .cont-wrap .cont .info h4 {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
    line-height: 1.8;
}

#wrap.jp #buy .price .cont-wrap .cont .info .info-title {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: bold;
}

#wrap.jp #buy .price .cont-wrap .cont .info .info-text {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: normal;
}

#wrap.jp #buy .price .cont-wrap .total {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
    margin-top: 80px;
}

#wrap.jp #buy .price .cont-wrap .btn-more {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
}

#wrap.jp .board-wrap .content-header p {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
}

#wrap.jp .board-wrap .input-search input {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp .board-wrap .board-view-header {
    font-family: "M PLUS 1p", sans-serif;
}

#wrap.jp .board-wrap .board-view-body {
    font-family: "Noto Sans JP", sans-serif;
    overflow-x: auto;
}

#wrap.jp .board-wrap .board-button-wrap .board-button {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
}

#wrap.jp .board-wrap.faq .content-primary {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp .board-wrap.faq .selectric-items {
    width: 240px !important;
    left: -34px;
}

#wrap.jp .board-wrap.faq .faq-tab-wrap .tab li.active .btn.type03 {
    width: 214px;
    background-image: url("/images/home/images_jap/tab07_active@2x.png");
}

#wrap.jp .board-wrap.faq .faq-tab-wrap .tab li .btn {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp .board-wrap.faq .faq-tab-wrap .tab li .btn.type03 {
    width: 214px;
    background-image: url("/images/home/images_jap/tab07@2x.png");
}

#wrap.jp .board-wrap.faq .faq-list li {
    padding-left: 200px;
}

#wrap.jp .board-wrap.faq .faq-list li .category {
    width: 200px;
}

#wrap.jp .skyscraper {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp .skyscraper .btn-qna {
    width: 100px;
}

#wrap.jp .skyscraper .btn-qna span {
    display: inline-block;
    text-align: center;
}

#wrap.jp .skyscraper .bubble {
    top: -150px;
    width: 276px;
    right: 50px;
    font-size: 14px;
}

#wrap.jp .customer {
    font-family: "M PLUS 1p", sans-serif;
}

#wrap.jp .customer .content-header .section-title {
    font-size: 120px;
}

#wrap.jp .customer .content-header .section-title .bg-01 {
    left: 202px;
}

#wrap.jp .customer .content-header .section-title .bg-wrap .bg-02 {
    left: -194px;
    top: 138px;
}

#wrap.jp .customer .content-header .section-title .bg-wrap .bg-03 {
    left: -300px;
    top: 122px;
}

#wrap.jp .customer .board .customer-text {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp .customer .info {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp .customer .btn-area a {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp .promotion .tab li a {
    background: url("/images/home/images_jap/tab.png") 0 0 no-repeat;
    width: 129px;
    height: 73px;
    background-size: 129px;
    font-family: "M PLUS 1p", sans-serif;
}

#wrap.jp .promotion .tab li.active a {
    background: url("/images/home/images_jap/tab_active.png");
    background-size: 129px;
}

#wrap.jp .promotion .tab li + li a {
    background: url("/images/home/images_jap/tab02.png") 0 0 no-repeat;
    width: 107px;
    background-size: 107px;
}

#wrap.jp .promotion .tab li + li.active a {
    background: url("/images/home/images_jap/tab02_active.png");
    background-size: 107px;
}

#wrap.jp #pre-k .story {
    padding-bottom: 120px;
}

#wrap.jp #pre-k .story .sub-title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
    font-size: 3.625rem;
    letter-spacing: -0.58px;
}

#wrap.jp #pre-k .story .sub-title .font_gray { color: #8d8d8d; }

#wrap.jp #pre-k .story .text {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.5;
}

#wrap.jp #pre-k .story .effect {
    bottom: -53px;
    left: 39px;
}

#wrap.jp #pre-k .program .content .sub-title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
    line-height: 1.32;
}

#wrap.jp #pre-k .program .content .text-info .title {
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp #pre-k .program .content .text-info .text {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: normal;
}

#wrap.jp #pre-k .program .content .text-info .item-list .label {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: normal;
}

#wrap.jp #pre-k .program .content .bg-bubble {
    top: -8px;
    right: -76px;
}

#wrap.jp #pre-k .effect .sub-title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
    line-height: 1.32;
}

#wrap.jp #pre-k .effect .bg-wrap .bg-01 {
    top: -144px;
    left: -129px;
}

#wrap.jp #pre-k .effect .bg-wrap .bg-02 {
    top: -18px;
    right: -160px;
}

#wrap.jp #pre-k .effect .tab-wrap .tab li a {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
}

/* S:theegg */
.jp * {
    font-family:  "Noto Sans JP", "M PLUS 1p", sans-serif;
}

.sub .content-primary#pre-k .section-title .logo_theegg {
    max-width: 90%;
    position: relative;
    top: -0.1em;
}

#wrap.jp #pre-k .sub-title {
    position: relative;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
    line-height: 1.32;
}

#wrap.jp #pre-k .sub-title .ico_plus {
    position: relative;
    top: -0.18em;
    left: 0.1em;
    display: inline-block;
    max-width: 30px;
    max-height: 30px;
    width: 0.5em;
    height: 0.5em;
    background: url('/images/home/theegg/ico_plus.png') center center no-repeat;
    background-size: contain;
}

#wrap.jp .theegg #pre-k .story {
    padding-bottom: 3em;
}

.goods_tab_block {
    display: flex;
    justify-content: center;
    gap: 0.5em;
    margin: 0 auto 4em;
}

.goods_tab_block .tab_item {
    --img-ico-on: url('/images/home/theegg/ico_yellow_on.png');
    --img-ico-off: url('/images/home/theegg/ico_yellow_off.png');
    width: 7em;
    background-color: #f4f4f4;
    font-size: 1.1rem;
    color: #c0c0c0;
    text-align: center;
    font-weight: 800;
    line-height: 1.79;
    letter-spacing: -0.48px;
    border-radius: 0.5em;
}

.goods_tab_block .tab_item a {
    display: flex;
    justify-content: center;
    gap: 0.5em;
    align-items: center;
    color: inherit;
    padding: 0.5em;
}

.goods_tab_block .tab_item a::before {
    content: '';
    position: relative;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
}

.goods_tab_block .tab_item a::before {
    background-image: var(--img-ico-off);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.goods_tab_block .tab_item:hover a::before,
.goods_tab_block .tab_item.active a::before {
    background-image: var(--img-ico-on);
}

.goods_tab_block .tab_item:hover,
.goods_tab_block .tab_item.active {
    --bg-active: #fdd100;
    color: #fff;
    background: var(--bg-active);
}

.goods_tab_block .tab_item.green {
    --bg-active: #a8d800;
    --img-ico-on: url('/images/home/theegg/ico_green_on.png');
    --img-ico-off: url('/images/home/theegg/ico_green_off.png');
}

.goods_tab_block .tab_item.blue {
    --bg-active: #65bbec;
    --img-ico-on: url('/images/home/theegg/ico_blue_on.png');
    --img-ico-off: url('/images/home/theegg/ico_blue_off.png');
}

.theegg .content-primary#pre-k .effect .tab-wrap .tab {
    margin: 0 -20px;
    padding: 0 20px;
}

.theegg .content-primary#pre-k .effect .tab-wrap .tab li a {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1rem;
    font-weight: 400;
    min-height: 3em;
    width: auto !important;
    height: auto !important;
    padding: 2em 0.1em !important;
    line-height: 1.3 !important;
    background-size: 100% auto !important;
    background-position: center;
}

.theegg .content-primary#pre-k .effect .tab-wrap .tab li:nth-child(1) a {
    background-image: url('/images/home/theegg/mo_nav_01_off.png');
    letter-spacing: -0.02em;
    width: auto !important;
    height: auto !important;
    line-height: 1.3 !important;
    background-size: 100% auto !important;
}

.theegg .content-primary#pre-k .effect .tab-wrap .tab li.active:nth-child(1) a { background-image: url('/images/home/theegg/mo_nav_01_on.png'); }
.theegg .content-primary#pre-k .effect .tab-wrap .tab li:nth-child(2) a {
    background-image: url('/images/home/theegg/mo_nav_02_off.png');
    width: auto !important;
    height: auto !important;
    line-height: 1.3 !important;
    padding: 0.8em 0.25em !important;
    background-size: contain !important;
}
.theegg .content-primary#pre-k .effect .tab-wrap .tab li.active:nth-child(2) a { background-image: url('/images/home/theegg/mo_nav_02_on.png'); }
.theegg .content-primary#pre-k .effect .tab-wrap .tab li:nth-child(3) a {
    background-image: url('/images/home/theegg/mo_nav_03_off.png');
    width: auto !important;
    height: auto !important;
    line-height: 1.3 !important;
    letter-spacing: -0.05em;
    background-size: 100% auto  !important;
    position: relative;
    top: -0.5em;
}
.theegg .content-primary#pre-k .effect .tab-wrap .tab li.active:nth-child(3) a { background-image: url('/images/home/theegg/mo_nav_03_on.png'); }
.theegg .content-primary#pre-k .effect .tab-wrap .tab li:nth-child(4) a {
    background-image: url('/images/home/theegg/mo_nav_04_off.png') !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.3 !important;
    background-size: contain !important;
}
.theegg .content-primary#pre-k .effect .tab-wrap .tab li.active:nth-child(4) a { background-image: url('/images/home/theegg/mo_nav_04_on.png') !important; }

/* S:gustation */
.gustation_section {
    --thema-color: #fdd000;
    --bg-line: #ffa60b;
    --shadow-line: #ae6f02;
    --color-point: #fdca00;
    margin-bottom: 100px;
}

.gustation_section .gustation {
    max-width: 600px;
    position: relative;
    background-color: var(--thema-color);
    display: flex;
    flex-direction: column-reverse;
    gap: 2em;
    padding: 6em 1em 3.5em;
    margin: 0 auto;
    border-radius: 4em 0.5em 4em 0.5em;
}

.gustation_section .gustation .textarea { text-align: center; }

.gustation_section .gustation .textarea .line_title {
    position: absolute;
    top: 1.5em;
    right: -0.3em;
    display: inline-block;
    background-color: var(--bg-line);
    font-size: 1.3rem;
    color: #fff;
    font-weight: 600;
    padding: 0.2em 1.2em;
    border-radius: 2em 0 0 2em;
}

.gustation .textarea .line_title::before {
    content: "";
    position: absolute;
    right: 0;
    top: 1.3em;
    width: 0.3em;
    height: 1em;
    z-index: -1;
    background: var(--shadow-line);
}

.gustation .textarea .line_title::after {
    content: "";
    position: absolute;
    right: -0.4em;
    bottom: -0.7em;
    width: 0.6em;
    height: 0.6em;
    transform: rotate(-45deg);
    z-index: -1;
    background: rgb(255, 255, 255);
}

.gustation_section .gustation .textarea .name {
    font-size: clamp(16px, 7vw, 40px);
    color: #fff;
    text-align: left;
    font-weight: 600;
}

.gustation_section .gustation .textarea .name_text {
    font-size: clamp(16px, 3.7vw, 25px);
    color: #fff;
    text-align: left;
    margin-top: 1em;
}

.gustation_section .gustation .textarea .white_btn {
    background-color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--thema-color);
    padding: 0.5em 1.8em;
    margin-top: 1.5em;
    border-radius: 3em;
}

.gustation_section .gustation .imgarea { text-align: right; }

.gustation_section .gustation .video_bubble {
    position: relative;
    top: 1.5em;
    display: inline-block;
    background-color: #fff;
    font-size: clamp(14px, 3.1vw, 22px);
    color: #676767;
    letter-spacing: -0.02em;
    text-align: center;
    padding: 0.5em 0.8em;
    border-radius: 5em;
}

.gustation_section .gustation .video_bubble p { font-size: inherit; }
.gustation_section .gustation .video_bubble .font_point { color: var(--color-point); font-weight: 600; }
/* E:gustation */

.sub .content-primary#pre-k .home_activity h3 {
    background: url("/images/home/bg_h3_04@2x.png") center bottom no-repeat;
    background-size: 400px auto;
}

.sub .content-primary#pre-k .home_activity .sub-title {
    margin-top: 3rem;
    margin-bottom: 0;
}

.theegg .activity_list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2.2rem;
}

.theegg .activity_box {
    --thema-color: #fdd000;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    text-align: center;
    background-color: #f7f5e9;
    padding: 1.4rem;
    border-radius: 1rem;
    box-shadow: 0 0 0.5rem  rgba(0,0,0, 0.06);
}

.theegg .activity_box .thumb_block img { width: 100%; }

.activity_box .desc_block .title {
    display: inline-block;
    width: auto;
    background-color: var(--thema-color);
    font-size: 1.2rem;
    color: #fff;
    font-weight: 500;
    padding: 0.25em 1em;
    border-radius: 3em;
    margin-bottom: 0.8em;
}

.activity_box .desc_block .desc {
    min-height: 5em;
    font-size: 1rem;
    color: #676767;
}

.theegg.sub .content-primary#pre-k .package .wrap { padding-bottom: 0; }

.theegg.sub .content-primary#pre-k .package .sub-title .heart {
    display: block;
    position: absolute;
    top: -101px;
    left: 70%;
    max-width: 20vw;
    width: 98px;
    height: 126px;
    background: url(/images/home/heart_01@2x.png) 0 0 no-repeat;
    background-size: 100% auto;
    transform: scaleX(-1);
}


.theegg.sub .content-primary#pre-k .package .bg-planet { display: none; }


.theegg .package_product {
    display: flex;
    gap: 1em;
    flex-direction: column;
    align-items: flex-start;
}

.theegg .package_product .package_img_box {
    background-color: #f7f7f9;
    width: 100%;
    height: auto;
    max-width: 647px;
    max-height: 477px;
    aspect-ratio: 100 / 74;
    border-radius: 10px;
    overflow: hidden;
}

.theegg .package_product .package_img_box img { max-width: 100%; }

.theegg .package_product .package_box {
    display: flex;
    flex-direction: column-reverse;
    gap: 2em;
}

.theegg .package_product .package_item {
    font-family: "Noto Sans JP", sans-serif;
    text-align: left;
    letter-spacing: -0.04em;
    padding-left: 1em;
    margin-bottom: 1em;
}

.theegg .package_product .package_item .title {
    position: relative;
    font-size: 1rem;
    font-weight: 600;
}

.theegg .package_product .package_item .title::before {
    content: '·';
    position: absolute;
    top: 0;
    left: -0.7em;
}

.theegg .package_product .package_item .desc {
    font-size: 0.95rem;
    color: #676767;
    line-height: 1.2;
    padding: 0;
    margin: 0.2em 0 0;
}

.font_yellow { color: #ffc000; }
.font_orange { color: #ff9103; }

.theegg .package_thumb_list {
    display: flex;
    justify-content: center;
    gap: 1em;
}

.theegg .package_thumb_list .package_thumb_item {
    max-width: 17vw;
    outline: 1px solid #f6f6f4;
    outline-offset: -1px;
    cursor: pointer;
}

.theegg .package_thumb_list .package_thumb_item img { max-width: 100%; }

.theegg .package_thumb_list .package_thumb_item.active {
    outline: 2px solid #fdd000;
    outline-offset: -2px;
}

.theegg .package_composition {
    margin-top: clamp(20px, 7vw, 130px);
}

.theegg .package_composition .sub_title {
    font-size: 1.2rem;
    text-align: left;
    margin-bottom: 0.8em;
}

.theegg .package_composition .thumb_block {
    border: 1px solid #ededed;
    border-radius: 1em;
    overflow: hidden;
    box-sizing: border-box;
}

.theegg .package_composition .thumb_block img {
    width: 100%;
}

.theegg .package_composition .desc_block {
    text-align: left;
    margin-top: 1em;
}

.theegg .package_composition .desc_block .title {
    font-size: 0.9rem;
    color: #040000;
    font-weight: 600;
}

.theegg .package_composition .desc_block .desc {
    font-size: 0.7rem;
    color: #676767;
    letter-spacing: -0.02em;
    margin-top: 1em;
}

.sub .content-primary .package .swiper-container {
    margin: 0 -1.5em;
    padding: 0 1.5em;
}

.sub .content-primary .package .swiper-button-prev,
.sub .content-primary .package .swiper-button-next {
    top: 25%;
    max-width: 9vw;
    max-height: 9vw;
}

.sub .content-primary .package .swiper-button-prev { left: 2%; }
.sub .content-primary .package .swiper-button-next { right: 2%; }


@media screen and (max-width: 1160px) {
    #wrap .theegg .content-primary#pre-k .program .content .item-wrap {
        margin-left: 0 !important;
    }
}

@media screen and (max-width: 768px) {
    .theegg .package_product .package_box {width: 100%;}
}

/* pc */
@media screen and (min-width: 769px) {
    #wrap.jp .theegg #pre-k .story {
        padding-bottom: 120px;
    }

    .goods_tab_block {
        gap: 1em;
        margin: 0 auto 150px;
    }

    .goods_tab_block .tab_item {
        font-size: 1.8rem;
    }

    .theegg .content-primary#pre-k .effect .tab-wrap .tab li a {
        font-size: 20px;
        padding: 1.8em !important;
    }

    #wrap.jp .theegg .content-primary#pre-k .effect .tab-wrap .tab li:nth-child(1) a { background-image: url('/images/home/theegg/pc_nav_01_off.png'); }
    #wrap.jp .theegg .content-primary#pre-k .effect .tab-wrap .tab li.active:nth-child(1) a { background-image: url('/images/home/theegg/pc_nav_01_on.png'); }
    #wrap.jp .theegg .content-primary#pre-k .effect .tab-wrap .tab li:nth-child(2) a {
        background-image: url('/images/home/theegg/pc_nav_02_off.png');
        padding: 2em !important;
    }
    #wrap.jp .theegg .content-primary#pre-k .effect .tab-wrap .tab li.active:nth-child(2) a { background-image: url('/images/home/theegg/pc_nav_02_on.png'); }
    #wrap.jp .theegg .content-primary#pre-k .effect .tab-wrap .tab li:nth-child(3) a {
        background-image: url('/images/home/theegg/pc_nav_03_off.png');
        top: 0;
    }
    #wrap.jp .theegg .content-primary#pre-k .effect .tab-wrap .tab li.active:nth-child(3) a { background-image: url('/images/home/theegg/pc_nav_03_on.png'); }
    #wrap.jp .theegg .content-primary#pre-k .effect .tab-wrap .tab li:nth-child(4) a { background-image: url('/images/home/theegg/pc_nav_04_off.png') !important; }
    #wrap.jp .theegg .content-primary#pre-k .effect .tab-wrap .tab li.active:nth-child(4) a {
        width: auto !important;
        background-image: url('/images/home/theegg/pc_nav_04_on.png') !important;
    }

    /* S:gustation */
    .gustation_section {  padding: 0 1em; margin-bottom: 145px; }
    .gustation_section .gustation {
        max-width: 2000px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        border-radius: 10em 1em 10em 1em;
    }

    .gustation_section .gustation .textarea { text-align: left; }

    .gustation_section .gustation .textarea .line_title {
        position: static;
        background-color: transparent;
        font-size: 1.5rem;
        color: #fff;
        border: 2px solid #fff;
        border-radius: 3em;
        margin-bottom: 1em;
    }
    .gustation .textarea .line_title::before { display: none; }
    .gustation .textarea .line_title::after { display: none; }
    .gustation_section .gustation .textarea .name { font-size: 30px; }
    .gustation_section .gustation .textarea .name_text { font-size: 18px; }

    .gustation_section .gustation .imgarea { max-width: 920px; width: 50%; text-align: left; }
    .gustation_section .gustation .video_bubble {
        font-size: 1rem;
        left: 5%;
        padding: 0.8em 1em;
    }
    .gustation .imgarea .video_bubble:before {
        content: "";
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        right: 65px;
        bottom: -16px;
        width: 20px;
        height: 21px;
    }
    .gustation .imgarea .video_bubble.white:before {
        background-image: url("/images/home/theegg/bubble_point.png");
    }
    .gustation_section .gustation .textarea .white_btn {  font-size: 1.5rem; margin-top: 2em; }

    .gustation_section .gustation .textarea .name { font-size: 30px; }
    .gustation_section .gustation .textarea .name_text { font-size: 18px; }

    .gustation_section .gustation .imgarea { width: 40%; }
    .gustation_section .gustation .video_bubble { font-size: 1rem; }
    .gustation_section .gustation .textarea .white_btn {  font-size: 1.5rem; }
    /* E:gustation */

    .sub .content-primary#pre-k .home_activity .sub-title {
        text-align: center;
    }

    .theegg .activity_list {
        gap: 3rem;
        margin-top: 75px;
    }

    .theegg .activity_box {
        flex-direction: row;
        gap: 3rem;
        text-align: left;
        padding: 2rem 3rem;
    }

    .activity_box .desc_block .title { font-size: 1.5rem; }
    .activity_box .desc_block .desc {
        font-size: 1.2rem;
        padding-left: 1.7em;
    }

    .theegg.sub .content-primary#pre-k .package .heart {
        top: -101px;
        left: 10px;
        transform: scaleX(1);
    }
    .theegg.sub .content-primary#pre-k .package .bg-planet { display: block; }

    .theegg .package_product {
        flex-direction: row;
        gap: 2em;
    }

    .theegg .package_product .package_box { min-width: 45%;  flex-direction: column; gap: 0; }
    .theegg .package_thumb_list { margin-top: 2em; }
    .theegg .package_product .package_item .title { font-size: 1.25rem; }
    .theegg .package_product .package_item .desc { font-size: 1.05rem; line-height: 1.6; }

    .theegg .package_composition .sub_title { font-size: 2rem; margin-bottom: 1.3em; }
    .theegg .package_composition .desc_block .title { font-size: 1.4rem; }
    .theegg .package_composition .desc_block .desc { font-size: 1.1rem; }


    .sub .content-primary .package .swiper-button-prev { left: 0; }
    .sub .content-primary .package .swiper-button-next { right: 0; }
}
@media screen and (min-width: 1300px) {
    /* S:gustation */
    .gustation_section .gustation .textarea .name { font-size: 40px; }
    .gustation_section .gustation .textarea .name_text { font-size: 22px; }

    .gustation_section .gustation .imgarea { width: 50%; }
    .gustation_section .gustation .video_bubble { font-size: 1.2rem; }
    .gustation_section .gustation .textarea .white_btn {  font-size: 2rem; }
    /* E:gustation */
}
/* E:theegg */

@media screen and (min-width: 769px) {
    #wrap.jp #pre-k .effect .tab-wrap .tab li:nth-child(1) a {
        width: 300px;
        background-image: url("/images/home/images_jap/tab_large_01.png");
    }

    #wrap.jp #pre-k .effect .tab-wrap .tab li.active:nth-child(1) a {
        width: 300px;
        background-image: url("/images/home/images_jap/tab_large_01_on.png");
    }

    #wrap.jp #pre-k .effect .tab-wrap .tab li:nth-child(2) a {
        width: 200px;
        background-image: url("/images/home/images_jap/tab_large_02.png");
    }

    #wrap.jp #pre-k .effect .tab-wrap .tab li.active:nth-child(2) a {
        width: 200px;
        background-image: url("/images/home/images_jap/tab_large_02_on.png");
    }

    #wrap.jp #pre-k .effect .tab-wrap .tab li:nth-child(3) a {
        width: 240px;
        background-image: url("/images/home/images_jap/tab_large_03.png");
    }

    #wrap.jp #pre-k .effect .tab-wrap .tab li.active:nth-child(3) a {
        width: 240px;
        background-image: url("/images/home/images_jap/tab_large_03_on.png");
    }

    #wrap.jp #pre-k .effect .tab-wrap .tab li:nth-child(4) a {
        width: 200px;
        background-image: url("/images/home/images_jap/tab_large_02.png");
    }

    #wrap.jp #pre-k .effect .tab-wrap .tab li.active:nth-child(4) a {
        width: 200px !important;
        background-image: url("/images/home/images_jap/tab_large_02_on.png") !important;
    }
}

#wrap.jp #pre-k .effect .tab-wrap .tab-cont .summary {
    font-family: "M PLUS 1p", sans-serif;
}

#wrap.jp #pre-k .package .wrap .sub-title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
}

#wrap.jp #pre-k .package .wrap .text {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp #pre-k .package .package-wrap .data-list li {
    font-family: "Noto Sans JP", sans-serif;
}

@media screen and (min-width: 1161px) {
    #wrap.jp #pre-k .package .package-wrap .data-list li:nth-child(1) {
        left: -120px;
    }

    #wrap.jp #pre-k .package .package-wrap .data-list li:nth-child(1):after {
        left: 110px;
        top: 60px;
    }

    #wrap.jp #pre-k .package .package-wrap .data-list li:nth-child(2) {
        right: -190px;
    }

    #wrap.jp #pre-k .package .package-wrap .data-list li:nth-child(2):after {
        left: -50px;
    }

    #wrap.jp #pre-k .package .package-wrap .data-list li:nth-child(3) {
        left: 32%;
    }
    #wrap.jp #pre-k .package .package-wrap .data-list li:nth-child(4) {
        right: -132px;
    }

    #wrap.jp #pre-k .package .package-wrap .data-list li:nth-child(4):after {
        left: 32%;
        top: -100px;
    }
}




/*#wrap.jp #pre-k .package .package-wrap .data-list li:nth-child(4):after {*/
/*    left: 94px;*/
/*}*/



@media screen and (max-width: 1160px) {
    #wrap.jp #pre-k .package .package-wrap .data-list{
        text-align: left;
    }
    #wrap.jp #pre-k .package .package-wrap .data-list li{
        left: 0px;
    }
}

#wrap.jp #pre-k .curriculum .sub-title {
    font-size: 44px;
    line-height: 1.32;
    font-weight: bold;
    font-family: "M PLUS 1p", sans-serif;
}

#wrap.jp #pre-k .curriculum .sub-title .heart {
    left: 52px;
}

#wrap.jp #pre-k .curriculum .year-content .info .title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
}

#wrap.jp #pre-k .curriculum .year-content .info .jap02 {
    margin-top: 12px;
    font-weight: 500;
}

#wrap.jp #pre-k .curriculum .year-content .info .jap02 dd {
    font-weight: normal;
}

#wrap.jp #pre-k .curriculum .year-content .info .en {
    margin-top: 12px;
    font-weight: 600;
}

#wrap.jp #pre-k .curriculum .buy-btn-area p {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
}

#wrap.jp #pre-k .curriculum .buy-btn-area .btn-buy {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
}

#wrap.jp #kindergarten .story .info {
    padding-left: 0;
}

#wrap.jp #kindergarten .story .info .sub-title {
    font-weight: bold;
    font-family: "M PLUS 1p", sans-serif;
    font-size: 60px;
    line-height: 1.41;
    width: 60%;
}

#wrap.jp #kindergarten .story .info .text {
    margin-left: -34px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    line-height: 1.5;
}

#wrap.jp #kindergarten .content .sub-title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
    line-height: 1.32;
}

#wrap.jp #kindergarten .content .text {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: normal;
}

#wrap.jp #kindergarten .content .thumb {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp #kindergarten .content .thumb .small-02 {
    top: 79px;
}

#wrap.jp #kindergarten .content .thumb .label {
    font-weight: 500;
}

#wrap.jp #kindergarten .system .content {
    margin-left: 38px;
}

#wrap.jp #kindergarten .system .content .item-info {
    margin-right: 0;
}

#wrap.jp #kindergarten .system .content .item-info .bg-01 {
    right: -24px;
}

#wrap.jp #kindergarten .system .content .item-info .bg-02 {
    left: -8px;
}

#wrap.jp #kindergarten .btn-buy {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 18px;
}

#wrap.jp #ourStory .story .info {
    padding-left: 0;
}

#wrap.jp #ourStory .story .info .sub-title {
    font-weight: bold;
    font-family: "M PLUS 1p", sans-serif;
    font-size: 64px;
    line-height: 1.41;
}

#wrap.jp #ourStory .story .info .text {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    line-height: 1.5;
}

#wrap.jp #ourStory .our #tabcont-01 {
    width: 100%;
    max-width: 1160px;
}

#wrap.jp #ourStory .our #tabcont-01 .swiper-container .title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
    line-height: 1.32;
}

#wrap.jp #ourStory .our #tabcont-01 .swiper-container .summary {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp #ourStory .our #tabcont-01 .swiper-control {
    position: absolute;
    width: 810px;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 12;
}

#wrap.jp #ourStory .our #tabcont-01 .bg-01 {
    left: -16px;
    top: -114px;
}

#wrap.jp #ourStory .our #tabcont-02 .title {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: bold;
    line-height: 1.32;
}

#wrap.jp #ourStory .our #tabcont-02 .summary {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp #ourStory .our #tabcont-02 .text {
    font-family: "M PLUS 1p", sans-serif;
    font-size: 1rem;
}

#wrap.jp .resource .searchform {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp .resource .board .category {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp .resource .board .left {
    font-family: "Noto Sans JP", sans-serif;
}

#wrap.jp .resource .board-view-attach .category {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 37px;
    background: url("/images/home/images_jap/category_01.png") 0 0 no-repeat;
    background-size: auto 37px;
}

#wrap.jp .resource .board-view-attach .category.category01 {
    background-image: url("/images/home/images_jap/category_01.png");
}

#wrap.jp .board-view-body p {
    white-space: inherit;
}

#wrap.jp .board-button {
    font-family: "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 768px) {
    #wrap.jp .board-wrap.promotion .tab-wrap .tab li a {
        background-image: url("/images/home/mtab@2x.png");
        height: 63px;
        line-height: 63px;
    }
    #wrap.jp .board-wrap.promotion .tab-wrap .tab li.active a {
        background-image: url("/images/home/mtab_avtive@2x.png");
        height: 62px;
    }
    #wrap.jp .board-wrap.promotion .tab-wrap .tab li + li a {
        background-image: url("/images/home/mtab02@2x.png");
    }
    #wrap.jp .board-wrap.promotion .tab-wrap .tab li + li.active a {
        background-image: url("/images/home/mtab_avtive02@2x.png");
    }
    #wrap.jp .board-view-attach .category {
        font-size: 16px;
        height: 37px;
        background-size: auto 35px;
        padding: 0 18px;
        display: inline-block;
        line-height: 35px;
    }
    #wrap.jp .board-view-attach .category.category01 {
        background-image: url("/images/home/images_jap/category_01_m.png");
    }
    #wrap.jp .board-view-attach .category.category02 {
        background-image: url("/images/home/images_jap/category_02_m.png");
        padding: 0 25px;
    }
    #wrap.jp .board-view-attach .category.category03 {
        background-image: url("/images/home/images_jap/category_03_m.png");
    }
    #wrap.jp .board-view-attach .category.category04 {
        background-image: url("/images/home/images_jap/category_04_m.png");
    }
    #wrap.jp #pre-k .story .sub-title {
        font-size: 2.625rem;
    }
    #wrap.jp #pre-k .effect .bg-wrap .bg-01 {
        left: -10px;
        top: -240px;
    }
    #wrap.jp #pre-k .effect .bg-wrap .bg-02 {
        top: -168px;
        left: 193px;
    }
    #wrap.jp #pre-k .effect .tab-wrap .tab li a {
        background-size: 100% 61px;
        font-weight: bold;
        line-height: 1.4;
        padding: 15px 9px;
    }
    #wrap.jp #pre-k .effect .tab-wrap .tab li + li {
        margin-left: 4px;
    }
    #wrap.jp #pre-k .package .package-wrap .data-list li:nth-child(1) {
        left: 0;
    }
    #wrap.jp #pre-k .package .package-wrap .data-list li {
        word-break: break-all;
    }
    #wrap.jp #pre-k .curriculum .sub-title .heart {
        left: auto;
        right: -10px;
        top: -87px;
    }
    #wrap.jp #pre-k .curriculum .buy-btn-area {
        padding: 20px 20px;
    }
    #wrap.jp #kindergarten .story .info .sub-title {
        width: 100%;
        font-size: 40px;
    }
    #wrap.jp #kindergarten .story .info .text {
        margin-left: 0;
    }
    #wrap.jp #kindergarten .system .content {
        margin-left: 0;
    }
    #wrap.jp #kindergarten .road-map .content .btn-buy {
        width: 146px;
    }
    #wrap.jp #buy .price .cont-wrap .cont .info {
        min-height: 0;
    }
    #wrap.jp #buy .price .cont-wrap .cont {
        width: 100%;
        padding: 0;
        min-height: auto;
    }
    #wrap.jp #buy .price .cont-wrap .total {
        font-size: 46px;
        margin-top: 40px;
    }
    #wrap.jp #buy .price .cont-wrap .total span {
        font-size: 20px;
    }
    #wrap.jp #buy .price .cont-wrap .cont + .cont {
        padding-top: 100px;
    }
    #wrap.jp #ourStory .story .info .sub-title {
        font-size: 40px;
        width: 100%;
    }
    #wrap.jp #ourStory .our .tab-wrap .item-list li .text {
        width: 200px;
    }
    #wrap.jp #ourStory .our #tabcont-01 .swiper-control {
        transform: none;
        left: 0;
        display: contents;
    }
    #wrap.jp .customer .content-header .section-title {
        font-size: 5rem;
    }
    #wrap.jp .customer.faq .content-header .section-title {
        font-size: 5rem;
    }
    #wrap.jp .customer .content-header .section-title .one {
        letter-spacing: -1rem;
    }
    #wrap.jp .board-wrap .content-header p {
        margin: 0 16px;
        letter-spacing: -0.05em;
    }
    #wrap.jp .customer .content-header .section-title .bg-01 {
        left: 112px;
    }
    #wrap.jp .customer .content-header .section-title .bg-wrap .bg-02 {
        left: -24px;
        top: 78px;
    }
    #wrap.jp .customer .content-header .section-title .bg-wrap .bg-03 {
        left: -107px;
        top: 68px;
    }
    #wrap.jp .board-wrap.faq .faq-list li {
        padding-left: 0;
    }
    #wrap.jp .board-wrap.faq .faq-list li .category {
        width: auto;
    }
    #wrap.jp .faq-tab-wrap .faq-list li .question {
        padding-right: 140px;
    }
    #wrap.jp .skyscraper .btn-qna {
        font-size: 15px;
    }
    #wrap.jp .skyscraper .bubble {
        top: -140px;
        width: 264px;
    }
}

#wrap.eng {
    font-family: "Overpass", sans-serif;
}

#wrap.eng .skyscraper .bubble {
    top: -170px;
    right: 35px;
}

#wrap.eng .skyscraper.visible .bubble {
    top: -150px;
}

#wrap.eng .main #different .cont03 .bg-01 {
    top: 632px;
    left: 368px;
}

#wrap.eng .main #special-price {
    padding-bottom: 5px;
}

#wrap.eng .main #special-price .cont-wrap .cont {
    width: 500px;
}

#wrap.eng .main #special-price .cont-wrap .cont .info {
    background: url("/images/home/images_eng/price_cont_bg01.svg") center 0 no-repeat;
}

#wrap.eng .main #special-price .cont-wrap .cont02 .info {
    background: url("/images/home/images_eng/price_cont_bg02.svg") center 0 no-repeat;
}

#wrap.eng .sub .content-primary section .sub-title {
    line-height: 1.08;
    letter-spacing: -0.05em;
}

#wrap.eng .sub .content-primary section .text p {
    font-weight: bold;
}

#wrap.eng .sub .content-primary .story {
    padding-top: 60px;
}

#wrap.eng .sub .content-primary#ourStory .our #tabcont-02 .bg-01 {
    left: 152px;
    top: -106px;
}

#wrap.eng .field .select-box {
    width: 208px;
}

#wrap.eng .field .select-box .selectric-items {
    width: 248px !important;
}

#wrap.eng .faq-tab-wrap .tab li + li {
    margin-left: 11px;
}

#wrap.eng .faq-tab-wrap .tab li a {
    font-size: 1.25rem;
    font-family: "Overpass", sans-serif;
    line-height: 70px;
}

#wrap.eng .faq-tab-wrap .tab li .btn {
    height: 86px;
    background: url("/images/home/images_eng/tab01@2x.png") center 0 no-repeat;
    background-size: 100% auto;
    font-weight: 600;
}

#wrap.eng .faq-tab-wrap .tab li .btn.type01 {
    width: 86px;
    background-image: url("/images/home/images_eng/tab01@2x.png");
}

#wrap.eng .faq-tab-wrap .tab li .btn.type02 {
    width: 170px;
    background-image: url("/images/home/images_eng/tab02@2x.png");
}

#wrap.eng .faq-tab-wrap .tab li .btn.type03 {
    width: 166px;
    background-image: url("/images/home/images_eng/tab03@2x.png");
}

#wrap.eng .faq-tab-wrap .tab li .btn.type04 {
    width: 172px;
    background-image: url("/images/home/images_eng/tab04@2x.png");
}

#wrap.eng .faq-tab-wrap .tab li .btn.type05 {
    width: 98px;
    background-image: url("/images/home/images_eng/tab05@2x.png");
}

#wrap.eng .faq-tab-wrap .tab li .btn.type06 {
    width: 158px;
    background-image: url("/images/home/images_eng/tab06@2x.png");
}

#wrap.eng .faq-tab-wrap .tab li .btn.type07 {
    width: 220px;
    background-image: url("/images/home/images_eng/tab07@2x.png");
}

#wrap.eng .faq-tab-wrap .tab li.active .btn.type01 {
    width: 84px;
    background-image: url("/images/home/images_eng/tab01_active@2x.png");
}

#wrap.eng .faq-tab-wrap .tab li.active .btn.type02 {
    width: 168px;
    background-image: url("/images/home/images_eng/tab02_active@2x.png");
}

#wrap.eng .faq-tab-wrap .tab li.active .btn.type03 {
    width: 164px;
    background-image: url("/images/home/images_eng/tab03_active@2x.png");
}

#wrap.eng .faq-tab-wrap .tab li.active .btn.type04 {
    width: 170px;
    background-image: url("/images/home/images_eng/tab04_active@2x.png");
}

#wrap.eng .faq-tab-wrap .tab li.active .btn.type05 {
    width: 96px;
    background-image: url("/images/home/images_eng/tab05_active@2x.png");
}

#wrap.eng .faq-tab-wrap .tab li.active .btn.type06 {
    width: 156px;
    background-image: url("/images/home/images_eng/tab06_active@2x.png");
}

#wrap.eng .faq-tab-wrap .tab li.active .btn.type07 {
    width: 218px;
    background-image: url("/images/home/images_eng/tab07_active@2x.png");
}

#wrap.eng .faq-tab-wrap .faq-list li {
    padding-left: 229px;
}

#wrap.eng .faq-tab-wrap .faq-list li .category {
    width: 212px;
}

#wrap.eng .faq-tab-wrap .faq-list li .category span {
    border-radius: 28% 34% 31% 20% / 51% 42% 42% 45%;
}

#wrap.eng input[type=radio] + label {
    margin-right: 30px;
}

#wrap.eng .customer.faq .bg-01 {
    left: 282px !important;
}

#wrap.eng .skyscraper .btn-qna {
    width: 70px;
}

#wrap.eng #buy .price .cont-wrap .cont {
    padding: 0px 57px;
}

#wrap.eng #buy .price .cont-wrap .cont .info {
    min-height: 1190px;
}

#wrap.eng #buy .price .cont-wrap .cont + .cont .summary {
    margin-top: 88px;
}

#wrap.eng .board-view-attach .category {
    line-height: 33px;
    background: url("/images/home/images_eng/category_01.png") 0 0 no-repeat;
    background-size: auto 33px;
}

#wrap.eng .board-view-attach .category.category01 {
    background-image: url("/images/home/images_eng/category_01.png");
}

#wrap.eng #pre-k {
    font-family: "Overpass", sans-serif;
}

#wrap.eng #pre-k .program .content .bg-bubble {
    top: -50px;
    right: -76px;
}

#wrap.eng #pre-k .effect .bg-wrap .bg-01 {
    left: 11px;
}

#wrap.eng #pre-k .effect .bg-wrap .bg-02 {
    top: -28px;
    right: -127px;
}

#wrap.eng #pre-k .effect .tab-wrap .tab li a {
    font-family: "Overpass", sans-serif;
}

#wrap.eng #pre-k .effect .tab-wrap .tab li.active:nth-child(3) a {
    background-image: url("/images/home/images_eng/tab_large_03_actvie.png");
}

#wrap.eng #pre-k .effect .tab-wrap .tab li:nth-child(3) a {
    width: 264px;
    background-image: url("/images/home/images_eng/tab_large_03.png");
}

#wrap.eng #pre-k .curriculum .sub-title .heart {
    left: -48px;
}

#wrap.eng #pre-k .curriculum .buy-btn-area .btn-buy {
    right: 20px;
}

#wrap.eng #ourStory .story .sub-title {
    font-size: 3.875rem;
}

#wrap.eng #kindergarten .expertise .content {
    margin: 120px 0 0;
}

#wrap.eng #kindergarten .expertise .content .item-info {
    width: 48%;
    padding-left: 69px;
}

#wrap.eng #kindergarten .system .content {
    margin-left: 38px;
}

#wrap.eng #kindergarten .system .content .item-info {
    margin-right: 0;
}

#wrap.eng #kindergarten .system .content .item-info .bg-01 {
    right: 17px;
}

#wrap.eng #kindergarten .en-contents .content .thumb .small-01 .label {
    margin-top: -103px;
}

#wrap.eng #kindergarten .en-contents .content .thumb .small-02 {
    top: 88px;
    right: -194px;
}

#wrap.eng #kindergarten .en-contents .content .thumb .small-02 .label {
    margin-top: -19px;
}

#wrap.eng #kindergarten .en-contents .content .thumb span .label {
    margin-top: 12px;
    font-weight: 600;
}

#wrap.eng #kindergarten .en-contents .content .thumb .small-06 {
    top: 328px;
}

#wrap.eng #kindergarten .road-map .btn-buy .ico {
    right: 40px;
}

#wrap.eng #kindergarten .road-map .btn-buy:hover span {
    letter-spacing: 0.05em;
}

@media screen and (max-width: 1160px) {
    #wrap.eng .faq-tab-wrap .faq-list li {
        background: none;
        padding-left: 0;
        padding-right: 0;
    }
    #wrap.eng .faq-tab-wrap .faq-list li .category {
        width: auto;
        left: auto;
        right: 0;
    }
    #wrap.eng .faq-tab-wrap .faq-list li .question {
        padding-right: 134px;
    }
    #wrap.eng .sub .content-primary#ourStory .our #tabcont-02 .bg-01 {
        width: 58px;
        height: 110px;
        left: auto;
        right: 1%;
        top: 45px;
    }
}

@media screen and (max-width: 768px) {
    #wrap.eng .main #different .cont03 .bg-01 {
        top: 502px;
        left: 288px;
    }
    #wrap.eng .sub .content-primary .story {
        padding-top: 0;
    }
    #wrap.eng #ourStory .story .sub-title {
        font-size: 2.875rem;
    }
    #wrap.eng .sub .content-primary#kindergarten .expertise .content {
        margin: 50px 0 0;
    }
    #wrap.eng .sub .content-primary#kindergarten .expertise .content .item-info {
        float: none;
        width: 100%;
        padding-left: 0;
        margin-left: 10px;
    }
    #wrap.eng .sub .content-primary#kindergarten .system .content {
        margin-left: 0;
    }
    #wrap.eng .sub .content-primary#kindergarten .system .content .item-info .bg-01 {
        right: auto;
    }
    #wrap.eng .sub .content-primary#kindergarten .road-map .btn-buy .ico {
        right: 14px;
    }
    #wrap.eng .sub .content-primary#buy .price .cont-wrap .cont {
        width: 100%;
        padding: 0;
        min-height: auto;
    }
    #wrap.eng .sub .content-primary#buy .price .cont-wrap .cont .info {
        min-height: 0;
    }
    #wrap.eng .sub .content-primary#buy .price .cont-wrap .cont + .cont {
        padding-top: 100px;
    }
    #wrap.eng .customer .content-header .section-title .bg-01 {
        left: 262px;
    }
    #wrap.eng .customer.faq .bg-01 {
        left: 102px !important;
    }
    #wrap.eng .sub .content-primary#pre-k .effect .bg-wrap .bg-01 {
        left: -10px;
        top: -240px;
    }
    #wrap.eng .sub .content-primary#pre-k .effect .bg-wrap .bg-02 {
        top: -168px;
        left: 193px;
    }
    #wrap.eng .sub .content-primary#pre-k .curriculum .buy-btn-area {
        padding: 15px 20px;
    }
    #wrap.eng .board-wrap.promotion .tab-wrap .tab li + li a {
        width: 118px;
        height: 70px;
        line-height: 70px;
    }
    #wrap.eng .board-wrap.promotion .tab-wrap .tab li a {
        width: 140px;
        height: 70px;
        line-height: 70px;
    }
    #wrap.eng .board-view-attach .category {
        font-size: 16px;
        height: 35px;
        background-size: auto 35px;
        padding: 0 23px;
        display: inline-block;
        line-height: 35px;
    }
    #wrap.eng .board-view-attach .category.category01 {
        background-image: url("/images/home/images_eng/category_01_m.png");
    }
    #wrap.eng .board-view-attach .category.category02 {
        background-image: url("/images/home/images_eng/category_02_m.png");
        padding: 0 25px;
    }
    #wrap.eng .board-view-attach .category.category03 {
        background-image: url("/images/home/images_eng/category_03_m.png");
    }
    #wrap.eng .board-view-attach .category.category04 {
        background-image: url("/images/home/images_eng/category_04_m.png");
    }
    #wrap.eng .main #special-price .cont-wrap .cont {
        width: 100%;
    }
    #wrap.eng .main #special-price .cont-wrap .cont .info {
        background-size: contain;
    }
    #wrap.eng .sub .content-primary#pre-k .program .content .item-wrap .item-list li {
        width: 78px;
    }
    #wrap.eng .sub .content-primary#pre-k .program .content .item-wrap .item-list li + li {
        margin-left: 10px;
    }
    #wrap.eng #pre-k .effect .tab-wrap .tab li a {
        background-size: 100% 61px;
        font-weight: bold;
        line-height: 1.4;
        padding: 15px 4px;
    }
    #wrap.eng #pre-k .curriculum .sub-title .heart {
        left: auto;
        right: -10px;
        top: -87px;
    }
    #wrap.eng #buy .price .cont-wrap .cont + .cont .summary {
        margin-top: 30px;
    }

    #realk .info dd{
        text-align: left;
        padding-left: 10%;
        box-sizing: border-box;
    }

    #realk .swiper-wrapper{
        width: 100% !important;
    }

}
@media screen and (min-width: 769px) {
    #realk .swiper-wrapper{
        width: 90% !important;
    }
}


@media screen and (max-width: 414px) {
    #wrap.eng .sub .content-primary#pre-k .program .content .item-wrap .item-list li {
        width: 75px;
    }

    .sub .content-primary#pre-k .effect .tab-wrap .swiper-button-next {
        bottom: auto;
        top: 70%;
    }

    .sub .content-primary#pre-k .effect .tab-wrap .swiper-button-prev {
        bottom: auto;
        top: 70%;
    }
}

/*
#container:has(#buy_products){
    padding-top: 140px !important;
    box-sizing: border-box;
}

#buy:has(#buy_products){
    padding: 0px 15%;
    box-sizing: border-box;
}
*/
.gb_floating_bn_wrap{
    position: fixed;
    left: 5%;
    top: 260px;
    z-index: 12;
}

.bpp_evt_popup{
    width: 12vw;
    min-width: 120px;
    cursor: pointer;
}
.bppep_close{
    position: absolute;
    top: -20px;
    right: -20px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background: linear-gradient(to top, #3204fdba, #9907facc);
    border-radius: 5px;
}
.gb_evt_bn_wrap{
    position: relative;
    text-align: center;
}

.gb_evt_bn{
    position: relative;
    max-width: 843px;
    width: 100%;
}

.sc_top_liner{
    background-image: linear-gradient(to right, #e7decb 60%, rgba(255, 255, 255, 0) 0%);
    background-position: top;
    background-size: 16px 2px;
    background-repeat: repeat-x;
    margin-top: 100px !important;
}


.price-title {
    position: relative;
    display: block;
    font-size: 60px;
    line-height: 1.33;
    font-family: "Jua", sans-serif;
    font-weight: normal;
    margin-top: 20px;
    text-align: center;
}


.price-title .effect-buy {
    display: block;
    width: 152px;
    height: 105px;
    position: absolute;
    left: 164px;
    top: -23px;
    background: url("/images/home/Element/effect_buy.png") 0 0 no-repeat;
    background-size: 100% auto;
}


.section-title .bulb {
    display: block;
    width: 188px;
    height: 370px;
    position: absolute;
    right: 100px;
    top: -185px;
    background: url("/images/home/Element/bulb@2x.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.gbs1_max_width{
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 !important;
    box-sizing: border-box;
}


#buy_stage{
    position: relative;
    width: 100%;
}
#buy_stage .bs_wrap{
    position: relative;
    width: 25%;
    padding: 1px;
    box-sizing: border-box;
    float: left;
}
#buy_stage .bs_status{
    position: relative;
    width: 100%;
    background-color: #bfbfbf;
    color:white;
    text-align: center;
    padding: 20px 0px;
    box-sizing: border-box;
}

#buy_products{
    position: relative;
    width: 100%;
    padding: 40px 0px;
    box-sizing: border-box;
}

#buy_products .bp_product{
    position: relative;
    width: 100%;
    box-sizing: border-box;
}



.first_page_products .bp_product{
    border-top: 1px solid #c6c6c6;
}

.first_page_products .bp_product:last-child{
    border-bottom: 1px solid #c6c6c6;
}

.first_page_products .bppdw_top:nth-child(2n){
    padding-top: 20px;
    box-sizing: border-box;
}

#buy_products .bp_product .bpp_full_top{
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 0px;
}

#buy_products .bp_product .bpp_full_top .bpp_title{
    position: relative;
    width: 30%;
    float: left;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    line-height: 72px;
}

#buy_products .bp_product .bpp_full_top .bpp_type{
    position: relative;
    width: 25%;
    float: left;
    text-align: center;
    line-height: 72px;
}

#buy_products .bp_product .bpp_full_top .bpp_price{
    position: relative;
    width: 25%;
    float: left;
    text-align: center;
}

.bpp_ori_pri{
    text-decoration-line: line-through;
    text-decoration-color: red;
    color: #bfbfbf;
}

.bpp_dis_pri{
    font-weight: bold;
}
.bpppri_lh{
    line-height: 72px;
}

.bpppri_lh_pen{
    line-height: 40px;
}

#buy_products .bp_product .bpp_full_top .bpp_select{
    position: relative;
    width: 20%;
    float: left;
    text-align: center;
    box-sizing: border-box;
    margin-top: 16px;
}

#buy_products .bp_product .bpp_full_info{
    position: relative;
    width: 100%;
    display: none;
}

#buy_products .bp_product .bpp_full_info .bppfi_hl{
    position: relative;
    width: 100%;
    text-align: center;
    color: red;
    margin-top: 20px;
}

#buy_products .bp_product .bpp_full_info .bppfb_detail{
    position: relative;
    width: 100%;
    padding-bottom: 20px;
    box-sizing: border-box;
}

#buy_products .bp_product .bpp_full_info .bppfb_detail .bppfbd_option_title{
    position: relative;
    width: 15%;
    float: left;
    text-align: center;
    line-height: 173px;
}

#buy_products .bp_product .bpp_full_info .bppfb_detail .bppfbd_option_desc{
    position: relative;
    width: 60%;
    float: left;
}

.course_type{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.course_type:nth-child(2){
    margin-top: 10px;
}

#buy_products .bp_product .bpp_full_info .bppfb_detail .bppfbd_option_extra{
    position: relative;
    width: 25%;
    float: left;
    padding-top: 82px;
    box-sizing: border-box;
}

#buy_products .bp_product .bpp_full_info .bppfb_detail .bppfbd_option_extra .bppfbdoe_img{
    position: relative;
    width: 40%;
    float: left;
    text-align: right;
    box-sizing: border-box;
}

#buy_products .bp_product .bpp_full_info .bppfb_detail .bppfbd_option_extra .bppfbdoe_name{
    position: relative;
    width: 60%;
    float: left;
    padding-top: 30px;
    box-sizing: border-box;
}
#buy_products .bp_product .bpp_title{
    position: relative;
    width: 30%;
    float: left;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    line-height: 224px;
}

#buy_products .bp_product .bpp_detail{
    position: relative;
    width: 70%;
    float: left;
}

#buy_products .bp_product .bpp_detail{
    position: relative;
    width: 70%;
    float: left;
}

#buy_products .bp_product .bpp_detail .bppd_wrap{
    position: relative;
    width: 100%;
}

#buy_products .bp_product .bpp_detail .bppd_wrap{
    position: relative;
    width: 100%;
}

#buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_top{
    position: relative;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
}

#buy_products .bp_product .bpp_detail .bppd_wrap .bpp_tl{
    padding-top: 19px !important;
    border-top: 1px solid #c6c6c6;
}


#buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_top .bppdwt_type{
    position: relative;
    --widthA: 100%;
    --widthB: calc(var(--widthA) / 14);
    --widthC: calc(var(--widthB) * 5);
    width: var(--widthC);
    line-height: 72px;
    float: left;
    text-align: center;
}

#buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_top .bppdwt_price{
    position: relative;
    --widthA: 100%;
    --widthB: calc(var(--widthA) / 14);
    --widthC: calc(var(--widthB) * 5);
    width: var(--widthC);
    float: left;
    text-align: center;
}

#buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_top .bppdwt_select{
    position: relative;
    --widthA: 100%;
    --widthB: calc(var(--widthA) / 14);
    --widthC: calc(var(--widthB) * 4);
    width: var(--widthC);
    float: left;
    text-align: center;
    margin-top: 16px;
}

#buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot{
    position: relative;
    width: 100%;
    display: none;
}

#buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot .bppdwb_desc{
    position: relative;
    --widthA: 100%;
    --widthB: calc(var(--widthA) / 14);
    --widthC: calc(var(--widthB) * 9);
    width: var(--widthC);
    float: left;
    text-align: center;
    padding: 20px 0px;
    box-sizing: border-box;
}
#buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot .bppdwb_extra{
    position: relative;
    --widthA: 100%;
    --widthB: calc(var(--widthA) / 14);
    --widthC: calc(var(--widthB) * 5);
    width: var(--widthC);
    float: left;
    text-align: center;
    padding-top: 119.5px;
    box-sizing: border-box;
}

#buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot .bppdwb_desc .bppdwbd_row{
    position: relative;
    width: 100%;
}

#buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot .bppdwb_desc .bppdwbd_row .bppdwbdr_title{
    position: relative;
    width: 100%;
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    box-sizing: border-box;
}

#buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot .bppdwb_desc .bppdwbd_row .bppdwbdr_prods{
    position: relative;
    width: 100%;
    text-align: left;
    word-break: break-word;
}

#buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot .bppdwb_extra .bppdwbe_img{
    position: relative;
    width: 40%;
    float: left;
    text-align: right;
    box-sizing: border-box;
}

#buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot .bppdwb_extra .bppdwbe_name{
    position: relative;
    width: 60%;
    float: left;
    padding-top: 30px;
    box-sizing: border-box;
    text-align: left;
}
#buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot .bppdwb_monthly_desc{
    padding: 20px 0px;
    box-sizing: border-box;
}

#buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot .bppdwb_monthly_desc .bppdwbmd_title{
    position: relative;
    width: 100%;
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;

}

#buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot .bppdwb_monthly_desc .bppdwbmd_prods{
    position: relative;
    width: 100%;
    text-align: left;
    word-break: break-word;
}

.goods_select_btn{
    border-radius: 22px;
    line-height: 24px;
    font-size: 24px;
    background-color: #bfbfbf;
    color: white;
    padding: 8px;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    width: 50%;
    min-width: 135px;
    margin: 0 auto;
}

.gsb_marginer{
    box-sizing: border-box;
}

#buy_products .bp_product .bpp_pen{
    position: relative;
    width: 100%;
    padding: 20px 0px;
}

#buy_products .bp_product .bpp_pen .bppp_title{
    position: relative;
    width: 30%;
    float: left;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    line-height: 40px;
}

#buy_products .bp_product .bpp_pen .bppp_type{
    position: relative;
    width: 25%;
    float: left;
    text-align: center;
    line-height: 40px;
}

#buy_products .bp_product .bpp_pen .bppp_price{
    position: relative;
    width: 25%;
    float: left;
    text-align: center;
}

#buy_products .bp_product .bpp_pen .bppp_select{
    position: relative;
    width: 20%;
    float: left;
    text-align: center;
}

#buy_products .bp_product .bpp_pen .bppp_select .bppps_chk{
    position: relative !important;
    width: 20px;
    height: 20px;
    margin: 0 auto !important;
    opacity: initial !important;
    cursor: pointer;
}

#buy_address{
    display: none;
    position: relative;
}

#buy_address .tbl{
    margin: 0 auto !important;
}


#buy_payment{
    display: none;
    position: relative;
}
#buy_payment .bppfb_detail{
    padding: 0px 7.5%;
    box-sizing: border-box;
}

#buy_payment .bpm_price{
    position: relative;
    width: 100%;
    border-bottom: 2px solid #c2c2c2;
}

#buy_payment .bpm_price .bpmp_title{
    position: relative;
    float: left;
    width: 20%;
    text-align: left;
    font-size: 26px;
}

#buy_payment .bpm_price .bpmp_num{
    position: relative;
    float: left;
    width: 60%;
    text-align: right;
}

#buy_payment .bpm_price .bpmp_num #bpmpn_amount{
    position: relative;
    color: #c0504d;
    font-size: 26px;
}

#buy_payment .bpm_price .bpmp_num #bpmpn_currency{
    position: relative;
    color: #c0504d;
    font-size: 26px;
}

#buy_payment .bpm_price .bpmp_inst{
    position: relative;
    float: left;
    width: 20%;
    text-align: right;
    font-size: 26px;
}

.bp_staging{
    margin-top: 20px;
    position: relative;
    width: 100%;
}
.bp_staging .bgs_wrap{
    position: relative;
    width: 50%;
    box-sizing: border-box;
    float: left;
}
.bp_staging .bgs_wrap:nth-child(1){
    text-align: right;
    padding-right: 40px;

}
.bp_staging .bgs_wrap:nth-child(2){
    text-align: left;
    padding-left: 40px;
}
.bgs_btn{

    position: relative;
    width: 180px;
    height: 70px;
    line-height: 70px;
    display: inline-block;
    font-family: "Jua", sans-serif;
    background: url(/images/home/btn_more@2x.png) center center no-repeat;
    background-size: auto 68px;
    text-align: center;
    transition: right 0.25s ease-in-out;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.bgsbtn_arrow{
    display: inline-block;
    width: 38px;
    height: 38px;
    background: url(/images/home/ok@2x.png) 0 center no-repeat;
    background-size: 38px auto;
    vertical-align: top;
    margin-top: 16px;
    transition: right 0.25s ease-in-out;
    margin-left: 10px;
}


.bgsbtn_arrow_left{
    display: inline-block;
    width: 38px;
    height: 38px;
    background: url(/images/home/goods_arrow_left.png) 0 center no-repeat;
    background-size: 38px auto;
    vertical-align: top;
    margin-top: 16px;
    transition: right 0.25s ease-in-out;
    margin-left: 10px;
}


#buy_payment .bp_product{

}

#buy_finish{
    display: none;
    position: relative;
}

#buy_finish .tbl{
    margin: 0 auto !important;
}


#buy_modal{
    z-index: 20;
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
    top:0;
    background-color: rgba(0, 0, 0, 0.2);
}

#buy_modal .bm_inner_box{
    position: absolute;
    width: 400px;
    border-radius: 5px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    top: 150px;
    background-color: white;
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s linear;
    transform-style: preserve-3D;
    transform-origin: center;
}

.bm_inner_box_scale {
    transform:translateX(-50%) scale(1.0) !important;
}

#buy_modal .bm_inner_box .bmi_notice{
    text-align: center;
    margin-top: 50px;
}

#buy_modal .bm_inner_box .bmib_bot{
    position: relative;
    width: 100%;
    margin-top: 200px;
    text-align: center;
}

#buy_modal .bm_inner_box .bmib_bot .bmibb_close{
    position: relative;
    padding: 5px 10px;
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
    border-radius: 5px;
    font-size: 20px;
    line-height: 20px;
    background-color: #76e;
    margin: 0 auto;
    color: white;
}

#buy input[type=checkbox] {
    opacity: initial !important;
    height: 16px;
    width: 16px;
}

.automatic_payment{
    width: 100% !important;
}

.caution_list li{
    font-weight: unset !important;
}

.btn_wrap .btn {display: flex;justify-content: center;align-items: center; width: 300px;height: 50px;color:#fff;font-size: 14px;font-weight: 700;background-color: #e8444a;margin:0 5px;}
.btn_wrap .btn.apply {width: 150px;}
.btn_wrap .btn.cancel {width: 150px;background-color: #999;}

@media screen and (max-width: 1400px) {
    .slider_container {
        max-width: 1024px;
    }
}


@media screen and (max-width: 1160px) and (max-width: 1200px) {
    .price-title .effect-buy {
        left: 0;
    }
}


@media screen and (max-width: 1160px) {
    /* S:review */
    .review .content-body {
        max-width: 92%;
        margin-left: auto;
        margin-right: auto;
    }

    .border_block {
        display: block;
        text-align: center;
        margin: 5rem auto;
    }

    .border_block .content_title {
        font-size: 1.7rem;
        letter-spacing: -2px;
    }

    .border_block .content_desc {
        font-size: 1.3rem;
    }

    .border_block .btn_rounded {
        margin-top: 0.7em;
    }
    /* E:review */
}

@media screen and (max-width: 850px) {
    /* S:review */
    #review .swiper_container {
        padding: 1em 1.5em 4.5em 1.5em;
    }
    /* E:review */
}


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

    .price-title {
        margin-top: 0;
        text-align: left;
        font-size: 46px;
    }
    .price-title .effect-buy {
        display: none;
    }
    .section-title .bulb {
        width: 92px;
        height: 180px;
        right: auto;
        left: 228px;
        top: -108px;
    }

    .gb_floating_bn_wrap{
        position: fixed;
        left: 5%;
        top: unset;
        bottom: 120px;
        z-index: 12;
    }

    .bpp_evt_popup{
        width: 12vw;
        min-width: 90px;
        cursor: pointer;
    }

    /* S:review */
    .review_section {
        padding: 120px 0 0;
    }

    .review_list_wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .review_section .section-title {
        font-size: 2.7rem;
    }

    .review_section .summary {
        font-size: 16px;
    }

    .review_section .review_box .author {
        font-size: 1.15rem;
    }

    .review_section .review_box .review_text {
        font-size: 1rem;
    }
    /* E:review */
}

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


    .btn_wrap .btn {width: 100%;margin:0 5px;}
    .btn_wrap .btn.apply {width: 48%;}
    .btn_wrap .btn.cancel {width: 48%;}

    #kYearContSwiper .kycs2col1{

        padding-left: 5%;
        box-sizing: border-box;
    }
    #kYearContSwiper .kycs2col2{

        padding-left: 5%;
        box-sizing: border-box;
    }
    .br_hide_mobile{
        display: none;
    }

    /*
    #container:has(#buy_products){
        padding-top: 50px !important;
        box-sizing: border-box;
    }

    #buy:has(#buy_products){
        padding: 0;
        box-sizing: border-box;
    }
    */

    .bp_staging{
        margin-top: 20px;
        position: relative;
        width: 100%;
    }
    .bp_staging .bgs_wrap{
        position: relative;
        width: 50%;
        box-sizing: border-box;
        float: left;
    }
    .bp_staging .bgs_wrap:nth-child(1){
        text-align: right;
        padding-right: 40px;

    }
    .bp_staging .bgs_wrap:nth-child(2){
        text-align: left;
        padding-left: 40px;
    }
    .bgs_btn{

        position: relative;
        width: 128.5px;
        height: 50px;
        line-height: 50px;
        display: inline-block;
        font-family: "Jua", sans-serif;
        background: url(/images/home/btn_more@2x.png);
        background-size: contain;
        text-align: center;
        transition: right 0.25s ease-in-out;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .bgsbtn_arrow{
        display: inline-block;
        width: 30px;
        height: 30px;
        background: url(/images/home/ok@2x.png);
        background-size: contain;
        vertical-align: top;
        margin-top: 10px;
        transition: right 0.25s ease-in-out;
        margin-left: 10px;
    }


    .bgsbtn_arrow_left{
        display: inline-block;
        width: 30px;
        height: 30px;
        background: url(/images/home/goods_arrow_left.png);
        background-size: contain;
        vertical-align: top;
        margin-top: 10px;
        transition: right 0.25s ease-in-out;
        margin-left: 10px;
    }



    .gbs1_max_width{
        max-width: initial;
        margin: 0 auto;
    }

    .bs_status div {
        font-size: 15px;
    }

    .first_page_products{
        padding: 0px !important;
    }
    #buy_products .bp_product{
        padding: 20px 0px;
    }

    #buy_products .bp_product .bpp_full_top .bpp_title {
        width: initial;
        float: initial;
        margin-bottom: 14px;
        line-height: initial;
    }

    #buy_products .bp_product .bpp_detail{
        float: initial;
        width: initial;
    }
    #buy_products .bp_product .bpp_title {
        width: initial;
        float: initial;
        margin-bottom: 14px;
        line-height: initial;
    }

    #buy_products .bp_product .bpp_pen .bppp_title {
        width: initial;
        float: initial;
        margin-bottom: 14px;
    }

    #buy_products .bp_product .bpp_full_top .bpp_price  {
        width: 30%;
    }

    #buy_products .bp_product .bpp_full_top .bpp_price {
        width: initial;
    }
    #buy_products .bp_product .bpp_full_top .bpp_type{
        text-align: left !important;
        padding-left: 20px;
        box-sizing: border-box;
    }

    #buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_top .bppdwt_type{
        width: 30%;
        text-align: left !important;
        padding-left: 20px;
        box-sizing: border-box;

    }
    #buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_top .bppdwt_price{
        width: initial;
    }

    #buy_products .bp_product .bpp_full_top .bpp_select{
        float: right;
        margin-right: 46px;
        margin-top: initial;
    }
    #buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_top .bppdwt_select{
        float: right;
        margin-top: initial;
        margin-right: 20px;
    }
    #buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot .bppdwb_desc .bppdwbd_row .bppdwbdr_title{
        padding-left: 20px;
        box-sizing: border-box;
    }
    #buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot .bppdwb_desc .bppdwbd_row .bppdwbdr_prods{
        padding-left: 20px;
        box-sizing: border-box;
    }
    #buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot .bppdwb_monthly_desc .bppdwbmd_title{
        padding-left: 20px;
        box-sizing: border-box;
    }
    #buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot .bppdwb_monthly_desc .bppdwbmd_prods{
        padding-left: 20px;
        box-sizing: border-box;
    }

    #buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_top .mobile_sb_mg{
        margin-top: 16px !important;
    }

    #buy_products .bp_product .bpp_pen .bppp_select{
        float: right;
        margin-right: 50px;
    }

    .goods_select_btn{
        min-width: 120px;
        font-size: 16px;
    }

    .bgs_btn{
        font-size: 14px;
    }

    .bppdwbdr_title{
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .bppdwbmd_title{
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
    }
    #buy_products .bp_product .bpp_full_info .bppfb_detail .bppfbd_option_title{
        width: initial;
        float: initial;
        line-height: initial;
    }
    #buy_products .bp_product .bpp_full_info .bppfb_detail .bppfbd_option_extra{
        width: 40%;
        text-align: center;
    }
    #buy_products .bp_product .bpp_full_info .bppfb_detail .bppfbd_option_extra .bppfbdoe_img{
        float: initial;
        width: 100%;
        text-align: center !important;
        padding: 0;
    }
    #buy_products .bp_product .bpp_full_info .bppfb_detail .bppfbd_option_extra .bppfbdoe_name{
        float: initial;
        width: 100%;
    }

    #buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot .bppdwb_extra .bppdwbe_img{
        float: initial;
        width: 100%;
        text-align: center !important;
        padding: 0;
    }
    #buy_products .bp_product .bpp_detail .bppd_wrap .bppdw_bot .bppdwb_extra .bppdwbe_name{
        float: initial;
        width: 100%;
        padding-top: 30px;
        text-align: center;
    }

    .bppfbd_option_title{
        word-break: break-all;
        font-size: 20px;
        font-weight: bold;
    }

    .course_type{
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
        padding-left: 20px;
        box-sizing: border-box;
    }

    .course_type:nth-child(2){
        margin-top: 10px;
    }

    #buy_products .bp_product .bpp_full_info .bppfb_detail .bppfbd_option_desc .bppfbdod_row{
        padding-left: 20px;
        box-sizing: border-box;
    }


    .tbl .input_p.card{
        width: 70px !important;
    }
    input[type='text'], input[type='password']{
        width: 80% !important;
    }

    #mobile_input_card_bday{
        width: 100px ! important;
    }

    #buy_products .bp_product .bpp_full_info .bppfi_hl{
        text-align: left;
        padding-left: 20px;
        box-sizing: border-box;
    }

    .bm_inner_box{
        width: 80% !important;
    }
    #buy_modal .bm_inner_box .bmi_notice{
        text-align: left;
    }


    #buy_payment .bpm_price .bpmp_num{
        width: 40%;
    }

    #buy_payment .bpm_price .bpmp_inst{
        width: 40%;
    }

    /* S:review */
    .m_block {
        display: block;
    }

    .review_list_wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    .review_section .review_box .author {
        font-size: 1rem;
    }

    .review_section .review_box .review_text {
        font-size: 0.95rem;
    }
    /* E:review */
}


/* iphone SE ~ */
@media screen and (max-width: 375px) {
    /* S: review */
    .board-wrap .content-header p {
        font-size: 1.45rem;
    }

    .border_block .content_title {
        font-size: 1.5rem;
    }
    /* E: review */
}



/*# sourceMappingURL=style.css.map */