@charset "utf-8";
/*EBSPEAK 헤더*/
.ebspeak-headerWrap {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #f1f1f1;
    background: #fff;
    z-index: 100;
}

.ebspeak-headerWrap .ebspeak-nav {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.ebspeak-headerWrap .ebspeak-nav .main-menu {
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
}

.ebspeak-header .nav-item {
    position: relative;
    width: 150px;
    z-index: 100;
    text-align: center;
    padding: 8px 0;
}

.ebspeak-header .nav-item > a {
    position: relative;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height: 34px;
    width: 120px;
}

.ebspeak-header .nav-item > a:hover {
    color: #BD2E26;
}

.ebspeak-header .dropdown-tab:hover::after {
    display: block;
    clear: both;
    content: '';
    width: 150px;
    height: 5px;
    background: #BD2E26;
    position: absolute;
    top: 48px;
    left: 0;
    z-index: 1;
}

.ebspeak-header .dropdown-tab.depth02-dropdown:hover::after {
    display: none;
}

.ebspeak-header .dropdown-tab:hover a {
    color: #BD2E26;
}

.ebspeak-header .nav-item.active > a {
    background: #BD2E26;
    color: #fff;
    border-radius: 40px;
    border: 0;
}

.ebspeak-header .nav-item.active > a:hover,
.ebspeak-header .dropdown-tab.active:hover > a {
    color: #fff;
}

.ebspeak-header .nav-item .depth02-dropdown {
    display: none;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: #f7f7f7;
    width: 150px;

}

.ebspeak-header .nav-item .depth02-dropdown li > a {
    color: #131313;
    line-height: 35px;
    text-align: center;
    display: block;
    font-size: 14px;
    border-bottom: 1px solid #efefef;
}

.ebspeak-header .nav-item .depth02-dropdown li > a:hover {
    color: #BD2E26;
}

.ebspeak-header .nav-item .depth02-dropdown li:last-child > a {
    border-bottom: 0;
}

.ebspeak-header .nav-item:hover .depth02-dropdown {
    display: block;
}


.button-style-wrap {
    height: 80vh;
}
/*=================================================================================
* talkool header
=================================================================================*/
.talkool-headerWrap {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #f1f1f1;
    background: #fff;
    z-index: 100;
}

.talkool-headerWrap.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

.talkool-headerWrap .talkool-nav {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.talkool-headerWrap .talkool-nav .main-menu {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: space-between;
}

.talkool-header .nav-item {
    position: relative;
    width: 150px;
    padding: 8px 0;
    text-align: center;
    z-index: 100;
}

.talkool-header .nav-item > a {
    position: relative;
    display: inline-block;
    width: 120px;
    line-height: 34px;
    font-size: 16px;
    font-weight: 500;
}

.talkool-header .nav-item > a:hover {
    color: #bd2e26;
}

.talkool-header .dropdown-tab:hover::after {
    content: '';
    position: absolute;
    top: 48px;
    left: 0;
    clear: both;
    display: block;
    width: 150px;
    height: 5px;
    background: #bd2e26;
    z-index: 1;
}

.talkool-header .dropdown-tab.depth02-dropdown:hover::after {
    display: none;
}

.talkool-header .dropdown-tab:hover a {
    color: #bd2e26;
}

.talkool-header .nav-item.active > a {
    color: #fff;
    border: 0;
    border-radius: 40px;
    background: #bd2e26;
}

.talkool-header .nav-item.active > a:hover,
.talkool-header .dropdown-tab.active:hover > a {
    color: #fff;
}

.talkool-header .nav-item .depth02-dropdown {
    position: absolute;
    top: 50px;
    left: 50%;
    display: none;
    width: 150px;
    background: #f7f7f7;
    transform: translateX(-50%);
}

.talkool-header .nav-item .depth02-dropdown li > a {
    display: block;
    line-height: 35px;
    color: #131313;
    font-size: 14px;
    text-align: center;
    border-bottom: 1px solid #efefef;
}

.talkool-header .nav-item .depth02-dropdown li > a:hover {
    color: #bd2e26;
}

.talkool-header .nav-item .depth02-dropdown li:last-child > a {
    border-bottom: 0;
}

.talkool-header .nav-item:hover .depth02-dropdown {
    display: block;
}

.button-style-wrap {
    height: 80vh;
}


/*=================================================================================
* Footer
=================================================================================*/
.bottomarea {
    background: #555;
    box-sizing: border-box
}

.bottomwrap {
    position: relative;
    width: 1100px;
    padding: 35px 0 20px 0;
    margin: 0 auto;
    box-sizing: border-box
}

.bottomwrap h1 {
    position: absolute;
    top: 35px;
    left: 0
}

.bottomwrap h1 a {
    display: inline-block
}

.bottomwrap .bot_guide {
    padding: 0 0 25px 230px;
    font-size: 13px;
    color: #eee;
}

.bottomwrap .bot_customer {
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 300;
    color: #eee;
}

.bottomwrap .botlink {
    overflow: hidden
}

.bottomwrap .botlink li {
    float: left;
    margin-left: 17px;
    padding-left: 20px;
    background: url('/asset/skin/riki_senior/images/icon/bu_gray.png') no-repeat 0 50%
}

.bottomwrap .botlink li:first-child {
    margin-left: 0;
    padding-left: 0;
    background: none
}

.bottomwrap .botlink li:first-child a {
    color: #ff6068
}

.bottomwrap .botlink li a {
    color: #d2d2d2
}

.bottomwrap .copyright {
    margin-top: 20px;
    color: #a9a9a9;
    font-size: 11px;
    font-weight: 400;
}

.bottomwrap .copyright * {
    vertical-align: middle
}

.bottomwrap .copyright span {
    margin-left: 10px
}

.bottomwrap .copyright button {
    height: 18px;
    margin: 0 -5px 0 5px;
    padding: 0 5px;
    background: #363636;
    color: #a9a9a9;
    font-size: 11px;
    line-height: 18px
}

.bottomwrap .escrow {
    position: absolute;
    top: 60px;
    right: 0
}

#footer .family_site {
    display: block;
    position: absolute;
    top: 25px;
    right: 0;
    z-index: 1;
    width: 215px;
    height: 30px
}

#footer .family_site .select_site {
    width: 100%;
    border: 1px solid #353535;
    background-color: #3d3d3d;
    position: absolute;
    left: 0;
    bottom: 0;
    display: none;
}

#footer .family_site .select_site .btn_close_site {
    width: 12px;
    height: 12px;
    font-size: 0;
    text-indent: -9999px;
    background: #3d3d3d url('/assets/hpg/asp/ebspeak/cmn/pc/images/icon/icon_close_arr02.png') no-repeat 100% 50%;
    color: #a9a9a9;
    position: absolute;
    right: 9px;
    bottom: 11px;
}

#footer .family_site .select_site ul {
    padding: 12px;
}

#footer .family_site .select_site li {
    padding: 3px;
}

#footer .family_site .select_site a {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #c6c6c6;
}

#footer .family_site .select_site a:hover {
    color: #fff;
}

#footer .btn_select_site {
    width: 100%;
    height: 30px;
    padding: 0 8px;
    display: block;
    font-size: 12px;
    line-height: 30px;
    color: #c6c6c6;
    letter-spacing: 1px;
    border: 1px solid #353535;
    background-color: #3d3d3d;
    position: relative;
}

#footer .btn_select_site:after {
    content: '';
    width: 8px;
    height: 5px;
    margin-top: -2px;
    background: #3d3d3d url('/assets/hpg/asp/ebspeak/cmn/pc/images/icon/icon_close_arr02.png') no-repeat;
    position: absolute;
    right: 11px;
    top: 50%;
    -ms-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

/*=================================================================================
* main
=================================================================================*/
.title-area {
    margin-bottom: 70px;
}

.title-area .title03 {
    margin-bottom: 15px;
    font-size: 30px;
    font-weight: 500;
}

.title-area .title01 {
    font-size: 50px;
}

.main-section01 {
    position: relative;
}

.main-section02 {
    padding-top: 100px;
    background: url('../img/main-bg-ms02.jpg') no-repeat 0 0 / cover;
}

.main-section06 {
    position: relative;
    background: url('../img/main-ms06-01.png') no-repeat 100% 100%;
}

.main-section01 .main-banner-wrap {
    position: relative;
    z-index: 100;
}

.main-section01 .main-banner-wrap .inner {
    height: 100%;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    align-items: center;
}

.main-section01 .slick-slider {
    line-height: 0;
}

/* 이미지 슬라이드 배경 */
.main-banner-wrap .banner-bg01 {
    width: 100%;
    background: url('../img/main-visual01.png') no-repeat center 0 / cover;
}

.main-banner-wrap .banner-bg02 {
    width: 100%;
    background: url('../img/main-visual02.png') no-repeat center 0 / cover;
}

.main-banner-wrap .banner-bg03 {
    width: 100%;
    background: url('../img/main-visual03.png') no-repeat center 0 / cover;
}

.main-banner-wrap .banner-bg04 {
    width: 100%;
    background: url('../img/main-visual04.png') no-repeat center 0 / cover;
}

.main-banner-wrap .banner-bg05 {
    width: 100%;
    background: url('../img/main-visual05.png') no-repeat center 0 / cover;
}

.main-section01 .banner-item {
    width: 100%;
    height: 1179px;
}

.main-section01 .text-area {
}

.main-section01 .text-area .title01 {
    margin-bottom: 30px;
}

.main-section01 .text-area .title03 {
    margin-bottom: 13px;
    font-weight: 400;
}

.main-section01 .text-area .text01 {
    margin-bottom: 40px;
    font-weight: 250;
}

.main-section01 .img-area {
    display: none;
    position: absolute;
    top: 0;
    right: -100px;
    width: 700px;
}

.main-section01 .button-wrap {
    justify-content: flex-start;
}

.main-section01 .button-wrap .btn {
    padding: 10px 10px 10px 34px;
}

.slider_counter {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    color: #ff0000;
    font-size: 14px;
    z-index: 999;
    pointer-events: none; /*  mix-blend-mode:difference;*//* z-index:1; */
}

/* 메인 슬라이더 네비게이션 */
#sliderHelpArea {
    position: absolute;
    top: 587px;
    left: 50%;
    display: flex;
    align-items: center;
    width: 1080px;
    margin-left: 280px;
    transform: translateX(-50%);
    box-sizing: border-box;
    overflow: hidden;
}

#sliderHelpArea .buttons {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    align-items: center;
}

#sliderHelpArea .buttons button {
    width: 30px;
    height: 30px;
    margin: 0 12px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: url('../img/icon-pause.svg') no-repeat center / auto;
}

#sliderHelpArea .buttons button.on {
    background: url('../img/icon-play.svg') no-repeat center / auto;
}

#sliderHelpArea .arrowSlider {
}

#sliderHelpArea .arrowSlider > div {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('../img/icon_arrow_white.svg') no-repeat center / 20px;
    vertical-align: middle;
    cursor: pointer;
}

#sliderHelpArea .arrowSlider div.prev {
    transform: rotate(180deg);
}

#sliderHelpArea .progress {
    display: block;
    width: 100px;
    height: 4px;
    color: transparent;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.6);
    background-image: linear-gradient(to right, #fff, #fff);
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size 0.4s ease-in-out;
    overflow: hidden;
}

.main-section03 {
    position: relative;
    background: #f3f6fb;
}

.main-section03:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    clear: both;
    display: block;
    width: 100%;
    height: 1550px;
    background: url('../img/main_bg_03.png') no-repeat 50% 100% / cover;
}

.main-section03 .inner {
    padding-top: 0;
}

.main-section03 .title-area {
    margin-bottom: 15px;
}

.service01,
.service02 {
    position: relative;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: space-between;
    align-items: flex-start;
}

.service01 .service-item {
    flex: 1;
    margin: 0 58px;
}

.service01 .service-item:first-child {
    margin-left: 0;
}

.service01 .service-item:last-child {
    margin-right: 0;
}

.service01 .service-item .img-box {
    margin-bottom: 21px;
}

.ms02-title01 {
    margin-bottom: 19px;
    font-size: 36px;
    font-weight: bold;
}

.ms02-text01 {
    font-size: 17px;
}

.service02 {
    height: 400px;
    padding-top: 100px;
}

.service02 .service-item {
    position: absolute;
    width: 212px;
    padding: 40px 0;
    border-radius: 20px;
    background: #fff;
}

.service02 .service-item:first-child {
    top: 0;
    left: 0;
}

.service02 .service-item:nth-child(2) {
    top: 136px;
    left: 285px;
}

.service02 .service-item:nth-child(3) {
    top: 233px;
    left: 580px;
}

.service02 .service-item:last-child {
    top: 50px;
    right: 0;
}

.ms03-title01 {
    margin-bottom: 19px;
    font-size: 34px;
    font-weight: 250;
}

.ms03-text01 {
    margin-bottom: 19px;
}

.main-section04 {
    position: relative;
    padding-top: 300px;
}

.main-section04:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    clear: both;
    display: block;
    width: 100%;
    height: 1200px;
    background: url('../img/main_bg_04.png') center 130% no-repeat;
}

.main-section04 .title-area {
    margin-bottom: 150px;
}

.service03 {
    position: relative;
    min-height: 800px;
}

.service03:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    clear: both;
    display: block;
    width: 745px;
    height: 745px;
    border: 1px solid #cd1618;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.service03 .service-item {
    position: absolute;
    width: 292px;
    height: 289px;
    border-radius: 10px;
    overflow: hidden;
}

