/* 2602 교육상세 하단띠배너 리디자인 / 전은별 시작*/
/* ------font------ */
@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

/* ------------Common------------ */
.none_login_scroll_banner {
    width: 100%;
    height: 70px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100000;
    transition: all 0.2s;
    cursor: pointer;
}
.none_login_scroll_banner .wrap-banner {
    width: 100%;
    height: 70px;
    position: relative;
}
.none_login_scroll_banner .wrap-banner .content {
    width: 1080px;
    height: 70px;
    margin: 0 auto;
    position: relative;
}
.none_login_scroll_banner .wrap-banner .bg-right {
    width: 50%;
    height: 70px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(540px);
    transition: all 0.2s;
}
/* badge / Lecture */
.none_login_scroll_banner .content .badge-lecture{
    display: inline-block;
    width: 110px;
    height: 30px;
    margin: 20px 0;
    position: relative;
    border-radius: 15px;
    text-align: center;
    font-size: 18px;
    font-family: 'Isamanru';
    font-weight: normal;
    color: #fff;
    line-height: 32px;
}
.none_login_scroll_banner .content .badge-lecture .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    top: 12px;
}
.none_login_scroll_banner .content .badge-lecture .dot.dot-left{
    left: 6px;
}
.none_login_scroll_banner .content .badge-lecture .dot.dot-right{
    right: 6px;
}
/* badge / Free */
.none_login_scroll_banner .content .badge-free{
    display: inline-block;
    width: 110px;
    height: 70px;
    margin: 0;
    background: url("/resource/images/other/none_login_scroll_layer/badge-free.png") no-repeat center/100%;
}
/* Left Text */
.none_login_scroll_banner .content .wrap-text{
    width: 569px;
    height: 70px;
    position: absolute;
    top: 0;
    left: 110px;
    text-align: right;
    line-height: 72px;
}
.none_login_scroll_banner .content .explain-edu {
    float: right;
    width: fit-content;
    height: 70px;
    margin-right: 12px;
    font-size: 26px;
    font-family: 'Isamanru';
    font-weight: normal;
    word-spacing: -0.02em;
    letter-spacing: -0.05em;
}
.none_login_scroll_banner .content .explain-edu span{
    font-weight: 700;
}
.none_login_scroll_banner .content .explain-edu.explain-edu-small {
    margin-right: 10px;
    font-size: 24px;
}
.none_login_scroll_banner .content .name-edu {
    float: right;
    width: fit-content;
    height: 70px;
    font-size: 28px;
    font-family: 'Isamanru';
    font-weight: 700;
    word-spacing: -0.1em;
    letter-spacing: -0.02em;
}
/* Right Text */
.none_login_scroll_banner .content .join {
    width: 135px;
    height: 70px;
    position: absolute;
    top: 0;
    left: 812px;
    text-align: left;
    font-size: 28px;
    font-family: 'Isamanru';
    font-weight: normal;
    color: #fff;
    line-height: 72px;
    letter-spacing: -0.02em;
    z-index: 10;
}
/* arrow */
.none_login_scroll_banner .content .join span {
    width: 12px;
    height: 20px;
    position: absolute;
    top: 25px;
    right: 12px;
    fill: #fff;
    -webkit-animation: arrow-flow 1.8s infinite;
    animation: arrow-flow 1.8s infinite;
    opacity: 0;
}
.none_login_scroll_banner .content .join span svg {
    width: 100%;
    vertical-align: top;
}
.none_login_scroll_banner .content .join span:nth-of-type(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.none_login_scroll_banner .content .join span:nth-of-type(2) {
    right: 0;
    -webkit-animation-delay: .45s;
    animation-delay: .45s;
}
@-webkit-keyframes arrow-flow {
    0% {opacity: 0;}
    30% {opacity: 1;}
    60% {opacity: 1;}
    90% {opacity: 0;}
}
@keyframes arrow-flow {
    0% {opacity: 0;}
    30% {opacity: 1;}
    60% {opacity: 1;}
    90% {opacity: 0;}
}
/* Right parallelogram bg*/
.none_login_scroll_banner .content .bg-right-parallelogram{
    width: 33px;
    height: 70px;
    position: absolute;
    top: 0;
    right: 318px;
    z-index: 5;
}
/* Right trapezoid bg*/
.none_login_scroll_banner .content .bg-right-trapezoid{
    width: 340px;
    height: 70px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    transition: all 0.2s;
}
/* hover effect */
.none_login_scroll_banner:hover .bg-right{
    filter: brightness(90%);
}
.none_login_scroll_banner:hover .bg-right-trapezoid{        
    filter: brightness(90%);
}

/* ------------현장교육------------ */
/* 01 입찰기본이해 */
#edu_bottom_banner_basic .color-bg-bright {
    background-color: #ffecbe;
}
#edu_bottom_banner_basic .color-bg-deep {
    background-color: #ffae00;
}
#edu_bottom_banner_basic .explain-edu{
    color: #6b4a29;
}
#edu_bottom_banner_basic .name-edu{
    color: #ff9600;
}
#edu_bottom_banner_basic .bg-right-parallelogram{
    fill: #ffd568;
}
#edu_bottom_banner_basic .bg-right-trapezoid{
    fill: #ffae00;
}

