/* CSS Document */
@charset "utf-8";
/******************
    google font Noto Sans KR
    https://fonts.google.com/noto/specimen/Noto+Sans+KR?subset=korean&selection.family=Nanum+Gothic&noto.script=Kore
******************/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");

:root {
	--font-family: "Noto Sans KR", sans-serif;
	--font-family-code: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
	--k-header-transform: 0.3s ease;
	--k-c-transform: 0.3s ease;
	--k-home-banner-flow-transform: 0.5s ease;
	--k-menu-transform: 0.3s ease;
	--k-footer-transform: 0.3s ease;
    --k-video-transform: 1s ease;
	--k-menu-opacity: opacity 0.3s ease !important;
	--k-icon-dark: none;
	--k-icon-light: block;
	--k-sidebar-width: 300px;
	--k-sidebar-mini-left: -220px;
	--k-sidebar-mini-width: 80px;

	--k-header-bg: rgba(255, 255, 255, 0);
	--k-header-bg-sticky: rgba(255, 255, 255, 0.9);
	--k-header-text: #323232;
	--k-header-link: var(--k-header-text);

	--k-brand: #3eaf7c;
	--k-brand-light: #4abf8a;
	--k-bg: #f6f7fa;
	--k-bg-white: #ffffff;
	--k-bg-light: #f3f4f5;
	--k-bg-lighter: #eeeeee;
	--k-bg-dark: #ebebec;
	--k-bg-darker: #e6e6e6;
	--k-bg-arrow: #cccccc;
    --k-bg-blue: #7ca3fe;
	--k-text: #2c3e50;
	--k-text-accent: var(--k-brand);
	--k-text-light: #3a5169;
	--k-text-lighter: #4e6e8e;
	--k-text-lightest: #6a8bad;
	--k-text-quote: #999999;
	--k-border: #eaecef;
	--k-border-dark: #dfe2e5;
	--k-tip: #42b983;
	--k-tip-bg: var(--k-bg-light);
	--k-tip-title: var(--k-text);
	--k-tip-text: var(--k-text);
	--k-tip-text-accent: var(--k-text-accent);
	--k-warning: #ffc310;
	--k-warning-bg: #fffae3;
	--k-warning-bg-light: #fff3ba;
	--k-warning-bg-lighter: #fff0b0;
	--k-warning-border-dark: #f7dc91;
	--k-warning-details-bg: #fff5ca;
	--k-warning-title: #f1b300;
	--k-warning-text: #746000;
	--k-warning-text-accent: #edb100;
	--k-warning-text-light: #c1971c;
	--k-warning-text-quote: #ccab49;
	--k-danger: #f11e37;
	--k-danger-bg: #ffe0e0;
	--k-danger-bg-light: #ffcfde;
	--k-danger-bg-lighter: #ffc9c9;
	--k-danger-border-dark: #f1abab;
	--k-danger-details-bg: #ffd4d4;
	--k-danger-title: #ed1e2c;
	--k-danger-text: #660000;
	--k-danger-text-accent: #bd1a1a;
	--k-danger-text-light: #b5474d;
	--k-danger-text-quote: #c15b5b;
	--k-details-bg: #eeeeee;
	--k-badge-tip: var(--k-tip);
	--k-badge-warning: #ecc808;
	--k-badge-warning-text: var(--k-bg);
	--k-badge-danger: #dc2626;
	--k-badge-danger-text: var(--k-bg);
	--t-color: 0.3s ease;
	--t-transform: 0.3s ease;
	--code-bg-color: #282c34;
	--code-hl-bg-color: rgba(0, 0, 0, 0.66);
	--code-ln-color: #9e9e9e;
	--code-ln-wrapper-width: 3.5rem;

	--navbar-height: 3.6rem;
	--navbar-padding-v: 0.7rem;
	--navbar-padding-h: 1.5rem;
    --k-bg-navbar: var(--k-bg);
    --k-nav-sub-bg: var(--k-bg-white);
    --k-nav-sub-active-bg: #f6f7fa;

    --k-bg-sidebar: var(--k-bg);
	--sidebar-width: 20rem;
	--sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);


	--content-width: 740px;
	--homepage-width: 960px;
	--k-icon-dark: none;
	--k-icon-light: inline;

	--k-arrow-color: #323232;
	--k-arrow-color-hover: rgba(255, 255, 255, 0.5);
	--k-arrow-color-active: rgba(255, 255, 255, 0.7);
	--k-arrow-color-disabled: #323232;
	--k-arrow-color-light: #323232;
	--k-arrow-color-light-hover: #323232;
	--k-arrow-color-light-active: #323232;
	--k-arrow-color-light-disabled: #323232;

	--k-arrow-color-bg: rgba(255, 255, 255, 0.3);
	--k-arrow-color-bg-hover: rgba(255, 255, 255, 0.5);
	--k-arrow-color-bg-active: rgba(255, 255, 255, 0.7);
	--k-arrow-color-bg-disabled: rgba(255, 255, 255, 0.2);

	--k-banner-bg1: #bdd1ec;
	--k-banner-bg2: #eedec7;
	--k-banner-bg3: #d0a5ea;
	--k-banner-bg4: #9ca7e5;
	--k-banner-bg5: #fff6bd;

	--k-color-pink: #f4056a;
    --k-color-pink-light : #ffeff0;
	--k-color-purple: #5350b7;
    --k-color-pupple-light : #f1f0ff;
    --k-color-dark-light: #787878;
    --k-color-dark-light-hover: #999999;
    --k-color-deeppurple: #5350b7;
    --k-color-deeppurple-hover: #6461c4;
    --k-color-deeppurple-light: #f2f1ff;
    --k-color-gray: #b2bab7;
    --k-color-gray-light: #efeef3;


	--k-color-white: #ffffff;
    --k-color-white-light: #e0e0e6;

	--k-color-blue: #0080ff;
	--k-color-green: #00ff00;
	--k-color-yellow: #ffff00;
	--k-color-orange: #ffa500;

    --k-star-bg: #4e64ed;
    --k-line-gray: #e0e0e6;
    --k-color-dark: #323232;

    --k-mini-banner-bg: #4a488f;
    --k-class-Popularbox-bg: #e9dfff;

    --k-todayPopup-dots-bg: rgba(0, 0, 0, 0.3);

    --k-home-section-2-bg: #f6f7fa;
    --k-home-section-3-bg: #ffe1e3;
    --k-home-section-4-bg: #ede5ff ;
    --k-home-section-5-bg: #262629;
    --k-home-section-6-bg: #303030;
    --k-home-section-7-bg: #f6f7fa;

    --k-footer-bg: #f6f7fa;

    --k-hover-bg: rgba(0, 0, 0, 0.6);

    --k-book-bg: #ebebf0;

    --k-session1sub-transition : all 1s ease-in-out;
}

/*
    text color
*/
.text-pink {
	color: var(--k-color-pink);
}
.text-purple {
	color: var(--k-color-purple);
}

/*
    Layout
*/

html,
body {
	padding: 0;
	margin: 0;
	background-color: var(--k-bg);
	transition: background-color var(--t-color);
}
html {
	font-size: 16px;
}
body {
	font-family: var(--font-family);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 1rem;
	background-color: var(--k-bg);
	color: var(--k-text);
    scrollbar-width: thin;
    scrollbar-color: var(--k-line-gray) transparent;

}


body::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-track {
    background: transparent;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--k-line-gray);
    border-radius: 3px;
}


/*
    Header
*/

.home-header-bg {
	background-color: var(--k-header-bg-sticky) !important;
	transition-delay: var(--k-header-transform) !important;
}

.home-header {
	background-color: var(--k-header-bg);
	color: var(--k-header-text);
}
.home-header .nav-link {
	color: var(--k-header-link);
}

#bdNavbar {
	background-color: var(--k-bg);
    width: 100vw;
}
.bd-navbar {
	padding: 0.75rem 0;
}
@media (max-width: 991.98px) {
	.bd-navbar .bd-navbar-toggle {
		width: 4.25rem;
	}
}
#bdNavbarOffcanvasLabel {
	font-size: 1.25rem;
	color: var(--k-header-text) !important;
}

.bd-navbar .navbar-toggler {
	padding: 0;
	margin-right: -0.5rem;
	border: 0;
}

.bd-navbar .navbar-toggler:first-child {
	margin-left: -0.5rem;
}

.bd-navbar .navbar-toggler .bi {
	width: 1.5rem;
	height: 1.5rem;
}

.bd-navbar .navbar-toggler:focus {
	box-shadow: none;
}

.bd-navbar .navbar-brand {
	color: #fff;
	transition: transform 0.2s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.bd-navbar .navbar-brand {
		transition: none;
	}
}

.bd-navbar .navbar-toggler,
.bd-navbar .nav-link {
	padding-right: 0.25rem;
	padding-left: 0.25rem;
}

.bd-navbar .navbar-toggler:hover,
.bd-navbar .navbar-toggler:focus,
.bd-navbar .nav-link:hover,
.bd-navbar .nav-link:focus {
	color: var(--k-header-text);
}

.bd-navbar .navbar-toggler.active,
.bd-navbar .nav-link.active {
	font-weight: 600;
	color: var(--k-header-text);
}

.bd-navbar .navbar-nav-svg {
	display: inline-block;
	vertical-align: -0.125rem;
}

.bd-navbar .offcanvas-lg {
	background-color: var(--k-header-bg);
	border-left: 0;
}

@media (max-width: 991.98px) {
	.bd-navbar .offcanvas-lg {
		box-shadow: var(--bs-box-shadow-lg);
	}
}

.bd-navbar .dropdown-toggle:focus:not(:focus-visible) {
	outline: 0;
}

.bd-navbar .dropdown-menu {
	--bs-dropdown-min-width: 12rem;
	--bs-dropdown-padding-x: 0.25rem;
	--bs-dropdown-padding-y: 0.25rem;
	--bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), 0.1);
	--bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
	--bs-dropdown-font-size: 0.875rem;
	font-size: 0.875rem;
	border-radius: 0.5rem;
	box-shadow: var(--bs-box-shadow);
}

.bd-navbar .dropdown-menu li + li {
	margin-top: 0.125rem;
}

.bd-navbar .dropdown-menu .dropdown-item {
	border-radius: 0.25rem;
}

.bd-navbar .dropdown-menu .dropdown-item:active .bi {
	color: inherit !important;
}

.bd-navbar .dropdown-menu .active {
	font-weight: 600;
}