.service03 .service-item .in-box {
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.service03 .text-box {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.service03 .text-box .ms04-title03 {
    margin-bottom: 11px;
}

.service03 .svi04-01 {
    top: -80px;
    left: 50%;
    background: url('../img/ms04-bg01.jpg') no-repeat center / cover;
    transform: translate(-50%);
}

.service03 .svi04-02 {
    top: 200px;
    left: 0;
    background: url('../img/ms04-bg02.jpg') no-repeat center / cover;
}

.service03 .svi04-03 {
    top: 200px;
    right: 0;
    background: url('../img/ms04-bg03.jpg') no-repeat center / cover;
}

.service03 .svi04-04 {
    bottom: -80px;
    left: 140px;
    background: url('../img/ms04-bg04.jpg') no-repeat center / cover;
}

.service03 .svi04-05 {
    bottom: -80px;
    right: 140px;
    background: url('../img/ms04-bg05.jpg') no-repeat center / cover;
}

.service05 {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: flex-start;
}

.service05 > div {
    flex: 1;
}

.service05 .ms05-title {
    width: 292px;
    height: 74px;
    line-height: 74px;
    margin: 0 auto 50px;
    border-radius: 74px;
    background: #fef872;
}

.service05 .img-area {
    height: 260px;
    margin-bottom: 20px;
}

.subject01 {
}

.subject01 ul {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 30px;
}

.subject01 .sbj-item {
    position: relative;
    width: 300px;
    margin: 90px 30px;
}

.subject01 .sbj-item .thum-area {
    position: absolute;
    top: 0;
    left: 50%;
    width: 205px;
    height: 205px;
    margin: -110px 0 26px 0;
    transform: translate(-50%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    overflow: hidden;
}

.subject01 .sbj-item .thum-area img {
    width: 205px;
    height: 205px;
}

.subject01 .sbj-item .text-area {
    width: 300px;
    height: 220px;
    padding-top: 120px;
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
}

.subject01 .sbj-item .text01 {
    margin-bottom: 8px;
}

.subject01 .sbj-item .text03 {
}

.main-section07 {
    background: #ffd457;
}

.main-section07 .owl-stage-outer {
    padding: 20px 0;
}

.main-rv-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 50px;
}

.main-rv-wrap .slider-item {
    width: 100%;
    */ margin: 0 10px;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.main-rv-wrap .mrvNav-box {
}

.main-section07 .mrvNav-box button {
    position: absolute;
    top: 55%;
    width: 35px;
    line-height: 35px;
    height: 35px;
    color: transparent;
    text-align: center;
    border-radius: 50%;
    background: #fff url('../img/icon_arrow_gray.svg') no-repeat center / 8px;
    z-index: 10;
}

.main-section07 .mrvNav-box button.prev-btn {
    left: -40px;
    transform: rotate(180deg);
}

.main-section07 .mrvNav-box button.next-btn {
    right: -40px;
}

.main-rv-wrap .img-area {
    height: 160px;
    overflow: hidden;
}

.main-rv-wrap .img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-rv-wrap .text-area {
    padding: 20px;
}

.main-rv-wrap .text-area .text03 {
    margin-bottom: 12px;
    font-weight: 500;
}

.main-section08 {
    width: 100%;
    background: url('../img/bg-free.jpg') no-repeat center/cover;
}

.main-section08 .inner {
    padding: 80px 0;
}

.main-section08 h2 {
    margin-bottom: 48px;
    color: #555;
    font-size: 46px;
}

.main-section08 h3 {
    margin-bottom: 10px;
    font-size: 21px;
}

.main-section08 .text-area {
}

.main-section08 h4 {
    display: inline-block;
    margin-right: 26px;
    font-size: 46px;
    vertical-align: middle;
}

.main-section08 p {
    display: inline-block;
    font-size: 17px;
    vertical-align: middle;
}

.main-section08 p span {
    display: block;
}

/*=================================================================================
* main background image
=================================================================================*/
.bg-ani-wrap {
}

.bg-item {
    position: absolute;
    z-index: 0;
}

.bg-item img {
    width: 100%;
    max-width: 100%;
}

.ms01-bg01 {
    top: -200px;
    left: 0;
    animation: bg-obj-ani50 5.4s infinite ease-in-out;
}

.ms01-bg02 {
    top: -150px;
    right: 0;
    animation: bg-obj-ani10 5.4s infinite ease-in-out;
}

.ms01-bg03 {
    top: -50px;
    right: -20px;
    animation: swing ease-in-out 2s infinite alternate;
}

.ms03-bg01 {
    top: 3500px;
    right: 0;
    width: 100%;
}

.ms02-bg01 {
    top: 1500px;
    left: 0;
    width: 100%;
}

.ms01-bg04 {
    top: 0;
    right: -50px;
    animation: swing ease-in-out 3s infinite alternate;
}

.ms06-bg02 {
    bottom: 400px;
    left: 80px;
    animation: bg-obj-ani50 2s infinite ease-in-out;
    z-index: 0;
}

.ms06-bg03 {
    top: 40%;
    right: -70px;
    animation: bg-obj-rotate ease-in-out 3s infinite alternate;
}

/*=================================================================================
* main object image
=================================================================================*/
.obj-area {
}

.obj-item {
    position: absolute;
    z-index: 200;
}

.main-section01 .obj-item.item01 {
    top: 100px;
    right: 40%;
}

.main-section01 .obj-item.item02 {
    top: 200px;
    right: 20%;
}

.main-section01 .obj-item.item03 {
    top: 700px;
    right: 20%;
}

.main-section01 .obj-item.item04 {
    bottom: -100px;
    left: 30%;
}

.main-section01 .obj-item.item05 {
    top: 100px;
    right: 150px;
    animation: bg-obj-ani10 3s infinite ease-in-out;
}

.main-section01 .obj-item.item06 {
    top: 100px;
    right: 0;
}

.main-section01 .obj-item.item07 {
    top: 80%;
    left: -100px;
}

/*=================================================================================
* animation keyframe   animation:bg-obj-rotate 5.4s infinite ease-in-out
=================================================================================*/
@keyframes bg-obj-ani50 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(50px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes bg-obj-ani10 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes bg-obj-rotate {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(50px) rotate(180deg);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes swing {
    0% {
        transform: rotate(3deg);
    }
    50% {
        transform: rotate(-3deg);
    }
    100% {
        transform: rotate(3deg);
    }
}

/*=================================================================================
* Floating
=================================================================================*/
.floating-wrap {
    position: fixed;
    bottom: 10px;
    right: 50px;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.floating-wrap a {
    display: block;
    height: 60px;
    line-height: 60px;
    text-align: center;
}

.floating-wrap a.float-btn01 {
    width: 180px;
    margin-right: 12px;
    color: #fff;
    font-size: 19px;
    border-radius: 60px;
    background: #489af7;
}

.floating-wrap a.float-btn01 * {
    display: inline-block;
    vertical-align: middle;
}

.floating-wrap a.float-btn02 {
    width: 70px;
    height: 70px;
    color: #fff;
    border-radius: 50%;
    background: #f76718 url('../img/icon-mark.svg') center 10px/30px no-repeat;
}

.floating-wrap a.float-btn02 span {
    display: block;
    padding-top: 20px;
    font-size: 16px;
}

.arrow-right,
.arrow-left {
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
}

.arrow-right {
    transform: rotate(135deg);
}

.arrow-left {
    transform: rotate(-45deg);
}

/*=================================================================================
* 서브페이지 공통
=================================================================================*/
.tj_sub-wrap {
}

.sub-visual-wrap {
    width: 100%;
    height: 490px;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-start;
    align-items: center;
    background: #f1f1f1;
    overflow: hidden;
    z-index: 1;
}

.sub-visual-wrap .inner {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.sub-visual-wrap .text-area {
    color: #fff;
}

.sub-visual-wrap .text-area h2 {
    margin-bottom: 28px;
    font-size: 32px;
    font-weight: bold;
}

.sub-visual-wrap .text-area .text03 {
    font-size: 18px;
}

.sub-visual-wrap .text-area h3 {
    margin-bottom: 28px;
    font-size: 32px;
    font-weight: bold;
}

.sub-visual-wrap .button-wrap {
    margin-top: 30px;
    justify-content: flex-start;
    align-items: flex-start;
}

.sub-visual-wrap .video-area {
    width: 460px;
    height: 260px;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

/*=================================================================================
* 서브페이지 비주얼
=================================================================================*/
.svw-01 {
    background: url('../img/svw-01.jpg') no-repeat center / cover;
}

.svw-02 {
    background: url('../img/svw-02.png') no-repeat center / cover;
}

.svw-03 {
    background: url('../img/svw-03.jpg') no-repeat center / cover;
}

.svw-04 {
    background: url('../img/svw-04.jpg') no-repeat center / cover;
}

.svw-05 {
    background: url('../img/svw-05.jpg') no-repeat center / cover;
}

.svw-06 {
    background: url('../img/svw-06.jpg') no-repeat center / cover;
}

.svw-07 {
    background: url('../img/svw-07.jpg') no-repeat center / cover;
}

/*=================================================================================
* 무료체험 신청
=================================================================================*/
.sub-visual-wrap.svw-01 {
    position: relative;
    height: 490px;
}

.svw-01 .inner {
    position: relative;
}

.svw-01 .inner:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    clear: both;
    display: block;
    width: 400px;
    height: 360px;
    margin-top: -180px;
    background: url('../img/svw-01-01.png') no-repeat center / cover;
}

.freeclass .inner.pd24 {
    padding-top: 24px;
}

.frc-form-wrap {
    margin-bottom: 100px;
}

.frc-form-wrap .frc-form .text02 {
    margin-bottom: 70px;
}

.freeclass .box {
    margin-bottom: 50px;
}

.freeclass .box-title {
    margin-bottom: 20px;
}

.freeclass .box-title .text01 {
    margin-bottom: 10px;
}

.freeclass .table-wrap {
    border: 1px solid #e1e1e1;
}

.freeclass .table-wrap table {
    border: 0;
}

.frc-form .form ul {
}

.form-item {
    float: left;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
}

.form-item:nth-child(even) {
    float: right;
}

.form-item label {
    display: block;
    width: 75px;
    text-align: left;
}

.form-item .input {
    flex: 1;
}

.form-item input[type='text'] {
    width: 410px;
}

.form-item select {
    width: 200px;
    margin-right: 8px;
}

.form-item select:last-of-type {
    margin-right: 0;
}

.freeclass .btn-frc {
    padding: 13px 30px;
    margin-right: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #777;
    border-radius: 5px;
    background: #999;
}

.freeclass .btn-frc.active,
.freeclass .btn-frc:hover {
    border: 1px solid #d95041;
    background: #fe6555;
}

.freeclass .box-cont .button-wrap {
    justify-content: flex-start;
}

.freeclass .table-wrap .time.ended {
    color: #999;
    background: rgba(203, 203, 203, 0.3);
}

.freeclass .table-wrap .time.active,
.freeclass .table-wrap .date.active,
.freeclass .table-wrap .subject.active {
    background: rgba(254, 248, 114, 0.3);
}

.freeclass .agrbox,
.freeclass .agrbox02 {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    background: #fff;
}

.freeclass .agrbox .check__item {
    margin-right: 30px;
}

.freeclass .agrbox .btn {
    padding: 8px 15px;
    margin-left: 5px;
    font-size: 13px;
    border: 1px solid #777;
    border-radius: 5px;
}

.freeclass .agrbox02 {
    margin-bottom: 10px;
    border: 0;
    background: none;
}

.freeclass .frlt-info-wrap h3 {
    margin-bottom: 70px;
    font-size: 46px;
}

.freeclass .step-wrap,
.freeclass .frlt-tip-wrap {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: space-between;
    align-items: center;
}

.freeclass .frlt-tip-wrap {
    margin-bottom: 150px;
}

.freeclass .step-wrap .step-item {
    position: relative;
    width: 240px;
    height: 160px;
    padding: 30px;
    border: 1px solid #f69920;
    border-radius: 20px;
    background: #fff;
}

.freeclass .step-wrap .step-item:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -29px;
    clear: both;
    display: block;
    width: 25px;
    height: 40px;
    margin-top: -20px;
    background: url('../img/icon_arrow_gray.svg') no-repeat center / 18px;
}

.freeclass .step-wrap .step-item:last-child::after {
    display: none;
}

.freeclass .step-item .text01,
.freeclass .frlt-tip-wrap .text01 {
    font-size: 18px;
    font-weight: bold;
}

.freeclass .step-item .text02,
.freeclass .frlt-tip-wrap .text02 {
    margin-bottom: 20px;
    font-size: 18px;
}

.freeclass .step-item .text03 {
    font-size: 21px;
    font-weight: bold;
}

.freeclass .frlt-tip-wrap .tip-item {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.freeclass .frlt-tip-wrap .tip-item .img-area {
    margin-bottom: 35px;
}

.frlt-info-wrap .button-wrap a {
    margin: 0 10px;
}

.freeclass .blank {
    background: #e3e5ec;
}

.freeclass .table-style01 th,
.freeclass .table-style01 td {
    padding: 12px 25px;
    font-size: 16px;
}

.caution-area .list {
    margin-bottom: 50px;
}

.caution-area .list li {
    line-height: 1.6;
}

/* 화상영어 디바이스 안내영역 */
.devices {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: space-between;
    align-items: flex-end;
}

.devices .left,
.devices .right {
}

.devices .left {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-start;
}

.devices .right .text04 {
    margin-bottom: 30px;
}

.dvs-item {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.dvs-item .text04 {
    margin-bottom: 30px;
    text-align: center;
}

.dvs-item .item {
    margin: 0 25px;
}

.dvs-item .img-area {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: center;
    width: 124px;
    height: 124px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #fff;
}

.dvs-item .img-area img {
    width: 60%;
}

/* 무료체험 비회원 조회  */
.inquiry-form form {
    width: 315px;
    padding: 25px 17px;
    margin: 0 auto 25px;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    background: #fff;
}

.inquiry-form .item {
    padding: 12px 0;
    border-bottom: 1px solid #e1e1e1;
}

.inquiry-form .item:first-child {
    padding-top: 0;
}

.inquiry-form .item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.inquiry-form .item input {
    width: 180px;
}

.inquiry-form .item label {
    padding: 0 20px;
}

/* 무료체험 신청 리스트 */
.new-inq-box {
    position: relative;
    padding: 25px 30px;
    margin-bottom: 30px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    background: #fff;
}

.new-inq-box .button-wrap {
    position: absolute;
    top: 50%;
    right: 30px;
    margin: 0;
    transform: translateY(-50%);
}

.new-inq-box .text01 {
    margin-bottom: 30px;
}

.new-inq-box .text03 span {
    margin-right: 15px;
}

.new-inq-box .btn {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
}

.inquiry-form table .btn-type03 {
    margin: 2px;
}

/* 무료체험 결과 */
.frc-results {
}

.result-top {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
}

.result-top .thum {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    margin-right: 25px;
    border-radius: 50%;
    border: 1px solid #e1e1e1;
    background: #fff;
}

.result-top .thum img {
    width: 50%;
}

.result-top .user-info {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-start;
    align-items: center;
}

.result-top .user-info .name {
    font-size: 21px;
}

.result-top .user-info .name {
}

.result-top .user-info .date {
    display: block;
    padding-top: 4px;
    color: #858585;
    font-size: 14px;
}

.result-top .button-wrap {
    margin: 0;
    justify-content: flex-end;
}

.result-top .button-wrap a {
    margin-left: 10px;
}

.result-top .button-wrap a .ico {
    margin-right: 6px;
}

.result-summary,
.comment-inbox {
    position: relative;
    width: 100%;
    padding: 30px;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    background: #fff;
}

.result-summary .per,
.result-comment .per {
    margin-bottom: 20px;
    font-size: 21px;
}

.result-summary .per span,
.result-comment .per span {
    display: inline-block;
    width: 124px;
    text-align: center;
    border-radius: 40px;
    vertical-align: middle;
}

.result-summary .per span.tip-text {
    width: auto;
    margin-left: 10px;
}

.result-summary .summary {
    line-height: 1.6;
    font-size: 16px;
    font-weight: 250px;
}

.result-summary .summary {
    float: left;
    width: calc(100% - 240px);
}

.result-summary .chart_area {
    float: right;
}

.chart_area {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.chart_area .level-text {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #cd1618;
    font-size: 38px;
    font-weight: 550;
    transform: translate(-50%, -50%);
}

.chart_area .tip-text {
    display: block;
    padding-top: 150px;
    font-size: 13px;
}

.bar_chart-area {
    position: relative;
    margin-bottom: 70px;
}

.bar_chart-area .chart-info {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.bar_chart-area .chart-info .te {
    display: block;
}

.bar_chart-area .chart-info .button-wrap {
    margin: 0 !important;
}

.bar_chart-area .chart-info .button-wrap a {
    flex: auto !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 20px;
    color: #666;
    font-size: 13px !important;
}

.bar_chart-area .chart-info .button-wrap a:last-of-type {
    margin-right: 0;
}

.bar_chart-area .chart-info .button-wrap a .mark {
    display: inline-block;
    width: 14px;
    height: 20px;
    margin-right: 10px;
    border-radius: 7px 7px 0 0;
    background: #fff;
    vertical-align: text-bottom;
}

.bar_chart-area .chart-info .button-wrap a:last-of-type .mark {
    border: 1px solid #131313;
    box-sizing: border-box;
}

.bar_chart-area .chart-info .button-wrap a.active .mark {
    background: rgb(232, 232, 232);
    background: linear-gradient(180deg, rgba(232, 232, 232, 1) 0%, rgba(199, 199, 199, 1) 100%);
}

.bar_chart-area ul {
    justify-content: space-between;
}

.bar_chart-area ul .bar-item {
    flex: 1;
    height: 311px;
    padding-top: 35px;
    margin: 0 3px 0 0;
    border-radius: 50px 10px 10px 10px;
}

.bg-comp {
    background: #ca4d5d;
}

.bg-voca {
    background: #d67652;
}

.bg-grammar {
    background: #ddcd5a;
}

.bg-pronun {
    background: #68a5ac;
}

.bg-flue {
    background: #8d619a;
}

.comp {
    color: #ca4d5d;
}

.voca {
    color: #d67652;
}

.grammar {
    color: #ddcd5a;
}

.pronun {
    color: #68a5ac;
}

.flue {
    color: #8d619a;
}

.result-detail-left .img-area.comp {
    border: 8px solid #ca4d5d;
}

.result-detail-left .img-area.voca {
    border: 8px solid #d67652;
}

.result-detail-left .img-area.grammar {
    border: 8px solid #ddcd5a;
}

.result-detail-left .img-area.pronun {
    border: 8px solid #68a5ac;
}

.result-detail-left .img-area.flue {
    border: 8px solid #8d619a;
}

.bar_chart-area .bar-item-sort {
    margin-bottom: 50px;
    font-size: 18px;
    font-weight: 250;
}

.result-detail {
    margin-bottom: 100px;
}

.result-detail:last-of-type {
    margin-bottom: 0;
}

.result-detail-left {
    float: left;
    margin-right: 70px;
}

.result-detail-right {
    float: right;
    width: 730px;
}

.result-detail h3 {
    padding: 0 0 12px 12px;
    font-size: 23px;
    font-weight: 400;
}

.result-detail-left p {
    font-weight: 550;
}

.result-detail-left .img-area {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 200px;
    height: 200px;
    margin-top: 20px;
    border-radius: 50%;
    background: #fff;
}

.result-detail-left .img-area .per {
    margin-top: 8px;
    color: #999;
    font-size: 28px;
    letter-spacing: 0;
}

.result-detail-left .img-area .per span {
    display: inline-block;
    font-size: 42px;
}

.result-detail .text-area {
    margin-bottom: 50px;
}

.result-detail .text-area h5 {
    padding-bottom: 15px;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 400;
    border-bottom: 1px solid #e1e1e1;
}

.result-detail .text-area h5 .ico {
    margin-right: 10px;
}

.result-detail .text-area h5 .icon-bubble {
    background: url('../img/icon-bubble-b.svg') no-repeat center / contain;
}

.result-detail .text-area p {
    line-height: 1.4;
}

.result-detail .text-area .exp {
    margin-top: 20px;
}

.result-detail .text-area .exp-tit {
    position: relative;
    display: inline-block;
    margin-bottom: 12px;
    font-weight: 550;
}

.result-detail .text-area .exp-tit .icon-headphone {
    content: '';
    clear: both;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 10px;
    background: url('../img/icon-exphead.svg') no-repeat center / contain;
    vertical-align: middle;
}

.result-comment {
    margin-bottom: 45px;
}

.comment-tit {
    margin-bottom: 12px;
    font-size: 24px;
}

.comment-box {
    line-height: 1.6;
}

.comment-inbox {
    margin-right: 42px;
}

.comment-inbox:last-of-type {
    margin-right: 0;
}

.comment-inbox dt {
    margin-bottom: 30px;
    font-size: 21px;
    font-weight: 550;
}

.comment-inbox dd {
    margin-bottom: 15px;
}

.recomm-wrap .table-wrap {
    margin-bottom: 40px;
}

.recomm-box .comment-tit {
    font-size: 28px;
}

.recomm-wrap .table-info {
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 12px;
}

.recomm-wrap .sort-wrap > div:first-of-type {
    margin-right: 20px;
}

.recomm-wrap .bg-on {
    border: 1px solid rgba(205, 22, 24, 0.5);
    background: rgba(205, 22, 24, 0.2);
    box-sizing: border-box;
}

.circle-blue,
.circle-red {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 auto;
    border-radius: 50%;
    vertical-align: middle;
}

.circle-blue {
    background: #0d6efd;
}

.circle-red {
    background: #cd1618;
}

.recomm-item {
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    padding: 30px;
    margin-bottom: 10px;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    background: #fff;
}

.recomm-img {
    width: 120px;
    height: 160px;
    margin-right: 30px;
    border-radius: 10px;
    overflow: hidden;
}

.recomm-text {
    flex: 1;
}

.recomm-text .text01 {
    margin-bottom: 20px;
    font-size: 21px;
}

.recomm-text .text02 {
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 550;
}

.recomm-text .text03 {
    width: 550px;
    margin-bottom: 23px;
}

.recomm-text .text04 {
    font-size: 13px;
}

.recomm-text .button-wrap {
    position: absolute;
    bottom: 30px;
    right: 30px;
}

.recomm-text .button-wrap a {
    display: inline-block;
    padding: 12px 35px 12px 20px;
    margin-left: 20px;
    font-size: 16px;
    border-radius: 30px;
    border: 1px solid #707070;
    background: #fff url('../img/icon_arrow_black.svg') 95% no-repeat center / cover;
}

.recomm-text .button-wrap a.border-red {
    border-color: #cd1618;
    background: #fff url('../img/icon_arrow_danger.svg') 95% no-repeat center / cover;
}

.recomm-text .button-wrap a:hover {
    color: #fff;
    background: #707070 url('../img/icon_arrow_white.svg') 95% no-repeat center / cover;
}

.recomm-text .button-wrap a.border-red:hover {
    color: #fff;
    background: #cd1618 url('../img/icon_arrow_white.svg') 95% no-repeat center / cover;
}

/* 바 그래프 css */
.bar-item .graph_wrap {
    max-width: 215px;
    padding: 0 20px;
    margin: 0 auto;
}

.bar-item .graph {
    position: relative;
    height: 185px;
    margin-top: 15px;
}

.bar-item .graph .y-axis {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bar-item .graph .y-axis > li {
    position: relative;
    width: calc(100% - 20px);
    height: calc(100% / 11);
    margin-left: 20px;
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.bar-item .graph .y-axis > li span {
    position: absolute;
    top: -7px;
    left: -20px;
    line-height: 1;
    color: #fff;
    font-size: 12px;
}

.bar-item .graph .bar {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    position: absolute;
    left: 20px;
    bottom: 16px;
    width: calc(100% - 20px);
    height: calc(100% - 16px);
    text-align: center;
    z-index: 3;
}

.bar-item .graph .bar > li {
    position: relative;
    width: 100%;
    margin: 0 10px;
}

.bar-item .graph .bar > li.score > span {
    background: rgba(255, 255, 255, 0.8);
}

.bar-item .graph .bar > li .mark {
    position: absolute;
    top: -26px;
    left: 50%;
    width: 30px;
    height: 20px;
    line-height: 20px;
    margin: 0;
    color: #fff;
    font-size: 13px;
    text-align: center;
    transform: translateX(-50%);
    z-index: 10;
}

.bar-item .graph .bar > li .mark span {
    position: relative;
    display: block;
}

.bar-item .graph .bar > li.score .mark {
    top: -30px;
    color: #ca4d5d;
    border-radius: 6px;
    background: #fff;
}

.bar-item .graph .bar > li.score .mark span:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    clear: both;
    display: block;
    width: 0;
    height: 0;
    border-top: 6px solid #fff;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    transform: translateX(-50%);
}

.bar-item .graph .bar > li > span {
    display: inline-block;
    width: 100%;
    max-width: 26px;
    height: 100%;
    border-radius: 16px 16px 0 0;
    background: rgba(0, 0, 0, 0.5);
}

.bar-item .graph .bar:before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 1px;
    height: calc(100% + 4px);
    background: rgba(255, 255, 255, 0.5);
}

/*=================================================================================
* 학습상담
=================================================================================*/
.consult-wrap .page-title .consult-wrap .tab-link {
    flex: none;
    width: 280px;
}

.consult-wrap .step-wrap {
    justify-content: space-between;
}

.consult-wrap .step-wrap .step-item {
    position: relative;
    width: 240px;
    height: 160px;
    padding: 30px;
    border: 1px solid #f69920;
    border-radius: 20px;
    background: #fff;
}

.consult-wrap .step-wrap .step-item:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -32px;
    clear: both;
    display: block;
    width: 25px;
    height: 40px;
    margin-top: -20px;
    background: url('../img/icon_arrow_gray.svg') no-repeat center / 18px;
}

.consult-wrap .step-wrap .step-item:last-child::after {
    display: none;
}

.consult-wrap .step-item .text01,
.consult-wrap .frlt-tip-wrap .text01 {
    font-size: 18px;
    font-weight: bold;
}

.consult-wrap .step-item .text02,
.consult-wrap .frlt-tip-wrap .text02 {
    margin-bottom: 20px;
    font-size: 18px;
}

.consult-wrap .step-item .text03 {
    font-size: 21px;
    font-weight: bold;
}

.consult-wrap .inner {
    padding-bottom: 0;
}

.consult-wrap .box {
    margin-bottom: 100px;
}

.consult-wrap .box02 {
    width: 100%;
    padding: 70px;
    background: url('../img/svw-02-02.png') no-repeat center / cover;
}

.consult-wrap .box02 .title03 {
    margin-bottom: 20px;
}

.consult-wrap .box02 .text02 {
    line-height: 1.6;
    font-weight: normal;
}

.consult-wrap .box03 {
}

.consult-wrap .box03 .inner {
    padding: 0;
    justify-content: space-between;
}

.consult-wrap .box03 .img-area {
    width: 480px;
    height: 310px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}

.consult-wrap .box03 .left .img-area {
    background: url('../img/img-counsel01.png') no-repeat 0 0 / cover;
}

.consult-wrap .box03 .right .img-area {
    background: #afceff url('../img/img-counsel02.png') no-repeat center / cover;
}

.consult-wrap .box04 {
    padding: 100px 0;
    background: #f3f6fb;
}

.consult-wrap .review-slide-area {
    overflow: hidden;
}

.consult-wrap .app-slide {
    position: relative;
    width: 680px;
    margin: 0 auto;
}

.consult-wrap .app-slide .item {
    padding: 20px 50px;
    margin-bottom: 12px;
    border: 1px solid #f1f1f1;
    border-radius: 20px 20px 20px 0;
    background: #fff;
}

.consult-wrap .app-slide .item .new {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-right: 40px;
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

.consult-wrap .app-slide .slick-arrow {
    position: absolute;
    right: -50px;
    width: 40px;
    height: 40px;
    text-indent: -9999em;
    border: 1px solid #f1f1f1;
    background: #fff url('../img/icon_arrow_gray.svg') center/8px no-repeat;
}

.consult-wrap .app-slide .slick-prev {
    bottom: 60px;
    transform: rotate(-90deg);
}

.consult-wrap .app-slide .slick-next {
    bottom: 10px;
    transform: rotate(90deg);
}

.consult-wrap .box05 {
    margin-bottom: 0;
    background: url('../img/svw-02-03.png') no-repeat center / cover;
    padding-bottom: 20px;
}

.consult-wrap .box05 .title02 {
    margin-bottom: 30px;
}

.consult-wrap .box05 .btn {
    width: 320px;
    height: 60px;
    line-height: 60px;
    padding: 0;
    text-align: center;
}

.consult-wrap .box05 .inner {
    padding: 100px 0;
}

.consult-wrap .box06 {
    margin-bottom: 0;
    color: #131313;
    background: #d6e6ff;
}

.consult-wrap .box06 .text01 {
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #0d6efd;
}

.consult-wrap .box06 .inner {
    padding: 40px 0;
}

.consult-wrap .box06 .inner li {
    color: #131313;
}

.consult-wrap .box06 .inner .tip-text {
    color: #131313;
}

/*=================================================================================
* 프로그램
=================================================================================*/
.visual-slide-wrap {
    position: relative;
    width: 460px;
    z-index: 1;
}

.visual-slide-wrap .item {
    position: relative;
    width: 460px;
    height: 290px;
    border-radius: 10px;
    overflow: hidden;
}

.visual-slide-wrap .img-area {
    width: 100%;
    height: 100%;
}

.visual-slide-wrap .img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visual-slide-wrap .text-area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 0 0 10px 10px;
    background: rgba(0, 0, 0, 0.65);
}

.visual-slide-wrap .text-area p {
    color: #fff;
    font-size: 20px;
}

.visual-slide-wrap .slick-arrow {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -40px;
    color: transparent;
    overflow: hidden;
    background: url('../img/icon_arrow_white.svg') center/24px no-repeat;
    z-index: 10;
}

.visual-slide-wrap .slick-prev {
    left: -40px;
    transform: rotate(180deg);
}

.visual-slide-wrap .slick-next {
    right: -40px;
}

.visual-slide-wrap .slick-dots {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
    margin: 0;
    list-style-type: none;
}

.visual-slide-wrap .slick-dots li {
    margin: 0 0.25rem;
}

.visual-slide-wrap .slick-dots button {
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    text-indent: -9999px;
    border: none;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.6);
}

.visual-slide-wrap .slick-dots li.slick-active button {
    width: 20px;
    background-color: #f76718;
}

.page-title {
    margin-bottom: 70px;
}

.program-cont {
}

.program-cont .inner {
    padding: 80px 0;
}

.program-cont .box {
    margin-bottom: 150px;
}

.program-cont .box:last-of-type {
    margin-bottom: 0;
}

.program-map {
    padding: 30px 0 0;
}

.freeclass .program-map {
    padding: 0 0;
}

.program-map th,
.program-map td {
    border: 1px dashed #f1f1f1;
}

.program-map .bg-ptgray {
    color: #131313;
    background: #dbdbdb !important;
}

.map-title01,
.map-title-main {
    margin-bottom: 70px;
    font-size: 50px;
}

.map-title01 {
    margin-bottom: 50px;
}

.map-title02 {
    margin-bottom: 50px;
    font-size: 30px;
}

.program-map .button-wrap {
    margin-bottom: 70px;
}

.program-map .button-wrap a {
    position: relative;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.program-map .button-wrap .arrow,
.arrow.arrow-bg-sky {
    border: 1px solid #3173db;
    background: #5597ff url('../img/icon_arrow_white.svg') no-repeat center / cover;
}

.program-map .button-wrap a.btn-small {
    padding: 10px 10px 10px 20px;
    border-radius: 50px;
}

.program-map .button-wrap a.btn-small .arrow {
    width: 40px;
    height: 40px;
}

.prg-map-title-area {
    position: relative;
}

.prg-map-title-area .circle-float {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 134px;
    height: 200px;
    text-align: center;
    border-radius: 0;
}

.prg-map-title-area .circle-float.img01 {
    background: url('../img/img-recomm.png') no-repeat center / contain;
}

.prg-map-title-area .circle-float.img02 {
    background: url('../img/img-recomm02.png') no-repeat center / contain;
}

.prg-map-title-area .circle-float.img03 {
    background: url('../img/img-recomm03.png') no-repeat center / contain;
}

.prg-map-title-area .circle-float.img04 {
    background: url('../img/img-recomm04.png') no-repeat center / contain;
}

.prg-map-title-area .circle-float.img05 {
    background: url('../img/img-recomm05.png') no-repeat center / contain;
}

.prg-map-title-area .circle-float.img06 {
    background: url('../img/img-recomm06.png') no-repeat center / contain;
}

/* 231023 pny 추가 */
.prg-map-title-area .circle-float span {
    display: none;
    line-height: 1.2;
}

.all-map-area {
    margin-bottom: 50px;
    text-align: center;
}

.all-map-area table {
    table-layout: fixed;
}

.all-map-area table td,
.all-map-area table th {
    padding: 2px !important;
}

.all-map-area table td.bg-navy {
    padding: 30px 0;
}

.all-map-area table thead th {
    padding: 8px 2px !important;
}

.all-map-area table .text01 {
    display: block;
    font-size: 16px;
    font-weight: 550;
}

.all-map-area table .text02 {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    padding: 0;
    color: #131313;
    font-size: 13px;
}

.all-map-area table .text03 {
    font-weight: 600;
}

.all-map-area table .blank {
    border-left: 0;
    background: #fff;
}

.all-map-area .map-text-box {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 70px;
    padding: 8px 0;
    border-radius: 8px;
    box-sizing: border-box;
    cursor: pointer;
}

.all-map-area .map-text-box:hover,
.all-map-area .map-text-box.active {
    border: 2px solid #cd1618;
    box-sizing: border-box;
}

.program-map.pop-prgmap > .all-map-area:not(:first-child) {
    display: none;
}

.tip-new {
    display: block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    margin: 0 auto 12px;
    font-size: 15px;
    border-radius: 3px;
}

.prg-process {
    position: relative;
    text-align: center;
}

.prg-process ul:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    clear: both;
    display: block;
    width: 100%;
    height: 100%;
    background: url('../img/bg-process-arrow.png') no-repeat center 26% / contain;
    z-index: 0;
}

.prg-process02 ul:before {
    background: url('../img/bg-process-arrow02.png') no-repeat center 38% / contain;
}

.prg-process .process-item {
    float: left;
    position: relative;
    margin: 0 10px 90px 10px;
    z-index: 2;
}

.prg-process02 .process-item {
    margin-bottom: 0;
}

.prg-process .process-item:first-child,
.prg-process .process-item:nth-child(4) {
    margin-left: 16px;
}

.prg-process .process-item .img-area {
    width: 325px;
    height: 180px;
    margin-bottom: 30px;
    border-radius: 10px;
    background: #fff;
}

.prg-process .process-item .text-area {
    font-size: 18px;
    font-weight: 400;
}

.prg-phonics-info {
    margin-bottom: 100px;
}

.prg-phonics-info ul,
.prg-phonics-info .info-list {
    margin-bottom: 50px;
}

.prg-phonics-info .info-list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.prg-phonics-info .info-list dl {
    flex: 1;
    margin-right: 16px;
}

.prg-phonics-info .info-list dl:last-of-type {
    margin-right: 0;
}

.prg-phonics-info .info-list dt {
    width: 100%;
    height: 92px;
    line-height: 92px;
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center;
    border-radius: 10px;
    background: #fff;
}

.prg-phonics-info .info-list dl:first-of-type dt {
    background: rgb(243, 248, 255);
    background: linear-gradient(90deg, rgba(243, 248, 255, 1) 0%, rgba(165, 198, 255, 1) 100%);
}

.prg-phonics-info .info-list dl:nth-of-type(2) dt {
    background: rgb(255, 234, 206);
    background: linear-gradient(90deg, rgba(255, 234, 206, 1) 0%, rgba(255, 158, 104, 1) 100%);
}

.prg-phonics-info .info-list dl:last-of-type dt {
    background: rgb(255, 207, 231);
    background: linear-gradient(90deg, rgba(255, 207, 231, 1) 0%, rgba(255, 111, 113, 1) 100%);
}

.prg-phonics-info .info-list dd {
    position: relative;
    font-size: 24px;
    border: 1px solid #d6e6ff;
    border-radius: 10px;
    background: #fff;
    z-index: 1;
}

.prg-phonics-info .info-list dd:before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    clear: both;
    display: block;
    margin-left: -6px;
    border-top: 0px solid transparent;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #d6e6ff;
    z-index: 0;
}

.prg-phonics-info .info-list dd:after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    clear: both;
    display: block;
    margin-left: -4px;
    border-top: 0px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    z-index: 0;
}

.prg-phonics-info .info-list dd ul {
    margin: 0;
}

.prg-phonics-info .info-list .item-subj {
    padding: 20px;
    border-bottom: 1px solid #d6e6ff;
}

.prg-phonics-info .info-list .item-subj:last-child {
    border-bottom: 0;
}

.prg-phonics-info .info-list .item-subj a {
    display: block;
    position: relative;
}

.prg-phonics-info .info-list .item-subj a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    clear: both;
    display: block;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 50%;
    background: #97aeca url(../img/icon_arrow_white.svg) center/20px no-repeat;
}

.prg-phonics-info .button-wrap {
    justify-content: flex-end;
}

.prg-phonics-info .item-box {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    float: left;
    width: 340px;
    height: 320px;
    margin-right: 30px;
    font-weight: 400;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}

.prg-phonics-info .item-box img {
    margin-bottom: 20px;
}

.prg-phonics-info .item-box p {
    line-height: 1.4;
    color: #131313;
    font-size: 21px;
}

.prg-phonics-info .item-box:first-child {
    background: #e9fffd;
}

.prg-phonics-info .item-box:nth-child(2) {
    margin-top: 50px;
    background: #ffe9ef;
}

.prg-phonics-info .item-box:last-child {
    margin-right: 0;
    background: #e6f0ff;
}

.prg-phonics-info .item-box p strong {
    color: #131313;
    font-size: 24px;
}

/*=================================================================================
* Smart English
=================================================================================*/
.svw-03 .button-wrap a {
    width: 200px;
}

.small-tabs {
}

.se-detail-item {
}

.se-detail-item dl {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    margin-bottom: 50px;
    border: 1px solid #e1e1e1;
    border-radius: 80px;
    background: #fff;
}

.se-detail-item dt {
    flex: 1;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-start;
    align-items: center;
}

.se-detail-item dt .icon {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    margin-right: 30px;
    border-radius: 50%;
    background: #fafafa;
}

.se-detail-item dt .icon img {
}

.se-detail-item dt .title-area {
    margin-bottom: 0;
}

.se-detail-item dt .title-area .text03 {
    margin-bottom: 12px;
    font-size: 18px;
}

.se-detail-item dt .title-area .text01 {
    font-size: 34px;
}

.se-detail-item dd {
    flex: 1;
}

.se-detail-item dd p {
    font-size: 18px;
}

.carousel-wrap,
.books-curri {
    width: 100%;
    margin-bottom: 50px;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.carousel-area {
    padding: 50px 30px;
}

.carousel-box {
    position: relative;
}

.carousel-wrap .carousel-area .owl-theme .owl-next,
.carousel-wrap .carousel-area .owl-theme .owl-prev {
    position: absolute;
    top: 40%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-top: -20px;
    text-align: center;
    background: url('../img/nav-prev.png');
    background-size: contain;
}

.carousel-wrap .carousel-area .owl-theme .owl-prev {
    left: 0;
}

.carousel-wrap .carousel-area .owl-theme .owl-next {
    right: 0;
    transform: rotate(-180deg);
}

.carousel-box .slick-arrow {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    margin-top: -45px;
    text-indent: -9999em;
    border-radius: 50%;
    background: #e1e1e1 url(../img/icon_arrow_white.svg) no-repeat center / 20px;
    z-index: 1;
}

.carousel-box .slick-prev {
    left: -10px;
    transform: rotate(180deg);
}

.carousel-box .slick-next {
    right: 0;
}

.carousel-box ul {
    padding: 0 30px;
}

.carousel-title {
    margin-bottom: 30px;
}

.carousel-item .img-area {
    width: 180px;
    height: 170px;
    margin-bottom: 20px;
    border: 1px solid #e1e1e1;
    border-radius: 15px;
    overflow: hidden;
}

.carousel-item .img-area img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.program-cont .carousel-item.active .img-area {
    border: 2px solid #cd1618;
}

.carousel-item .text-area .text01 {
    margin-bottom: 4px;
    font-size: 18px;
}

.books-crs .carousel-item {
}

.books-crs .slick-list {
    margin: 0 -20px;
}

.books-crs .slick-slide {
    width: 260px;
    margin: 0 20px;
}

.books-crs .carousel-item .img-area {
    width: 280px;
    height: 345px;
    margin: 0 auto;
}

.books-crs .carousel-item .text-area .text01 {
    height: 45px;
    margin-bottom: 20px;
}

.books-crs .carousel-item .text-area .text03 {
    margin-bottom: 20px;
    height: 38px;
    font-size: 15px;
    font-weight: 250;
    overflow: hidden;
}

.carousel-bottom {
    width: 100%;
    padding: 45px 0;
    color: #131313;
    font-size: 21px;
    text-align: center;
    background: #f7f7f7;
}

.books-curri {
    padding: 50px 60px;
}

.books-curri ul {
}

.books-curri .books-curri-item {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: space-between;
    align-items: flex-start;
    float: left;
    margin: 0 50px 50px 0;
}

.books-curri .books-curri-item:nth-child(3n) {
    margin-right: 0;
}

.books-curri .books-thum {
    position: relative;
    margin-right: 20px;
}

.books-curri .books-thum .img-are {
    position: relative;
    width: 155px;
    height: 155px;
    margin-bottom: 20px;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
}

.books-curri .books-thum .img-are img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.books-curri .books-thum .books-title {
    font-weight: 550;
}

.books-curri .books-thum .level {
    position: absolute;
    top: 0;
    left: 50%;
    padding: 6px 20px;
    color: #b20b0d;
    border: 1px solid #b20b0d;
    border-radius: 5px;
    background: #fff;
    transform: translate(-50%, -50%);
}

.books-curri .booksBtn {
    flex: 1;
}

.books-curri .booksBtn a {
    display: block;
    width: 110px;
    height: 35px;
    line-height: 35px;
    padding: 0;
    margin: 0 0 5px 0;
    font-size: 16px;
    text-align: center;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
}

/*=================================================================================
* 선생님 소개
=================================================================================*/
.teacher-cont .box {
    margin-bottom: 100px;
}

.teacher-cont .top01 {
}

.teacher-cont .top01 .title03 {
    float: left;
    width: 300px;
}

.tea-slide {
    float: right;
    width: calc(100% - 350px);
}

.tea-vid {
    width: 320px;
    height: 200px;
    border-radius: 10px;
    background: #fff;
}

.teacher-cont .tea-slide .owl-theme .owl-nav [class*='owl-'],
.carousel-wrap .carousel-area .owl-theme .owl-nav [class*='owl-'] {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.teacher-cont .tea-slide .owl-theme,
.carousel-wrap .carousel-area .owl-theme {
    position: relative;
}

.teacher-cont .tea-slide .owl-theme .owl-next,
.teacher-cont .tea-slide .owl-theme .owl-prev {
    position: absolute;
    top: 50%;
    width: 40px;
    line-height: 40px;
    height: 40px;
    margin-top: -20px;
    text-align: center;
    background: url('../img/icon_arrow_gray.svg') no-repeat center / 12px;
}

.teacher-cont .tea-slide .owl-theme .owl-next {
    right: -15px;
}

.teacher-cont .tea-slide .owl-theme .owl-prev {
    left: -25px;
    transform: rotate(-180deg);
}

.teacher-cont h2 {
    margin-bottom: 50px;
}

.tea-talk {
    float: left;
    margin-right: 48px;
}

.tea-talk:last-child {
    margin-right: 0;
}

.tea-talk .img-area {
    width: 234px;
    height: 150px;
    margin-bottom: 30px;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.tea-talk .img-area img {
}

.tea-talk .text-area .text01 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
}

.tea-recomm {
}

.tea-recomm-item {
    margin-bottom: 50px;
}

.tea-recomm-item dl {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: space-between;
    align-items: center;
}

.tea-recomm-item .tea-info {
    width: 340px;
    margin-right: 120px;
    border-radius: 50px 50px 50px 0;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.tea-recomm-item .tea-info.info02 {
    margin-left: 120px;
    margin-right: 0;
    border-radius: 50px 50px 0 50px;
}

.tea-recomm-item .tea-info .tea-thum {
    height: 315px;
    border-bottom: 1px solid #e1e1e1;
    box-sizing: border-box;
    overflow: hidden;
}

.tea-recomm-item .tea-info .tea-thum img {
    width: 100%;
    height: 100%;
    line-height: 0;
    object-fit: cover;
}

.tea-recomm-item .tea-info .tea-text {
    padding: 20px;
    text-align: left;
}

.tea-recomm-item .tea-info .tea-name {
    margin-bottom: 10px;
    font-size: 16px;
}

.tea-recomm-item .tea-info .tea-career {
}

.tea-recomm-item .tea-info .tea-career span {
    display: block;
    font-size: 14px;
}

.tea-recomm-item .bubble-wrap {
    flex: 1;
}

.tea-bubble .speech-bubble {
    position: relative;
    display: inline-block;
    width: 500px;
    line-height: 1.2;
    padding: 40px 60px;
    margin-bottom: 50px;
    font-size: 27px;
    text-align: left;
    border-radius: 1em;
    vertical-align: top;
}

.tea-bubble .speech-bubble:after {
    content: '';
    position: absolute;
    top: 95%;
    left: 10%;
    width: 0;
    height: 0;
    margin-left: -10px;
    border-top: 35px solid #666666;
    border-left: 0px solid transparent;
    border-right: 30px solid transparent;
}

.tea-bubble .speech-bubble.bubble01 {
    color: #fff;
    background: #dc3545;
}

.tea-bubble .speech-bubble.bubble01:after {
    border-top-color: #dc3545;
    transform: rotate(90deg);
}

.tea-bubble .speech-bubble.bubble02 {
    margin-left: 80px;
    color: #fff;
    background: #d63384;
}

.tea-bubble .speech-bubble.bubble02:after {
    border-top-color: #d63384;
}

.tea-bubble .speech-bubble.bubble03 {
    margin-right: 80px;
    color: #fff;
    background: #0dcaf0;
}

.tea-bubble .speech-bubble.bubble03:after {
    border-top-color: #0dcaf0;
}

.tea-bubble .speech-bubble.bubble04 {
    color: #fff;
    background: #489af7;
}

.tea-bubble .speech-bubble.bubble04:after {
    border-top-color: #489af7;
    transform: rotate(90deg);
}

.tea-bubble .speech-bubble .que {
    position: absolute;
    top: 20px;
    left: 20px;
    display: block;
    font-size: 32px;
}

.tea-search {
    padding: 20px 0;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}

.tea-search ul {
    width: 100%;
}

.tea-search ul .search-item {
    float: left;
    width: 235px;
    margin-right: 10px;
}

.tea-search ul .search-item select {
    width: 100%;
}

.tea-search ul .search-item:last-child {
    width: 340px;
    margin-right: 0;
}

.multi-dropdown dd,
.multi-dropdown dt {
    margin: 0px;
    padding: 0px;
}

.multi-dropdown ul {
    margin: -1px 0 0 0;
}

.multi-dropdown dd {
    position: relative;
}

.multi-dropdown a,
.multi-dropdown a:visited {
    color: #131313;
    font-size: 12px;
    text-decoration: none;
    outline: none;
}

.multi-dropdown dt a {
    position: relative;
    display: block;
    width: 100%;
    height: 46px;
    line-height: 45px;
    padding-left: 15px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
}

.multi-dropdown dt a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 20px;
    clear: both;
    display: block;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    background: #fff url('../img/arrow-select.svg') no-repeat center / 12px auto;
}

.multi-dropdown dt a.on:after {
    transform: rotate(180deg);
}

.multi-dropdown dt a span,
.multiSel span {
    display: inline-block;
    padding: 0 3px 2px 0;
    cursor: pointer;
}

.multi-dropdown dd ul {
    display: none;
    position: absolute;
    left: 0px;
    top: 2px;
    width: 100%;
    height: 300px;
    padding: 4px 15px 4px 10px;
    color: #131313;
    list-style: none;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    background-color: #fff;
    overflow: auto;
    z-index: 10;
}

.multi-dropdown span.value {
    display: none;
}

.multi-dropdown .check__item {
    display: block;
}

.multi-dropdown dd ul li {
    padding: 5px 0;
}

.multi-dropdown dd ul li label {
    display: block;
    margin: 0;
    font-size: 12px;
}

.multi-dropdown .custom__check {
    margin-right: 4px;
}

.multi-dropdown .default__check[type='checkbox'] ~ .custom__check {
    display: inline-block;
    vertical-align: middle;
}

.multi-dropdown .default__check[type='checkbox']:not(.switchbox) ~ .custom__check:after {
    top: 3px;
    left: 5px;
}

.tea-search input[type='text'] {
    display: inline-block;
    width: 280px;
    margin-right: 8px;
    vertical-align: middle;
}

.tea-search input[type='submit'] {
    display: inline-block;
    width: 46px;
    height: 46px;
    color: transparent;
    border-radius: 5px;
    border: 1px solid #b20b0d;
    background: #cd1618 url('../img/icon-search.svg') no-repeat center / auto;
    vertical-align: middle;
}

.tea-search .search-item .tip-text {
    margin: 8px 0 0;
    font-size: 13px;
}

.tea-search-result {
}

.tea-search-result .non {
    padding: 50px 0;
    text-align: center; /*border-top:1px solid #e1e1e1;*/
    border-bottom: 1px solid #e1e1e1;
}

.tea-search-result .tea-list {
    padding: 50px 0;
}

.tea-search-result .tea-list-item {
    float: left;
    position: relative;
    width: 340px;
    height: 480px;
    margin: 0 30px 30px 0;
    border-radius: 50px 50px 50px 0;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: 0.5s;
    transform-style: preserve-3d;
    overflow: hidden;
}

.tea-search-result .tea-list-item:nth-child(3n) {
    margin-right: 0;
}

.tea-search-result .tea-list-item .thum {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 260px;
    text-align: center;
    overflow: hidden;
}

.tea-search-result .tea-list-item .thum img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.tea-search-result .tea-list-item .tea-info {
    padding: 30px 0 0;
    text-align: center;
}

.tea-search-result .tea-list-item .tea-info p.text01 {
    margin-bottom: 30px;
    font-weight: 400;
}

.tea-search-result .tea-list-item .tea-info p .name {
    display: block;
}

.grade-wrap {
    margin-bottom: 25px;
    text-align: center;
}

.grade-wrap p,
.star-ratings {
    display: inline-block;
    vertical-align: middle;
}

.grade-wrap p {
    margin-right: 4px;
}

.star-ratings {
    position: relative;
}

.star-ratings span {
    width: max-content;
    margin: 0 1px;
    font-size: 24px;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #cd1618;
    unicode-bidi: bidi-override;
}

.star-ratings span.fill {
    color: #cd1618;
    -webkit-text-fill-color: #cd1618;
}

.star-ratings-base {
    padding: 0;
    z-index: 0;
}

/* 선생님만족도 별점 */
.tea-info .star-ratings {
    width: 120px;
    height: 29px;
    margin-top: 5px;
    background: url('/assets/hpg/asp/talkool/cmn/pc/images/icon/ico_star_b_off.png') no-repeat;
}

.tea-info .star-ratings div {
    display: block;
    height: 100%;
    background: url('/assets/hpg/asp/talkool/cmn/pc/images/icon/ico_star_b_on.png') no-repeat;
}

.grade-wrap .grade-text {
    display: inline-block;
    margin-left: 8px;
    color: #cd1618;
    font-size: 18px;
    font-weight: 600;
    vertical-align: middle;
}

.over-info .btn-voice, .tea-info .btn-detail {
    width: 120px;
    height: 40px;
    line-height: 40px;
    padding: 0 0 0 42px;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    border-radius: 3px;
    background: #595967 url('../img/icon-bubble.svg') no-repeat 12px center;
}

.over-info .btn-voice {
    background: #fff url('../img/icon-voice.svg') no-repeat 12px center;
}

.tea-list-item .over-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 480px;
    padding: 50px 30px 20px;
    color: #fff;
    background: #595967;
}

.tea-list-item .over-info h3 {
    margin-bottom: 30px;
    font-size: 24px;
}

.tea-list-item .over-info-scroll {
    height: 280px;
    padding-right: 10px;
    overflow-y: scroll;
}

.tea-list-item .over-info dl {
    margin-bottom: 30px;
}

.tea-list-item .over-info dl dt {
    margin-bottom: 15px;
}

.tea-list-item .over-info dl dt h4 {
    font-size: 16px;
    font-weight: 250;
}

.tea-list-item .over-info dl dt .ico {
    margin-right: 10px;
}

.tea-list-item .over-info dl dd {
    line-height: 1.4;
    margin-left: 34px;
    font-size: 16px;
    font-weight: 250;
}

.tea-list-item .over-info .button-wrap {
    margin-top: 32px;
    margin-bottom: 0;
}

.tea-list-item .front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition-delay: 0.15s;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-sizing: border-box;
}

.tea-list-item .back {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition-delay: 0.15s;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    box-sizing: border-box;
}

.tea-list-item.active .back {
    display: block;
}

.tea-list-item .back .back-close {
    position: absolute;
    top: 30px;
    right: 30px;
    display: block;
    width: 30px;
    height: 30px;
    background: url('../img/pop_close.svg') no-repeat center / 20px;
    z-index: 10;
}

/*=================================================================================
* 학습후기
=================================================================================*/
.review-cont .inner {
    padding: 80px 0;
}

.review-cont .page-title .title03 {
    font-size: 30px;
    font-weight: normal;
}

.review-cont .box {
    margin-bottom: 50px;
}

.board-search {
    padding: 20px 0;
    border-top: 1px solid #e1e1e1;
}

.board-search {
    display: flex;
    justify-content: center;
    align-items: center;
}

.board-search ul {
    width: 100%;
}

.board-search ul .search-item {
    float: left;
    width: 174px;
    margin-right: 10px;
}

.board-search ul .search-item select {
    width: 100%;
}

.board-search ul .search-item:nth-child(2) {
    width: 345px;
}

.board-search ul .search-item:last-child {
    width: 540px;
    margin-right: 0;
}

.board-search input[type='text'] {
    display: inline-block;
    width: 450px;
    margin-right: 8px;
    vertical-align: middle;
}

.board-search input[type='search'] {
    width: 220px;
    margin: 0 8px;
}

.board-search input[type='submit'] {
    display: inline-block;
    width: 60px;
    height: 46px;
    color: #fff;
    border: 1px solid #b20b0d;
    border-radius: 5px;
    background: #f76718;
    vertical-align: middle;
}

.review-cont .table-wrap {
    text-align: center;
    border: 0;
}

.review-cont .table-wrap .table-style04 {
    border: 0;
}

.review-cont .tip-best,
.review-cont .tip-new {
    display: inline-block;
    padding: 2px 10px;
    margin: 0;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    border-radius: 30px;
    vertical-align: middle;
}

.table-caption {
    margin-bottom: 20px;
    font-size: 18px;
    text-align: left;
}

.review-cont .tip-best {
    border: 1px solid #cd1618;
    background: #cd1618;
}

.review-cont .tip-new {
    width: 32px;
    height: 18px;
    line-height: 18px;
    color: #f76718;
    font-size: 12px;
    border: 1px solid #f76718;
}

.review-cont .title {
    margin-right: 12px;
}

.review-cont .grade-wrap {
    margin: 0;
}

.review-cont .star-ratings {
    width: 82px;
    height: 21px;
    margin-top: 5px;
    background: url('../img/ico_star_rv_off.png') no-repeat;
}

.review-cont .star-ratings span {
    font-size: 14px;
}

.review-cont .star-ratings div {
    display: block;
    width: 100%;
    height: 100%;
    background: url('../img/ico_star_rv_on.png') no-repeat;
}

.review-cont .grade-text {
    color: #999;
    font-size: 16px;
    font-weight: 250;
}

.review-cont .rv-cont {
    line-height: 1.4;
    padding: 20px 20px;
    text-align: left;
    background: #fff;
}

.review-cont .rv-cont-img {
    width: 100%;
    margin: 25px 0;
}

.review-cont .rv-cont-img .img-wrap li {
    float: left;
    width: 84px;
    height: 84px;
    margin-right: 8px;
    border-radius: 3px;
    border: 1px solid #e1e1e1;
    overflow: hidden;
}

.review-cont .rv-cont-img .img-wrap li a {
    display: block;
    width: 100%;
    height: 100%;
}

.review-cont .rv-cont-help {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.review-cont .rv-cont .grade-wrap {
    text-align: left;
}

.review-cont .rv-cont-help .button-wrap {
    margin: 0;
}

.review-cont .rv-cont-help .btn {
    padding: 8px 15px;
    color: #fff;
    font-size: 14px;
    border-radius: 3px;
    background: #595967;
}

.table-help {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-end;
    align-items: center;
    margin: 15px 0 0;
}

.table-help a {
    padding: 10px 15px;
    color: #fff;
    font-size: 16px;
    font-weight: 250;
    border-radius: 3px;
}

.table-help .btn-tip {
    position: relative;
    padding: 8px 15px;
    margin-right: 20px;
    color: #fff;
    border-radius: 3px;
    background: #595967;
}

.table-help .btn-tip:after {
    content: '';
    position: absolute;
    top: 6px;
    right: -10px;
    clear: both;
    display: block;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 12px solid #595967;
}

.footer-banner {
    background: url('../img/bg-free.jpg') no-repeat center / cover;
}

.footer-banner .inner {
    padding: 80px 0;
}

.footer-banner .title02 {
    margin-bottom: 30px;
}

.footer-banner .button-wrap {
    margin: 0;
}

.footer-banner .btn-type01 {
    width: 320px;
}

.table-wrap.review-apply table {
    border: 0 !important;
}

.review-apply input[type='text'],
.review-apply input[type='password'] {
    width: 100%;
}

.review-apply select {
    min-width: 180px;
}

.btn-pure {
    display: block;
    padding: 12px 0;
    font-size: 18px;
}

.pop_modify {
    width: 280px;
    font-size: 18px;
    text-align: center;
}

.layer-photoview {
    height: 650px;
}


/*=================================================================================
* 수강후기 등록시 star rating
=================================================================================*/
table.table-style04 td .survey_inquiry {
    padding: 10px 5px;
    font-size: 0;
}

table.table-style04 td .survey_inquiry button {
    width: 8px;
    height: 16px;
    color: transparent;
    font-size: 0;
    text-indent: -9999px;
    background: transparent url('../img/bg_star.png');
    outline: none;
}

table.table-style04 td .survey_inquiry button:nth-child(even) {
    margin-right: 4px;
    background-position: 8px 0;
}

table.table-style04 td .survey_inquiry button.active {
    background-position: 0 -16px;
}

table.table-style04 td .survey_inquiry button:nth-child(even).active {
    background-position: 8px -16px;
}

table.table-style04 td .survey_inquiry .num {
    padding-left: 5px;
    color: #999;
    font-size: 16px;
    font-weight: 250;
    vertical-align: middle;
}

/*=================================================================================
* 수강신청
=================================================================================*/
.cs-apply-wrap .box {
    margin-bottom: 100px;
}

.cs-apply-wrap .box:last-of-type {
    margin-bottom: 0;
}

.cs-process-area ul {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: space-between;
    align-items: center;
}

.cs-process-area .csp-item {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-start;
    align-items: center;
    float: left;
    margin-right: 30px;
}

.cs-process-area .csp-item .thum {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: center;
    width: 74px;
    height: 74px;
    margin-right: 30px;
    border-radius: 50%;
    background: #fff;
}

.cs-process-area .csp-item .text-area {
}

.cs-process-area .csp-item .text-area .step {
    display: block;
    width: 74px;
    height: 28px;
    line-height: 28px;
    margin-bottom: 15px;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    border-radius: 30px;
    background: #999;
    box-sizing: border-box;
}

.cs-process-area .csp-item .text-area .text01 {
    font-size: 21px;
    font-weight: bold;
}

.cs-process-area .csp-item.on .text-area .step {
    background: #cd1618;
}

.cs-process-area .csp-item.on .text-area .text01 {
    color: #cd1618;
}

.cs-arrow .arrow {
    float: left;
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    opacity: 0.3;
}

.cs-arrow .arrow::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    height: 12px;
    width: 12px;
    border-right-style: solid;
    border-right-width: 2px;
    border-bottom-style: solid;
    border-bottom-width: 2px;
}

.cs-arrow .arrow.is-right {
    transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
}

.cs-apply-wrap .apply-step {
}

.cs-apply-wrap .apply-step .step-box {
    margin-bottom: 50px;
}

.cs-apply-wrap .apply-step h3 {
    margin-bottom: 30px;
}

.cs-apply-wrap .apply-step .tab-button-wrap {
    position: relative;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 30px;
}

.cs-apply-wrap .apply-step .tab-button-wrap .btn-tab {
    display: block;
    padding: 13px 30px;
    margin-right: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #777;
    border-radius: 5px;
    background: #999;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.06);
}

.cs-apply-wrap .apply-step .tab-button-wrap .btn-tab.btn-layer {
    position: absolute;
    top: 0;
    right: 0;
    color: #131313;
    border: 1px solid #ccc;
    background: #fff;
}

.cs-apply-wrap .apply-step .tab-button-wrap .btn-tab.active {
    border-color: #d95041;
    background: #fe6555;
}

.cs-apply-wrap .apply-step .cs-tab-cont,
.cs-apply-wrap .step02-btn-area {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 40px 50px;
    border-radius: 10px;
    background: #e2e8f2;
}

.cs-apply-wrap .apply-step .cs-tab-cont .btn-tab02 {
    position: relative;
    display: block;
    margin: 0 20px 20px 0;
    padding: 13px 30px;
    font-size: 16px;
    font-weight: 550;
    text-align: center;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.cs-apply-wrap .apply-step .cs-tab-cont .btn-tab02.active,
.cs-apply-wrap .apply-step .cs-tab-cont .btn-tab02:hover {
    border-color: #f2d177;
    background: #fef872;
}

.cs-apply-wrap .apply-step .cs-tab-cont .tooltip-hover {
    position: relative;
}

.cs-apply-wrap .apply-step .cs-tab-cont .tooltip-hover .message {
    display: none;
    position: absolute;
    left: 50%;
    top: 110%;
    width: 100%;
    line-height: 1.6;
    padding: 16px 10px;
    color: #131313;
    font-size: 12px;
    filter: alpha(opacity=0);
    text-align: center;
    border: 1.5px solid #0d6efd;
    border-radius: 5px;
    background: none repeat scroll 0 0 #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    transform: translateX(-50%);
    text-transform: none;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease;
    z-index: 2;
}

.cs-apply-wrap .apply-step .cs-tab-cont .tooltip-hover .message:before,
.cs-apply-wrap .apply-step .cs-tab-cont .tooltip-hover .message:after {
    content: '';
    position: absolute;
    left: 50%;
    display: block;
    width: 0;
    margin-left: -8px;
}

.cs-apply-wrap .apply-step .cs-tab-cont .tooltip-hover .message:before { /* 화살표 */
    top: -11px;
    margin-left: -7px;
    border-bottom: 11px solid #0d6efd;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    z-index: 1;
}

.cs-apply-wrap .apply-step .cs-tab-cont .tooltip-hover .message:after { /* 화살표 */
    top: -9px;
    margin-left: -5px;
    border-bottom: 9px solid #fff;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    z-index: 2;
}

.cs-apply-wrap .apply-step .cs-tab-cont .tooltip-hover:hover .message {
    left: 50%;
    display: block;
    filter: alpha(opacity=100);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    z-index: 99;
}

.cs-apply-wrap .step02-btn-area {
}

.cs-apply-wrap .step02-btn-area dl {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
}

.cs-apply-wrap .step02-btn-area dl dt {
    width: 140px;
    font-size: 16px;
    font-weight: bold;
}

.cs-apply-wrap .step02-btn-area dl dd {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 140px);
}

.cs-apply-wrap .step02-btn-area .btn-tab03 {
    display: block;
    width: 32%;
    height: 46px;
    line-height: 46px;
    padding: 0 12px;
    margin-right: 10px;
    font-size: 16px;
    font-weight: 550;
    text-align: center;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: content-box;
}

.cs-apply-wrap .step02-btn-area .btn-tab03.active {
    color: #fff;
    border-color: #d95041;
    background: #fe6555;
}

.cs-apply-wrap .step02-btn-area .btn-tab03.active span {
    color: #000 !important;
}

@keyframes blinkBtn {
    50% {
        opacity: .7;
    }
}

.cs-apply-wrap .step02-btn-area .btn-tab03 {
    position: relative;
}

.cs-apply-wrap .step02-btn-area .btn-tab03 a {
    display: block;
}

.cs-apply-wrap .step02-btn-area .btn-tab03 .evt_btn {
    text-indent: 50px;
    animation: blinkBtn 1s step-end infinite;
    -webkit-animation: blinkBtn 1s step-end infinite;
}

.cs-apply-wrap .step02-btn-area .btn-tab03 .evt_btn + em {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 15px;
    top: -9px;
    width: 58px;
    height: 58px;
    line-height: 1.3;
    color: #fff;
    font-size: 14px;
    font-weight: 550;
    text-indent: 0;
    text-align: center;
    border: 2px solid #fff;
    border-radius: 60px;
    background: #fe6555;
    animation: none;
}

.cs-apply-wrap .step02-btn-area .btn-tab03.active .evt_btn {
    color: #fff;
    border-color: #d95041;
    background: #fe6555;
    animation: none;
    -webkit-animation: none;
}

.cs-apply-wrap .step02-btn-area .btn-tab03 .message {
    display: none;
    position: absolute;
    left: 50%;
    top: 120%;
    width: 100%;
    line-height: 1.5;
    padding: 12px 10px;
    color: #131313;
    font-size: 14px;
    text-indent: 0;
    opacity: 0;
    animation: unset;
    -webkit-animation: unset;
    text-align: center;
    border: 1.5px solid #0d6efd;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    transform: translateX(-50%);
    text-transform: none;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease;
    z-index: 2;
}

.cs-apply-wrap .step02-btn-area .btn-tab03 .message:before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    width: 0;
    margin-left: -8px;
    border-bottom: 8px solid #5597ff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    z-index: 1;
}

.cs-apply-wrap .step02-btn-area .btn-tab03:hover .message {
    display: block;
    opacity: 1;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    z-index: 100;
}

.cs-apply-wrap .table-style02 td {
    height: 46px;
    padding: 0;
    font-size: 14px;
    text-align: center;
}

.cs-apply-wrap .table-style02 td.ended {
    background: #f1f1f1;
}

.cs-apply-wrap .table-style02 .active {
    background: rgba(254, 254, 114, 0.3);
}

.total-apply .table-style01 td {
    padding: 20px 30px;
}

.total-apply .text01 {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
}

.total-apply .text02 {
    font-size: 16px;
    font-weight: 400;
}

.total-apply .table-style01 .p0 {
    padding: 0;
}

.total-apply .btn-apply {
    display: block;
    line-height: 56px;
    color: #fff;
    font-weight: 550;
    font-size: 24px;
    text-align: center;
}

.total-apply .total p {
    font-size: 21px;
}

.program-map.pop-prgmap .table-wrap .text03,
.program-map.pop-prgmap .table-wrap .text01 {
    font-size: 14px;
}

.program-map.pop-prgmap {
    padding: 0;
}

.all-map-poptab {
    width: 100%;
    margin-bottom: 30px;
    text-align: center;
}

.all-map-poptab .btn {
    display: inline-block;
    padding: 13px 35px;
    color: #131313;
    font-size: 19px;
    text-align: center;
    border-radius: 50px;
    background: #d7d7d7;
}

.all-map-poptab .btn.active {
    color: #fff;
    background: #cd1618;
}

.pop-prgmap .box-on.box-on01:after {
    width: 166px;
}

.pop-prgmap .box-on.box-on02:after,
.pop-prgmap .box-on.box-on04:after {
    width: 512px;
}

.pop-prgmap .box-on.box-on03:after {
    width: 591px;
}

.pop-prgmap .box-on.box-on05:after {
    width: 671px;
}

.apply-title-box {
    margin-bottom: 20px;
    font-size: 24px;
}

.cs-apply-wrap .apply-title-box h3 {
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e1e1e1;
}

.apply02-box {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.apply02-box .book-thum {
    width: 184px;
    height: 184px;
    margin-right: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.apply02-box .book-thum img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.apply02-box .table-wrap {
    flex: 1;
}

.apply02-box .table-style01 th,
.apply02-box .table-style01 td {
    height: 46px;
    padding: 8px 8px 8px 25px;
    font-size: 14px;
}

.apply02-box input[type='text'] {
    width: 100%;
    height: 33px;
}

.apply02-box select {
    width: 35%;
    height: 33px;
    margin-right: 8px;
    line-height: 33px;
}

.apply02-box .coupon {
}

.apply02-box .coupon input[type='text'] {
    width: 180px;
    margin-right: 8px;
}

.apply02-box .coupon span {
    margin-right: 20px;
}

.apply02-box .btn-small {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    font-weight: normal;
    background: #595967;
    vertical-align: middle;
}

.apply02-box .coupon .form-group {
    display: inline-block;
}

.apply02-box .coupon .text {
    display: inline-block;
    padding-left: 30px;
}

.apply02-box.pay-info {
    flex-direction: column;
}

.apply02-box.pay-info .table-wrap {
    margin-bottom: 10px;
}

.pay-refund {
    padding: 20px;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    background: #fff;
}

.pay-refund .rf-box {
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.apply02-box .way {
    margin-bottom: 12px;
}

.apply02-box .way .radio {
    display: inline-block;
    margin-right: 12px;
    vertical-align: middle;
}

.apply02-box .way .tip-text:nth-of-type(1) {
    margin-top: 5px;
}

.table-both {
    margin-right: 20px;
}

.cs-apply-wrap .apply-step .height276 {
    height: 276px;
}

.cs-apply-wrap .apply-step .height-half {
    height: 92px;
}

.cs-apply-wrap .apply-step .btn-type01 {
    width: 220px;
}

.books-info .thum {
    width: 56px;
    max-height: 75px;
    margin-right: 20px;
    background: #fff;
    overflow: hidden;
}

.books-table .thum {
    width: 56px;
    max-height: 75px;
    margin-right: 20px;
    background: #fff;
    overflow: hidden;
}

.books-table .text-area {
    float: left;
}

.books-table .text-area p {
    line-height: 1.4;
}

.noti-area {
    margin-bottom: 50px;
}

.noti-area p {
    margin-bottom: 8px;
}

.books-info {
    align-items: center;
}

.books-info p,
.text-price {
    line-height: 1.6;
}

.adr-item {
    margin-bottom: 4px;
}

.table-style01 .total_prc th, .table-style01 .total_prc td {
    height: 230px;
}

.table-style01 .total_prc02 th, .table-style02 .total_prc td {
    height: 322px;
}

/*=================================================================================
* 마이페이지
=================================================================================*/
.mypage-wrap {
}

.mypage-wrap .row {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    width: 100%;
    padding: 30px 25px;
    margin-bottom: 30px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.04);
}

/* 230922 kmh 수정 */

.mypage-wrap .row.p25 {
    padding: 25px;
}

.mypage-wrap .row.talkto,
.mypage-wrap .row.personal {
    margin-bottom: 80px;
}

.mypage-wrap .row.talkto .btn {
    min-width: 200px;
    padding: 12px 20px;
    font-size: 21px;
    text-align: center;
}

.mypage-wrap .box {
    width: 50%;
    padding: 0 25px;
}

.mypage-wrap .box.size-full {
    position: relative;
    width: 100%;
}

.mypage-wrap .box.size-full .btn-apply {
    position: absolute;
    right: 25px;
    top: 70px;
}

.mypage-wrap .box .title03 {
    margin-bottom: 30px;
}

.mypage-wrap .badge {
    width: 65px;
    height: 28px;
    line-height: 28px;
    padding: 0;
    text-align: center;
    border-radius: 30px;
}

.bar_chart-area .badge {
    width: 124px;
    height: 28px;
    line-height: 28px;
    font-size: 21px;
    text-align: center;
    border-radius: 30px;
}

.mypage-wrap .badge.ing {
    color: #666;
    background: #ccc;
}

.mypage-wrap .badge.end {
    color: #fff;
    background: #f76718;
}

.mypage-wrap .table-wrap {
    text-align: center;
    border: 0;
}

.mypage-wrap .table-wrap .table-style04 {
    border: 0;
    border-bottom: 1px solid #e1e1e1;
}

.mypage-wrap .table-wrap th {
    font-size: 14px;
    border-color: #333;
}

.mypage-wrap .table-wrap td {
    font-size: 14px;
}

.mypage-wrap .table-wrap .title {
    display: block;
    width: 240px;
    text-align: left;
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
}

.mypage-wrap .box01 .button-wrap {
    justify-content: flex-end;
    margin-top: 20px;
}

.mypage-wrap .box01 .button-wrap a {
    font-size: 16px;
    border-radius: 4px;
}

.mypage-wrap .box01 .table-style04 {
    width: 100%;
}

.benefit-area ul {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    padding: 30px 0;
}

.benefit-area ul .item {
    width: 33%;
    margin: 0 24px;
    justify-content: center;
}

.benefit-area ul .item {
    margin: 0 24px;
}

.benefit-area ul .item .icon {
    width: 95px;
    height: 95px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
}

.benefit-area ul .item .text-area {
    text-align: center;
}

.benefit-area ul .item .text-area .text01 {
    margin-bottom: 8px;
    font-size: 23px;
}

.benefit-area ul .item .text-area .text02 {
    width: auto;
    min-width: 65px;
    padding: 0 12px;
    color: #fff;
    font-size: 14px;
}

/* 230922 kmh 수정 */
.benefit-area ul .item-coupon .icon {
    background: #0d6efd url('../img/icon-coupon.svg') no-repeat center / auto;
}

.benefit-area ul .item-coupon .badge {
    background: #0d6efd;
}

.benefit-area ul .item-gift .icon {
    background: #5597ff url('../img/icon-gift.svg') no-repeat center / auto;
}

.benefit-area ul .item-gift .badge {
    background: #5597ff;
}

.benefit-area ul .item-ticket .icon {
    background: #0dcaf0 url('../img/icon-ticket02.svg') no-repeat center / auto;
}

.benefit-area ul .item-ticket .badge {
    background: #0dcaf0;
}

.benefit-area ul .item-ticket .text01 span {
    color: #0dcaf0;
}

.mypage-wrap .box03 {
}

.mypage-wrap .box03 .title03 .badge {
    font-size: 14px;
}

.mypage-wrap .box03 .title03 .bg-org02 {
    background: #ffe7c8;
}

.mypage-wrap .box03 .title03 .text-org {
    color: #f69920;
}

.mypage-wrap .box03 .button-wrap {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mypage-wrap .box03 .button-wrap a {
    flex: 1;
    padding: 12px;
    margin: 0 10px 10px 0;
    font-size: 16px;
    text-align: center;
    border-radius: 5px;
}

.mypage-wrap .box03 .button-wrap a.btn-style04 {
    border: 1px solid #5597ff;
}

.mypage-wrap .box03 .button-wrap a.btn-guide {
    flex: auto;
    width: 100%;
}

.mypage-wrap .box03 .button-wrap a.btn-guide02,
.mypage-wrap .box03 .button-wrap a.btn-retake {
    flex: auto;
    width: calc(50% - 10px);
}

.mypage-wrap .box03 .lecture {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-start;
    align-itmes: flex-start;
    width: 100%;
    margin-bottom: 20px;
}

.mypage-wrap .box03 .lecture .book-thum,
.mypage-wrap .lecture-details .book-thum {
    width: 128px;
    height: 105px;
    margin-right: 20px;
    border: 1px solid #f1f1f1;
    border-radius: 5px;
}

.mypage-wrap .box03 .lecture .text-area {
}

.mypage-wrap .box03 .lecture .text-area .title {
    margin-bottom: 16px;
    font-size: 26px;
}

.mypage-wrap .box03 .lecture .text-area dl {
    margin-bottom: 10px;
}

.mypage-wrap .box03 .lecture .text-area dt {
    float: left;
    margin-right: 16px;
    font-weight: bold;
}

.mypage-wrap .box03 .details {
    justify-content: space-between;
    align-items: center;
}

.mypage-wrap .box03 .details a {
}

.mypage-wrap .box03 .details .arrow-org {
    width: 24px;
    height: 24px;
    margin-left: 12px;
}

.mypage-wrap .box04 .title03 .tip-text {
    display: inline-block;
    font-size: 16px;
    font-weight: normal;
    vertical-align: middle;
}

.mypage-wrap .box04 .progress {
}

.mypage-wrap .box04 .progress h4 {
    margin-bottom: 20px;
}

.mypage-wrap .progress ul {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: space-between;
    margin-bottom: 80px;
}

.mypage-wrap .progress ul .item p {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    vertical-align: middle;
}

.mypage-wrap .progress ul .item .circle {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-left: 12px;
    font-size: 15px;
    text-align: center;
    border-radius: 50%;
    background: #f1f1f1;
}

.mypage-wrap .progress ul .item .circle01 {
    color: #0d6efd;
    background: #bad4ff;
}

.mypage-wrap .progress ul .item .circle02 {
    color: #fe6555;
    background: #ffccc7;
}

.mypage-wrap .progress ul .item .circle03 {
}

.mypage-wrap .progress ul .item .circle04 {
    color: #f69920;
    background: #ffe7c8;
}

.mypage-wrap .progress ul .item .circle05 {
    background: #d4fff2;
}

.progress-bar {
    position: relative;
}

#progress {
    width: 100%;
    height: 30px;
    appearance: none;
}

#progress::-webkit-progress-bar {
    width: 100%;
    border-radius: 30px;
    background: #f1f1f1;
    box-shadow: inset 3px 3px 10px #ccc;
}

#progress::-webkit-progress-value {
    border-radius: 30px;
    background: #cd1618;
    background: -webkit-linear-gradient(to right, #f69920, #cd1618);
    background: linear-gradient(to right, #f69920, #cd1618);
}

.progress-number {
    position: absolute;
    left: 0;
    top: -35px;
    padding: 4px 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 300;
    border-radius: 3px;
    background-color: #525961;
}

.progress-number::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 10%;
    border-top: 5px solid #525961;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    transform: translateX(-50%);
}

.mypage-wrap .talkto {
    justify-content: space-between;
    align-items: center;
}

.mypage-wrap .talkto .text {
}

.mypage-wrap .talkto .text * {
    display: inline-block;
    vertical-align: middle;
}

.mypage-wrap .talkto .text h4 {
    margin: 0 20px 0 20px;
}

.mypage-wrap .end-lecture {
    position: relative;
}

.mypage-wrap .end-lecture:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    clear: both;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10;
    pointer-events: none;
}

.mypage-wrap .lecture-details {
    width: 100%;
}

.mypage-wrap .lecture-details .title03 {
    width: 100%;
    margin-bottom: 30px;
}

.mypage-wrap .lecture-details .book-thum {
    margin: 0 0 20px 0;
}

.mypage-wrap .lecture-details .box05 {
    width: 128px;
    padding: 0;
    box-sizing: border-box;
}

.mypage-wrap .lecture-details .box05 .button-wrap {
    flex-direction: column;
    justify-content: flex-start;
}

.mypage-wrap .lecture-details .box05 .button-wrap a {
    flex: 1;
    width: 128px;
    height: 35px;
    line-height: 35px;
    padding: 0;
    margin: 0 0 10px 0;
    text-align: center;
    border: 1px solid #5597ff;
    box-sizing: border-box;
}

.mypage-wrap .lecture-details .box06 {
    flex: 1;
    padding-left: 40px;
    padding-right: 0;
}

.mypage-wrap .lecture-info {
}

.mypage-wrap .lecture-info .lecture-name {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-start;
    align-items: center;
}

.mypage-wrap .lecture-info .lecture-name a {
    margin-left: 8px;
}

.mypage-wrap .lecture-info .list-area {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #e8f1ff;
}

.mypage-wrap .lecture-info .list-area dl {
    width: 50%;
    margin-bottom: 12px;
    font-size: 16px;
}

.mypage-wrap .lecture-info .list-area dl.full {
    width: 100%;
}

.mypage-wrap .lecture-info .list-area dt {
    display: inline-block;
    width: 90px;
    font-weight: 600;
    vertical-align: middle;
}

.mypage-wrap .lecture-info .list-area .field-tooltip {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.mypage-wrap .lecture-info .list-area .arrow-right,
.click-tooltip .arrow-right {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 0;
    transform: rotate(0);
    margin: 0 0 0 8px;
    background-image: url(../img/icon_arrow_white.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
}

.mypage-wrap .lecture-info .list-area dd {
    display: inline-block;
    vertical-align: middle;
}

.mypage-wrap .lecture-info .list-area dd.input-area > * {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
    float: left;
    height: 35px;
    margin-right: 8px;
}

.mypage-wrap .lecture-info .state-area {
    padding: 20px 0;
}

.mypage-wrap .charge-tt {
    width: 650px;
}

.mypage-wrap .charge-tt .tea-intd {
    width: 100%;
    margin-bottom: 20px;
}

.mypage-wrap .charge-tt .tea-intd .thum-area {
    float: left;
    width: 100px;
}

.mypage-wrap .charge-tt .tea-intd .thum {
    width: 100%;
    height: 130px;
    margin-bottom: 12px;
    background: #ccc;
}

.mypage-wrap .charge-tt .tea-intd .thum img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.mypage-wrap .charge-tt .tea-intd .name {
}

.mypage-wrap .charge-tt .tea-intd .bubble {
    float: left;
    width: calc(100% - 100px);
    padding-left: 20px;
    text-align: left;
}

.mypage-wrap .charge-tt .tea-intd .bubble p {
}

.mypage-wrap .charge-tt .tt-grade {
    width: 100%;
}

.mypage-wrap .charge-tt .tt-grade .item {
    float: left;
    width: 50%;
    padding-right: 20px;
    text-align: left;
}

.mypage-wrap .charge-tt .tt-grade .item:last-of-type {
    padding-right: 0;
}

.mypage-wrap .charge-tt .tt-grade .item dt {
    display: block;
    line-height: 34px;
    margin-bottom: 12px;
    font-size: 17px;
}

.mypage-wrap .charge-tt .tt-grade .item dt:after {
    content: '';
    clear: both;
    display: block;
    width: 30px;
    height: 3px;
    background: #fe6555;
}

.mypage-wrap .charge-tt .tt-grade .item dd {
    display: block;
    font-size: 14px;
}

.mypage-wrap .charge-tt .tt-grade .item dd p {
    margin-bottom: 8px;
}

.mypage-wrap .lecture-info .manager-tt {
    width: 600px;
}

.mypage-wrap .lecture-info .manager-tt p {
    margin-bottom: 20px;
}

.mypage-wrap .lecture-info .manager-tt dl {
    width: 100%;
    font-size: 14px;
    text-align: left;
}

.mypage-wrap .lecture-info .manager-tt dl dt {
    float: left;
}

.mypage-wrap .lecture-info .manager-tt dl dt span {
    display: block;
    padding-left: 28px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: normal;
    opacity: 0.8;
}

.mypage-wrap .lecture-info .manager-tt dl dt .ico-headphone {
    background: url('../img/icon-headphone.svg') 0 no-repeat center / contain;
}

.mypage-wrap .lecture-info .manager-tt dl dt .ico-study {
    background: url('../img/icon-study.svg') 0 no-repeat center / contain;
}

.mypage-wrap .lecture-info .manager-tt dl dd {
    float: left;
    padding-left: 20px;
}

.mypage-wrap .lecture-info .manager-tt dl dd p {
    margin-bottom: 8px;
}

.mypage-wrap .state-area dt {
    position: relative;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
}

.mypage-wrap .state-area dt:after {
    content: '';
    clear: both;
    display: block;
    width: 30px;
    height: 2px;
    margin-top: 4px;
    background: #5597ff;
}

.mypage-wrap .state-area .progress ul .item {
    margin-right: 8px;
}

.mypage-wrap .state-area .progress ul .item .field-tooltip {
    display: inline-block;
}

.mypage-wrap .state-area .progress ul .item .circle {
    margin-left: 4px;
}

.mypage-wrap .state-area .progress ul .item .circle04 {
    text-decoration: underline;
}

.mypage-wrap .state-area .progress ul .item p {
    font-size: 14px;
}

.mypage-wrap .state-area .progress ul.full {
    display: block;
}

.mypage-wrap .state-area .progress ul.full li {
    margin-bottom: 4px;
}

.mypage-wrap .ticket-state {
    flex: 1;
    padding-left: 20px;
}

.mypage-wrap .ticket-state .btn-ticket {
    color: #d63384;
    font-size: 14px;
    text-align: center;
    border: 1px solid #d63384;
}

.mypage-wrap .ticket-state .icon-ticket {
    background: url('../img/icon-ticket03.svg') no-repeat center / 20px;
}

.mypage-wrap .ticket-state .arrow {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 0 0 8px;
    border: 0;
    border-radius: 50%;
    background: url('../img/icon_arrow_white.svg') no-repeat center / 12px;
    transform: rotate(0);
    vertical-align: middle;
}

.mypage-wrap .ticket-state dd p,
.mypage-wrap .ticket-state dd .field-tooltip {
    float: left;
    line-height: 35px;
}

.mypage-wrap .ticket-state dd .field-tooltip {
    margin: 0 8px;
}

.mypage-wrap .attend-state .progress ul {
    margin-bottom: 0;
}

.mypage-wrap .delay-state {
    flex: 1;
    padding-left: 20px;
}

.mypage-wrap .delay-state dd {
    position: relative;
    padding: 0 150px 0 0;
}

.mypage-wrap .delay-state .text,
.mypage-wrap .delay-state .text em {
    font-weight: 600;
}

.mypage-wrap .delay-state .noti {
    margin-top: 6px;
    font-size: 12px;
}

.mypage-wrap .delay-state .btn-schedule {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    width: 150px;
    height: 33px;
    line-height: 31px;
    color: #fe6555;
    font-size: 14px;
    text-align: center;
    border: 1px solid #fe6555;
    border-radius: 5px;
}

.mypage-wrap .attend-state {
}

.attention-box.row {
    flex-direction: column;
    padding: 50px;
}

.attention-box .title03 {
    display: block;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #0d6efd;
}

.attention-box .state-area {
    padding: 30px 0;
}

.attention-box .state-area .text01 {
    margin-bottom: 16px;
}

.attention-box .state-area li {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 12px;
}

.attention-box .state-area li .badge {
    width: 80px;
    padding: 0 15px;
    margin-right: 20px;
}

.attention-box .state-area li .text {
    font-size: 16px;
}

.attention-box h4.text01 {
    margin-bottom: 30px;
}

#calendar-wrap .button {
    position: absolute;
    top: 30px;
    right: 0;
}

#calendar-wrap .button .btn-ticket {
    padding: 8px 24px;
    margin: 0;
    color: #d63384;
    font-size: 16px;
    text-align: center;
    border: 1px solid #d63384;
    border-radius: 5px;
    background: #fff;
}

.open-bubble {
    position: relative;
}

.tip-open {
}

.click-tooltip {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    width: 280px;
    padding: 20px;
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.09);
    transform: translateX(-50%);
    z-index: 100;
}

.click-tooltip:after {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    margin: 0 auto;
    border: 10px solid transparent;
    border-bottom: 10px solid #fff;
    transform: translateX(-50%);
}

.click-tooltip a {
    display: block;
    margin: 20px 0 10px 0;
}

/* 프로그램 학습 */
.mypage-wrap .row .box.full {
    width: 100%;
}

.mypage-wrap .program-learn .list-item .unit {
    width: 10%;
}

.mypage-wrap .program-learn .list-item .title {
    width: 60%;
}

.mypage-wrap .program-learn .list-item .study,
.mypage-wrap .program-learn .list-item .score {
    width: 15%;
}

.mypage-wrap .program-learn .list-item .score .btn-type06,
.mypage-wrap .program-learn .list-item .study .btn-type06 {
    width: 80px;
    height: 30px;
    line-height: 30px;
    padding: 0;
}

/* 학습현황 */
.mypage-wrap .study-state {
    flex-direction: column;
    width: 100%;
}

.mypage-wrap .study-state .box {
    padding: 0;
    margin-bottom: 20px;
}

.mypage-wrap .study-state .box01 > div {
    justify-content: space-between;
    width: 100%;
}

.mypage-wrap .study-state .box01 .top-info {
    margin-bottom: 50px;
}

.mypage-wrap .study-state .box01 .bot-info dt {
    margin-bottom: 12px;
}

.mypage-wrap .study-state .box01 .bot-info dt a {
    width: 80px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    text-align: center;
    border: 1px solid #5597ff;
}

.mypage-wrap .study-state .box01 .bot-info dd {
    line-height: 1.6;
    font-size: 16px;
}

.mypage-wrap .study-state .box01 .bot-info dd .tit {
    display: inline-block;
    width: 80px;
    vertical-align: middle;
}

.mypage-wrap .study-state .box01 .bot-info .progress ul {
    margin-bottom: 0;
}

.mypage-wrap .study-state .box01 .bot-info .progress .item {
    margin: 0 10px;
    text-align: center;
}

.mypage-wrap .study-state .box01 .bot-info .progress .item .circle {
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 12px auto 0;
}

.mypage-wrap .study-state .box01 .bot-info .progress .item p {
    display: block;
}

.mypage-wrap .study-state .user-title {
    font-size: 21px;
}

.mypage-wrap .study-state .user-title .ico-note {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-right: 12px;
    border-radius: 50%;
    background: #0d6efd url('../img/ico-note.svg') no-repeat center / cover;
    vertical-align: middle;
}

.mypage-wrap .study-state .select-wrap p {
    display: inline-block;
    margin-right: 12px;
    font-size: 16px;
    font-weight: 550;
    vertical-align: middle;
}

.mypage-wrap .study-state .select-wrap select {
    width: 220px;
}

.mypage-wrap .study-state .box02 {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: center;
    min-height: 240px;
    padding: 40px;
    margin-bottom: 30px;
    font-size: 18px;
    border-radius: 10px;
    background: #f7f7f7;
}

.mypage-wrap .study-state .box03 {
    padding: 40px;
    margin-bottom: 30px;
    border-radius: 10px;
    background: #f7f7f7;
}

.mypage-wrap .study-state .result-detail {
    margin-bottom: 0;
}

.mypage-wrap .study-state .result-detail-left {
}

.mypage-wrap .study-state .result-detail-right {
    width: 650px;
}

.mypage-wrap .study-state .result-summary,
.mypage-wrap .study-state .comment-inbox {
    padding: 0;
    border: 0;
    background: transparent;
}

/* 학습 이용가이드 */
.std-guide .caution-area {
    padding: 20px;
    margin-top: 0;
    margin-bottom: 50px;
    border-radius: 10px;
}

.std-guide .caution-area .bar-list li {
    color: #232323;
}

.std-guide .guide-box {
    margin-bottom: 70px;
}

.std-guide .guide-box:last-of-type {
    margin-bottom: 0;
}

.std-guide .guide-box h4 {
    margin-bottom: 30px;
    font-size: 21px;
}

.std-guide .guide-box .device-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.std-guide .guide-box .device-item:after {
    display: none;
}

.std-guide .guide-box .device-item dt {
    margin-bottom: 12px;
}

.std-guide .guide-box .device-item dd:after {
    content: '';
    clear: both;
    display: block;
}

.std-guide .guide-box .device-item dd .img {
    float: left;
    margin: 0 20px 0 0;
}

.std-guide .guide-box .device-item dd .img p {
    margin: 16px 0 0 0;
}

.std-guide .guide-box .device-item dt p {
    line-height: 1.6;
}

.std-guide .guide-box .device-item dd p {
    font-size: 14px;
}

.std-guide .guide-box .in-box {
    margin: 20px 0;
}

.std-guide .guide-box .in-box dl {
    float: left;
    width: calc(100% / 2 - 40px);
    margin-right: 40px;
}

.std-guide .guide-box .in-box dt h5 {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    text-align: center;
    background: #a5c6ff;
}

.std-guide .guide-box .in-box dd {
    display: table;
    width: 100%;
    height: 130px;
    padding: 20px 14px;
    text-align: center;
}

.std-guide .guide-box .in-box dd p {
    display: table-cell;
    font-size: 13px;
    vertical-align: middle;
}

.std-guide .guide-box .pc-process {
}

.std-guide .guide-box .pc-process .step {
}

.std-guide .guide-box .pc-process .step dt {
    width: 100%;
    margin-bottom: 30px;
}

.std-guide .guide-box .pc-process .step dd > div {
    display: table;
    padding: 20px;
    margin-right: 100px;
    border-radius: 5px;
    background: #f3f8ff;
}

.std-guide .guide-box .pc-process .step dd > div:last-of-type {
    flex: 1;
    margin-right: 0;
}

.std-guide .guide-box .pc-process .step dd > div p {
    display: table-cell;
    vertical-align: middle;
}

.mypage-wrap .service-an {
    flex-direction: column;
}

.mypage-wrap .service-an .box {
    margin-bottom: 40px;
}

.mypage-wrap .service-an .box .title03:after {
    content: '';
    clear: both;
    display: block;
    width: 30px;
    height: 5px;
    margin-top: 12px;
    background: #5597ff;
}

.mypage-wrap .service-an .box:last-of-type {
    margin-bottom: 0;
}

.mypage-wrap .service-an p {
    line-height: 1.6;
    font-size: 16px;
}

.mypage-wrap .service-an .button-wrap {
    margin-bottom: 10px;
    justify-content: flex-start;
}

.mypage-wrap .service-an .btn-faq {
    font-size: 19px;
    border-radius: 5px;
}

.mypage-wrap .service-an .tip-text {
    font-size: 14px;
}

/*=================================================================================
* 마이페이지 - 학습강의실 본학습
=================================================================================*/
.class-start {
}

.class-start .start-prc {
    margin-bottom: 80px;
}

.class-start .start-prc .box {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    width: 100%;
}

.class-start .start-prc .item {
    position: relative;
    padding-right: 80px;
    margin-right: 80px;
}

.class-start .start-prc .item:last-of-type {
    padding-right: 0;
    margin-right: 0;
}

.class-start .start-prc .item:after,
.class-start .start-prc .item:before {
    content: '';
    position: absolute;
    top: 5px;
    right: 0;
    clear: both;
    display: block;
    width: 3px;
    height: 32px;
    background: #ccc;
}

.class-start .start-prc .item:before {
    top: 26px;
    transform: rotate(45deg);
}

.class-start .start-prc .item:after {
    transform: rotate(-45deg);
}

.class-start .start-prc .item:last-of-type::before,
.class-start .start-prc .item:last-of-type::after {
    display: none;
}

.class-start .start-prc .item .icon {
    justify-content: center;
    align-items: center;
    float: left;
    width: 74px;
    height: 74px;
    line-height: 74px;
    margin-right: 30px;
    text-align: center;
    border-radius: 50%;
    background: #0d6efd;
}

.class-start .start-prc .item .icon.off {
    background: #e1e1e1;
}

.class-start .start-prc .item .icon img {
    max-width: 90%;
}

.class-start .start-prc .item dd {
    float: left;
    text-align: left;
}

.class-start .start-prc .item dd .badge {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 12px;
}

.class-start .start-prc .item dd .text02 {
    font-size: 21px;
}

.class-start .title03 {
    margin-bottom: 16px;
    font-weight: 600;
}

.class-start .title03 span {
    font-size: 0.75em;
    font-weight: 600;
}

.class-start .title03 span em {
    font-weight: 600;
}

.class-start .book-info {
    width: 100%;
}

.class-start .book-info .title-area {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
}

.class-start .book-info .book-btn {
}

.class-start .book-info h4 {
    margin-bottom: 20px;
}

.class-start .book-info .book-thum {
    width: 128px;
    height: 128px;
    margin-right: 20px;
    border-radius: 10px;
    overflow: hidden;
}

.class-start .book-info .book-thum img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.class-start .book-info .book-text .btn-start {
    display: block;
    width: 90px;
    height: 90px;
    color: #f76718;
    text-align: center;
    border: 1px solid #f76718;
    border-radius: 5px;
    background: #fff url(../img/icon-click.svg) center 70% no-repeat;
}

.class-start .book-info .book-text .btn-start span {
    display: block;
    padding-top: 12px;
}

.class-start .book-info .book-text .unit {
    margin-bottom: 10px;
}

.class-start .book-info .book-text dl {
    padding: 20px 20px 0 0;
    margin-right: 40px;
}

.class-start .book-info .book-text dl dd .text03 {
    line-height: 1.2;
    margin-bottom: 4px;
}

.class-start .book-info .book-text dl .btn-type06 {
    display: block;
    min-width: 100px;
    margin: 0 0 12px 0;
    text-align: center;
}

.class-start .book-info .book-text dl .btn-type06 .arrow {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('../img/icon_arrow_org.svg') no-repeat center / 16px;
    vertical-align: middle;
}

.class-start .view-area {
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 500px;
}

.class-start .view-area .text02 {
    font-weight: 400;
}

.class-start .title03.bubble-review {
    position: relative;
}

.class-start .title03.bubble-review:after {
    content: '선생님이 남겨주신 피드백으로 오류를 바로 잡아 배운 내용을 내 것으로 만듭니다.';
    position: absolute;
    top: 0;
    left: 200px;
    clear: both;
    display: block;
    padding: 12px 20px;
    color: #f76718;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    border-radius: 5px;
    background: #fff;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.05);
}

.class-start .title03.bubble-review.prep:after {
    content: '수업 전 핵심 단어를 알고 문장에 적용해봅니다.';
}

.class-start .title03.bubble-review.prep-conv:after {
    content: '수업 전 핵심 회화를 큰 소리로 따라 읽어봅니다.';
}

.class-start .title03.bubble-review.prep-quiz:after {
    content: '마무리 퀴즈를 통해 최종 나의 학습 상태를 확인합니다.';
}

.class-start .title03.bubble-review:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 184px;
    clear: both;
    display: block;
    width: 0;
    height: 0;
    margin-top: -8px;
    border: 8px solid;
    border-color: #fff transparent transparent transparent;
    transform: rotate(90deg);
}

.class-start .star-rate {
    left: 0;
    width: 180px;
    padding: 30px 0 20px;
    border: 1px solid #e8e8e8;
    transform: translateX(0);
}

.class-start .star-rate .button-wrap {
    margin-bottom: 0;
}

.class-start .star-rate .button-wrap a {
    margin: 0 auto !important;
}

.class-start .star-rate .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
}

.class-start .star-rate .close-button a {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0;
    background: transparent url('../img/pop_close.svg') no-repeat center / 16px;
}

.click-tooltip {
    margin: 10px 0 0 0;
}

.click-tooltip p.fs16 {
    font-size: 1.1em;
}

/* 복습 피드백 */
.class-feedback {
    width: 100%;
}

.class-feedback .title03 {
    margin-bottom: 40px;
    text-align: center;
}

.class-feedback .box {
    position: relative;
    width: 100%;
    padding: 60px 20px 30px;
    margin-bottom: 70px;
    font-size: 16px;
    border-radius: 5px;
}

.class-feedback .box01 {
    padding-top: 30px;
    padding-right: 180px;
}

.class-feedback .box04,
.class-feedback .box05 {
    padding-right: 200px;
}

.class-feedback .box .float-img {
    position: absolute;
}

.class-feedback .box01 .float-img {
    bottom: -5px;
    right: 0;
}

.class-feedback .box02 .float-img {
    bottom: -110px;
    left: 10px;
}

.class-feedback .box05 .float-img {
    bottom: -45px;
    right: 10px;
}

.class-feedback .box.triangle:after {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    display: block;
    margin: 0 auto;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom: 10px solid #ebf3ff;
    transform: translateX(-50%);
}

.class-feedback h4.round {
    width: 270px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    border-radius: 50px;
}

.class-feedback .half-box {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: flex-start;
}

.class-feedback .half-box .box {
    padding: 50px 20px;
    margin-right: 40px;
}

.class-feedback .half-box .box p {
    margin-bottom: 8px;
    text-align: left;
}

.class-feedback .half-box .box:last-of-type {
    margin-right: 0;
}

.class-feedback .box h4.round {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
}

.class-feedback .box04 h4.round,
.class-feedback .box05 h4.round {
    left: 0;
    transform: translateX(10%);
}

.class-start .book-btn {
}

.class-start .book-btn a {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 12px;
    margin: 0;
    color: #0d6efd;
    font-size: 16px;
    text-align: center;
    border-radius: 5px;
    border-color: #1489ff;
    box-sizing: border-box;
}

.class-start .book-btn a.tip-open {
    color: #fff;
    background: #1489ff;
}

.class-start .book-btn02 {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex; /*float:left;width:calc(50% - 4px);*/
}

.class-start .book-btn02 > a,
.class-start .book-btn02 .open-bubble {
    width: calc(50% - 4px);
}

.class-start .book-btn02 .open-bubble {
    margin-left: 8px;
}

.class-start .book-btn .btn-arrow-only {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 0;
    margin-left: 16px;
    border: 0;
    background: transparent url('../img/icon_arrow_white.svg') 0 0 no-repeat;
    transform: rotate(90deg);
    vertical-align: middle;
}

.class-start .all-feedback {
    position: absolute;
    top: 60px;
    right: 0px;
    width: 350px;
    height: 230px;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    overflow-y: scroll;
}

.class-start .all-feedback.h180 {
    height: 180px;
}

.class-start .all-feedback.open-defult {
    display: block !important;
    height: 176px;
}

.class-start h5 {
    padding: 12px 20px;
}

.class-start .all-feedback ul {
}

.class-start .all-feedback .feed-item {
    font-size: 14px;
    border-bottom: 1px solid #e2e8f2;
}

.class-start .all-feedback .feed-item:last-child {
    border-bottom: 0;
}

.class-start .all-feedback .feed-item a {
    display: block;
    width: 100%;
    height: auto;
    line-height: 1.2;
    padding: 12px 8px;
    margin-right: 0;
    font-size: 14px;
    text-align: left;
    border-radius: 0;
}

.class-start .all-feedback .feed-item:hover a {
    color: #0d6efd;
    background: #ebf3ff;
}

.class-start .all-feedback .feed-item .date {
    display: inline-block;
    width: 90px;
    vertical-align: middle;
}

.mypage-wrap .row.bg-none {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.mypage-wrap .row.both-box .box {
    width: auto;
    padding: 30px 25px;
    border-radius: 10px;
    background: #fff;
}

.mypage-wrap .row.both-box .book-info.box {
    width: 710px;
    margin-right: 20px;
}

.mypage-wrap .row.both-box .book-info.box .flex {
    position: relative;
}

.mypage-wrap .row.both-box .book-info.box .btn-chat {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 120px;
    height: 120px;
    padding: 72px 0 0;
    color: #858585;
    font-size: 16px;
    letter-spacing: -1px;
    text-align: center;
    border-radius: 50%;
    background: #f3f6fb url('../img/icon-chat.png') 50% 27px no-repeat;
    box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.1);
}

.mypage-wrap .row.both-box .box.book-btn-wrap {
    width: 350px;
    padding: 0;
    background: transparent;
}

/* 예습 */
.class-start .book-info .book-text .select-wrap select {
    width: 100%;
}

.class-start .word-area .box {
    width: 100%;
    padding: 0;
}

.class-start .word-area .title-area {
    margin-bottom: 20px;
}

.class-start .word-area .btn-frc,
.class-start .word-area .btn-select {
    padding: 13px 30px;
    margin-right: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #777;
    border-radius: 5px;
    background-color: #999;
}

.class-start .word-area .btn-select {
    width: 240px;
    padding: 0 0 0 30px;
    text-indent: 0;
    text-align-last: left;
}

.class-start .word-area .btn-frc.active,
.class-start .word-area .btn-frc:hover,
.class-start .word-area .btn-select:focus,
.class-start .word-area .btn-select:active,
.class-start .word-area .btn-select.active {
    border: 1px solid #d95041;
    background-color: #fe6555;
}

.class-start .word-area .button-wrap {
    justify-content: flex-start;
}

.class-start .book-text .button-wrap a.active {
    color: #fff;
    border-color: #595967;
    background: #595967;
}

.class-start .book-text .button-wrap a .ico-sound {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0 auto;
    background: url('../img/icon-sound.svg') no-repeat 0 -54px / 18px;
    vertical-align: middle;
}

.sub-contents .mypage-wrap .talksBoxWrap .tIconWrap {
    display: none;
}

.sub-contents .mypage-wrap .talksBoxWrap.add_icon .tIconWrap {
    display: table-cell;
}

.sub-contents .mypage-wrap .talksBoxWrap div.btn_listen {
    position: absolute;
    top: 37%;
    display: inline-block;
    width: 60px;
    text-align: right;
    vertical-align: middle;
}

.sub-contents .mypage-wrap .talksBoxWrap div.btn_listen button {
    width: 35px;
    height: 35px;
    color: transparent;
    font-size: 0;
    text-indent: -9999px;
    background: transparent url('../img/listen_off.png') no-repeat center / auto;
    vertical-align: middle;
}

.sub-contents .mypage-wrap .talksBoxWrap div.btn_listen button:hover,
.sub-contents .mypage-wrap .talksBoxWrap div.btn_listen button.active {
    background-image: url('../img/listen_on.png');
}

.sub-contents .mypage-wrap .talksBoxWrap.active {
    border-color: #ebdfcd;
    background-color: #fff9e2;
}

.sub-contents .mypage-wrap .talksBoxWrap.active .txt:after {
    background-color: #ebdfcd;
}

.sub-contents .mypage-wrap .talksBoxWrap.add_icon.active .txt:before {
    background-color: #ebdfcd;
}

/*=================================================================================
* 공지사항
=================================================================================*/
.notice-wrap .row,
.event-wrap .row.event-area,
.row.bg-fff {
    width: 100%;
    padding: 50px 25px;
    margin-bottom: 30px;
    border-radius: 10px;
    background: #fff;
}

.notice-wrap .inner {
    padding-top: 80px;
}

.notice-wrap .board-search select {
    width: 100px;
    min-width: auto;
}

.notice-wrap .title03,
.event-wrap .title03 {
    margin-bottom: 20px;
}

.board-title {
    margin-bottom: 20px;
}

.board-list {
    width: 100%;
}

.board-list .list-item {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    align-items: center;
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #ccc;
}

.board-list .list-item.first {
    border-top: 1px solid #131313;
    border-bottom: 2px solid #131313;
}

.board-list .list-item.first p {
    font-weight: bold;
}

.board-list .list-item.fixed {
}

.board-list .list-item > div {
    text-align: center;
}

.board-list .list-item > div p {
    font-size: 16px;
}

.board-list .list-item .number {
    width: 10%;
    text-align: center;
}

.board-list .list-item .number .new {
    width: 50px;
    line-height: 1.2;
    padding: 6px 0;
    margin: 0 auto;
    color: #f76718;
    font-size: 12px;
    border-radius: 30px;
    border: 1px solid #f76718;
}

.board-list .list-item .title {
    width: 70%;
    text-align: left;
}

.board-list .list-item .title a {
    display: block;
    font-size: 16px;
}

.board-list .list-item.first .title {
    text-align: center;
}

.board-list .list-item .date {
    width: 20%;
}

.view-area {
    width: 100%;
}

.view-area .view-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 20px 20px;
    border-bottom: 2px solid #131313;
}