/* 02 적격심사의 이해 */
#edu_bottom_banner_eligibility .color-bg-bright {
    background-color: #bff5d8;
}
#edu_bottom_banner_eligibility .color-bg-deep {
    background-color: #3cb878;
}
#edu_bottom_banner_eligibility .explain-edu {
    color: #045735;
}
#edu_bottom_banner_eligibility .name-edu {
    color: #3cb878;
}
#edu_bottom_banner_eligibility .bg-right-parallelogram {
    fill: #50d3ac;
}
#edu_bottom_banner_eligibility .bg-right-trapezoid {
    fill: #3cb878;
}

/* 03 원데이 입찰교육 */
#edu_bottom_banner_one_day .color-bg-bright {
    background-color: #fce6d0;
}
#edu_bottom_banner_one_day .color-bg-deep {
    background-color: #fd8b10;
}
#edu_bottom_banner_one_day .explain-edu {
    color: #8a3e00;
}
#edu_bottom_banner_one_day .name-edu {
    color: #fd8b10;
}
#edu_bottom_banner_one_day .bg-right-parallelogram {
    fill: #ffb966;
}
#edu_bottom_banner_one_day .bg-right-trapezoid {
    fill: #fd8b10;
}

/* 04 S클래스 분석교육 */
#edu_bottom_banner_s_class .color-bg-bright {
    background-color: #f8dce4;
}
#edu_bottom_banner_s_class .color-bg-deep {
    background-color: #ab1b41;
}
#edu_bottom_banner_s_class .explain-edu {
    color: #6f0e31;
}
#edu_bottom_banner_s_class .name-edu {
    color: #ab1b41;
}
#edu_bottom_banner_s_class .bg-right-parallelogram {
    fill: #e3748b;
}
#edu_bottom_banner_s_class .bg-right-trapezoid {
    fill: #ab1b41;
}

/* 05 VIP클래스 분석교육 */
#edu_bottom_banner_vip .color-bg-bright {
    background-color: #d3e1fd;
}
#edu_bottom_banner_vip .color-bg-deep {
    background-color: #2a45aa;
}
#edu_bottom_banner_vip .explain-edu {
    color: #202140;
}
#edu_bottom_banner_vip .name-edu {
    color: #2a45aa;
}
#edu_bottom_banner_vip .bg-right-parallelogram {
    fill: #727ea2;
}
#edu_bottom_banner_vip .bg-right-trapezoid {
    fill: #2a45aa;
}

/* 06 사이트 기본 교육 */
#edu_bottom_banner_site_base_ .color-bg-bright {
    background-color: #dce0ff;
}
#edu_bottom_banner_site_base_ .color-bg-deep {
    background-color: #4459ee;
}
#edu_bottom_banner_site_base_ .explain-edu {
    color: #1e2da1;
}
#edu_bottom_banner_site_base_ .name-edu {
    color: #4459ee;
}
#edu_bottom_banner_site_base_ .bg-right-parallelogram {
    fill: #92a3f9;
}
#edu_bottom_banner_site_base_ .bg-right-trapezoid {
    fill: #4459ee;
}