.bd-navbar .dropdown-menu .active .bi {
	display: block !important;
}

.bd-navbar .dropdown-menu-end {
	--bs-dropdown-min-width: 8rem;
}

[data-bs-theme="dark"] .bd-navbar {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}


/******************
    offcanvasHeader
******************/

header .offcanvasHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
}
header .offcanvasHeader svg {
    width: 20px;
    height: 20px;
}


header .offcanvasHeader-left {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 1;
    flex-basis: 60px;
}
header .offcanvasHeader-left .btn-closeNavbar {
    border: 0;
    background-color: transparent;
    color: var(--k-text);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 1;
    flex-basis: 60px;
}

header .offcanvasHeader-center {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 1;
    flex-basis: 100%;
}


header .offcanvasHeader-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 1;
    flex-basis: 60px;
}
header .offcanvasHeader-right #top_search {
    margin-right: 15px;
}

/* offcanvas-login */
header .offcanvas-login-not-login {
    display: block;
    padding: 15px;
}
header .offcanvas-login-not-login #btn-login ,
header .offcanvas-login-not-login #btn-join {
    display: inline-block;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 15px;
}
header .offcanvas-login-not-login #btn-login {
    background-color: var(--k-color-pink);
    color: var(--k-color-white);
    border: 1px solid var(--k-color-pink);
    margin-right: 15px;
}
header .offcanvas-login-not-login #btn-join {
    background-color: var(--k-color-white);
    border: 1px solid var(--k-color-dark);
    color: var(--k-color-dark);
}

header .offcanvas-login-login {
    display: block;
    padding: 15px;
}
header .offcanvas-login-member-card {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 15px;
}
header .offcanvas-login-member-card .offcanvas-login-member-card-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
}
header .offcanvas-login-member-card .offcanvas-login-member-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
header .offcanvas-login-member-card .offcanvas-login-member-card-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-right: 15px;
}
header .offcanvas-login-member-card .offcanvas-login-member-card-info p {
    margin-bottom: 0px;
    font-size: 20px;
    color: var(--k-text-light);
}
header .offcanvas-login-member-card .offcanvas-login-member-card-info #offcanvas-login-member-card-info-name {
    color: var(--k-color-pink);
    font-weight: 600;
    text-decoration: underline;
}
header .offcanvas-login-member-card .offcanvas-login-member-card-info .offcanvas-login-member-card-info-logout {
    font-size: 14px;
    color: var(--k-text-light);
    text-decoration: none;
}

header .offcanvas-count {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 15px;
}
header .offcanvas-count .offcanvas-count-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-basis: 33.3333%;
    font-size: 14px;
    color: var(--k-text-light);

}
header .offcanvas-count .offcanvas-count-item span {
    font-size: 24px;
    font-weight: 700;
    line-height: 1rem;
    color: var(--k-text-light);
}
header .offcanvas-count .offcanvas-count-item .offcanvas-alert-count .offcanvas-alert-text {
    font-size: 14px;
    color: var(--k-text);
}


header .offcanvas-today-class-alert {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 15px;
    background-color: var(--k-color-pink);
    color: var(--k-color-white);
    border-radius: 20px;
    padding: 10px;
}
header .offcanvas-today-class-alert .offcanvas-today-class-alert-icon {
    flex-basis: 30px;
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
header .offcanvas-today-class-alert .offcanvas-today-class-title {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
    text-align: left;
    text-wrap: nowrap;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
}
header .offcanvas-today-class-alert .offcanvas-today-classin {
    flex-basis: 90px;
    flex-shrink: 0;
    flex-grow: 0;
    text-align: right;
}
header .offcanvas-today-class-alert .offcanvas-today-classin a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--k-color-white);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/*
    #bdNavbar
*/

header #bdNavbar.show .offcanvas-body hr {
    display: none;
}
header #bdNavbar.show ul.navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    border-top: 1px solid var(--k-border);
}
header #bdNavbar.show ul.navbar-nav .nav-item {
    display: block;
    width: 100%;
}
header #bdNavbar.show ul.navbar-nav .nav-item + .nav-item {
    border-top: 1px solid var(--k-border);
}
header #bdNavbar.show ul.navbar-nav .nav-item .nav-link-sub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    color: var(--k-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
}
header #bdNavbar.show ul.navbar-nav .nav-item .nav-link-sub a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 8px;
    border-radius: 10px;
    color: var(--k-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
}
header #bdNavbar.show #offcanvas-hidden {
    display: none;
}


header .navbar-nav .nav-item {
    position: relative;
    display: block;
}
header .navbar-nav .nav-item .nav-link-sub {
    display: block;
}

@media (min-width: 576px) {

    #bdNavbar {
        width: 60%;
    }

    header .navbar-nav .nav-item .nav-link-sub {
        display: block;
    }



}
@media (min-width: 768px) {
    #bdNavbar {
        width: 50%;
    }



}

@media (min-width: 992px) {
    #bdNavbar {
        width: 100%;
    }
    header .offcanvas-header ,
    header .offcanvas-login {
        display: none;
    }
   

    header .navbar-nav .nav-item {
        position: relative;
    }
    header .navbar-nav .nav-item .nav-link-sub {
        display: none;
    }

    
    


    header .navbar-nav .nav-item:hover .nav-link-sub {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        position: absolute;
        top: 100%;
        left: 0;
        width: 200px;
        background-color: var(--k-nav-sub-bg);
        z-index: 1000;
        padding: 14px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    header .navbar-nav .nav-item .nav-link-sub a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        color: var(--k-text);
        text-decoration: none;
        font-size: 14px;
        font-weight: 400;
        transition: padding-left 0.2s ease-in-out;
    }
    header .navbar-nav .nav-item .nav-link-sub a:hover {
        padding-left: 20px;
    }
    header .navbar-nav .nav-item .nav-link-sub a.active {
        background-color: var(--k-nav-sub-active-bg);
        justify-content: center;
    }
    header .navbar-nav .nav-item .nav-link-sub a.active:hover {
        padding-left: 10px;
    }



}

@media (min-width: 1200px) {

}

@media (min-width: 1400px) {

}









/*
    header login
*/

#header-login {
	color: var(--k-text);
    border: 1px solid var(--k-text);
    border-radius: 17px 17px 0 17px;
    font-size: 14px;
    line-height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header-join {
	color: var(--k-color-white);
    border: 1px solid var(--k-color-pink);
    background-color: var(--k-color-pink);
    border-radius: 17px 17px 17px 0;
    font-size: 14px;
    line-height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
    Content
*/

#content {
	padding: 0;
	margin-top: -64px;
}

.home-section {
	padding: 0;
	position: relative;
}

/*
    Home Banners
*/
.home-section.home-banners {
	width: 100%;
	height: 500px;
	overflow: hidden;
}
@media (min-width: 576px) {
    .home-section.home-banners {
        height: 480px;
    }
}
@media (min-width: 768px) {
    .home-section.home-banners {
        height: 380px;
    }
}
@media (min-width: 992px) {
    .home-section.home-banners {
        height: 450px;
    }
}
@media (min-width: 1200px) {
    .home-section.home-banners {
        height: 530px;
    }
}
@media (min-width: 1400px) {
    .home-section.home-banners {
        height: 580px;
    }
}
.home-section #home-banners {
	padding: 0;
	width: 500vw;
	height: 100%;
	display: flex;
	flex-direction: row;
	-webkit-transition: margin-left var(--k-home-banner-flow-transform);
	-o-transition: margin-left var(--k-home-banner-flow-transform);
	transition: margin-left var(--k-home-banner-flow-transform);
}
.home-section #home-banners .home-banner {
	width: 100vw;
	height: 100%;
}
.home-section #home-banners .home-banner .container {
	height: 100%;
}
.home-section #home-banners .home-banner-1 {
	background-color: var(--k-banner-bg1);
}
.home-section #home-banners .home-banner-2 {
	background-color: var(--k-banner-bg2);
}
.home-section #home-banners .home-banner-3 {
	background-color: var(--k-banner-bg3);
}
.home-section #home-banners .home-banner-4 {
	background-color: var(--k-banner-bg4);
}
.home-section #home-banners .home-banner-5 {
	background-color: var(--k-banner-bg5);
}
.home-section #home-banners .home-banner .home-banner-item {
    padding-top: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.home-section #home-banners .home-banner .home-banner-item .home-banner-item-image {
    flex-grow: 0;
    flex-basis: 250px;
    flex-shrink: 1;
    overflow: hidden;
}
.home-section #home-banners .home-banner .home-banner-item .home-banner-item-title {
    flex-grow: 0;
    flex-shrink: 1;
    overflow: hidden;
    margin-bottom: 0px;
    padding-left: 0px;
    text-align: center;
    width: 100%;
}
.home-section #home-banners .home-banner .home-banner-item .home-banner-item-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.home-section #home-banners .home-banner .home-banner-item .home-banner-item-title small {
	font-size: 14px;
	color: var(--k-text-light);
}
.home-section #home-banners .home-banner .home-banner-item .home-banner-item-title h2 {
	font-size: 22px;
	color: var(--k-text);
}
.home-section #home-banners .home-banner .home-banner-item .home-banner-item-title h2 br {
    display: none;
}
.home-section #home-banners .home-banner .home-banner-item .home-banner-item-title p {
	font-size: 12px;
	color: var(--k-text-light);
}
.home-section #home-banners .home-banner .home-banner-item .home-banner-item-title p a {
	text-decoration: none;
	display: block;
	color: var(--k-text);
}
.home-section #home-banners .home-banner .home-banner-item .home-banner-item-title p a span {
	display: inline-block;
	margin-left: 10px;
}
.home-section #home-banners .home-banner .home-banner-item .home-banner-item-title p a span svg {
	display: flex;
}