.view-area .view-top .title {
    font-size: 20px;
    font-weight: bold;
}

.view-area .view-top .info {
    color: #999;
    font-size: 14px;
}

.view-area .view-top .info span {
    margin: 0 8px;
}

.view-area .view-cont {
    width: 980px;
    min-height: 500px;
    padding: 50px 0;
    margin: 0 auto 50px;
    font-size: 16px;
    border-bottom: 1px solid #f1f1f1;
}

.view-area .view-cont img {
    width: 100%;
}

.view-area .view-foot {
}

.event-area .view-area {
    position: relative;
}

.event-area .view-area img {
    vertical-align: top;
}

.event-area .view-area .notice {
    padding: 60px;
    color: #fff;
    text-align: left;
    background: #303030;
}

.event-area .view-area .notice h3 {
    padding-bottom: 25px;
    margin-bottom: 25px;
    color: #fff;
    font-size: 27px;
    font-weight: bold;
    border-bottom: 1px solid #6f6f6f;
}

.event-area .view-area .notice ul {
}

.event-area .view-area .notice li {
    position: relative;
    line-height: 1.5;
    padding-left: 10px;
    margin-bottom: 3px;
    font-size: 18px;
    color: #fff;
    text-indent: -10px;
    word-break: keep-all;
}

/*=================================================================================
* 이벤트
=================================================================================*/
.event-wrap .inner {
    padding: 80px 0;
}

