@charset "UTF-8";

.sec-visual .visual-row {display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -15px; margin-right: -15px;}
.sec-visual .visual-row .visual-col.txt {width: 60%; padding: 20px;}
.sec-visual .visual-row .visual-col.img {width: 40%; background-size: cover; background-position: center;}
.sec-visual .visual-row .visual-col .title {margin-bottom: 10px; font-size: 20px; font-weight: 700;}
.sec-visual .visual-row .visual-col .content {font-size: 14px;}
.sec-visual .visual-row .visual-col .quick-link {margin-top: 10px; margin-left: 0;}
.sec-visual .visual-row .visual-col .quick-link li ~ li {margin-top: 3px;}
.sec-visual .visual-row .visual-col .quick-link li > a {font-size: 14px; font-weight: 700;}
.sec-visual .visual-row .visual-col .quick-link li > a:hover {text-decoration: underline;}
.sec-visual .visual-row .visual-col .more {display: inline-block; position: relative; margin-top: 10px; padding-right: 14px; font-size: 14px; font-weight: 700; transition: padding .15s cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transition: padding .15s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: padding .15s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: padding .15s cubic-bezier(0.215, 0.610, 0.355, 1.000);}
.sec-visual .visual-row .visual-col .more:hover {padding-right: 18px;}
.sec-visual .visual-row .visual-col .more:after {content: ''; display: block; position: absolute; top: 10px; right: 0; width: 5px; height: 8px; background: url(../images/icon_arrow_right_b.png) no-repeat;}
.sec-visual.about .visual-row .visual-col.txt {background-color: #658cd2;}
.sec-visual.about .visual-row .visual-col.img {background-image: url(/static/new_index/images/img_visual_001.jpg);}
.sec-visual.lec .visual-row .visual-col.txt {background-color: #4c96c1;}
.sec-visual.lec .visual-row .visual-col.img {background-image: url(/static/new_index/images/img_visual_002.jpg);}
.sec-visual.com .visual-row .visual-col.txt {background-color: #38a99b;}
.sec-visual.com .visual-row .visual-col.img {background-image: url(/static/new_index/images/img_visual_003.jpg);}

.sec-classify {padding: 15px 0; border-bottom: 1px solid #eee;}
.sec-classify .classify-item {word-break: keep-all; display: block; padding-top: 75px; font-size: 14px; text-align: center; transition: all .15s ease-in-out;}
.sec-classify .classify-item:hover {color: #4d8dc5;}
.sec-classify .col-sm-4 {margin: 15px 0; padding: 0 5px;}
.sec-classify .col-sm-4:nth-child(1) .classify-item {background: url(/static/new_index/images/icon_c_000.png) no-repeat top 2px center;}
.sec-classify .col-sm-4:nth-child(1) .classify-item:hover {background-image: url(/static/new_index/images/icon_c_000_hover.png);}
.sec-classify .col-sm-4:nth-child(2) .classify-item {background: url(/static/new_index/images/icon_c_001.png) no-repeat top 2px center;}
.sec-classify .col-sm-4:nth-child(2) .classify-item:hover {background-image: url(/static/new_index/images/icon_c_001_hover.png);}
.sec-classify .col-sm-4:nth-child(3) .classify-item {background: url(/static/new_index/images/icon_c_002.png) no-repeat top 1px center;}
.sec-classify .col-sm-4:nth-child(3) .classify-item:hover {background-image: url(/static/new_index/images/icon_c_002_hover.png);}
.sec-classify .col-sm-4:nth-child(4) .classify-item {background: url(/static/new_index/images/icon_c_003.png) no-repeat top center;}
.sec-classify .col-sm-4:nth-child(4) .classify-item:hover {background-image: url(/static/new_index/images/icon_c_003_hover.png);}
.sec-classify .col-sm-4:nth-child(5) .classify-item {background: url(/static/new_index/images/icon_c_004.png) no-repeat top center;}
.sec-classify .col-sm-4:nth-child(5) .classify-item:hover {background-image: url(/static/new_index/images/icon_c_004_hover.png);}
.sec-classify .col-sm-4:nth-child(6) .classify-item {background: url(/static/new_index/images/icon_c_005.png) no-repeat top 7px center;}
.sec-classify .col-sm-4:nth-child(6) .classify-item:hover {background-image: url(/static/new_index/images/icon_c_005_hover.png);}
.sec-classify .col-sm-4:nth-child(7) .classify-item {background: url(/static/new_index/images/icon_c_006.png) no-repeat top center;}
.sec-classify .col-sm-4:nth-child(7) .classify-item:hover {background-image: url(/static/new_index/images/icon_c_006_hover.png);}
.sec-classify .col-sm-4 ~ .col-sm-4 {border-left: 1px solid #ddd;}

.sec-course {padding: 20px 0 35px;}
.sec-course .course-top {display: block; margin-bottom: 15px;}
.sec-course .course-top .title {font-size: 20px; font-weight: 700;}
.sec-course .course-top .tab-group {margin-top: 5px; margin-left: auto;}
.sec-course .course-top .tab-group li {display: inline-block; position: relative;}
.sec-course .course-top .tab-group li ~ li {margin-left: 12px; padding-left: 12px;}
.sec-course .course-top .tab-group li ~ li:before {content: ''; display: block; position: absolute; top: 6px; left: -1px; width: 1px; height: 12px; background-color: #ccc;}
.sec-course .course-top .tab-group .tab {font-size: 14px; color: #666; transition: color .15s ease-in-out;}
.sec-course .course-top .tab-group .tab:hover {color: #4d8dc5;}
.sec-course .course-top .tab-group .tab.active {font-weight: 700; color: inherit;}
.sec-course .course-carousel .course-item .course-thumb {display: block;}
.sec-course .course-carousel .course-item .course-thumb figure {display: block; position: relative; width: 100%; height: 175px;}
.sec-course .course-carousel .course-item .course-thumb figure img {width: 100%; height: 100%;}
.sec-course .course-carousel .course-item .course-thumb figure .more {z-index: 10; opacity: 0; filter: alpha(opacity=0); display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(73, 126, 220, .85); transition: all .3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transition: all .3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: all .3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: all .3s cubic-bezier(0.215, 0.610, 0.355, 1.000);}
.sec-course .course-carousel .course-item .course-thumb figure .more > span {position: absolute; top: 50%; left: 50%; margin-left: -45px; padding: 5px 12px; border: 1px solid #fff; border-radius: 2px; font-size: 13px; text-align: center; color: #fff; transition: all .3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transition: all .3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: all .3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: all .3s cubic-bezier(0.215, 0.610, 0.355, 1.000);}
.sec-course .course-carousel .course-item:hover .course-thumb figure .more {opacity: 1; filter: none;}
.sec-course .course-carousel .course-item:hover .course-thumb figure .more > span {top: 40%;}
.sec-course .course-carousel .course-item .course-title {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 50px; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; margin-top: 12px; font-size: 15px; font-weight: 700;}
.sec-course .course-carousel .course-item:hover .course-title {text-decoration: underline;}
.sec-course .course-carousel .course-item .course-info {margin-top: 5px; font-size: 13px;}
.sec-course .course-carousel .course-item .course-info .instructor span {display: inline-block; position: relative;}
.sec-course .course-carousel .course-item .course-info .instructor span ~ span {margin-left: 8px; padding-left: 8px;}
.sec-course .course-carousel .course-item .course-info .instructor span ~ span:before {content: ''; display: block; position: absolute; top: 6px; left: 0; width: 1px; height: 12px; background-color: #bbb;}
.sec-course .course-carousel .course-item .course-info .period {display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee;}
.sec-course .course-carousel .course-item .course-info .period .date {font-size: 13px; color: #666;}
.sec-course .course-carousel .course-item .course-info .period .state {margin-left: auto; padding: 1px 4px 2px; border-radius: 3px; font-size: 12px; color: #fff;}
.sec-course .course-carousel .course-item .course-info .period .state.ing  {background-color: #05A823;}
.sec-course .course-carousel .course-item .course-info .period .state.soon {background-color: #C28400;}
.sec-course .course-carousel .course-item .course-info .period .state.possible {background-color: #4c6ef5;}
.sec-course .course-carousel .course-item .course-info .period .state.end {background-color: #888;}
.sec-course .course-carousel .owl-nav > button {position: absolute; top: 20%; width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 3px 6px rgba(0, 0, 0, .2); background-color: rgba(255, 255, 255, .95); background-repeat: no-repeat;}
.sec-course .course-carousel .owl-nav > button.owl-prev {left: -15px; background-image: url(/static/new_index/images/icon_arrow_prev.png); background-position: center left 19px;}
.sec-course .course-carousel .owl-nav > button.owl-next {right: -15px; background-image: url(/static/new_index/images/icon_arrow_next.png); background-position: center right 19px;}
.sec-course .course-carousel .owl-nav > button > span {display: block; position: absolute; left: -9999px; text-indent: -9999px; width: 0; height: 0; overflow: hidden; font-size: 1px; line-height: 0; white-space: nowrap;}

.sec-course .no-content {display: flex; height: 310px; background-color: #f0f0f0; flex-flow: column; justify-content: center; align-items: center; color: #888;}
.sec-course .no-content p {position: relative; padding-top: 80px; font-size: 17px;}
.sec-course .no-content p:before {content: '!'; display: block; position: absolute; top: 0; left: 50%; width: 60px; height: 60px; margin-left: -30px; border: 4px solid #ccc; border-radius: 50%; font-size: 34px; font-weight: 700; text-align: center; color: #bbb;}
.sec-course .no-content .go {display: inline-block; position: relative; margin-top: 30px; padding-right: 15px; font-size: 17px; font-weight: 700; color: #4d8dc5; transition: padding .15s ease-in-out;}
.sec-course .no-content .go:before {content: ''; display: block; position: absolute; top: 9px; right: 0; width: 5px; height: 8px; background: url(../images/icon_arrow_right_bl.png) no-repeat;}
.sec-course .no-content .go:hover {padding-right: 20px;}

.sec-number {padding: 20px 0; background-color: #f2f2f2;}
.sec-number .title {margin-bottom: 30px; font-size: 20px; font-weight: 700; text-align: center;}
.sec-number .col-sm-4 ~ .col-sm-4 {border-left: 1px solid #ccc;}
.sec-number .number-item {padding-top: 60px; background-repeat: no-repeat; text-align: center;}
.sec-number .number-item.student {background-image: url(/static/new_index/images/icon_n_001.png); background-position: top center;}
.sec-number .number-item.course {background-image: url(/static/new_index/images/icon_n_002.png); background-position: top 4px center;}
.sec-number .number-item.agency {background-image: url(/static/new_index/images/icon_n_003.png); background-position: top center;}
.sec-number .number-item .sub-title {font-size: 17px; font-weight: 700;}
.sec-number .number-item .cont {margin-top: 10px; font-size: 14px;}
.sec-number .number-item .link {display: inline-block; position: relative; margin-top: 15px; padding-right: 15px; font-size: 14px; font-weight: 700; transition: padding .15s ease-in-out, color .1s ease-in-out;}
.sec-number .number-item .link:before {content: ''; display: block; position: absolute; top: 7px; right: 0; width: 5px; height: 8px; background: url(../images/icon_arrow_right_b.png) no-repeat;}
.sec-number .number-item .link:hover {padding-right: 20px; color: #4d8dc5;}
.sec-number .number-item .link:hover:before {background-image: url(/static/new_index/images/icon_arrow_right_bl.png);}

/* course card */
.course-info .instructor {
    max-height: 22px;
    vertical-align: middle;
}

.course-info .instructor .course-instructor {
    height: 100%;
    vertical-align: top; max-width: 35%;
}

.course-info .instructor .kr01_school {
    height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 65%;
}

.new-rc-search ul.ui-autocomplete {
    left: 0 !important;
}


/* --------------------------
 *    media
 * --------------------------
**/

@media (min-width: 768px) {
    .sec-visual .visual-row .visual-col.txt {
        width: 40%;
        padding: 30px;
    }

    .sec-visual .visual-row .visual-col .title {
        font-size: 28px;
    }

    .sec-visual .visual-row .visual-col .content {
        font-size: 16px;
    }

    .sec-visual .visual-row .visual-col .quick-link {
        margin-top: 15px;
    }

    .sec-visual .visual-row .visual-col .quick-link li ~ li {
        margin-top: 5px;
    }

    .sec-visual .visual-row .visual-col .quick-link li > a {
        font-size: 16px;
    }

    .sec-visual .visual-row .visual-col .more {
        margin-top: 30px;
        font-size: 16px;
    }

    .sec-visual .visual-row .visual-col.img {
        width: 60%;
    }

    .sec-classify .classify-item {
        font-size: 16px;
    }

    .sec-course {
        padding: 40px 0 65px;
    }

    .sec-course .course-top {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .sec-course .course-top .title {
        font-size: 22px;
    }

    .sec-course .course-top .tab-group {
        margin-top: 0;
    }

    .sec-course .course-top .tab-group .tab {
        margin-top: 0;
        font-size: 16px;
    }

    .sec-course .course-carousel .course-item .course-thumb figure .more > span {
        margin-left: -60px;
        font-size: 15px;
    }

    .sec-course .course-carousel .course-item .course-title {
        font-size: 17px;
    }

    .sec-course .course-carousel .course-item .course-info {
        margin-top: 8px;
        font-size: 15px;
    }

    .sec-course .course-carousel .course-item .course-info .period .date {
        font-size: 14px;
    }

    .sec-course .course-carousel .course-item .course-info .period .state {
        font-size: 13px;
    }

    .sec-number {
        padding: 40px 0 50px;
    }

    .sec-number .title {
        font-size: 24px;
    }

    .sec-number .number-item .sub-title {
        font-size: 24px;
    }

    .sec-number .number-item .cont {
        height: 48px;
        font-size: 16px;
    }

    .sec-number .number-item .link {
        font-size: 17px;
    }
}

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

@media (min-width: 1200px) {
    .sec-visual .visual-row {
        margin-left: -30px;
        margin-right: -30px;
    }
    
    .sec-classify {
        padding: 30px 0;
    }
    
    .sec-course .course-carousel .owl-nav > button.owl-prev {
        left: -25px;
    }
    
    .sec-course .course-carousel .owl-nav > button.owl-next {
        right: -25px;
    }
}