$color: #e31a4c;
$border-color: #ee4352;
$sub-color: #de848c;
$title-color: #2f333f;
@import url("/assets/fonts/nanum-gothic/nanumgothic.css");
@import url("/assets/fonts/s-core/s-core.css");
html,
body {
    height: 100%;
}

html {
    overflow-y: scroll;
    -webkit-text-size-adjust: none;
}

html.noScroll {
    overflow: hidden;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
figure,
figcaption,
hgroup {
    margin: 0;
    padding: 0;
}

body,
h1,
h2,
h3,
h4,
select,
textarea,
input,
label,
button {
    word-break: keep-all;
    color: #757575;
    font-size: 13px;
    font-family: "Nanum Gothic", Dotum, Arial, Helvetica, sans-serif;
    font-weight: normal;
    line-height: 1.6;
}

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

iframe {
    border: none;
}

iframe.pop {
    width: 100%;
}

iframe.affiliates,
iframe.affiliatelist,
iframe.recruitlist {
    width: 100%;
    height: 293px;
    vertical-align: top;
    background: transparent;
    visibility: hidden;
}

iframe.jobs {
    width: 100%;
    height: 417px;
    vertical-align: top;
    background: transparent;
    visibility: hidden;
}

li {
    list-style: none;
    word-break: keep-all;
}

/* Space */

hr {
    clear: both;
    display: block;
    visibility: hidden;
    width: 1px;
    height: 40px !important;
    font-size: 0;
    line-height: 0;
}

/* Basic */

img {
    border: 0;
}

mark {
    display: inline-block;
    background-color: transparent;
}

small {
    font-size: 12px;
}

em,
address,
del,
small {
    font-style: normal;
}

.color-gray {
    color: #999;
}

.color-lightgray {
    color: #eee;
}

.no-border {
    border: none !important;
}

.clear {
    clear: both;
}

.hover-opc {
    opacity: 1;
    transition: 0.3s all;
    &:hover {
        opacity: 0.7;
        transition: 0.3s all;
    }
}

textarea {
    &::-webkit-scrollbar {
        width: 2px;
    }
    &::-webkit-scrollbar-track {
        background-color: #eaeaea;
        border-left: 1px solid #ccc;
    }
    &::-webkit-scrollbar-thumb {
        background-color: $sub-color;
    }
    &::-webkit-scrollbar-thumb:hover {
        background-color: #aaa;
    }
    scrollbar-base-color: #e4a8ae;
    scrollbar-arrow-color: #fff;
}

.bg-primary {
    background: $color !important;
    &.bordered {
        border: 1px solid $color !important;
    }
}

button {
    cursor: pointer;
}

.phone-icon {
    border-radius: 8px;
}

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.bold {
    font-weight: bold;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.relative {
    position: relative;
}

input[readonly] {
    background: #f9f9f9 !important;
}

input:focus {
    outline: none;
}

::selection {
    // background: $color;
    text-shadow: none;
    color: $color;
}

.select2-container {
    min-width: 70px;
}

// input.number {
// 	text-align: right;
// }
.select2-container--default .select2-selection--single {
    min-width: 70px;
}

.bold {
    font-weight: bold;
}

#loading {
    display: none;
    position: fixed;
    z-index: 3000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0) url("/assets/images/ajax_loading.gif") 50% 50% no-repeat;
    background-size: 50px;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

button {
    &:focus {
        outline: none;
    }
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.8) url("http://i.stack.imgur.com/FhHRx.gif") 50% 50% no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */

body.loading2 {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */

body.loading2 .modal {
    display: block;
}

.color-red {
    color: #ee4352 !important;
}

.font-sm {
    font-size: 12px;
}

ul {
    li {
        font-size: 13px;
        line-height: 1.2em;
    }
}

textarea {
    resize: none;
    text-align: left;
    padding: 10px;
    background: #fff;
    font-size: 13px;
    line-height: 20px;
    outline: none;
}

textarea:read-only {
    background: #fafafa !important;
}

.color-white {
    color: #fff !important;
}

.disable-scroll {
    /* disable scrollbar on both x and y axis */
    overflow: hidden;
    /* disable scrollbar on x-axis only */
    overflow-x: hidden;
    /* disable scrollbar on y-axis only */
    overflow-y: hidden;
    /* disable scroll */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* OPTIONAL: none of dom element will be click-able */
    pointer-events: none;
}

.grayLayer {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #666;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1079;
}

[class^="modal-"] {
    border: 1px solid #eee;
    padding: 30px;
    display: none;
    position: absolute;
    // z-index:50;
    z-index: 1080;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    .relative-box {
        position: relative;
        width: 100%;
        height: 100%;
        .close {
            position: absolute;
            top: -33px;
            right: -90px;
            width: 49px;
            height: 49px;
            background: url("/assets/images/mobile/right_close.png") center center no-repeat;
            cursor: pointer;
            &:hover {
                opacity: 0.7;
            }
        }
    }
}

.form-error.valid {
    margin: 0 !important;
}

.profile-round {
    border-radius: 50%;
}

.sub-color {
    color: $sub-color !important;
}

.form-error {
    text-align: left;
    color: #ff5a5f;
    font-size: 13px;
}

.bd-red {
    border-color: #f3cbcc !important;
}

.w25 {
    width: 25% !important;
}

.w30 {
    width: 30% !important;
}

.w33 {
    width: 33.3% !important;
}

.w66 {
    width: 66.6% !important;
}

.w40 {
    width: 40% !important;
}

.w50 {
    width: 50% !important;
}

.w60 {
    width: 60% !important;
}

.w70 {
    width: 70% !important;
}

.w100 {
    width: 100% !important;
}

.fsz-12 {
    font-size: 12px !important;
}

.fsz-13 {
    font-size: 13px !important;
}

.upper-case {
    text-transform: uppercase;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-size: 14px;
}

.select2-results__option[aria-selected] {
    font-size: 14px;
    text-align: left;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 14px;
}

.select2-results__option {
    font-size: 14px;
}

// a {
// 	transition: all .3s;
// 	&:hover {
// 		opacity: 0.8 !important;
// 	}
// }
.pt-10 {
    padding-top: 10px !important;
}

.pl-0 {
    padding-left: 0px !important;
}

.pl-10 {
    padding-left: 10px !important;
}

.pd-10 {
    padding: 10px !important;
}

.pd-20 {
    padding: 20px !important;
}

.pd-30 {
    padding: 30px !important;
}

.mt-5 {
    margin-top: 5px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-50 {
    margin-top: 50px !important;
}

.mt-100 {
    margin-top: 100px !important;
}

.mb-5 {
    margin-bottom: 5px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}

.mb-100 {
    margin-bottom: 100px !important;
}

.ml-5 {
    margin-left: 5px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.ml-15 {
    margin-left: 15px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.mr-5 {
    margin-right: 5px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.mr-15 {
    margin-right: 15px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

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

.display-none {
    display: none !important;
}

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

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

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

.fll {
    float: left;
}

.flr {
    float: right;
}

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

.ovh {
    overflow: hidden;
}

.ovi {
    overflow: initial !important;
}

.base-container {
    width: 1200px;
    // width: 1005px;
    margin: 0 auto;
}

.outer-container {
    width: 1597px;
    max-width: 1200px;
    // max-width: 95%;
    margin: 0 auto;
    position: relative;
}

.upper-bar {
    border-top: 6px solid #e11a4d;
    height: 8px;
    width: 95%;
    margin: auto;
}

.layout-container {
    background: #ccc;
}

ul {
    display: inline-block;
    overflow: hidden;
}

.blur {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

a {
    text-decoration: none;
}

ul {
    overflow: hidden;
}
@media print {
    .no-print {
        display: none;
    }
}

.card-button {
    display: inline-block;
    background: #ed174a;
    color: #fff;
    border-radius: 25px;
    padding: 0px 15px;
    font-size: 12px;
    margin-bottom: 11px;
    -webkit-box-shadow: 0 2px 0 #c5376d, 0 2px 2px rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 0 #c5376d, 0 2px 2px rgba(0, 0, 0, 0.35);
    color: #fff;
}

.fixed-counsel {
    position: fixed;
    right: -4px;
    top: 0;
    z-index: 99;
    height: 100vh;
    background: #f5f5f5;
    border: 1px solid #ccc;
    .border {
        border-top: 0;
        background: transparent;
        width: 100px;
    }
    .card-img {
        display: inline-block;
        width: 90px;
    }

    .title-area {
        padding: 30px 15px;
        border-bottom: 1px solid #ccc;
        text-align: center;
        background: #333;
        color: #fff;
        position: relative;
        img {
            vertical-align: middle;
            display: inline-block;
            margin: auto;
            width: 40%;
            margin-bottom: 10px;
        }
        .event-flag {
            display: inline-block;
            position: absolute;
            left: 15px;
            top: 125px;
            width: 70px;
        }
        .title-text {
            text-align: center;
            font-family: "s-core";
            display: inline-block;
            color: #fff;
            font-size: 13px;
            vertical-align: sub;
            font-weight: bold;
            padding-bottom: 3px;
            line-height: 18px;
        }
    }
    .nav-area {
        width: 100%;
        display: block;
        li {
            cursor: pointer;
            &:hover {
                opacity: 0.7;
            }
            padding: 20px 15px;
            // padding-bottom: 15px;
            // margin-bottom: 15px;
            border-bottom: 1px solid #ccc;
            text-align: center;
            img {
                display: inline-block;
                width: 40%;
                margin-bottom: 10px;
            }
            span {
                display: block;
                font-family: "s-core";
                color: #434343;
                font-size: 12px;
                letter-spacing: -0.5px;
                text-align: center;
            }
            .phone-textbox {
                .text1 {
                    a {
                        letter-spacing: -0.5px;
                        color: $color;
                        font-size: 13px;
                        font-weight: bold;
                    }
                    margin-bottom: 5px;
                }
                .text2 {
                    font-size: 11px;
                }
            }
        }
    }
    .phone-area {
        padding: 10px 3px;
        background: #e11c4a;
        text-align: center;
        a {
            text-align: center;
            color: #fff;
            font-size: 13px;
            letter-spacing: -1px;
            font-weight: bold;
        }
    }
}

.logo-bg {
    // position: absolute;
    // // top: 0px;
    // top: -29px;
    // // left: 15px;
    // left: -140px;
    // width: 415px;
    // z-index: -1;
    position: absolute;
    top: -4px;
    left: -114px;
    width: 308px;
    z-index: -1;
}

.corona-floating {
    position: absolute;
    right: -100px;
    top: 10px;
}

.icon-header {
    overflow: hidden;
    // padding: 10px 0;
    padding-bottom: 10px;
    padding-top: 0 !important;
    margin-top: 0 !important;
    > div {
        display: inline-block;
        float: none !important;
    }
    .icon-box {
        width: 33.3%;
        float: left;
        text-align: left;
        img {
            &:first-child {
                margin-right: 10px;
            }
        }
        ul {
            // margin-bottom: -20px;
            li {
                float: left;
                margin-right: 15px;
                &:last-child {
                    margin-right: 0;
                }
                a {
                    display: inline-block;
                    padding-top: 4px;
                    color: #9da6ab;
                    img {
                        width: 15px;
                    }
                }
                .branch-link {
                    padding: 4px 8px;
                    border-radius: 4px;
                    margin-right: 0;
                    font-size: 14px;
                    background: #e9e9e9;
                    color: #9da6ab;
                    transition: all 0.3s;
                    &:hover {
                        transition: all 0.3s;
                        background: #e11a4d;
                        color: #fff;
                        .color-red {
                            color: #fff !important;
                        }
                    }
                    .color-red {
                        color: #e31a4c;
                    }
                }
            }
        }
    }
    .logo-box {
        width: 30%;
        float: left;
    }
    .right-menu {
        width: 33.3%;
        float: right;
        // overflow: hidden;
        text-align: right;
        ul {
            position: absolute;
            right: 0;
            bottom: 10px;
            overflow: visible;
            li {
                display: inline-block;
                // margin-right: 10px;
                position: relative;
                line-height: 35px;
                .balloon-hover {
                    margin-right: 10px;
                    width: 43px;
                    height: 52px;
                    background: url(/assets/images/front/icons/counsel.png) no-repeat;
                    background-position: bottom center;
                    display: inline-block;
                    transition: all 0.3s;
                    &:hover {
                        transition: all 0.3s;
                        // background: url(/assets/images/front/icons/counsel_on.png) no-repeat;
                    }
                }
                .balloon {
                    z-index: 11;
                    position: absolute;
                    opacity: 0;
                    top: 30px;
                    left: -17px;
                    width: 76px;
                    height: 27px;
                    background: url(/assets/images/front/icons/balloon.png) no-repeat;
                    background-position: top center;
                    padding-top: 10px;
                    font-size: 11px;
                    color: #fff;
                    text-align: center;
                    transition: all 0.3s;
                }
                &:hover {
                    .balloon {
                        opacity: 1;
                        top: 52px;
                        transition: all 0.3s;
                    }
                }
            }
        }
    }
}
.header-top {
    height: 1px;
    width: 100%;
    border-top: 1px solid #ccc;
}
.header-bottom {
    height: 1px;
    width: 100%;
    border-bottom: 1px solid #bdbdbd;
}
.third-header-container {
    width: 100%;
    position: absolute;
    border-bottom: 0;
    height: 0;
    transition: height 0.3s;
    &.active {
        height: 265px;
        border-bottom: 1px solid #ccc;
        transition: height 0.3s;
    }
    z-index: 10;
    overflow: hidden;
}
.third-header {
    overflow: hidden;
    // position: absolute;
    // background: #fff;
    // background: rgba(255, 255, 255, 0.5);
    width: 100%;

    ul {
        padding-top: 10px;
        padding-bottom: 10px;
        background: #fff;
        height: 254px;
        width: 200px;
        float: left;
        overflow: hidden;
        text-align: center;
        opacity: 0.9;
        &.active {
            // opacity: 0.95;
            background: #ff0042;
            li {
                a {
                    p {
                        // color: #333;
                        color: #fff;
                    }
                }
            }
        }
        li {
            a {
                p {
                    &.active {
                        // color: #e11a4d;
                        text-decoration: underline;
                    }
                    &:hover {
                        // color: #e11a4d;
                        text-decoration: underline;
                    }
                    color: #777;
                    font-size: 14px;
                    letter-spacing: -0.5px;
                    padding-bottom: 10px;
                    padding-top: 10px;
                }
            }
        }
    }
}
.header {
    // border-top: 1px solid #7d7d7d;
    // padding: 15px 0 15px 0;
    box-sizing: border-box;
    // height: 90px;
    z-index: 10;
    text-align: center;
    .logo {
        width: 202px;
        // display: inline-block;
        float: left;
        margin-left: 10px;
        // margin-top: 6px;
        position: relative;
        a {
            width: 202px;
            height: 60px;
            display: inline-block;
            img {
                position: absolute;
                top: -13px;
                left: 20px;
                // top: -23px;
                // left: -75px;
            }
        }
    }
    .bg-header {
        z-index: 10;
        // border-top: 1px solid #d9d9d9;
        position: absolute;
        left: 0;
        top: 103px;
        background: #fff;
        width: 100%;
        height: 0;
        // display: none;
        // padding: 0;
        overflow: hidden;
        transition: all 0.3s;
        &.active {
            transition: all 0.3s;
            height: 190px;
        }
    }

    ul.navigation {
        // margin-left: 24px;
        overflow: inherit;
        // margin-top: 15px;
        height: 44px;
        width: 100%;
        > li {
            float: left;
            cursor: pointer;
            margin-right: 2px;
            width: 198px;
            // padding-bottom: 23px;
            // margin-top: 34px;
            &:last-child {
                a {
                    // padding-right: 0;
                    &:before {
                        content: "";
                    }
                }
            }
            > a {
                width: 100%;
                color: #333;
                font-weight: bold;
                font-size: 15px;
                // font-family: 'Quicksand', sans-serif;
                letter-spacing: -0.5px;
                display: inline-block;
                // margin-right: 22px;
                // padding-bottom: 30px;
                position: relative;
                &.active {
                    color: #e11a4d;
                }
                &:hover:after {
                    width: 100%;
                    transition: all 0.4s;
                }
                // padding-right: 50px;
                // padding-left: 50px;
                padding-bottom: 10px;
                padding-top: 10px;
                line-height: 30px;
                &:before {
                    // content: " | ";
                    // position: absolute;
                    // right: 0;
                    // color: #ccc;
                }
                &:after {
                    content: "";
                    position: absolute;
                    bottom: 25px;
                    left: 0;
                    width: 0%;
                    // border-bottom: 1px solid #e11a4d;
                    transition: all 0.4s;
                }
                &.active-fix {
                    // &:after {
                    //   content: '';
                    //   position: absolute;
                    //   bottom: 25px;
                    //   left: 0;
                    //   width: 100%;
                    //   // border-bottom: 1px solid #e11a4d;
                    //   transition: all .4s;
                    // 	color: #e11a4d;
                    // }
                    color: #e11a4d;
                }
                &:not(.active-fix) {
                    &:hover {
                        transition: all 0.4s;
                        color: #e11a4d;
                    }
                    &.active {
                        &:after {
                            content: "";
                            position: absolute;
                            bottom: 25px;
                            left: 0;
                            width: 100%;
                            // border-bottom: 1px solid #e11a4d;
                            transition: all 0.4s;
                            color: #e11a4d;
                        }
                    }
                }
            }
            &:last-child {
                a {
                    margin-right: 0;
                }
            }
            &.active {
                > .second-header {
                    transition: all 0.45s ease;
                    opacity: 1;
                    visibility: visible;
                }
                .arrow {
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 0 8px 8px 8px;
                    border-color: transparent transparent #e73158 transparent;
                    margin: -61px auto 0 auto;
                    cursor: pointer;
                    position: absolute;
                    bottom: -2px;
                    left: 44%;
                }
            }
            > .second-header {
                // height: 60px;
                background: #e11c4a;
                .base-container {
                    overflow: hidden;
                    text-align: left;
                }
                z-index: 11;
                visibility: hidden;
                // background: #fff;
                position: absolute;
                left: 0;
                // top: 136px;
                top: 162px;
                // top: 198px;
                // top: 82px;
                width: 100%;
                opacity: 0;
                // visibility: hidden;
                // padding: 0 15px 0 20px;
                > div {
                    // .menu-text {
                    //   color: #9da6ab;
                    //   font-size: 18px;
                    //   line-height: 26px;
                    //   letter-spacing: -0.5px;
                    //   float: left;
                    //   width: 23%;
                    //   margin-top: 20px;
                    // }
                    > ul {
                        > li {
                            float: left;
                            &.active {
                                transition: all 0.35s;
                                p {
                                    transition: all 0.35s;
                                    color: #fff;
                                }
                            }
                            > a {
                                display: inline-block;
                                // width: 90px;
                                text-align: center;
                                padding: 10px 15px;
                                img {
                                    width: 100%;
                                }
                                p {
                                    color: #eee;
                                    display: inline-block;
                                    font-size: 15px;
                                    margin-top: 6px;
                                    padding-bottom: 5px;
                                    position: relative;
                                    line-height: 18px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .third-header {
    }
}

.op5 {
    opacity: 0.5;
    transition: all 0.35s;
    p {
        transition: all 0.35s;
        color: #9da6ab;
        border: none;
    }
}

.sub-header {
    border-top: 1px solid #d9d9d9;
    padding-top: 15px;
    ul {
        display: none;
        &.show {
            display: block;
            text-align: left;
            margin-left: 255px;
        }
        > li {
            // float: left;
            display: inline-block;
            cursor: pointer;
            // padding-bottom: 23px;
            // margin-top: 34px;
            > a {
                margin-left: 10px;
                margin-right: 10px;
                padding-bottom: 3px;
                margin: 0 10px;
                color: #777;
                font-size: 15px;
                line-height: 22px;
                font-family: "Quicksand", sans-serif;
                letter-spacing: -0.5px;
                display: inline-block;
                // margin-right: 22px;
                position: relative;
                &:hover:after {
                    width: 100%;
                    transition: all 0.4s;
                }
                &:after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 0%;
                    border-bottom: 1px solid #e11a4d;
                    transition: all 0.4s;
                }
                &:hover {
                    transition: all 0.4s;
                    color: #e11a4d;
                }
                &.active {
                    &:after {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        border-bottom: 1px solid #e11a4d;
                        transition: all 0.4s;
                    }
                    color: #e11a4d;
                }
            }
            &:last-child {
                a {
                    // padding-right: 0;
                }
            }
        }
    }
}

.layout-footer {
    z-index: 11;
    //margin-top: -100px;
    padding-bottom: 20px;
    overflow: hidden;

    .button-area {
        .white-button {
            width: 98% !important;
            background: #fff;
            border: 1px solid #333;
            border-radius: 4px;
            padding: 10px;
            font-size: 15px;
            color: #333;
        }
        .black-button {
            width: 98% !important;
            background: #333;
            border: 1px solid #333;
            border-radius: 4px;
            padding: 10px;
            font-size: 15px;
            color: #fff;
        }
    }

    .small-label {
        width: 135px !important;
    }
    .large-label {
        width: 170px !important;
        span {
            font-size: 13px;
            letter-spacing: -1px;
        }
        .normal-text {
            font-size: 14px;
            letter-spacing: 0;
        }
    }
    .menthor-button {
        //margin-top: 100px;
        border-top: 5px solid #e73159;
        position: relative;

        // margin-bottom: -3px;
        // .footer-title {
        // 	background: #e11a4d;
        // 	padding: 12px 0;
        // 	width: 100%;
        // 	text-align: center;
        // 	cursor: pointer;
        // 	img {
        //     vertical-align: middle;
        // 	}
        // }
        .arrow {
            // display: none;
            width: 0;
            height: 0;
            border-style: solid;
            border-color: transparent transparent #e73158 transparent;
            // position: absolute;
            // left: 602.5px;
            // top: -61px;
            // border-width: 0 100px 55px 100px;
            // margin: -61px auto 0 auto;
            border-width: 55px 100px 0 100px;
            margin: -1px auto -55px auto;
            cursor: pointer;
            &:hover {
                .text {
                    transition: all 0.3s;
                    opacity: 0.7;
                }
            }
            .relative {
                width: 150px;
                height: 80px;
                .text {
                    position: absolute;
                    bottom: 30px;
                    left: -36px;
                    font-size: 13px;
                    line-height: 16px;
                    color: #fff;
                    text-align: center;
                }
                .line {
                    display: none;
                }
            }
            transition: border-color 0.5s;
            .plus {
                font-size: 25px;
                position: absolute;
                left: -8px;
                top: -3px;
                color: #fff;
            }
            &.open {
                .plus {
                    display: none;
                }
                width: 0;
                height: 0;
                border-style: solid;
                border-color: #e73158 transparent transparent transparent;
                // position: absolute;
                // left: 602.5px;
                // top: 0;
                border-width: 55px 100px 0 100px;
                margin: -1px auto -55px auto;
                cursor: pointer;
                transition: border-color 0.5s;
                .text {
                    // display: none;
                    bottom: 111px;
                }
                .line {
                    display: block;
                    top: -21px;
                    left: -9px;
                    position: absolute;
                    width: 20px;
                    height: 2px;
                    background: #fff;
                }
            }
        }
        .arrow-new {
            .relative {
                cursor: pointer;
                width: 150px;
                //height: 80px;
                height: 60px;
                margin-left: -77px;
                margin-top: -59px;
                .text {
                    position: absolute;
                    //left: -36px;
                    left: 45px;
                    top: 9px;
                    font-size: 13px;
                    line-height: 16px;
                    color: #fff;
                    text-align: center;
                }
                .line {
                    display: none;
                }
            }
            .plus {
                font-size: 25px;
                position: absolute;
                //left: -8px;
                //top: -38px;
                left: 70px;
                top: 22px;
                color: #fff;
            }
            width: 0;
            height: 0;
            border-style: solid;
            border-color: #e73158 transparent transparent transparent;
            // position: absolute;
            // left: 602.5px;
            // top: 0;
            border-width: 55px 100px 0 100px;
            margin: -1px auto -55px auto;
            //cursor: pointer;
            transition: border-color 0.5s;
            .text {
                // display: none;
                bottom: 111px;
            }
            .line {
                display: block;
                //top: -21px;
                //left: -9px;
                left: 68px;
                top: 39px;
                position: absolute;
                width: 20px;
                height: 2px;
                background: #fff;
            }
            &.open {
                .line {
                    display: block;
                }
                .plus {
                    display: none;
                }
            }
        }
        &.off {
            border-top: none;
            // padding-top: 100px;
        }
    }
    .menthor-content {
        height: 0;
        margin: 0;
        overflow: hidden;
        transition: margin 0.3s;
        &.open {
            transition: margin 0.3s;
            height: auto;
            margin: 100px 0 70px 0;
        }
        .name-input,
        textarea {
            &::placeholder {
                color: #ccc !important;
                font-size: 15px;
            }
        }
        .new-askbox {
            margin-top: 20px;
            // padding: 40px 0;
            // border-top: 2px solid #e11b4a !important;
            .flr1 {
                padding-top: 17px;
            }
            .purpose {
                box-sizing: border-box;
                padding-bottom: 5px !important;
                border-bottom: 1px solid #ccc;
                margin-bottom: 30px;
                > div {
                    font-size: 15px;
                    display: inline-block;
                    color: #999;

                    vertical-align: top;
                    line-height: 15px;
                    &.line {
                        display: block;
                    }
                }
                .custom-select {
                    padding: 0 4px;
                    &.fixed-select {
                        width: 85px;
                    }
                    .show {
                        .select-arrow {
                            right: -12px;
                        }
                    }
                }
            }
            .phone-box {
                .custom-select {
                    padding: 0 4px;
                    .show {
                        .select-arrow {
                            right: 0;
                        }
                    }
                }
                input {
                    font-size: 15px !important;
                    color: #333;
                    padding-top: 0 !important;
                    background: #fff;
                    &::placeholder {
                        color: #999;
                    }
                }
                p.dash {
                    line-height: initial !important;
                }
            }
            .asktime-box {
                padding-bottom: 5px !important;
                border-bottom: 1px solid #ccc;
                margin-bottom: 30px;
                .show {
                    padding-left: 0 !important;
                }
            }
            .custom-select {
                display: inline-block;
                position: relative;
                padding: 0 5px;
                .show {
                    cursor: pointer;
                    position: relative;
                    padding: 0 5px;
                    span {
                        font-size: 15px;
                        color: #333;
                        line-height: 15px !important;
                    }
                    .select-arrow {
                        border-color: #888 transparent transparent transparent;
                        border-style: solid;
                        border-width: 5px 4px 0 4px;
                        height: 0;
                        right: -9px;
                        margin-left: -4px;
                        margin-top: -2px;
                        position: absolute;
                        top: 50%;
                        width: 0;
                    }
                }
                ul.options,
                ul.branch-options,
                ul.phone-options {
                    display: none;
                    position: absolute;
                    top: 23px;
                    z-index: 10;
                    border: 1px solid #ccc;
                    li {
                        cursor: pointer;
                        padding: 7px 15px;
                        font-size: 14px;
                        color: #666;
                        border-bottom: 1px solid #eee;
                        background: #fff;
                        &:last-child {
                            border-bottom: none;
                        }
                        &:hover {
                            background: #eee;
                        }
                    }
                }
                ul.options {
                    li {
                        width: 100px;
                    }
                }
                ul.phone-options {
                    left: 0px;
                    li {
                        width: 28px;
                    }
                }
                ul.branch-options {
                    left: 0px;
                    li {
                        width: 100px;
                    }
                }
            }
            .agree-box {
                height: 100px;
                overflow: auto;
                text-align: left;
            }
        }

        .small-label {
            width: 135px !important;
        }
        .large-label {
            // width: 170px !important;
            width: 66% !important;
            // span {
            //   font-size: 13px;
            //   letter-spacing: -1px;
            // }
            .normal-text {
                font-size: 14px;
                letter-spacing: 0;
            }
        }
        input.form-error {
            margin-top: 0 !important;
        }
        input {
            font-size: 16px;
            &::-webkit-input-placeholder {
                /* Chrome/Opera/Safari */
                color: #e76d6d;
            }
            &::-moz-placeholder {
                /* Firefox 19+ */
                color: #e76d6d;
            }
            &:-ms-input-placeholder {
                /* IE 10+ */
                color: #e76d6d;
            }
            &:-moz-placeholder {
                /* Firefox 18- */
                color: #e76d6d;
            }
        }
        input[type="text"] {
            background: #f2f2ec;
            box-shadow: none;
            outline: none;
            border: 0;
            vertical-align: top;
            // height: 52px;
            margin-left: -4px;
            padding: 0 20px;
            width: 89%;
            box-sizing: border-box;
            color: $color;
            margin-top: 0 !important;
        }
        textarea {
            // margin-top: 0 !important;
            // color: $color;
            // font-size: 16px;
            // background: #f2f2ec;
            // border: none;
            // // width: 932px;
            // width: 905px;
            // padding-left: 20px;
            // height: 138px;
            // margin-left: -3px;
            // vertical-align: top;
            // &::-webkit-input-placeholder {
            //   /* Chrome/Opera/Safari */
            //   color: #e76d6d;
            // }
            // &::-moz-placeholder {
            //   /* Firefox 19+ */
            //   color: #e76d6d;
            // }
            // &:-ms-input-placeholder {
            //   /* IE 10+ */
            //   color: #e76d6d;
            // }
            // &:-moz-placeholder {
            //   /* Firefox 18- */
            //   color: #e76d6d;
            // }
        }
        .menthor-title {
            color: $color;
            font-size: 27px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 50px;
        }
        .table-row {
            .fll {
                padding-right: 5px;
                box-sizing: border-box;
            }
        }
        table {
            // margin-left: -2px;
            margin-bottom: 2px;
            width: 100%;
            tr {
                // background: #f2f2ec;
                &:last-child {
                    td {
                        border-bottom: 0;
                    }
                }
            }
            td {
                border-bottom: 2px solid #fff;
            }
            .img-box {
                width: 52px;
                vertical-align: middle;
                display: table-cell;
                // background: $color;
                img {
                    // width: 90%;
                }
                p {
                    font-size: 12px;
                    letter-spacing: -0.5px;
                    text-align: center;
                }
            }
            .subject-name {
                padding: 7px 15px;
                color: $color;
                font-size: 16px;
                width: 20%;
                // text-align: center;
                box-sizing: border-box;
            }
            .label-box {
                box-sizing: border-box;
                margin-bottom: 3px;
                padding: 10px 0;
                width: 88%;
                span {
                    margin-left: 5px;
                    vertical-align: middle;
                }
                label {
                    display: inline-block;
                    width: 33.3%;
                    // &.long {
                    //   width: 170px;
                    // }
                }
            }
        }
        .counsel-box {
        }
        .useless-box {
            border: 6px solid #f2f2ec;
            // height: 50px;
            margin: 15px 0;
        }
        .img-area {
            //border: 2px solid #e4001c;
            box-sizing: border-box;
            a {
                width: 100%;
                display: inline-block;
                img {
                    width: 100%;
                    display: inline-block;
                }
            }
        }
        .button-area {
            overflow: hidden;
            margin-bottom: 10px;
            button {
                width: 100%;
            }
            .gray-button {
                border: 2px solid #898989;
                color: #898989;
                text-align: center;
                padding: 10px 0;
                font-size: 17px;
                background: #fff;
                transition: all 0.3s;
                &:hover {
                    transition: all 0.3s;
                    color: #fff;
                    background: #898989;
                }
            }
            .primary-button {
                border: 2px solid #df0440;
                color: #df0440;
                text-align: center;
                padding: 10px 0;
                font-size: 17px;
                background: #fff;
                transition: all 0.3s;
                &:hover {
                    transition: all 0.3s;
                    color: #fff;
                    background: #df0440;
                }
            }
        }
        .agree-box {
            height: 100px;
            overflow: auto;
        }
    }
    .base-container {
        // border-top: 1px solid #ced2d5;
        &.inner-footer {
            padding-top: 30px;
            .row-2 {
                &.trunk {
                    .left {
                        float: left;
                        width: 500px;
                        .logo-box {
                            float: left;
                            width: 110px;
                            img {
                                width: 80%;
                            }
                        }
                        .t-box {
                        }
                    }
                    .right {
                        float: right;
                        width: 645px;
                        .logo-box {
                            float: left;
                            width: 110px;
                            img {
                                width: 80%;
                            }
                        }
                        .t-box {
                        }
                    }
                }
                &.branch {
                    .logo-box {
                        float: left;
                        width: 110px;
                        img {
                            width: 80%;
                        }
                    }
                    .t-box {
                    }
                }
            }
        }
        .footer-logo {
            //width: 8%;
            //float: left;
        }
        .right-area {
            width: 100%;
            box-sizing: border-box;
            .row-1 {
                margin-bottom: 30px;
                > ul {
                    display: inline-block;
                    > li {
                        float: left;
                        a {
                            font-size: 14px;
                            color: #9da6ab;
                            transition: all 0.3s;
                            &:hover {
                                transition: all 0.3s;
                                color: #e11a4d;
                            }
                        }
                        &.separator {
                            margin: 0 10px;
                        }
                    }
                }
                .row-2 {
                    font-size: 13px;
                    line-height: 17px;
                    color: #9da6ab;
                }
            }
        }
    }
}

.main-page {
    // padding-top: 10px;
    padding-bottom: 30px;
    .artistcrew-box {
        overflow: hidden;
        margin-top: 20px;
        .titlebox {
            float: left;
            width: 20%;
            img {
                vertical-align: text-top;
            }
        }
        .list-box {
            float: right;
            width: 80%;
            a {
                width: 100%;
            }
            .infobox {
                overflow: hidden;
                .keywords {
                    float: left;
                    border: 2px solid #666;
                    border-radius: 20px;
                    padding: 4px;
                    width: 72px;
                    margin-right: 15px;
                    font-size: 14px;
                    text-align: center;
                    color: #666;
                }
                .title {
                    float: left;
                    font-size: 17px;
                    margin-right: 15px;
                    color: #333;
                    line-height: 31px;
                }
                .address {
                    float: left;
                    line-height: 32px;
                    .info1 {
                        float: left;
                        font-size: 13px;
                        color: #666;
                    }
                    .info2 {
                        float: left;
                        font-size: 13px;
                        color: #666;
                        padding-left: 5px;
                    }
                }
            }
        }
    }
    .artistcrew-box-deprecated {
        .titlebox {
            margin-top: 40px;
            margin-bottom: 20px;
            .title1 {
                font-size: 20px;
                font-weight: 300;
                color: #333;
                vertical-align: middle;
            }

            .title2 {
                font-size: 20px;
                font-weight: bold;
                color: #333;
                vertical-align: middle;
            }

            .title3 {
                font-size: 14px;
                font-weight: 200;
                color: #333;
                vertical-align: middle;
                margin-left: 10px;
            }
        }

        ul {
            width: 100%;
            overflow: hidden;
            li {
                float: left;
                width: 30%;
                margin-right: 4.9%;
                background-size: cover !important;
                transition: all 0.3s;
                &:hover {
                    opacity: 0.8;
                    transition: all 0.3s;
                }
                &:last-child {
                    margin-right: 0;
                }
                a {
                    display: block;
                    height: 360px;
                    position: relative;
                    .infobox {
                        position: absolute;
                        bottom: 0;
                        width: 100%;
                        background: rgba(0, 0, 0, 0.7);
                        padding: 15px;
                        box-sizing: border-box;
                        .info1 {
                            color: #fff;
                            font-size: 17px;
                            margin-bottom: 10px;
                        }

                        .info2 {
                            color: #ccc;
                            font-size: 12px;
                            line-height: 18px;
                            height: 18px;
                            overflow: hidden;
                        }
                        .info3 {
                            color: #ccc;
                            font-size: 12px;
                            line-height: 18px;
                        }
                    }
                }
            }
        }
    }
    .left-area {
        width: 69%;
        float: left;
        position: relative;
    }
    .right-area {
        width: 30%;
        float: right;
        border: 1px solid #e9e9e7;
        .class-box {
            position: relative;
            // border: 1px solid #e9e9e7;
            border-bottom: none;
            .trans-img {
                position: absolute;
                bottom: 3px;
                left: 2.5%;
                width: 95%;
                height: 180px;
                margin-left: 2px;
            }
            .trans-arrow-box {
                position: absolute;
                bottom: 15px;
                width: 100%;
                text-align: center;
                .trans-arrow {
                    display: inline-block;
                    // width: 50px;
                }
            }
            > img {
                width: 100%;
            }
            .overview {
                background: #f5f5f5;
                // background: #e11c4a;
                // height: 22px;
                overflow: hidden;
                padding: 6px 10px;
                padding-right: 13px;
                // border-top: 1px solid #7a7a7a;
                // border-bottom: 1px solid #e9e9e7;
                div {
                    font-size: 15px;
                    // color: #fff;
                    color: #7a7a7a;
                    padding: 0 7px;
                    line-height: 20px;
                    float: left;
                    box-sizing: border-box;
                    letter-spacing: -0.5px;
                    &.soft {
                        color: #a8a9ad;
                    }
                    &:last-child {
                        text-align: right;
                    }
                    &.overview-title {
                        text-align: center;
                        font-size: 15px;
                        font-weight: bold;
                        float: left;
                        display: inline-block;
                        line-height: 37px;
                        .live {
                            display: inline-block;
                            margin-left: 6px;
                            background: #ffdae1;
                            color: #ee2955;
                            padding: 3px 8px;
                            border-radius: 40px;
                            font-size: 10px;
                            line-height: normal;
                            letter-spacing: 0;
                        }
                    }
                    &.overview-right {
                        float: right;
                        p {
                            text-align: right;
                            font-size: 13px;
                            letter-spacing: -1px;
                        }
                        p.date {
                            letter-spacing: -0.3px;
                            font-size: 11px;
                            margin-bottom: -3px;
                        }
                    }
                }
            }
            .class-tab {
                width: 100%;
                display: block;
                li {
                    border-top: 1px solid #e9e9e7;
                    border-right: 1px solid #e9e9e7;
                    border-bottom: 1px solid #e9e9e7;
                    text-align: center;
                    float: left;
                    width: 33.3%;
                    padding: 7px 8px;
                    box-sizing: border-box;
                    font-size: 13px;
                    cursor: pointer;
                    color: #c0c0c0;
                    background: #f9f9f9;
                    &:last-child {
                        border-right: none;
                    }
                    &.active {
                        border-bottom: none;
                        color: #ea2c5a;
                        font-weight: bold;
                        background: #fff;
                    }
                }
                // display: block;
                // margin-top: -6px;
                &.branch {
                    display: none;
                }
            }
            .class-list {
                &::-webkit-scrollbar {
                    width: 6px;
                    height: 6px;
                }
                &::-webkit-scrollbar-thumb {
                    background: #dbdbdb;
                    border-radius: 10px;
                }
                &::-webkit-scrollbar-thumb:hover {
                    background: linear-gradient(13deg, #c7ceff 14%, #f9d4ff 64%);
                }
                &::-webkit-scrollbar-track {
                    background: #ffffff;
                    border-radius: 0px;
                    box-shadow: inset 7px 10px 12px #f0f0f0;
                }
                // border-bottom: 1px solid #e9e9e7;
                // margin-top: -6px;
                border-top: 0;
                width: 100%;
                // border: 2px solid #891635;
                // border: 2px solid #ddd;
                background: #fff;
                box-sizing: border-box;
                overflow: auto;
                // height: 426px;
                height: 387px;
                &.branch {
                    // height: 314px;
                    height: 417px;
                }
                li {
                    background: #fff;
                    // border-bottom: 1px solid #a1a1a1;
                    // margin: 10px;
                    padding: 8px 0;
                    &:last-child {
                        border-bottom: 0;
                        // margin-bottom: 0;
                        margin-bottom: 90px;
                    }
                    &.active {
                        background: #e11c4a;
                    }
                    // &:last-child {
                    // }
                    cursor: pointer;
                    &:hover,
                    &.active {
                        // background: #e11c4a;
                        background: #eee;
                        // opacity: 0.5;
                        // td,
                        // a {
                        //   color: #fff !important;
                        //   &.color-red {
                        //     color: #fff !important;
                        //   }
                        // }
                    }
                    table {
                        td {
                            &:last-child {
                                // text-align: right;
                            }
                            span.circle-number {
                                color: #fff;
                                font-size: 12px;
                                font-weight: bold;
                                background: #eee;
                                border-radius: 50%;
                                width: 20px;
                                height: 20px;
                                display: inline-block;
                                text-align: center;
                                line-height: 20px;
                                &.nailart {
                                    background: #fe9684;
                                }
                                &.makeup {
                                    background: #ee8fa5;
                                }
                                &.esthetic {
                                    background: #b18acf;
                                }
                                &.hair {
                                    background: #b3ceca;
                                }
                                &.special {
                                    background: #f3c35e;
                                }
                            }
                            img {
                                width: 40px;
                                margin: 0 6px;
                                margin-left: 0;
                            }
                            a {
                                width: 60px;
                                padding-top: 10px;
                                padding-bottom: 10px;
                                display: inline-block;
                                // color: #fff !important;
                                font-size: 14px;
                                vertical-align: middle;
                                text-align: center;
                                margin-left: 10px;
                                // background: #df5cac;
                                &.status-regular {
                                    color: #e11c4a;
                                }
                                &.status-active {
                                    color: #ed6f31;
                                }
                                &.status-day {
                                    background: #b061f9;
                                }
                            }
                            &.class-title {
                                font-size: 13px;
                                width: 69%;
                                padding: 0 7px;
                                color: #333;
                            }
                            &.color-red {
                                padding-top: 0px;
                                font-size: 11px;
                                padding: 0 7px;
                                height: 14px;
                                // height: 28px;
                                display: inline-block;
                                overflow: hidden;
                                color: #666 !important;
                            }
                        }
                    }
                }
            }
        }
    }
    .second-row {
        clear: both;
        overflow: hidden;
        margin-top: 20px;
        .menu-box {
            ul {
                overflow: hidden;
                width: 100%;
                display: block;
                li {
                    float: left;
                    width: 20%;
                    text-align: center;
                    .icon-text {
                        font-family: "s-core";
                        text-align: center;
                        color: #444;
                        font-size: 19px;
                        line-height: 20px;
                    }
                }
            }
        }
        .phone-box {
            background: #ebebeb;
            height: 128px;
            display: table;
            border: 2px solid #e1e1e1;
            box-sizing: border-box;
            // line-height: 128px;
            div {
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                img {
                    vertical-align: text-bottom;
                }
                .font-big {
                    font-size: 24px;
                    color: #333;
                    font-weight: bold;
                    letter-spacing: -1px;
                    display: inline-block;
                    margin-right: 7px;
                }
                span {
                    vertical-align: middle;
                    font-size: 30px;
                    color: #77220b;
                    font-weight: bold;
                    letter-spacing: -0.5px;
                }
            }
        }
    }
    .institute-row {
        overflow: hidden;
        clear: both;
    }
    .certification-box {
        overflow: hidden;
        .inner-box {
            width: 92%;
            float: right;
        }
        .title-box {
            text-align: center;
            margin-bottom: 20px;
            .title {
                font-family: "s-core";
                font-size: 24px;
                letter-spacing: -2px;
                color: #333;
                text-align: center;
                display: inline-block;
                width: 181px;
            }
            .line {
                width: 24%;
                display: inline-block;
                border-bottom: 1px #666 solid;
                margin-bottom: 8px;
            }
        }
        .slick-slider {
            button {
                display: none !important;
            }
            .slick-dots {
                display: none !important;
            }
        }
        .each-cert {
            padding: 10px 0;
            border-bottom: 1px solid #d8d8d8;
            .left {
                float: left;
                width: 30%;
                text-align: center;
                span {
                    color: #eb194a;
                    text-align: center;
                }
            }
            .right {
                float: left;
                width: 70%;
                span {
                    color: #626262;
                }
            }
        }
    }
    .institute-box {
        overflow: hidden;
        .title-box {
            text-align: center;
            margin-bottom: 20px;
            .title {
                font-family: "s-core";
                font-size: 24px;
                letter-spacing: -2px;
                color: #333;
                text-align: center;
                display: inline-block;
                width: 200px;
            }
            .line {
                width: 37%;
                display: inline-block;
                border-bottom: 1px #666 solid;
                margin-bottom: 8px;
            }
        }
        .left-area {
            width: 100%;
            //float: left;
            height: 344px;
            overflow: hidden;
        }
        .right-area {
            width: 31%;
            float: right;
        }
        .prev-main-institute {
            position: absolute;
            left: 2%;
            top: 38%;
            opacity: 0.4;
        }
        .next-main-institute {
            position: absolute;
            right: 2%;
            top: 38%;
            opacity: 0.4;
        }
    }
    .teacher-row {
        margin-top: 20px;
        .title-box {
            text-align: center;
            .title {
                font-family: "s-core";
                font-size: 24px;
                letter-spacing: -2px;
                color: #333;
                text-align: center;
                display: inline-block;
                width: 184px;
            }
            .line {
                width: 42%;
                display: inline-block;
                border-bottom: 1px #666 solid;
                margin-bottom: 8px;
            }
        }
        .teacher-page-main {
            position: relative;
            .prev-main-teacher {
                position: absolute;
                left: -4%;
                top: 30%;
                opacity: 0.4;
            }
            .next-main-teacher {
                position: absolute;
                right: -4%;
                top: 30%;
                opacity: 0.4;
            }
            .red-line {
                border-top: 2px solid #e11a4d;
                width: 100%;
                height: 24px;
                margin-top: -11px;
            }
            .teacher-box {
                width: 90%;
                margin: auto;
                .owl-nav {
                    height: 0;
                }
                ul {
                    flex-wrap: wrap;
                    display: inline-flex;
                    flex-direction: row;
                    overflow: inherit;
                    li {
                        // width: 20%;
                        text-align: center;
                        //border-bottom: 2px solid #e11a4d;
                        line-height: 0;
                        position: relative;
                        img.teacher {
                            // width: 90%;
                            // display: inline-block;
                        }
                        img.icon {
                            position: absolute;
                            left: -10%;
                            bottom: -10%;
                            width: 25%;
                        }
                        .tag {
                            position: absolute;
                            color: #bfbfbf;
                            top: 0;
                            right: -2px;
                            p {
                                text-align: left;
                            }
                            .color-red {
                                line-height: 38px;
                                font-size: 15px;
                                font-weight: bold;
                            }
                            .subject {
                                color: #bfbfbf;
                                font-size: 13px;
                            }
                        }
                    }
                }
            }
            .teacher-link-box {
                margin-top: -19px;
                .teacher-link {
                    color: #fff !important;
                    background: #e11a4d;
                    padding: 10px 15px 0 15px;
                    font-size: 8px;
                    border-radius: 12px;
                    margin-top: 0px;
                    display: inline-block;
                }
            }
        }
    }
    .third-row {
        margin: 20px 0 0px 0;
        overflow: auto;
        clear: both;
    }
    .community-row {
        margin-top: 10px;
        bottom: 50px;
        > div {
            .interview-box {
                background: #e8e8e8;
                border-radius: 12px;
                // padding: 7px;
                height: 209px;
                overflow: hidden;
                text-align: center;
                img.url {
                    width: 79%;
                    margin: auto;
                }
            }
            &:first-child {
                .inner-box {
                    float: left;
                }
            }
            &:last-child {
                .inner-box {
                    float: right;
                }
            }
            .inner-box {
                width: 92%;
                // margin: auto;
                float: right;
                .title-area {
                    .title {
                        color: #333;
                        font-size: 16px;
                        font-weight: bold;
                        display: inline-block;
                    }
                    a {
                        float: right;
                        font-size: 13px;
                        color: #333;
                    }
                    border-bottom: 1px solid #ccc;
                    padding-bottom: 4px;
                }
                .content-area {
                    ul {
                        li {
                            // border-bottom: 1px solid #ccc;
                            padding-bottom: 6px;
                            a {
                                padding: 7px 0;
                                color: #666;
                                font-size: 13px;
                                display: block;
                                line-height: 26px;
                                height: 13px;
                                display: inline-block;
                                overflow: hidden;
                                width: 85%;
                            }
                            span.new {
                                background-color: #e6003e;
                                color: #fff !important;
                                text-align: center;
                                white-space: nowrap;
                                vertical-align: baseline;
                                border-radius: 25px !important;
                                font-size: 10px !important;
                                width: 10%;
                                float: right;
                                margin-top: 12px;
                            }
                            &:last-child {
                                border-bottom: 0;
                            }
                        }
                    }
                }
            }
        }
    }
    .owl-main {
        .item {
            width: 100%;
            // height: 860px;
            height: 474px;
            // background-size: 100% 100% !important;
            background-size: cover !important;
            text-align: center;
            // -moz-border-radius:130px 0 130px 0;
            // -webkit-border-radius:130px 0 130px 0;
            // border-radius:130px 0 130px 0;
            background-color: rgba(255, 255, 255, 0.8);
            /* slighly transparent white */
            border-color: rgba(0, 0, 0, 0.2);
            /*Very transparent black*/
            background-position: center top !important;
            a {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }
    .prev-main {
        z-index: 10;
        position: absolute;
        top: 42%;
        left: 5%;
        cursor: pointer;
        opacity: 0.4;
    }
    .next-main {
        z-index: 10;
        position: absolute;
        top: 42%;
        right: 5%;
        cursor: pointer;
        opacity: 0.4;
    }
    .prev-main-interview {
        z-index: 10;
        position: absolute;
        top: 37%;
        left: 2%;
        cursor: pointer;
    }
    .next-main-interview {
        z-index: 10;
        position: absolute;
        top: 37%;
        right: 2%;
        cursor: pointer;
    }
    .owl-dots {
        display: none;
        text-align: center;
        position: absolute;
        bottom: 10px;
        // bottom: 238px;
        // width: 100%;
        z-index: 10;
        // display: inline-block;
        // left: 44%; //5
        // left: 43%; //6
        left: 25%;
        width: 50%;
    }
    .owl-dot {
        display: inline-block;
        margin: 0 3px;
        // margin-right: 10px;
    }
    .owl-dot span {
        cursor: pointer;
        background: #fff;
        border-radius: 20px;
        display: block;
        height: 10px;
        margin: 7px 7px;
        opacity: 1;
        width: 10px;
        // border: 2px solid #fff;
    }
    .owl-dot.active span,
    .owl-dot.active span:hover {
        background: url("/assets/images/front/icons/page_active.png") no-repeat !important;
        // background: #DF1248;
        opacity: 1;
        background-size: 100% !important;
        height: 25px;
        width: 25px;
        // padding: 10px;
        // border-radius: 50%;
        // border: 1px solid #DF1248;
        margin: 0;
    }
    // .main-container {
    //   position: absolute;
    //   // bottom: 70px;
    //   bottom: 4%;
    //   z-index: 15;
    //   width: 100%;
    //   .base-container{
    //     text-align: center;
    //   }
    //   .film-box {
    //     text-align: right;
    //     margin-bottom: 3%;
    //     ul {
    //       display: inline-block;
    // 			// margin-right: -20px;
    // 			margin-right: 0px;
    //       li {
    //         float: left;
    //         margin-right: 5px;
    // 				width: 80px;
    // 				height: 44px;
    // 				text-align: center;
    //         img {
    //           cursor: pointer;
    //           // trasnsition: all .3s;
    //           // border: 2px solid rgba(255,255,255,0);
    //           width: 44px;
    //           // &:hover {
    //           //   transition: all .3s;
    //           //   border: 2px solid #e11a4d;
    //           // }
    //         }
    //       }
    //     }
    //   }
    //
    //
    // }
    @media (max-width: 1050px) {
        .main-copy-box {
            right: 100px !important;
        }
    }
    @media (min-width: 1500px) {
        .main-copy-box {
            right: 400px !important;
        }
    }
    .main-copy-box {
        background: transparent url("/assets/images/front/general/main_copy_bg.png") 50% 50% no-repeat;
        background-size: cover;
        position: absolute;
        // padding-top: 5%;
        // position: relative;
        // width: 40% !important;
        // float: right;
        // margin-right: 10%;
        // margin-top: -5%;
        // float: right;
        width: 400px;
        height: 370px;
        top: 100px;
        right: 250px;
        z-index: 5;
        text-align: center;
        // margin: 100px 200px 0 0;
        img {
            // position: absolute;
            // left: 0;
            // top: 0;
            // width: 100% !important;
            width: 400px !important;
            margin-top: 60px;
            // margin-right: -200px;
            // margin-top: -200px;
        }
        #particles-js {
            position: absolute;
            width: 100%;
            right: 0;
            height: 300px;
        }
    }
    .bg-area {
        margin: auto;
        width: 1200px;
        // max-width: 1600px;
        // min-width: 1005px;
        // height: 828px;
        // margin-left: -1px;
    }
    .button-area {
        margin-top: 50px;
        // margin-bottom: 100px;
        ul {
            width: 100%;
            overflow: hidden;
            li {
                width: 33.3%;
                float: left;
                a {
                    &:hover {
                        transition: all 0.3s;
                        .title {
                            color: $color;
                            transition: all 0.3s;
                        }
                        img,
                        .text {
                            transition: all 0.3s;
                            opacity: 0.7;
                        }
                    }
                }
                img {
                    width: 30%;
                    float: left;
                }
                .right-area {
                    margin-top: 15px;
                    width: 70%;
                    float: left;
                    padding-left: 12px;
                    box-sizing: border-box;
                    &.phone-area {
                        .title {
                            margin-bottom: 12px;
                        }
                        .text {
                            font-size: 30px;
                        }
                    }
                    .title {
                        color: #9da6ab;
                        font-size: 18px;
                        line-height: 26px;
                        letter-spacing: -0.5px;
                        margin-bottom: 5px;
                    }
                    .text {
                        color: #9da6ab;
                        font-size: 13px;
                        line-height: 18px;
                        letter-spacing: -0.5px;
                        margin-bottom: 9px;
                    }
                    .link {
                        width: 140px;
                        height: 20px;
                        display: inline-block;
                        border-radius: 4px;
                        background-size: 100% 100%;
                        background: transparent url("/assets/images/front/icons/main_link.png") 50% 50% no-repeat;
                        transition: all 0.3s;
                        &:hover {
                            transition: all 0.3s;
                            background: transparent url("/assets/images/front/icons/main_link_on.png") 50% 50% no-repeat;
                        }
                    }
                }
            }
        }
    }
}

.center-page {
    text-align: center;
    .nowon {
        .center-header {
            margin-top: 10px;
            img {
                width: 100%;
            }
        }
        .center-content {
            .left {
                float: left;
                width: 50%;
                img {
                    width: 70%;
                    float: right;
                }
            }
            .right {
                float: right;
                width: 50%;
            }
            .title {
                color: #b94249;
                font-size: 20px;
                margin-bottom: 20px;
            }
            &.center-con1 {
                overflow: hidden;
                background: transparent url("/assets/images/front/center/nowon_bg2.png") no-repeat;
                background-size: 100% 100%;
                height: 580px;
                .right {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    height: 100%;
                    .text-box {
                        text-align: left;
                        p {
                            font-size: 15px;
                        }
                    }
                }
            }
            &.center-con2 {
                overflow: hidden;
                background: transparent url("/assets/images/front/center/nowon_bg3.png") no-repeat;
                background-size: 100% 100%;
                height: 580px;
                margin-bottom: 50px;
                .left {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    height: 100%;
                    .text-box {
                        text-align: right;
                        p {
                            font-size: 15px;
                        }
                    }
                }
            }
        }
    }
    .daegu {
        .center-header {
            margin-top: 10px;
            img {
                width: 100%;
                display: block;
            }
        }
        .center-content {
            margin-top: 10px;
            .left {
                float: left;
                width: 50%;
                img {
                    width: 70%;
                    float: right;
                }
            }
            .right {
                float: right;
                width: 50%;
            }
            .title {
                color: #333;
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 10px;
            }
            .text-box {
                color: #333;
            }
            &.center-con1 {
                overflow: hidden;
                background: transparent url("/assets/images/front/center/daegu/1.jpg") no-repeat;
                background-size: 100% 100%;
                height: 580px;
                .right {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    height: 100%;
                    .text-box {
                        margin-top: 100px;
                        margin-left: 102px;
                        text-align: left;
                        p {
                            font-size: 15px;
                        }
                    }
                }
            }
            &.center-con2 {
                overflow: hidden;
                background: transparent url("/assets/images/front/center/daegu/2.jpg") no-repeat;
                background-size: 100% 100%;
                height: 580px;
                .left {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    height: 100%;
                    .text-box {
                        text-align: left;
                        margin-left: 129px;
                        margin-top: 120px;
                        p {
                            font-size: 15px;
                        }
                    }
                }
            }
            &.center-con3 {
                overflow: hidden;
                background: transparent url("/assets/images/front/center/daegu/3.jpg") no-repeat;
                background-size: 100% 100%;
                height: 580px;
                margin-bottom: 10px;
                .right {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    height: 100%;
                    .text-box {
                        margin-top: 110px;
                        margin-left: 102px;
                        text-align: left;
                        p {
                            font-size: 15px;
                        }
                    }
                }
            }
        }
    }
    .bg-area {
        // margin-top: 10px;
        // padding-top: 200px;
        // padding-bottom: 890px;
        background: transparent url("/assets/images/front/center/intro_bg.png") no-repeat;
        background-size: cover;
        min-height: 2500px;
        margin-bottom: 20px;
        .title {
            text-align: center;
            // margin-bottom: 40px;
            margin-bottom: -170px;
            img {
                margin-left: -75px;
                width: 600px;
            }
        }
        ul {
            overflow: hidden;
            li {
                // margin-top: 121px;
                .sub-image {
                    text-align: center;
                }
                .sub-title {
                    text-align: center;
                    color: #fff;
                    font-size: 18px;
                    margin-bottom: 30px;
                    margin-top: 7px;
                }
                .sub-text {
                    text-align: center;
                    color: #fff;
                    font-size: 14px;
                    line-height: 20px;
                    opacity: 0.8;
                }
            }
        }
    }
}

.teacher-page {
    .teacher-box {
        padding: 0 25px;
        ul {
            flex-wrap: wrap;
            display: inline-flex;
            flex-direction: row;
            overflow: inherit;
            li {
                width: 25%;
                text-align: center;
                border-bottom: 2px solid #e11a4d;
                line-height: 0;
                position: relative;
                margin-bottom: 50px;
                img.teacher {
                    width: 90%;
                    display: inline-block;
                }
                img.icon {
                    position: absolute;
                    left: -10%;
                    bottom: -10%;
                    width: 25%;
                }
                .tag {
                    height: 0;
                    line-height: 23px;
                    background: #e11a4d;
                    border-radius: 0 0 12px 12px;
                    width: 100%;
                    color: #fff !important;
                    position: absolute;
                    width: 90%;
                    transition: all 0.3s;
                }
                &:hover {
                    .tag {
                        transition: all 0.3s;
                        height: 25px;
                    }
                }
            }
        }
    }
    /*
  .tab-title-box {
    -webkit-box-shadow: -9px 36px 46px -35px rgba(255,255,255,1);
    -moz-box-shadow: -9px 36px 46px -35px rgba(255,255,255,1);
    box-shadow: -9px 36px 46px -35px rgba(255,255,255,1);
    border-top: 1px solid #d5d5d5;
    border-bottom: 1px solid #d5d5d5;
    padding: 5px 0;
    text-align: center;
    .tab-title {
      font-size: 23px;
      color: $color;
      text-align: center;
      display: inline-block;
    }
    img {
      cursor: pointer;
    }
  }
  .tab-box {
    text-align: center;
    ul {
      display: inline-block;
      li {
        cursor: pointer;
        float: left;
        font-size: 14px;
        color: #959595;
        padding: 13px 20px;
        box-sizing: border-box;
        &.active-fix {
          color: $color;
          border-top: 2px solid $color;
          font-weight: bold;
        }
        &:not(.active-fix){
          &:hover, &.active {
            color: $color;
            border-top: 2px solid $color;
            font-weight: bold;
          }
        }
      }
    }
  }
  .owl-teacher {
    position: relative;
    .item {
      min-height: 730px;
      img {
        position: absolute;
        width: auto;
        bottom: 0;
      }
    }
    .tab-1 {
      img {
        // &.teacher-1 {
        //   // left: 10%;
        //   // z-index: 1;
        //   // bottom: -100px;
        // }
        // &.teacher-2 {
        //   left: 25%;
        //   z-index: 2;
        //   bottom: -30px;
        // }
        // &.teacher-3 {
        //   left: 39%;
        //   z-index: 3;
        //   bottom: 0;
        // }
        // &.teacher-4 {
        //   left: 53%;
        //   z-index: 2;
        //   bottom: 0;
        // }
        // &.teacher-psh {
        //   left: 59%;
        //   z-index: 1;
        //   // bottom: -50px;
        // }
				&.teacher-center {
					left: 39%;
					z-index: 1;
					bottom: 0;
				}
      }
    }
    .tab-2 {
      img {
				&.teacher-lse {
					left: 31%;
					z-index: 1;
					bottom: 0;
				}
        &.teacher-6 {
          left: 48%;
          z-index: 1;
          bottom: 0;
        }
        // &.teacher-7 {
        //   left: 55%;
        //   z-index: 0;
        //   bottom: -35px;
        // }
      }
    }
    .tab-3 {
      img {
        &.teacher-8 {
          // left: 14%;
          // z-index: 1;
          // bottom: -129px;
        }
        &.teacher-9 {
          // left: 15%;
          // z-index: 2;
          // bottom: -4px;
        }
				&.teacher-10 {
					left: 26%;
					z-index: 0;
					bottom: 0;
				}
				&.teacher-12 {
					left: 45%;
					z-index: 3;
					bottom: -116px;
				}
        // &.teacher-11 {
				// 	left: 57%;
        //   z-index: 2;
        //   bottom: 0;
        // }
      }
    }
    .tab-4 {
      img {
        &.teacher-13 {
          // left: 48%;
          left: 28%;
          z-index: 2;
          bottom: -128px;
        }
        &.teacher-14 {
          left: 45%;
          z-index: 1;
          bottom: -30px;
        }
      }
    }
    .tab-5 {
      img {
        // &.teacher-15 {
        //   left: 25%;
        //   z-index: 0;
        //   bottom: -34px;
        // }
				// &.teacher-kyj {
				// 	z-index: 1;
				// 	bottom: -1px;
				// 	left: 20%;
				// }
				&.teacher-pjr {
					z-index: 1;
					bottom: -20px;
					left: 18%;
				}
				&.teacher-chj {
					z-index: 2;
					bottom: -1px;
					left: 31%;
				}
				&.teacher-kjs {
					z-index: 1;
					bottom: -53px;
					left: 47%;
				}
				&.teacher-16 {
					left: 58%;
					z-index: 0;
					bottom: -50px;
				}
      }
    }
    .tab-6 {
      img {
				&.teacher-sh {
					left: 1%;
					z-index: 1;
					bottom: 0px;
				}
				&.teacher-pyn {
					left: 24%;
					z-index: 2;
					bottom: -15px;
				}
				&.teacher-18 {
					bottom: -17px;
					z-index: 2;
					left: 38%;
				}
				// &.teacher-hcy {
				// 	z-index: 1;
				// 	left: 17%;
				//   bottom: -17px;
				// }
				// &.teacher-psm {
				//   left: 50%;
				//   z-index: 1;
				//   bottom: 0;
				// }
				&.teacher-ley {
					left: 56%;
					z-index: 1;
				}
				&.teacher-syj {
					left: 68%;
					z-index: 0;
					bottom: -10px;
				}
      }
    }
  }
	*/
}

.institute-page {
    text-align: center;
    .bg-area {
        // margin-top: 10px;
        // padding-bottom: 790px;
        // height: 1000px;
        height: 90vh;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
    .img-box {
        margin-bottom: 15px;
        img {
            width: 200px;
            @media screen and (max-width: 1300px) {
                width: 150px;
            }
        }
    }
    .owl-box {
        position: absolute;
        bottom: 100px;
        width: 100%;
        .owl-box-inner {
            z-index: 10;
            position: relative;
            width: 50%;
        }
    }
    .item {
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.3s;
        &.active {
            border: 2px solid #e31a4c;
        }
        &:hover {
            opacity: 0.8;
            transition: all 0.3s;
        }
    }
    .nav-icon {
        z-index: 10;
        position: absolute;
        top: 5%;
        cursor: pointer;
        //background: rgba(0,0,0,0.7);
        border-radius: 4px;
        transition: all 0.3s;
        &:hover {
            opacity: 0.7;
            transition: all 0.3;
        }
        @media screen and (max-width: 1300px) {
            height: 75px;
        }
    }
    .prev-main {
        left: -10%;
    }
    .next-main {
        right: -10%;
    }
}

.map-page {
    text-align: center;
    .bg-area {
        // margin-top: 10px;
        background: #f4f4f4;
    }
    .bg-icon {
        margin-top: 45px;
        width: 60%;
    }
    .map-info {
        // padding-bottom: 200px;
        .map-info-inner {
            .inner-box {
                width: 100%;
            }
            .second-subway {
                margin-top: 10px;
                margin-left: 72px;
                text-align: left;
                img {
                    &:first-child {
                        margin-right: 0;
                    }
                }
            }
            .first-subway {
                display: inline-block;
                text-align: left;
                img {
                    &:first-child {
                        margin-right: 0;
                        vertical-align: middle !important;
                    }
                }
            }
            .h600 {
                height: 600px;
                display: flex;
                align-items: center;
            }
            p {
                margin-bottom: 15px;
                text-align: left;
            }

            .text1 {
                color: #333;
                font-size: 15px;
                letter-spacing: -0.5px;
            }
            .text2 {
                color: #666;
                font-size: 13px;
                letter-spacing: -0.5px;
            }
            .text3 {
                color: #333;
                font-size: 14px;
                vertical-align: middle;
                img {
                    vertical-align: middle;
                }
            }
            .line {
                margin: 20px 0;
                height: 1px;
                border-top: 1px solid #ccc;
            }
            ul {
                width: 100%;
                li {
                    text-align: left;
                    text-align: left !important;
                    margin-bottom: 15px;
                    &:first-child {
                        img {
                            &:first-child {
                                vertical-align: sub;
                            }
                        }
                        span {
                            vertical-align: middle;
                        }
                    }
                    span.bold {
                        display: inline-block;
                        width: 50px;
                    }
                    span {
                        color: #797979;
                        font-size: 14px;
                        // line-height: 24px;
                        vertical-align: bottom;
                    }
                    img {
                        // height: 20px;
                        vertical-align: middle;
                        &:first-child {
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
        div {
            text-align: center;
            line-height: 20px;
            dl {
                width: 700px;
                overflow: hidden;
                clear: both;
                display: inline-block;
                dt {
                    font-weight: bold;
                    color: #797979;
                    width: 93px;
                    font-size: 14px;
                    text-align: right;
                    float: left;
                }
                dd {
                    color: #797979;
                    font-size: 14px;
                    text-align: left;
                    padding-left: 10px;
                    float: left;
                    a {
                        color: #797979;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
.permanent-page {
    .sub-text {
        margin-bottom: 20px;
    }
    .main-text {
        font-size: 15px;
        color: #333;
    }
    img.collabo-img {
        vertical-align: sub;
        margin: 0 10px;
    }
    .footer-buttons {
        margin-top: 10px;
        span.span-button {
            display: inline-block;
            width: 300px;
            padding: 10px;
            border: 1px solid #333;
            color: #333;
            font-size: 14px;
        }
    }
    .task {
        text-align: center;
        .task1 {
            // font-size: 12px;
            // font-weight: 600;
            color: #333;
            font-size: 15px;
            display: inline-block;
            margin-right: 7px;
            font-weight: bold;
        }
        .task2 {
            // font-size: 12px;
            // font-weight: 400;
            font-size: 15px;
            color: #666;
        }
    }
    .collabo {
        display: block;
        width: 100%;
        overflow: hidden;
        li {
            float: left;
            width: 33.333%;
            box-sizing: border-box;
            padding: 20px;
            border-right: 1px solid #eee;
            text-align: center;
            &:last-child {
                border: none;
            }
            img {
                margin-bottom: 5px;
            }
            p {
                text-align: center;
                font-weight: bold;
            }
        }
    }
    .teachers {
        li {
            float: left;
            width: 33.333%;
            box-sizing: border-box;
            padding: 0px 40px;
            text-align: center;
            &:nth-child(1),
            &:nth-child(2),
            &:nth-child(3) {
                padding-top: 20px;
                padding-bottom: 20px;
            }
            .teacher-box {
                // height: 270px;
            }
            img {
                display: inline-block;
                width: 90%;
                margin-bottom: 10px;
            }
            div {
                text-align: center;
            }
            .text1 {
                font-size: 15px;
                font-weight: bold;
                color: #333;
            }
            .text2 {
                color: #333;
                font-weight: bold;
                font-size: 14px;
            }
            .text3 {
                font-size: 12px;
                margin-bottom: 3px;
                color: #666;
                font-weight: 400;
            }
            .text4 {
                font-size: 12px;
                font-weight: 400;
                background: #7c4e99;
                padding: 3px 5px;
                color: #fff;
                display: inline-block;
            }
        }
    }
    .line {
        height: 1px;
        border-top: 1px solid #ccc;
        margin: 50px 0;
    }
    .sub-title {
        font-size: 22px;
        font-weight: 600;
        color: #7c4e99;
        text-align: center;
        margin-bottom: 10px;
    }
    p {
        text-align: center;
        // font-size: 13px;
        margin-bottom: 10px;
        color: #333;
        font-size: 15px;
    }
    .owl-box {
        .current-image {
            img {
                width: 100%;
                display: block;
                margin-bottom: 5px;
            }
        }
    }
    .inner-container {
        width: 70%;
        margin: auto;
    }
    .bg-area {
        // margin-top: 10px;
        box-sizing: border-box;
        background-size: cover;
        text-align: center;
        // padding: 10px 0;
        img {
            width: 100%;
        }
    }
    .img-box {
        margin-bottom: 15px;
        img {
            width: 200px;
            @media screen and (max-width: 1300px) {
                width: 150px;
            }
        }
    }
    .owl-box {
        .owl-box-inner {
            position: relative;
            z-index: 10;
            width: 100%;
        }
    }
    .item {
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.3s;
        &.active {
            border: 2px solid #e31a4c;
        }
        &:hover {
            opacity: 0.8;
            transition: all 0.3s;
        }
    }
    .nav-icon {
        z-index: 10;
        position: absolute;
        top: -250px;
        cursor: pointer;
        //background: rgba(0,0,0,0.7);
        transition: all 0.3s;
        &:hover {
            opacity: 0.7;
            transition: all 0.3;
        }
        @media screen and (max-width: 1300px) {
            height: 75px;
        }
    }
    .prev-main {
        left: -10%;
        width: 40px;
    }
    .next-main {
        right: -10%;
        width: 40px;
    }
}

.curriculum-page {
    padding-bottom: 50px;
    .fll {
        width: 10px;
    }
    .fll-text {
        width: calc(100% - 10px);
        line-height: 25px;
    }
    .diploma {
        cursor: pointer;
        display: block;
        margin-top: 10px;
    }
    .title {
        font-size: 23px;
        color: #555;
        font-weight: bold;
    }
    .title-sub {
        border-left: 2px solid #eee;
        padding-left: 10px;
        font-size: 14px;
        margin-top: 10px;
    }
    .round-button {
        box-sizing: border-box;
        display: block;
        width: 80px;
        height: 80px;
        line-height: 20px;
        border: 6px solid #fff;
        border-radius: 50%;
        color: #f5f5f5;
        text-align: center;
        text-decoration: none;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 20px;
        font-weight: bold;
        transition: all 0.3s ease;
        .button-play {
            width: 10px;
            height: 10px;
            border-style: solid;
            border-width: 10px;
            border-color: #202020;
            border-color: transparent transparent transparent #333;
        }
    }
    .bg-area {
        // margin-top: 10px;
        box-sizing: border-box;
        // height: 385px;
        // background: url('/assets/images/front/curriculum/bg.png') no-repeat;
        background-size: cover;
        text-align: center;
        // padding: 10px 0;
        img {
            width: 100%;
        }
    }
    .inner-box {
        width: 1000px;
        margin: 20px auto 0px auto;
        position: relative;
        display: none;
        .left {
            position: absolute;
            top: 0;
            left: 0;
        }
        .right {
            position: absolute;
            top: 0;
            right: 0;
        }
        .title-box {
            // width: 668px;
            width: 100%;
            height: 271px;
            margin: auto;
            display: table;
            .title-bar {
                display: table-cell;
                vertical-align: middle;
                position: absolute;
                top: 70px;
                width: 100%;
                .title {
                    text-align: center;
                    background: $color;
                    color: #fff;
                    font-size: 25px;
                    font-weight: bold;
                    padding: 2px 0;
                    margin-bottom: 10px;
                }
                ul {
                    width: 100%;
                    li {
                        padding-bottom: 10px;
                        padding-left: 15px;
                        font-size: 15px;
                        line-height: 20px;
                        color: #404040;
                        // border-bottom: 1px solid #0b0209;
                        &:last-child {
                            border-bottom: none;
                        }
                    }
                    border-bottom: 1px solid $color;
                    padding-bottom: 10px;
                }
            }
        }
    }
    .inner-box2 {
        width: 1000px;
        margin: auto;
        .row {
            overflow: hidden;
            border-bottom: 1px solid #d0d0d0;
            padding: 40px 0;
            &:last-child {
                border-bottom: none;
                margin-bottom: 50px;
            }
            .left {
                float: left;
                width: 30%;
                text-align: left;
                vertical-align: top;
            }
            .right {
                float: right;
                width: 70%;
                .title {
                    display: inline-block;
                    font-size: 22px;
                    font-weight: bold;
                    margin-right: 5px;
                    margin-bottom: 5px;
                    color: $color;
                }
                > img {
                    vertical-align: top;
                    margin-top: 2px;
                    &:hover {
                        transition: all 0.3s;
                        opacity: 0.8;
                    }
                }
                ul {
                    overflow: hidden;
                    li {
                        // padding: 2px 0;
                        font-size: 15px;
                        line-height: 25px;
                        color: #404040;
                        overflow: hidden;
                    }
                }
                .footer {
                    margin-top: 20px;
                    .curr-table {
                        overflow: hidden;
                        margin-bottom: 20px;
                        border-spacing: 0;
                        tr:last-child {
                            .vertical-line {
                                display: none;
                            }
                        }
                        td {
                            overflow: hidden;
                            border-spacing: 0;
                            vertical-align: top;
                            position: relative;
                            color: #666;
                            font-size: 15px;
                            line-height: 25px;
                            &.specific {
                                padding-right: 20px;
                            }
                            .vertical-line {
                                width: 1px;
                                height: 100%;
                                border-right: 1px solid #ccc;
                                position: absolute;
                                left: 50%;
                            }
                            .bold {
                                color: #333;
                                font-size: 15px;
                                margin-right: 20px;
                                vertical-align: top;
                                display: table-cell;
                            }
                            .text-month {
                                width: 80px;
                                height: 25px;
                                color: #333;
                                font-size: 15px;
                                display: inline-block;
                                text-align: center;
                                background: #fff;
                                z-index: 10;
                                position: relative;
                            }
                            ul {
                                li {
                                    color: #666;
                                    font-size: 14px;
                                }
                            }
                        }
                    }
                    .footer-head {
                        color: #666;
                        font-size: 15px;
                        margin-right: 4px;
                        margin-bottom: 15px;
                        .bold {
                            color: #333;
                            font-size: 15px;
                            margin-right: 20px;
                            vertical-align: top;
                        }
                    }
                    .footer-buttons {
                        margin-top: 10px;
                        span.span-button {
                            display: inline-block;
                            width: 300px;
                            padding: 10px;
                            border: 1px solid #333;
                            color: #333;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}

.career-page {
    text-align: center;
    .bg-area {
        // margin-top: 10px;
        // background:transparent url('/assets/images/front/career/bg.png') no-repeat;
        // background-size: cover;
        background: #f4f4f4;
    }
    .bg-icon {
        margin-top: 45px;
    }
    .banner-box {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    ul {
        width: 90%;
        margin-bottom: 100px;
        li {
            margin-bottom: 30px;
            .title-box {
                border-bottom: 1px solid $color;
                margin-bottom: 5px;
                line-height: 26px;
                text-align: left;
                .number-box {
                    background: $color;
                    border-radius: 0 4px 0 4px;
                    padding: 2px;
                    font-weight: bold;
                    color: #fff;
                    font-size: 16px;
                }
                .title {
                    font-size: 16px;
                    font-weight: bold;
                    color: $color;
                    padding-left: 7px;
                }
            }
            .content-box {
                text-align: left;
                padding-left: 35px;
                font-size: 14px;
                line-height: 20px;
            }
        }
    }
}

.community-page {
    .hotissue-type {
        float: right;
        clear: right;
        overflow: hidden;
        margin-right: 66px;
        margin-bottom: -20px;
        margin-top: 20px;
        li {
            float: left;
            padding: 20px 15px;
            &:nth-child(2) {
                padding: 20px 5px;
            }
            a {
                font-size: 15px;
                font-weight: 400;
                color: #666;
                &.active {
                    font-weight: bold;
                    color: #111;
                }
            }
        }
    }
    .bg-area {
        // margin-top: 10px;
        background: #f4f4f4;
        padding-bottom: 100px;
        .tab-title-box {
            display: none;
            -webkit-box-shadow: -9px 36px 46px -35px rgba(255, 255, 255, 1);
            -moz-box-shadow: -9px 36px 46px -35px rgba(255, 255, 255, 1);
            box-shadow: -9px 36px 46px -35px rgba(255, 255, 255, 1);
            border-top: 1px solid #d5d5d5;
            border-bottom: 1px solid #d5d5d5;
            padding: 5px 0;
            text-align: center;
            .tab-title {
                display: none;
                font-size: 23px;
                color: $color;
                text-align: center;
                display: inline-block;
            }
            img {
                cursor: pointer;
            }
        }
        .tab-box {
            display: none;
            text-align: center;
            ul {
                display: inline-block;
                li {
                    cursor: pointer;
                    float: left;
                    font-size: 14px;
                    color: #959595;
                    padding: 13px 20px;
                    box-sizing: border-box;
                    &.active-fix {
                        color: $color;
                        border-top: 2px solid $color;
                        font-weight: bold;
                    }
                    &:not(.active-fix) {
                        &:hover,
                        &.active {
                            color: $color;
                            border-top: 2px solid $color;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
        .owl-community {
            .item {
                overflow: hidden;
                padding: 50px 0;
                width: 90%;
                margin: auto;
                .row {
                    .con-box {
                        box-sizing: border-box;
                        width: 24.5%;
                        display: inline-block;
                        padding: 0 10px;
                        &:last-child {
                            .right {
                                // background:none;
                            }
                        }
                        .relative {
                            position: relative;
                            height: 260px;
                            background-size: cover !important;
                            .infobox {
                                //artistcrew only
                                position: absolute;
                                bottom: 0;
                                width: 100%;
                                background: rgba(0, 0, 0, 0.7);
                                padding: 10px;
                                box-sizing: border-box;
                                .info1 {
                                    color: #fff;
                                    font-size: 16px;
                                    margin-bottom: 7px;
                                }

                                .info2 {
                                    color: #ccc;
                                    font-size: 12px;
                                    line-height: 18px;
                                    height: 18px;
                                    overflow: hidden;
                                }
                                .info3 {
                                    color: #ccc;
                                    font-size: 12px;
                                    line-height: 18px;
                                }
                                .area {
                                    position: absolute;
                                    bottom: 7px;
                                    right: 7px;
                                    font-size: 12px;
                                    color: #fff;
                                }
                            }
                        }
                        img {
                            display: block;
                            width: 100%;
                        }
                        .headings {
                            margin: 10px 0 10px 0;
                            overflow: hidden;
                            .date {
                                font-size: 14px;
                                font-weight: lighter;
                                letter-spacing: -1px;
                                text-align: center;
                                float: right;
                                color: #ccc;
                            }
                            .cat {
                                color: $color;
                                font-size: 16px;
                                float: left;
                                font-weight: lighter;
                            }
                        }
                        .title {
                            clear: both;
                            overflow: hidden;
                            font-size: 15px;
                            line-height: 22px;
                            height: 100px;
                            text-align: left;
                        }
                    }
                }
            }
        }
    }
}
.leejua-page {
    clear: both;
    overflow: hidden;
    // min-height: 1000px;
    // background: transparent url("/assets/images/front/wannabe/leejua/bg.jpg") no-repeat;
    background-size: cover;
    position: relative;
    .bg-area {
    }
    .intro-box {
        display: none;
        padding: 35px 25px;
        position: absolute;
        right: 0;
        bottom: 10%;
        background: #463111ab;
        .text-4 {
            color: #ffe1b4;
            font-size: 19px;
        }
        .text-white {
            color: #fff;
            margin: 15px 0 10px 0;
        }
        .text-gray {
            color: #bcb7af;
        }
    }
    .content-box {
        margin: 100px 100px;
        .dash {
            position: relative;
            &::after {
                position: absolute;
                font-weight: 900;
                left: 0px;
                bottom: -70px;
                content: "ㅡ";
                font-size: 30px;
                color: rgb(196, 162, 115);
            }
        }
        .text-1 {
            color: #9d783f;
            font-size: 19px;
            padding: 45px 0;
            padding-top: 35px;
            font-weight: 300;
            .larger {
                margin-top: 7px;
                font-size: 18px;
            }
        }
        .text-2 {
            font-weight: 300;
            padding: 45px 0;
            color: #4c4b49;
            font-size: 16px;
        }
        .text-3 {
            color: #9d783f;
            font-size: 24px;
            font-weight: 200;
            strong {
                font-weight: 700;
            }
            margin-bottom: 100px;
        }
        ul {
            li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #d8ccb9;
                padding: 20px 0;
                // &:last-child {
                //     border-bottom: 0;
                // }
                p {
                    width: 300px;
                    color: #4c4b49;
                    padding-left: 20px;
                    font-size: 16px;
                    line-height: 22px;
                }
            }
        }
    }
    // position: relative;
    // .main-img {
    //     position: absolute;
    //     height: 100vh;
    //     top: 0;
    //     left: 0;
    // }
}

.academy-page {
    .bg-area {
        // margin-top: 10px;
        // height: 2470px;
    }
    .row-1 {
        background: transparent url("/assets/images/front/wannabe/bg01.png") no-repeat;
        background-size: cover;
        padding: 70px 0;
        margin-bottom: 5px;
        // padding-top: 117px;
        img {
            width: 100%;
        }
        .title-img {
            width: 78%;
        }
        .right {
            padding-top: 72px;
        }
    }
    .row-2 {
        padding: 70px 0;
        background: transparent url("/assets/images/front/wannabe/bg02.png") no-repeat;
        background-size: cover;
        margin-bottom: 5px;
        // padding-top: 400px;
        .left {
            padding-top: 70px;
            padding-left: 22%;
        }
        .right {
            padding-right: 0;
            img {
                width: 120%;
            }
        }
    }
    .row-3 {
        padding: 50px 0;
        background: transparent url("/assets/images/front/wannabe/bg03_ex.png") no-repeat;
        // background:transparent url('/assets/images/front/wannabe/bg03_ex.png') no-repeat;
        background-size: cover;
        // background-size: 100%;
        // padding-top: 345px;
        height: 607px;
        .right {
            // padding-top: 19px;
            padding-top: 82px;
            text-align: left !important;
            // @media screen and (max-width: 1550px) {
            //
            // }
        }
    }
    .right,
    .left {
        // margin: 70px 50px;
        box-sizing: border-box;
    }
    .right {
        padding-right: 10%;
        text-align: right;
    }
    .left {
        padding-left: 10%;
        text-align-last: auto;
    }
    .content {
        line-height: 22px;
        text-align: left;
    }
    .ci {
        margin: 50px auto 100px auto;
        text-align: center;
        width: 835px;
        .ci-text {
            font-size: 14px;
            margin-top: 30px;
            background: #efefef;
            padding: 10px 30px;
            text-align: left;
            .primary-color {
                color: $color;
            }
        }
    }
}

.collabo-page {
    text-align: center;
    // .bg-area {
    //     margin-top: 10px;
    //     // background:transparent url('/assets/images/front/wannabe/collabo_bg.png') no-repeat;
    //     // background-size: cover;
    //     background: #f4f4f4;
    //     padding-bottom: 100px;
    // }
    // .owl-community {
    //     position: relative;
    //     &:before {
    //         content: "";
    //         position: absolute;
    //         bottom: 0;
    //         left: 19%;
    //         height: calc(100% - 32px);
    //         width: 100%;
    //         display: block;
    //         box-sizing: border-box;
    //         background: url(/assets/images/front/community/border_bg.png) repeat-y;
    //     }
    //     .item {
    //         .row {
    //             // background: url('/assets/images/front/community/dot_bg.png') no-repeat;
    //             // background-position: 10% 20%;
    //             height: 150px;
    //             box-sizing: border-box;
    //             width: 80%;
    //             margin: 10px auto;
    //             &:last-child {
    //                 .right {
    //                     background: none;
    //                 }
    //             }
    //             .left {
    //                 float: left;
    //                 width: 10%;
    //                 position: relative;
    //                 .date {
    //                     font-size: 25px;
    //                     font-weight: lighter;
    //                     letter-spacing: -1px;
    //                     line-height: 20px;
    //                 }
    //                 .day {
    //                     font-size: 12px;
    //                 }
    //                 .dot {
    //                     position: absolute;
    //                     right: -20px;
    //                     top: 4px;
    //                     width: 20px;
    //                     height: 20px;
    //                 }
    //             }
    //             .right {
    //                 box-sizing: border-box;
    //                 float: right;
    //                 width: 85%;
    //                 background: url("/assets/images/front/community/border.png") no-repeat;
    //                 background-position: 0 100%;
    //                 height: 100%;
    //                 .text-area {
    //                     float: left;
    //                     box-sizing: border-box;
    //                     .cat {
    //                         color: $color;
    //                         margin-bottom: 10px;
    //                         font-size: 16px;
    //                         font-weight: bold;
    //                     }
    //                     .title {
    //                         font-size: 20px;
    //                         margin-bottom: 10px;
    //                         line-height: 25px;
    //                     }
    //                     .detail-button {
    //                         cursor: pointer;
    //                     }
    //                 }
    //                 .img-area {
    //                     float: right;
    //                     box-sizing: border-box;
    //                     img {
    //                         width: auto;
    //                         max-height: 137px;
    //                     }
    //                 }
    //             }
    //         }
    //     }
    // }
}

.cafe-page {
    text-align: center;
    .bg-area {
        // margin-top: 10px;
        // background:transparent url('/assets/images/front/wannabe/cafe_bg.png') no-repeat;
        // background-size: cover;
        background: #f4f4f4;
        padding-bottom: 100px;
    }
    .cafe-content {
        margin-top: 100px;
        .row {
            overflow: hidden;
            margin-bottom: 30px;
            img.cafe-img {
                width: 100%;
            }
            .left {
                float: left;
                width: 50%;
            }
            .right {
                float: right;
                width: 50%;
            }
            .title {
                color: $color;
                margin-top: 10px;
                margin-bottom: 5px;
                font-size: 17px;
                font-weight: bold;
            }
            .text {
                font-size: 15px;
            }
        }
    }
}

.hr-page {
    text-align: center;
    .bg-area {
        // margin-top: 10px;
        background: #000 url("/assets/images/front/business/hr_bg.png") 50% 11% no-repeat;
        padding-bottom: 100px;
        overflow: hidden;
    }
    .hr-content {
        margin-top: 550px;
        > .row {
            overflow: hidden;
            margin-top: 50px;
            > .left {
                float: left;
                width: 20%;
                box-sizing: border-box;
            }
            > .right {
                padding-bottom: 50px;
                padding-left: 20px;
                text-align: left;
                box-sizing: border-box;
                float: right;
                width: 80%;
                background: url("/assets/images/front/business/border.png") no-repeat;
                background-position: 0 100%;
                .title {
                    color: $color;
                    font-size: 22px;
                    font-weight: bold;
                    margin-bottom: 15px;
                }
                .sub-title {
                    color: #b4b4b4;
                    font-size: 14px;
                    line-height: 26px;
                }
                .each-recruit {
                    border-top: 1px solid #b4b4b4;
                    padding: 5px 0;
                    overflow: hidden;
                    .left {
                        float: left;
                        width: 15%;
                        box-sizing: border-box;
                        font-size: 17px;
                    }
                    .right {
                        box-sizing: border-box;
                        float: right;
                        width: 85%;
                        .row {
                            span {
                                font-size: 15px;
                            }
                        }
                    }
                }
            }
        }
        .button-area {
            margin-top: 70px;
        }
    }
}

.branch-page {
    text-align: center;
    .bg-area {
        // background:#000 url('/assets/images/front/business/branch_bg.png') 0 300px no-repeat;
        background: #f6f9fa;
        overflow: hidden;
        // margin-top: 10px;
    }
    .branch-content {
        .ask-business {
            border: 1px solid #000;
            position: relative;
            padding: 20px;
            .row1 {
                img {
                    width: 15px;
                    vertical-align: middle;
                }
                span.text1 {
                    font-weight: bold;
                    vertical-align: middle;
                    color: #24547a;
                    font-size: 13px;
                }
            }
            p.text2 {
                a {
                    font-weight: bold;
                    color: #505050 !important;
                    font-size: 25px;
                }
                margin: 7px 0;
            }
            p.text3 {
                color: #969a9b;
                font-size: 12px;
            }
            .abs-button {
                position: absolute;
                right: 20px;
                bottom: 20px;
            }
        }
        .text {
            font-size: 15px;
            line-height: 27px;
            color: #555;
        }
        .colored {
            color: #174360 !important;
        }
        strong {
            font-weight: normal !important;
        }
        .first-row {
            overflow: hidden;
            clear: both;
            .left {
                padding: 30px;
                padding-left: 130px;
                padding-top: 110px;
                float: left;
                width: 60%;
                box-sizing: border-box;
                text-align: left;
                .main-label {
                    margin-bottom: 15px;
                    color: #194866;
                    font-size: 15px;
                    border-top: 2px solid #194866;
                    border-bottom: 2px solid #194866;
                    padding: 3px 15px;
                    display: inline-block;
                    font-weight: bold;
                }
                .main-title {
                    margin-bottom: 15px;
                    color: #224e6b;
                    font-size: 34px;
                    letter-spacing: -1px;
                    line-height: 46px;
                    strong {
                        font-size: 42px;
                        font-weight: bold !important;
                    }
                }
                .colored {
                    font-size: 15px;
                    // margin-top: 10px;
                }
            }
            .right {
                width: 40%;
                float: right;
                box-sizing: border-box;
            }
        }

        .second-row {
            overflow: hidden;
            clear: both;
            .left {
                float: left;
                width: 45%;
            }
            .right {
                width: 55%;
                float: right;
                box-sizing: border-box;

                padding: 30px;
                padding-top: 80px;
                text-align: left;

                .sub-title {
                    font-size: 25px;
                    font-weight: bold;
                }

                .title-text {
                    font-size: 17px;
                    color: #333;
                    // margin: 20px 0 0px 0;
                }

                .text {
                    line-height: 25px;
                }
            }
        }

        .third-row {
            padding-top: 50px;
            .sub-title {
                font-size: 25px;
                font-weight: bold;
            }

            .title-text {
                font-size: 17px;
                color: #333;
                margin: 20px 0 0px 0;
            }

            .text {
                line-height: 27px;
            }
            height: 500px;
        }

        .fourth-row {
            padding: 50px 80px;
            .sub-title {
                font-size: 25px;
                font-weight: bold;
            }
            .title-text {
                font-size: 17px;
                color: #333;
                margin: 0px 0 20px 0;
            }
            .text {
                line-height: 27px;
            }
            .issue-box {
                margin-top: 50px;
                .row {
                    clear: both;
                    overflow: hidden;
                    border-top: 1px solid #193e56;
                    padding: 30px 50px;
                    text-align: left;
                    .fll {
                        text-align: left;
                    }
                    .issue {
                        width: 50px;
                        display: inline-block;
                        text-align: left;
                    }
                    .title {
                        color: #3f5f77;
                        margin: 10px 0;
                        font-size: 23px;
                        text-align: left;
                        font-weight: bold;
                    }
                    .text {
                        text-align: left;
                    }
                }
            }
        }

        .bg-bold {
            background: #f0f0f0;
        }
        margin-top: 0px;
        > .row {
            overflow: hidden;
            margin-top: 50px;
            &:last-child {
                .right {
                    background: none;
                }
            }
            > .left {
                float: left;
                width: 20%;
                box-sizing: border-box;
            }
            > .right {
                padding-bottom: 50px;
                padding-left: 20px;
                text-align: left;
                box-sizing: border-box;
                float: right;
                width: 80%;
                background: url("/assets/images/front/business/border.png") no-repeat;
                background-position: 0 100%;
                .title {
                    color: $color;
                    font-size: 20px;
                    font-weight: bold;
                    margin-bottom: 10px;
                    letter-spacing: -1px;
                }
                .sub-title {
                    color: #b4b4b4;
                    font-size: 15px;
                }
            }
        }
        .button-area {
            margin-top: 70px;
        }
    }
}

.affiliate-page {
    text-align: center;
    .bg-area {
        // margin-top: 10px;
        background: transparent url("/assets/images/front/business/affiliate_bg.png") no-repeat;
        overflow: hidden;
        background-size: 100%;
        height: 1100px;
        .button-area {
            // margin-top: 40px;
        }
    }
}

.counsel-page {
    text-align: center;
    .counsel-title {
        color: #e11b4a !important;
        font-size: 32px;
        font-weight: 400;
        margin: 10px 0;
    }
    .counsel-subtitle {
        color: #ccc !important;
        font-size: 14px;
        font-weight: 200;
        margin-top: 50px;
    }
    .line {
        display: inline-block;
        width: 50px;
        height: 2px;
        background: #ccc;
    }
    .bg-area {
        // margin-top: 10px;
        // background:#fff url('/assets/images/front/counsel/bg2.png') 49% center no-repeat;
        // height: 1111px;
        padding-bottom: 150px;
        overflow: hidden;
        .button-area {
            ul {
                border: 1px solid #eee;
                width: 80%;
                li {
                    width: 25%;
                    float: left;
                    &:nth-child(1) {
                        a {
                            border-right: 1px dashed #eee;
                            border-left: 1px solid #fff;
                        }
                    }
                    &:nth-child(2) {
                        a {
                            border-right: 1px dashed #eee;
                            border-left: 1px solid #fff;
                        }
                    }
                    &:nth-child(3) {
                        a {
                            border-left: 1px solid #fff;
                            border-right: 1px dashed #eee;
                        }
                    }
                    &:nth-child(4) {
                        a {
                            border-left: 1px solid #fff;
                        }
                    }
                    a {
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        // border: 1px solid #eee;
                        height: 200px;

                        &:hover {
                            border: 1px solid #e11b4a;
                            span {
                                color: #e11b4a !important;
                            }
                        }
                        .inner-box {
                            height: 120px;
                            position: relative;
                            width: 100%;
                            img {
                                width: 70px;
                                display: inline-block;
                            }
                            span {
                                position: absolute;
                                bottom: 10px;
                                display: block;
                                text-align: center;
                                color: #333;
                                font-size: 17px;
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
    .event-img-box {
        margin-top: 100px;
        position: relative;
        .event-img {
        }
        .text {
            position: absolute;
            left: 42%;
            bottom: 130px;
            color: #fff;
            font-weight: bold;
            font-size: 14px;
        }
    }
    .page-title {
        color: #e11b4a !important;
        border-top: 2px solid #e11b4a !important;
    }
    .page-text {
        color: #696969 !important;
    }
}

.modal-img-box {
    position: relative;
    .event-img-box {
        margin-top: 100px;
        position: relative;
        .event-img.m-img {
            width: 100%;
        }
    }
    .text {
        position: absolute;
        left: 516px;
        bottom: 87px;
        color: #fff !important;
        font-weight: bold;
        font-size: 17px;
        &.footer-text {
            left: 428px;
        }
    }
}

.page-bar {
    display: none;
    margin-top: 10px;
    background: url("/assets/images/front/bg/page_bar.png") no-repeat;
    background-size: cover;
    height: 155px;
    //display: table;
    width: 100%;
    -moz-border-radius: 60px 0 60px 0;
    -webkit-border-radius: 60px 0 60px 0;
    border-radius: 60px 0 60px 0;
    .page-bar-text {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        color: #fff;
        font-size: 22px;
        text-shadow: 1px 0px 12px rgba(150, 150, 150, 1);
    }
}

.page-header-box {
    //padding-top: 70px;
    padding: 40px 0;
    &.leejua-header {
        padding: 70px 0;
        text-align: left;
        padding-left: 15%;
        .page-title {
            border-top: 0 !important;
        }
        .page-bg {
            text-align: left;
        }
        .page-text {
            text-align: left;
            line-height: 30px;
            color: #bbb;
        }
        .signature-box {
            margin-top: 20px;
            span {
                color: #fff;
                display: inline-block;
            }
            img {
                vertical-align: middle;
            }
        }
    }
    &.artistcrew {
        overflow: hidden;
        > div {
            box-sizing: border-box;
            height: 220px;
        }
        .fll {
            text-align: right;
            padding-right: 2%;
            width: 47%;
        }
        .flr {
            padding-left: 2%;
            width: 53%;
            display: table;
            .page-text {
                display: table-cell;
                vertical-align: middle;
                text-align: left !important;
                line-height: 23px;
                .text1 {
                    font-size: 14px;
                    font-weight: 600;
                    margin-bottom: 10px;
                }
                .text2 {
                    font-size: 14px;
                    font-weight: 300;
                }
            }
        }
    }
    &.light {
        padding: 20px 0;
        .page-title {
            border-top: none !important;
            font-weight: 300;
        }
    }
    // margin-top: 10px;
    .page-bg {
        //background: url('/assets/images/front/general/page_bg.png') no-repeat;
        //background-position: 0 100%;
        //background-size: 100%;
        text-align: center;
        padding-bottom: 10px;
        .image-box {
            //display: inline-block;
            display: none;
            .display-table {
                display: table;
                .page-image {
                    display: table-cell;
                    vertical-align: middle;
                    margin-right: 10px;
                    width: 56px;
                }
            }
        }
        .page-title {
            display: inline-block;
            color: #fff;
            font-size: 32px;
            letter-spacing: -1px;
            font-weight: bold;
            vertical-align: super;
            border-top: 2px solid #fff;
            padding-top: 10px;
        }
    }
    .page-text {
        color: #ccc;
        text-align: center;
        font-size: 16px;
        letter-spacing: -0.5px;
        padding-bottom: 0 !important;
    }
}

.bg-modal {
    .page-modal-bg {
        // background: url("/assets/images/front/general/page_bg.png") no-repeat;
        border-bottom: 2px solid #333;
        background-position: 0 100%;
        background-size: 100%;
        text-align: center;
        margin-bottom: 10px;
        padding-bottom: 10px;
        .page-title {
            display: inline-block;
            color: #333;
            font-size: 25px;
            letter-spacing: -1px;
            vertical-align: super;
        }
    }
    .content-box {
        border-bottom: 1px solid #000;
        margin-bottom: 10px;
        .pink-box {
            .title {
                background: #f7dbe2;
                padding: 5px 5px;
                font-size: 16px;
                font-weight: bold;
                color: #5c5c5c;
                margin-bottom: 7px;
            }
            .text {
                letter-spacing: -1px;
                color: #77797a;
                font-size: 13px;
                line-height: 19px;
            }
        }
    }
    .button-area {
        overflow: hidden;
        margin-bottom: 10px;
        text-align: center;
        button {
            width: 99%;
        }
        .pink-button {
            // border-radius: 4px;
            // width: 50%;
            border: none;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            font-size: 17px;
            background: $color;
            transition: all 0.3s;
            border: 2px solid $color;
            &:hover {
                transition: all 0.3s;
                color: $color;
                border: 2px solid $color;
                background: #fff;
            }
        }
    }
}

.modal-menthor,
.modal-menthor2,
.modal-menthor-header {
    .button-area {
        button {
            overflow: hidden;
            box-sizing: border-box;
        }
        .white-button {
            width: 98% !important;
            background: #fff;
            border: 1px solid #333;
            border-radius: 4px;
            padding: 10px;
            font-size: 15px;
            color: #333;
        }
        .black-button {
            width: 98% !important;
            background: #333;
            border: 1px solid #333;
            border-radius: 4px;
            padding: 10px;
            font-size: 15px;
            color: #fff;
        }
    }
    .menthor-content {
        .name-input,
        textarea {
            &::placeholder {
                color: #ccc !important;
                font-size: 15px;
            }
        }
        .new-askbox {
            margin-top: 20px;
            // padding: 40px 0;
            // border-top: 2px solid #e11b4a !important;
            .flr1 {
                padding-top: 17px;
            }
            .purpose {
                box-sizing: border-box;
                padding-bottom: 5px !important;
                border-bottom: 1px solid #ccc;
                margin-bottom: 30px;
                > div {
                    font-size: 15px;
                    display: inline-block;
                    color: #999;

                    vertical-align: top;
                    line-height: 15px;
                    &.line {
                        display: block;
                    }
                }
                .custom-select {
                    &.fixed-select {
                        width: 85px;
                    }
                    padding: 0 4px;
                    .show {
                        .select-arrow {
                            right: -12px;
                        }
                    }
                }
            }
            .phone-box {
                .custom-select {
                    padding: 0 4px;
                    .show {
                        .select-arrow {
                            right: 0;
                        }
                    }
                }
                input {
                    font-size: 15px !important;
                    color: #333;
                    padding-top: 0 !important;
                    background: #fff;
                    &::placeholder {
                        color: #999;
                    }
                }
                p.dash {
                    line-height: initial !important;
                }
            }
            .asktime-box {
                padding-bottom: 5px !important;
                border-bottom: 1px solid #ccc;
                margin-bottom: 30px;
                .show {
                    padding-left: 0 !important;
                }
            }
            .custom-select {
                display: inline-block;
                position: relative;
                padding: 0 5px;
                &.fixed-select {
                    width: 85px;
                }
                .show {
                    cursor: pointer;
                    position: relative;
                    padding: 0 5px;
                    span {
                        font-size: 15px;
                        color: #333;
                        line-height: 15px !important;
                    }
                    .select-arrow {
                        border-color: #888 transparent transparent transparent;
                        border-style: solid;
                        border-width: 5px 4px 0 4px;
                        height: 0;
                        right: -9px;
                        margin-left: -4px;
                        margin-top: -2px;
                        position: absolute;
                        top: 50%;
                        width: 0;
                    }
                }
                ul.options,
                ul.branch-options,
                ul.phone-options {
                    display: none;
                    position: absolute;
                    top: 23px;
                    z-index: 10;
                    border: 1px solid #ccc;
                    li {
                        cursor: pointer;
                        padding: 7px 15px;
                        font-size: 14px;
                        color: #666;
                        border-bottom: 1px solid #eee;
                        background: #fff;
                        &:last-child {
                            border-bottom: none;
                        }
                        &:hover {
                            background: #eee;
                        }
                    }
                }
                ul.options {
                    li {
                        width: 100px;
                    }
                }
                ul.phone-options {
                    left: 0px;
                    li {
                        width: 28px;
                    }
                }
                ul.branch-options {
                    left: 0px;
                    li {
                        width: 100px;
                    }
                }
            }
            .agree-box {
                height: 100px;
                overflow: auto;
                text-align: left;
            }
        }

        .small-label {
            width: 135px !important;
        }
        .large-label {
            // width: 170px !important;
            width: 66% !important;
            // span {
            //   font-size: 13px;
            //   letter-spacing: -1px;
            // }
            .normal-text {
                font-size: 14px;
                letter-spacing: 0;
            }
        }
        input.form-error {
            margin-top: 0 !important;
        }
        input {
            font-size: 16px;
            &::-webkit-input-placeholder {
                /* Chrome/Opera/Safari */
                color: #e76d6d;
            }
            &::-moz-placeholder {
                /* Firefox 19+ */
                color: #e76d6d;
            }
            &:-ms-input-placeholder {
                /* IE 10+ */
                color: #e76d6d;
            }
            &:-moz-placeholder {
                /* Firefox 18- */
                color: #e76d6d;
            }
        }
        input[type="text"] {
            background: #f2f2ec;
            box-shadow: none;
            outline: none;
            border: 0;
            vertical-align: top;
            // height: 52px;
            margin-left: -4px;
            padding: 0 20px;
            width: 89%;
            box-sizing: border-box;
            color: $color;
            margin-top: 0 !important;
        }
        textarea {
            // margin-top: 0 !important;
            // color: $color;
            // font-size: 16px;
            // background: #f2f2ec;
            // border: none;
            // // width: 932px;
            // width: 905px;
            // padding-left: 20px;
            // height: 138px;
            // margin-left: -3px;
            // vertical-align: top;
            // &::-webkit-input-placeholder {
            //   /* Chrome/Opera/Safari */
            //   color: #e76d6d;
            // }
            // &::-moz-placeholder {
            //   /* Firefox 19+ */
            //   color: #e76d6d;
            // }
            // &:-ms-input-placeholder {
            //   /* IE 10+ */
            //   color: #e76d6d;
            // }
            // &:-moz-placeholder {
            //   /* Firefox 18- */
            //   color: #e76d6d;
            // }
        }
        .menthor-title {
            color: $color;
            font-size: 27px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 50px;
        }
        .table-row {
            .fll {
                padding-right: 5px;
                box-sizing: border-box;
            }
        }
        table {
            // margin-left: -2px;
            margin-bottom: 2px;
            width: 100%;
            tr {
                // background: #f2f2ec;
                &:last-child {
                    td {
                        border-bottom: 0;
                    }
                }
            }
            td {
                border-bottom: 2px solid #fff;
            }
            .img-box {
                width: 52px;
                vertical-align: middle;
                display: table-cell;
                // background: $color;
                img {
                    // width: 90%;
                }
                p {
                    font-size: 12px;
                    letter-spacing: -0.5px;
                    text-align: center;
                }
            }
            .subject-name {
                padding: 7px 15px;
                color: $color;
                font-size: 16px;
                width: 20%;
                // text-align: center;
                box-sizing: border-box;
            }
            .label-box {
                box-sizing: border-box;
                margin-bottom: 3px;
                padding: 10px 0;
                width: 88%;
                span {
                    margin-left: 5px;
                    vertical-align: middle;
                }
                label {
                    display: inline-block;
                    width: 33.3%;
                    // &.long {
                    //   width: 170px;
                    // }
                }
            }
        }
        .counsel-box {
        }
        .useless-box {
            border: 6px solid #f2f2ec;
            // height: 50px;
            margin: 15px 0;
        }
        .img-area {
            //border: 2px solid #e4001c;
            box-sizing: border-box;
            a {
                width: 100%;
                display: inline-block;
                img {
                    width: 100%;
                    display: inline-block;
                }
            }
        }
        .button-area {
            overflow: hidden;
            margin-bottom: 10px;
            button {
                width: 100%;
            }
            .gray-button {
                border: 2px solid #898989;
                color: #898989;
                text-align: center;
                padding: 10px 0;
                font-size: 17px;
                background: #fff;
                transition: all 0.3s;
                &:hover {
                    transition: all 0.3s;
                    color: #fff;
                    background: #898989;
                }
            }
            .primary-button {
                border: 2px solid #df0440;
                color: #df0440;
                text-align: center;
                padding: 10px 0;
                font-size: 17px;
                background: #fff;
                transition: all 0.3s;
                &:hover {
                    transition: all 0.3s;
                    color: #fff;
                    background: #df0440;
                }
            }
        }
        .agree-box {
            height: 100px;
            overflow: auto;
        }
    }
}

.modal-branch,
.modal-affiliate {
    .menthor-content {
        input.form-error {
            margin-top: 0 !important;
        }
        input {
            font-size: 16px;
            &::-webkit-input-placeholder {
                /* Chrome/Opera/Safari */
                color: #e76d6d;
            }
            &::-moz-placeholder {
                /* Firefox 19+ */
                color: #e76d6d;
            }
            &:-ms-input-placeholder {
                /* IE 10+ */
                color: #e76d6d;
            }
            &:-moz-placeholder {
                /* Firefox 18- */
                color: #e76d6d;
            }
        }
        input[type="text"] {
            background: #f2f2ec;
            box-shadow: none;
            outline: none;
            border: 0;
            vertical-align: top;
            height: 52px;
            margin-left: -4px;
            padding: 0 20px;
            width: 89%;
            box-sizing: border-box;
            color: $color;
            margin-top: 0 !important;
        }
        input[name="location"],
        input[name="brand"] {
            width: calc(100% - 52px);
        }
        textarea {
            margin-top: 0 !important;
            color: $color;
            font-size: 16px;
            background: #f2f2ec;
            border: none;
            // width: 932px;
            width: 905px;
            padding-left: 20px;
            height: 138px;
            margin-left: -3px;
            vertical-align: top;
            &::-webkit-input-placeholder {
                /* Chrome/Opera/Safari */
                color: #e76d6d;
            }
            &::-moz-placeholder {
                /* Firefox 19+ */
                color: #e76d6d;
            }
            &:-ms-input-placeholder {
                /* IE 10+ */
                color: #e76d6d;
            }
            &:-moz-placeholder {
                /* Firefox 18- */
                color: #e76d6d;
            }
        }
        .menthor-title {
            color: $color;
            font-size: 27px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 50px;
        }
        .table-row {
            .fll {
                padding-right: 5px;
                box-sizing: border-box;
            }
        }
        table {
            // margin-left: -2px;
            margin-bottom: 2px;
            width: 100%;
            tr {
                background: #f2f2ec;
                &:last-child {
                    td {
                        border-bottom: 0;
                    }
                }
            }
            td {
                border-bottom: 2px solid #fff;
            }
            .img-box {
                width: 52px;
                vertical-align: middle;
                display: table-cell;
                background: $color;
                img {
                    // width: 90%;
                }
                p {
                    color: #fff;
                    font-size: 12px;
                    letter-spacing: -0.5px;
                    text-align: center;
                }
            }
            .subject-name {
                padding: 7px 15px;
                color: $color;
                font-size: 16px;
                width: 20%;
                // text-align: center;
                box-sizing: border-box;
            }
            .label-box {
                box-sizing: border-box;
                margin-bottom: 3px;
                padding: 10px 0;
                width: 80%;
                span {
                    margin-left: 5px;
                    vertical-align: middle;
                }
                label {
                    display: inline-block;
                    width: 150px;
                    &.long {
                        width: 170px;
                    }
                }
            }
        }
        .useless-box {
            border: 6px solid #f2f2ec;
            // height: 50px;
            margin: 15px 0;
        }
        .img-area {
            //border: 2px solid #e4001c;
            box-sizing: border-box;
            a {
                width: 100%;
                display: inline-block;
                img {
                    width: 100%;
                    display: inline-block;
                }
            }
        }
        .button-area {
            overflow: hidden;
            margin-bottom: 10px;
            button {
                width: 99%;
            }
            .gray-button {
                border: 2px solid #898989;
                color: #898989;
                text-align: center;
                padding: 10px 0;
                font-size: 17px;
                background: #fff;
                transition: all 0.3s;
                &:hover {
                    transition: all 0.3s;
                    color: #fff;
                    background: #898989;
                }
            }
            .primary-button {
                border: 2px solid #df0440;
                color: #df0440;
                text-align: center;
                padding: 10px 0;
                font-size: 17px;
                background: #fff;
                transition: all 0.3s;
                &:hover {
                    transition: all 0.3s;
                    color: #fff;
                    background: #df0440;
                }
            }
        }
        .agree-box {
            height: 100px;
            overflow: auto;
        }
    }
}

.modal-diploma {
    .relative-box {
        .w100.bg-modal {
            .page-content-box {
                .header-bar {
                    box-sizing: border-box;
                    margin-top: 50px;
                    background: $color;
                    padding: 10px;
                    border-radius: 8px;
                    text-align: center;
                    display: table;
                    width: 100%;
                    .inner-box {
                        display: table-cell;
                        vertical-align: middle;
                        line-height: 10px;
                        ul {
                            li {
                                float: left;
                                span {
                                    color: #fff;
                                    font-size: 15px;
                                    &.bold {
                                        font-size: 16px;
                                        margin-right: 10px;
                                    }
                                }
                                &:before {
                                    content: " | ";
                                    padding: 0 10px;
                                    color: #fff;
                                }
                                &:first-child {
                                    &:before {
                                        content: none;
                                    }
                                }
                            }
                        }
                    }
                }
                .page-content {
                    margin-top: 50px;
                    .row {
                        overflow: hidden;
                        .left {
                            color: $color;
                            border-top: 3px solid $color;
                            padding-top: 5px;
                            font-size: 16px;
                            font-weight: bold;
                            float: left;
                            width: 15%;
                        }
                        .right {
                            float: right;
                            width: 84%;
                            margin-left: 1%;
                            border-top: 3px solid #e0e0e0;
                            color: #7e7e7e;
                            font-size: 14px;
                            padding-top: 5px;
                            line-height: 24px;
                            a.link2 {
                                &.valid {
                                    &::before {
                                        content: " | ";
                                    }
                                }
                            }
                        }
                        margin-bottom: 10px;
                    }
                    .button-area {
                        overflow: hidden;
                        margin-bottom: 10px;
                        margin-top: 50px;
                        button {
                            width: 99%;
                        }
                        .primary-button {
                            border: 2px solid #df0440;
                            text-align: center;
                            padding: 10px 0;
                            font-size: 17px;
                            transition: all 0.3s;
                            color: #fff;
                            background: #df0440;
                            &:hover {
                                transition: all 0.3s;
                                color: #df0440;
                                background: #fff;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1550px) {
    .affiliate-page {
        .bg-area {
            // height: 870px !important;
        }
        .button-area {
            // margin-top: 20px !important;
        }
    }
}

.agree-box {
    // border-bottom: 1px solid #c8c5c5;
    border: 1px solid #eee;
    padding: 10px;
    margin-bottom: 7px;
    &::-webkit-scrollbar {
        width: 2px;
    }
    &::-webkit-scrollbar-track {
        background-color: #eaeaea;
        border-left: 1px solid #ccc;
    }
    &::-webkit-scrollbar-thumb {
        background-color: $sub-color;
    }
    &::-webkit-scrollbar-thumb:hover {
        background-color: #aaa;
    }
    scrollbar-base-color: #e4a8ae;
    scrollbar-arrow-color: #fff;
    p {
        font-size: 12px;
        margin-bottom: 4px;
        letter-spacing: -1px;
        font-weight: normal;
        &.title {
            font-weight: bold;
            font-size: 14px;
            // border-bottom: 1px solid #efefef;
            padding: 5px 0;
        }
    }
    ul {
        width: 100%;
        padding-bottom: 5px;
        padding-left: 10px;
        li {
            color: #898989;
            font-size: 12px;
            letter-spacing: -1px;
            margin-bottom: 4px;
        }
    }
    .label-box {
        text-align: right;
        margin-right: 4px;
        line-height: 52px;
        vertical-align: top;
        &:last-child {
            margin-right: 0;
        }
    }
    label {
        font-weight: bold;
        color: #898989;
        font-size: 13px;
        letter-spacing: -0.5px;
    }
}

.modal-community {
    .table-crew {
        margin-top: 10px;
        tr {
            th {
                padding: 4px 0;
                font-weight: normal;
                text-align: left;
                width: 80px;
                color: #666;
            }
            td {
                padding: 0 4px;
                color: #333;
            }
        }
    }
    .community-content {
        .img-box {
            img {
                padding-bottom: 10px;
                box-sizing: border-box;
            }
            .row {
                img {
                    &:nth-child(1) {
                        padding-right: 5px;
                    }
                    &:nth-child(2) {
                        padding-left: 5px;
                    }
                }
                margin-bottom: 5px;
            }
        }
        .community-content-box {
            max-height: 400px;
            overflow-y: auto;
            overflow-x: hidden;
            &::-webkit-scrollbar {
                width: 2px;
            }
            &::-webkit-scrollbar-track {
                background-color: #eaeaea;
                border-left: 1px solid #ccc;
            }
            &::-webkit-scrollbar-thumb {
                background-color: $sub-color;
            }
            &::-webkit-scrollbar-thumb:hover {
                background-color: #aaa;
            }
            scrollbar-base-color: #e4a8ae;
            scrollbar-arrow-color: #fff;
            iframe {
                width: 100% !important;
                height: 455px;
            }
        }
    }
}

.modal-youtube {
    background: rgba(0, 0, 0, 0);
    border: none;
    padding: 0;
    text-align: center;
    .bg-modal {
        .youtube-iframe {
            width: 700px !important;
            height: 400px !important;
        }
    }
    .sub-youtube {
        .sub-youtube-iframe {
        }
        img {
            cursor: pointer;
            border: 1px solid rgba(0, 0, 0, 0);
            &:hover,
            &.active {
                border: 1px solid $color;
            }
        }
    }
}

.modal-teacher {
    .content-box {
        img {
            // max-width: 400px;
            max-width: 450px;
            margin-left: -20px;
        }
    }
    .teacher-info {
        height: 95%;
        display: table;
        .teacher-info-inner {
            vertical-align: middle;
            display: table-cell;
        }
        .pink-box-outer {
            max-height: 465px;
            overflow: auto;
            &::-webkit-scrollbar {
                width: 2px;
            }
            &::-webkit-scrollbar-track {
                background-color: #eaeaea;
                border-left: 1px solid #ccc;
            }
            &::-webkit-scrollbar-thumb {
                background-color: $sub-color;
            }
            &::-webkit-scrollbar-thumb:hover {
                background-color: #aaa;
            }
            scrollbar-base-color: #e4a8ae;
            scrollbar-arrow-color: #fff;
        }
    }
}

.useless-box {
    display: none;
    padding: 10px;
    background: #f2f2ec;
    span {
        display: inline-block;
        border: 1px solid #e3e3e3;
        color: #898989;
        text-align: center;
        padding: 5px 5px;
        font-size: 13px;
        background: #fff;
        margin-right: 5px;
        margin-bottom: 3px;
        &:last-child {
            margin-right: 0;
        }
    }
}

.phone-box {
    display: inline-block;
    background: #f2f2ec;
    box-shadow: none;
    outline: none;
    border: 0;
    vertical-align: top;
    height: 52px;
    margin-left: -4px;
    padding: 0 20px;
    width: 89%;
    box-sizing: border-box;
    color: #e31a4c;
    margin-top: 0 !important;
    input {
        width: 82% !important;
    }
    .phone2 {
        width: 100px !important;
        text-align: center;
    }
    .phone3 {
        width: 100px !important;
        text-align: center;
    }
    p.dash {
        display: inline-block;
        line-height: 52px;
        font-size: 20px;
    }
}

.select2-container--default .select2-selection--single {
    background: #f2f2ec !important;
    border: none !important;
    border-radius: 0 !important;
    outline: 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 52px !important;
    font-size: 16px !important;
    color: #e31a4c !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 13px !important;
}

.select2-container--open .select2-dropdown--below {
    top: 23px;
    background: #f2f2ec;
    border: 1px solid #ccc;
    border-top: 0;
}

.select2-container--default .select2-results > .select2-results__options {
    width: 100%;
}

.select2-container {
    vertical-align: top !important;
}

.modal-confirm {
    padding-left: 305px;
    .confirm-box {
        display: table;
        height: 100%;
    }
    .cell-box {
        display: table-cell;
        vertical-align: middle;
    }
    .title {
        color: #db2353;
        font-size: 26px;
        letter-spacing: -1px;
        font-weight: bold;
    }
    .sub-title {
        color: #333;
        font-size: 20px;
    }
    .ps {
        color: #aaa;
        font-size: 17px;
    }
    .span-title {
        color: #db2353;
        font-size: 16px;
        font-weight: bold;
    }
    .span-text {
        color: #333;
        font-size: 16px;
        letter-spacing: -1px;
    }
}

.resume-page {
    h3 {
        text-align: center;
        color: #666;
        font-size: 30px;
        letter-spacing: 30px;
        margin-bottom: 30px;
        padding-left: 30px;
    }
    .resume-content {
        margin-bottom: 100px;
        border: 1px solid #ddd;
        margin: 20px 0 100px 0;
        padding: 50px;
        .step-1 {
            .overview {
                overflow: hidden;
                .picture {
                    border: 2px solid #e31a4c;
                    float: left;
                    width: 15%;
                    height: 181px;
                    text-align: center;
                    display: table;
                    span {
                        display: table-cell;
                        vertical-align: middle;
                        overflow: hidden;
                        max-width: 135px;
                        &:hover {
                            color: #e31a4c;
                            cursor: pointer;
                        }
                    }
                }
                table {
                    float: right;
                    width: 83%;
                    box-sizing: border-box;
                    padding-left: 20px;
                    border-collapse: collapse;
                    th {
                        background: #e31a4c;
                        color: #fff;
                        padding: 7px;
                        font-weight: normal;
                        border-right: 10px solid #fff;
                        border-bottom: 1px solid #fff;
                    }
                    td {
                        font-weight: normal;
                        padding: 7px;
                        border-top: 1px solid #eee;
                        border-left: 1px solid #eee;
                        input {
                            width: 100%;
                            border: 0;
                            &::placeholder {
                                color: #ccc;
                            }
                        }
                    }
                    tr {
                        &:last-child {
                            td {
                                border-bottom: 1px solid #eee;
                            }
                        }
                    }
                }
            }
            .each-box {
                // margin-top: 30px;
                .title {
                    float: left;
                    width: 7%;
                    background: #e31a4c;
                    color: #fff;
                    display: table;
                    span {
                        display: table-cell;
                        vertical-align: middle;
                    }
                }
                table {
                    margin-top: 30px;
                    width: 100%;
                    box-sizing: border-box;
                    padding-left: 20px;
                    border-collapse: collapse;
                    th {
                        width: 70px;
                        background: #e31a4c;
                        color: #fff;
                        padding: 7px;
                        font-weight: normal;
                        border-right: 10px solid #fff;
                        border-bottom: 1px solid #fff;
                    }
                    td {
                        font-weight: normal;
                        padding: 7px;
                        border-top: 1px solid #eee;
                        border-left: 1px solid #eee;
                        input {
                            width: 100%;
                            border: 0;
                            &::placeholder {
                                color: #ccc;
                            }
                        }
                        .add-button {
                            border: 2px solid #e31a4c;
                            padding: 5px;
                            text-align: center;
                            cursor: pointer;
                            &:hover {
                                background: #e31a4c;
                                color: #fff;
                                .icon {
                                    color: #fff;
                                    border-color: #fff;
                                }
                            }
                            .icon {
                                border: 2px solid #e31a4c;
                                color: #e31a4c;
                                border-radius: 50%;
                                font-size: 20px;
                                font-weight: bold;
                                margin-right: 10px;
                                width: 22px;
                                height: 22px;
                                display: inline-block;
                                text-align: center;
                                vertical-align: middle;
                                line-height: 23px;
                            }
                            font-size: 15px;
                            font-weight: bold;
                            color: #e31a4c;
                        }
                    }
                    tr {
                        &:last-child {
                            td {
                                border-bottom: 1px solid #eee;
                            }
                        }
                    }
                }
            }
        }
        .step-2 {
            display: none;
            .intro {
                border: 2px solid #e31a4c;
                height: 700px;
                width: 100%;
                box-sizing: border-box;
                &::placeholder {
                    color: #ccc;
                }
            }
            .resume-agree-box {
                margin-top: 50px;
                .title {
                    font-size: 20px;
                    font-weight: lighter;
                    text-align: center;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    color: #666;
                }
                .info-box {
                    span {
                        color: #999;
                    }
                    border: 1px solid #ccc;
                    padding: 10px;
                    letter-spacing: -0.5px;
                }
            }
        }
        .button-area {
            margin-top: 100px;
            overflow: hidden;
            margin-bottom: 10px;
            button {
                width: 99%;
            }
            .gray-button {
                border: 2px solid #898989;
                color: #898989;
                text-align: center;
                padding: 10px 0;
                font-size: 17px;
                background: #fff;
                transition: all 0.3s;
                &:hover {
                    transition: all 0.3s;
                    color: #fff;
                    background: #898989;
                }
            }
            .primary-button {
                border: 2px solid #df0440;
                color: #df0440;
                text-align: center;
                padding: 10px 0;
                font-size: 17px;
                background: #fff;
                transition: all 0.3s;
                &:hover {
                    transition: all 0.3s;
                    color: #fff;
                    background: #df0440;
                }
            }
        }
    }
}

.ask-complete-page {
    padding-bottom: 150px;
    .review-box {
        width: 800px;
        margin: auto;
        border-top: 2px solid #ccc;
        padding: 10px 0 20px 0;
        img {
            vertical-align: middle;
            width: 30px;
        }
        .text1 {
            vertical-align: middle;
            color: #333;
            font-weight: bold;
            font-size: 16px;
            display: inline-block;
            margin: 0 5px;
        }
        .text2 {
            vertical-align: middle;
            font-size: 13px;
            color: #666;
        }
        .review-content {
            padding-top: 10px;
            border-radius: 12px;
            // padding: 7px;
            height: 209px;
            overflow: hidden;
            text-align: center;
            img.url {
                // width: 95%;
                // margin: auto;
            }
        }
    }
    .time-box {
        margin-top: 40px;
        .time-text {
            font-size: 14px !important;
            vertical-align: middle;
        }
        img {
            width: 20px;
            vertical-align: middle;
        }
    }
    .time-clock {
        font-size: 20px !important;
        letter-spacing: -1px;
        margin-left: 5px;
        vertical-align: middle;
    }
    .header-icon {
        width: 80px;
    }
    .page-title {
        color: #333 !important;
        font-size: 40px !important;
        span {
            color: $color;
        }
    }
    .page-text {
        color: #333 !important;
    }
    .info-box {
        font-size: 16px;
        div {
            box-sizing: border-box;
        }
        .fll {
            padding: 10px;
        }
        .flr {
            padding: 10px;
        }
    }
}

.modal-price {
    h2 {
            color: #e31a4c;
            font-size: 15px;
            letter-spacing: -1px;
            margin-top: 30px;   
    }
    table {
        // margin-top: 30px;
        margin-top: 10px;
        border-collapse: collapse;
        text-align: left;
        line-height: 1.5;
        border-top: 1px solid #aaa;
        width: 100%;
    }
    table thead th {
        padding: 4px;
        font-weight: bold;
        vertical-align: top;
        border-top: 1px solid #aaa;
        border-bottom: 1px solid #999;
        font-size: 12px;
        border-right: 1px solid #ccc;
    
        // &:first-child {
        //     border-right: 1px solid #ccc;
        // }
        &:last-child {
            // border-left: 1px solid #ccc;
            border-right: none;
        }
    }
    table tbody th {
        width: 150px;
        padding: 2px;
        font-weight: bold;
        vertical-align: top;
        border-bottom: 1px solid #ccc;
        background: #f3f6f7;
        font-size: 12px;
    }
    table td {
        padding: 2px;
        vertical-align: top;
        border-bottom: 1px solid #ccc;
        font-size: 12px;
        &:first-child {
            // width: 45%;
            color: $color;
            // border-right: 1px solid #ccc;
        }
        // &:last-child {
        //     border-left: 1px solid #ccc;
        //     width: 27%;
        // }
        border-right: 1px solid #ccc;

        // &:first-child {
        //     border-right: 1px solid #ccc;
        // }
        &:last-child {
            // border-left: 1px solid #ccc;
            border-right: none;
        }
    }
}

.modal-return {
    table {
        margin-top: 30px;
        border-collapse: collapse;
        text-align: left;
        line-height: 1.5;
        border-top: 1px solid #aaa;
        width: 100%;
    }
    table thead th {
        padding: 10px 15px;
        font-weight: bold;
        vertical-align: middle;
        border-top: 1px solid #aaa;
        border-bottom: 1px solid #999;
        font-size: 12px;
        &:first-child {
            border-right: 1px solid #ccc;
        }
        &:last-child {
            border-left: 1px solid #ccc;
        }
    }
    table tbody th {
        padding: 10px 15px;
        font-weight: bold;
        vertical-align: middle;
        border-bottom: 1px solid #ccc;
        background: #eee;
        font-size: 12px;
    }
    table td {
        padding: 10px 15px;
        vertical-align: middle;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        font-size: 12px;
        &:first-child {
            border-right: 1px solid #ccc;
        }
        &:last-child {
            border-left: 1px solid #ccc;
        }
    }
}

img {
    -ms-interpolation-mode: bicubic !important;
}

.text-phone {
    // background: url('/assets/images/common/text_phone.png') no-repeat;
    // border: 2px solid #e6003e;
    // height: 35px;
    // vertical-align: top;
    // border-radius: 24px;
    // background-size: cover;
    // padding: 0 10px;
    // text-align: center;
    // margin-right: 10px;
    a {
        .icon-phone {
            width: 25px;
            vertical-align: middle;
        }
        line-height: 35px;
        color: #e6003e !important;
        font-weight: bold;
        font-size: 21px;
        padding: 0 10px;
        opacity: 0.9;
        vertical-align: inherit;
    }
}

.lab-icon {
    vertical-align: middle;
    widows: 48px;
}

.maintab-box {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    .maintab {
        // width: 190px;
    }
}

.asktime-box {
    background: #f2f2ec;
    img {
        vertical-align: middle;
    }
    .radio-label {
        vertical-align: sub;
        font-size: 15px;
        margin-left: 15px;
    }
}

.community-content-box {
    padding: 80px 0;
    .page-modal-bg {
        background: url("/assets/images/front/general/page_bg.png") no-repeat;
        background-position: 0 100%;
        background-size: 100%;
        text-align: center;
        margin-bottom: 10px;
        padding-bottom: 10px;
        .page-title {
            display: inline-block;
            color: $color;
            font-size: 25px;
            letter-spacing: -1px;
            vertical-align: super;
        }
    }
    .list-view-button {
        border: 1px solid $color;
        color: $color;
        padding: 7px 14px;
        border-radius: 4px;
        font-size: 16px;
    }
}

.enlarge-icon {
    width: 18px !important;
    display: inline-block !important;
    margin-left: 7px;
    vertical-align: text-top;
}

.center-trunk-page {
    .center-img {
        width: 100%;
        height: 350px;
        background-size: cover !important;
        display: inline-block;
        box-sizing: border-box;
        position: relative;
        span {
            display: none;
            position: absolute;
            width: 70px;
            height: 70px;
            left: 40%;
            top: 43%;
        }
        .bg {
            display: none;
            background-color: rgba(0, 0, 0, 0.5) !important;
            position: absolute;
            width: 100%;
            height: 100%;
        }
        &:hover {
            span,
            .bg {
                display: block;
            }
        }
    }
    //.enlarge-img {
    //img {
    //  width: 19px;
    //  margin-top: 10px;
    //  vertical-align: top;
    //  margin-left: 10px;
    //}
    //}
    .inner-box {
        ul {
            margin-top: 20px;
            margin-bottom: 50px;
            li {
                font-size: 14px;
                line-height: 22px;
                margin-bottom: 5px;
            }
        }
    }
    .center-trunk-container {
        width: 1055px;
        margin: auto;
        .box {
            width: 310px;
            float: left;
            &.box2 {
                // margin: 0 60px;
                margin: 0 20px;
            }
            .title-box {
                p {
                    margin: 10px 0;
                    font-size: 20px;
                    color: #e11a4d;
                }
                span {
                    display: block;
                    border-bottom: 2px solid #e11a4d;
                    width: 50px;
                    height: 2px;
                    font-size: 14px;
                }
            }
        }
    }
}

.modal-center {
    .img-box {
        margin-top: 20px;
        .center-img-01 {
            width: 100%;
            height: 300px;
            display: inline-block;
            background-size: cover !important;
        }
        .center-img-02 {
            width: 49.5%;
            height: 250px;
            display: inline-block;
            background-size: cover !important;
        }
        .center-img-03 {
            width: 49.5%;
            height: 250px;
            display: inline-block;
            background-size: cover !important;
        }
    }
    ul {
        margin-top: 20px;
        li {
            text-align: left !important;
            margin-bottom: 7px;
            span.bold {
                display: inline-block;
                width: 50px;
            }
            span {
                color: #797979;
                font-size: 14px;
            }
        }
    }
}

.primary-color {
    color: $color;
}

.bi-page {
    .section {
        padding: 30px 0;
        text-align: center;
        .title {
            margin-bottom: 15px;
            text-align: left;
        }
        .content {
            text-align: center;
            p {
                text-align: left;
            }
            img {
                display: inline-block;
                margin-top: 20px;
                // width: 100%;
            }
        }
    }
}

.history-page {
    .each-month {
        margin-bottom: 15px;
        .month {
            color: #e01c4c;
            // font-weight: bold;
            letter-spacing: -0.5px;
            font-size: 16px;
            display: inline-block;
            vertical-align: text-top;
        }
        .icon-box {
            display: inline-block;
            width: 15px;
            vertical-align: sub;
            .icon {
                vertical-align: bottom;
                width: 15px;
            }
        }
        .text {
            display: inline-block;
            vertical-align: text-top;
            line-height: 25px;
            letter-spacing: -0.5px;
            max-width: 500px;
        }
    }

    .left-half {
        box-sizing: border-box;
        border-right: 1px solid #ccc;
        padding-right: 40px;
        .year {
            img {
                right: -53px;
            }
        }
        .each-month {
            position: relative;
            .month {
                padding-left: 15px;
            }
            .border-eraser {
                position: absolute;
                width: 10px;
                height: 100px;
                background: #fff;
                right: -45px;
                top: -33px;
            }
        }
    }
    .right-half {
        box-sizing: border-box;
        // border-left: 1px solid #ccc;
        padding-left: 40px;
        .year {
            img {
                left: -53px;
            }
        }
        .each-month {
            .month {
                padding-right: 15px;
            }
        }
    }

    .year {
        position: relative;
        font-size: 30px;
        font-weight: bold;
        color: #e01c4c;
        margin-bottom: 20px;
        margin-top: -11px;
        img {
            top: 10px;
            width: 25px;
            position: absolute;
        }
    }
}

.teacher-page-new {
    ul.teacher-box {
        margin: 70px 0 100px 0;
        li {
            float: left;
            text-align: center;
            margin-bottom: 5px;
            img {
                display: inline-block;
                width: 97%;
                &:hover {
                    cursor: pointer;
                }
            }
            &:nth-child(5n),
            &:nth-child(1) {
                text-align: left;
            }
            &:nth-child(4n) {
                text-align: right;
            }
        }
    }
}

.guide-container {
    .guide-title {
        color: #e31a4c;
        font-size: 18px;
        // background: #f4f4f4;
        padding: 15px 30px;
        width: 100%;
        .step {
            color: #e31a4c;
            font-size: 25px;
            display: inline-block;
            margin-right: 15px;
        }
    }
    .tabs {
        margin-top: 50px;
        margin-bottom: -5px;
        li {
            cursor: pointer;
            border-radius: 8px 8px 0 0;
            padding: 7px 20px;
            display: inline-block;
            background: #e4e4e4;
            color: #808080;
            &.active {
                background: #e11a4d;
                color: #fff;
            }
        }
    }
    .guide-box {
        clear: both;
        overflow: hidden;
        margin-bottom: 0 !important;
        background: none !important;
        > div {
            position: relative;
        }
        .menu-box-list-container {
            width: 45%;
            display: inline-block;
            .menu-box-list {
                background: #e11c4a;
                border: 2px solid #e11c4a;
                border-radius: 4px;
                color: #fff;
                -webkit-box-shadow: -1px 6px 3px -2px #ad0d32;
                -moz-box-shadow: -1px 6px 3px -2px #ad0d32;
                box-shadow: -1px 6px 3px -2px #ad0d32;
                text-align: center;
                padding: 4px 10px;
                box-sizing: border-box;
                font-size: 16px;
                margin-bottom: 10px;
                cursor: pointer;
                &:last-child {
                    margin-right: 0;
                }
                &.active {
                    -webkit-box-shadow: -1px 6px 3px -2px #ad0d32;
                    -moz-box-shadow: -1px 6px 3px -2px #ad0d32;
                    box-shadow: -1px 6px 3px -2px #ad0d32;
                    color: #e11c4a;
                    background: #fff;
                }
            }
        }
        .menu-box-list.active {
            background: #e31a4c;
            color: #fff;
        }
        .menu-box-list a {
            display: block;
            width: 100%;
        }
    }
}

.class-page {
    .class-container {
        .left-area {
            float: left;
            width: 30%;
            .class-box {
                position: relative;
                // border: 1px solid #e9e9e7;
                border-bottom: none;
                .trans-img {
                    position: absolute;
                    bottom: 3px;
                    left: 2.5%;
                    width: 95%;
                    height: 180px;
                    margin-left: 2px;
                }
                .trans-arrow-box {
                    position: absolute;
                    bottom: 15px;
                    width: 100%;
                    text-align: center;
                    .trans-arrow {
                        display: inline-block;
                        // width: 50px;
                    }
                }
                > img {
                    width: 100%;
                }
                .overview {
                    background: #f5f5f5;
                    // background: #e11c4a;
                    // height: 22px;
                    overflow: hidden;
                    padding: 6px 10px;
                    padding-right: 13px;
                    // border-top: 1px solid #7a7a7a;
                    // border-bottom: 1px solid #e9e9e7;
                    div {
                        font-size: 15px;
                        // color: #fff;
                        color: #7a7a7a;
                        padding: 0 7px;
                        line-height: 20px;
                        float: left;
                        box-sizing: border-box;
                        letter-spacing: -0.5px;
                        &.soft {
                            color: #a8a9ad;
                        }
                        &:last-child {
                            text-align: right;
                        }
                        &.overview-title {
                            text-align: center;
                            font-size: 15px;
                            font-weight: bold;
                            float: left;
                            display: inline-block;
                            line-height: 37px;
                            .live {
                                display: inline-block;
                                margin-left: 6px;
                                background: #ffdae1;
                                color: #ee2955;
                                padding: 3px 8px;
                                border-radius: 40px;
                                font-size: 10px;
                                line-height: normal;
                                letter-spacing: 0;
                            }
                        }
                        &.overview-right {
                            float: right;
                            p {
                                text-align: right;
                                font-size: 13px;
                                letter-spacing: -1px;
                            }
                            p.date {
                                letter-spacing: -0.3px;
                                font-size: 11px;
                                margin-bottom: -3px;
                            }
                        }
                    }
                }
                .class-tab {
                    width: 100%;
                    display: block;
                    li {
                        border-top: 1px solid #e9e9e7;
                        border-right: 1px solid #e9e9e7;
                        border-bottom: 1px solid #e9e9e7;
                        text-align: center;
                        float: left;
                        width: 33.3%;
                        padding: 7px 8px;
                        box-sizing: border-box;
                        font-size: 13px;
                        cursor: pointer;
                        color: #c0c0c0;
                        background: #f9f9f9;
                        &:last-child {
                            border-right: none;
                        }
                        &.active {
                            border-bottom: none;
                            color: #ea2c5a;
                            font-weight: bold;
                            background: #fff;
                        }
                    }
                    // display: block;
                    // margin-top: -6px;
                    &.branch {
                        display: none;
                    }
                }
                .class-list {
                    &::-webkit-scrollbar {
                        width: 6px;
                        height: 6px;
                    }
                    &::-webkit-scrollbar-thumb {
                        background: #dbdbdb;
                        border-radius: 10px;
                    }
                    &::-webkit-scrollbar-thumb:hover {
                        background: linear-gradient(13deg, #c7ceff 14%, #f9d4ff 64%);
                    }
                    &::-webkit-scrollbar-track {
                        background: #ffffff;
                        border-radius: 0px;
                        box-shadow: inset 7px 10px 12px #f0f0f0;
                    }
                    // border-bottom: 1px solid #e9e9e7;
                    // margin-top: -6px;
                    border-top: 0;
                    width: 100%;
                    // border: 2px solid #891635;
                    // border: 2px solid #ddd;
                    background: #fff;
                    box-sizing: border-box;
                    overflow: auto;
                    // height: 426px;
                    height: 650px;
                    &.branch {
                        // height: 314px;
                        height: 650px;
                    }
                    li {
                        background: #fff;
                        // border-bottom: 1px solid #a1a1a1;
                        // margin: 10px;
                        padding: 8px 0;
                        &:last-child {
                            border-bottom: 0;
                            // margin-bottom: 0;
                            margin-bottom: 90px;
                        }
                        &.active {
                            background: #e11c4a;
                        }
                        // &:last-child {
                        // }
                        cursor: pointer;
                        &:hover,
                        &.active {
                            // background: #e11c4a;
                            background: #eee;
                            // opacity: 0.5;
                            // td,
                            // a {
                            //   color: #fff !important;
                            //   &.color-red {
                            //     color: #fff !important;
                            //   }
                            // }
                        }
                        table {
                            td {
                                &:last-child {
                                    // text-align: right;
                                }
                                span.circle-number {
                                    color: #fff;
                                    font-size: 12px;
                                    font-weight: bold;
                                    background: #eee;
                                    border-radius: 50%;
                                    width: 20px;
                                    height: 20px;
                                    display: inline-block;
                                    text-align: center;
                                    line-height: 20px;
                                    &.nailart {
                                        background: #fe9684;
                                    }
                                    &.makeup {
                                        background: #ee8fa5;
                                    }
                                    &.esthetic {
                                        background: #b18acf;
                                    }
                                    &.hair {
                                        background: #b3ceca;
                                    }
                                    &.special {
                                        background: #f3c35e;
                                    }
                                }
                                img {
                                    width: 40px;
                                    margin: 0 6px;
                                    margin-left: 0;
                                }
                                a {
                                    width: 60px;
                                    padding-top: 10px;
                                    padding-bottom: 10px;
                                    display: inline-block;
                                    // color: #fff !important;
                                    font-size: 14px;
                                    vertical-align: middle;
                                    text-align: center;
                                    margin-left: 10px;
                                    // background: #df5cac;
                                    &.status-regular {
                                        color: #e11c4a;
                                    }
                                    &.status-active {
                                        color: #ed6f31;
                                    }
                                    &.status-day {
                                        background: #b061f9;
                                    }
                                }
                                &.class-title {
                                    font-size: 13px;
                                    width: 69%;
                                    padding: 0 7px;
                                    color: #333;
                                }
                                &.color-red {
                                    padding-top: 0px;
                                    font-size: 11px;
                                    padding: 0 7px;
                                    height: 14px;
                                    // height: 28px;
                                    display: inline-block;
                                    overflow: hidden;
                                    color: #666 !important;
                                }
                            }
                        }
                    }
                }
            }
            .class-box2 {
                position: relative;
                .trans-img {
                    position: absolute;
                    bottom: 7px;
                    left: 2.5%;
                    width: 95%;
                    height: 90px;
                    margin-left: 2px;
                }
                > img {
                    width: 100%;
                }
                .overview {
                    background: #e11c4a;
                    // height: 22px;
                    overflow: hidden;
                    padding: 6px 0;
                    div {
                        font-size: 15px;
                        color: #fff;
                        padding: 0 7px;
                        line-height: 20px;
                        float: left;
                        box-sizing: border-box;
                        letter-spacing: -0.5px;
                        &:last-child {
                            text-align: right;
                        }
                        &.overview-title {
                            text-align: center;
                            font-size: 15px;
                            font-weight: bold;
                            float: left;
                            display: inline-block;
                            line-height: 37px;
                        }
                        &.overview-right {
                            float: right;
                            p {
                                text-align: right;
                            }
                            p.date {
                                font-size: 11px;
                                margin-bottom: -3px;
                            }
                        }
                    }
                }
                .class-tab {
                    width: 100%;
                    display: block;
                    li {
                        text-align: center;
                        float: left;
                        width: 33.3%;
                        padding: 5px 8px;
                        box-sizing: border-box;
                        font-size: 13px;
                        color: #c0c0c0;
                        cursor: pointer;
                        &.active {
                            color: #333;
                            background: #ebebeb;
                        }
                    }
                    // display: block;
                    // margin-top: -6px;
                    &.branch {
                        display: none;
                    }
                }
                .class-list {
                    &::-webkit-scrollbar-track {
                        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
                        border-radius: 0px;
                        background-color: #e0e0e0;
                    }
                    &::-webkit-scrollbar {
                        width: 12px;
                        background-color: #ccc;
                    }
                    &::-webkit-scrollbar-thumb {
                        border-radius: 0px;
                        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                        background-color: #ccc;
                    }
                    border-bottom: 1px solid #e11c4a;
                    // margin-top: -6px;
                    border-top: 0;
                    width: 100%;
                    // border: 2px solid #891635;
                    // border: 2px solid #ddd;
                    background: #f1f1f1;
                    box-sizing: border-box;
                    overflow: auto;
                    // height: 426px;
                    height: 401px;
                    &.branch {
                        // height: 314px;
                        height: 426px;
                    }
                    li {
                        border-bottom: 1px solid #a1a1a1;
                        // margin: 10px;
                        padding: 8px 0;
                        &:last-child {
                            border-bottom: 0;
                            // margin-bottom: 0;
                            margin-bottom: 90px;
                        }
                        // &:last-child {
                        // }
                        cursor: pointer;
                        &:hover,
                        &.active {
                            background: #e11c4a;
                            td,
                            a {
                                color: #fff !important;
                                &.color-red {
                                    color: #fff !important;
                                }
                            }
                        }
                        table {
                            td {
                                &:last-child {
                                    // text-align: right;
                                }
                                span.circle-number {
                                    color: #fff;
                                    font-size: 12px;
                                    font-weight: bold;
                                    background: #eee;
                                    border-radius: 50%;
                                    width: 20px;
                                    height: 20px;
                                    display: inline-block;
                                    text-align: center;
                                    line-height: 20px;
                                    &.nailart {
                                        background: #fe9684;
                                    }
                                    &.makeup {
                                        background: #ee8fa5;
                                    }
                                    &.esthetic {
                                        background: #b18acf;
                                    }
                                    &.hair {
                                        background: #b3ceca;
                                    }
                                    &.special {
                                        background: #f3c35e;
                                    }
                                }
                                img {
                                    width: 40px;
                                    margin: 0 6px;
                                    margin-left: 0;
                                }
                                a {
                                    width: 60px;
                                    padding-top: 10px;
                                    padding-bottom: 10px;
                                    display: inline-block;
                                    // color: #fff !important;
                                    font-size: 14px;
                                    vertical-align: middle;
                                    text-align: center;
                                    margin-left: 10px;
                                    // background: #df5cac;
                                    &.status-regular {
                                        color: #e11c4a;
                                    }
                                    &.status-active {
                                        color: #ed6f31;
                                    }
                                    &.status-day {
                                        background: #b061f9;
                                    }
                                }
                                &.class-title {
                                    font-size: 13px;
                                    width: 69%;
                                    padding: 0 7px;
                                    color: #333;
                                }
                                &.color-red {
                                    padding-top: 0px;
                                    font-size: 11px;
                                    padding: 0 7px;
                                    height: 14px;
                                    // height: 28px;
                                    display: inline-block;
                                    overflow: hidden;
                                    color: #666 !important;
                                }
                            }
                        }
                    }
                }
            }
        }
        .right-area {
            float: left;
            width: 70%;
            padding-left: 15px;
            box-sizing: border-box;
        }
    }
}

.public-funds-page {
    overflow: hidden;
    .label {
        background: #424f6f;
        color: #eee;
    }
    .lg-text {
        font-size: 16px;
        line-height: 16px;
    }
    .colored {
        color: #4a529f;
    }
    .bg-colored {
        background: #424f6f;
        color: #fff;
    }
    .step-box {
        table {
            width: 95%;
            // margin: auto;
            td {
                &.icon {
                    width: 11%;
                    vertical-align: top;
                    img {
                        width: 70%;
                        margin: auto;
                    }
                }
                &.arrow {
                    width: 4.33%;
                    img {
                        width: 100%;
                        margin: auto;
                    }
                }
                .td-text {
                    font-size: 15px;
                }
                .td-text-colored {
                    color: #d9aa1c;
                }
            }
        }
    }
    .apply-box {
        letter-spacing: -0.5px;
        font-size: 16px;
        line-height: 16px;
        .round-button {
            border-radius: 25px;
            border: 1px solid #424f6f;
            padding: 8px 18px;
            margin-bottom: 10px;
            color: #4a529f;
            display: inline-block;
        }
        p {
            font-size: 15px;
            line-height: 1.5rem;
            text-align: left;
            &.apply-text-xs {
                font-size: 13px;
                line-height: 1.2rem;
            }
            &.apply-text-xxs {
                font-size: 11px;
                line-height: 1.2rem;
            }
        }
        .border-right {
            border-right: 1px solid #333;
        }
    }
    .course-table {
        width: 80%;
        th {
            padding: 15px;
            text-align: center;
            font-size: 18px;
            font-weight: 500;
            color: #4a529f;
            background: #eceff1;
            border: 1px solid #d3d6d7;
        }
        td {
            padding: 15px;
            color: #333;
            font-size: 14px;
            text-align: left;
            padding-left: 20px;
            padding-right: 20px;
            letter-spacing: -0.5px;
            border-bottom: 1px solid #d3d6d7;
            border-right: 1px solid #d3d6d7;
            &.center {
                border-left: 1px solid #d3d6d7;
                letter-spacing: 0px;
                // padding: 0;
                text-align: center;
                font-size: 17px;
                background: #fafafa;
            }
            a {
                color: #4a529f;
                font-size: 13px;
            }
        }
    }
}

.top-branch-box {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    .icon-box {
        width: 33.3%;
        float: left;
        text-align: left;
        ul {
            // margin-bottom: -20px;
            display: block;
            height: 29px;
            li {
                line-height: 29px;
                vertical-align: middle;
                float: left;
                margin-right: 15px;
                &:last-child {
                    margin-right: 0;
                }
                a {
                    display: inline-block;
                    padding-top: 5px;
                    color: #9da6ab;
                    img {
                        width: 15px;
                    }
                }
                .branch-link {
                    padding: 4px 8px;
                    border-radius: 4px;
                    margin-right: 0;
                    font-size: 14px;
                    background: #e9e9e9;
                    color: #9da6ab;
                    transition: all 0.3s;
                    &:hover {
                        transition: all 0.3s;
                        background: #e11a4d;
                        color: #fff;
                        .color-red {
                            color: #fff !important;
                        }
                    }
                    .color-red {
                        color: #e31a4c;
                    }
                }
            }
        }
    }
    ul.center-box {
        display: block;
        float: right;
        li {
            float: left;
            padding: 7px 13.5px;
            position: relative;
            // border-right: 1px solid #ddd;
            &::after {
                content: "|";
                position: absolute;
                height: 30px;
                top: 7px;
                left: -2px;
                color: #ddd;
                // border-left: 1px solid #ddd;
            }
            &:first-child {
                &::after {
                    content: "";
                }
                // border-left: 1px solid #ddd;
            }
            border-top: 0;
            border-bottom: 0;
            color: #636363;
            letter-spacing: -0.5px;
            &.active {
                // background: #f2f2f2;
                color: #ec184a;
            }
        }
    }
}

.search-page {
    .box-title {
        color: #e11a4d;
        font-size: 32px;
        letter-spacing: -1px;
        font-weight: bold;
        vertical-align: super;
        border-bottom: 2px solid #e11a4d;
        padding-bottom: 10px;
        clear: both;
    }
    .community-box {
        .con-box {
            box-sizing: border-box;
            width: 24.5%;
            display: inline-block;
            padding: 0 10px;
            &:last-child {
                .right {
                    // background:none;
                }
            }
            img {
                display: block;
                width: 100%;
            }
            .headings {
                margin: 10px 0 10px 0;
                overflow: hidden;
                .date {
                    font-size: 14px;
                    font-weight: lighter;
                    letter-spacing: -1px;
                    text-align: center;
                    float: right;
                    color: #ccc;
                }
                .cat {
                    color: $color;
                    font-size: 16px;
                    float: left;
                    font-weight: lighter;
                }
            }
            .title {
                clear: both;
                overflow: hidden;
                font-size: 15px;
                line-height: 22px;
                height: 100px;
                text-align: left;
            }
        }
    }
}

.ask-table {
    .phone-row {
        padding-bottom: 10px;
        .fll {
            overflow: hidden;
            float: none !important;
            padding-right: 10px;
            box-sizing: border-box;
            .phone-box {
                background: #fff;
                padding: 0;
                width: 100%;
                input {
                    border: none;
                    border-bottom: 1px solid #ccc;
                    width: 100% !important;
                    // line-height: 52px;
                    font-size: 16px;
                    padding-bottom: 5px;
                    padding-left: 10px;
                    padding-right: 10px;
                    padding-top: 15px;
                }
            }
        }
        .flr {
            margin-top: 10px;
            float: none !important;
            // padding-left: 10px;
            box-sizing: border-box;
            .phone-box {
                background: #fff;
                padding: 0;
                width: 100%;
                input {
                    border: none;
                    border-bottom: 1px solid #ccc;
                    width: 80px !important;
                    // line-height: 52px;
                    font-size: 16px;
                    padding-bottom: 5px;
                    padding-top: 15px;
                    padding-left: 10px;
                    background: #fff;
                }
                p.dash {
                    color: #333;
                }
            }
        }
    }
    textarea {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #ccc;
        // margin-top: 30px;
        border-radius: 8px;
        background: #eee;
        height: 235px;
    }
    .fll1 {
        border-right: 1px dashed #ff0000;
        padding-right: 30px;
        box-sizing: border-box;
    }
    .flr1 {
        padding-left: 30px;
        box-sizing: border-box;
    }
    table {
        width: 100%;
        // margin: 10px 0;
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
        td {
            &:first-child {
            }
            &.label-box {
                width: 85%;
            }
            &.img-box {
                text-align: left;
            }
            label {
                width: 33.3%;
                float: left;
                text-align: left;
                padding: 5px 0;
                margin-bottom: 5px;
                &.lg {
                    width: 66.6% !important;
                }
                span {
                    margin-left: 5px;
                    vertical-align: middle;
                    letter-spacing: -0.5px;
                    span.small {
                        font-size: 5px;
                        margin-left: 0;
                    }
                    &.active {
                        color: #e11c4a;
                    }
                }
            }
        }
        th {
        }
    }
    .asktime-box,
    .purpose {
        background: #fff;
        // border-bottom: 1px solid #ccc;
        text-align: left;
        // padding: 0 20px;
        padding-bottom: 20px;
        position: relative;
        .line {
            position: absolute;
            width: 100%;
            bottom: 20px;
            height: 1px;
            background: #ccc;
        }
    }
    .purpose {
        span {
            font-size: 17px;
            line-height: 52px;
            vertical-align: bottom;
        }
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #999 !important;
        text-align: left;
    }
    .select2-container .select2-selection--single {
        height: initial !important;
    }
    .select2-container--default .select2-selection--single {
        background: #fff !important;
    }
    .button-area {
        .white-button {
            width: 95%;
            background: #fff;
            border: 1px solid #333;
            border-radius: 4px;
            padding: 10px;
            font-size: 15px;
            color: #333;
        }
        .black-button {
            width: 95%;
            background: #333;
            border: 1px solid #333;
            border-radius: 4px;
            padding: 10px;
            font-size: 15px;
            color: #fff;
        }
    }
}

.custom-select {
    ul {
        -webkit-box-shadow: 4px 6px 5px 0px rgba(214, 214, 214, 1);
        -moz-box-shadow: 4px 6px 5px 0px rgba(214, 214, 214, 1);
        box-shadow: 4px 6px 5px 0px rgba(214, 214, 214, 1);
    }
}

.guide-box {
    .agree-box {
        height: 100px;
        overflow: auto;
    }

    .new-askbox {
        margin-top: 20px;
        // padding: 40px 0;
        // border-top: 2px solid #e11b4a !important;
        .flr1 {
            padding-top: 17px;
        }
        .purpose {
            box-sizing: border-box;
            padding-bottom: 5px !important;
            border-bottom: 1px solid #ccc;
            margin-bottom: 30px;
            background: none;
            > div {
                font-size: 15px;
                display: inline-block;
                color: #999;

                vertical-align: top;
                line-height: 15px;
                &.line {
                    display: block;
                }
            }
            .custom-select {
                &.fixed-select {
                    width: 85px;
                }
                padding: 0 4px;
                .show {
                    .select-arrow {
                        right: -12px;
                    }
                }
            }
        }
        .phone-row {
            background: none;
            .phone-box {
                background: none;
                .custom-select {
                    padding: 0 4px;
                    .show {
                        .select-arrow {
                            right: 0;
                        }
                    }
                }
                input {
                    font-size: 15px !important;
                    color: #333;
                    padding-top: 0 !important;
                    background: none;
                    &::placeholder {
                        color: #999;
                    }
                }
                p.dash {
                    line-height: initial !important;
                }
            }
        }
        .asktime-box {
            background: none;
            padding-bottom: 5px !important;
            border-bottom: 1px solid #ccc;
            margin-bottom: 30px;
            .show {
                padding-left: 0 !important;
            }
        }
        .custom-select {
            display: inline-block;
            position: relative;
            padding: 0 5px;
            &.fixed-select {
                width: 85px;
            }
            .show {
                cursor: pointer;
                position: relative;
                padding: 0 5px;
                span {
                    font-size: 15px;
                    color: #333;
                    line-height: 15px !important;
                }
                .select-arrow {
                    border-color: #888 transparent transparent transparent;
                    border-style: solid;
                    border-width: 5px 4px 0 4px;
                    height: 0;
                    right: -9px;
                    margin-left: -4px;
                    margin-top: -2px;
                    position: absolute;
                    top: 50%;
                    width: 0;
                }
            }
            ul.options,
            ul.branch-options,
            ul.phone-options {
                background: #fff;
                display: none;
                position: absolute;
                top: 23px;
                z-index: 10;
                border: 1px solid #ccc;
                li {
                    cursor: pointer;
                    padding: 7px 15px;
                    font-size: 14px;
                    color: #666;
                    border-bottom: 1px solid #eee;
                    background: none;
                    &:last-child {
                        border-bottom: none;
                    }
                    &:hover {
                        background: none;
                    }
                }
            }
            ul.options {
                li {
                    width: 100px;
                }
            }
            ul.phone-options {
                left: 0px;
                li {
                    width: 28px;
                }
            }
            ul.branch-options {
                left: 0px;
                li {
                    width: 100px;
                }
            }
        }
        .agree-box {
            height: 100px;
            overflow: auto;
            text-align: left;
        }
    }
}

.swiper-container {
    width: 100%;
    height: 35px;

    .swiper-pagination-h {
        left: 50%;
        width: 500px;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 8px 0;
}

.swiper-slide {
    height: 100%;
    width: 100%;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-button-next,
.swiper-button-prev {
    /* In safari, the buttons disappear on some slide,
    to fix this issue set translate3D z axis to 1px */
    -webkit-transform: translate3d(0, 0, 1px);
    -ms-transform: translate3d(0, 0, 1px);
    -o-transform: translate3d(0, 0, 1px);
    transform: translate3d(0, 0, 1px);
}

.swiper-button-next {
    margin-right: 10px;
}

.swiper-button-prev {
    margin-left: 10px;
}

.swiper-button-up,
.swiper-button-down {
    right: 20px;
    position: absolute;
    z-index: 20;

    &:before {
        content: "";
        cursor: pointer;
        height: 20px;
        width: 20px;
        position: absolute;
        background-repeat: no-repeat;
    }
}

.swiper-button-down {
    bottom: 25%;
    &:before {
        background-image: url("/assets/images/front/main/artistcrew/black_arrow_down.png");
    }
}

.swiper-button-up {
    top: 25%;
    &:before {
        background-image: url("/assets/images/front/main/artistcrew/black_arrow_up.png");
    }
}

.swiper-pagination-bullet {
    opacity: 0.5;
    border-radius: 100%;
    background: rgb(255, 255, 255);
}

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