.event-wrap .row {
}

.event-wrap .board-search select {
    width: 100px;
}

.event-wrap .tabs {
    margin: 30px 0 20px;
}

.event-wrap #tab-links {
    justify-content: flex-start;
}

.event-wrap .tabs .tab-link {
    flex-basis: auto;
    flex: none;
}

.event-wrap .tabs .tab-link a {
    padding: 0 20px;
}

.event-list {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.event-list .event-item {
    flex: 1;
    padding: 20px;
    margin: 0 20px 20px 0;
    background: #fff;
}

.event-list .event-item:nth-of-type(2n) {
    margin-right: 0;
}

.event-list .event-item .thumbnail {
    width: 490px;
    height: 230px;
    margin-bottom: 20px;
    border-radius: 5px;
    background: #ccc;
    overflow: hidden;
}

.event-list .event-item .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-list .event-item .info {
}

.event-list .event-item .info .sort {
    margin-bottom: 20px;
}

.event-list .event-item .info .sort span {
    margin-right: 8px;
    font-size: 14px;
    font-weight: 550;
}

.event-list .event-item .info .sort .tip {
    display: inline-block;
    padding: 4px 6px;
    color: #f76718;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    border: 1px solid #f76718;
    border-radius: 30px;
    vertical-align: middle;
}

.event-list .event-item .info .title {
    display: block;
    margin-bottom: 10px;
    font-size: 26px;
    font-weight: 550;
}

.event-list .event-item .info .date {
    color: #999;
}

/*=================================================================================
* FAQ
=================================================================================*/
.faq-wrap .inner {
    padding-top: 80px;
}

.faq-wrap .title03 {
    margin-bottom: 30px;
    font-weight: bold;
}

.faq-wrap .title-area {
    position: relative;
    margin-bottom: 60px;
}

.faq-wrap .board-search select {
    width: 100px;
    min-width: auto;
}

.faq-wrap .desc {
    font-size: 16px;
    font-weight: bold;
}

.faq-wrap .message-box {
    position: absolute;
    top: -20px;
    right: 0;
    width: 360px;
    padding: 20px;
    border: 1px solid rgba(85, 151, 255, 0.25);
    border-radius: 10px;
    background: #fff url('../img/img-messagebox.png') 90% 90% no-repeat;
    box-sizing: border-box;
}

.faq-wrap .message-box dl {
    margin-bottom: 4px;
}

.faq-wrap .message-box dl.first {
    margin-bottom: 30px;
}

.faq-wrap .message-box dl.first dt span {
    display: block;
}

.faq-wrap .message-box dl.first dt span:last-of-type {
    color: #131313;
    font-size: 18px;
    font-weight: 550;
}

.faq-wrap .message-box dl.first dd {
    font-size: 28px;
    font-weight: bold;
}

.faq-wrap .message-box dl dt {
    display: inline-block;
    width: 105px;
    color: #999;
    vertical-align: middle;
}

.faq-wrap .message-box dl dd {
    display: inline-block;
    vertical-align: middle;
}

/*=================================================================================
* Accordion Style
=================================================================================*/
.accordion {
    width: 100%;
    margin: 0 auto;
    border-top: 1px solid #111;
}

.accordion-header,
.accordion-body {
}

.accordion-header {
    padding: 30px 8px;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    transition: all 0.3s;
}

.accordion-header p {
    display: inline-block;
    vertical-align: middle;
}

.accordion-header p.sort {
    display: inline-block;
    width: 120px;
    margin: 0 20px 0 0;
    padding: 4px 6px;
    color: #f76718;
    font-size: 16px;
    font-weight: normal;
    border: 1px solid #f76718;
    border-radius: 30px;
    text-align: center;
    vertical-align: middle;
}

.accordion-header .accor-que {
    display: inline-block;
    margin-right: 8px;
    font-weight: 500;
    vertical-align: inherit;
}

.accordion__item {
}

.accordion-header:hover {
    position: relative;
    z-index: 5;
}

.accordion-body {
    display: none;
    background: rgb(251, 251, 251);
}

.accordion-body__contents {
    padding: 2em;
    font-size: 17px !important;
    font-weight: 500;
    background: #f8f8f8;
}

.accordion-body__contents p * {
    font-size: 17px !important;
    font-weight: 500;
}

.accordion__item > .accordion-header:after {
    content: '+';
    float: right;
    position: relative;
    top: -2px;
    font-size: 20px;
    transition: 0.3s all;
    transform: rotate(0deg);
}

.accordion__item.active > .accordion-header:after {
    content: '-';
    transform: rotate(-180deg);
}

.accordion__item.active .accordion-header {
    color: #131313;
}

.accordion__item .accordion__item .accordion-header {
    color: #353535;
    background: #f1f1f1;
}

/*=================================================================================
* 구매내역
=================================================================================*/
.order-page .title03 {
    margin-bottom: 16px;
}

.order-page .row {
    width: 100%;
    padding: 25px 50px;
    margin-bottom: 30px;
    border-radius: 10px;
    background: #fff;
}

.order-page .box01 {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: space-between;
    align-items: center;
}

.order-page .box01 .button-wrap {
    margin: 0;
}

.order-page .box02 h3 {
    position: relative;
    padding: 0 0 0 34px;
    margin-bottom: 20px;
}

.order-page .box02 h3 i {
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-size: 12px;
}

.order-page .box02 .monthly {
    margin-bottom: 20px;
}

.order-page .box02 .monthly .item {
    float: left;
    margin-right: 12px;
}

.order-page .box02 .monthly .item .btn {
    display: block;
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #d7d7d7;
    border-radius: 5px;
    background: #f7f7f7;
}

.order-page .box02 .monthly .item .btn.active {
    color: #fff;
    border-color: #fd3506;
    background: #fe6845;
}

.order-page .box02 .date-search {
}

.order-page .box02 .date-search li {
    float: left;
    line-height: 35px;
    padding-right: 10px;
    margin-right: 10px;
}

.order-page .box02 .date-search li select {
    width: 80px;
    height: 35px;
    line-height: 35px;
    margin-right: 4px;
}

.order-page .box02 .date-search li .btn-type06 {
    height: 35px;
    line-height: 35px;
    padding-top: 0;
    padding-bottom: 0;
    border: 1px solid #5597ff;
}

.order-page .box03 .list-item {
    line-height: auto;
}

.order-page .box03 .list-item > div p {
    line-height: 24px;
    font-size: 14px;
}

.order-page .box03 .list-item .col01 {
    width: 12.5%;
}

.order-page .box03 .list-item .col02 {
    width: 20%;
    line-height: 1.2;
}

.order-page .box03 .list-item .col01 .btn-type06 {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0;
}

.order-page .box03 .list-item .col01 a.title {
    display: block;
    width: 100%;
    line-height: 1.2;
    text-align: center;
}

.order-page .box03 .list-item .col01 a.title:hover {
    text-decoration: underline;
}

.order-page .order-title-box {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-bottom: 10px;
    margin: 50px auto 20px;
    font-size: 24px;
    border-bottom: 1px solid #e1e1e1;
}

.order-page .bg-none {
    padding: 25px 0;
    background: transparent;
}

.order-page .apply02-box .height276 {
    height: 276px;
}

/*=================================================================================
* 혜택조회 쿠폰
=================================================================================*/
.coupon-wrap {
}

.coupon-wrap > .inner {
    padding-top: 0;
}

.coupon-wrap .row {
    width: 100%;
    padding: 25px 50px;
    margin-bottom: 30px;
    border-radius: 10px;
    background: #fff;
}

.coupon-wrap .box01 .text03 .ico-coupon {
    display: inline-block;
    width: 50px;
    height: 30px;
    margin-right: 8px;
    background: url('../img/icon-coupon_b.svg') no-repeat center / contain;
    vertical-align: middle;
}

.coupon-wrap .box01 .text03 span {
    display: inline-block;
    margin: 0 8px;
    vertical-align: middle;
}

.coupon-wrap .box01 .board-search {
    border-top: 0;
}

.coupon-wrap .box01 .board-search ul {
    width: auto;
}

.coupon-wrap .box02 .board-list {
    margin-top: 16px;
}

.coupon-wrap .list-item {
}

.coupon-wrap .list-item > div {
    float: left;
    padding: 0 8px;
}

.coupon-wrap .list-item .col01 {
    width: 50px;
}

.coupon-wrap .list-item .col02 {
    width: 100px;
}

.coupon-wrap .list-item .col03 {
    width: 240px;
}

.coupon-wrap .list-item .col03 p {
    width: 100%;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

.coupon-wrap .list-item .col04 {
    width: 240px;
}

.coupon-wrap .list-item .col04 p {
    width: 100%;
    line-height: 1.2;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: keep-all;
}

.coupon-wrap .list-item .col05 {
    width: 240px;
}

.coupon-wrap .list-item .col06 {
    width: 120px;
}

.coupon-wrap .list-item > div p {
    line-height: auto;
    font-size: 14px;
}

.coupon-wrap .list-item.end p,
.coupon-wrap .list-item.end p span {
    color: #ccc !important;
}

.coupon-wrap .box03 {
    align-items: center;
}

.coupon-wrap .box03 .caution-area h4.text02:after {
    content: '';
    clear: both;
    display: block;
    width: 30px;
    height: 3px;
    margin: 12px 0;
    background: #0d6efd;
}

.coupon-wrap .box03 .img-area {
    margin-right: 20px;
}

.coupon-wrap .box04 h4 {
    margin-bottom: 24px;
    font-weight: bold;
}

.coupon-wrap .box04 .ticket-state {
}

.coupon-wrap .box04 .ticket-state li {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 12px;
    border-bottom: 1px solid #e1e1e1;
}

.coupon-wrap .box04 .ticket-state li p {
    font-size: 18px;
}

.coupon-wrap .tabs_wrapper ul.tabs li {
    line-height: 65px;
    font-size: 24px;
}

.coupon-wrap .box05 .title-area {
    margin-bottom: 24px;
}

.coupon-wrap .box05 .title-area h4 {
    float: left;
    line-height: 54px;
    font-weight: bold;
}

.coupon-wrap .box05 .title-area h4 span {
    display: inline-block;
    font-weight: normal;
    vertical-align: middle;
}

.coupon-wrap .box05 .title-area .btn-type04 {
    float: right;
}

.coupon-wrap .list-item.none-list p {
    width: 100%;
    text-align: center;
}

.coupon-wrap .box05 .board-list {
    border-top: 1px solid #000;
}

.coupon-wrap .box05 .list-item .col01 {
    width: 15%;
}

.coupon-wrap .box05 .list-item .col02 {
    width: 20%;
}

.coupon-wrap .box05 .list-item .col03 {
    width: 40%;
}

.coupon-wrap .box05 .list-item .col04 {
    width: 15%;
}

/*=================================================================================
* 팝업
=================================================================================*/
/* 이용약관 팝업 */
.pop_layer_box .terms h3 {
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center;
}

.pop_layer_box .terms h4 {
    margin-bottom: 12px;
    font-size: 19px;
}

.pop_layer_box .terms ul {
    margin-bottom: 30px;
}

.pop_layer_box .terms .text01 {
    font-size: 16px;
}

/* */

.retake-area {
    padding: 0 50px;
}

.retake-area .box {
    margin-bottom: 30px;
}

.retake-area .box .text03 {
    margin-bottom: 12px;
}

.retake-area .box .table-wrap {
    margin: 8px 0;
}

.retake-area .box .table-wrap td {
    padding: 0 8px;
}

.retake-area .box .table-wrap tr:last-of-type th {
    border-bottom: 0;
}

.retake-area .box .button-item {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 30px;
}

.retake-area .box .button-item .text01 {
    margin-bottom: 20px;
}

.retake-area .box .button-item a {
    margin: 0;
    font-size: 19px;
}

.retake-area .box .button-item a i {
    top: 50%;
    right: 20px;
    margin-top: -17px;
}

.retake-area .table-wrap th,
.retake-area .table-wrap td {
    padding: 0 12px;
}

.lecture-delay {
}

.lecture-delay .dl-box {
    padding: 25px 0;
    margin-bottom: 50px;
}

.lecture-delay .dl-box p {
    line-height: 1.6;
    font-size: 21px;
}

.lecture-delay .dl-box:first-of-type {
    padding: 12px 30px;
    border-radius: 80px;
    background: rgba(165, 198, 255, 0.3);
}

.lecture-delay .dl-box:first-of-type p {
    font-size: 32px;
    font-weight: bold;
}

.lecture-delay .dl-box .tip-text {
    margin: 0;
}

.lecture-delay .dl-box:last-of-type {
    border-top: 1px solid rgba(165, 198, 255, 0.3);
}

/* 수업 티켓 사용 팝업 */
.lecture-ticket .text01 {
    margin-bottom: 20px;
    font-size: 19px;
}

.lecture-ticket .text01 span {
    margin: 0 4px;
}

.lecture-ticket .text01 em {
    display: inline-block;
    margin-left: 8px;
    font-weight: 550;
    vertical-align: baseline;
}

.tabs .tab-line .tab-link a {
    color: #ccc;
    border: 0;
    border-bottom: 2px solid #ccc;
    border-radius: 0;
    background: #fff;
}

.tabs .tab-line .tab-link a.active {
    color: #cd1618;
    font-weight: 600;
    border-color: #cd1618;
}

.lecture-ticket .bar-list li {
    line-height: 1.2;
    font-size: 14px;
}

.lecture-ticket .bg-box {
    width: 100%;
    padding: 30px 20px;
    margin: 20px 0;
    border-radius: 5px;
    background: rgba(165, 198, 255, 0.3);
}

.lecture-ticket .bg-box .line {
    margin-bottom: 20px;
}

.lecture-ticket .bg-box .line:last-of-type {
    margin-bottom: 0;
}

.lecture-ticket .select-date {
}

.lecture-ticket .select-date select {
    margin: 0 8px;
}

.lecture-ticket .select-date select.date {
    width: 150px;
}

.lecture-ticket .select-date select.hour,
.lecture-ticket .select-date select.minute {
    width: 100px;
}

.lecture-ticket h2 img {
    margin-right: 10px;
    vertical-align: middle;
}

.lecture-ticket .select-ret {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0 0 0;
}

.lecture-ticket .select-ret .item {
    padding: 12px 20px;
    margin: 0 4px;
    font-size: 18px;
    text-align: center;
    border-radius: 50px;
    background: #e4eeff;
}

/* 무료체험 팝업 */
.video-area {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 410px;
    border-radius: 10px;
    background: #f1f1f1;
    overflow: hidden;
}

.pop_layer_cont .tip-text {
    margin: 30px auto 0;
}

.rvPop-outer {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.image-slider {
    width: 100%;
    height: 400px;
}

.image-slider .images { /* position:absolute;top:0px;left:0px;*/
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.image-slider .images img {
    position: absolute;
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    opacity: 0;
    object-fit: cover;
    transition: all 500ms ease-in-out;
}

.image-slider .images img.active {
    opacity: 1;
    transform: scale(1);
}

.image-slider .back-btn,
.image-slider .next-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    width: 40px;
    height: 100%;
    color: #fff;
    font-size: 25px;
    background: rgba(0, 0, 0, 0.2) url('../img/icon_arrow_gray.svg') no-repeat center / 12px;
    cursor: pointer;
}

.image-slider .back-btn {
    transform: rotate(180deg);
}

.image-slider .next-btn {
    right: 0px;
}

.image-slider .back-btn:hover,
.image-slider .next-btn:hover {
    background: rgba(0, 0, 0, 0.5) url('../img/icon_arrow_gray.svg') no-repeat center / 12px;
}

.image-slider .thumbnails {
    display: flex;
    justify-content: center;
    gap: 5px; /* position:absolute;bottom:20px;*/
    width: 100%;
    height: 60px;
    padding: 20px 0;
}

.image-slider .thumbnails img {
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    cursor: pointer;
}

.image-slider .thumbnails img.active {
    border: 2px solid transparent;
}

/* 과정변경 팝업 */
.cls-change {
    padding-bottom: 20px;
}

.cls-change .text01 {
    padding: 16px;
    margin-bottom: 30px;
    background: rgba(165, 198, 255, 0.3);
    border-radius: 50px;
}

.cls-change dl {
    display: inline-block;
}

.cls-change dl dt {
    float: left;
    width: 80px;
    line-height: 45px;
    text-align: left;
}

.cls-change dl dd {
    float: left;
    width: 280px;
}

.cls-change dl dd select {
    width: 100%;
}

/* 쿠폰 조회 */
.coupon-list {
    width: 100%;
}

.coupon-list ul {
    margin-top: 50px;
}

.coupon-list .item {
    width: 100%;
    height: 165px;
    margin-bottom: 20px;
}

.coupon-list .item .coupon-img {
    float: left;
    width: 480px;
    height: 100%;
    border: 2px solid #ccc;
    box-sizing: border-box;
}

.coupon-list .item .coupon-img {
}

.coupon-list .item .coupon-img .left {
    float: left;
    width: 180px;
    height: 100%;
    padding: 30px 20px;
    background: #ccc;
}

.coupon-list .item .coupon-img .left p {
    line-height: 1;
    margin-bottom: 20px;
    font-size: 21px;
    text-align: left;
}

.coupon-list .item .coupon-img .left span {
    color: #999;
    font-size: 12px;
}

.coupon-list .item .coupon-img .left .state {
    width: 80px;
    padding: 12px;
    margin: 0 auto;
    color: #999;
    font-size: 14px;
    text-align: center;
    border-radius: 5px;
    background: #fff;
}

.coupon-list .item .coupon-img .right {
    float: right;
    position: relative;
    width: calc(100% - 180px);
    padding: 30px 20px;
    text-align: center;
    overflow: hidden;
}

.coupon-list .item .coupon-img .right p {
    margin-bottom: 12px;
    color: #999;
    font-size: 21px;
    font-weight: 550;
}

.coupon-list .item .coupon-img .right .tip-text {
    font-size: 12px;
    font-weight: 400;
}

.coupon-list .item .coupon-img .right .ribbon {
    position: absolute;
    top: 7px;
    right: -33px;
    color: #fff;
    width: 122px;
    height: 40px;
    line-height: 40px;
    transform: rotate(45deg);
    font-size: 12px;
    background: #666;
}

.coupon-list .item .text-area {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: center;
    float: left;
    width: calc(100% - 500px);
    text-align: center;
    height: 100%;
}

.coupon-list .item .text-area .dis {
    font-size: 18px;
}

.coupon-list .item .text-area .dis span {
    display: inline-block;
    padding-right: 8px;
    font-size: 38px;
    font-weight: 550;
    letter-spacing: -0.025em;
    vertical-align: text-bottom;
}

.coupon-list .item.active .coupon-img {
    border: 2px solid #b20b0d;
}

.coupon-list .item.active .coupon-img .left {
    background: #b20b0d;
}

.coupon-list .item.active .coupon-img .left span {
    color: #fff;
}

.coupon-list .item.active .coupon-img .left .state {
    color: #b20b0d;
}

.coupon-list .item.active .coupon-img .right p {
    color: #131313;
}

.coupon-list .item.active .coupon-img .right .ribbon {
    background: #5597ff;
}

/* 취소환불규정 팝업 */
.rule-wrap .rule-box {
}

.rule-wrap .rule-box-scroll .text03 {
    display: block;
    margin: 30px 0 12px;
    font-size: 18px;
    font-weight: 550;
}

.rule-wrap .rule-box-scroll .text04 {
    display: block;
    margin-bottom: 8px;
}

.rule-wrap .rule-box-scroll li {
    margin-bottom: 4px;
    font-size: 14px;
}

.rule-wrap .rule-box-scroll .tip-text {
    margin-bottom: 30px;
}

.rule-wrap .table-wrap th,
.rule-wrap .table-wrap td,
.rule-wrap .table-wrap li {
    font-size: 14px;
}

.rule-wrap .table-wrap {
    margin: 20px 0;
}

/* 학습상담 팝업 */
.counsel-form {
    position: relative;
}

.counsel-form .list-area {
}

.counsel-form .list-area .item {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #e1e1e1;
}

.counsel-form .list-area .item .title {
    flex-basis: 210px;
    font-size: 15px;
    font-weight: 550;
}

.counsel-form .list-area .item .desc {
    flex: 1;
}

.counsel-form .list-area .item .desc .select-wrap {
    margin-right: 4px;
}

.counsel-form .list-area .item .desc .tip-text {
    margin-top: 4px;
}

.counsel-form .list-area .item .radio {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 auto;
    vertical-align: middle;
}

.counsel-form .list-area .item .radio [type='radio']:checked + label,
.counsel-form .list-area .item .radio [type='radio']:not(:checked) + label {
    line-height: normal;
    padding-left: 0;
}

.counsel-form .list-area .item .radio [type='radio']:checked + label:before,
.counsel-form .list-area .item .radio [type='radio']:not(:checked) + label:before {
    top: -10px;
}

.counsel-form .list-area .item .radio [type='radio']:checked + label:after,
.counsel-form .list-area .item .radio [type='radio']:not(:checked) + label:after {
    top: -6px;
}

.counsel-form .list-area .item td {
    height: 45px;
    padding: 6px 12px;
    font-size: 14px;
}

.counsel-form .btn-type03 {
    color: #fff;
    font-size: 13px;
    background: #595967;
}

.counsel-form .btn-type04 {
    padding: 8px 24px;
    font-size: 16px;
}

.counsel-form .btn-type04.active {
    border-color: #cd1618;
    background: #cd1618;
}

.counsel-form input[type='text'] {
    width: 400px;
}

.counsel-form .select-wrap select {
    width: 200px;
}

.counsel-form .coun-check {
    flex-wrap: wrap;
}

.counsel-form .coun-check .form-group {
    margin: 4px 20px 4px 0;
}

.counsel-form .coun-check .term-layer {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 380px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    background: #fff;
    transform: translate(-50%, -10%);
    box-sizing: border-box;
    overflow: hidden;
    z-index: 10;
}

.counsel-form .coun-check .term-layer.on {
    display: block;
}

.counsel-form .coun-check .term-layer h4 {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 19px;
    background: #000;
}

.counsel-form .coun-check .term-layer .text-area {
    width: 100%;
    padding: 0 20px;
    font-size: 14px;
}

.counsel-form .coun-check .term-layer .text-area h5 {
    margin: 20px 0 8px;
    font-size: 14px;
}

.counsel-form .coun-check .term-layer .text-area li {
    line-height: 1.2;
    margin-bottom: 4px;
    font-size: 12px;
}

.counsel-form .coun-check .term-layer .button_close {
    position: absolute;
    top: 12px;
    right: 12px;
}

.counsel-form .coun-check .term-layer .btn_close {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    background: transparent url('../img/pop_close.svg') no-repeat center/18px;
    cursor: pointer;
}

/* 화상수업 이용가이드 팝업 */
.pop_layer_box .std-guide .bar-list li {
    margin-bottom: 4px;
    font-size: 14px;
}

.pop_layer_box .std-guide .guide-box .device-item dl {
    margin-right: 20px;
}

.pop_layer_box .std-guide .guide-box .device-item dl:last-of-type {
    padding-left: 20px;
    margin-right: 0;
}

.pop_layer_box .std-guide .guide-box .device-item dd .img {
    height: 40px;
    margin: 0 auto;
}

.pop_layer_box .std-guide .guide-box .device-item dd .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pop_layer_box .std-guide .guide-box .device-item dd p {
    font-size: 12px;
}

.pop_layer_box .std-guide .guide-box .device-item dt .text02 {
    font-size: 16px;
}

.pop_layer_box .std-guide .guide-box .in-box dl {
    width: calc(100% / 2 - 20px);
    margin-right: 20px;
}

.pop_layer_box .std-guide .guide-box .in-box dl:last-of-type {
    margin-right: 0;
}

/* 수강증 출석증 영수증 팝업 */
.signup-area {
    position: relative;
}

.signup-area:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    clear: both;
    display: block;
    width: 400px;
    height: 150px;
    background: url(../img/bg-logo.svg) no-repeat center / contain;
    transform: translate(-50%, -50%);
    opacity: 0.5;
}

.signup-area .date-area {
    position: relative;
    padding: 20px 0;
    margin: 30px auto 0;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    background: transparent;
    z-index: 1;
}

.signup-area .title03 {
    margin-bottom: 50px;
    text-align: center;
}

.signup-area .table-wrap {
    position: relative;
    z-index: 1;
}

.signup-area .table-wrap th,
.signup-area .table-wrap td {
    padding: 0 12px;
    font-size: 16px;
    border: 1px solid #e1e1e1;
    background: transparent;
}

.signup-area .table-wrap .bg-sky {
    background: #f6f8fb !important;
}

.signup-area .text-area .text01 {
    margin-bottom: 40px;
}

.signup-area .text-area .text03 .pagoda-stamp {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url('../img/pagoda-stamp.png') no-repeat center / contain;
    vertical-align: middle;
}

.signup-area .count-area {
    position: relative;
    padding: 80px 0 100px;
    background: url('../img/img-signcount.png') no-repeat center / 250px;
    z-index: 1;
}

.signup-area .count-area .text02 {
    margin-top: 20px;
}

.signup-area .count-area .text03 {
    font-size: 13px;
}

/* 수강료 한눈에 보기 팝업  */
.class-pay {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.class-pay .title03 {
    margin-bottom: 30px;
    font-size: 21px;
    font-weight: normal;
}

.class-pay .box {
    margin: 20px 0;
}

.class-pay .box .text01 .text02 {
    padding-left: 10px;
}

.class-pay .box .table-wrap {
    margin-top: 8px;
    border-radius: 0;
}

.class-pay .box .table-wrap table {
    border-left: 0;
    border-right: 0;
}

.class-pay .box .table-wrap td {
    padding: 12px;
    border-bottom: 1px solid #e1e1e1;
}

.class-pay .box .table-wrap td:first-of-type {
    border-left: 0;
}

.class-pay .box .table-wrap td:last-of-type {
    border-right: 0;
}

.class-pay .box .highlight {
    display: inline;
    box-shadow: inset 0 -14px 0 #a4c7ff;
}

.class-pay .box .highlight-yellow {
    display: inline-block;
    padding: 4px;
    background: #fff0c7;
}

.class-pay .tabs .tab-link {
    margin: 0;
    border-radius: 0;
}

.class-pay .tabs .tab-link a {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    border-radius: 0;
}

.class-pay .tabs .tab-link a em {
    font-weight: normal;
}

.class-pay .tabs_wrapper {
    padding: 0 20px;
}

.class-pay .tabs_wrapper .tabs li {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    line-height: 46px;
    padding: 4px 16px;
    margin: 0 4px 0 0;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
}

.class-pay .tabs_wrapper .tabs li span {
    margin-left: 4px;
}

.class-pay .tabs_wrapper .tabs li.active {
    color: #fff;
    border: 1px solid #cd1618;
    background: #cd1618;
}

.class-pay .tabs_wrapper .tabs li.active span {
    color: #fff !important;
}

.class-pay .tabs_wrapper .sub_tab {
    display: flex;
    margin: 20px 0 0;
}

.class-pay .tabs_wrapper .sub_tab li {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    line-height: 46px;
    padding: 4px 16px;
    margin: 0 4px 0 0;
    font-size: 16px;
    font-weight: 550;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    cursor: pointer;
}

.class-pay .tabs_wrapper .sub_tab li span {
    margin-left: 4px;
}

.class-pay .tabs_wrapper .sub_tab li.active {
    color: #fff;
    border: 1px solid #cd1618;
    background: #cd1618;
}

.class-pay .tabs_wrapper .sub_tab li.active span {
    color: #fff !important;
}

.popup-sound .btn-sound {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    background: url('../img/icon-sound.svg') no-repeat 0 -60px / 30px;
}

.popup-sound .btn-sound.active {
    background: url('../img/icon-sound.svg') no-repeat 0 -30px / 30px;
}

/* 우편번호 */
fieldset legend {
    line-height: 0;
    font-size: 0;
    visibility: hidden;
}

.zipcode-hm {
}

.zipcodewrap {
    width: 100%;
}

.zipcodewrap .tabmenu {
    height: 40px;
    margin-bottom: 10px;
}

.zipcodewrap .tabmenu:after {
    content: '';
    clear: both;
    display: block;
}

.zipcodewrap .tabmenu a {
    float: left;
    display: block;
    width: 50%;
    height: 40px;
    line-height: 39px;
    margin: 0;
    font-size: 14px;
    text-align: center;
    border: 1px solid #ccc;
    border-left: transparent;
    border-bottom: 1px solid #cd1618;
    box-sizing: border-box;
}

.zipcodewrap .tabmenu a.on {
    height: 40px;
    color: #cd1618;
    border: 1px solid #cd1618;
    border-bottom: transparent;
}

.zipcodewrap fieldset {
    background: #f7f7f7;
}

.zipcodewrap fieldset p * {
    vertical-align: middle;
}

.zipcodewrap fieldset p input.txt {
    height: 27px;
    margin-right: 4px;
}

.zipcodewrap fieldset p select {
    width: 125px;
    height: 27px;
}

.zipcodewrap .lotnum fieldset {
    padding: 20px;
}

.zipcodewrap .lotnum fieldset span {
    letter-spacing: -0.5px;
    font-size: 13px;
}

.zipcodewrap .lotnum fieldset span strong {
    color: #3f3f3f;
}

.zipcodewrap .lotnum fieldset p {
    margin: 12px 0 5px;
}

.zipcodewrap .lotnum fieldset p input.txt {
    width: 220px;
}

.zipcodewrap .lotnum fieldset em {
    color: #969696;
    font-size: 11px;
}

.zipcodewrap .roadname .labbox b {
    width: 33.3%;
}

.zipcodewrap .roadname fieldset {
    padding: 23px 15px;
    margin-top: 10px;
}

.zipcodewrap .roadname fieldset p {
    font-size: 0;
}

.zipcodewrap .roadname fieldset p.txtsch {
    margin-top: 12px;
}

.zipcodewrap .roadname fieldset label {
    display: inline-block;
    min-width: 40px;
    line-height: 27px;
    padding-right: 8px;
    color: #656565;
    font-size: 13px;
}

.zipcodewrap .roadname fieldset label.sctcity {
    margin-left: 20px;
}

.zipcodewrap .roadname .txtbox {
    line-height: 18px;
    margin: 5px 0 15px;
}

.zipcodewrap .roadname .txtbox a {
    color: #024bc3;
}

.zipcodewrap .total {
    line-height: 12px;
    margin: 8px 0;
    color: #555;
    font-size: 11px;
    text-align: right;
}

.zipcodewrap .total strong {
    color: #d5000a;
}

.zipcodewrap .tit {
    padding: 10px 0 8px;
    font-size: 0;
    border-top: 2px solid #3e3e4f;
}

.zipcodewrap .tit span {
    display: inline-block;
    color: #444;
    font-size: 12px;
    text-align: center;
}

.zipcodewrap .tit span.zipcode {
    width: 110px;
}

.zipcodewrap .tit span.address {
    width: 310px;
}

.zipcodewrap ul {
    height: 240px;
    border-bottom: 1px solid #e3e3e3;
    overflow-x: hidden;
    overflow-y: auto;
}

.zipcodewrap ul li {
    position: relative;
    line-height: 13px;
    padding: 9px 67px 7px 0;
    font-size: 12px;
    border-top: 1px solid #e3e3e3;
}

.zipcodewrap ul li em {
    display: inline-block;
    width: 110px;
    text-align: center;
}

.zipcodewrap ul li button {
    position: absolute;
    top: 50%;
    right: 4px;
    margin-top: -12.5px;
}

.zipcodewrap .btn_gray_02 {
    width: 45px;
    height: 27px;
    border-radius: 3px;
    background: #ccc;
}

.trplayerw .popupwrap {
    position: relative;
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    background: #fff;
}

.trplayerw .popupwrap .pop_title {
    margin-bottom: 16px;
}

.trplayerw .popupwrap .btn_closelayer {
    position: absolute;
    top: 20px;
    right: 20px;
}

/*=================================================================================
* 마이페이지 예습
=================================================================================*/
.listenBoxWrap:after {
    content: '';
    clear: both;
    display: block;
}

.listenBoxWrap.none .leftBoxWrap {
    width: 100%;
}

.leftBoxWrap {
    float: left;
    width: 685px;
}

.listenBox {
    position: relative;
    padding: 23px 25px 25px 22px;
    margin: 22px 0 0 0;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    background: #f7f7f7;
}

.listenBox.done {
    border-color: #f3b32f;
    background-color: #ffe9bb;
}

.listenBox.done .bottom {
    border-color: #f3b32f;
}

.listenBox + .listenBox {
    margin-top: 19px;
}

.listenBtn {
    position: absolute;
    top: 23px;
    right: 27px;
    font-size: 0;
}

.listenBtn a {
    display: inline-block;
    width: 60px;
    height: 33px;
    line-height: 33px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: #b5b5b5;
}

.listenBtn a.on {
    background: #ea3829;
}

.listenBtn a:first-child {
    border-radius: 20px 0 0 20px;
}

.listenBtn a:last-child {
    border-radius: 0 20px 20px 0;
}

.listenBox .top .txt1 {
    color: #333;
    font-size: 24px;
}

.icon_audio {
    content: '';
    position: relative;
    top: -2px;
    display: inline-block;
    width: 19px;
    height: 17px;
    margin-left: 12px;
    background: url('../img/img_listenIcon.png') no-repeat;
    vertical-align: middle;
}

.listenBox .top .txt2 {
    margin-top: 21px;
    color: #333;
    font-size: 18px;
}

.listenBox .bottom {
    padding: 19px 0 22px;
    margin: 24px 0 0;
    font-size: 18px;
    border-top: 1px solid #e2e2e2;
}

.listenBox .bottom span {
    color: #ea3829;
}

.quizLinkBoxWrap {
    margin-top: 22px;
    font-size: 0;
    text-align: center;
}

.quizLinkBox {
    position: relative;
    display: inline-block;
    width: 453px;
    height: 255px;
    text-align: center;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    background: #f7f7f7;
    vertical-align: top;
}

.quizLinkBox .txt {
    min-height: 179px;
    line-height: 179px;
}

.quizLinkBox .txt span {
    display: inline-block;
    line-height: 30px;
    font-size: 24px;
    vertical-align: middle;
}

.quizLinkBox .roundBtn {
    position: absolute;
    bottom: 25px;
    left: 50%;
    margin-left: -125px;
}

.quizLinkBox.color2 {
    background: #3d4d98;
}

.quizLinkBox.color2 .txt span {
    color: #fff;
}

.quizLinkBox.color2 .roundBtn {
    color: #333;
    font-weight: bold;
    background: #ffcf28;
}

.quizLinkBox + .quizLinkBox {
    margin-left: 35px;
}

.listenBoxWrap.none .rightBoxWrap {
    display: none;
}

.rightBoxWrap {
    float: right;
    width: 325px;
    padding-top: 23px;
}

.wordBox {
    padding: 0 5px 6px 5px;
    border-radius: 10px;
    background: #3855c2;
}

.wordBox + .wordBox {
    margin-top: 22px;
}

.wordBoxTit {
    position: relative;
    height: 60px;
    line-height: 27px;
    padding: 18px 0 16px 15px;
    color: #fff;
    font-size: 18px;
    box-sizing: border-box;
}

.wordBoxTit a {
    position: absolute;
    right: 20px;
    color: #fff;
    font-size: 12px;
}

.alal {
    position: relative;
    top: -2px;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 6px;
    background: url('../img/img_alal.png') no-repeat center / cover;
    vertical-align: middle;
}

.alal .speechBubble,
.icon_al .speechBubble {
    display: none;
    position: absolute;
    left: 50%;
    bottom: -300%;
    width: 161px;
    line-height: 18px;
    padding: 19px 0 15px 0;
    margin: 0 0 0 -80px;
    color: #333;
    font-size: 14px;
    text-align: center;
    border: 1px solid #333;
    border-radius: 10px;
    background: #fff;
    z-index: 1;
}

.icon_al .speechBubble {
    bottom: -310%;
    width: 235px;
    padding: 10px;
    margin-left: -127px;
    color: #333;
    border-color: #333;
    background-color: #fff;
}

.icon_al.ver2 .speechBubble {
    bottom: -228%;
    width: 210px;
    margin-left: -114px;
}

.icon_al.ver3 .speechBubble {
    bottom: -307%;
    width: 244px;
    margin-left: -130px;
}

.icon_al .speechBubble span {
    color: red;
}

.alal .speechBubble:after,
.icon_al .speechBubble:after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    display: block;
    width: 19px;
    height: 10px;
    margin: 0 0 0 -11px;
    background: url('../img/speechBubbleTail.png') no-repeat;
}

.alal:hover .speechBubble,
.icon_al:hover .speechBubble {
    display: block;
}

.wordBoxConWrap {
    padding: 0 24px;
    border-radius: 10px;
    background: #fff;
}

.wordBoxConTop {
    position: relative;
}

.wordBoxConTop:after {
    content: '';
    display: block;
    clear: both;
}

.wordBoxConTop li {
    float: left;
    width: 50%;
    height: 43px;
    line-height: 43px;
    color: #ffcc00;
    font-size: 14px;
    text-align: center;
    border-bottom: 2px solid #333;
}

.wordBoxConTop li.on a {
    color: #333;
}

.wordBoxConTop li a {
    display: block;
    color: #ffcc00;
}

.wordBoxCon {
    display: none;
}

.wordBoxCon li {
    min-height: 38px;
    line-height: 18px;
    padding: 10px 0 11px 0;
    color: #333;
    font-size: 14px;
    border-bottom: 1px solid #c1c1c1;
}

.wordBoxCon li.none {
    min-height: 28px;
    padding: 20px 0 11px 0;
}

.wordBoxConBtn {
    padding: 18px 0;
    text-align: center;
}

.redRbtn {
    display: inline-block;
    width: 206px;
    height: 40px;
    line-height: 40px;
    color: #ea3829;
    font-size: 14px;
    text-align: center;
    border: 2px solid #ea3829;
    border-radius: 150px;
}

.wordBoxConWrap.left .wordBoxConTop li:first-child a {
    color: #333;
}

.wordBoxConWrap.right .wordBoxConTop li:last-child a {
    color: #333;
}

.wordBoxConWrap.left .left,
.wordBoxConWrap.right .right {
    display: block;
}

.talksBoxWrap {
    position: relative;
    display: table;
    width: 100%;
    padding: 27px 0 21px;
    margin: 22px 0 0;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    background: #f7f7f7;
}

.talksBoxWrap + .talksBoxWrap {
    margin-top: 19px;
}

.talksBoxWrap:after {
    content: '';
    display: table-cell;
    width: 100px;
}

.tIconWrap {
    display: table-cell;
    width: 162px;
    height: 142px;
    border-right: 1px solid #d8dae7;
}

.tIconWrap .tIcon span {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto;
    font-size: 18px;
    border-radius: 150px;
    overflow: hidden;
}

.tIcon {
    font-size: 18px;
    vertical-align: middle;
}

.tIconWrap {
    text-align: center;
    vertical-align: middle;
}

.talksBoxWrap .txt {
    display: table-cell;
    padding-left: 50px;
}

.talksBoxWrap .txt .txt1 {
    color: #333;
    font-size: 24px;
}

.talksBoxWrap .txt .txt2 {
    margin-top: 14px;
    color: #333;
    font-size: 18px;
}

.talksBoxWrap .txt .txt3 {
    margin-top: 44px;
    color: #333;
    font-size: 18px;
}

/* 히든 처리 */
.talksBoxWrap .txt .bg-hidden {
    position: relative;
}

.talksBoxWrap .txt .bg-hidden:after {
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    right: -2px;
    bottom: -2px;
    display: block;
    width: 100%;
    min-height: 30px;
    background: #bfbfbf;
}

/*=================================================================================
* 마무리 퀴즈
=================================================================================*/
.Quiz-wrap {
    width: 100%;
}

.last-quiz {
    flex-direction: column;
}

.quizArea {
    position: relative;
    width: 100%;
    padding: 0 0 30px;
    margin-top: 30px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
}

.quizArea .top {
    position: absolute;
    top: 19px;
    left: 0;
    width: calc(100% - 38px);
    padding: 0 19px;
}

.quizArea .top.q div {
    float: right;
}

.quizArea .top.q div > span {
    font-size: 24px;
}

.quizArea .top.q div > span + span {
    font-size: 18px;
}

.quizArea .top:after {
    content: '';
    clear: both;
    display: block;
}

.quizArea .top div {
    float: left;
    font-size: 18px;
}

.quizArea .top div + div {
    float: right;
}

.quizArea .top div + div > span {
    font-size: 24px;
}

.quizArea .top div + div > span + span {
    font-size: 18px;
}

.quizTop {
    position: relative;
}

.quizTop .quiz1 {
    position: relative;
    margin: 43px 0 0;
    color: #1c62bb;
    font-size: 28px;
    text-align: center;
}

.quizTop.left .quiz1 {
    width: 70%;
    line-height: 65px;
    margin: 43px auto 0;
    text-align: left;
    vertical-align: top;
}

.quizTop.left .quiz1:first-child {
    line-height: 34px;
    margin-top: 45px;
    text-align: center;
}

.quizTop .quiz1 input,
.quizTop .quiz1 span {
    display: inline-block;
    height: 48px;
    line-height: 48px;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #e5e5e5;
    border-radius: 150px;
    vertical-align: middle;
}

.quizTop .quiz1 input + input,
.quizTop .quiz1 span + span {
    margin-left: 10px;
}

.quizTop .quiz1 input.on,
.quizTop .quiz1 span.on {
    color: #333;
    border-color: #ffcd60;
    background: #ffcd60;
}

.quizTop .quiz1 + .quiz1 {
    margin-top: 38px;
}

.quizTop .quiz1 + .quiz1 + .quiz1 {
    margin-top: 15px;
}

.quizSound {
    display: block;
    width: 16px;
    height: 17px;
    margin: 19px auto 0;
    background: url('../img/img_listenIcon.png') no-repeat;
}

.quizTop.left .quizSound {
    margin-top: 21px;
}

.quizTop.left .quizSound + .quiz1 {
    margin-top: 14px;
}

.iconX {
    position: absolute;
    top: -10px;
    left: 50%;
    display: inline-block;
    width: 115px;
    height: 115px;
    margin: 0 0 0 -57px;
    background: url('../img/img_x.png') no-repeat;
    z-index: 1;
}

.iconO {
    position: absolute;
    top: -29px;
    left: 50%;
    display: inline-block;
    width: 141px;
    height: 141px;
    margin: 0 0 0 -70px;
    background: url('../img/img_o.png') no-repeat;
    z-index: 1;
}

.quizTop .quiz1 .iconX,
.quizTop .quiz1 .iconO {
    top: 50%;
    margin-top: -57px;
}

.quizBtn {
    font-size: 0;
    text-align: center;
}

.quizTop + .quizBtn {
    margin-top: 49px;
}

.quizExample2 + .quizBtn {
    margin-top: 10px;
}

.quizBt {
    display: inline-block;
    width: 216px;
    height: 46px;
    line-height: 46px;
    color: #ea3829;
    font-size: 18px;
    text-align: center;
    border: 2px solid #ea3829;
    border-radius: 150px;
}

.quizBt2 {
    display: inline-block;
    width: 220px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    border-radius: 150px;
    background: #ea3829;
}

.quizBt3 {
    position: relative;
    display: inline-block;
    min-width: 396px;
    line-height: 46px;
    padding: 0 50px;
    color: #333;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    border: 2px solid #fcbb2c;
    border-radius: 35px;
    background: #ffcd60;
}

.quizBt3:after {
    content: '';
    position: absolute;
    top: -26px;
    left: -6px;
    display: inline-block;
    width: 57px;
    height: 37px;
    background: url('../img/img_answer.png') no-repeat;
    z-index: 1;
}

.quizBt + .quizBt2 {
    margin-left: 10px;
}

.quizBt:before {
    content: '';
    position: relative;
    top: -3px;
    display: inline-block;
    width: 23px;
    height: 19px;
    margin: 0 5px 0 0;
    background: url('../img/icon-refresh.png') no-repeat center / contain;
    vertical-align: middle;
}

.quizExample {
    padding: 26px 0 0 0;
    margin: 50px 0 0;
    text-align: center;
    border-top: 1px solid #f0f0f0;
}

.quizExample div {
    display: inline-block;
}

.quizExample.ver2 a:hover {
    background: #e5e5e5;
}

.quizExample div + div {
    margin-left: 10px;
}

.quizExample a {
    display: inline-block;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #e5e5e5;
    border-radius: 150px;
    background: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quizExample a.on {
    display: inline-block;
    width: 98px;
    height: 48px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #e5e5e5;
    border-radius: 150px;
    background: #e5e5e5;
}

.quizExample.dis a {
    display: inline-block;
    width: 98px;
    height: 48px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #e5e5e5;
    border-radius: 150px;
    background: #e5e5e5;
}

.quizExample a + a {
    margin-left: 10px;
}

.quizExample2 {
    padding: 0;
    margin: 50px 0 0;
}

.quizExample2 a {
    display: block;
    width: 500px;
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
    text-align: center;
    border: 1px solid #e5e5e5;
    border-radius: 150px;
    background: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quizExample2 a.ra {
    position: relative;
    font-size: 16px;
    font-weight: bold;
    border-color: #e5e5e5;
    background: #ffcd60;
    overflow: visible;
}

.quizExample2 a.na {
    position: relative;
    font-size: 16px;
    font-weight: bold;
    border-color: #e5e5e5;
    background: #ffcd60;
    overflow: visible;
}

.quizExample2 a.ra:after {
    content: '';
    position: absolute;
    top: -26px;
    left: -6px;
    display: inline-block;
    width: 57px;
    height: 37px;
    background: url('../img/img_answer.png') no-repeat;
    z-index: 1;
}

.quizExample2 a.dis,
.quizExample2.dis a {
    border-color: #e5e5e5;
    background-color: #e5e5e5;
}

.quizExample2 a + a {
    margin-top: 10px;
}

.quizBothBtn {
    display: block;
    width: 220px;
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
    color: #fff;
    font-size: 18px;
    text-align: center;
    border-radius: 150px;
    background: #4e87ce;
}

.quizBothBtn.q {
    width: 220px;
}

.quizExample + .quizBothBtn,
.quizExample2 + .quizBothBtn.q {
    margin-top: 30px;
}

.newQuizBox {
    max-width: 700px;
    height: 150px;
    padding-top: 60px;
    margin: 30px auto 0;
    color: #000;
    font-size: 18px;
    text-align: center;
    border: 3px solid #e5e5e5;
    box-sizing: border-box;
}

.newQuizBox.on {
    position: relative;
    color: #1c62bb;
    font-size: 28px;
    border: 0;
    background: #ffcd60;
}

.newQuizBox.on .iconX {
    position: absolute;
    top: 50%;
    margin-top: -57px;
}

.newQuizBox.on .iconO {
    position: absolute;
    top: 0;
    top: 50%;
    margin-top: -70px;
}

.quizNone {
    padding: 86px 0;
    margin: 30px 0 0;
    text-align: center;
    border-top: 2px dotted #ededed;
    border-bottom: 2px dotted #ededed;
}

.quizNone p {
    margin: 10px 0 0;
    color: #999;
    font-size: 16px;
}

.ybox {
    width: 631px;
    padding: 23px 20px 24px;
    margin: 50px auto 0;
    text-align: center;
    border-radius: 10px;
    background: #ffcd60;
}

.ybox .num {
    position: relative;
    display: inline-block;
    margin: 0;
    color: #333;
    font-size: 72px;
    font-weight: bold;
    text-align: center;
}

.ybox .num .speechBubble {
    position: absolute;
    top: -70px;
    left: calc(100% + 30px);
    display: inline-block;
    width: 198px;
    height: 150px;
    line-height: 22px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    border: 1px solid #434343;
    border-radius: 3px;
    background: #4a4a4a url(../img/speechBubbleBg.png) no-repeat;
}

.ybox .num .speechBubble:before {
    content: '';
    display: block;
    height: 92px;
    background: url('../img/circleCharacter1.png') no-repeat center center;
}

.ybox .num .speechBubble.icon1:before {
    background-image: url('../img/emt_01.png');
}

.ybox .num .speechBubble.icon2:before {
    background-image: url('../img/emt_02.png');
}

.ybox .num .speechBubble.icon3:before {
    background-image: url('../img/emt_03.png');
}

.ybox .num .speechBubble.icon4:before {
    background-image: url('../img/emt_04.png');
}

.ybox .num .speechBubble.icon5:before {
    background-image: url('../img/emt_05.png');
}

.ybox .num .speechBubble.icon6:before {
    background-image: url('../img/emt_06.png');
}

.ybox .num .speechBubble:after {
    content: '';
    position: absolute;
    top: 50%;
    left: -11px;
    display: block;
    width: 11px;
    height: 21px;
    margin: -10px 0 0;
    background: url('../img/speechBubbleTail2.png') no-repeat;
}

.ybox .situation {
    margin: 1px 0 0;
    color: #333;
    font-size: 21px;
    text-align: center;
}

.ybox .situation span {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    color: #fff;
    border-radius: 150px;
}

.ybox .situation span.r {
    margin-right: 24px;
    background: #ea3829;
}

.ybox .situation span.b {
    background: #434343;
}

.ybox .both {
    padding: 11px 0 0;
    margin: 15px 0 0;
    font-size: 18px;
    border-top: 1px solid #d1a546;
}

.ybox .both span {
    display: inline-block;
    color: #ea3829;
    font-size: 24px;
    vertical-align: bottom;
}

.quizBtn3 {
    width: 671px;
    margin: 61px auto 0;
    font-size: 0;
}

.quizBtn3 a {
    display: inline-block;
    width: 218px;
    height: 48px;
    line-height: 50px;
    font-size: 18px;
    text-align: center;
    border: 1px solid #434343;
    border-radius: 150px;
    background: #ffff;
}

.quizBtn3 a + a {
    margin-left: 6px;
}

.quizBtn3 a.on {
    color: #fff;
    border-color: #ea3829;
    background: #ea3829;
}

.verDiv {
    display: inline-block;
}

/* pc :inline-block; // tablet :no setting// mo :block*/


/*=================================================================================
*
=================================================================================*/
.pop_title-area {
    margin-bottom: 20px;
}

.pop_title-area h3 {
    font-size: 24px;
}

.pop_curri-wrap .table-wrap {
    margin-right: 20px;
}

.pop_curri-wrap .table-wrap:last-of-type {
    margin-right: 0;
}

.pop_curri-wrap .table-wrap td {
    text-align: center;
}

.cs-apply-wrap .apply-step .cs-tab-cont .tooltip-hover {
    width: 325px;
    margin: 6px;
}

.cs-apply-wrap .apply-step .cs-tab-cont .btn-tab02 {
    margin: 0;
}

.cs-apply-wrap .apply-step .cs-tab-cont,
.cs-apply-wrap .step02-btn-area {
    padding: 30px;
}

.main-banner-wrap .banner-item {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
}

.main-section01 .banner-item {
    height: 1180px;
    padding-top: 80px;
    box-sizing: border-box;
}

.main-section01 .main-banner-wrap .banner-item img {
    padding-left: 357px;
}

.main-section02 {
    padding-top: 300px;
    padding-bottom: 80px;
    margin-top: -380px;
}

.main-section04 {
    padding-top: 580px;
}

.service02 .service-item {
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

.class-start .button-wrap.back-button {
    justify-content: flex-end;
}

.signup-area:after {
    z-index: 0;
}

.signup-area .text-area {
    position: relative;
    z-index: 1;
}

.svw-01 .inner:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    clear: both;
    display: block;
    width: 400px;
    height: 360px;
    margin-top: -180px;
    background: url('../img/svw-01-01.png') no-repeat center / contain;
}

.event-wrap .row.event-area {
    padding-left: 0;
    padding-right: 0;
}

.event-area .view-cont {
    width: 100%;
    padding: 0;
}

.review-cont .owl-carousel .owl-stage-outer {
    padding-bottom: 28px;
}

.review-cont .mrvNav-box button {
    top: 17%;
}

button.btn_gray {
    width: 120px;
    height: 25px;
    margin-left: 10px;
    color: #777;
    text-shadow: 1px 1px 0 #fff;
    font-weight: bold;
    font-size: 11px !important;
    border-width: 1px;
    border-style: solid;
    border-color: #c9c9c9 #a3a3a3 #b4b4b4 #d4d4d4;
    border-radius: 3px;
    background: url('../img/bg_btngray.gif') repeat-x;
}

.icon_npay {
    position: relative;
    top: -2px;
    display: inline-block;
    width: 50px;
    height: 19px;
    line-height: 40px;
    margin-right: 2px;
    background: url('../img/icon_npay.png') no-repeat;
    vertical-align: middle;
}

input[type='radio']:checked + label .icon_npay {
    background-position: 0 -19px;
}

.icon_kakaopay {
    position: relative;
    top: -2px;
    display: inline-block;
    width: 46px;
    height: 19px;
    line-height: 40px;
    margin-right: 2px;
    background: url('../img/icon_kakaopay.png') no-repeat;
    vertical-align: middle;
}

[type='radio']:checked + label .icon_kakaopay {
    background-position: 0 -20px;
}

.review-cont .mrvNav-box button {
    position: absolute;
    top: 20%;
    width: 35px;
    line-height: 35px;
    height: 35px;
    color: transparent;
    text-align: center;
    border-radius: 50%;
    background: #fff url(../img/icon_arrow_gray.svg) center/8px no-repeat;
    z-index: 10;
}

.review-cont .mrvNav-box button.prev-btn {
    left: -40px;
    transform: rotate(180deg);
}

.review-cont .mrvNav-box button.next-btn {
    right: -40px;
}

.title-btns {
    position: relative;
}

.title-btns a,
.title-btns button {
    margin-bottom: -5px;
    position: absolute;
    right: 0;
    bottom: 100%;
}

.q_tooltip {
    position: relative;
    display: inline-block;
    top: 2px;
}

.q_tooltip .tooltiptext {
    position: absolute;
    top: 125%;
    left: -40px;
    width: 470px;
    padding: 25px 20px;
    color: #777;
    border: 1px solid #888;
    border-radius: 5px;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s;
    z-index: 1;
}

.q_tooltip .tooltiptext::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 9%;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #888 transparent;
}

.q_tooltip .tooltiptext ul {
}

.q_tooltip .tooltiptext li {
    position: relative;
    line-height: 1.3;
    padding-left: 24px;
    font-size: 14px;
    font-weight: 400;
}

.q_tooltip .tooltiptext li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background: url('../img/icon_check.png') no-repeat 0 0;
}

.q_tooltip .tooltiptext li + li {
    margin-top: 10px
}

.q_tooltip .tooltiptext li span {
    color: #fe6555
}

.q_tooltip:hover .tooltiptext {
    opacity: 1;
    visibility: visible;
}

.effect {
    opacity: 0;
}

.effect.action {
    opacity: 1;
    -ms-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;

    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.effect.action.type-scale {
    -ms-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.type-left {
    -ms-transform: translate(-100px, 0);
    -webkit-transform: translate(-100px, 0);
    transform: translate(-100px, 0);
}

.type-right {
    -ms-transform: translate(100px, 0);
    -webkit-transform: translate(100px, 0);
    transform: translate(100px, 0);
}

.type-right {
    -ms-transform: translate(100px, 0);
    -webkit-transform: translate(100px, 0);
    transform: translate(100px, 0);
}

.type-top {
    -ms-transform: translate(0, -100px);
    -webkit-transform: translate(0, -100px);
    transform: translate(0, -100px);
}

.type-bottom,
.type-elastic {
    -ms-transform: translate(0, 100px);
    -webkit-transform: translate(0, 100px);
    transform: translate(0, 100px);
}

.type-scale {
    -ms-transform: scale(3);
    -webkit-transform: scale(3);
    transform: scale(3);
}

.type-scale-out {
    -ms-transform: scale(.3);
    -webkit-transform: scale(.3);
    transform: scale(.3);
}

.action.type-scale,
.action.type-scale-out {
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}

.type-elastic.action {
    -moz-animation: elastic 1s;
    -webkit-animation: elastic 1s;
    animation: elastic 1s;
}

/* login */
#contents {
    padding-bottom: 60px;
    min-height: -webkit-calc(100vh - 443px);
    min-height: -moz-calc(100vh - 443px);
    min-height: calc(100vh - 443px);
}

#contents .cont_header {
    padding: 60px 0 60px;
}

#contents .cont_header h1 {
    padding: 0;
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    line-height: 25px;
    color: #080808;
    letter-spacing: -2px;
}

#contents .cont_header h2 {
    padding: 5px 0 0px 0;
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    color: #080808;
    letter-spacing: -2px;
}