@media (min-width: 576px) {
    .home-section #home-banners .home-banner .home-banner-item {
        padding-top: 80px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-image {
        flex-grow: 0;
        flex-basis: 300px;
        flex-shrink: 1;
        overflow: hidden;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title {
        flex-grow: 0;
        flex-shrink: 1;
        overflow: hidden;
        margin-bottom: 0px;
        padding-left: 0px;
        text-align: center;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title small {
        font-size: 16px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title h2 {
        font-size: 30px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title h2 br {
        display: none;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title p {
        font-size: 16px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title p a span {
        margin-left: 10px;
    }
}

@media (min-width: 768px) {
    .home-section #home-banners .home-banner .home-banner-item {
        padding-top: 80px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-image {
        flex-grow: 0;
        flex-basis: 50%;
        flex-shrink: 1;
        overflow: hidden;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title {
        flex-grow: 0;
        flex-basis: 50%;
        flex-shrink: 1;
        overflow: hidden;
        margin-bottom: 140px;
        padding-left: 90px;
        text-align: left;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title small {
        font-size: 24px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title h2 {
        font-size: 34px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title h2 br {
        display: block;
    }

    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title p {
        font-size: 20px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title p a span {
        margin-left: 10px;
    }
}

@media (min-width: 992px) {
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title {
        flex-grow: 0;
        flex-basis: 50%;
        flex-shrink: 1;
        overflow: hidden;
        margin-bottom: 140px;
        padding-left: 120px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title small {
        font-size: 24px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title h2 {
        font-size: 34px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title p {
        font-size: 20px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title p a span {
        margin-left: 10px;
    }
}

@media (min-width: 1200px) {
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title {
        flex-grow: 0;
        flex-basis: 50%;
        flex-shrink: 1;
        overflow: hidden;
        margin-bottom: 140px;
        padding-left: 160px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title small {
        font-size: 24px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title h2 {
        font-size: 40px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title p {
        font-size: 16px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title p a span {
        margin-left: 10px;
    }
}

@media (min-width: 1400px) {
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title {
        flex-grow: 0;
        flex-basis: 50%;
        flex-shrink: 1;
        margin-bottom: 140px;
        padding-left: 208px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title small {
        font-size: 30px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title h2 {
        font-size: 60px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title p {
        font-size: 20px;
    }
    .home-section #home-banners .home-banner .home-banner-item .home-banner-item-title p a span {
        margin-left: 10px;
    }
}

.home-banner-flow {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 68px;
}

.home-banner-flow .container {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.home-banner-flow .home-banner-flow-item.previous {
	left: 0;
}
.home-banner-flow .home-banner-flow-item.next {
	right: 0;
}


/********************
    Home Arrow Box
********************/


.home-arrow-box {
    position: absolute;
	width: 68px;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--k-arrow-color-bg);
	border-radius: 50%;
	overflow: hidden;
}
.home-arrow-box:hover {
	background-color: var(--k-arrow-color-bg-hover);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.home-arrow-box .home-arrow-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.home-arrow-box .home-arrow-button svg {
	width: 32px;
	height: 32px;
	color: var(--k-arrow-color);
}

.home-banner-flow .home-banner-flow-item {
    top: -190px;
}


@media (min-width: 576px) {
    .home-banner-flow .home-banner-flow-item {
        top: -160px;
    }
}
@media (min-width: 768px) {
    .home-banner-flow .home-banner-flow-item {
        top: -160px;
    }
}

@media (min-width: 992px) {
    .home-banner-flow .home-banner-flow-item {
        top: -200px;
    }
}

@media (min-width: 1200px) {
    .home-banner-flow .home-banner-flow-item {
        top: -230px;
    }
}

@media (min-width: 1400px) {
    .home-banner-flow .home-banner-flow-item {
        top: -250px;
    }
 }

#home-banner-flow-dots {
	position: absolute;
    bottom: 80px;
    left: calc(50% - 80px);
    width: 160px;
	height: 50px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
#home-banner-flow-dots .home-banner-flow-dot {
	width: 16px;
	height: 16px;
	background-color: var(--k-arrow-color-bg);
	border-radius: 8px;
}
#home-banner-flow-dots .home-banner-flow-dot.active {
	background-color: var(--k-arrow-color-bg-active);
	width: 50px;
}
@media (min-width: 576px) {
    #home-banner-flow-dots {
        bottom: 80px;
        left: calc(50% - 80px);
    }
    #home-banner-flow-dots .home-banner-flow-dot {
        width: 16px;
        height: 16px;
        background-color: var(--k-arrow-color-bg);
        border-radius: 8px;
    }
    #home-banner-flow-dots .home-banner-flow-dot.active {
        background-color: var(--k-arrow-color-bg-active);
        width: 50px;
    }
}
@media (min-width: 768px) {
    #home-banner-flow-dots {
        bottom: 100px;
        left: 110px;
    }
    #home-banner-flow-dots .home-banner-flow-dot {
        width: 16px;
        height: 16px;
        background-color: var(--k-arrow-color-bg);
        border-radius: 8px;
    }
    #home-banner-flow-dots .home-banner-flow-dot.active {
        background-color: var(--k-arrow-color-bg-active);
        width: 50px;
    }
}
@media (min-width: 992px) {
    #home-banner-flow-dots {
        bottom: 100px;
        left: 140px;
    }
    #home-banner-flow-dots .home-banner-flow-dot {
        width: 16px;
        height: 16px;
        background-color: var(--k-arrow-color-bg);
        border-radius: 8px;
    }
    #home-banner-flow-dots .home-banner-flow-dot.active {
        background-color: var(--k-arrow-color-bg-active);
        width: 50px;
    }
}
@media (min-width: 1200px) {
    #home-banner-flow-dots {
        bottom: 100px;
        left: 180px;
    }
    #home-banner-flow-dots .home-banner-flow-dot {
        width: 16px;
        height: 16px;
        background-color: var(--k-arrow-color-bg);
        border-radius: 8px;
    }
    #home-banner-flow-dots .home-banner-flow-dot.active {
        background-color: var(--k-arrow-color-bg-active);
        width: 50px;
    }
}
@media (min-width: 1400px) {
    #home-banner-flow-dots {
        bottom: 100px;
        left: 220px;
    }
    #home-banner-flow-dots .home-banner-flow-dot {
        width: 16px;
        height: 16px;
        background-color: var(--k-arrow-color-bg);
        border-radius: 8px;
    }
    #home-banner-flow-dots .home-banner-flow-dot.active {
        background-color: var(--k-arrow-color-bg-active);
        width: 50px;
    }
}

/*
    Home Section
*/

#home-section-2 {
	min-height: 200px;
}
#home-section-3 {
	min-height: 200px;
}
#home-section-4 {
	min-height: 500px;
}
#home-section-5 {
	min-height: 500px;
}
#home-section-6 {
	min-height: 700px;
}
#home-section-7 {
	min-height: 500px;
}

.home-section-2 {
    padding-bottom: 40px;
}

@media (min-width: 576px) {



}
@media (min-width: 768px) {
    .home-section-2 {
        padding-bottom: 80px;
    }
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}


.home-section.mt-80 {
	margin-top: -80px;
}

/*
    Home Quick Menu
*/


#home-section-2 .home-quickMenu {
	margin-bottom: 20px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	background-image: none;
	background-color: var(--k-bg-white);
	border-radius: 20px;
	box-shadow: var(--bs-box-shadow);
}
#home-section-2 .home-quickMenu .home-quickMenu-title {
    display: none;
}
#home-section-2 .home-quickMenu .home-quickMenu-item {
	padding: 15px;
    flex-basis: 100%;
}
#home-section-2 .home-quickMenu .home-quickMenu-item ul {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
#home-section-2 .home-quickMenu .home-quickMenu-item ul li {
	padding: 0;
	margin: 0;
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
#home-section-2 .home-quickMenu .home-quickMenu-item ul li a.home-quickMenu-item-box {
	text-decoration: none;
	color: var(--k-text);
	font-size: 14px;
	display: block;
}
#home-section-2 .home-quickMenu .home-quickMenu-item .home-quickMenu-item-box .home-quickMenu-item-box-icon {
	text-align: center;
    margin-bottom: 10px;
}
#home-section-2 .home-quickMenu .home-quickMenu-item .home-quickMenu-item-box .home-quickMenu-item-box-title {
	text-align: center;
}
#home-section-2 .home-quickMenu .home-quickMenu-item .home-quickMenu-item-box .home-quickMenu-item-box-title h4 {
	font-size: 14px;
	color: var(--k-text-light);
	margin-bottom: 0;
    font-weight: 400;
}
#home-section-2 .home-quickMenu .home-quickMenu-item .home-quickMenu-item-box .home-quickMenu-item-box-image {
	display: none;
}