/* 07 사이트 심화 교육 */
#edu_bottom_banner_site_advanced_ .color-bg-bright {
    background-color: #ecddff;
}
#edu_bottom_banner_site_advanced_ .color-bg-deep {
    background-color: #6327cd;
}
#edu_bottom_banner_site_advanced_ .explain-edu {
    color: #2e007e;
}
#edu_bottom_banner_site_advanced_ .name-edu {
    color: #6327cd;
}
#edu_bottom_banner_site_advanced_ .bg-right-parallelogram {
    fill: #ad7ae3;
}
#edu_bottom_banner_site_advanced_ .bg-right-trapezoid {
    fill: #6327cd;
}

/* 08 건설업 인건비의 모든 것 */
#edu_bottom_banner_construction_labor_tax .color-bg-bright {
    background-color: #f5dfdf;
}
#edu_bottom_banner_construction_labor_tax .color-bg-deep {
    background-color: #a16564;
}
#edu_bottom_banner_construction_labor_tax .explain-edu {
    color: #430d0c;
}
#edu_bottom_banner_construction_labor_tax .name-edu {
    color: #a16564;
}
#edu_bottom_banner_construction_labor_tax .bg-right-parallelogram {
    fill: #d4a7a5;
}
#edu_bottom_banner_construction_labor_tax .bg-right-trapezoid {
    fill: #a16564;
}

/* 09 조충환 입찰분석 */
#edu_bottom_banner_special1 .color-bg-bright {
    background-color: #f1e5c5;
}
#edu_bottom_banner_special1 .color-bg-deep {
    background-color: #6f6150;
}
#edu_bottom_banner_special1 .explain-edu {
    color: #372a13;
}
#edu_bottom_banner_special1 .name-edu {
    color: #6f6150;
}
#edu_bottom_banner_special1 .bg-right-parallelogram {
    fill: #ada195;
}
#edu_bottom_banner_special1 .bg-right-trapezoid {
    fill: #6f6150;
}

/* 10 간이종심제 최상위 분석 */
#edu_bottom_banner_special3 .color-bg-bright {
    background-color: #c4e7ff;
}
#edu_bottom_banner_special3 .color-bg-deep {
    background-color: #088ae3;
}
#edu_bottom_banner_special3 .explain-edu {
    color: #183c56;
}
#edu_bottom_banner_special3 .name-edu {
    color: #088ae3;
}
#edu_bottom_banner_special3 .bg-right-parallelogram {
    fill: #00b8ef;
}
#edu_bottom_banner_special3 .bg-right-trapezoid {
    fill: #088ae3;
}

/* ------------온라인강의------------ */
/* 01 입찰기본이해 */
#online_bottom_banner_basic_online .color-bg-bright {
    background-color: #ffeab2;
}
#online_bottom_banner_basic_online .color-bg-deep {
    background-color: #ffae00;
}
#online_bottom_banner_basic_online .explain-edu {
    color: #6b4a29;
}
#online_bottom_banner_basic_online .name-edu {
    color: #ff7e00;
}
#online_bottom_banner_basic_online .bg-right-parallelogram {
    fill: #ffd568;
}
#online_bottom_banner_basic_online .bg-right-trapezoid {
    fill: #ffae00;
}

/* 02 적격심사의 이해 */
#online_bottom_banner_eligibility_online .color-bg-bright {
    background-color: #bff5d8;
}
#online_bottom_banner_eligibility_online .color-bg-deep {
    background-color: #3cb878;
}
#online_bottom_banner_eligibility_online .explain-edu {
    color: #045735;
}
#online_bottom_banner_eligibility_online .name-edu {
    color: #3cb878;
}
#online_bottom_banner_eligibility_online .bg-right-parallelogram {
    fill: #50d3ac;
}
#online_bottom_banner_eligibility_online .bg-right-trapezoid {
    fill: #3cb878;
}

/* 03 간이종심제 기초입문 */
#online_bottom_banner_simple_online .color-bg-bright {
    background-color: #d7e5ec;
}
#online_bottom_banner_simple_online .color-bg-deep {
    background-color: #676e78;
}
#online_bottom_banner_simple_online .explain-edu {
    color: #323c4e;
}
#online_bottom_banner_simple_online .name-edu {
    color: #676e78;
}
#online_bottom_banner_simple_online .bg-right-parallelogram {
    fill: #a1a9ae;
}
#online_bottom_banner_simple_online .bg-right-trapezoid {
    fill: #676e78;
}
/* 2602 교육상세 하단띠배너 리디자인 / 전은별 끝*/