#contents .cont_header h3 {
    padding: 0px;
    margin: 0;
    text-align: center;
    font-size: 26px;
    line-height: 30px;
    font-weight: 700;
    color: #080808;
    letter-spacing: -2px;
}

#contents .cont_header h4 {
    padding: 0px;
    margin: 0;
    text-align: center;
    font-size: 22px;
    line-height: 28px;
    font-weight: 500;
    color: #080808;
    letter-spacing: -2px;
}

#contents .cont_header h4.login_guide {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.5px;
}

#contents .cont_header h4.login_guide strong {
    font-weight: normal !important;
}

.wrapper_login {
    width: 910px;
    margin: 0 auto;
    position: relative;
    background-color: #fff;
}

.wrapper_login:after {
    content: '';
    display: block;
    clear: both;
}

.loginbox {
    position: relative;
    display: inline-block;
    width: 100%;
    border: 1px solid #cfd6e0;
    border-radius: 10px;
    padding: 50px 65px;
}

.loginbox .login_warap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.loginbox .login_warap .login_input {
    width: 330px
}

.loginbox .login_warap .login_input h2 {
    text-align: center;
}

.loginbox .login_warap .login_input input + input {
    margin: 10px 0
}

.loginbox .login_warap .login_input input[type="text"],
.loginbox .login_warap .login_input input[type="password"] {
    height: 50px;
    line-height: 50px;
    max-width: 100%;
}