@media (min-width: 576px) {

}
@media (min-width: 768px) {
    #home-section-2 .home-quickMenu {
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        background-image: url(/images/home/mainpage/quickMenu/quickMenuTitle_xl.png);
        background-position: left top;
        background-repeat: no-repeat;
        background-color: var(--k-bg-white);
        border-radius: 20px;
        box-shadow: var(--bs-box-shadow);
    }
    #home-section-2 .home-quickMenu .home-quickMenu-title {
        padding: 30px;
        flex-basis: 20%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-item {
        padding: 30px 30px 20px 0;
        flex-basis: 80%;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-title h3 {
        font-size: 18px;
        color: var(--k-color-pink);
    }
    #home-section-2 .home-quickMenu .home-quickMenu-title p {
        display: none;
    }

    
    #home-section-2 .home-quickMenu .home-quickMenu-item ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-item ul li {
        padding: 0;
        margin: 0;
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-item ul li a.home-quickMenu-item-box {
        text-decoration: none;
        color: var(--k-text);
        font-size: 14px;
        display: block;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-item .home-quickMenu-item-box .home-quickMenu-item-box-title {
        text-align: center;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-item .home-quickMenu-item-box .home-quickMenu-item-box-title h4 {
        font-size: 16px;
        color: var(--k-text-light);
        margin-bottom: 10px;
    }
}

@media (min-width: 992px) {
    #home-section-2 .home-quickMenu {
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        background-image: url(/images/home/mainpage/quickMenu/quickMenuTitle_xl.png);
        background-position: left top;
        background-repeat: no-repeat;
        background-color: var(--k-bg-white);
        border-radius: 20px;
        box-shadow: var(--bs-box-shadow);
    }
    #home-section-2 .home-quickMenu .home-quickMenu-title {
        padding: 30px;
        width: 20%;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-title h3 {
        font-size: 14px;
        color: var(--k-color-pink);
    }
    #home-section-2 .home-quickMenu .home-quickMenu-title p {
        font-size: 14px;
        color: var(--k-text);
        display: none;
    }

    
    #home-section-2 .home-quickMenu .home-quickMenu-item {
        padding: 30px 30px 0 0;
        width: 80%;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-item ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-item ul li {
        padding: 0;
        margin: 0;
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-item ul li a.home-quickMenu-item-box {
        text-decoration: none;
        color: var(--k-text);
        font-size: 14px;
        display: block;
    }

    #home-section-2 .home-quickMenu .home-quickMenu-item .home-quickMenu-item-box .home-quickMenu-item-box-icon {
        display: none;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-item .home-quickMenu-item-box .home-quickMenu-item-box-title {
        text-align: center;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-item .home-quickMenu-item-box .home-quickMenu-item-box-title h4 {
        font-size: 14px;
        color: var(--k-text-light);
        margin-bottom: 10px;
        font-weight: 600;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-item .home-quickMenu-item-box .home-quickMenu-item-box-image {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        height: 70px;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-item .home-quickMenu-item-box .home-quickMenu-item-box-image img {
        display: block;
        width: 90%;
        height: auto;
        object-fit: cover;
    }
}

@media (min-width: 1200px) {
    #home-section-2 .home-quickMenu .home-quickMenu-title {
        padding: 30px;
        width: 20%;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-title h3 {
        font-size: 18px;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-item .home-quickMenu-item-box .home-quickMenu-item-box-title h4 {
        font-size: 18px;
    }
    #home-section-2 .home-quickMenu .home-quickMenu-item .home-quickMenu-item-box .home-quickMenu-item-box-image {
        height: 100px;
    }
}
@media (min-width: 1400px) {
    #home-section-2 .home-quickMenu .home-quickMenu-title p {
        font-size: 18px;
        display: block;
    }
}

/*
    home-guide
*/
.home-guide {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80px;
	padding: 0 20px;
    margin-bottom: 20px;
	background-color: var(--k-bg-white);
	border-radius: 20px;
	box-shadow: var(--bs-box-shadow);
}
.home-guide .home-guide-image {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
}
.home-guide .home-guide-title {
	padding-left: 20px;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.home-guide .home-guide-title > span,
.home-guide .home-guide-title a {
	display: block;
}
.home-guide .home-guide-title span {
	font-size: 14px;
}
.home-guide .home-guide-title a {
	font-size: 12px;
	color: var(--k-text-light);
	text-decoration: none;
}
.home-guide .home-guide-title a span {
	display: inline-block;
	margin-left: 10px;
}
.home-guide .home-guide-title a span svg {
	display: flex;
	color: var(--k-text-light);
	width: 12px;
	height: 12px;
}


@media (min-width: 576px) {
    .home-guide .home-guide-title span {
        font-size: 16px;
    }
    .home-guide .home-guide-title a {
        font-size: 14px;
    }
}


/*
    Home Today Popup
*/

#home-section-2 .home-todayPopup {
	padding: 20px 0;
	background-color: var(--k-bg);
	border-radius: none;
	box-shadow: none;
}
#home-section-2 .home-todayPopup .home-todayPopup-title h3 {
	font-size: 20px;
	position: relative;
}
#home-section-2 .home-todayPopup .home-todayPopup-title h3 small {
	position: absolute;
	right: 0;
	top: 0;
}
#home-section-2 .home-todayPopup .home-todayPopup-title h3 small a {
	text-decoration: none;
	font-size: 12px;
	color: var(--k-text-light);
}
#home-section-2 .home-todayPopup .home-todayPopup-title h3 small a span {
	display: inline-block;
	margin-left: 10px;
}
#home-section-2 .home-todayPopup .home-todayPopup-title h3 small a span svg {
	display: flex;
	color: var(--k-text-light);
	width: 12px;
	height: 12px;
}

.home-todayPopup-box {
	position: relative;
	padding: 0;
	margin: 0;
	background-color: var(--k-bg-white);
	border-radius: 20px;
	overflow: hidden;
}
.home-todayPopup-box .home-todayPopup-dots {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 0;
	margin: 0;
	background-color: var(--k-todayPopup-dots-bg);
	height: 40px;
}
#home-todayPopup-dots-list {
	height: 40px;
	padding: 0 0 0 10px;
	margin: 0;
	list-style: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
#home-todayPopup-dots-list li {
	padding: 0;
	margin: 0;
	width: 24px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#home-todayPopup-dots-list li a {
	display: block;
	width: 14px;
	height: 14px;
	text-decoration: none;
	border-radius: 50%;
	background-color: transparent;
	border: 2px solid var(--k-bg-white);
}
#home-todayPopup-dots-list li a span {
	display: none;
}
#home-todayPopup-dots-list li a.active {
	background-color: var(--k-bg-white);
}

#home-todayPopup-content {
	position: relative;
	width: 100%;
	height: 260px;
	padding: 0;
	margin: 0;
	background-color: var(--k-bg-white);
	overflow: hidden;
}
#home-todayPopup-content-box {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: all 0.3s ease-in-out;
}
#home-todayPopup-list {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
#home-todayPopup-list li {
	padding: 0;
	margin: 0;
	width: 100%;
	display: inline-block;
}
#home-todayPopup-list li a {
	display: block;
	width: 100%;
	height: 100%;
}
#home-todayPopup-list li a img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}


@media (min-width: 576px) {
    

}
@media (min-width: 768px) {

    #home-section-2 .home-todayPopup {
        padding: 20px;
        background-color: var(--k-bg-white);
        border-radius: 20px;
        box-shadow: var(--bs-box-shadow);
    }
    
}

@media (min-width: 992px) {
    #home-section-2 .home-todayPopup {
        padding: 20px;
        background-color: var(--k-bg-white);
        border-radius: 20px;
        box-shadow: var(--bs-box-shadow);
    }
    
}

@media (min-width: 1200px) {
    #home-section-2 .home-todayPopup {
        padding: 20px;
        background-color: var(--k-bg-white);
        border-radius: 20px;
        box-shadow: var(--bs-box-shadow);
    }
    
}

@media (min-width: 1400px) {

}










/*
    Home Section 3
*/
.home-section-3 {
    background-color: var(--k-home-section-3-bg);
    padding-top: 92px;
}

.home-section-3-video,
.home-section-4-video {
    background-image: url(/images/home/mainpage/main_class_content/class01_bg_xl.png);
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 300px;
    position: relative;
    padding-bottom: 0;
}

.home-section-3-video {
    background-image: url(/images/home/mainpage/main_class_content/class01_bg_xl.png);
}
.home-section-4-video {
    background-image: url(/images/home/mainpage/main_class_content/class02_bg_xl.png);
}


.home-section-3-video .home-section-3-video-box,
.home-section-4-video .home-section-4-video-box {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 300px;
    margin: 0 auto;
}
.home-section-3-video .home-section-3-video-box .home-section-3-video-title,
.home-section-4-video .home-section-4-video-box .home-section-4-video-title {
    text-align: center;
}
.home-section-3-video .home-section-3-video-box .home-section-3-video-title h3,
.home-section-4-video .home-section-4-video-box .home-section-4-video-title h3 {
    font-size: 20px;
    color: var(--k-text);
}
.home-section-3-video .home-section-3-video-box .home-section-3-video-title h3 span,
.home-section-4-video .home-section-4-video-box .home-section-4-video-title h3 span {
    display: inline-block;
}
.home-section-3-video .home-section-3-video-box .home-section-3-video-title .home-section-3-video-title-button,
.home-section-4-video .home-section-4-video-box .home-section-4-video-title .home-section-4-video-title-button {
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
}
.home-section-3-video .home-section-3-video-box .home-section-3-video-element,
.home-section-4-video .home-section-4-video-box .home-section-4-video-element {
    display: block;
    width: 100%;
    height: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    background-image: url(/images/home/mainpage/main_class_content/video_bg.png);
    background-position: bottom center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.home-section-3-list .text-more,
.home-section-4-list .text-more {
    display: inline-block;
    text-decoration: none;
    color: var(--k-text-light);
    font-size: 14px;
    background-color: var(--k-color-white-light);
    padding: 12px 30px;
    border-radius: 20px;
    margin-bottom: 20px;
}
.session_white {
    height: 30px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.session_white img {
    width: 100%;
    height: 100%;
}
.home-section-3-list,
.home-section-4-list {
    background-color: var(--k-bg-white);
    min-height: 100px;
    padding-top: 20px;
    padding-bottom: 40px;
}
@media (min-width: 576px) {

    .home-section-3-video,
    .home-section-4-video {
        padding-bottom: 89px;
    }


    .home-section-3-video .home-section-3-video-box,
    .home-section-4-video .home-section-4-video-box {
        position: relative;
        width: 450px;
        max-width: 100%;
        height: 320px;
        margin: 0 auto;
    }
    .home-section-3-video .home-section-3-video-box .home-section-3-video-title,
    .home-section-4-video .home-section-4-video-box .home-section-4-video-title {
        text-align: center;
    }
    .home-section-3-video .home-section-3-video-box .home-section-3-video-title h3,
    .home-section-4-video .home-section-4-video-box .home-section-4-video-title h3 {
        font-size: 20px;
        color: var(--k-text);
    }
    .home-section-3-video .home-section-3-video-box .home-section-3-video-title h3 span,
    .home-section-4-video .home-section-4-video-box .home-section-4-video-title h3 span {
        display: inline-block;
    }
    .home-section-3-video .home-section-3-video-box .home-section-3-video-title .home-section-3-video-title-button,
    .home-section-4-video .home-section-4-video-box .home-section-4-video-title .home-section-4-video-title-button {
        display: block;
        width: 100%;
        height: auto;
        text-align: center;
    }
    .home-section-3-video .home-section-3-video-box .home-section-3-video-element,
    .home-section-4-video .home-section-4-video-box .home-section-4-video-element {
        display: block;
        width: 100%;
        height: 320px;
        padding-top: 30px;
        padding-bottom: 30px;
        background-image: url(/images/home/mainpage/main_class_content/video_bg.png);
        background-position: bottom center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .home-section-3-list .text-more,
    .home-section-4-list .text-more {
        display: inline-block;
        text-decoration: none;
        color: var(--k-text-light);
        font-size: 14px;
        background-color: var(--k-color-white-light);
        padding: 12px 30px;
        border-radius: 20px;
        margin-bottom: 20px;
    }
    .session_white {
        height: 89px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .session_white img {
        width: 100%;
        height: 89px;
    }



}
@media (min-width: 768px) {

}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}

@media (min-width: 1400px) {

}

/*
    수업 리스트
*/
.class-list {
    position: relative;
    padding: 0;
}
.class-list .class-list-pre,
.class-list .class-list-next {
    display: none;
}
.class-list .class-list-box {
    display: block;
    width: 100%;
    height: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}
.class-list .class-list-box li {
    display: inline-block;
    width: 49%;
    height: 100%;
    padding: 0 10px;
    margin: 0 0 20px 0;
}


@media (min-width: 576px) {
    .class-list .class-list-box li {
        display: inline-block;
        width: 49%;
        height: 100%;
        padding: 0 20px;
        margin: 0 0 20px 0;
    }
    
}
@media (min-width: 768px) {
    .class-list .class-list-box li {
        display: inline-block;
        width: 49%;
        height: 100%;
        padding: 0 30px;
        margin: 0 0 20px 0;
    }
    
}

@media (min-width: 992px) {
    .class-list .class-list-pre,
    .class-list .class-list-next {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
    }
    .class-list .class-list-pre {
        left: 0;
    }
    .class-list .class-list-next {
        right: 0;
    }
    .class-list .class-list-pre a,
    .class-list .class-list-next a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin: 0 auto;
        background-color: var(--k-arrow-color-bg);
        border-radius: 50%;
    }
    .class-list .class-list-pre a:hover,
    .class-list .class-list-next a:hover {
        background-color: var(--k-arrow-color-bg-hover);
    }
    .class-list .class-list-pre a svg,
    .class-list .class-list-next a svg {
        display: flex;
        width: 16px;
        height: 16px;
        color: var(--k-arrow-color);
    }
    .class-list .class-list-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .class-list .class-list-box li {
        width: 25%;
        height: 100%;
        padding: 0 10px;
    }
}

@media (min-width: 1200px) {
    .class-list .class-list-pre,
    .class-list .class-list-next {
        width: 108px;
    }
}

@media (min-width: 1400px) {

}

.class-list .class-list-box li .class-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--k-bg-white);
    border-radius: 10px;
    box-shadow: var(--bs-box-shadow);
    
}
.class-list .class-list-box li .class-box a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.class-list .class-list-box li .class-box .class-box-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.class-list .class-list-box li .class-box .class-box-hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    text-decoration: none;
    color: var(--k-color-white);
}
.class-list .class-list-box li .class-box:hover .class-box-hover {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in-out;
}
.class-list .class-list-box li .class-box .class-box-hover .class-box-hover-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.class-list .class-list-box li .class-box .class-box-hover .class-box-hover-icon svg {
    display: flex;
    width: 32px;
    height: 32px;
    color: var(--k-color-white);
}
.class-list .class-list-box li .class-box .class-box-hover .class-box-hover-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--k-color-white);
}