.loginbox .login_warap .banner {
    width: 380px;
}

.loginbox .login_warap .banner a,
.loginbox .login_warap .banner img {
    width: 100%;
    display: block;
}

.loginbox .login_warap .banner a + a {
    margin-top: 5px;
}

.loginbox .login_warap .banner img {
    width: 100%;
    height: 160px;
}

.loginbox .chk {
    position: relative;
    display: inline-block;
    width: 100%;
}

.loginbox .chk .id-pass-search {
    position: absolute;
    top: 2px;
    right: 0;
}

.memberjoin-txt {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-top: 40px;
    color: #2d2d2d;
    font-weight: 300;
}

.memberjoin-txt h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 40px;
}

.memberjoin-txt a {
    position: absolute;
    top: 2px;
    right: 0;
}

.checkbox,
.checkbox em {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.checkbox input[type="checkbox"] {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.checkbox em {
    font-size: 16px;
    color: #010101;
    position: relative;
}

.checkbox em:before {
    content: '';
    width: 24px;
    height: 24px;
    margin-right: 4px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #bec6cd;
    border-radius: 4px;
    position: relative;
    top: -1px;
    background: #ffffff
}

.checkbox input[type="checkbox"]:checked + em:before {
    background: #ffffff url('../img/icon_check01.png') 50% 50% no-repeat;
}

.checkbox.ver2 em:before {
    width: 26px;
    height: 26px;
    margin-right: 8px;
    border: none;
    border-radius: 50%;
    background-color: #ddd;
}

.checkbox.ver2 input[type="checkbox"]:checked + em:before {
    background: #ff7800 url('../img/icon_check02.png') 50% 50% no-repeat;
}


/*
 * member 관련
*/
.wrapper_small {
    width: 1150px;
    margin: 0 auto;
    position: relative;
}

.wrapper_small:after {
    content: '';
    display: block;
    clear: both;
}

.hidden {
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    touch-action: none;
}

.sub-tit {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 700;
}

/* form elements */
.check-cmm {
    display: inline-block;
    vertical-align: middle;
}

.check-cmm,
.check-cmm em {
    position: relative;
}

.check-cmm em {
    min-height: 34px;
    padding: 0 0 0 42px;
    display: block;
    font-size: 18px;
    line-height: 35px;
    font-weight: 500;
}

.check-cmm em span {
    font-weight: 400;
    color: #494d50;
}

.check-cmm em:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
    background-color: #fff;
}

.check-cmm input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
}

.check-cmm input[type="checkbox"]:checked + em:before {
    background: url('../img/icon_check2.png') 50% 50% no-repeat;
}

.multi-check-wrap {
    margin: -4px -14px;
    font-size: 0;
}

.multi-check-wrap .check-cmm {
    margin: 4px 14px;
}

.multi-check-wrap .sheet-in-noti {
    margin-left: 15px;
}

.radio-cmm {
    display: inline-block;
    vertical-align: middle;
}

.radio-cmm,
.radio-cmm em {
    position: relative;
}

.radio-cmm em {
    min-height: 34px;
    padding: 0 0 0 42px;
    display: block;
    font-size: 18px;
    line-height: 35px;
    font-weight: 500;
}

.radio-cmm em span {
    font-weight: 400;
    color: #494d50;
}

.radio-cmm em .desc {
    margin-top: -2px;
    display: block;
    font-size: 16px;
    line-height: 1.5;
}

.radio-cmm em .desc span {
    color: #ff2424;
}

.radio-cmm em .desc span.c-orange {
    color: #ff6724;
}

.radio-cmm em:before,
.radio-cmm em:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
}

.radio-cmm em:before {
    width: 32px;
    height: 32px;
    border: 1px solid #e1e1e1;
    border-radius: 50%;
    background-color: #fff;
}