.class-list .class-list-box li .class-box .class-box-image {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
}
.class-list .class-list-box li .class-box .class-box-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.class-list .class-list-box li .class-box .class-box-body {
    position: relative;
    width: 100%;
    height: 135px;
    padding: 10px 20px 20px 20px;
}
.class-list .class-list-box li .class-box .class-box-body .class-box-body-time {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 20px;
    font-size: 12px;
    line-height: 12px;
    color: var(--k-text-light);
    border-bottom: 1px solid #eae9ef;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.class-list .class-list-box li .class-box .class-box-body .class-box-body-teacher {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 24px;
    font-size: 12px;
    line-height: 12px;
    color: var(--k-text-light);
    margin-bottom: 10px;
}
.class-list .class-list-box li .class-box .class-box-body .class-box-body-teacher .class-box-body-teacher-image {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}
.class-list .class-list-box li .class-box .class-box-body .class-box-body-teacher .class-box-body-teacher-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.class-list .class-list-box li .class-box .class-box-body .class-box-body-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 20px;
    font-size: 14px;
    line-height: 14px;
    color: var(--k-text);
    text-wrap: nowrap;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.class-list .class-list-box li .class-box .class-box-body .class-box-body-price {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 20px;
    font-size: 14px;
    line-height: 14px;
    color: var(--k-text);
}


/*
    home-section-3-classlist-arrow-box
*/
.home-section-3-classlist-arrow-box {
    position: relative;
    width: 100%;
    height: 0;
}
.home-section-3-classlist-arrow-box .container {
    position: relative;
}

.home-section-3-classlist-pre,
.home-section-3-classlist-next {
    position: absolute;
    top: 60px;
    transform: translateY(-50%);
}
.home-section-3-classlist-pre {
    left: 0;
}
.home-section-3-classlist-next {
    right: 0;
}

@media (min-width: 576px) {
    .home-section-3-classlist-pre,
    .home-section-3-classlist-next {
        top: -365px;
    }
    .home-section-3-classlist-pre {
        left: -50px;
    }
    .home-section-3-classlist-next {
        right: -50px;
    }
}
@media (min-width: 768px) {
    .home-section-3-classlist-pre,
    .home-section-3-classlist-next {
        top: -365px;
    }
    .home-section-3-classlist-pre {
        left: -50px;
    }
    .home-section-3-classlist-next {
        right: -50px;
    }
}

@media (min-width: 992px) {
    .home-section-3-classlist-pre,
    .home-section-3-classlist-next {
        top: -210px;
    }
    .home-section-3-classlist-pre {
        left: -50px;
    }
    .home-section-3-classlist-next {
        right: -50px;
    }
}

@media (min-width: 1200px) {

    
}

@media (min-width: 1400px) {

    
}



/*
    Home Section 4
*/
.home-section-4 {
    background-color: var(--k-home-section-4-bg);
    padding-top: 92px;
}


/*
    home-section-4-classlist-arrow-box
*/
.home-section-4-classlist-arrow-box {
    position: relative;
    width: 100%;
    height: 0;
}
.home-section-4-classlist-arrow-box .container {
    position: relative;
}

.home-section-4-classlist-pre,
.home-section-4-classlist-next {
    position: absolute;
    top: 60px;
    transform: translateY(-50%);
}
.home-section-4-classlist-pre {
    left: 0;
}
.home-section-4-classlist-next {
    right: 0;
}

@media (min-width: 576px) {
    .home-section-4-classlist-pre,
    .home-section-4-classlist-next {
        top: -365px;
    }
    .home-section-4-classlist-pre {
        left: -50px;
    }
    .home-section-4-classlist-next {
        right: -50px;
    }
}
@media (min-width: 768px) {
    .home-section-4-classlist-pre,
    .home-section-4-classlist-next {
        top: -365px;
    }
    .home-section-4-classlist-pre {
        left: -50px;
    }
    .home-section-4-classlist-next {
        right: -50px;
    }
}

@media (min-width: 992px) {
    .home-section-4-classlist-pre,
    .home-section-4-classlist-next {
        top: -210px;
    }
    .home-section-4-classlist-pre {
        left: -50px;
    }
    .home-section-4-classlist-next {
        right: -50px;
    }
}

@media (min-width: 1200px) {

    
}

@media (min-width: 1400px) {

    
}








/*
    Home Section 5
*/
.home-section-5 {
    background-color: var(--k-home-section-5-bg);
    padding-top: 92px;
    padding-bottom: 30px;
    color: var(--k-color-white-light);
}

.home-section-5 .home-section-5-title {
    text-align: center;
    font-size: 14px;
}
.home-section-5 .home-section-5-title small {
    color: var(--k-color-pink);
    font-size: 20px;
}
.home-section-5 .home-section-5-title h3 {
    color: var(--k-color-white-light);
    font-size: 30px;
    font-weight: 700;
}
.home-section-5 .home-section-5-title p {
    font-size: 14px;
    color: var(--k-color-white-light);
}

.home-section-5 .home-section-5-title-button {
    text-align: center;
    margin-bottom: 20px;
}
.home-section-5 .home-section-5-title-button a {
    display: inline-block;
    text-decoration: none;
    color: var(--k-color-white-light);
    font-size: 14px;
    border: 1px solid var(--k-color-white-light);
    border-radius: 20px;
    padding: 10px 20px;
}
.home-section-5 .home-teacher-videos {
    width: 100%;
    height: 490px;
    overflow: hidden;
    position: relative;
}
.home-section-5 .home-teacher-videos #home-teacher-videos-list {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 300%;
    list-style: none;
    padding: 0;
    margin: 0;
    transition: all 0.5s ease-in-out;
}
.home-section-5 .home-teacher-videos #home-teacher-videos-list li {
    width: 100vw;
    flex-grow: 0;
    flex-shrink: 0;
    height: 100%;
    padding: 0;
    margin: 0 10px;
}


.home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-header {
    width: 100%;
    height: 280px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: all 0.5s ease-in-out;
}
.home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-header:hover img {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-header .home-teacher-videos-box-video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}
.home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-header:hover .home-teacher-videos-box-video {
    opacity: 1;
    height: 400px;
}

.home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    padding-top: 20px;
}
.home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body .home-teacher-videos-box-class {
    width: 100%;
    height: 100%;
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}
.home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body .home-teacher-videos-box-class .home-teacher-videos-box-class-image {
    flex-basis: 160px;
    flex-grow: 0;
    height: 160px;
    border-radius: 10px;
    overflow: hidden;
}
.home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body .home-teacher-videos-box-class .home-teacher-videos-box-class-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    overflow: hidden;
}
.home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body .home-teacher-videos-box-class .home-teacher-videos-box-class-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 12px;
}
.home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body .home-teacher-videos-box-class .home-teacher-videos-box-class-info .home-teacher-videos-box-class-info-time {
    width: 100%;
    margin-left: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--k-color-white);
    margin-bottom: 10px;
}
.home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body .home-teacher-videos-box-class .home-teacher-videos-box-class-info .home-teacher-videos-box-class-info-teacher {
    padding-left: 60px;
    position: relative;
}
.home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body .home-teacher-videos-box-class .home-teacher-videos-box-class-info .home-teacher-videos-box-class-info-teacher img{
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: 5px;
    left: 10px;
    border: 2px solid var(--k-color-white);
}
.home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body .home-teacher-videos-box-class .home-teacher-videos-box-class-info .home-teacher-videos-box-class-info-teacher span {
    display: block;
}