.radio-cmm input[type="radio"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
}

.radio-cmm input[type="radio"]:checked + em:after {
    width: 14px;
    height: 14px;
    margin: 10px 0 0 10px;
    background-color: #343434;
    border-radius: 45%;
}

.multi-radio-wrap {
    margin: -4px -14px;
    font-size: 0;
}

.multi-radio-wrap .radio-cmm {
    margin: 4px 14px;
}

.multi-radio-wrap .part + .part {
    margin-top: 12px;
}

.multi-radio-wrap .sheet-in-noti {
    margin-left: 15px;
}

.multi-radio-wrap strong {
    margin: 0 10px 0 14px;
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    font-weight: 700;
}

.multi-select-wrap {
    display: flex;
    justify-content: space-between;
}

.multi-select-wrap span {
    flex: 1;
}

.multi-select-wrap span + span {
    margin-left: 20px;
}

.multi-select-wrap span select {
    width: 100%;
}

.input-cmm-width {
    width: 619px;
}

/* buttons */
.btn-cmm {
    min-width: 95px;
    padding: 10px 25px;
    display: inline-block;
    text-align: center;
    font-size: 18px;
    color: #fff;
    border-radius: 5px;
    background-color: #1E78FF;
}

.btn-cmm:hover {
    background-color: #003F9F;
}

.btn-cmm.ver2,
.btn-cmm.ver2:hover {
    background-color: #494D50;
}

.btn-cmm-02 {
    padding: 5px 9px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
    color: #494d50;
    border: 1px solid #acb1b5;
    border-radius: 3px;
    background-color: #f7f7f7;
}

.btn-cmm-02.ver2 {
    color: #fff;
    border-color: #121212;
    background-color: #494d50;
}

.btn-cmm-03 {
    padding: 7px 21px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background-color: #494d50;
    border-radius: 28px;
}

.btn-cmm-04 {
    height: 38px;
    padding: 0 17px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 18px;
    line-height: 38px;
    font-weight: 400;
    color: #fff;
    background-color: #494d50;
    border-radius: 3px;
}

.btn-cmm-04.ver2 {
    background-color: #1E78FF;
}

.btn-box {
    margin-top: 50px;
    text-align: center;
    font-size: 0;
}

.btn-box a,
.btn-box button {
    margin: 0 15px;
}

.btn-box .ico_type_red,
.btn-box .ico_type_gray {
    min-width: 172px;
}

/* button */
.ico_type_red {
    height: 60px;
    padding: 15px 50px;
    font-size: 20px;
    border-radius: 10px;
    display: inline-block;
    text-align: center;
    font-weight: 500;
    line-height: 30px;
    color: #fff;
    background-color: #cd1519;
}

.ico_type_red.mid {
    height: 50px;
    font-size: 17px;
    line-height: 18px;
}

.ico_type_red.login {
    width: 100%
}

.ico_type_red.ft30 {
    height: 70px;
    padding: 0px 50px;
    font-size: 30px;
    line-height: 70px;
}

/* etc */
.fred {
    color: #dc0000;
}

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

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

h2.title20B.one {
    font-size: 20px;
    font-weight: 500;
    color: #000000;
    letter-spacing: -1px;
    margin: 0px 0 15px 0
}

.fsmall-14 {
    font-size: 14px;
}


/* tabs */
.tab-cmm {
    position: relative;
    margin-bottom: 25px;
    padding: 0 30px;
    font-size: 0;
    border-bottom: 1px solid #1e78ff;
}

.tab-cmm a {
    position: relative;
    width: 40%;
    height: 46px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 18px;
    line-height: 46px;
    font-weight: 600;
    color: #494d50;
    border: 1px solid #e1e1e1;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
}

.tab-cmm a + a {
    margin-left: 2px;
}

.tab-cmm a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    right: 0;
    height: 1px;
    background-color: #1e78ff;
}

.tab-cmm a.on {
    border-color: #1e78ff;
    color: #1e78ff;
}

.tab-cmm a.on:after {
    background-color: #fff;
}

.tab-cmm-02 {
    position: relative;
    margin-bottom: 35px;
    display: flex;
    font-size: 0;
    border-bottom: 1px solid #121212;
}

.tab-cmm-02 a {
    position: relative;
    width: 40%;
    height: 46px;
    flex: 1;
    text-align: center;
    font-size: 18px;
    line-height: 46px;
    font-weight: 600;
    color: #494d50;
    border: 1px solid #e1e1e1;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
}

.tab-cmm-02 a + a {
    margin-left: 2px;
}

.tab-cmm-02 a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    right: 0;
    height: 1px;
    background-color: #121212;
}

.tab-cmm-02 a.on {
    border-color: #121212;
    color: #121212;
}

.tab-cmm-02 a.on:after {
    background-color: #fff;
}

.pw-info-wrap .input-form {
    margin-top: 13px;
    font-size: 0;
}

.pw-info-wrap .input-form dt,
.pw-info-wrap .input-form dd {
    padding: 6px 0;
    display: inline-block;
    vertical-align: middle;
}

.pw-info-wrap .input-form dt {
    width: 150px;
    font-size: 18px;
    font-weight: 600;
}

.pw-info-wrap .input-form dd {
    width: calc(100% - 160px);
}

.pw-info-wrap .input-form dd input[type="password"] {
    width: 300px;
}

.pw-info-wrap .rules {
    margin-top: 15px;
    padding: 15px 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
}

.pw-info-wrap .rules dt {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
}

.pw-info-wrap .rules dd {
    font-size: 16px;
    line-height: 1.4;
}

.pw-info-wrap .rules dd .check {
    width: 68px;
    display: inline-block;
    vertical-align: top;
    color: #acb1b5;
}

.pw-info-wrap .rules dd .check.ok {
    color: #1e78ff;
}

.pw-info-wrap .rules dd .check.ok:before {
    content: '';
    position: relative;
    top: -1px;
    width: 20px;
    height: 14px;
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
    background: url('../img/icon_ok.png') no-repeat;
}

.pw-info-wrap .rule-noti {
    margin-top: 10px;
    padding: 10px 18px;
    font-size: 16px;
    font-weight: 500;
    color: #b60e0e;
    border: 1px solid #f5d3d3;
    background-color: #ffe9e9;
    border-radius: 10px;
}

.sheet-cmm-modify {
    line-height: 1.5;
}

.sheet-cmm-modify + .sheet-cmm-modify {
    margin-top: 60px;
}

.sheet-cmm-modify table {
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;
}

.sheet-cmm-modify th,
.sheet-cmm-modify td {
    vertical-align: middle;
    font-size: 18px;
    border: 1px solid #c1c1c1;
    border-right: none;
}

.sheet-cmm-modify th:first-child {
    border-left: none;
}

.sheet-cmm-modify th {
    padding: 17px 0;
    text-align: center;
    font-weight: 600;
}

.sheet-cmm-modify td {
    padding: 17px 20px;
    text-align: left;
}

.sheet-cmm-modify td.multi-rows {
    padding: 0;
}

.sheet-cmm-modify td.multi-rows .row {
    padding: 15px 20px;
}

.sheet-cmm-modify td.multi-rows .row + .row {
    border-top: 1px solid #c1c1c1;
}

.sheet-cmm-modify td select {
    min-width: 40%;
    height: 40px;
    line-height: 38px;
    vertical-align: middle;
}

.sheet-cmm-modify td textarea {
    width: 100%;
}

.sheet-cmm-modify td input[type="text"],
.sheet-cmm-modify td input[type="password"],
.sheet-cmm-modify td input[type="email"],
.sheet-cmm-modify td input[type="tel"],
.sheet-cmm-modify td input[type="number"] {
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
}

.sheet-cmm-modify .check-cmm.type-top {
    margin-bottom: 12px;
}

.sheet-cmm-modify .select-items-box {
    margin-top: -1px;
}

.sheet-cmm-modify .time-select-wrap {
    margin: -7px -20px -7px 0;
}

.sheet-cmm-modify .required {
    color: #ff2424;
    position: relative;
    left: 2px;
    top: -3px;
}

.sheet-cmm-modify .agree-box {
    margin-top: 0;
    line-height: 1.4;
    border: none;
}

.sheet-cmm-modify .agree-box .check-cmm {
    margin-top: 20px;
    display: block;
}

.sheet-cmm-modify .limit-byte {
    margin-top: 12px;
    text-align: right;
    font-size: 16px;
}

.sheet-cmm-modify .limit-byte .byte {
    color: #ff2424;
}

.sheet-cmm-modify .sheet-cmm-noti {
    margin-top: 10px;
    padding: 8px 18px;
    font-size: 16px;
    font-weight: 600;
    color: #494d50;
    border: 1px solid #e1e1e1;
    background-color: #f7f7f7;
    border-radius: 10px;
}

.sheet-cmm-modify .sheet-cmm-noti.ver2 {
    color: #b60e0e;
    border-color: #f1c0c0;
    background-color: #ffe0e0;
}

.sheet-cmm-modify.type-my-info th {
    padding: 17px 10px 17px 29px;
    text-align: left;
}

.sheet-cmm-modify.type-my-info th .en-txt {
    position: relative;
    margin-left: 11px;
    padding-left: 11px;
    display: inline-block;
    vertical-align: top;
    font-weight: 400;
    color: #acb1b5;
}

.sheet-cmm-modify.type-my-info th .en-txt:before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 1px;
    height: 15px;
    background-color: #acb1b5;
}

.sheet-cmm-modify.type-my-info td {
    font-weight: 600;
}

.sheet-cmm-modify.type-my-info .pw-info-wrap {
    font-weight: 400;
}

.sheet-cmm-modify.type-my-info .pw-info-wrap .desc {
    font-size: 16px;
    line-height: 1.5;
}

.sheet-cmm-modify.type-my-info .tel-input-field {
}

.sheet-cmm-modify.type-my-info .tel-input-field select,
.sheet-cmm-modify.type-my-info .birthday-field select,
.sheet-cmm-modify.type-my-info .email-field select,
.sheet-cmm-modify.type-my-info .email-field input[type="text"] {
    width: 200px;
    min-width: auto;
}

.sheet-cmm-modify.type-my-info .email-field select {
    margin-right: 5px;
}

.sheet-cmm-modify.type-my-info .birthday-field select + select {
    margin-left: 5px;
}

.sheet-cmm-modify.type-my-info .tel-input-field input[type="number"],
.sheet-cmm-modify.type-my-info .tel-input-field input[type="text"] {
    width: 200px;
    margin-left: 5px;
}

.sheet-cmm-modify.type-my-info .pw-info-wrap {
    padding: 10px 0;
}

.sheet-in-noti {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: #ff6724;
}

.sheet-in-noti02 {
    margin-top: 10px;
    font-size: 16px;
}

.sheet-noti {
    margin-bottom: 13px;
    font-size: 24px;
    font-weight: 700;
    color: #003f9f;
}

.accept-agree {
}

.accept-agree .desc {
    margin-top: 15px;
    font-size: 16px;
    line-height: 1.5;
}

.membership-withdrawal {
    margin-top: 50px;
    padding: 20px 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #c1c1c1;
    background-color: #f7f7f7;
}

.membership-withdrawal strong {
    font-size: 27px;
    font-weight: 700;
}

.membership-withdrawal strong:before {
    content: '';
    width: 64px;
    height: 68px;
    margin-right: 28px;
    display: inline-block;
    vertical-align: middle;
    background: url('../img/icon_withdrawal.png') no-repeat;
}

.member_contents {
    padding-bottom: 50px;
}

.member-form {
}

.member-form input[type="text"],
.member-form input[type="password"] {
    width: 100%;
    margin-bottom: 10px;
}

.member-form .id-save {
    margin-bottom: 20px;
}

.member-form .btn a {
    height: 50px;
    display: block;
    text-align: center;
    font-size: 21px;
    line-height: 50px;
    font-weight: 700;
    color: #fff;
    background-color: #cd1519;
    border-radius: 4px;
}

.member-form .other-links {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}

.member-form .other-links a {
    font-size: 18px;
    border-bottom: 1px solid #121212;
}

.member-welcome {
    padding: 60px 0 10px;
    text-align: center;
}

.member-welcome h4 {
    font-size: 34px;
}

.member-welcome h4 em {
    font-weight: 700;
}

.id-pw-wrap {
    padding-bottom: 80px;
    display: flex;
    justify-content: center;
    align-content: stretch;
    font-size: 0;
}

.id-pw-wrap .find-form {
    position: relative;
    width: 410px;
    margin: 0 10px;
    padding: 20px;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    background-color: #fff;
}

.id-pw-wrap .find-form .desc {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -1px;
}

.id-pw-wrap .find-form .find-msg {
    position: absolute;
    left: 0;
    top: calc(100% + 20px);
    width: 100%;
    padding: 15px 18px;
    font-size: 15px;
    line-height: 1.5;
    color: #b60e0e;
    border: 1px solid #f1c0c0;
    background-color: #ffe0e0;
    border-radius: 10px;
}

.id-pw-wrap .find-form .find-msg em {
    font-weight: 700;
}

.id-pw-wrap .find-form .find-msg span {
    border-bottom: 1px solid #b60e0e;
}

.id-pw-wrap .find-form .btn {
    padding: 0;
}

.confirm-pw-box {
    width: 470px;
    margin: 0 auto;
    padding: 50px 0;
}

.confirm-pw-box p {
    margin-bottom: 23px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
}

.confirm-pw-box input[type="password"],
.confirm-pw-box a {
    width: 100%;
}

.confirm-pw-box input[type="password"] {
    margin-bottom: 20px;
}

.confirm-pw-box a {
    height: 50px;
    display: block;
    text-align: center;
    font-size: 21px;
    line-height: 50px;
    font-weight: 700;
    color: #fff;
    background-color: #cd1519;
    border-radius: 4px;
}

.join-process {
    margin-bottom: 45px;
}

.join-process ol {
    display: flex;
}

.join-process li {
    position: relative;
    flex: 1;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #494d50;
}

.join-process li + li:before {
    content: '';
    position: absolute;
    left: -14px;
    top: calc(50% - 25px);
    width: 28px;
    height: 50px;
    background: url('../img/icon_join_process_arr.png') no-repeat;
    background-size: 100% auto;
}

.join-process .icon {
    height: 64px;
    margin-bottom: 15px;
    overflow: hidden;
}

.join-process li.active {
    color: #cd1519;
}

.join-process li.active .icon img {
    margin-top: -64px;
}

.agree-guide {
    padding: 25px 5px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    border: 1px solid #e1e1e1;
    background-color: #f7f7f7;
    border-radius: 10px;
}

.agree-guide p {
    margin-bottom: 5px;
}

.agree-guide .check-cmm em {
    font-weight: 600;
}

.agree-guide {
    padding: 25px 5px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    border: 1px solid #e1e1e1;
    background-color: #f7f7f7;
    border-radius: 10px;
}

.agree-guide p {
    margin-bottom: 5px;
    font-size: 18px;
}

.agree-guide .check-cmm em {
    font-weight: 600;
}

.agree-box {
    margin-top: 30px;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
}

.agree-box p,
.agree-box th,
.agree-box td {
    font-size: 18px;
}

.agree-box .box-head {
    position: relative;
}

.agree-box .box-head h4 {
    padding: 25px 30px;
    font-size: 24px;
    font-weight: 700;
}

.agree-box .box-head .check-cmm,
.agree-box .box-head .trigger {
    position: absolute;
}

.agree-box .box-head .check-cmm em {
    font-weight: 400;
}

.agree-box .box-head .check-cmm {
    right: 98px;
    top: calc(50% - 18px);
}

.agree-box .box-head .trigger {
    right: 30px;
    top: calc(50% - 12px);
    width: 40px;
    height: 24px;
    background: url('../img/icon_arr_up.png') no-repeat;
    background-size: 100% auto;
    transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.agree-box .box-body {
    padding: 10px 30px 20px;
}

.agree-box.active .box-head .trigger {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.agree-box.active .box-body {
    display: none;
}

.agree-box .agree-txt {
    line-height: 1.4;
}

.agree-box .agree-txt p {
    margin-bottom: 15px;
}

.agree-box .agree-txt p em {
    font-weight: 600;
}

.agree-box .agree-txt table {
    margin-bottom: 15px;
    border-spacing: 0;
    border-collapse: collapse;
}

.agree-box .agree-txt th,
.agree-box .agree-txt td {
    border: 1px solid #e1e1e1;
}

.agree-box .agree-txt th {
    padding: 12px 0;
    text-align: center;
}

.agree-box .agree-txt td {
    padding: 12px 10px 12px 26px;
    text-align: left;
}

.agree-box .agree-txt .mo-th {
    display: none;
}

.agree-box .agree-txt .indent {
    padding-left: 14px;
    text-indent: -14px;
}

.agree-box .agree-txt .confirm-txt {
    margin-top: 40px;
    font-weight: 600;
}

.member-out-wrap {
}

.member-out-wrap .section + .section {
    margin-top: 45px;
}

.terms-cont h3 {
    margin-bottom: 35px;
    padding: 10px 30px;
    font-size: 22px;
    font-weight: 600;
}

.terms-cont .section {
    padding: 0 30px;
    font-size: 16px;
    line-height: 1.7;
}

.terms-cont .section + .section {
    margin-top: 20px;
    word-break: keep-all;
}

.terms-cont strong {
    margin-bottom: 5px;
    display: block;
    font-weight: 600;
}

.terms-cont table {
    margin: 10px 0;
}

.terms-cont table th,
.terms-cont table td {
    padding: 10px 10px 10px 20px;
    vertical-align: top;
    text-align: left;
    font-size: 16px;
    border: 1px solid #e1e1e1;
}

.terms-cont table th {
    font-weight: 600;
}


/*=================================================================================
* @media *
=================================================================================*/

@media (max-width: 1336px) {
    .main-section01 .main-banner-wrap .banner-item img {
        padding-left: 255px;
    }
}