.home-section-5 .home-banner-flow .home-banner-flow-item {
    top: -470px;
}
@media (min-width: 576px) {
    .home-section-5 .home-teacher-videos {
        height: 490px;
    }
    .home-section-5 .home-teacher-videos #home-teacher-videos-list li {
        flex-basis: 540px;
        margin: 0 10px;
    }
    .home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-header {
        height: 300px;
    }
    
    .home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 200px;
        padding-top: 20px;
    }
    .home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body .home-teacher-videos-box-class {
        width: 100%;
        height: 100%;
        flex-basis: 530px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
    .home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body .home-teacher-videos-box-class .home-teacher-videos-box-class-image {
        flex-basis: 260px;
        flex-grow: 0;
        height: 160px;
        border-radius: 10px;
        overflow: hidden;
    }
    .home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body .home-teacher-videos-box-class .home-teacher-videos-box-class-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        overflow: hidden;
    }
    
    
    .home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body .home-teacher-videos-box-class .home-teacher-videos-box-class-info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body .home-teacher-videos-box-class .home-teacher-videos-box-class-info .home-teacher-videos-box-class-info-time {
        width: 100%;
        margin-left: 10px;
        padding-left: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--k-color-white);
        margin-bottom: 10px;
    }
    .home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body .home-teacher-videos-box-class .home-teacher-videos-box-class-info .home-teacher-videos-box-class-info-teacher {
        padding-left: 60px;
        position: relative;
    }
    .home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body .home-teacher-videos-box-class .home-teacher-videos-box-class-info .home-teacher-videos-box-class-info-teacher img{
        width: 42px;
        height: 42px;
        border-radius: 50%;
        overflow: hidden;
        position: absolute;
        top: 5px;
        left: 10px;
        border: 2px solid var(--k-color-white);
    }
    .home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-body .home-teacher-videos-box-class .home-teacher-videos-box-class-info .home-teacher-videos-box-class-info-teacher span {
        display: block;
    }
    


    .home-section-5 .home-banner-flow .home-banner-flow-item {
        top: -470px;
    }
}
@media (min-width: 768px) {
    .home-section-5 .home-teacher-videos {
        height: 600px;
    }
    .home-section-5 .home-teacher-videos #home-teacher-videos-list li {
        flex-basis: 720px;
        margin: 0 10px;
    }
    .home-section-5 .home-teacher-videos #home-teacher-videos-list li .home-teacher-videos-box .home-teacher-videos-box-header {
        height: 400px;
    }
    .home-section-5 .home-banner-flow .home-banner-flow-item {
        top: -470px;
    }
}

@media (min-width: 992px) {
    .home-section-5 .home-teacher-videos {
        height: 600px;
    }
    .home-section-5 .home-teacher-videos #home-teacher-videos-list li {
        flex-basis: 720px;
        margin: 0 10px;
    }

    .home-section-5 .home-banner-flow .home-banner-flow-item {
        top: -470px;
    }
}

@media (min-width: 1200px) {
    .home-section-5 .home-teacher-videos {
        height: 600px;
    }
    .home-section-5 .home-teacher-videos #home-teacher-videos-list li {
        flex-basis: 720px;
        margin: 0 10px;
    }

    .home-section-5 .home-banner-flow .home-banner-flow-item {
        top: -470px;
    }
}

@media (min-width: 1400px) {
    .home-section-5 .home-teacher-videos {
        height: 600px;
    }
    .home-section-5 .home-teacher-videos #home-teacher-videos-list li {
        flex-basis: 720px;
        margin: 0 10px;
    }

    .home-section-5 .home-banner-flow .home-banner-flow-item {
        top: -470px;
    }
}






/*
    Home Section 6
*/
.home-section-6 {
    background-color: var(--k-home-section-6-bg);
    padding-top: 92px;
}

.home-section-6 .home-section-6-title { 
    text-align: center;
    font-size: 14px;
}
.home-section-6 .home-section-6-title small {
    color: var(--k-color-pink);
    font-size: 20px;
}
.home-section-6 .home-section-6-title h3 {
    color: var(--k-color-white-light);
    font-size: 30px;
    font-weight: 700;
}
.home-section-6 .home-section-6-title p {
    font-size: 14px;
    color: var(--k-color-white-light);
}
.home-section-6 .home-section-6-title-button {
    text-align: center;
    margin-bottom: 20px;
}
.home-section-6 .home-section-6-title-button a {
    display: inline-block;
    text-decoration: none;
    color: var(--k-color-white-light);
    font-size: 14px;
    border: 1px solid var(--k-color-white-light);
    border-radius: 20px;
    padding: 10px 20px;
}


.home-section-6-review-list {
    width: 100%;
    height: 470px;
    position: relative;
    overflow: hidden;
}
#home-section-6-review-list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    transition: all 0.5s ease-in-out;
}
#home-section-6-review-list li {
    width: 360px;
    height: 100%;
    display: inline-block;
    margin: 0 10px;
    flex-basis: 360px;
    flex-grow: 0;
    flex-shrink: 0;
    opacity: 0.5;
}
#home-section-6-review-list li.active {
    opacity: 1;
}

#home-section-6-review-list li .home-section-6-review-box {
    background-color: var(--k-color-white);
    border-radius: 10px;
    overflow: hidden;
    padding: 30px;
}


#home-section-6-review-list li .home-section-6-review-box .home-section-6-review-box-header {
    margin-bottom: 20px;
}
#home-section-6-review-list li .home-section-6-review-box .home-section-6-review-box-header .home-section-6-review-box-student {
    position: relative;
    padding-left: 70px;
    margin-bottom: 20px;
}
#home-section-6-review-list li .home-section-6-review-box .home-section-6-review-box-header .home-section-6-review-box-student img.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}


#home-section-6-review-list li .home-section-6-review-box .home-section-6-review-box-body {
    height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--k-line-gray) transparent;
}

#home-section-6-review-list li .home-section-6-review-box .home-section-6-review-box-body::-webkit-scrollbar {
    width: 6px;
}

#home-section-6-review-list li .home-section-6-review-box .home-section-6-review-box-body::-webkit-scrollbar-track {
    background: transparent;
}

#home-section-6-review-list li .home-section-6-review-box .home-section-6-review-box-body::-webkit-scrollbar-thumb {
    background-color: var(--k-line-gray);
    border-radius: 3px;
}



#home-section-6-review-list li .home-section-6-review-box .home-section-6-review-box-footer {




}
#home-section-6-review-list li .home-section-6-review-box .home-section-6-review-box-footer .home-section-6-review-box-classinfo {
    border-top: 1px solid var(--k-line-gray);
    padding-top: 10px;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
#home-section-6-review-list li .home-section-6-review-box .home-section-6-review-box-footer .home-section-6-review-box-classinfo .home-section-6-review-box-classinfo-img {
    width: 80px;
    height: 60px;
    border-radius: 5px;
    overflow: hidden;
    flex-basis: 80px;
    flex-grow: 0;
}
#home-section-6-review-list li .home-section-6-review-box .home-section-6-review-box-footer .home-section-6-review-box-classinfo .home-section-6-review-box-classinfo-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#home-section-6-review-list li .home-section-6-review-box .home-section-6-review-box-footer .home-section-6-review-box-classinfo .home-section-6-review-box-classinfo-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex-grow: 1;
    padding-left: 10px;
    font-size: 14px;
    color: var(--k-text-lighter);
}

/*
home-review-flow-item previous

*/

.home-review-arrow {
    position: relative;
    width: 100%;
    height: 0;
}
.home-review-arrow .container {
    position: relative;
}

.home-review-arrow .home-review-flow-item.previous,
.home-review-arrow .home-review-flow-item.next {
    position: absolute;
    top: 60px;
    transform: translateY(-50%);
}
.home-review-arrow .home-review-flow-item.previous {
    left: 0;
}
.home-review-arrow .home-review-flow-item.next {
    right: 0;
}

@media (min-width: 576px) {
    .home-review-arrow .home-review-flow-item.previous,
    .home-review-arrow .home-review-flow-item.next {
        top: -365px;
    }
    .home-review-arrow .home-review-flow-item.previous {
        left: -50px;
    }
    .home-review-arrow .home-review-flow-item.next {
        right: -50px;
    }
}
@media (min-width: 768px) {
    .home-review-arrow .home-review-flow-item.previous,
    .home-review-arrow .home-review-flow-item.next {
        top: -365px;
    }
    .home-review-arrow .home-review-flow-item.previous {
        left: -50px;
    }
    .home-review-arrow .home-review-flow-item.next {
        right: -50px;
    }
}

@media (min-width: 992px) {
    .home-review-arrow .home-review-flow-item.previous,
    .home-review-arrow .home-review-flow-item.next {
        top: -210px;
    }
    .home-review-arrow .home-review-flow-item.previous {
        left: -50px;
    }
    .home-review-arrow .home-review-flow-item.next {
        right: -50px;
    }
}

@media (min-width: 1200px) {

    
}

@media (min-width: 1400px) {

    
}








.home-section-6-review-guide {
    background-color: var(--k-color-purple);
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 30px;
    width: 100%;
}

.home-section-6-review-guide .home-section-6-review-guide-row {
    width: 600px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.home-section-6-review-guide .home-section-6-review-guide-icon {
    flex-basis: 50px;
    flex-grow: 0;
    flex-shrink: 0;
}
.home-section-6-review-guide-text {
    flex-grow: 1;
    flex-shrink: 1;
}

.home-section-6-review-guide .home-section-6-review-guide-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--k-color-white);
    margin-bottom: 10px;
    display: block;
    text-wrap: balance;
}
.home-section-6-review-guide .home-section-6-review-guide-title b {
    color: var(--k-color-yellow);
}
.home-section-6-review-guide .home-section-6-review-guide-content {
    font-size: 12px;
    color: var(--k-color-white);
    margin-bottom: 10px;
    display: block;
    text-wrap: balance;
}


@media (min-width: 576px) {

}
@media (min-width: 768px) {
    .home-section-6-review-guide .home-section-6-review-guide-icon {
        flex-basis: 63px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    
    .home-section-6-review-guide .home-section-6-review-guide-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--k-color-white);
        margin-bottom: 10px;
        display: block;
    }
    .home-section-6-review-guide .home-section-6-review-guide-title b {
        color: var(--k-color-yellow);
    }
    .home-section-6-review-guide .home-section-6-review-guide-content {
        font-size: 14px;
        color: var(--k-color-white);
        margin-bottom: 10px;
        display: block;
    }
    
}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}

@media (min-width: 1400px) {

}





/*
    Home Section 7
*/
.home-section-7 {
    background-color: var(--k-home-section-7-bg);
    padding-top: 92px;
}

.home-section-7 .home-section-7-title { 
    text-align: center;
    font-size: 14px;
}
.home-section-7 .home-section-7-title small {
    color: var(--k-color-pink);
    font-size: 20px;
}
.home-section-7 .home-section-7-title h3 {
    color: var(--k-color-dark);
    font-size: 30px;
    font-weight: 700;
}
.home-section-7 .home-section-7-title p {
    font-size: 14px;
    color: var(--k-color-dark);
}
.home-section-7 .home-section-7-title-button {
    text-align: center;
    margin-bottom: 20px;
}

#home_book_category {
    max-width: 460px;
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    font-size: 12px;
    border: 1px solid var(--k-color-dark);
    border-radius: 20px;
    background-color: var(--k-color-white);
    overflow: hidden;
}

#home_book_category li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    flex-grow: 1;
    flex-shrink: 1;
    height: 100%;
}
#home_book_category li a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-decoration: none;
    text-align: center;
    color: var(--k-color-dark);
}
#home_book_category li.selected a {
    background-color: var(--k-color-dark);
    color: var(--k-color-white);
    border-radius: 20px;
}
#home_book_category li.all-view a {
    background-color: var(--k-bg-lighter);
    color: var(--k-color-dark);
    border-radius: 20px;
}


/*
    book-list
*/

.book-list {
    position: relative;
}
.book-list .book-list-row {
    position: relative;
    width: 100%;
    height: 330px;
    position: relative;
    margin-bottom: 40px;
    overflow: hidden;
}
#main-book-list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
    margin: 0;
    transition: all 0.5s ease-in-out;
}

#main-book-list li {
    flex-basis: 25%;
    flex-grow: 0;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    padding: 0 10px 10px 10px;
}

.book-list-box {
    position: relative;
    max-width: 260px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    margin: 0 auto;
}
.book-list-box .book-list-box-header {
    background-color: var(--k-book-bg);
    position: relative;
    text-align: center;
    width: 100%;
    flex-basis: 220px;
    flex-grow: 0;
    flex-shrink: 0;
}
.book-list-box .book-list-box-header .book-list-box-header-img {
    width: 100%;
    height: 100%;
    background-color: var(--k-book-bg);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.book-list-box .book-list-box-header .book-list-box-header-img img {
    max-width: 260px;
    height: auto;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    margin: auto;
}
.book-list-box .book-list-box-body {
    width: 100%;
    flex-basis: 80px;
    flex-grow: 1;
    flex-shrink: 0;
    position: relative;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.book-list-box .book-list-box-body .book-list-box-body-title {
    width: 100%;
    overflow: hidden;
    font-size: 14px;
    color: var(--k-color-dark);
    margin-bottom: 10px;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.book-list-box .book-list-box-body .book-list-box-body-price {
    font-size: 14px;
    color: var(--k-color-dark);
    margin-bottom: 10px;
    display: block;
}
.book-list-box .book-list-box-footer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--k-hover-bg);
    opacity: 0.8;
    z-index: 10;
    display: none;
}
.book-list-box:hover .book-list-box-footer {
    display: block;
}
.book-list-box .book-list-box-footer .book-list-box-footer-button {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.book-list-box .book-list-box-footer .book-list-box-footer-button a {
    display: inline-block;
    text-decoration: none;
    color: var(--k-color-white);
    
}
.book-list-box .book-list-box-footer .book-list-box-footer-button a span {
    font-size: 16px;
    text-align: center;
    display: block;
}
.book-list-box .book-list-box-footer .book-list-box-footer-button a span svg {
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#book-detail-modal .book-detail-img {
    margin-bottom: 20px;
}
#book-detail-modal .book-detail-img img {
    margin: 0 auto;
    display: block;
    border: solid 1px var(--k-color-dark-light);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
#book-detail-modal #book-detail-desc {
    font-size: 14px;
    color: var(--k-color-dark);
    margin-bottom: 10px;
    display: block;
}
#book-detail-modal #book-detail-desc img {
    max-width: 100%;
    height: auto;
}

/*
home-book-flow-item previous

*/

.home-book-arrow {
    position: relative;
    width: 100%;
    height: 0;
}
.home-book-arrow .container {
    position: relative;
}

.home-book-arrow .home-book-flow-item.previous,
.home-book-arrow .home-book-flow-item.next {
    position: absolute;
    top: -220px;
    transform: translateY(-50%);
}
.home-book-arrow .home-book-flow-item.previous {
    left: 0;
}
.home-book-arrow .home-book-flow-item.next {
    right: 0;
}

@media (min-width: 576px) {
    .home-book-arrow .home-book-flow-item.previous,
    .home-book-arrow .home-book-flow-item.next {
        top: -190px;
    }
    .home-book-arrow .home-book-flow-item.previous {
        left: -50px;
    }
    .home-book-arrow .home-book-flow-item.next {
        right: -50px;
    }
}
@media (min-width: 768px) {
    .home-book-arrow .home-book-flow-item.previous,
    .home-book-arrow .home-book-flow-item.next {
        top: -190px;
    }
    .home-book-arrow .home-book-flow-item.previous {
        left: -50px;
    }
    .home-book-arrow .home-book-flow-item.next {
        right: -50px;
    }
}

@media (min-width: 992px) {
    .home-book-arrow .home-book-flow-item.previous,
    .home-book-arrow .home-book-flow-item.next {
        top: -190px;
    }
    .home-book-arrow .home-book-flow-item.previous {
        left: -50px;
    }
    .home-book-arrow .home-book-flow-item.next {
        right: -50px;
    }
}

@media (min-width: 1200px) {

    
}

@media (min-width: 1400px) {

    
}



/*********
    FAQ
*********/
.faq_search_box {
    width: 100%;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.faq_search_box h5 {
    margin-bottom: 20px;
    display: block;
}
.faq_search_box .faq_search_box_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.faq_search_box .faq_search_box_form .faq_search_box_form_input {
    display: block;
    width: 100%;
}
.faq_search_box .faq_search_box_form button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38px;
    border: none;
    background-color: rgb(119,160,252);
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}


@media (min-width: 576px) {
    .faq_search_box .faq_search_box_form {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .faq_search_box .form-select {
        display: block;
        width: 33.333333333333333333333333333333%;
    }

    .faq_search_box .faq_search_box_form .faq_search_box_form_input {
        display: block;
        width: 100%;
    }
    .faq_search_box .faq_search_box_form button {
        width: 50px;
        height: 38px;
    }

}
@media (min-width: 768px) {
    .faq_search_box {
        width: 600px;
    }
}


/* FAQ 카테고리 */
.faq_category_box {
    margin-bottom: 0px;
    text-align: center;
    display: none;
}
.faq_category_box ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
    gap: 10px;
}
.faq_category_box ul li {
    display: inline-block;
    flex-basis: 31%;
    flex-shrink: 1;
    flex-grow: 0;
}
.faq_category_box ul li a {
    display: block;
    text-decoration: none;
    color: var(--k-color-dark);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 50px;
    background-color: #fff;
    border: 1px solid rgb(119,160,252);
    color: rgb(119,160,252);
    text-align: center;
}
.faq_category_box ul li a.active {
    background-color: rgb(119,160,252);
    color: #fff;
}


@media (min-width: 576px) {
    .faq_category_box {
        margin-bottom: 20px;
        display: block;

    }

}
@media (min-width: 768px) {
    .faq_category_box ul {
        display: block;
    }
    .faq_category_box ul li {
        margin: 5px 5px;
        min-width: 100px;
        display: inline-block;
    }

}
@media (min-width: 992px) {


}
@media (min-width: 1200px) {

    
}
@media (min-width: 1400px) {

    
}


/* FAQ 리스트 */
.faq_list_box {
    width: 100%;
    margin-bottom: 20px;
}
.faq_list_box ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.faq_list_box ul li {
    display: block;
    width: 100%;
}
.faq_list_box ul li a {
    display: block;
    text-decoration: none;
    color: var(--k-color-dark);
    padding: 20px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.faq_list_box ul li a .faq_item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.faq_list_box ul li a .faq_item .faq_item_content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}
.faq_list_box ul li a .faq_item .faq_item_content .faq_item_category {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.faq_list_box ul li a .faq_item .faq_item_content .faq_item_category span {
    display: inline-block;
    font-size: 12px;
    color: var(--k-color-dark-light);
    font-weight: 500;
}
.faq_list_box ul li a .faq_item .faq_item_content .faq_item_question {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.faq_list_box ul li a .faq_item .faq_item_content .faq_item_question h3 {
    font-size: 16px;
    color: var(--k-color-dark);
    font-weight: 500;
    margin: 0;
}
.faq_list_box ul li a .faq_item .faq_item_content .faq_item_question p {
    font-size: 14px;
    color: var(--k-color-dark);
    font-weight: 400;
}



/* 원격지원 모달 */
.remote-call-content {
    padding-top: 20px;
    
}

.remote-call-content .remote-call-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.remote-call-content .remote-call-title .remote-call-title-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.remote-call-content .remote-call-title .remote-call-title-text p {
    font-size: 14px;
    color: var(--k-color-dark-light);
    font-weight: 400;
    margin-bottom: 10px;
}
.remote-call-content .remote-call-title .remote-call-title-text h5 {
    font-size: 24px;
    color: var(--k-color-dark);
    font-weight: 500;
    margin-bottom: 20px;
}
.remote-call-content .remote-call-title .remote-call-title-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.remote-call-content .remote-call-title .remote-call-title-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.remote-call-content .remote-call-title .remote-call-title-alert {
    padding: 20px;
    border-radius: 20px;
    background-color: #ecf2ff;
    text-align: center;
}
.remote-call-content .remote-call-title .remote-call-title-alert p {
    font-size: 14px;
    color: var(--k-color-dark-light);
    font-weight: 400;
    text-align: center;
    margin-bottom: 0px;
    line-height: 1.4em;
}


.remote-call-content .remote-call-nav {
    margin-bottom: 30px;
    width: 100%;
}
.remote-call-content .remote-call-nav ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 50px;
    background-color: #fff;
    border: 1px solid #5350b7;
    overflow: hidden;
}
.remote-call-content .remote-call-nav ul li {
    display: inline-block;
    flex-basis: 50%;
    flex-shrink: 1;
    flex-grow: 0;
    height: 100%;
}
.remote-call-content .remote-call-nav ul li a {
    display: block;
    text-decoration: none;
    color: var(--k-color-dark);
    padding: 10px 20px;
    text-align: center;
    font-size: 12px;
}
.remote-call-content .remote-call-nav ul li a.active {
    background-color: #5350b7;
    color: #fff;
    border-radius: 50px;
    border: 1px solid #5350b7;

}


.remote-call-body {
    width: 100%;
    margin-top: 30px;
    text-align: center;
}
.remote-call-body h5 {
    font-size: 24px;
    color: var(--k-color-dark);
    font-weight: 500;
    margin-bottom: 20px;
}
.remote-call-body .remote-call-body-content {
    margin-bottom: 30px;
}
.remote-call-body .remote-call-body-content .remote-call-body-content-title {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.remote-call-body .remote-call-body-content .remote-call-body-content-title p {
    font-size: 14px;
    margin: 0;
}





@media (min-width: 576px) {

    .remote-call-content .remote-call-nav {
        width: 430px;
        margin: 0 auto 30px auto;
    }
    .remote-call-content .remote-call-nav ul li a {
        font-size: 14px;
    }




}
@media (min-width: 768px) {




}
@media (min-width: 992px) {



}
@media (min-width: 1200px) {

    
}
@media (min-width: 1400px) {

    
}










@media (min-width: 576px) {






}
@media (min-width: 768px) {




}
@media (min-width: 992px) {



}
@media (min-width: 1200px) {

    
}
@media (min-width: 1400px) {

    
}












/*
    Review Star Box
*/
.review-star-box {
    display: inline-block;
    position: relative;
    width: 90px;
    height: 20px;
}
.review-star-box img.star-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.review-star-box .star-bg {
    width: 100%;
    height: 100%;
    background-color: var(--k-star-bg);
    position: absolute;
    top: 0;
    left: 0;
}



/* search box */



/* footer */
footer {
    background-color: var(--k-bg);
    padding-top: 30px;
    padding-bottom: 30px;
}

footer #footer-box {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}
footer #footer-box .footer-logo {
    display: none;
}
footer #footer-box .footer-info {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
}
footer #footer-box .footer-info .footer-info-row {
    margin-bottom: 40px;
}
footer #footer-box .footer-info .footer-info-row .footer-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

footer #footer-box .footer-info .footer-info-row .footer-nav ul {
    flex-basis: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
    margin: 0;
}
footer #footer-box .footer-info .footer-info-row .footer-nav ul li {
    flex-basis: 20%;
    flex-grow: 0;
    flex-shrink: 1;
    line-height: 1;
}
footer #footer-box .footer-info .footer-info-row .footer-nav ul li + li {
    border-left: 1px solid var(--k-color-dark);
}
footer #footer-box .footer-info .footer-info-row .footer-nav ul li a {
    display: block;
    text-decoration: none;
    color: var(--k-color-dark);
    font-size: 12px;
    padding: 0 5px;
    line-height: 1.2;
    text-align: center;
}
footer #footer-box .footer-info .footer-info-row .footer-nav ul li a br {
    display: block;
}

footer #footer-box .footer-info .footer-info-row .footer-nav ul li + li a {
    padding: 0 5px;
}



footer #footer-box .footer-info .footer-info-row .footer-nav ul li a.active {
    color: var(--k-color-pink);
    font-weight: 700;
}
footer #footer-box .footer-info .footer-info-row .footer-nav ul li a:hover {
    color: var(--k-color-pink);
}
footer #footer-box .footer-info .footer-info-row .footer-info-col {
    font-size: 12px;
    color: var(--k-color-dark);
}
footer #footer-box .footer-info .footer-info-row .footer-info-col dl {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0 0 5px 0;
}
footer #footer-box .footer-info .footer-info-row .footer-info-col dl dt {
    font-weight: 400;
    color: var(--k-color-dark);
    margin: 0;
    display: inline-block;
}
footer #footer-box .footer-info .footer-info-row .footer-info-col dl dd {
    font-weight: 400;
    color: var(--k-color-dark);
    margin: 0 10px 0 0;
    display: inline-block;
}
footer #footer-box .footer-info .footer-info-row .footer-copyright {
    font-size: 12px;
    color: var(--k-color-dark);
    margin-top: 10px;
    text-align: center;
}
footer #footer-box .footer-service {
    display: none;
}


@media (min-width: 576px) {
    footer {
        background-color: var(--k-bg);
        padding-top: 40px;
        padding-bottom: 40px;
    }

    footer #footer-box .footer-service {
        display: none;
    }

    footer #footer-box .footer-info .footer-info-row .footer-copyright {
        text-align: left;
    }

}
@media (min-width: 768px) {
    footer {
        background-color: var(--k-bg);
        padding-top: 40px;
        padding-bottom: 40px;
    }
    footer #footer-box .footer-info .footer-info-row .footer-nav ul li a br {
        display: none;
    }
        
    footer #footer-box .footer-service {
        display: block;
        flex-basis: 200px;
        flex-grow: 0;
        flex-shrink: 0;
    }

    footer #footer-box .footer-service .footer-service-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        padding: 15px;
        border-radius: 10px;
        background-color: #e0e0e6;
    }
    footer #footer-box .footer-service .footer-service-box .footer-service-box-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        margin-right: 15px;
    }
    footer #footer-box .footer-service .footer-service-box .footer-service-box-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    footer #footer-box .footer-service .footer-service-box .footer-service-box-text .footer-service-box-text-title {
        font-size: 18px;
        color: var(--k-color-dark);
        font-weight: 700;
    }
    footer #footer-box .footer-service .footer-service-box .footer-service-box-text .footer-service-box-text-tel {
        font-size: 14px;
        color: var(--k-color-dark);
        font-weight: 700;
    }
    footer #footer-box .footer-service .footer-service-box .footer-service-box-text .footer-service-box-text-time {
        font-size: 12px;
        color: var(--k-color-dark);
        font-weight: 400;
    }

    footer #footer-box .footer-service a {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--k-color-dark);
        font-size: 14px;
        font-weight: 400;
        border-radius: 10px;
        background-color: #e0e0e6;
        padding: 8px;
    }
    footer #footer-box .footer-service a svg {
        margin-right: 10px;
    }


}

@media (min-width: 992px) {
    footer {
        background-color: var(--k-bg);
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    footer #footer-box {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
    footer #footer-box .footer-logo {
        flex-basis: 160px;
        flex-grow: 0;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    footer #footer-box .footer-logo .footer-logo-img {
        padding-bottom: 70px;
    }
    footer #footer-box .footer-logo .footer-logo-sns {
    
    }
    footer #footer-box .footer-logo .footer-logo-sns ul {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    footer #footer-box .footer-logo .footer-logo-sns ul li {
        flex-basis: 46px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    footer #footer-box .footer-logo .footer-logo-sns ul li a {
        display: inline-block;
        text-decoration: none;
    }
    
    
    footer #footer-box .footer-info {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 100%;
    
    }
    footer #footer-box .footer-info .footer-info-row {
        margin-bottom: 40px;
    }
    footer #footer-box .footer-info .footer-info-row .footer-nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    footer #footer-box .footer-info .footer-info-row .footer-nav ul {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    footer #footer-box .footer-info .footer-info-row .footer-nav ul li {
        flex-basis: auto;
        flex-grow: 0;
        flex-shrink: 0;
        line-height: 1;
    }
    footer #footer-box .footer-info .footer-info-row .footer-nav ul li + li {
        border-left: 1px solid var(--k-color-dark);
    }
    footer #footer-box .footer-info .footer-info-row .footer-nav ul li a {
        display: inline-block;
        text-decoration: none;
        color: var(--k-color-dark);
        font-size: 14px;
        padding: 0 20px 0 0;
        line-height: 1;
    }
    footer #footer-box .footer-info .footer-info-row .footer-nav ul li + li a {
        padding: 0 20px;
    }
    footer #footer-box .footer-info .footer-info-row .footer-nav ul li a.active {
        color: var(--k-color-pink);
        font-weight: 700;
    }
    footer #footer-box .footer-info .footer-info-row .footer-nav ul li a:hover {
        color: var(--k-color-pink);
    }

    footer #footer-box .footer-info .footer-info-row .footer-info-col {
        font-size: 12px;
        color: var(--k-color-dark);
    }

    
    footer #footer-box .footer-info .footer-info-row .footer-copyright {
        font-size: 12px;
        color: var(--k-color-dark);
        margin-top: 10px;
    }

    footer #footer-box .footer-service {
        flex-basis: 220px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    
    footer #footer-box .footer-service .footer-service-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        padding: 20px;
        border-radius: 10px;
        background-color: #e0e0e6;
    }
    footer #footer-box .footer-service .footer-service-box .footer-service-box-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        margin-right: 20px;
    }
    footer #footer-box .footer-service .footer-service-box .footer-service-box-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    footer #footer-box .footer-service .footer-service-box .footer-service-box-text .footer-service-box-text-title {
        font-size: 18px;
        color: var(--k-color-dark);
        font-weight: 700;
    }
    footer #footer-box .footer-service .footer-service-box .footer-service-box-text .footer-service-box-text-tel {
        font-size: 14px;
        color: var(--k-color-dark);
        font-weight: 700;
    }
    footer #footer-box .footer-service .footer-service-box .footer-service-box-text .footer-service-box-text-time {
        font-size: 12px;
        color: var(--k-color-dark);
        font-weight: 400;
    }
    
    footer #footer-box .footer-service a {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--k-color-dark);
        font-size: 14px;
        font-weight: 400;
        border-radius: 10px;
        background-color: #e0e0e6;
        padding: 8px;
    }
    footer #footer-box .footer-service a svg {
        margin-right: 10px;
    }
    
}

@media (min-width: 1200px) {
    footer {
        background-color: var(--k-bg);
        padding-top: 40px;
        padding-bottom: 40px;
    }
    footer #footer-box .footer-logo {
        flex-basis: 170px;
        flex-grow: 0;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    footer #footer-box .footer-info .footer-info-row .footer-info-col {
        font-size: 12px;
        color: var(--k-color-dark);
    }
    footer #footer-box .footer-info .footer-info-row .footer-info-col dl {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        list-style: none;
        padding: 0;
        margin: 0 0 5px 0;
    }
    footer #footer-box .footer-info .footer-info-row .footer-info-col dl dt {
        font-weight: 400;
        color: var(--k-color-dark);
        margin: 0;
    }
    footer #footer-box .footer-info .footer-info-row .footer-info-col dl dd {
        font-weight: 400;
        color: var(--k-color-dark);
        margin: 0 10px 0 0;
    }



    footer #footer-box .footer-service {
        flex-basis: 320px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    footer #footer-box .footer-service .footer-service-box .footer-service-box-icon {
        margin-right: 28px;
    }

}

@media (min-width: 1400px) {
    footer #footer-box .footer-logo {
        flex-basis: 200px;
        flex-grow: 0;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    footer {
        background-color: var(--k-bg);
        padding-top: 40px;
        padding-bottom: 40px;
    }

}





@media (min-width: 576px) {

}
@media (min-width: 768px) {

}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}

@media (min-width: 1400px) {

}