/* wbuser */

/* 메인 */
/* 메인 배너 */
.banner-main {overflow: hidden; position: relative;}
.banner-main img {vertical-align: top;}
.banner-main .box {overflow: hidden; display:block; position: relative; height: 300px;}
.banner-main .img {position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%);}
.banner-main .btn-banner-main-prev,
.banner-main .btn-banner-main-next {opacity: .5; position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin-top:-25px; padding: 0; border: 0; background: #fff; border-radius: 200px; z-index: 3; transition: opacity .3s;}
.banner-main .btn-banner-main-prev:before,
.banner-main .btn-banner-main-next:before {content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 23px; margin: -11px 0 0 -6px;}
.banner-main .btn-banner-main-prev {margin-left: -660px;}
.banner-main .btn-banner-main-prev:before {background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_lt_left.png") no-repeat 0 0;}
.banner-main .btn-banner-main-next {margin-left: 610px;}
.banner-main .btn-banner-main-next:before {background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_gt_right.png") no-repeat 0 0;}
.banner-main .btn-banner-main-prev:hover,
.banner-main .btn-banner-main-next:hover {opacity: 1;}

/* lnb quick */
.lnb-quick {background: #2182dd; background: -moz-linear-gradient(left, #2182dd 0%, #217bdd 100%); background: -webkit-linear-gradient(left, #2182dd 0%,#217bdd 100%); background: linear-gradient(to right, #2182dd 0%,#217bdd 100%); text-align: center;}
.lnb-quick .lnb-wrap {max-width: 1200px; margin: 0 auto; padding: 0 30px; font-size: 0; box-sizing: border-box;}
.lnb-quick .btn-quick {display: inline-block; height: 110px; padding: 14px 0 0; font-size: 18px; color: #fff; font-weight: 500; text-align: center; box-sizing: border-box; vertical-align: top;}
.lnb-quick .btn-quick:before {content: ""; display: block; height: 54px; margin-bottom: 6px; background-repeat: no-repeat; background-position: 50% 50%; transition: background .3s;}
.lnb-quick .ico-alllist:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_alist.png");}
.lnb-quick .ico-list:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_pagelist.png");}
.lnb-quick .ico-paper:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_paper.png");}
.lnb-quick .ico-keyboard:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_keyboard.png");}
.lnb-quick .ico-remote:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_remote.png");}
.lnb-quick .ico-board:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_board.png");}
.lnb-quick .ico-question:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_questionbubble.png");}
.lnb-quick .ico-smartpager:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_smartpager.png");}
.lnb-quick .ico-vr:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_vrview.png");}
.lnb-quick .ico-file:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_filefolder.png");}
.lnb-quick .btn-quick:hover:before {background-position-y: 20%;}
.lnb-quick .ico-alllist:hover:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_alist_hover.png");}
.lnb-quick .ico-list:hover:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_pagelist_hover.png");}
.lnb-quick .ico-paper:hover:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_paper_hover.png");}
.lnb-quick .ico-keyboard:hover:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_keyboard_hover.png");}
.lnb-quick .ico-remote:hover:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_remote_hover.png");}
.lnb-quick .ico-board:hover:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_board_hover.png");}
.lnb-quick .ico-question:hover:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_questionbubble_hover.png");}
.lnb-quick .ico-smartpager:hover:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_smartpager_hover.png");}
.lnb-quick .ico-vr:hover:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_vrview_hover.png");}
.lnb-quick .ico-file:hover:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_filefolder_hover.png");}

.lnb-quick .lnb-col3 {padding: 0 150px;}
.lnb-quick .lnb-col3 .btn-quick {width: calc(100% / 3);}
.lnb-quick .lnb-col4 {padding: 0 30px;}
.lnb-quick .lnb-col4 .btn-quick {width: calc(100% / 4);}
.lnb-quick .lnb-col5 .btn-quick {width: calc(100% / 5);}

.lnb-quick .is-mobile {display: none;}

/* 유저정보 - 로그인전 */
.userinfo-main {background: #fff;}
.userinfo-main .userinfo-wrap {max-width: 1200px; margin: 0 auto; padding: 40px 0 60px;}

/* 유저정보 - 로그인후 */
.userinfo-main .userinfo-detail {position: relative;}
.userinfo-main .userinfo-detail .userinfo-detail-user {font-size: 0;}
.userinfo-main .userinfo-detail .selectBox {height: 30px; margin-right: 10px;}
.userinfo-main .userinfo-detail .selectBox select {line-height: 28px;}
.userinfo-main .userinfo-detail .selectBox label {height: 30px; color: #222; line-height: 28px;}
.userinfo-main .userinfo-detail .selectBox label span {margin-left: 10px;}
.userinfo-main .userinfo-detail .selectBox label:after {top: 50%; margin-top: -3px;}
.userinfo-main .userinfo-detail-name {display: inline-block; font-size: 24px; vertical-align: middle;}
.userinfo-main .userinfo-detail-email {font-size: 16px; color: #666; font-weight: 300;}
.userinfo-main .btn-tc-go {display: inline-block; position: relative; height: 28px; margin-left: 10px; padding: 0 21px 0 10px; border: 1px solid #ccc; font-size: 14px; color: #0746c7; font-weight: 400; background: #fff; line-height: 28px; vertical-align: middle; border-radius: 2px;}
.userinfo-main .btn-tc-go:after {content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 11px; margin-top: -5px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_gt_small.png") no-repeat 0 0; transition: right .25s;}
.userinfo-main .btn-tc-go:hover:after {right: 7px;}

.userinfo-main .userinfo-detail-info {overflow: hidden; max-width: 50%; margin-top: 14px; font-size: 14px; line-height: 1.5;}
.userinfo-main .userinfo-detail-info li {float: left; margin-right: 20px;}
.userinfo-main .userinfo-detail-info li:first-child {margin-left: 0;}
.userinfo-main .userinfo-detail-info .tit {margin-right: 10px; padding-left: 10px; color: #666; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/usr/bul_4px.png") no-repeat 1px 50%;}
.userinfo-main .userinfo-detail-info .training-ins {overflow: hidden; float: none; margin-right :0;}
.userinfo-main .userinfo-detail-info .training-ins .tit {float: left;}
.userinfo-main .userinfo-detail-info .training-ins .conts {overflow: hidden; word-wrap: break-word; word-break: keep-all; -ms-word-break: break-all; overflow-wrap: break-word;}

.userinfo-main .userinfo-detail-status {overflow: hidden; position: absolute; right: 0; top: 14px; margin-top: 0; font-size: 20px;}
.userinfo-main .userinfo-detail-status li {position: relative; float: left; margin-left: 40px;  padding-right: 46px; line-height: 40px;}
.userinfo-main .userinfo-detail-status a {display: block;}
.userinfo-main .userinfo-detail-status li:first-child {margin-left: 0;}
.userinfo-main .userinfo-detail-status .cnt {position: absolute; right: 0; top: 0; width: 40px; height: 40px; font-size: 20px; color: #fff; border-radius: 100px; text-align: center; line-height: 40px;}
.userinfo-main .userinfo-detail-status .cnt-learning {background: #00a1c9;}
.userinfo-main .userinfo-detail-status .cnt-waiting {background: #f66800;}
.userinfo-main .userinfo-detail-status .cnt-complete {background: #824bc8;}
.userinfo-main .userinfo-detail-status .cnt-uncompleted {background: #555;}

.userinfo-course {position: relative; margin-top: 13px; padding-top: 20px; border-top: 1px solid #eee;}
.userinfo-course .tit-h2 {margin: 0; padding: 0; font-size: 24px; font-weight: 700;}
.userinfo-course .userinfo-course-contents {overflow: hidden; margin-top: 15px;}
.userinfo-course .userinfo-course-item {overflow: hidden; position: relative; text-align: left;}
.userinfo-course .userinfo-course-thumb {overflow: hidden; float: left; width: 250px; height: 132px; margin-right: 15px;}
.userinfo-course .userinfo-course-info {overflow: hidden; text-align: left;}
.userinfo-course .userinfo-course-info .subject {font-size: 20px; font-weight: 400; line-height: 1.2; display: -webkit-box; height: 48px; white-space: normal; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.userinfo-course .userinfo-course-info .box {overflow: hidden; margin-top: 34px;}
.userinfo-course .userinfo-course-info .info {float: left; margin-right: 15px; padding-top: 4px; font-weight: 400;}
.userinfo-course .userinfo-course-info .info li {margin-top: 12px; font-size: 0;}
.userinfo-course .userinfo-course-info .info li:first-child {margin-top: 0;}
.userinfo-course .userinfo-course-info .t {display: inline-block; width: 60px; font-size: 14px; color: #666; vertical-align: middle;}
.userinfo-course .userinfo-course-info .period {display: inline-block; font-size: 14px; color: #222; font-weight: 400; vertical-align: middle;}
.userinfo-course .userinfo-course-info .graph-progress {display: inline-block; position: relative; width: 100px; height: 8px; margin: 4px 0; background: #e7e7e7; vertical-align: middle; border-radius: 4px; white-space: nowrap;}
.userinfo-course .userinfo-course-info .graph-progress .bar {display: inline-block; height: 8px; background: #e74c3c; vertical-align: top; border-radius: 4px;}
.userinfo-course .userinfo-course-info .graph-progress .rate {position: absolute; left: calc(100% + 5px); top: 50%; margin-top: -8px; font-size: 14px; line-height: 16px;}
.userinfo-course .userinfo-course-info .graph-progress .rate em {color: #e74c3c; font-style: normal; font-weight: 700;}
.userinfo-course .userinfo-course-info .btn-classroom {float: left; width: 76px; height: 50px; font-size: 0; color: #fff; font-weight: 500; background: #1464d9; text-align: center; border-radius: 2px; transition: background .25s;}
.userinfo-course .userinfo-course-info .btn-classroom span {display: inline-block; font-size: 14px; vertical-align: middle; line-height: 1.2;}
.userinfo-course .userinfo-course-info .btn-classroom:before {content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle;}
.userinfo-course .userinfo-course-info .btn-classroom:hover {background: #082ca1;}
.userinfo-course .userinfo-course-info .dday {position: absolute; left: 5px; top: 5px; height: 17px; padding: 0 5px; font-size: 14px; color: #fff; font-weight: 500; background: #f66800; line-height: 17px; border-radius: 2px;}
.userinfo-course .userinfo-course-slider .userinfo-course-empty {height: 132px; padding: 26px 15px; font-size: 16px; box-sizing: border-box;}

.userinfo-course .slick-list {margin: 0 -10px;}
.userinfo-course .slick-slide {margin: 0 10px;}

.userinfo-course .userinfo-course-control {position: absolute; right: -4px; top: 21px; margin: 0; padding: 0 22px;}
.userinfo-course  .userinfo-course-control .prevBtn.btn-userinfo-course-prev,
.userinfo-course  .userinfo-course-control .nextBtn.btn-userinfo-course-next {position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; padding: 0; border: 0; transition: background .25s;}
.userinfo-course  .userinfo-course-control .prevBtn.btn-userinfo-course-prev {left: 0; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_lt_lft.png") no-repeat 50% 50%;}
.userinfo-course .userinfo-course-control .prevBtn.btn-userinfo-course-prev:hover {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_lt_lft_hover.png");}
.userinfo-course .userinfo-course-control .nextBtn.btn-userinfo-course-next {right: 0; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_gt_rgt.png") no-repeat 50% 50%;}
.userinfo-course .userinfo-course-control .nextBtn.btn-userinfo-course-next:hover {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_gt_rgt_hover.png");}
.userinfo-course .userinfo-course-control .control_paging li {display: none; padding-top: 1px; font-family: "Nanum Square"; font-size: 20px; font-weight: 700; color: #666;}
.userinfo-course .userinfo-course-control .control_paging .slash {margin: 0 2px; font-size: 16px; font-weight: 400; font-style: normal;}
.userinfo-course .userinfo-course-control .control_paging .slick-active {display: block;}
.userinfo-course .userinfo-course-control .control_paging .now_num {color: #f05c0a;}
.userinfo-course .userinfo-course-control .controlBox {display: none;}

.userinfo-course .userinfo-course-empty {padding: 24px 15px; font-size: 18px; background: #f5f7f9; text-align: center;}
.userinfo-course .userinfo-course-empty a {display: block;}
.userinfo-course .userinfo-course-empty .txt {margin: 20px 0 0 0; line-height: 1.4;}

.userinfo-main .userinfo-data {position: relative; margin-top: 12px;}
.userinfo-main .userinfo-data .userinfo-data-date {position: absolute; right: 0; top: -30px; font-size: 14px; color: #666;}
.userinfo-main .userinfo-data-table {width: 100%; table-layout: fixed; margin: 0; padding: 0; border-collapse: collapse; border: 0; border-spacing: 0;}
.userinfo-main .userinfo-data-table th {height: 49px; border: 1px solid #00a1c9; border-bottom: 0; font-size: 16px; color: #fff; font-weight: 300; background: #00a1c9;}
.userinfo-main .userinfo-data-table th span {display: block; position: relative; line-height: 20px;}
.userinfo-main .userinfo-data-table th span:before {content: ""; position: absolute; left: -2px; top: 0; width: 1px; height: 20px; background: #4dcceb;}
.userinfo-main .userinfo-data-table th:first-child span:before {display: none;}
.userinfo-main .userinfo-data-table td {height: 60px; padding: 15px; border: 1px solid #ccc; border-top: 0; font-size: 20px; color: #666; text-align: center; line-height: 1.6;}
.userinfo-main .userinfo-data-table .cnt {font-size: 24px; color: #222; font-weight: 400;}

.userinfo-main .userinfo-detail-smart {position: absolute; right: 0; bottom: 0;}
.userinfo-main .userinfo-detail-smart  .userinfo-detail-smart-training {font-size: 20px;}
.userinfo-main .userinfo-detail-smart  .userinfo-detail-smart-training:after {content: ""; clear: both; display: table; height: 0; font-size: 0; line-height: 0;}
.userinfo-main .userinfo-detail-smart .userinfo-detail-smart-tit {position: relative; float: left; margin-right: 5px; padding-left: 30px; font-size: 20px; line-height: 23px;}
.userinfo-main .userinfo-detail-smart .userinfo-detail-smart-tit:before {content: ""; display: block; position: absolute; left: 0; top: 0; width: 25px; height: 23px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_calendar.png") no-repeat 0 0;}
.userinfo-main .userinfo-detail-smart .userinfo-detail-smart-slider {overflow: hidden; width: 226px;}
.userinfo-main .userinfo-detail-smart .userinfo-detail-smart-date {width: 226px; font-size: 20px; color: #631bbf; white-space: nowrap;}
.userinfo-main .userinfo-detail-smart .userinfo-detail-smart-control {position: absolute; right: 0; top: -30px; margin: 0; padding: 0 22px;}
.userinfo-main .userinfo-detail-smart .userinfo-detail-smart-control .btn-smart-training-prev,
.userinfo-main .userinfo-detail-smart .userinfo-detail-smart-control .btn-smart-training-next {position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; padding: 0; border: 0; transition: background .25s;}
.userinfo-main .userinfo-detail-smart .userinfo-detail-smart-control .btn-smart-training-prev {left: 0; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_lt_lft.png") no-repeat 50% 50%;}
.userinfo-main .userinfo-detail-smart .userinfo-detail-smart-control .btn-smart-training-prev:hover {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_lt_lft_hover.png");}
.userinfo-main .userinfo-detail-smart .userinfo-detail-smart-control .btn-smart-training-next {right: 0; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_gt_rgt.png") no-repeat 50% 50%;}
.userinfo-main .userinfo-detail-smart .userinfo-detail-smart-control .btn-smart-training-next:hover {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_gt_rgt_hover.png");}
.userinfo-main .userinfo-detail-smart .userinfo-detail-smart-control .control_paging li {display: none; font-family: "Nanum Square"; font-size: 20px; font-weight: 700; color: #666;}
.userinfo-main .userinfo-detail-smart .userinfo-detail-smart-control .control_paging .slash {margin: 0 2px; font-size: 16px; font-weight: 400; font-style: normal;}
.userinfo-main .userinfo-detail-smart .userinfo-detail-smart-control .control_paging .slick-active {display: block;}
.userinfo-main .userinfo-detail-smart .userinfo-detail-smart-control .control_paging .now_num {color: #f05c0a;}
.userinfo-main .userinfo-detail-smart .userinfo-detail-smart-control .controlBox {display: none;}

.userinfo-main .userinfo-status {margin-top: 30px;}
.userinfo-main .userinfo-status:after {content: ""; clear: both; display: table; height: 0; font-size: 0; line-height: 0;}
.userinfo-main .userinfo-status .tit-h2 {margin: 0 0 14px 0; padding: 0; font-size: 24px; font-weight: 700;}
.userinfo-main .userinfo-training {position: relative; float: left; width: calc(100% - 260px);}
.userinfo-main .userinfo-training .userinfo-training-date {position: absolute; right: 0; top: 10px; font-size: 14px; color: #666;}
.userinfo-main .userinfo-coursestatus {float: right; max-width: 220px;}
.userinfo-main .userinfo-coursestatus .tit-h2 {margin-bottom: 16px; font-size: 22px; letter-spacing: -2px;}
.userinfo-main .userinfo-course-table {width: 100%; table-layout: fixed; margin: 0; padding: 0; border-collapse: collapse; border: 0; border-spacing: 0;}
.userinfo-main .userinfo-course-table th {height: 49px; border: 1px solid #824bc8; border-bottom: 0; font-size: 16px; color: #fff; font-weight: 300; background: #824bc8;}
.userinfo-main .userinfo-course-table th span {display: block; position: relative; line-height: 20px;}
.userinfo-main .userinfo-course-table th span:before {content: ""; position: absolute; left: -2px; top: 0; width: 1px; height: 20px; background: #4dcceb;}
.userinfo-main .userinfo-course-table th:first-child span:before {display: none;}
.userinfo-main .userinfo-course-table td {height: 70px; padding: 10px; border: 1px solid #ccc; border-top: 0; font-size: 0; text-align: center; line-height: 1.6;}
.userinfo-main .userinfo-course-table .tit {display: inline-block; margin-right: 5px; font-size: 16px; vertical-align: middle}
.userinfo-main .userinfo-course-table .cnt {display: inline-block; width: 70px; height: 70px; font-size: 20px; color: #ff6009; background: #f7f7f7; vertical-align: middle; text-align: center; line-height: 70px; border-radius: 100px;}

.userinfo-main .userinfo-aside {padding: 60px 15px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/bg/bg_userinfo_aside.jpg") repeat-x 50% 0;}
.userinfo-main .userinfo-aside .userinfo-aside-wrap {max-width: 1200px; margin: 0 auto;}
.userinfo-main .userinfo-aside .userinfo-aside-wrap:after {content: ""; clear: both; display: table; height: 0; font-size: 0; line-height: 0;}
.userinfo-main .userinfo-aside .userinfo-aside-item {position: relative; float: left; width: calc((100% - (35px * 3)) / 4); margin-left: 35px; background: #fff; text-align: center; box-shadow: 0 1px 3px 0 rgba(3, 9, 37, 0.17); transition: transform .3s;}
.userinfo-main .userinfo-aside .userinfo-aside-item:first-child {margin-left: 0;}
.userinfo-main .userinfo-aside .userinfo-aside-item .box {display: block; padding-top: 195px; background-repeat: no-repeat; background-position: 50% 0;}
.userinfo-main .userinfo-aside .userinfo-aside-item .box-in {position: relative; height: 164px; padding: 25px 5px 27px; box-sizing: border-box;}
.userinfo-main .userinfo-aside .userinfo-aside-item dt {font-size: 24px;font-weight: 700; transition: color .3s;}
.userinfo-main .userinfo-aside .userinfo-aside-item dt span {display: inline-block; position: relative; vertical-align: top;}
.userinfo-main .userinfo-aside .userinfo-aside-item dt em {position: relative; font-style: normal;}
.userinfo-main .userinfo-aside .userinfo-aside-item dd {margin-top: 17px; font-size: 16px; color: #666; line-height: 1.5;}
.userinfo-main .userinfo-aside .userinfo-aside-smart {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/usr/img_userinfo-aside_smart.jpg");}
.userinfo-main .userinfo-aside .userinfo-aside-cms {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/usr/img_userinfo-aside_cms.jpg");}
.userinfo-main .userinfo-aside .userinfo-aside-market {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/usr/img_userinfo-aside_market.jpg");}
.userinfo-main .userinfo-aside .userinfo-aside-vt {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/usr/img_userinfo-aside_vt.jpg");}
.userinfo-main .userinfo-aside .userinfo-aside-item:hover {transform: translateY(-10px);}
.userinfo-main .userinfo-aside .userinfo-aside-item:hover .box:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 195px; background-color: rgba(33, 97, 190, .9); background-repeat: no-repeat; background-position: 50% 50%;}
.userinfo-main .userinfo-aside .userinfo-aside-item:hover .box:after {content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid #134c9f; box-sizing: border-box;}
.userinfo-main .userinfo-aside .userinfo-aside-item:hover .box-in:before {content: ""; position: absolute; left: 50%; top: 0; width: 38px; height: 14px; margin-left: -19px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/usr/bg_userinfo_aside_item_dn.png") no-repeat 0 0;}
.userinfo-main .userinfo-aside .userinfo-aside-item:hover dt {color: #0746c7;}
.userinfo-main .userinfo-aside .userinfo-aside-item:hover .userinfo-aside-smart:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_smartpager_large.png");}
.userinfo-main .userinfo-aside .userinfo-aside-item:hover .userinfo-aside-cms:before{background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_cms.png");}
.userinfo-main .userinfo-aside .userinfo-aside-item:hover .userinfo-aside-market:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_market.png");}
.userinfo-main .userinfo-aside .userinfo-aside-item:hover .userinfo-aside-vt:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_vt.png");}
.userinfo-main .userinfo-aside .userinfo-aside-item:hover dt span:before {content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 13px; font-size: 0; background: #d4f3ff; line-height: 0;}

	/* 카드 컨텐츠 */
.process_content {padding:50px 0 65px; background-color:#ebeff2; overflow:hidden}

.ProcessBox {margin:10px 0 0; height:410px; overflow:hidden}
.ProcessBox.double {height:815px}
.ProcessBox .mCSB_container .ProcessBoxIn > ul {overflow:hidden; margin:-20px 0 0 -20px; padding:0 0 5px}
.ProcessBox .mCSB_container .ProcessBoxIn > ul > li {float:left; margin:20px 0 0 20px}

.ProcessBox .thumBox {overflow:hidden; position: relative; height: 364px; background-color: white; transition: 0.3s all cubic-bezier(0.4, 0, 1, 1);}
.ProcessBox .thumBox .imgBox {display: block; height:150px; transition:0.3s all ease}
.ProcessBox .thumBox .linkBox {transition: 0.3s all ease;}
.ProcessBox .thumBox .contentBox {display: block; height: 214px; padding:20px 30px; transition:0.3s all ease; box-sizing: border-box;}
.ProcessBox .thumBox .contentBox .btn_like {position: absolute; top:-20px; right:20px; display: inline-block; background:#d7d7d7; border-radius: 50%; padding:12px; z-index:1}
.ProcessBox .thumBox .contentBox .btn_like.active {background:#0d7fa0; animation: size .4s;}
@keyframes size {
	0% {padding:12px}
	50% {padding:14px; right:18px; margin-top:-6px;}
	100% {padding:12px}
}
.ProcessBox .btn_like {position:absolute;top: 130px; right:20px;display:inline-block;border:0; background-color: #d7d7d7; background-image: url(https://webpi.github.io/step_portal/images/template11/resp/default/button/btn_like_pattern.png); border-radius: 50%;padding:12px 12px 9px;z-index:1;}
.ProcessBox .btn_like.active {background:#f66800; animation: size .4s; }
.ProcessBox .btn_like .icon_heart {display:inline-block; width:16px; height:15px; background:url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_heart.png") no-repeat; background-size:cover}
.ProcessBox .thumBox .contentBox .thum_label {font-size:14px; color:#082ca1}
.ProcessBox .thumBox .contentBox .thum_tit {display: -webkit-box; height: 52px; white-space:normal; line-height:1.3; margin:15px 0 0; font-size:20px; color:#222; transition:0.3s all ease; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ProcessBox .thumBox .contentBox .thum_tit:hover {color:#0746c7; text-decoration:underline}
.ProcessBox .thumBox .thum_date {margin: 9px 0 0}
.ProcessBox .thumBox .thum_date > ul > li {margin-top: 9px; font-size:14px; color:#666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ProcessBox .thumBox .thum_date > ul > li:first-child {margin-top: 0;}
.ProcessBox .thumBox .thum_date .t {display: inline-block; width: 46px; vertical-align: baseline;}
.ProcessBox .thumBox .thum_date .price {color: #082ca1; font-weight: 400;}
.ProcessBox .thumBox .thum_tag {margin:10px 0 0}
.ProcessBox .thumBox .thum_tag > ul {overflow:hidden;}
.ProcessBox .thumBox .thum_tag > ul > li {float:left; margin:5px 5px 0 0}
.ProcessBox .thumBox .thum_tag > ul > li span {display:inline-block; font-size:14px; color:#666; padding: 4px 8px; border:1px solid #d7d7d7; overflow:hidden; border-radius: 100px; vertical-align: top;}
.ProcessBox .serviceBox {overflow: hidden; height: 60px; background-color: #217bdd; transition: 0.3s all ease;}
.ProcessBox .serviceBox .star_service {float:left; width: calc(100% - 115px); height:20px; padding:20px 0; text-align:center; background-color: #217bdd;}
.ProcessBox .serviceBox .star_service .star_score {position: relative; display: inline-block; overflow:hidden; width:130px; height:20px; background:url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_star_score.png") 0 0 repeat-x; vertical-align: top;}
.ProcessBox .serviceBox .star_service .star_score .point {position:absolute; top:0; left:0; display: inline-block; height:20px; background:url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_star_score.png") 0 -20px repeat-x }
.ProcessBox .serviceBox .demo_service {float: right; width: 115px; height: 60px; line-height: 60px; text-align: center; background-color: #0746c7; font-size: 20px; color: white;}
.ProcessBox .slick-list .slick-track .slick-slide > div > div {display: block !important;}

.ProcessBox .thumBox:hover {box-shadow: 5px 5px #d5d5d5;}
.ProcessBox .thumBox:hover .linkBox,
.ProcessBox .thumBox:hover .serviceBox {transform: translateY(-60px);}
/*.ProcessBox .thumBox:hover .imgBox {top:-65px}*/
/*.ProcessBox .thumBox:hover .contentBox {top: 100px;}*/
/*.ProcessBox .thumBox:hover .serviceBox {bottom: 0;}*/

.process_content .ProcessBox .mCSB_scrollTools.mCSB_scrollTools_horizontal {width:1200px; margin-left:-600px; left:50%; right:auto}

.ProcessBox_mob {display:none}

.main_process {position:relative}

/* 과정 */
.course-main .content_wrap {min-height: auto;}
.course-main .tit_area {overflow: visible; position: relative; min-height: auto; margin: 0;}
.course-main .tit_area .tit {display: block; margin: 0; padding: 0; font-size: 32px; font-weight: 700; text-align: center;}
.course-main .course-popularity {overflow: hidden; position: relative; height: 590px; padding-top: 58px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/bg/bg_course_popularity.jpg") repeat-x 50% 0; box-sizing: border-box;}
.course-main .tit_area .right_area {position: absolute; right: 0; bottom: -20px; float: none; font-size: 0;}
.course-main .btn-course {width: 32px; height: 32px; margin: 0 0 0 10px; padding: 0; border: 1px solid #555; background: #e4edfa; border-radius: 50px; vertical-align: middle; text-align: center; line-height: 30px; box-sizing: border-box; transition: background .25s;}
.course-main .btn-scroll-more {display: inline-block;}
.course-main .btn-scroll-left {margin-left: 0;}
.course-main .course-popularity .btn-scroll-more {background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_plus.png") no-repeat 50% 50%;}
.course-main .course-popularity .btn-scroll-left {background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_harfarw_lft.png") no-repeat 50% 50%;}
.course-main .course-popularity .btn-scroll-right {background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_harfarw_rgt.png") no-repeat 50% 50%;}
.course-main .course-popularity .btn-scroll-more:hover {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_plus_white.png");}
.course-main .course-popularity .btn-scroll-left:hover {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_harfarw_lft_white.png");}
.course-main .course-popularity .btn-scroll-right:hover {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_harfarw_rgt_white.png");}
.course-main .course-popularity .btn-course:hover {background-color: #555;}
.course-main .course-popularity:before,
.course-main .course-popularity:after {content: ""; position: absolute; top: 0; width: 50%; height: 100%; z-index: 3;}
.course-main .course-popularity:before {left: -600px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/bg/bg_course_popularity_lft.png") no-repeat 100% 0;}
.course-main .course-popularity:after {right: -600px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/bg/bg_course_popularity_rgt.png") no-repeat 0 0;}

.course-main .course-recom {overflow: hidden; position: relative; height: 590px; padding-top: 58px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/bg/bg_course_recom.jpg") repeat 50% 0; box-sizing: border-box;}
.course-main .course-recom .tit_area .tit {color: #fff;}
.course-main .course-recom .btn-scroll-more {background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_plus_white.png") no-repeat 50% 50%;}
.course-main .course-recom .btn-scroll-left {background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_harfarw_lft_white.png") no-repeat 50% 50%;}
.course-main .course-recom .btn-scroll-right {background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_harfarw_rgt_white.png") no-repeat 50% 50%;}
.course-main .course-recom .btn-scroll-more:hover {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_plus2.png");}
.course-main .course-recom .btn-scroll-left:hover {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_harfarw_lft2.png");}
.course-main .course-recom .btn-scroll-right:hover {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_harfarw_rgt2.png");}
.course-main .course-recom .btn-course {border-color: #fff;}
.course-main .course-recom .btn-course:hover {background-color: #fff;;}
.course-main .course-recom:before,
.course-main .course-recom:after {content: ""; position: absolute; top: 0; width: 50%; height: 100%; z-index: 3;}
.course-main .course-recom:before {left: -600px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/bg/bg_course_recom_lft.png") no-repeat 100% 0;}
.course-main .course-recom:after {right: -600px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/bg/bg_course_recom_rgt.png") no-repeat 0 0;}

.course-main .ProcessBox {overflow: visible; position: relative; max-width: 1200px; height: auto; margin: 40px auto 0;}
/*.course-main .ProcessBox .slick-track .slick-slide > div > div {display: block !important;}*/
.course-main .ProcessBox .slick-list {overflow: visible;  margin: 0 -10px;}
.course-main .ProcessBox .slick-slide {margin: 0 10px;}
.course-main .ProcessBox .thumBox .contentBox {text-align: left;}

	/*.course-main .mCSB_scrollTools.mCSB_scrollTools_horizontal {left: 50%; right: auto; width: 1200px; transform: translateX(-50%);}*/
/*.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer {margin: 0;}*/
/*.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,*/
/*.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {z-index: -9999; visibility: hidden;}*/
/*.course-main .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {background: rgba(0,0,0,.2) !important;}*/
/*.course-main .course-popularity .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {background: #555;}*/
/*.course-main .course-recom .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {background: #fff;}*/

/* 서비스 */
.service-main {padding: 60px 15px;}
.service-main .service-wrap {max-width: 1200px; margin: 0 auto;}
.service-main .service-wrap:after {content:""; clear: both; display: table; height: 0; font-size: 0; line-height: 0;}
.service-main .tit-h2 {margin: 0; padding: 0; font-size: 32px; font-weight: 700;}
.service-main .tit-h2 span {font-weight: 300;}

.service-main .service-main-head {float: left; margin-right: 20px;}
.service-main .service-main-list {overflow: hidden;}
.service-main .service-main-item {position: relative;}
.service-main .service-main-item a {display: block;}
.service-main .service-main-item .subject {overflow: hidden; margin: 0; padding: 0; font-size: 22px; font-weight: 400; text-align: left;}
.service-main .service-main-item .subject span {overflow: hidden; display: inline-block; max-width: calc(100% - 34px); line-height: 24px; white-space: nowrap; text-overflow: ellipsis; vertical-align: top;}
.service-main .service-main-item .img-new {vertical-align: top;}
.service-main .service-main-item .summary {margin: 12px 0 0 0; font-size: 16px; color: #444; line-height: 1.5; word-wrap: break-word; word-break: keep-all; -ms-word-break: break-all; overflow-wrap: break-word; display: -webkit-box; display: -ms-box;	-webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;}
.service-main .service-main-item .date {display: block; margin-top: 14px; font-size: 15px; color: #999;}
.service-main .service-main-item:hover .subject span {text-decoration: underline;}

.service-main .btn-service-more {display: inline-block; width: 100px; height: 30px; padding: 0 10px 0 20px; border: 2px solid #ddd; font-size: 14px; color: #666; font-weight: 500; border-radius: 50px; line-height: 26px; box-sizing: border-box;}
.service-main .btn-service-more:after {content: ""; display: inline-block; width: 15px; height: 12px; margin: -2px 0 0 5px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_more_arw.png") no-repeat 0 0; vertical-align: middle; transition: all .2s;}
.service-main .btn-service-more:hover {color: #222;}
.service-main .btn-service-more:hover:after {margin-left: 10px; background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_more_arw_hover.png");}

/* 공지사항 */
.service-main .service-notice {overflow:hidden; position: relative; float: left; width: 50%; padding-right: 54px; box-sizing: border-box;}
.service-main .service-notice .service-main-head {width: 148px;}
.service-main .service-notice .service-main-item {background: url("https://webpi.github.io/step_portal/images/template11/resp/default/bg/bg_dot_service.gif") repeat-x 0 100%;}
.service-main .service-notice .service-main-item a {padding: 18px 0 19px;}
.service-main .service-notice .service-main-item .summary {display: none;}
.service-main .service-notice .service-main-item:first-child a {padding-top: 0;}
.service-main .service-notice .btn-service-more {position: absolute; top: 60px; left: 0;}

/* 뉴스 */
.service-main .service-news {overflow:hidden; position: relative; float: right; width: 50%; padding-left: 20px; box-sizing: border-box;}
.service-main .service-news .service-main-head {position: relative; width: 160px}
.service-main .service-news .btn-tab {display: block; position: relative; height: 32px; margin-top: 20px; padding: 0; border: 0; font-size: 26px; color: #666; background: none; line-height: 1; transition: all .2s;}
.service-main .service-news .btn-tab:before {content: ""; position: absolute; left: 50%; top: -12px; width: 5px; height: 5px; margin-left: -2px; background: #bcbcbc; border-radius: 20px;}
.service-main .service-news .btn-tab:first-child {margin-top: 0;}
.service-main .service-news .btn-tab:first-child:before {display: none;}
.service-main .service-news .tit-stepnews strong {font-weight: 700;}
.service-main .service-news .btn-tab.active {font-size: 32px; color: #222;}
.service-main .service-news .tit-promotion.active {font-weight: 700;}

.service-main .service-news .service-main-item {margin-top: 42px; padding-left: 24px;}
.service-main .service-news .service-main-item .summary {display: none;}
.service-main .service-news .service-main-item:first-child {margin-top: 0;}
.service-main .service-news .service-main-item:before {content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: #ccc; border-radius: 2px; transition: background .25s;}
.service-main .service-news .service-main-item:hover:before {background: #f66800}
/*.service-main .service-news .btn-service-more {position: absolute; top: 108px; left: 20px;} 홍보관 있을때 */
.service-main .service-news .btn-service-more {position: absolute; top: 60px; left: 20px;}
.service-main .service-news-box {display: none;}
.service-main .service-news-box.active {display: block;}

/* 메인 팝업 */
.pop-noti {background-color: #3852a5; background-image: -moz-linear-gradient( 0deg, rgba(20,100,217,0.50196) 0%, rgba(8,44,161,0.5) 95%, rgb(8,44,161) 100%); background-image: -webkit-linear-gradient( 0deg, rgba(20,100,217,0.50196) 0%, rgba(8,44,161,0.5) 95%, rgb(8,44,161) 100%); background-image: -ms-linear-gradient( 0deg, rgba(20,100,217,0.50196) 0%, rgba(8,44,161,0.5) 95%, rgb(8,44,161) 100%); z-index: 10;}
.pop-noti p {margin: 0; padding: 0;}
.pop-noti .pop-noti-wrap {padding: 10px; box-sizing: border-box;}
.pop-noti .pop-noti-head {padding: 8px 20px; box-sizing: border-box;}
.pop-noti .pop-noti-tit {margin: 0; padding: 0; font-size: 20px; color: #fff; font-weight: 400; line-height: 1.4;}
.pop-noti .pop-noti-body {margin-top: 10px;}
.pop-noti .pop-noti-box {overflow-y: auto; border: 5px solid rgba(255,255,255,.4); font-size: 16px; background: #fff;box-sizing: border-box; -webkit-background-clip: padding-box; background-clip: padding-box;}
.pop-noti .pop-noti-box img {max-width: 100%; vertical-align: top;}
.pop-noti .pop-noti-footer {position: relative; padding: 5px 10px 5px 30px; background: rgba(0,0,0,.7); box-sizing: border-box;}
.pop-noti .today-check {display: block; font-size: 0;}
.pop-noti .today-check .today-check-input {position: static; margin-right: 10px; vertical-align: middle;}
.pop-noti .today-check .today-check-label {display: inline-block; padding: 4px 0; font-size: 16px; color: #ccc; font-weight: 400; vertical-align: middle; line-height: 1.4; z-index: auto;}
.pop-noti .today-check .today-check-label:before {display: none;}
.pop-noti .btn-pop-clse {position: absolute; right: 10px; top: 5px; height: 30px; padding: 0 20px; border: 0; font-size: 16px; color: #ccc; background: none;}

.pop-noti.pop-noti-layer {position: absolute;}
.pop-noti.pop-noti-layer .pop-noti-box {max-height: calc(100vh - 150px);}

/* 훈련 */
.training-main {padding: 60px 0; background: #1b47b2; background: -moz-linear-gradient(left, #1b47b2 0%, #3533b5 100%); background: -webkit-linear-gradient(left, #1b47b2 0%,#3533b5 100%); background: linear-gradient(to right, #1b47b2 0%,#3533b5 100%);}
.training-main .training-wrap {max-width: 1200px; margin: 0 auto;}
.training-main .training-contents {position: relative; float: left; width: 50%; min-height: 153px; box-sizing: border-box; text-align: left !important; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/bg/bg_dotline.png") repeat-y 100% 0;}
.training-main .training-contents-head {font-family: 'Nanum Square'; color: #fff;}
.training-main .training-contents-head dt {font-size: 24px; font-weight: 800;}
.training-main .training-contents-head dd {margin-top: 8px; font-size: 18px; line-height: 1.4;}
.training-main .training-contents-step {overflow: hidden; position: absolute; left: 190px; top: 50%; font-size: 16px; color: #fff; transform: translateY(-50%); text-align: center;}
.training-main .training-contents-step li {position: relative; float: left; line-height: 1.3;}
.training-main .training-contents-step span {display: block; font-size: 14px; font-weight: 400;}
.training-main .training-contents-step li:before {content: ""; display: block; width: 92px; height: 92px; margin: 0 auto 4px; background-color: rgba(13, 46, 131, .5); background-repeat: no-repeat; background-position: 50% 50%; border-radius: 100px;}
.training-main .training-contents-step li:after {content: ""; position: absolute; right: -11px; top: 35px; width: 22px; height: 21px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_arw.png") no-repeat 0 0;}
.training-main .training-smart-step1:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_building.png");}
.training-main .training-smart-step2:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_stamp.png");}
.training-main .training-smart-step3:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_stepmonitor.png");}
.training-main .training-contents-step li:last-child:after {display: none;}

.training-main .slick-current + .slick-slide .training-contents {background: none;}
.training-main .slick-dots {overflow: hidden; position: absolute; bottom: -30px; left: 0; width: 100%; font-size: 1%; text-align: center;}
.training-main .slick-dots li {display: inline-block; float: none; margin-left: 6px; font-size: 0; vertical-align: top; opacity: .5;}
.training-main .slick-dots li:first-child {margin-left: 0;}
.training-main .btn-training-main-dot {width: 8px; height: 8px; padding: 0; border: 0; background: #fff; border-radius: 10px; transition: width .25s;}
.training-main .slick-dots .slick-active {opacity: 1;}
.training-main .slick-dots .slick-active .btn-training-main-dot {width: 30px; background: #fff;}

.training-main .btn-training-more {display: inline-block; position: absolute; left: 0; bottom: 0; width: 100px; height: 30px; padding: 0 10px 0 20px; border: 2px solid #ddd; font-size: 14px; color: #fff; font-weight: 500; border-radius: 50px; line-height: 26px; box-sizing: border-box; opacity: .8; transition: all .2s;}
.training-main .btn-training-more:after {content: ""; display: inline-block; width: 15px; height: 12px; margin: -2px 0 0 5px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_more_arw_white.png") no-repeat 0 0; vertical-align: middle; transition: all .2s;}
.training-main .btn-training-more:hover {opacity: 1;}
.training-main .btn-training-more:hover:after {margin-left: 10px;}
.training-main .training-smart {width: 50%;}
.training-main .training-smart .training-contents-step {left: 183px;}
.training-main .training-smart .training-contents-step li {width: 120px;}

.training-main .training-virtual {padding-left: 70px; box-sizing: border-box;}
.training-main .training-virtual .training-contents-step {left: 300px;}
.training-main .training-virtual .training-contents-step li {margin-left: 68px;}
.training-main .training-virtual .training-contents-step li:after {right: -50px;}
.training-main .training-virtual .training-contents-step li:first-child {margin-left: 0;}
.training-main .training-virtual-step1:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_mouseclick.png");}
.training-main .training-virtual-step2:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_vr.png");}
.training-main .training-virtual .btn-training-more {left: 70px;}

.training-main .training-market {padding-left: 70px; box-sizing: border-box;}
.training-main .training-market .training-contents-step {left: 240px;}
.training-main .training-market .training-contents-step li {width: 120px;}
.training-main .training-market-step1:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_conts.png");}
.training-main .training-market-step2:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_sell.png");}
.training-main .training-market-step3:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_directtrade.png");}
.training-main .training-market .btn-training-more {left: 70px;}

	/* 정보 */
/* step sns */
.social-main .tit-h2 {margin: 0; padding: 0; font-size: 32px; font-weight: 700; text-align: center;}
.social-main .tit-h2 span {font-weight: 300;}
.social-main .social-sns {padding: 58px 15px 50px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/bg/bg_social_sns.png") repeat-x 50% 0;}
.social-main .social-sns .social-sns-wrap {overflow: hidden; position: relative; max-width: 1200px; margin: 0 auto;}

.social-main .social-sns .social-sns-link {position: absolute; left: 0; top: 2px; font-size: 0;}
.social-main .social-sns .social-sns-link .btn-social {display: inline-block; width: 30px; height: 30px; margin-left: 5px; padding: 0; border: 0; border-radius: 50px; vertical-align: top; text-align: left; transition: padding .25s; line-height: 30px;}
.social-main .social-sns .social-sns-link .btn-social:first-child {margin-left: 0;}
.social-main .social-sns .social-sns-link .btn-social-fb {background: #3045a0 url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_sns_fb.jpg") no-repeat 50% 50%;}
.social-main .social-sns .social-sns-link .btn-social-youtube {background: #e74c3c url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_sns_youtube.jpg") no-repeat 50% 50%;}
.social-main .social-sns .social-sns-link .btn-social-blog {background: #25a433 url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_sns_blog.jpg") no-repeat 50% 50%;}

.social-main .social-sns .social-sns-slider {margin-top: 20px;}
.social-main .social-sns .social-sns-item {position: relative; width: 285px; background: #fff; text-align: center;}
.social-main .social-sns .social-sns-item .social-sns-badge {position: absolute; left: 50%; bottom: -20px; width: 40px; height: 40px; margin-left: -20px; border-radius: 100px; box-shadow: 3.536px 3.536px 10px 0 rgba(0, 0, 0, .15);}
.social-main .social-sns .social-sns-item .social-sns-fb {background: #3045a0 url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_sns_fb_large.jpg") no-repeat 50% 50%;}
.social-main .social-sns .social-sns-item .social-sns-youtube {background: #e74c3c url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_sns_youtube_large.jpg") no-repeat 50% 50%;}
.social-main .social-sns .social-sns-item .social-sns-blog {background: #25a433 url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_sns_blog_large.jpg") no-repeat 50% 50%;}
.social-main .social-sns .social-sns-item a {display: block; padding-bottom: 36px;}
.social-main .social-sns .social-sns-item .thumb {overflow: hidden; height: 150px;}
.social-main .social-sns .social-sns-item .thumb .cropBox {transition: transform .25s;}
.social-main .social-sns .social-sns-item .subject {overflow: hidden; margin: 26px 20px 0; font-size: 18px; line-height: 1.5; display: -webkit-box; display: -ms-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-wrap: break-word; word-break: break-all;	text-overflow: ellipsis;}
.social-main .social-sns .social-sns-item .date {display: block; margin-top: 20px; font-size: 14px; color: #999;}
.social-main .social-sns .social-sns-item:hover .subject {text-decoration: underline;}
.social-main .social-sns .social-sns-item:hover .thumb .cropBox {transform: scale(1.1);}

.social-main .social-sns .slick-list {margin: 0 -10px; padding-bottom: 30px;}
.social-main .social-sns .slick-slide {margin: 0 10px;}

.social-main .social-sns .social-sns-control {position: absolute; right: -4px; top: 14px; margin: 0; padding: 0 22px;}
.social-main .social-sns .social-sns-control .btn-social-sns-prev,
.social-main .social-sns .social-sns-control .btn-social-sns-next {position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; padding: 0; border: 0; transition: background .25s;}
.social-main .social-sns .social-sns-control .btn-social-sns-prev {left: 0; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_lt_lft.png") no-repeat 50% 50%;}
.social-main .social-sns .social-sns-control .btn-social-sns-prev:hover {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_lt_lft_hover.png");}
.social-main .social-sns .social-sns-control .btn-social-sns-next {right: 0; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_gt_rgt.png") no-repeat 50% 50%;}
.social-main .social-sns .social-sns-control .btn-social-sns-next:hover {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_gt_rgt_hover.png");}
.social-main .social-sns .social-sns-control .control_paging li {display: none; font-family: "Nanum Square"; font-size: 20px; font-weight: 700; color: #666;}
.social-main .social-sns .social-sns-control .control_paging .slash {margin: 0 2px; font-size: 16px; font-weight: 400; font-style: normal;}
.social-main .social-sns .social-sns-control .control_paging .slick-active {display: block;}
.social-main .social-sns .social-sns-control .control_paging .now_num {color: #f05c0a;}
.social-main .social-sns .social-sns-control .controlBox {display: none;}

.social-main .social-step {padding: 57px 0 60px;}
.social-main .social-step .social-step-wrap {overflow: hidden; max-width: 1200px; margin: 0 auto;}
.social-main .social-step .tit-h2 {text-align: left;}
.social-main .social-step .social-people,
.social-main .social-step .social-intro {position: relative; float: left; width: calc((100% - 20px) / 2);}
.social-main .social-step .social-intro {margin-left: 20px;}
.social-main .social-step .social-people-slider,
.social-main .social-step .social-intro-slider {position: relative; margin-top: 13px;}
.social-main .social-step .social-step-item {width: 590px;}
.social-main .social-step .social-step-item a {display: block;}
.social-main .social-step .social-step-item .thumb {overflow: hidden; position: relative; height: 245px;}
.social-main .social-step .social-step-item .thumb .cropBox {transition: transform .25s;}
.social-main .social-step .social-step-item .thumb .noimg {position: absolute; left: 50%; top: 50%; margin: -27px 0 0 -31px;}
/*.social-main .social-step .social-step-item .thumb:after {content: ""; position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -43px 0 0 -55px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/button/btn_content_play.png") no-repeat 0 0;}*/
.social-main .social-step .social-step-item .box {height: 105px; padding: 15px 30px 10px; box-sizing: border-box; text-align: left;}
.social-main .social-step .social-people .social-step-item {background: #faf9f8;}
.social-main .social-step .social-people .box {background: #f3f1ed;}
.social-main .social-step .social-intro .social-step-item {background: #f7fafc;}
.social-main .social-step .social-intro .box {background: #ebf2f7;}
.social-main .social-step .social-step-item .subject {overflow: hidden; height: 48px; font-size: 20px; color: #333; line-height: 1.2; display: -webkit-box; display: -ms-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-wrap: break-word; word-break: keep-all;	text-overflow: ellipsis;}
.social-main .social-step .social-step-item .tag {overflow: hidden; margin-top: 10px;}
.social-main .social-step .social-step-item .tag li {float: left; margin-left: 5px; padding-bottom: 4px; font-size: 14px; color: #777; white-space: nowrap;}
.social-main .social-step .social-step-item .tag li:first-child {margin-left: 0;}
.social-main .social-step .social-step-item:hover .thumb .cropBox {transform: scale(1.05);}
.social-main .social-step .social-step-item:hover .subject {text-decoration: underline;}
.social-main .social-step .slick-dots {overflow: hidden; position: absolute; right: 30px; top: -27px;}
.social-main .social-step .slick-dots li {float: left; margin-left: 6px; font-size: 0;}
.social-main .social-step .slick-dots li:first-child {margin-left: 0;}
.social-main .social-step .btn-social-step-dot {width: 8px; height: 8px; padding: 0; border: 0; background: #ccc; border-radius: 10px; transition: width .25s;}
.social-main .social-step .slick-dots .slick-active .btn-social-step-dot {width: 30px; background: #f66800;}
.social-main .social-step .btn-social-step-control {position: absolute; right: -4px; top: 12px; width: 20px; height: 20px; padding: 0; border: 0; background: none;}
.social-main .social-step .btn-social-step-control {position: absolute; right: -4px; top: 12px; width: 20px; height: 20px; padding: 0; border: 0; background: none;}
.social-main .social-step .btn-slider-pause {background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_stop.png") no-repeat 50% 50%; transition: background .25s;}
.social-main .social-step .btn-slider-play {background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_play.png") no-repeat 50% 50%; transition: background .25s;}
.social-main .social-step .social-step-empty {position: relative; height: 350px; margin-top: 10px;}
.social-main .social-step .social-step-empty .img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .1;}
.social-main .social-step .social-people .social-step-empty {background: #f3f1ed;}
.social-main .social-step .social-intro .social-step-empty {background: #ebf2f7;}

/* 전체과정 */

/* 훈련 일정 */

.planLinkBox.type02 {position:static; overflow:hidden}
.planLinkBox > ul {float:right}
.planLinkBox > ul > li {float:left}
.planLinkBox a {display:inline-block; width:58px; height:38px; border:1px solid #d7d7d7}
.planLinkBox a.link_calender {background:white url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_datepicker.png") no-repeat 18px 9px}
.planLinkBox a.link_list {background:white url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_list.png") no-repeat 18px 9px}

.planLinkBox > ul > li.active a {border:1px solid #0d7fa0;}
.planLinkBox > ul > li.active a.link_calender {background:#0d7fa0 url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_datepicker_active.png") no-repeat 18px 9px}
.planLinkBox > ul > li.active a.link_list {background:#0d7fa0 url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_list_active.png") no-repeat 18px 9px}

.table_normal.cal { table-layout:fixed; border:none; margin:0}
.table_normal.cal tbody tr td { position:relative; height:90px; padding:42px 0 17px; border-left:none; border-bottom:1px solid #d7d7d7; text-align:left; vertical-align:top}
.table_normal.cal tbody tr td:before {content:""; position:absolute; top:0; right:-1px; bottom:0; border-right:1px solid #d7d7d7; z-index:1;}
.table_normal.cal thead tr th {border-left: 1px solid #d7d7d7;border-top: 0;font-weight:500;}
.table_normal.cal thead tr:first-child th:first-child {border-left: 0;}
.table_normal.cal tbody tr:last-child td {border-bottom:0}
.table_normal.cal tbody tr td:last-child:before {display:none}
.table_normal.cal tbody tr:last-child td:before {display:block}
.table_normal.cal .dateNo { position:absolute; top:15px; right:20px; color:#222; font-weight:500}
.table_normal.cal .dateNo.txt_red {color:#c12121}
.table_normal.cal .dateNo.txt_blue {color:#2f4c9b;}
.table_normal.cal .dataBox { display:none; }
.table_normal.cal .dataClass {margin:1px 0 0; white-space:nowrap; height: 24px; margin:1px 0 0; background-color:#d04040; text-indent:10px; color:white; font-size:14px; height:24px; line-height:24px; position:relative; z-index:2; width:100%;}
.table_normal.cal .dataClass.begin {z-index:3;}
.table_normal.cal .dataClass.clear {background:transparent !important;}
.table_normal.cal .dataClass.color01 {background-color:#d04040}
.table_normal.cal .dataClass.color02 {background-color:#0d7fa0}
.table_normal.cal .dataClass.color03 {background-color:#3c5bb2}
.table_normal.cal .dataClass.color04 {background-color:gray}
.table_normal.cal .dataClass.color05 {background-color:blueviolet}
.table_normal.cal .dataClass.color06 {background-color:pink}
.table_normal.cal .link_more {margin: 9px 0 0 18px;	display: inline-block; font-size: 14px; color: #0d7fa0; text-decoration:underline;	position: relative;}

.list_plan {font-size:16px; color:#222; overflow:hidden; border-top:1px solid #555}
.list_plan > li {border-bottom:1px solid #d7d7d7; padding:22px 0;}

/* EOD :  훈련과정 */


/* 이러닝 과정 */

/* 목록 */

.section_hd {margin:40px 0 0}
.section_hd.select {position:relative; margin:60px 0 0}
.section_hd .tit {font-size:24px; color:#222; font-weight:500}
.section_hd .sub {font-size:16px; color:#666; vertical-align:bottom}
.section_hd .sub strong {font-weight:500; color:#222}
.section_hd .tit + .sub {margin:0 0 0 10px;}
.section_hd .selectBox {position:absolute; top:-15px; right: 0;}

.process_searchBox {margin:30px 0 0; border-top:1px solid #d3dee6; border-bottom:1px solid #e7e7e7}
.process_searchBox .typeBox {background-color:#f4f9fd; padding:30px 120px 20px 60px; border-bottom: 1px solid #d7d7d7}
.process_searchBox .typeBox + .typeBox {border-bottom: 0; padding: 20px 60px 30px; display: none}
.process_searchBox .typeBox .list {display: inline-block; width:100%}
.process_searchBox .typeBox .list > li {position:relative; margin:20px 0 0; min-height: 40px}
.process_searchBox .typeBox .list > li:first-child {margin:0}
.process_searchBox .typeBox .label {position:absolute; top:0; left:0; display:table; width:90px; height:40px}
.process_searchBox .typeBox .label span {display:table-cell; vertical-align:middle; width:100%; height:100%; color:#222; font-size:16px; font-weight:500}
.process_searchBox .typeBox .dataBox {margin:0 0 0 93px;}
.process_searchBox .typeBox .dataBox .radioList {line-height:40px}
.process_searchBox .typeBox .dataBox .radioList input[type="radio"] {top:15px; left:7px}
.process_searchBox .typeBox .dataBox .radioList .Box {float:left; margin:0 20px 0 0}
.process_searchBox .typeBox .dataBox .dateBox {margin:0 10px 0 0}
.process_searchBox .process_search {position:relative; padding:0 125px 0 0}
.process_searchBox .search-comm {display:none; position: absolute; top:42px; left:0; right:125px; background:white; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .15);	box-sizing: border-box; border:1px solid #d5d5d5; z-index:5}
.process_searchBox .search-comm .search-list-contents > li {background:url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_search_small.png") no-repeat 24px 50%}
.process_searchBox .search-comm .search-list-contents > li.active {background:#f5f7f9}
.process_searchBox .search-comm .search-list-contents > li:hover {background:#f5f7f9 url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_search_small.png") no-repeat 24px 50%}
.process_searchBox .search-comm .search-list-contents {margin-top:1px; }
.process_searchBox .search-comm .search-list-contents:before {display: none}
.process_searchBox .search-comm .btn-search-clse {display: none; position: absolute; right: 4px; bottom: 4px; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_clse_12.png") no-repeat 50% 50%;}
.process_searchBox .typeBox .process_search .detail_btn {position: absolute; top:0; right:0; margin:0; padding: 0 19px;}
.process_searchBox .typeBox .process_search .detail_btn:after {content:""; display: inline-block; width:14px; height: 14px; margin:0 0 0 10px; background:url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_plus_white.png") no-repeat;}
.process_searchBox .typeBox .select_list {overflow:hidden; margin:-5px 0 0 -5px}
.process_searchBox .typeBox .select_list > li {float:left; margin:5px 0 0 5px}
.process_searchBox .typeBox .select_list .selectBox {width:140px}
.process_searchBox .typeBox .divi > li {overflow:hidden; display:table; width:100%; table-layout:fixed; margin:20px 0 0}
.process_searchBox .typeBox .divi > li:first-child {margin:0}
.process_searchBox .typeBox .divi > li > .area {display:table-cell; vertical-align: top;}
.process_searchBox .typeBox .area {position:relative}
.process_searchBox .typeBox .dayBox {overflow: hidden; margin:-5px 0 0}
.process_searchBox .typeBox .dayBox > li {float:left}
.process_searchBox .typeBox .dayBox .btn_s_white:hover {background-color:#666; border-color:#666; color: white}

.process_searchBox .buttonBox {position:relative; background-color:white; padding:20px 0;}
.process_searchBox .buttonBox .mobBox {display:none}
.process_searchBox .buttonBox button {margin:0}
.process_searchBox .buttonBox button.btn_m_blue_gra {margin:0 10px 0 0}

.process_searchBox.active .typeBox + .typeBox {display: block}
.process_searchBox.active .typeBox .process_search .detail_btn:after {background:url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_minus.png") no-repeat;}

.process_listBox {display:inline-block; width:100%; margin:20px 0 0;}
.process_listBox > ul {margin:-40px 0 0 -20px}
.process_listBox > ul > li {float:left; width:25%;}
.process_listBox > ul > li:first-child {margin:0}
.process_listBox > ul > li .Box {margin:40px 0 0 20px}

.process_listBox > ul > li.no_data {width:100%; background:#f5f7f9; padding:60px 0; margin:40px 0 0; font-size:18px; color: #222; text-align:center}
.process_listBox > ul > li.no_data .txt {margin:25px 0 0; line-height:1}

.process_listBox .thumBox {display:block;position:relative;height: 365px;overflow:hidden;background-color:white;border: 1px solid #d7d7d7;transition: 0.3s all cubic-bezier(0.4, 0, 1, 1);}
.process_listBox .thumBox:hover {box-shadow:0px 10px 10px #d5d5d5}
.process_listBox .thumBox .linkBox {display:block; position:relative}
.process_listBox .thumBox .imgBox {display:block;position:absolute;top:0;left:0;width:100%;height: 148px;overflow:hidden;border-bottom: 1px solid #d7d7d7;transition:0.3s all ease;}
.process_listBox .thumBox .contentBox {position:absolute;top: 150px;left:0;right:0;height: 175px;padding:20px 30px;transition:0.3s all ease;}
.process_listBox .thumBox .btn_like {position:absolute;top: 128px;right:20px;display:inline-block;border:0;background-color:#d7d7d7; background-image:url("https://webpi.github.io/step_portal/images/template11/resp/default/button/btn_like_pattern.png"); border-radius: 50%;padding:12px 12px 9px;z-index:1;transition:0.3s all ease;}
.process_listBox .thumBox .btn_like.active {background:#f66800; animation: size .4s; }
.process_listBox .thumBox .btn_like .icon_heart {display:inline-block; width:16px; height:15px; background:url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_heart.png") no-repeat; background-size:cover}
.process_listBox .thumBox .contentBox .thum_label {font-size:14px; color:#082ca1}
.process_listBox .thumBox .contentBox .thum_tit {display:block; display: -webkit-box; white-space:normal; line-height:1.3; margin:15px 0 0; font-size:20px; color:#222; transition:0.3s all ease; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height:52px; max-height:52px;}
.process_listBox .thumBox:hover .thum_tit {color:#0746c7; text-decoration:underline}


@keyframes size {
	0% {padding:12px 12px 9px}
	50% {padding:16px 16px 13px; right:16px; margin-top:-4px;}
	100% {padding:12px 12px 9px}
}

.process_listBox .thumBox .thum_date {margin: 9px 0 0}
.process_listBox .thumBox .thum_date > ul > li {margin-top: 9px; font-size:14px; color:#666;}
.process_listBox .thumBox .thum_date > ul > li:first-child {margin-top: 0;}
.process_listBox .thumBox .thum_date .t {display: inline-block; width: 46px; vertical-align: baseline;}
.process_listBox .thumBox .thum_date .price {color: #082ca1; font-weight: 400;}

.process_listBox .thumBox .thum_tag {margin:15px 0 0}
.process_listBox .thumBox .thum_tag > ul {overflow:hidden;}
.process_listBox .thumBox .thum_tag > ul > li {float:left; margin:5px 5px 0 0}
.process_listBox .thumBox .thum_tag > ul > li span {display:inline-block; font-size:14px; color:#666; padding:4px 5px; background-color:white; border:1px solid #d7d7d7; border-radius: 15px; overflow:hidden; vertical-align: top;}

.process_listBox .serviceBox {position:absolute;bottom:-60px;left:0;width:100%;height:60px;background-color: #217bdd;transition:0.3s all ease;}
.process_listBox .serviceBox .star_service {margin:0 115px 0 0;height:20px;padding:20px 0;text-align:center;background-color: #217bdd;}
.process_listBox .serviceBox .star_service .star_score {position:relative; display:inline-block; overflow:hidden; width:130px; height:20px; background:url("https://webpi.github.io/step_portal/images/template11/resp/blue/icon/icon_star_score.png") 0 0 repeat-x}
.process_listBox .serviceBox .star_service .star_score .point {position:absolute; top:0; left:0; display:inline-block; height:20px; background:url("https://webpi.github.io/step_portal/images/template11/resp/blue/icon/icon_star_score.png") 0 -20px repeat-x }
.process_listBox .serviceBox .demo_service {position:absolute;top:0;right:0;width:115px;height: 60px;line-height: 60px;text-align: center;background-color: #0746c7;font-size: 20px;color: white;}

.process_listBox .thumBox:hover .imgBox {top: -70px;}
.process_listBox .thumBox:hover .contentBox {top: 80px;}
.process_listBox .thumBox:hover .btn_like {top: 60px;}
.process_listBox .thumBox:hover .serviceBox {bottom: 0;}

/* EOD : 목록 */

/* 상세 */

.lectureBox {position:relative; margin:40px 0 0}
.lectureT {}
.lectureBoxL {position:absolute; top:0; left:0; width:500px; z-index:1}
.lectureBoxL .thumBox {height:318px; overflow:hidden; background-color:white; border:1px solid #555; box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.12);}
.lectureBoxL .buttonBox {margin:20px 0 0; text-align: center}
.lectureBoxL .buttonBox > ul {display: inline-block; margin:-10px 0 0 -10px;}
.lectureBoxL .buttonBox > ul > li {float:left; margin:10px 0 0 10px}
.lectureBoxL .btn_white {display: inline-block; width:138px; height: 48px; line-height:1; background: white; border: 1px solid #555; margin:0; padding:0; text-align: center; font-size: 18px; color:#222; transition: 0.3s all ease; border-radius: 25px}
.lectureBoxL .btn_white span {display:inline-block; vertical-align:middle; margin:0 0 0 10px}
.lectureBoxL .btn_white:hover {background:#e9f8fa}
.lectureBoxL .btn_blue {display: inline-block; width:198px; height: 50px; background:#0d7fa0; background: linear-gradient(90deg, rgba(13,127,96,1) 8%, rgba(13,127,160,1) 91%); border:0; margin:0; padding:0; text-align: center; font-size: 18px; color:white; transition: 0.3s all ease;}
.lectureBoxL .btn_blue:hover {background: #0d7f6e; background: linear-gradient(90deg, rgba(2,108,138,1) 0%, rgba(2,108,138,1) 100%);}
.lectureBoxL .icon_play {display:inline-block; vertical-align:middle; width:12px; height:15px; background:url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_lc_play.png")}
.lectureBoxL .icon_heart {display:inline-block; vertical-align:middle; width:16px; height:15px; background:url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_lc_heart.png") }
.lectureBoxL .btn_white.active {background:#f66800; border:1px solid #f66800; color:white}
.lectureBoxL .btn_white.active .icon_heart {background:url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_lc_heart_active.png")}

.lectureBoxR {margin:0 0 0 500px; overflow:hidden}
.lectureBoxR .listBtnBox {text-align:right; margin: 0 -10px 0 0;}
.lectureBoxR .listBtnBox .btn_sr_white {border-radius: 2px;	margin-top: 10px;}
.lectureBoxR .lectureInfo {border-top: 2px solid #555; border-bottom: 2px solid #d7d7d7;}
.lectureBoxR .lectureInfoT {background-color:#f5f7f9; padding:40px 50px 30px 60px}
.lectureBoxR .lectureInfoT .tit {font-size:36px; margin:0; line-height: 1.2;}
.lectureBoxR .lectureInfoT .util {margin:10px 0 0;overflow: hidden;position: relative;min-height: 41px;}
.lectureBoxR .lectureInfoT .tag {margin: 0 140px 0 0;}
.lectureBoxR .lectureInfoT .tag > li {float:left; margin:5px 5px 0 0}
.lectureBoxR .lectureInfoT .tag > li a {display:inline-block; font-size:14px; color:#666; padding:5px 8px; border-radius: 15px; background-color: white; border:1px solid #d7d7d7; overflow:hidden}
/*.lectureBoxR .lectureInfoT .tag > li a:before {content:"#"}*/
.lectureBoxR .lectureInfoT .share {position: absolute;top: 0;right: 0;}
.lectureBoxR .lectureInfoT .share li {float:left; margin:0 0 0 5px}
.lectureBoxR .lectureInfoT .share li a {display: block}
.lectureBoxR .lectureInfoT .share li a:hover {animation: pulsate 0.3s;}


@keyframes pulsate {
	0% {
		-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
		animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1); }
	50% {
		-webkit-transform: scale3d(0.8, 0.8, 0.8);
		transform: scale3d(0.8, 0.8, 0.8); }
	100% {
		-webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
		animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1); }
}


.lectureBoxR .lectureInfoB {background: white; padding:30px 50px 45px 60px; overflow: hidden}
.lectureBoxR .lectureInfoB .list {float:left;}
.lectureBoxR .lectureInfoB .list > li {position:relative;margin:10px 0 0;min-height: 25px; display: table;width: 100%;}
.lectureBoxR .lectureInfoB .list > li:first-child {margin:0}
.lectureBoxR .lectureInfoB .list .label {display: table-cell;vertical-align: middle; width:90px;}
.lectureBoxR .lectureInfoB .list .label span {display:table-cell; vertical-align:middle; width:100%; height:100%; color:#222; font-size:16px; font-weight:500}
.lectureBoxR .lectureInfoB .list .dataBox {display: table-cell;overflow:hidden;vertical-align: middle;}
.lectureBoxR .lectureInfoB .list .dataBox .selectBox {width:250px}
.lectureBoxR .lectureInfoB .list .dataBox .txt_red {font-size: 20px}
.lectureBoxR .lectureInfoB .btn {float:right;}
.lectureBoxR .lectureInfoB .btn > li {margin:10px 0 0}
.lectureBoxR .lectureInfoB .btn > li:first-child {margin:0}
.lectureBoxR .lectureInfoB .btn button {margin:0;}

.lectureB {position:relative; display:table; table-layout: fixed; width:100%; margin:40px 0 0; }
.lectureB .lectureContent {display:table-cell; vertical-align:top}
.lectureB .lectureContentIn {margin:0 63px 0 0}

.tab_Content {margin:40px 0 0}

.lecture_grayBox {padding:30px; font-size:16px; background-color:#f5f7f9; border:1px solid #d9d9d9}
.lecture_grayBox p {margin:20px 0 0;line-height: 1.5; width: 100%;display: table;}
.lecture_grayBox p:first-child {margin:0}
.lecture_grayBox p strong {font-weight:500;margin:0 20px 0 0;display: table-cell; vertical-align:top; word-break: keep-all; width:80px}
.lecture_grayBox p span {display:table-cell; vertical-align:top}

.lectureDeInfo {display:table-cell; width:284px;}
.lectureDeInfo .table_hori {margin:0}
.lectureDeInfo .table_hori tbody tr th {padding:15px 20px}
.lectureDeInfo .table_hori tbody tr td {padding:10px 20px}

.list_contents > ul > li {position:relative; display:table; width:100%; margin:10px 0 0; border:1px solid #e7e7e7}
.list_contents > ul > li:first-child {margin:0}
.list_contents > ul > li > .class {display:table-cell; text-align:center; vertical-align:middle; width:95px; padding:17px 0; background-color:#f5f7f9; font-size:16px; font-weight:500}
.list_contents > ul > li > .tit {display:table-cell; vertical-align:middle; padding:17px 0;}
.list_contents > ul > li > .tit span {display:inline-block; margin:0 120px 0 30px; line-height:1.2; }
.list_contents > ul > li .btn_s_blue {position:absolute; top:50%; right:10px; margin:-20px 0 0}

.list_review > ul > li {border:1px solid #d7d7d7; margin:10px 0 0}
.list_review > ul > li:first-child {margin:0}
.list_review .info {padding:8px 30px;background-color:#f5f7f9;}
.list_review .info > ul {overflow:hidden;}
.list_review .info > ul > li {position:relative;float:left;padding: 0 20px 0 0;font-size: 14px;color: #666;margin: 5px 0;}
.list_review .info > ul > li strong {margin:0 10px 0 0}
.list_review .info > ul > li:after {content:"";position:absolute;top:0; right:10px;width:1px;height:100%;background-color:#d7d7d7;}
.list_review .info > ul > li:first-child {padding-left:0}
.list_review .info > ul > li:last-child:after {display:none}

.list_review > ul > li.no_data {background: #f5f7f9; padding: 60px 15px;  font-size: 18px; color: #222; text-align: center;}
.list_review > ul > li.no_data .txt {margin: 25px 0 0; line-height: 1;}
.list_review .contents {background-color:white; padding:15px 30px; line-height:1.5; font-size: 16px; color: #222;}

.list_contents_dpeth > .list {border: 1px solid #d7d7d7;margin: 10px 0 0;}
.list_contents_dpeth > .list:first-child {border-top: 1px solid #d7d7d7;}
.list_contents_dpeth > .list .titBox {padding: 10px; transition:0.45s ease; background-color: white}
.list_contents_dpeth > .list .titBox > a {position:relative;display:block; padding:9px 50px 9px 20px; font-size: 16px;font-weight:400;transition:0.45s ease;line-height:1.3;}
.list_contents_dpeth > .list .titBox > a:after { content:''; position:absolute; top:50%; right:18px; margin:-5px 0 0 0; width:16px; height:9px; background:url(https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_faq_arrow.png) no-repeat; }
.list_contents_dpeth > .list.active {border:1px solid #555}
.list_contents_dpeth > .list.active a { color:#1464d9; }
.list_contents_dpeth > .list.active a:after { background:url(https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_faq_arrow_active.png) no-repeat;}
.list_contents_dpeth > .list.active .faqBox > a {padding:9px 50px}
.list_contents_dpeth .contentsBox {display:none;position:relative;background: #f5f7f9; margin:9px 0 0; padding: 30px;font-weight:400;font-size:16px;}
.list_contents_dpeth .contentsBox ul > li {margin:12px 0 0}
.list_contents_dpeth .contentsBox ul > li:first-child {margin:0}
.list_contents_dpeth .contentsBox ul > li span {position:relative; margin:10px 0 0 0; padding: 0 0 0 18px; line-height:26px; font-size:16px; color:#222}
.list_contents_dpeth .contentsBox ul > li span:before {content:'';position:absolute;top:12px;left: 5px;width: 4px;height: 4px;background: #555;border-radius:50%;}

.content_wrap .content_area_box div,
.content_wrap .content_area_box p,
.content_wrap .content_area_box span,
.content_wrap .content_area_box ul,
.content_wrap .content_area_box li {margin: 0; line-height: normal;}

/* EOD : 상세 */

/* EOD :  원격훈련과정 */

/* 혼합훈련과정 */

/* 상세 */

.list_study > ul > li {border:1px solid #d7d7d7; margin:10px 0 0; transition:0.3s all ease}
.list_study > ul > li:first-child {margin:0}
.list_study > ul > li.active {border:1px solid #555}
.list_study .studyBox {position:relative; display:block; min-height:110px; padding:4px;}
.list_study .studyBox:after {content:''; position:absolute; top:50%; right:30px; margin:-5px 0 0 0; width:16px; height:9px; background:url(https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_faq_arrow.png) no-repeat; }
.list_study > ul > li.active .studyBox:after { background:url(https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_faq_arrow_active.png) no-repeat;; }


.list_study .imgBox {position:absolute; top:50%; left:4px; width:188px; height:108px; margin:-55px 0 0; border:1px solid #d7d7d7}
.list_study .txtBox {margin:15px 70px 15px 210px}
.list_study .txtBox .label {font-size:14px; color:#0746c7; margin:0}
.list_study .txtBox .tit {font-size:18px; color:#222; font-weight:bold; line-height:1.2; margin:10px 0 0}
.list_study .txtBox .info {font-size:14px; color:#666; margin:20px 0 0}
.list_study .txtBox .info strong {margin:0 7px 0 0}
.list_study .contents {display:none; background-color:#f5f7f9; padding:30px; line-height: 1.5;}

/* EOD : 상세 */

/* EOD :  혼합훈련과정 */

/* 수강신청 팝업 */

.join_write_process > ul {overflow:hidden}
.join_write_process > ul > li {float:left; width:50%; position:relative}
.join_write_process .step {position:relative; border:1px solid #d7d7d7; border-left:0}
.join_write_process .stepIn {position:relative; padding:18px 30px 18px 50px; color:#666}
.join_write_process .stepIn br {display:none}
.join_write_process > ul > li:first-child .step {border-right:0; border-left:1px solid #d7d7d7}
.join_write_process > ul > li:first-child .stepIn {margin:0 4px 0 0; padding:18px 30px}
.join_write_process > ul > li:first-child.active .step:after {content:""; position: absolute;top: 0;left:auto; right: -20px;bottom: 0;width: 0; height: 0;border-top:29px solid transparent;border-bottom:29px solid transparent;	border-left: 24px solid #217bdd;}
.join_write_process > ul > li.active .stepIn {background-color:#217bdd; color:white}
.join_write_process > ul > li.active .step:after {content:""; position: absolute;top: 0; left:0; bottom: 0;width: 0; height: 0;border-top:29px solid transparent;border-bottom:29px solid transparent;	border-left: 24px solid white;}

.step_agreeBox {margin:12px 0 0; border:1px solid #d7d7d7}
.step_agreeBox .contentBox {position:relative;background: #f5f7f9; padding:15px 20px;font-weight:400; max-height: 180px;	overflow-y: auto;}
.step_agreeBox .contentBox .tit {font-size: 20px; font-weight: 400; margin: 40px 0 20px;}
.step_agreeBox .contentBox .txt_editer p {font-size:16px; line-height:1.6; margin:5px 0}
.step_agreeBox .contentBox .content:first-child .tit {margin-top:0}


.step_agreeBox .btnBox { text-align: right; margin: 0; padding: 20px;}

.join_write_comp {margin:40px 0 0; text-align:center}
.join_write_comp .circle {display:inline-block; width:120px; height:120px; background-color:#1464d9; border-radius:50%}
.join_write_comp .circle .icon {display:inline-block; width:49px; height:60px; margin:30px 0 0; background:url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_join_write_comp.png") no-repeat;}
.join_write_comp p {margin:20px 0 0; font-size:20px; color:#0746c7}

/* EOD : 수강신청 팝업  */

/* 소셜 위키 */


/* 인클럽 개설 & 설정하기 팝업 */

.thumb_FileBox {display: table; height: 110px}
.thumb_FileBox .thumb_area {display: table-cell; height:100%; vertical-align: middle}
.thumb_FileBox .thumb_area .thumb {display:inline-block; width:188px; height: 108px; border:1px solid #d7d7d7}
.thumb_FileBox .btn_area {display: table-cell; vertical-align: middle; padding: 0 0 0 20px}
.thumb_FileBox button {margin:0}

/* EOD : 인클럽 개설 & 설정하기 팝업 */

/* 소셜 위키 닉네임 설정 팝업 */

.social-nickBox {background: #f5f7f9; padding: 40px 20px; text-align: center}
.social-nickBoxIn {position:relative; display: inline-block; max-width: 600px; min-width: 260px; line-height: 40px}
.social-nickBoxIn .txt-area {position: absolute; top:0; left:0; font-size: 16px; color:#222}
.social-nickBoxIn .input-area {margin:0 0 0 95px}
.social-nickBoxIn .input-area .inputBox {width: calc(100% - 110px)}
.social-nickBoxIn .input-area input {width: calc(100% - 24px)}
.social-nickBoxIn .input-area button {margin:0; vertical-align: middle}
.social-nickBoxIn .input-area .txt_asterisk {text-align: left; color: #666}

/* EOD : 소셜 위키 닉네임 설정 팝업 */


.social-wiki-Banner {position: relative; overflow: hidden}
.social-wiki-control {text-align: right; margin:40px 0 0}
.social-wiki-control .paginationIn {position: relative; display: inline-block; padding: 0 20px}

.social-wiki-head .social-wiki-control .prevBtn.btn-social-wiki-prev,
.social-wiki-head .social-wiki-control .nextBtn.btn-social-wiki-next {position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; padding: 0; border: 0; transition: background .25s;}
.social-wiki-head .social-wiki-control .prevBtn.btn-social-wiki-prev {left: 0; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_lt_lft.png") no-repeat 50% 50%;}
.social-wiki-head .social-wiki-control .prevBtn.btn-social-wiki-prev:hover {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_lt_lft_hover.png");}
.social-wiki-head .social-wiki-control .nextBtn.btn-social-wiki-next {right: 0; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_gt_rgt.png") no-repeat 50% 50%;}
.social-wiki-head .social-wiki-control .nextBtn.btn-social-wiki-next:hover {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_step_gt_rgt_hover.png");}
.social-wiki-head .social-wiki-control .control_paging li {display: none; font-family: "Nanum Square"; font-size: 20px; font-weight: 700; color: #666;}
.social-wiki-head .social-wiki-control .control_paging .slash {margin: 0 2px; font-size: 16px; font-weight: 400; font-style: normal;}
.social-wiki-head .social-wiki-control .control_paging .slick-active {display: block;}
.social-wiki-head .social-wiki-control .control_paging .now_num {color: #f05c0a;}
.social-wiki-head .social-wiki-control .controlBox {display: none;}

.social-wiki-Banner .social-wiki-Slider {margin:20px 0 0; height: 160px}
.social-wiki-Banner .social-wiki-Slider .social-wiki-item .thumb {overflow: hidden; height:160px}
.social-wiki-Banner .social-wiki-Slider .social-wiki-item .thumb > a {display: block; position: relative; width :100%; height: 160px;}
.social-wiki-Banner .social-wiki-Slider .social-wiki-item .thumb .img {position: absolute; left: 50%; top: 0; transform: translateX(-50%);}

.social-utilWrap {background:#f4f9fd url("https://webpi.github.io/step_portal/images/template11/resp/default/usr/wiki_util_bg_pc.png") 40px 0 no-repeat; margin:40px 0 0; border-width:1px 0; border-color:#d3dee6; border-style: solid; text-align: center; height: 78px}
.social-utilArea {display: inline-block; height: 100%}
.social-utilBox {display: table; width: 100%; height: 100%}
.social-utilBox .txt {display:table-cell; vertical-align: middle; color:#082ca1}
.social-utilBox .txt br {display: none;}
.social-utilBox .utilBox {display: table-cell; vertical-align: middle; padding: 0 0 0 30px}

.wiki-list {border-top:1px solid #555; margin:20px 0 0}
	/*.wiki-list > li {padding: 30px 0; border-bottom: 1px solid #d7d7d7}*/

	/*.wiki-item {display: table; width: 100%}*/
	/*.wiki-item .wiki-itemL , .wiki-item .wiki-itemR {display: table-cell; vertical-align: top; height: 160px}*/
	/*.wiki-itemL + .wiki-itemR {padding: 0 0 0 20px}*/
	/*.wiki-itemLIn , .wiki-itemRIn {position:relative; height: 100%}*/
	/*.wiki-itemLIn .labelBox {position:absolute; top:0; left:0; z-index: 1}*/
	/*.wiki-itemLIn .label_blue {background:#00a1c9; display: inline-block; width:45px; height:34px; text-align: center; color:white; font-size:14px}*/

	/*.wiki-item .thumb {position:relative; display:inline-block; width: 285px; height: 160px; overflow:hidden}*/
	/*.wiki-item .thumb .cropBox {transition: transform 0.299s ease;}*/
	/*.wiki-item .thumb:hover .cropBox {transform: scale(1.1) rotate(.001deg)}*/
	/*.wiki-item .tit {display: block; margin:4px 0 0; font-size:20px; color:#222; font-weight: 500}*/
	/*.wiki-item .tit:hover .txt {color: #0746c7; text-decoration: underline;}*/
	/*.wiki-item .tit .notice {font-size:14px; color:white; display: inline-block; vertical-align:middle; padding: 2px 7px; background:#f66800; border-radius: 2px}*/
	/*.wiki-item .tit .notice + .txt {display: inline-block; vertical-align: middle; margin:0 0 0 10px }*/
	/*.wiki-item .content {display: block; margin:15px 0 0; padding: 0 0 40px; line-height: 1.5; font-size: 16px; color:#666}*/
	/*.wiki-item .content:hover {text-decoration: underline}*/

	/*.wiki-item .info {position: absolute; left:0; bottom:6px;}*/
	/*.wiki-item .info .category , .wiki-item .info .tag , .wiki-item .info .like {float:left}*/

	/*.wiki-item .category {padding:0 5px; position: relative}*/
	/*.wiki-item .category:after {content:""; position: absolute; left:0; bottom: -3px; right: 0; height: 8px; background:#d0e0f7; z-index: -1}*/

	/*.wiki-item .info .tag {overflow: hidden; margin:0 0 0 20px; font-size: 14px; color:#666}*/
	/*.wiki-item .info .tag > li {float:left; margin:0 0 0 10px}*/
	/*.wiki-item .info .tag > li:first-child {margin:0}*/
	/*.wiki-item .info .tag > li:before {content:"#"}*/

	/*.wiki-item .info .like {overflow: hidden; margin:0 0 0 20px; font-size: 14px; color:#666}*/
	/*.wiki-item .info .like > li {float:left; margin:0 0 0 10px}*/
	/*.wiki-item .info .like > li:first-child {margin:0}*/
	/*.wiki-item .info .like i , .wiki-item .info .like .cnt {vertical-align: middle}*/
	/*.wiki-item .info .like .cnt {font-size: 14px; color:#0746c7; font-weight: 500; margin:0 0 0 5px}*/

	/* 위키 전체 */
	.social-wiki-all {padding-top: 75px;}
	.social-wiki-all .social-wiki-Banner {overflow: visible;}
	.social-wiki-all .social-wiki-Banner .social-wiki-Slider {margin-top: 0;}
	.social-wiki-all .social-wiki-control {position: absolute; right: 0; top: -38px; margin: 0;}
	.social-wiki-all .searchBox {margin-bottom: 0;}
	.social-wiki-all .section_hd .selectBox {top: -24px; min-width: 180px;}

	.social-wiki-all .tab_arrow > li a {display: block; border-right-color: transparent; font-size: 0; text-align: center;}
	.social-wiki-all .tab_arrow > li a span {display: inline-block; height: auto; font-size: 18px;}
	.social-wiki-all .tab_arrow > li:last-child a {border-right-color: #e7e7e7;}
	.social-wiki-all .tab_arrow > li a:before {content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle;}
	.social-wiki-all .tab_arrow > li.active a {border-right: 2px solid #222;}

	/* 나의 위키 */
	.social-wiki-my {padding-top: 40px;}

	.wiki-comment-list {margin:20px 0 0; padding:40px 0 0; border-top:1px solid #555}
	.wiki-comment {margin:40px 0 0}
	.wiki-comment .tit {display:block; color:#222; font-size: 20px}
	.wiki-comment .commentList {margin:20px 0 0}
	.wiki-comment .commentList > li {margin:0}
	.wiki-comment .commentList > li , .wiki-comment .commentList > li:first-child.reply {border-top-width: 0}
	.wiki-comment-list .wiki-comment:first-child {margin:0}

	/* 전체 인클럽 */
	.social-wiki-club {padding-top: 40px;}
	.section_hd .section_hd_aside {position: absolute; right: 0; top: -24px; font-size: 0;}
	.social-wiki-club .section_hd .section_hd_aside .selectBox {position: relative; top: auto; right: auto; vertical-align: top;}
	.social-wiki-club .section_hd .section_hd_aside .btn-inclub-open {margin: 0 0 0 10px; vertical-align: top;}
	.social-wiki-club .wiki-list-club {margin-top: 20px;}
	.social-wiki-club .table_normal {table-layout: fixed; line-height: 1;}
	.social-wiki-club .table_normal tbody tr:hover td {background: none;}
	.social-wiki-club .table_normal td {padding: 30px 0;}
	.social-wiki-club .table_normal .list-contents-media {position: relative;padding: 0; border-bottom: 0;}
	.social-wiki-club .table_normal .list-contents-empty {border-bottom: 0; background-color: transparent;}
	.social-wiki-club .table_normal .list-contents-wiki .list-contents-info {padding-right: 0;}
	.social-wiki-club .table_normal .list-contents-wiki .cnt-wiki {display: none;}
	.social-wiki-club .table_normal .wiki-cnt em {color: #0746c7; font-style: normal; font-weight: 500;}
	.social-wiki-club .table_normal [class^="btn_s_"] {margin: 0;}
	.social-wiki-club .btn-favo {display: inline-block; position: relative; vertical-align: top;}
	.social-wiki-club .btn-favo .icheck {overflow: hidden; position: absolute; left: auto; top: auto; width: 1px; height: 1px; margin: -1px; z-index: -9999; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);}
	.social-wiki-club .btn-favo .btn-favo-icon {display: inline-block; vertical-align: top;}
	.social-wiki-club .btn-favo .btn-favo-icon:before {display: none;}
	.social-wiki-club .btn-favo .btn-favo-icon:after {content: ""; display: inline-block; width: 28px; height: 26px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_star_sprite.png") no-repeat 0 0; vertical-align: top; vertical-align: top;}
	.social-wiki-club .btn-favo .icheck + .btn-favo-icon {padding: 0; line-height: 1;}
	.social-wiki-club .btn-favo .icheck:checked + .btn-favo-icon:after {background-position-y: -26px; animation: btnFavo 0.3s;}
	@keyframes btnFavo {
		0% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}
		50% {
			-webkit-transform: scale(1.2);
			transform: scale(1.2);
		}
		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}
	.social-wiki-club .table_normal .club-status {display: block; color: #0746c7; font-weight: 500;}
	.social-wiki-club .table_normal .club-menu-box {position: relative; margin-top: 10px;}
	.social-wiki-club .layer-reason {position: absolute; min-width: 200px; padding: 15px 40px 15px 20px; border: 1px solid #999; font-sizE: 16px; background: #fff; border-radius: 12px; line-height: 1.4; box-shadow: 6.428px 7.66px 20px 0px rgba(0, 0, 0, .1); box-sizing: border-box; text-align: left; z-index: 1;}
	.social-wiki-club .layer-reason .btn-reason-clse {position: absolute; right: 2px; top: 2px; margin: 0; padding: 6px; border: 0; background: none;}
	.social-wiki-club .layer-reason .btn-reason-clse img {vertical-align: top;}
	.social-wiki-club .club-menu-box .layer-reason {top: 45px; right: 0;}

	/* 스탭 인클럽 */
	.social-wiki-clubview {padding-top: 40px;}
	.social-wiki-clubview .section_hd.select .selectBox {top: -24px;}
	.social-wiki-clubview .club-intro {position: relative; padding: 30px 0 30px; border-top: 1px solid #555; border-bottom: 1px solid #d7d7d7;}
	.social-wiki-clubview .club-intro:after {content: ""; clear: both; display: table; font-size: 0; line-height: 0;}
	.social-wiki-clubview .club-intro .btn-club-config {position: absolute; right: 0; bottom: 0; padding: 0 0 0 30px; border: 0; font-size: 16px; background: none; line-height: 24px;}
	.social-wiki-clubview .club-intro .btn-club-config:before {content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_gear.png") no-repeat 0 0;}

	.social-wiki-clubview .club-intro .list-contents-media {position: relative; float: left; width: calc(100% - 380px); padding: 0; border-bottom: 0;}
	.social-wiki-clubview .club-intro .list-contents-media .list-contents-thumb {width: 240px; height: 135px;}
	.social-wiki-clubview .club-intro .list-contents-wiki .list-contents-info {padding-right: 0;}
	.social-wiki-clubview .club-intro .list-contents-wiki .badge {width: 36px; height: 29px;	padding-top: 5px;     font-size: 13px; background-position: 0 100%;}
	.social-wiki-clubview .club-intro .list-contents-wiki .subject {margin-top: 10px;}
	.social-wiki-clubview .club-intro .list-contents-media .subject span {height: 20px; font-size: 18px;}
	.social-wiki-clubview .club-intro .list-contents-media .summary {overflow-y: auto; display: block; max-height: 57px; margin-top: 5px; padding-right: 20px; font-size: 14px; line-height: 1.4; -webkit-line-clamp: unset; text-overflow: initial; -webkit-box-orient: unset; scrollbar-width: thin; scrollbar-color: #a4a4a4 none; -webkit-overflow-scrolling: touch;}
	.social-wiki-clubview .club-intro .list-contents-media .summary::-webkit-scrollbar {width: 6px;}
	.social-wiki-clubview .club-intro .list-contents-media .summary::-webkit-scrollbar-track {background: none;}
	.social-wiki-clubview .club-intro .list-contents-media .summary::-webkit-scrollbar-thumb {background: #a4a4a4; border-radius: 3px;}
	.social-wiki-clubview .club-intro .list-contents-media .cnt-wiki {display: none;}
	.social-wiki-clubview .club-intro .list-contents-wiki .list-contents-bot {margin-top: 6px;}

	.social-wiki-clubview .club-intro .club-intro-info {float: right; width: 360px; padding-left: 21px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/bg/bg_dotline2.png") repeat-y 0 0; box-sizing: border-box;}
	.social-wiki-clubview .club-intro .club-intro-info li {overflow: hidden; margin-top: 16px; font-size: 0;}
	.social-wiki-clubview .club-intro .club-intro-info li:first-child {margin-top: 0;}
	.social-wiki-clubview .club-intro .club-intro-info .t {display: block; position: relative; float: left; width: 55px; padding-left: 10px; font-size: 16px; color: #666;}
	.social-wiki-clubview .club-intro .club-intro-info .t:before {content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px; font-size: 0; line-height: 0; background: #999; border-radius: 2px;}
	.social-wiki-clubview .club-intro .club-intro-info .conts {overflow: hidden; display: block; font-size: 16px; font-weight: 400;}
	.social-wiki-clubview .club-intro .club-intro-info .conts-email {display: block; margin-top: 10px; padding-bottom: 4px; font-size: 14px; font-style: normal;}
	.social-wiki-clubview .club-intro .club-intro-info .cnt {color: #0746c7; font-weight: 500; font-style: normal;}

	/* 소셜위키 소개 */
	.social-wiki-intro {padding-top: 40px;}
	.social-wiki-intro p {margin: 0; padding: 0;}
	.social-wiki-intro .social-wiki-box {position: relative;}
	.social-wiki-intro .social-wiki-box + .social-wiki-box {margin-top: 120px;}
	.social-wiki-intro .tit-h3 {margin: 0; padding: 0; font-size: 36px; font-weight: 500; text-align: left;}
	.social-wiki-intro .social-wiki-guide .tit-h3 {text-align: center;}
	.social-wiki-intro .social-wiki-box .intro-conts {margin-top: 30px; font-size: 18px; color: #666; line-height: 2;}
	.social-wiki-intro .social-wiki-box .intro-point {color: #9d64d8; font-weight: 400;}
	.social-wiki-intro .social-wiki-guide {text-align: center;}
	.social-wiki-intro .social-wiki-rule:before {content: ""; position: absolute; left: -20px; top: 0; width: calc(50% - 390px); height: 400px; background: #f5f7f9; z-index: -1;}
	.social-wiki-intro .social-wiki-rule:after {content: ""; position: absolute; left: -20px; bottom: -150px; right: -20px; height: 490px; background: #f5f7f9; z-index: -1;}
	.social-wiki-intro .social-wiki-rule-copyright {position: relative;}
	.social-wiki-intro .social-wiki-rule-in {max-width: 1200px; margin: 0 auto;}
	.social-wiki-intro .social-wiki-rule-copyright .social-wiki-rule-in:before {content: ""; float: left; width: 350px; height: 400px; margin: -60px 60px 0 0; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/bg/bg_social_wiki_intro.jpg") no-repeat 50% 0;}
	.social-wiki-intro .social-wiki-rule-copyright .social-wiki-rule-in:after {content: ""; clear: both; overflow: hidden; display: table; height: 0; font-size: 0; line-height: 0;}
	.social-wiki-intro .tit-h4 {margin: 0; padding: 0; font-size: 26px;}
	.social-wiki-intro .social-wiki-rule-copyright .tit-h4 {margin-top: 60px;}
	.social-wiki-intro .social-wiki-rule-del {position: relative; margin-top: 170px;}
	.social-wiki-intro .social-wiki-rule-del:after {content: ""; position: absolute; right: -20px; top: -15px; width: calc(50% - 260px); height: 326px; background: #f5f7f9; z-index: -1;}
	.social-wiki-intro .social-wiki-rule-del .social-wiki-rule-in {position: relative;}
    .social-wiki-intro .social-wiki-rule-del .social-wiki-rule-in:before {content: ""; position: absolute; right: 0; top: -100px; width: 680px; height: 350px; background: url("https://webpi.github.io/step_portal/images/template11/resp/default/bg/bg_social_wiki_intro2.jpg") no-repeat 50% 0;}
	.social-wiki-intro .social-wiki-rule-limit {max-width: 1200px; margin: 185px auto 0;}
	.social-wiki-intro .social-wiki-rule-limit .limit-list {margin: 30px auto -30px; font-size: 0; text-align: center;}
	.social-wiki-intro .social-wiki-rule-limit .limit-list li {display: inline-block; position: relative; width: 212px; height: 212px; margin: 0 0 30px 35px; padding-top: 116px; font-size: 18px; color: #fff; background: #536bb8; line-height: 1.5; border-radius: 200px; text-align: center; vertical-align: top; box-sizing: border-box;}
	.social-wiki-intro .social-wiki-rule-limit .limit-list li:before {content: ""; position: absolute; left: 50%; bottom: 114px; width: 90px; height: 64px; margin-left: -45px; background-repeat: no-repeat; background-position: 50% 100%;}
	.social-wiki-intro .social-wiki-rule-limit .limit-list li:first-child {margin-left: calc((100% - 953px) / 2);}
	.social-wiki-intro .social-wiki-rule-limit .limit-list li:nth-child(4) {margin-right: calc((100% - 953px) / 2);}
.social-wiki-intro .social-wiki-rule-limit .limit-list li:last-child {margin-right: 0;}
	.social-wiki-intro .social-wiki-rule-limit .limit-list .limit-list-bot {margin-left: 0; margin-right: 35px; background: #334fab;}
	.social-wiki-intro .social-wiki-rule-limit .limit-list-human:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_wiki_rule_human.png");}
	.social-wiki-intro .social-wiki-rule-limit .limit-list-media:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_wiki_rule_media.png");}
	.social-wiki-intro .social-wiki-rule-limit .limit-list-face:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_wiki_rule_face.png");}
	.social-wiki-intro .social-wiki-rule-limit .limit-list-radio:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_wiki_rule_radio.png");}
	.social-wiki-intro .social-wiki-rule-limit .limit-list-deal:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_wiki_rule_deal.png");}
	.social-wiki-intro .social-wiki-rule-limit .limit-list-lock:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_wiki_rule_lock.png");}
	.social-wiki-intro .social-wiki-rule-limit .limit-list-paper:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_wiki_rule_paper.png");}
	.social-wiki-intro .social-wiki-rule-limit .limit-list-light:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_wiki_rule_light.png");}
	.social-wiki-intro .social-wiki-rule-limit .limit-list-talk:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_wiki_rule_talk.png");}
	.social-wiki-intro .social-wiki-rule-block {max-width: 1200px; margin: 80px auto 0;}
	.social-wiki-intro .social-wiki-rule-block .block-list {margin-top: 10px; font-size: 18px; color: #666;}
	.social-wiki-intro .social-wiki-rule-block .block-list li {margin-top: 20px;}
	.social-wiki-intro .social-wiki-rule-block .block-list span {font-style: italic;}
	.social-wiki-intro .social-wiki-rule-block .block-list li:first-child {margin-top: 0;}

	/* EOD : 소셜 위키 */



/* 고객지원센터  */

/* FAQ */

.faq {margin:40px 0 0}
.faq_list li {border: 1px solid #d7d7d7;margin: 10px 0 0;}
.faq_list li:first-child {border-top: 1px solid #d7d7d7;margin: 0;}
.faq_list li .faqBox {transition:0.45s ease;}
.faq_list li .faqBox > a {position:relative;display:block; padding:19px 60px; font-size: 16px;font-weight:400;transition:0.45s ease;line-height:1.3;}
.faq_list li .faqBox > a:before {content:'Q';position:absolute;top:50%;left: 30px;margin: -10px 0 0;text-align:center;font-weight:bold;font-size: 16px;}
.faq_list li .faqBox > a:after {content:'';position:absolute;top:50%;right: 30px;margin: -4px 0 0;width:16px;height:9px;background:url(https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_faq_arrow.png) no-repeat;}
.faq_list li.active a {color: #0746c7;}
.faq_list li.active a:after { background:url(https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_faq_arrow_active.png) no-repeat; }
.faq_list li.active .faqBox > a {padding: 19px 60px;}
.faq_list li.active {border:1px solid #555}
.faq_list li .faq_contents {display:none;position:relative;background: #f5f7f9; padding: 30px 60px;font-weight:400;font-size:16px;}
.faq_list li .faq_contents:after {content:'A'; position:absolute; opacity: 0; top:33px; left: 30px;text-align:center;color:#333;font-weight:bold;font-size: 16px; transition: 2s ease}
.faq_list li .faq_contents img {max-width: 100% !important; height: auto !important; max-height: none !important;}
.faq_list li.active .faq_contents:after {opacity: 1}
.faq_list li .faq_contents p {line-height: 1.5; margin: 15px 0 0;}
.faq_list li .faq_contents p:first-child {margin:0}
.faq_list li.no_data {background: #f5f7f9; text-align:center; padding: 60px 15px; font-size: 18px; color: #222;}
.faq_list li.no_data .txt {margin:25px 0 0; line-height:1}

/* EOD : FAQ */

	/* 썸네일 */

	.thum_list {position:relative; overflow: hidden; margin:-50px 0 0 -20px; padding:0 0 50px; }
	.thum_list:after {content:""; position: absolute; bottom:0; left:20px; right:0; height:1px; background:#d7d7d7}
	.thum_list > li {float:left; width:25%; margin:50px 0 0}
	.thum_list > li.no_data {float:none; width:auto; border-top:1px solid #666; background: #f5f7f9; margin:50px 0 -50px 20px; padding: 60px 0; font-size: 18px; color: #222; text-align: center}
	.thum_list > li.no_data .txt {margin:25px 0 0; line-height: 1; vertical-align: middle}

	.thum_list .thum_content {display:block; margin:0 0 0 20px; position:relative}
	.thum_list .thum_content .dim_txt {position:absolute; top: 0; left:0; height:160px; line-height: 160px;text-align: center;width: 100%;z-index: 2; color: rgba(255,255,255,0.8);	background: rgba(0,0,0,0.55);}

	.thum_list .thum_content .imgBox {position: relative; height: 160px; overflow: hidden}
	.thum_list .thum_content .cropBox {transition: 0.3s all ease}
	.thum_list .thum_content:hover .cropBox {transform:scale(1.1)}
	.thum_list .thum_content .imgBox .label {position: absolute; top: 5px;left: 5px; min-width: 73px;height: 20px;text-align: center;line-height: 20px;	border-radius: 2px;}
	.thum_list .thum_content .tit {display:-webkit-box; margin:13px 0 0; line-height: 1.3; font-size: 18px; color: #222; overflow: hidden; text-overflow: ellipsis;	-webkit-line-clamp: 2;	-webkit-box-orient: vertical; min-height: 50px; max-height: 50px;}
	.thum_list .thum_content:hover .tit {text-decoration: underline}

	.thum_list .thum_content .tit.oneRow {position: relative; white-space: nowrap; word-wrap: normal; line-height: 1; margin:10px 0 0; min-height: 25px; max-height: 25px}
	.thum_list .thum_content .tit.oneRow .titBox.comment {margin:0 45px 0 0}
	.thum_list .thum_content .tit.oneRow .titBox .txt {position: relative; float: left; display: inline-block;	max-width: 100%; overflow: hidden;	text-overflow: ellipsis; white-space: nowrap; padding: 2px 0;	transition: 0.5s all ease;}
	.thum_list .thum_content .titBox .cnt {display: inline-block; vertical-align: middle; margin:0 0 0 3px; color:#1464d9;}

	.thum_list .thum_content .date {margin:20px 0 0; font-size:16px; color:#666;}

	.thumLinkBox > li {float:left;margin-right: -1px;}
	.thumLinkBox > li:last-child {margin-right: 0;}
	.thumLinkBox a {display:inline-block; width:40px; height:40px; border:1px solid #d7d7d7; box-sizing: border-box}
	.thumLinkBox li.thumType a {background:white url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_thum.png") no-repeat 10px 10px}
	.thumLinkBox li.listType a {background:white url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_list.png") no-repeat 8px 11px}
	.thumLinkBox > li.active {position: relative;}
	.thumLinkBox > li.active a {border:1px solid #555;}
	.thumLinkBox > li.thumType.active a {background:#555 url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_thum_active.png") no-repeat 10px 10px}
	.thumLinkBox > li.listType.active a {background:#555 url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_list_active.png") no-repeat 8px 11px}

	.floatBox .thumLinkBox { margin:-25px 0 0}

	/* EOD : 썸네일 */

/* EOD : 고객지원센터  */


/* 나의 강의실 */

.lecture_section {margin:40px 0 0}
.lecture_section .tit_area:first-child {margin:0}

/* 나의 홈 */

.myH_InfoBox {position: relative; margin:10px 0 60px; background:#f4f9fd; border-top:1px solid #d3dee6; border-bottom:1px solid #d3dee6; padding:36px 100px;}
.myH_InfoBox_Select {position: absolute; top:50%; left:100px; margin:-20px 0 0}
.myH_InfoBox_Select .selectBox {width: 148px; vertical-align: middle; text-align: left; margin:0; }
.myH_InfoBox_Select button {vertical-align: middle; margin:0;}

.myH_cntBox {margin:0 0 0 300px}
.myH_circle {display:table; table-layout: fixed; width: 100%; height:100px;}
.myH_circle > li {display: table-cell; vertical-align: middle}

.myH_circle .obj {position: relative; margin:0 0 0 20px; background: white; height: 100%; border-radius: 50px;}
.myH_circle > li:first-child .obj {margin:0}
.myH_circle .txt {display: table; height: 100%; font-size: 18px; margin:0 0 0 20px}
.myH_circle .txtIn {display: table-cell; height: 100%; vertical-align: middle; text-align: center}
.myH_circle .txtIn small {display: block; font-size: 14px; margin:5px 0 0}

.myH_circle .cnt {position: absolute; top:0; right:0; width: 100px; height: 100px; line-height: 100px; text-align: center; font-size:36px; font-weight: 500; color: white; background-color: #e74c3c; border-radius: 50%}

.myH_circle .obj.type02 .cnt {background: #00a1c9}
.myH_circle .obj.type03 .cnt {background: #824bc8}

.myH_circle .obj.type02 .txt , .myH_circle .obj.type03 .txt {margin:0 0 0 30px}

.myH_status .processSliderBox {height: 301px;}
.myH_status .sub_contentBox .list_area {min-height: 301px;}
.myH_status .sub_contentBox .list_area .no_data {padding-bottom: 96px;}

.processSlider {margin:10px 0 0; padding: 0 10px; border-top:1px solid #555; border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; }
.processSlider .no_data {background: #f5f7f9; padding:80px 15px; margin:0 -10px; font-size: 18px; color: #222; text-align:center; border-bottom: 1px solid #d7d7d7}
.processSlider .no_data .txt {display:block; font-size:16px; font-weight:500; margin:30px 0 0}
.processSlider.type02 {padding: 0}
.processSlider.type02 .wgBox {margin:0}
.processSlider.type02 .no_data {padding:65px 15px 64px; margin:0}

.processSlider .slick-list .slick-track .slick-slide > div , .processSlider .slick-list .slick-track .slick-slide > div > div {display:block !important}
.processSlider .wgBox {border:0; margin:0 10px}

.sub_content > ul {overflow:hidden; margin:-50px 0 0 -60px}
.sub_content > ul > li {float:left; width:50%}
.sub_content > ul > li.oneRow {width: 100%}
.sub_contentBox {margin:50px 0 0 60px;}
.sub_contentBox .tit_area {margin:0}
.sub_contentBox .pagination {margin:0; border:1px solid #d7d7d7; border-top:0;}
.sub_contentBox .pagination .paging {display:inline-block;line-height:40px;margin:10px 23px;}
.sub_contentBox .pagination .paging > li {display:none}
.sub_contentBox .pagination .paging > li.slick-active {display: inline-block;}
.sub_contentBox .pagination .paging > li > span {margin: 0px 7px; text-align: center;display: inline-block; color: #666; font-size: 16px;}
.sub_contentBox .pagination .paging > li > span.now_num {color:#0746c7}

.pagination .slick-dots {display:inline-block}
.pagination .slick-dots > li {float:left; margin: 5px 0 5px 10px;}
.pagination .slick-dots button {display: inline-block; background-color:white; width: 38px;height: 38px;line-height: 38px;	color: #222;font-size: 16px; padding: 0; text-align: center;	vertical-align: middle;	border-radius: 50%;	transition: all 0.3s ease;	border: 1px solid #dddddd;}
.pagination .slick-dots li.slick-active button { background:#0d7fa0; color:#fff; }
.pagination .prevBtn {display:inline-block; width:40px; height:40px; background: url("https://webpi.github.io/step_portal/images/template9/resp/default/button/common_page_arrow.png") no-repeat 0 0; background-size:cover; margin:10px -4px 10px 0; padding:0; border:0; cursor:pointer; text-indent:100px; overflow:hidden; vertical-align:top; transition:0.3s all ease}
.pagination .prevBtn:hover {background: url("https://webpi.github.io/step_portal/images/template9/resp/default/button/common_page_arrow_hover.png") no-repeat 0 0; background-size:cover;}
.pagination .nextBtn {display:inline-block; width:40px; height:40px; background: url("https://webpi.github.io/step_portal/images/template9/resp/default/button/common_page_arrow.png") no-repeat -40px 0; background-size:cover;  padding:0; border:0; margin:10px 0; cursor:pointer; text-indent:100px; overflow:hidden; vertical-align:top; transition:0.3s all ease}
.pagination .nextBtn:hover {background: url("https://webpi.github.io/step_portal/images/template9/resp/default/button/common_page_arrow_hover.png") no-repeat -40px 0; background-size:cover;}
.pagination .prevBtn.slick-hidden , .pagination .nextBtn.slick-hidden {display:none}

.sub_contentBox .list_Wrap {}
.sub_contentBox .list_area {position:relative; margin:10px 0 0;  background: #f5f7f9; border:1px solid #d7d7d7; border-top:1px solid #222; border-bottom: 0; min-height:300px; box-sizing: border-box}
.sub_contentBox .list_area .no_data {background: #f5f7f9; padding:95px 15px; font-size: 18px; color: #222; text-align:center}
.sub_contentBox .list_area .no_data .txt {display:block; font-size:16px; font-weight:500; margin:30px 0 0}
.sub_contentBox .list_area:after {content:""; position: absolute; bottom: 0; left:0; width:100%; border-bottom: 1px solid #d7d7d7}
.sub_contentBox .listBox {position: relative; display: table; width:100%; height:74px;}
.sub_contentBox .listBoxIn {background:white; display: table-cell; vertical-align: middle; width:100%; min-height: 43px; padding:15px 18px;}
.sub_contentBox .listBoxIn .txt {font-size:18px;color:#222;font-weight:bold; line-height: 1.2; margin: 0 110px 0 0; padding: 1px 0; display:inline-block;	display: -webkit-box; -webkit-box-orient: vertical; max-height: 42px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; word-break: break-all;}
.sub_contentBox .listBoxIn .label_gray {display:inline-block; font-size:14px; background-color:#555; color:white; padding:4px 5px; border:1px solid #555; position:absolute; top:50%; margin:-12px 0 0}
.sub_contentBox .listBoxIn .label_white {display:inline-block; font-size:14px; background-color:white; color:#666; padding:4px 5px; border:1px solid #d7d7d7; position:absolute; top:50%; margin:-12px 0 0}
.sub_contentBox .listBoxIn a.txt:hover{color: #0746c7; text-decoration: underline;}
.sub_contentBox .listBoxIn .txtBox {margin:0 0 0 75px; display: block; min-height: 21px;}
.sub_contentBox .listBoxIn .txtBox a {display:block; padding: 1px 0; font-size:18px;color:#222;font-weight:bold; overflow: hidden;text-overflow: ellipsis; max-width: 100%; -webkit-box-orient: vertical;
	max-height: 36px; -webkit-line-clamp: 2; word-break: break-all;}
.sub_contentBox .listBoxIn .txtBox a:hover {color: #0746c7; text-decoration: underline;}
.sub_contentBox .listBoxIn .txtBox a span {display:inline-block; float:left; line-height:1.2}
.sub_contentBox .listBox > button , .sub_content .sub_contentBox .listBox > a {position:absolute;top:50%;right:18px;margin: -21px 0 0;}
.sub_contentBox .list_area > li {position:relative; border-bottom: 1px solid #d7d7d7}

.wgBox .labelBox {display:block; max-height:24px; overflow:hidden}
.wgBox .labelBox > li {float:left; margin:0px 5px 5px 0}
.wgBox .labelBox > li .label_blue {display:inline-block; font-size:14px; background-color:#1464d9; color:white; padding:5px; border:1px solid #1464d9;}
.wgBox .labelBox > li .label_white {display:inline-block; font-size:14px; background-color:white; color:#666; padding:4px 5px; border:1px solid #d7d7d7;}
.wgBox .labelBox > li .label_gray {display:inline-block; font-size:14px; background-color:#555555; color:white; padding:4px 5px; border:1px solid #555555;}

.wgBox {position:relative; height:268px; border-top:1px solid #555; margin:10px 0 0; text-align:left; box-sizing: border-box}
.wgBox:after {content:""; position:absolute; left:0; bottom:0; width:100%; height:180px; background-color:#f5f7f9; z-index:-1}
.wgBoxIn {padding:30px 20px 20px}
.wgBoxIn > .tit {display:inline-block; font-size:24px; color:#222; font-weight:bold; margin:0; padding:0 0 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.wgBox .tag {display:block; min-height:29px; max-height:29px; margin:16px 0 0; overflow:hidden}
.wgBox .tag > li {float:left; margin:0 5px 5px 0}
.wgBox .tag > li span {display:inline-block; font-size:14px; background-color:white; color:#666; padding:4px 8px; border:1px solid #d7d7d7; border-radius: 15px; vertical-align: top;}

.wgBox .infoBox {margin:15px 0 0; display: table; width:100%;}
.wgBox .infoBox .leftBox {display: table-cell; vertical-align: middle; font-size:16px; color:#222;}
.wgBox .infoBox .leftBox .label {display:inline-block; margin:0 18px 0 0; font-weight:bold;}
.wgBox .infoBox .dateBox {display: table-cell; text-align: right; vertical-align: middle; font-size:16px; color:#222}
.wgBox .infoBox .dateBox .label {font-weight:bold}
.wgBox .infoBox .dateBox .data strong {font-size:20px; color:#0746c7}
.wgBox .infoBox .dateBox button {margin:0}

.wgBox .thumBox {position:relative}
.wgBox .imgBox {position:absolute; top:0; left:0; width:188px; height:108px; overflow:hidden; background-color:white; border:1px solid #d7d7d7}
.wgBox .txtBox {margin:0 0 0 210px; min-height:110px;}
.wgBox .txtBox > p:first-child , .wgBox .txtBox > a:first-child {margin:0}
.wgBox .txtBox .label {font-size:14px; color:#0746c7; margin:0}
.wgBox .txtBox .tit {display: -webkit-box;-webkit-box-orient: vertical; line-height:1.5; font-size:18px; color:#222; font-weight:bold; margin:10px 0 0; max-height:55px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; word-break: break-all;}
.wgBox .txtBox a.tit:hover {color:#0746c7; text-decoration:underline}
.wgBox .txtBox .sub_infoBox {margin:15px 137px 0 0}
.wgBox .txtBox .sub_infoBox .info {margin:12px 0 0; font-size:14px; color:#666; white-space: nowrap; min-height: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis;}
.wgBox .txtBox .sub_infoBox .info:first-child {margin:0}
.wgBox .txtBox .sub_infoBox .info strong {margin:0 10px 0 0}
.wgBox .txtBox .sub_infoBox .info.comp {color:#0746c7}

.wgBox .progressBox {margin:10px 0 0}
.wgBox .progressBoxIn {display:table; width:100%;}
.wgBox .progresLabel {display:table-cell; width:80px; font-size:16px; color:#222; font-weight:bold;}
.wgBox .progressBar {display:table-cell}
.wgBox .progressBarIn {position:relative; height:12px;}
.wgBox .progressBarIn:after {content:""; position:absolute; top:3px; left:0; width:100%; height:6px; background-color:#d7d7d7; border-radius:4px}
.wgBox .progressBarIn .bar {position: absolute; top: 0; bottom: 0; left: 0; width:0; height:12px; border-radius:6px; background-color:#e74c3c; z-index: 2;}
.wgBox .progressPer {display:table-cell; width:80px; text-align:right}
.wgBox .progressPer .text:after {content:"%"}
.wgBox .progressPer .num {font-size:20px; color:#e74c3c}

.wgBox .buttonBox {position:absolute; bottom:20px; left:20px; right:20px}
.wgBox .buttonBox > a , .wgBox .buttonBox > button {display: inline-block; min-width: 38px;	height: 48px; line-height: 48px; background: #0746c7; background: linear-gradient(90deg, #0a8dde 0%, #4456eb 100%); border: 0;text-align: center;	font-size: 16px;	color: white;	transition: 0.3s all ease; width:100%; padding:0; margin:0; }
.wgBox .buttonBox > a:hover , .wgBox .buttonBox > button:hover {background: #082ca1; background: linear-gradient(90deg, #082ca1 0%, #082ca1 100%);}

.wgBox.type02 {height:238px}
.wgBox.type02:after {height: 165px}
.wgBox.type02 .tag {margin:6px 0 0}

.wgBox.type03 , .wgBox.type04 {background: white; height:149px; margin:0; border-top:0}
.wgBox.type03:after , .wgBox.type04:after {display: none}
.wgBox.type03 .wgBoxIn , .wgBox.type04 .wgBoxIn {padding:20px}
.wgBox.type03 .buttonBox {left:auto; right:20px; width:100px}
.wgBox.type03 .buttonBox > a , .wgBox.type04 .buttonBox > button {background:#1464d9; height:38px; line-height:38px;}
.wgBox.type03 .buttonBox > a:hover , .wgBox.type03 .buttonBox > button:hover {background:#082ca1}
.wgBox.type04 .tag {margin:5px 0 0; max-height:58px}

/* EOD : 나의 홈 */

/* 나의 학습 */

.ThumBox {position:relative;}
.ThumBox .infoBox {margin:0 0 0 210px; min-height:110px; text-align:left}
.ThumBox .dayBox {position: absolute;top:4px;left: 4px;color: white;background-color: #f66800;font-size: 14px;z-index: 1; display: inline-block;	padding: 2px 4px; border-radius: 2px}
.ThumBox .imgBox {position:absolute; top:0; left:0; width:188px; height:108px; overflow:hidden; border:1px solid #d7d7d7}
.ThumBox .txtBox .label {font-size:14px; color:#0746c7; margin:0}
.ThumBox .txtBox .tit {display:inline-block; display: -webkit-box;-webkit-box-orient: vertical; line-height:1.2; font-size:18px; font-weight:500; color:#222; margin:5px 0 0; max-height:41px; overflow: hidden; word-break:break-all; text-overflow: ellipsis; -webkit-line-clamp: 2;}
.ThumBox .txtBox a.tit:hover {color:#0746c7; text-decoration:underline}
.ThumBox .tag {overflow:hidden; max-height:56px; margin:5px 0 0}
.ThumBox .tag > li {float:left; margin:2px 5px 0 0}
.ThumBox .tag > li span {display:inline-block; font-size:14px; color:#666; padding:4px 8px; line-height: 1; background-color:white; border:1px solid #d7d7d7; overflow:hidden; white-space:nowrap; border-radius: 15px; vertical-align: top;}
.ThumBox .likeBox {margin:20px 0 0;}
.ThumBox .likeBox .icon_heart {display:inline-block; width:16px; height:15px; margin:0 7px 0 0; background:url("https://webpi.github.io/step_portal/images/template11/resp/blue/icon/icon_heart.png") no-repeat}
.ThumBox .likeBox span {font-size:18px; color:#0746c7; font-weight:bold; vertical-align:bottom}

.paymentBox {display: table; width: 100%}
.paymentBox .ThumBox {display: table-cell; vertical-align: middle}
.paymentBox .payment_status {display: table-cell; vertical-align: middle; text-align: center; padding:0 30px}

.table_detail tr.detail td {background:#f5f7f9}
.table_detail tr.detail .ThumBox:before {content:""; position:absolute; top:-22px; left:20px; bottom:-18px; border-left:1px dashed #a4a4a4}
.table_detail tr.detail .ThumBox:after {content:""; position:absolute; top:34px; left:20px; width:30px; border-top:1px dashed #a4a4a4}
/* .table_detail tr.detail.first .ThumBox:before {top:-37px} */
.table_detail tr.detail.last .ThumBox:before {bottom:auto; height:52px;}
.table_detail tr.detail .ThumBox .infoBox {margin:0 0 0 75px}

.progressWrap {min-width:120px}
.progressWrap .progressPer .text:after {content:"%"}
.progressWrap .progressPer .num {font-size:20px; color:#0746c7}
.progressWrap .progressBar {margin:15px 0 0}
.progressWrap .progressBarIn {position:relative}
.progressWrap .progressBarIn:after {content:""; position:absolute; top:3px; left:0; width:100%; height:6px; background-color:#d7d7d7; border-radius:4px}
.progressWrap .progressBarIn .bar {position: absolute; top: 0; bottom: 0; left: 0; width:0; height:12px; border-radius:6px; background-color:#e74c3c; z-index: 2;}

.blockTable {display:table; width:100%; text-align:left; font-size:14px;}
.blockTable .tr {display:table-row}
.blockTable .th {display:table-cell; vertical-align:middle; padding:4px 10px 4px 0; font-weight:bold; white-space:nowrap}
.blockTable .td {display:table-cell; vertical-align:middle; word-break: break-word; width:100%; padding:4px 0}
.blockTable .icon_heart {display: inline-block;width: 16px;height: 15px; margin: 0 7px 0 0;background: url('https://webpi.github.io/step_portal/images/template11/resp/blue/icon/icon_heart.png') no-repeat}

/* 수강 후기 팝업 */

.star_review {margin:10px 0 40px; text-align:center}

.star_review .txt_default {font-size:16px}
.star_review .starList {position:relative; display:inline-block; width:220px; height:34px; margin:20px 0 0; background: url('https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_star_radio.png') no-repeat}
.star_review .starList input[type="radio"] {margin: 0; position: absolute;height: 1px;width: 1px;overflow: hidden; clip: rect(1px, 1px, 1px, 1px);}
.star_review .starList input[type="radio"] + label {position:absolute; width:36px; height:34px; top:0; left:0; padding:0}
.star_review .starList input[type="radio"] + label:before {display:none}
.star_review .starList input[type="radio"] + label:nth-of-type(1) {z-index:5; width:36px}
.star_review .starList input[type="radio"] + label:nth-of-type(2) {z-index:4; width:82px}
.star_review .starList input[type="radio"] + label:nth-of-type(3) {z-index:3; width:128px}
.star_review .starList input[type="radio"] + label:nth-of-type(4) {z-index:2; width:174px}
.star_review .starList input[type="radio"] + label:nth-of-type(5) {z-index:1; width:220px}
.star_review .starList input[type="radio"]:checked + label , .starList input[type="radio"]:hover + label {height:34px; background: url('https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_star_radio_active.png') no-repeat}

.star_review .review_txt {font-size:30px; color:#0746c7; margin:20px 0 0; line-height: 1;	min-height: 30px;}

/* EOD : 수강 후기 팝업 */

.certiBox {text-align: center; background:#f5f7f9; padding:30px 30px 25px}
.certiBox .radioList {display: inline-block}

/* EOD : 나의 학습 */

/* 학습메모/북마크 */

.Listinfo {overflow:hidden; text-align:left; font-size:16px}
.Listinfo > li:first-child {margin:0}
.Listinfo > li {margin:10px 0 0}


/* 학습 창 */

/* 학습 창 */

.learning {position: relative; overflow: hidden; display: table; width: 100%; margin:60px 0 0; background: #676767;}
.learning .contents {display:table-cell; width:100%; height:100%; vertical-align:middle}

.learning .videoArea {display: table; width:100%; height:100%; text-align: center}
.learning .videoBox {display: table-cell; vertical-align: middle; height:100%}

.learningHeader {position:fixed; top:0; left:0; width:100%; z-index: 10;}
.learningHeader .title {position: relative;	height:60px; line-height:60px; background: #1d2430;}
.learningHeader .title h2 {margin:0 360px 0 30px; font-size:24px; color: #ffffff; overflow: hidden; line-height:inherit; font-weight:400;}
.learningHeader .title h2 span {text-overflow:ellipsis; white-space:nowrap; float:left; overflow:hidden; max-width:100%}
.learningHeader .title_btnBox {position:absolute; top:0; bottom:0; right:8px;}
.learningHeader .title_btnBox a {display: inline-block; position:relative; float:left; height:60px; margin:0; color:#ccc;  font-size: 18px; padding:0 11px; transition:0.3s all ease}
.learningHeader .title_btnBox a:before , .learningHeader .title .title_btnBox button:before {content:""; position:absolute; top:50%; left:0; width:1px; height:18px; margin:-9px 0 0; background:#636a75;}
.learningHeader .title_btnBox a:first-child {height: 46px; padding-top: 14px; font-size: 16px; text-align: left;  line-height: 1;}
.learningHeader .title_btnBox a:first-child span {display: inline-block;vertical-align: middle;}
.learningHeader .title_btnBox a:first-child:before {display:none}
.learningHeader .title_btnBox a:hover {color:white}
.learningHeader .title_btnBox span {vertical-align:middle}
.learningHeader .title_btnBox .btnClose {position:relative; color:#ccc; font-size:18px; padding:0 30px}
.learningHeader .icon_bell , .learning_menu .icon_bell {position:relative; display:inline-block; vertical-align:middle; width:19px; height:18px; margin:0 8px 0 0;  background:url('https://webpi.github.io/step_portal/images/classroom/template3/resp/default/icon_window_bell.png') no-repeat; transition:0.3s all ease}
.learningHeader .icon_bell:after , .learning_menu .icon_bell:after {content:""; display:inline-block; position:absolute; top:0; left:0; width:19px; height:18px;  background:url('https://webpi.github.io/step_portal/images/classroom/template3/resp/default/icon_window_bell_light.png') no-repeat;}
.learningHeader .icon_question {position:relative;display: inline-block;vertical-align: middle;width: 16px;height: 20px; margin:0 6px 2px 0; box-sizing: border-box; background: url('https://webpi.github.io/step_portal/images/classroom/template3/resp/default/icon_book.png') no-repeat bottom; }
.learningHeader .icon_question:after {content:"";position:absolute;left: 5px; top:0;width: 6px;height: 9px; background: url('https://webpi.github.io/step_portal/images/classroom/template3/resp/default/icon_question.png') no-repeat; transition:1s all ease;}
.learningHeader .question_btn:hover .icon_question:after {transform: rotateY(360deg) scale(1.2); top:-2px}

.learningHeader .title_btnBox .menu_error:hover .icon_bell:after , .learning_menu_Header a:hover .icon_bell:after {display:none}
.learningHeader .title_btnBox .menu_error:hover .icon_bell:before , .learning_menu_Header a:hover .icon_bell:before {content:""; display:inline-block; position:absolute; top:0; left:0; width:19px; height:18px; background:url('https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_window_bell_light_hover.png') no-repeat; animation:flash 1s infinite;}

.learningHeader .icon_list {display:inline-block; vertical-align:middle; width:12px; height:12px; margin:0 6px 0 0; background:url('https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_window_list.png') no-repeat; transition:0.3s all ease}
.learningHeader .icon_close {display:inline-block; vertical-align:middle; width:13px; height:13px; margin:0 0 2px; background:url('https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_window_hd_close.png') no-repeat; transition:0.3s all ease}
.learningHeader .icon_close:hover {background:url('https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_window_hd_close_hover.png') no-repeat; transform: rotate(180deg);}
.learning_menu .icon_close {display:inline-block; vertical-align:middle; width:13px; height:13px; margin:0 8px 0 0; background:url('https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_window_close.png') no-repeat; transition:0.3s all ease}
.learningHeader .title .title_btnBox .menu_error:hover .icon_bell {background:url('https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_window_bell_hover.png') no-repeat;}
.learningHeader .title .title_btnBox .menu_btn:hover .icon_list {background:url('https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_window_list_hover.png') no-repeat;}

@keyframes flash {

	0% {

		opacity:0;

	}
	100%{

		opacity:1;

	}

}

.learning_menu {background:#2c323b; position:fixed; top:0; bottom:0; right:-350px; width:350px; z-index:10; transition:0.3s all ease;}
.learning_menu.active {right:0}
.learning_menu_Header {height:59px; border-bottom:1px solid #1d2430; text-align:center;}
.learning_menu_HeaderIn {display: inline-block; line-height: 59px;}
.learning_menu_HeaderIn > li {float:left; position: relative; display:table-cell; vertical-align:middle; }
.learning_menu_HeaderIn > li:before {content:""; position:absolute; top:50%; left:0; width:1px; height:18px; margin:-9px 0 0; background:#636a75;}
.learning_menu_HeaderIn > li:first-child a {font-size: 16px; text-align: left;}
.learning_menu_HeaderIn > li:first-child:before {display:none}
.learning_menu_Header a {display:block; color:#ccc; font-size:18px; padding:0 15px; transition:0.3s all ease}
.learning_menu_Header a:hover {color:white}
.learning_menu_Header a span {display:inline-block; vertical-align:middle; line-height: 1;}
.learning_menu_Header .menu_btn:hover .icon_close {transform: rotate(180deg)}
.learning_menu_Header .menu_error:hover .icon_bell {background:url('https://webpi.github.io/step_portal/images/classroom/template3/resp/default/icon_window_bell_hover.png') no-repeat;}
.learning_menu_Header .icon_question {position:relative;display: inline-block;vertical-align: middle;width: 16px;height: 20px; margin:0 8px 0 0; box-sizing: border-box; background: url('https://webpi.github.io/step_portal/images/classroom/template3/resp/default/icon_book.png') no-repeat bottom; }
.learning_menu_Header .icon_question:after {content:"";position:absolute;left: 5px; top:0;width: 6px;height: 9px; background: url('https://webpi.github.io/step_portal/images/classroom/template3/resp/default/icon_question.png') no-repeat; transition:1s all ease;}
.learning_menu_Header .question_btn:hover .icon_question:after {transform: rotateY(360deg) scale(1.2); top:-2px}

.learning_menu_List {background: #2c323b; color:white; overflow:auto;}
.learning_menu_List > li {border-bottom: 1px solid #1d2430;}
.learning_menu_List table { width:100%; table-layout:fixed; border-spacing:0; }
.learning_menu_List table tr td { padding:0; position:relative; }

.learningBox {padding:30px; border-bottom:1px solid #49505a;}
.learningBox .info {overflow:hidden}
.learningBox .infoL {float:left}
.learningBox .infoR {float:right}

.learningBox .infoR .download .icon_memo {position:relative; display:inline-block; vertical-align:middle; width:22px; height:23px; background:url('https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_window_memo.png') no-repeat;}
.learningBox .infoR .download .icon_memo:before {content: "";	position: absolute;	top: 7px; left: 6px; width: 7px;	height: 2px; background-color: #747b85; transition:0.3s all ease;}
.learningBox .infoR .download .icon_memo:after {content: ""; position: absolute; bottom: 6px; left: 6px; width: 10px; height: 2px;background-color: #747b85; transition:0.3s all ease;}
.learningBox .infoR .download.active .icon_memo {background:url('https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_window_memo_active.png') no-repeat;}
.learningBox .infoR .download.active .icon_memo:before {background-color: white;}
.learningBox .infoR .download.active .icon_memo:after {background-color: white;}
.learningBox .infoR .download:hover .icon_memo:before {width:10px}
.learningBox .infoR .download:hover .icon_memo:after {width:5px}

.learningBox .infoR > a {float:left; margin:3px 0 0 10px;}
.learningBox .infoR .icon_download {position:relative;display:inline-block;vertical-align: top;width:20px;height: 19px;background: url('https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_download.png') no-repeat bottom;}
.learningBox .infoR .icon_download:after {content: ""; display: inline-block; width:10px; height:16px; position:absolute; bottom:3px; left:5px; background:url('https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_download_arrow.png') no-repeat; transition:0.3s all ease;}
.learningBox .infoR > a.download:hover .icon_download:after {animation:down_move 1s infinite;}

.learningBox .infoR .icon_tree_btn {position:relative;display:inline-block;vertical-align: top;width:19px;height:19px; border: 2px solid white; border-radius: 50%; box-sizing: border-box;}
.learningBox .infoR .icon_tree_btn:after {content: "";display: inline-block;width:9px;height:6px;position:absolute;top: 5px;left: 3px;background:url('https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_tree_open_arrow.png') no-repeat; transition:0.3s all ease;}
.learning_menu_List table tr.active .icon_tree_btn:after {transform:rotate(180deg); top:4px;}

.learningBox .tit {display: block; line-height:1.3; font-size:20px; color:white; margin:10px 0 0}
.learningBox .tit:hover {text-decoration:underline}
.learningBox .le_class {display:inline-block; vertical-align:top; text-align:center; width:58px; height:23px; line-height:23px; margin:0 5px 0 0; border:1px solid #7d8692; color:white;}
.learningBox .le_state {display:inline-block; vertical-align:top; width:82px; height:25px; line-height:25px; border-radius:3px; background-color:#0d7fa0; font-size:16px; text-align:center;}
.learningBox .le_state.complete {background-color:#0d7fa0}
.learningBox .le_state.ing {background-color:#ff7971}
.learningBox .le_state.wait {background-color:#747b85}

.learning_dep2 {padding:11px 30px; background:#161c27; font-size:18px; position:relative;}
.learning_dep2 .tit {position:relative; display:block; color:white; margin:0 40px 0 0; padding:0 0 0 30px; line-height:1.2; overflow:hidden}
.learning_dep2 .tit:before {content:""; position:absolute; top:2px; left:0; display:inline-block; width:18px; height:18px; border-radius:50%; background-color:#747b85}
.learning_dep2 .tit.complete:before {background-color:#0d7fa0;}
.learning_dep2 .tit.ing:before {background-color:#ff7971;}
.learning_dep2 .tit.this:before {background-color:#ff7971;}
.learning_dep2 .tit.this:after {content:""; position: absolute; top: 6px; left: 6px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid white;}

/* .learning_dep2 .tit .tit_name {position:relative; overflow: hidden;	text-overflow: ellipsis; white-space: nowrap; float: left;max-width: 100%;} */
.learning_dep2 .tit .tit_name {position:relative; overflow: hidden;	text-overflow: ellipsis; white-space: nowrap; float: left;max-width: 100%;}
.learning_dep2 .tit .tit_name:before { content:''; position:absolute; bottom:0; right:0; width:0; height:1px; transition:width .6s cubic-bezier(0.51, 0.18, 0, 0.88) .1s; background:white;}
.learning_dep2 .tit .tit_name:after { content:''; position:absolute; right:0; bottom:0; width:0; height:1px; transition:width .3s cubic-bezier(0.29, 0.18, 0.26, 0.83); background:white;}
.learning_dep2 .tit .tit_name:hover:before, .learning_dep2 .tit .ellipsis:hover:after { width:100%; left:0; }

.learning_dep2 .le_bookmark {position:absolute; top:6px; right:30px;}
.learning_dep2 .le_bookmark:hover .icon_bookmark:before {animation:pen_move 1s;}
.learning_dep2 .icon_bookmark {position:relative; display:inline-block; vertical-align:middle; width:18px; height:22px; background:url('https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_window_bookmark.png') no-repeat;}
.learning_dep2 .icon_bookmark:before {content:""; display:inline-block; position:absolute; top:1px; right:-7px; width:15px; height:15px; background:url('https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_window_pen.png') no-repeat;}
.learning_dep2 .le_bookmark.active .icon_bookmark {background:url('https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_window_bookmark_active.png') no-repeat;}
.learning_dep2 .le_bookmark.active .icon_bookmark:before {background:url('https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_window_pen_active.png') no-repeat;}


@keyframes down_move {

	0% {
		bottom:3px
	}
	15% {
		bottom:4px
	}
	30% {
		bottom:5px
	}
	50% {
		bottom:6px
	}
	75% {
		bottom:5px
	}
	85% {
		bottom:4px
	}
	100% {
		bottom:3px
	}

}


@keyframes pen_move {

	0% {
		right:-7px;
	}
	25% {
		right:-5px;
	}
	50% {
		right:-7px;
	}
	75% {
		right:-5px;
	}
	100% {
		right:-7px;
	}

}

.videoBtnBox {position: fixed; bottom: 0; left: 0; right: 0; width: 100%; text-align: center; padding: 10px 0; z-index:9; background-color: white;}
.videoPaging {background-color:#ff7971; font-size:18px; color:white; display:inline-block; width:100px; height:40px; line-height:40px; margin:0 13px; border-radius:20px; vertical-align:middle}
.videoPaging span {display:inline-block; vertical-align:middle}

.btnVideoPrev {background:none; border: 0; height: auto; color:#2a3340; font-size:18px; font-style:italic; display:inline-block; vertical-align:middle}
.btnVideoPrev .circle {position:relative; display:inline-block; vertical-align:middle; width:33px; height:33px; margin:0 5px 0 0; background-color:#2a3340; border-radius:50%}
.btnVideoPrev .icon_prev_arrow {position: absolute; top: 50%; left: 50%; display: inline-block; vertical-align: middle; width: 17px; height: 15px; margin: -7px 0 0 -8px; background: url(https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_window_prev.png) no-repeat; transition:0.3s all ease;}
.btnVideoPrev:hover .icon_prev_arrow {animation:icon_prev_move 0.8s infinite;}
.btnVideoPrev .txt {display:inline-block; vertical-align:middle}

.btnVideoNext {background:none; border: 0; height: auto; color:#2a3340; font-size:18px; font-style:italic; display:inline-block; vertical-align:middle}
.btnVideoNext .circle {position:relative; display:inline-block; vertical-align:middle; width:33px; height:33px; margin: 0 0 0 10px; background-color:#298ae5; border-radius:50%}
.btnVideoNext .icon_next_arrow {position: absolute; top: 50%; left: 50%; display: inline-block; vertical-align: middle; width: 17px; height: 15px; margin: -7px 0 0 -8px; background: url(https://webpi.github.io/step_portal/images/template11/resp/default/usr/icon_window_next.png) no-repeat; transition:0.3s all ease;}
.btnVideoNext:hover .icon_next_arrow {animation:icon_next_move 0.8s infinite;}
.btnVideoNext .txt {display:inline-block; vertical-align:middle}

@keyframes icon_prev_move {

	0% {
		margin: -7px 0 0 -8px;
	}
	50% {
		margin:-7px 0 0 -10px
	}
	100% {
		margin: -7px 0 0 -8px;
	}

}

@keyframes icon_next_move {

	0% {
		margin: -7px 0 0 -8px;
	}
	50% {
		margin:-7px 0 0 -6px
	}
	100% {
		margin: -7px 0 0 -8px;
	}

}

/* EOD : 학습 창 */

/* EOD : 학습 창 */

/* EOD : 학습메모/북마크 */

/* 교재 배송현황 */

.ThumBox .infoBox.vertical {display:table}
.ThumBox .infoBox.vertical .txtBox {display:table-cell; height:100%; vertical-align:middle}
.ThumBox .infoBox.vertical .txtBox .tit {margin:0}

/* EOD : 교재 배송현황 */

/* 나의 설문 */

/* 목록 */

.list_survey {margin:40px 0 0}
.list_survey > ul {overflow:hidden; margin:-40px 0 0 -40px;}
.list_survey > ul > li {float:left; width:50%; min-height: 318px}
.list_survey .surveyBox {margin:40px 0 0 40px; border:1px solid #d7d7d7; border-top:1px solid #555}
.list_survey .surveyHeader {position:relative; padding:18px 19px; background-color:#f5f7f9}
.list_survey .surveyHeader .labelBox {position: absolute;top: 50%; left: 19px;margin: -9px 0 0;}
.list_survey .surveyHeader .titBox {margin: 0 0 0 50px;}
.list_survey .surveyHeader .tit {font-size:18px;color:#222;font-weight:bold;line-height: 1.2;display:inline-block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 100%;}

.list_survey .surveyContent {padding:19px; background-color:white; max-height: 180px;}
.list_survey .surveyContent .content {font-size: 16px;color: #666;line-height: 1.5; margin: 0 0 10px; display: -webkit-box;max-height: 50px;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2; word-break: break-all;}
.list_survey .surveyContent .blockTable {font-size:16px;}
.list_survey .surveyContent .blockTable .th {padding:6px 18px 6px 0}
.list_survey .surveyContent .blockTable .td {padding:6px 0}
.list_survey .surveyContent .blockTable .td .txt_green {font-weight:bold}
.list_survey .surveyContent .btnBox {margin: 20px 0 0;}
.list_survey .surveyContent .btnBox button {width:100%; padding:0; box-sizing:border-box}

.list_survey .surveyBox.comp .surveyHeader {background-color:#ebeff2}
.list_survey .surveyBox.comp .surveyContent {background-color:#f5f7f9}
.list_survey > ul > li.no_data {width:100%; margin:40px 0 0}
.list_survey > ul > li.no_data .no_dataBox {background: #f5f7f9; border:1px solid #d7d7d7; padding:97px 15px; margin:0 0 0 40px; font-size: 18px; color: #222; text-align:center}
.list_survey > ul > li.no_data .no_dataBox .txt {display:block; font-size:16px; font-weight:500; margin:30px 0 0}

/* EOD : 목록 */

/* 팝업 */


.list_test {margin:30px 0 0; border-bottom:1px solid #d7d7d7}
.list_test > li {position:relative; padding:20px 0 30px; overflow:hidden; border-top:1px solid #d7d7d7;}
.list_test > li .txt_num {display:table; width:100%; margin-top:0; line-height:normal; padding:0;}
.list_test > li .txt_num .num {position:static; display:table-cell; vertical-align:top; white-space:nowrap; text-align:left}
.list_test > li .txt_num .txt {display:table-cell; width:100%; vertical-align:top; padding:0 0 0 5px}
.list_test > li .txt_num .txt p {line-height:27px !important; font-size:16px !important; margin:0 10px 0 0}
.list_test > li .txt_num img {display:block; margin:20px 0 0; width:100%; border:1px solid #d7d7d7}
.list_test > li .txt_num pre {display:inline-block; margin:0; white-space: pre-wrap; word-break:break-all}
.list_test > li.answerOk:before {content:""; position:absolute; top:20px; left:0; display:inline-block; width:120px; height:92px; background:url(https://webpi.github.io/step_portal/images/template9/resp/default/usr/exam_answer_o.png) no-repeat; z-index:10}
.list_test > li.answerNo:before {content:""; position:absolute; top:20px; left:0; display:inline-block; width:120px; height:103px; background:url(https://webpi.github.io/step_portal/images/template9/resp/default/usr/exam_answer_n.png) no-repeat; z-index:10}

.list_test .checkList , .list_test .radioList {margin:20px 20px 0}
.list_test .textBox {margin:20px 0 0}

.test_label {display:block; overflow:hidden; margin:0 0 7px}
.test_label li {position:relative;float:left; margin:0 10px;font-size:16px;color:#666;}
.test_label li:first-child {margin-left:0}
.test_label li:before {content: "";position: absolute;top: 50%;left: -10px;width: 1px;height: 14px;margin: -6px 0 0;background-color: #d7d7d7;}
.test_label li:first-child:before {display:none}

/* EOD : 팝업 */

/* EOD : 나의 설문 */

/* 훈련과정 결제정보 */

.date_searchBox {background-color:#f4f9fd; padding:25px 40px;overflow:hidden; border-bottom: 1px solid #e7e7e7;}
.date_searchBoxIn .label {float:left; margin:0 20px 0 0; line-height:40px; font-size:16px;color:#222;font-weight:500;}
.date_searchBoxIn .radioList {float:left; margin:-5px 0 0;}

.content_Listed {overflow:hidden}
.content_Listed > li {float:left; margin:5px 40px 5px 0}

.dateBox {display:inline-block;vertical-align:middle;}
.dateBoxIn {display:table; table-layout:fixed; max-width:320px}
.dateBoxIn .inputBox {display:table-cell; vertical-align:middle;}
.dateBoxIn .inputBox input {padding:0}

.wave {width: 20px; height: 40px; line-height: 40px; font-size: 16px; text-align: center;}

.search_area .selectBox {width:150px; vertical-align:middle; margin:0 10px 0 0}
.search_area button {margin:0; vertical-align:middle}

.ThumBox .tool_tip {cursor:pointer; position:absolute; top:-10px; left:173px; display: inline-block; z-index: 2}
.ThumBox .tool_tip .txt {position: absolute; top: 0; left: 40px;	background: white;	border-radius: 15px; border: 1px solid #999;	padding: 18px 20px;	color: #631bbf;	font-size: 16px; white-space: nowrap; display:none}
.ThumBox .tool_tip:hover .txt {display:block}
.ThumBox .tool_tip.alarm {width:30px; height:30px; border-radius: 50%; background:none}
.ThumBox .tool_tip.alarm:after {content:""; position: absolute; top:0; left:0; width:30px; height:30px; border-radius: 50%; background:#824bc8 url('https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_alarm.png') no-repeat 7px 5px;}

.table_normal.payment .orderInfo p {font-size:16px; color:#222; margin:0 0 10px}
.table_normal.payment .mob_label .label {display: none}

.table_normal.cart {margin:20px 0 0}
.table_normal.cart .orderInfo p {font-size:16px; color:#222; margin:0 0 10px}
.table_normal.cart .mob_label .label {display: none}
.table_normal.cart .mob_label + .mob_label {margin-top:10px}
.table_normal.cart tbody tr td:last-child a {display: block}

.lecture_cart_txt {background:#f4f9fd; padding:20px 60px; border-bottom: 1px solid #e7e7e7}
.lecture_cart_txt .txt_bullet + .txt_bullet {margin-left:30px}

.agencyBox {overflow: hidden; margin:40px 0 0; word-break: break-all; font-size: 16px}
.agencyBox > li {position: relative; float:left; margin:5px 0 5px 10px; color:#666}
.agencyBox > li:before {content:""; position: absolute; top:2px; bottom:0; left:-5px; border-left:1px solid #d7d7d7}
.agencyBox > li:first-child {font-weight: 500; color:#222}
.agencyBox > li:first-child:before {display: none}

h4 + .agencyBox {float:right; margin:-50px 0 0}

.select_delBox {text-align: right; position: relative; margin:40px 0 0; height:15px;}
.select_delBox button {position: absolute; top:0; right:0; margin:0}
.select_delBox + .agencyBox {margin:0}

.table_payment {width: 100%; margin: 40px 0 0; border-top: 1px solid #555; border-bottom:1px solid #d7d7d7;	border-spacing: 0;	border-collapse: collapse;	line-height: 1.3;}
.table_payment tbody tr th {padding: 15px 30px; font-size: 20px; font-weight: 500; color: #222; text-align: center; background-color: #ebeff2;}
.table_payment tbody tr td {padding: 20px; border-top: 1px solid #d7d7d7; background-color: #fff;}
.table_payment tbody tr:first-child td {border-top:0}

.table_paymentBox {display: table; width: 100%}
.table_paymentBoxL , .table_paymentBoxR {display: table-cell; vertical-align: middle}
.table_paymentBoxL .agencyBox {margin:0}
.table_paymentBoxL .select_process {margin:10px 0 0 10px}
.table_paymentBoxL .select_process .cnt:after {content:":";}
.table_paymentBoxL .select_process .cnt {margin:0 5px 0 0}
.table_paymentBoxR {text-align: right; font-size: 18px}
.table_paymentBoxR .txt {font-weight: 500}
.table_paymentBoxR .number {margin:0 30px}
.table_paymentBoxR button {margin:0; font-size: 18px}

/* EDO : 훈련과정 결제정보 */

/* 결제취소 / 환불신청 팝업 */

.table_normal.payment.type02 {border-left: 1px solid #e7e7e7; border-right: 1px solid #e7e7e7}
.table_normal.payment.type02 thead tr th , .table_normal.payment.type02 tbody tr td {border-left: 1px solid #d7d7d7}
.table_normal.payment.type02 thead tr th:first-child , .table_normal.payment.type02 tbody tr td:first-child {border-left:0}

.refund_cashBox {position:relative}
.refund_cashBox .label {position:absolute; top:0; left:15px; line-height: 40px}
.refund_cashBox .refund_Input {margin:0 0 0 85px;}
.refund_cashBox .refund_Input > span {float:left; margin:0 1% 0 0}
.refund_cashBox .refund_Input .bank {width:25%}
.refund_cashBox .refund_Input .person {width:20%}
.refund_cashBox .refund_Input .ac_number {width:52%}
.refund_cashBox .refund_Input .inputBox , .refund_cashBox .refund_Input .selectBox {width: 100%}
.refund_cashBox .refund_Input input {width: 100%; padding: 0; text-indent: 12px}

/* EOD : 결제취소 / 환불신청 팝업 */

/* EOD : 나의 강의실 */

/* 강의실 */

/* 시험 팝업 */

.timeCount {margin:20px 0 0; text-align:right}
.timeCount .txt {font-size:16px; color:#222; vertical-align:middle; margin:0 2px 0 0}
.timeCount .countBox {background-color:#0d7fa0; display:inline-block; vertical-align:middle; font-size:16px; font-weight:500; color:white; padding:4px 12px}
.timeCount .countBox .colon {display:inline-block; font-weight:400; margin:0 6px}

.textCount {margin:5px 0 0; text-align:right; font-size:14px; color:#666}

.thumBox_exam {margin:20px 0 0; display:inline-block; width:283px; height:148px; border:1px solid #d7d7d7}
.thumBox_exam_small {margin:10px 0 0; display:inline-block;}
.thumBox_exam_small img {width:50%}

.exam_scoreBox {overflow:hidden; font-size:18px; margin:20px 0 0}
.exam_scoreBox > ul {float:right;}
.exam_scoreBox > ul > li {position:relative; float:left; padding:0 0 0 22px;}
.exam_scoreBox > ul > li:before {content:"";position:absolute;top: 50%;left:11px;bottom:0;width: 1px;height: 18px;background: #d7d7d7;margin: -9px 0 0;}
.exam_scoreBox > ul > li:first-child:before {display:none}
.exam_scoreBox .txt {margin:0 0 0 10px}

.score_num {font-size:24px; color:#0746c7}

/* EOD : 시험 팝업 */

/* EOD : 강의실 */

/* Membership */

/* 강사신청 */

/* 작성하기 */

.tc_terms {margin:40px 0 0}
.tc_terms_list .list {margin:10px 0 0}
.tc_terms_list .list:first-child {margin:0}
.tc_terms_list .list:first-child .stepBox {border-top: 1px solid #d7d7d7; margin: 0;}
.tc_terms_list .list.active .stepBox {border:1px solid #555}
.tc_terms_list .list.active .stepBox > a {background-color:white; color:#0746c7}
.tc_terms_list .stepBox {transition:0.45s ease; margin: 10px 0 0;}
.tc_terms_list .stepBox > a {position:relative; display:block; background-color: #0d7fa0; padding: 19px 50px 19px 30px;font-size: 16px; color:white; font-weight:400;transition:0.45s ease;line-height:1.3;}
.tc_terms_list .stepBox > a:after { content:''; position:absolute; top:50%; right:18px; margin:-5px 0 0 0; width:16px; height:9px; background:url(https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_join_arrow.png) no-repeat 0 0; }
.tc_terms_list .stepBox > a > strong {margin:0 10px 0 0}
.tc_terms_list .list.active .active a { color:#0746c7; }
.tc_terms_list .list.active .stepBox > a:after { background:url(https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_join_arrow.png) no-repeat 0 -9px;}
.tc_terms_list .list.active .terms_contents > a {padding:9px 50px}
.tc_terms_list .terms_contents {display:none; position:relative;background: #f5f7f9; padding: 25px 30px;font-weight:400;font-size:16px;}
.tc_terms_list .terms_contents h4 {margin:20px 0; text-align:center}
.tc_terms_list .terms_contents p { margin:5px 0; line-height:1.6; }
.tc_terms_list .terms_contents .table_hori {margin:0}
.tc_terms_list .terms_contentsIn {max-height:450px; overflow:auto}
.tc_terms_list .terms_contents textarea {height:98px}
.tc_terms_list .input_bank {width:138px}
.tc_terms_list .input_ac_number {width:248px}
.tc_terms_list .stepBox .btnBox {display:none; text-align:right; margin:0; padding:20px 30px;}
.tc_terms_list .stepBox .btnBox button {margin:0}
.tc_terms_list .inputList {overflow:hidden}
.tc_terms_list .inputList > li {float:left; margin:5px 30px 5px 0}
.tc_terms_list .inputList .label {margin:0 10px 0 0; vertical-align:middle}

.tc_terms .txt_default {display:block; margin:20px 0}
.tc_terms .txt_default:first-child {margin-top:0}

/* NCS 분류 팝업 */

.ncsTypeBox {display:table; table-layout:fixed; width:100%; border-bottom:1px solid #555;}
.ncsTypeBox .typeBox {display:table-cell;}
.ncsTypeBox .tit {background-color:#0d7fa0; line-height:40px; height:40px; color:white; font-size:16px; text-align:center}
.ncsTypeBox .typeBox:first-child .list_type {border-left:1px solid #555}
.ncsTypeBox .list_type {border-right:1px solid #555; height: 248px; overflow:hidden; overflow-y:auto;}
.ncsTypeBox .list_type a {display:block; padding:11px; font-size:16px; color:#666}
.ncsTypeBox .list_type li.active {background-color:#e9f8fa}
.ncsTypeBox .list_type li.active a {color:#0746c7}

.ncsTypeList {display:block; overflow:hidden; padding:15px 0; border-bottom:1px solid #d7d7d7}
.ncsTypeList > li {float:left; margin:5px 5px 5px 0}
.ncsTypeList .type {position:relative; background-color:white; border:1px solid #555; padding:6px 30px 6px 10px}
.ncsTypeList .type_del {position:absolute; top:50%; right:9px; display: inline-block; width:11px; height:11px; margin:-5px 0 0; background: url(https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_close_black.png) no-repeat;}

/* EOD : NCS 분류 팝업 */


/* EOD : 작성하기 */

/* 심사중 & 심사완료 */

.ms_procees {text-align:center; margin:100px 0 0}
.ms_procees > ul {display:inline-block; margin:0 0 0 -100px}
.ms_procees > ul > li {position:relative; float:left; margin:0 0 0 100px}
.ms_procees > ul > li:before {content:"";position:absolute;top:50%;left: -50%; display:inline-block; width:14px;height:26px; margin: -13px 0 0 43px; background:url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_ms_arrow.png") no-repeat; background-size:cover !important;}
.ms_procees > ul > li:first-child:before {display:none}

.ms_Circle {display:table; width:196px; height:196px; background-color:white; border:2px solid #555; border-radius:50%}
.ms_CircleIn {display:table-cell; width:100%; height:100%; vertical-align:middle}
.ms_Circle .icon {display:inline-block; width:70px; height:60px; background:url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_ms_process01.png") no-repeat; background-size:cover !important;}
.ms_Circle .txt {font-size:18px; color:#222; margin:23px 0 0}
.ms_Circle.type02 .icon {background:url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_ms_process02.png") no-repeat}
.ms_Circle.type03 .icon {background:url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_ms_process03.png") no-repeat}

.ms_procees > ul > li.active .ms_Circle {background-color:#0d7fa0; border:2px solid #0d7fa0}
.ms_procees > ul > li.active .ms_Circle .txt {color:white}
.ms_procees > ul > li.disabled .ms_Circle {background-color:#d7d7d7; border:2px solid #d7d7d7}
.ms_procees > ul > li.disabled .ms_Circle .txt {color:#666}
.ms_procees > ul > li.disabled:before {background:url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_ms_arrow.png") no-repeat -14px 0; }
.ms_procees > ul > li.active .ms_Circle.type02 .icon {background:url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_ms_process02_active.png") no-repeat}
.ms_procees > ul > li.active .ms_Circle.type03 .icon {background:url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_ms_process03_active.png") no-repeat}

.ms_txtBox {margin:100px 0 0; text-align:center; color:#222;}
.ms_txtBox strong {font-size:24px; font-weight:500;}
.ms_txtBox p {margin:20px 0 0; font-size:16px; line-height:32px; font-weight:400;}
.ms_txtBox p:first-child {margin:0}
.ms_txtBox button {margin:40px 0 0}

/* EOD : 심사중 & 심사완료 */

/* EOD : 강사신청 */

/* 개인정보처리방침 */

.borderBox {padding:20px; border:1px solid #d7d7d7}

.link_download {color:#0746c7; display:inline-block; margin:10px 0 0 20px; text-decoration:underline}

/* EOD : 개인정보처리방침 */

/* 사이트맵 */
.sitemap-wrap {padding-top: 40px;}
.sitemap-wrap a {color: inherit;}
.sitemap-wrap a:hover {color: #0746c7; text-decoration: underline;}
.sitemap-wrap:after {content: ""; clear: both; overflow: hidden; display: table; height: 0; font-size: 0; line-height: 0;}
.sitemap-wrap .sitemap-box {float: left; margin-left: 80px; font-family: "Nanum Square";}
.sitemap-wrap .sitemap-box:first-child {margin-left: 0;}
.sitemap-wrap .sitemap-contents {overflow: hidden; margin-top: 50px; padding-bottom: 50px; border-bottom: 1px solid #e7e7e7; font-size: 18px;}
.sitemap-wrap .sitemap-contents:first-child {margin-top: 0;}
.sitemap-wrap .sitemap-contents .tit {float: left; width: 160px; margin: 0 15px 0 0; padding-left: 20px; font-size: 22px; color: #1464d9; font-weight: 800; box-sizing: border-box;}
.sitemap-wrap .sitemap-menu {overflow: hidden; font-size: 18px;}
.sitemap-wrap .sitemap-menu > li {margin-top: 25px;}
.sitemap-wrap .sitemap-menu > li:first-child {margin-top: 0;}
.sitemap-wrap .sitemap-menu .sitemap-menu-sub {margin-top: 25px; font-family: "Noto Sans KR", sans-serif; font-size: 16px; color: #666;}
.sitemap-wrap .sitemap-menu .sitemap-menu-sub li {margin-top: 18px; padding-left: 10px;}

/* 원격지원서비스 */
.remote_wrap { overflow:hidden; position:relative; margin:40px 0 0; padding:50px; text-align:center; border-top:1px solid #555; background:#f5f7f9; }
.remote_wrap:before { content:''; position:absolute; z-index:1; bottom:0; left:0; width:100%; height:84px; background:#ebeff2; }
.remote_wrap .remote_tit { position:relative; z-index:5; font-size:24px; margin:55px 0 25px 0; line-height:1.2; }
.remote_wrap .remote_txt { position:relative; z-index:5; font-size:18px; line-height:1.8; }
.remote_wrap .remote_bold { position:relative; z-index:1; }
.remote_wrap .remote_bold:after { content:''; position:absolute; z-index:-1; left:0; bottom:-1px; width:100%; height:12px; background:#dae0e5; }
.remote_wrap .remote_btn { position:relative; z-index:3; margin:50px 0 0 0; }
.remote_wrap .remote_btn a { margin:0; }
.remote_bg { position:relative; }
.remote_bg:before { content:''; position:absolute; z-index:1; bottom:-167px; left:7px; width:247px; height:360px; background:url("https://webpi.github.io/step_portal/images/template9/resp/default/usr/usr_remote_bg01.png") no-repeat; }
.remote_bg:after { content:''; position:absolute; z-index:1; bottom:-153px; right:0; width:260px; height:347px; background:url("https://webpi.github.io/step_portal/images/template9/resp/default/usr/usr_remote_bg02.png") no-repeat; }
.remote_bg .remote_line01 { position:absolute; left:195px; right:188px; top:-34px; z-index:2; border-top:2px dashed #555; }
.remote_bg .remote_line01:after { content:''; position:absolute; top:-9px; right:-10px; width:10px; height:18px; background:url("https://webpi.github.io/step_portal/images/template9/resp/default/usr/usr_remote_line01.png") no-repeat; }
.remote_bg .remote_line02 { position:absolute; left:200px; right:180px; top:-18px; z-index:2; border-top:2px dashed #f64141; }
.remote_bg .remote_line02:after { content:''; position:absolute; top:-9px; left:-10px; width:10px; height:18px; background:url("https://webpi.github.io/step_portal/images/template9/resp/default/usr/usr_remote_line02.png") no-repeat; }
/* EOD : 원격지원서비스 */

/* 교육원 소개 */

/* 스마트플랫폼 STEP 소개 */

.section_top {text-align: center; margin:70px 0 0}
.section_top .main_txt {font-size: 26px; line-height: 1.5; font-weight: 500; margin:0}


.section_top .left_content {position: relative; margin:100px 0 0; height: 300px}
.section_top .left_content .imgBox {position:absolute; top:0; left:-360px; display: inline-block}
.section_top .left_content .contentBox {margin:0 0 0 730px; text-align: left; overflow: hidden}

.section_top .right_content {position: relative; margin:100px 0 0; height: 300px}
.section_top .right_content .imgBox {position:absolute; top:0; right:-360px; display: inline-block}
.section_top .right_content .contentBox {margin:0 730px 0 0; text-align:right; overflow: hidden}

.section_top .contentBox .tit {font-size: 26px; color:#222; font-weight:bold; margin:25px 0}
.section_top .contentBox .content_txt {font-size: 16px; color:#666; line-height: 1.8; margin:0}


.section_mid {margin:90px 0 0}
.step_intro_circle {overflow: hidden; text-align: center;}
.step_intro_circle > li {float:left; width: 25%}
.step_intro_circle > li .num {font-size: 36px; color:#d7d7d7; margin:0; }
.step_intro_circle > li .txt {margin:12px 0 0; font-size: 24px; color:#222; font-weight: 600}

.step_intro_circle .step_circleBox {display: inline-block; margin:20px 0 0; width: 260px; height: 260px; background:#536bb8; border-radius: 50%;}
.step_intro_circle .step_circleBox.type02 {background:#4862b3}
.step_intro_circle .step_circleBox.type03 {background:#334fab}
.step_intro_circle .step_circleBox.type04 {background:#2846a6}
.step_intro_circle .step_circle {display:table; width:100%; height:100%}
.step_intro_circle .step_circleIn {display: table-cell; vertical-align: middle}
.step_intro_circle .step_circleBox .icon {display: inline-block; width: 62px; height: 62px; background:url("https://webpi.github.io/step_portal/images/template11/resp/default/usr/step_intro_icon01.png") no-repeat; background-size: cover}
.step_intro_circle .step_circleBox.type02 .icon {display: inline-block; width: 61px; height: 58px; background:url("https://webpi.github.io/step_portal/images/template11/resp/default/usr/step_intro_icon02.png") no-repeat; background-size: cover }
.step_intro_circle .step_circleBox.type03 .icon {display: inline-block; width: 23px; height: 60px; background:url("https://webpi.github.io/step_portal/images/template11/resp/default/usr/step_intro_icon03.png") no-repeat; background-size: cover }
.step_intro_circle .step_circleBox.type04 .icon {display: inline-block; width: 64px; height: 53px; background:url("https://webpi.github.io/step_portal/images/template11/resp/default/usr/step_intro_icon04.png") no-repeat; background-size: cover }
.step_intro_circle .step_circleBox .content {color:white; font-size:20px; line-height: 1.5;}

.step_intro_circle_txt {font-size:24px; color:#666; text-align: center; margin:60px 0 0; line-height: 1.5}

.section_bot {text-align: center; margin:120px 0 0}
.bg_intro_BIBox {margin:80px 0 0}
.bg_intro_symbolBox {display: inline-block; margin:110px 0 0}
.bg_intro_symbolBoxIn {display: table;}
.bg_intro_symbolBoxIn .symbol_img {display: table-cell; vertical-align: middle}
.bg_intro_symbolBoxIn .symbol_txt {display: table-cell; vertical-align: middle; font-size: 20px; color:#666; line-height: 1.5; padding:0 0 0 30px; text-align: left}

/* EOD : 스마트플랫폼 STEP 소개 */

.intro_Area {margin:80px 0 0}

/* 교육기관 소개 */

.previewBox img {width:100%}

.white_radiusBox {position:relative; display:table; width:100%; height:88px; margin:40px 0 0; text-align:center; background-color:white; border:1px solid #dcdcdc; border-radius:49px}
.white_radiusBoxIn {display:table-cell; vertical-align:middle; padding:0 15px; height:100%; color:#222; font-size:20px; font-weight:500; line-height: 1.5;}

.white_radiusBox.type02 {margin:10px 0 0}
.white_radiusBox.type02 .white_radiusBoxIn {font-size:18px;}

.table_block {border-right:1px solid #d7d7d7; font-size:16px; color:#222;}
.table_block > ul {display:table; table-layout:fixed; margin:30px 0 0; width:100%;}
.table_block > ul > li {display:table-cell; vertical-align:top; border-left:1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; font-weight:400;line-height:20px;}
.table_block .th {display:table; width:100%; text-align:center; border-top:1px solid #d7d7d7; background-color:#f7f7f7;}
.table_block .td {display:table; width:100%; text-align:left; border-top:1px solid #d7d7d7}
.table_block .th > span , .table_block .td > span {display:table-cell; vertical-align:middle; padding:10px}
.table_block .th {min-height:80px}

/* EOD : 교육기관 소개 */

/* 가상훈련 소개 */

.intro_vt .main_txt {font-size: 36px}
.intro_vt .sub_txt  {font-size: 20px; color:#666; line-height: 1.5; margin:40px 0 0}

.vt_mainInfo {overflow: hidden; }
.vt_mainInfo .content_area {position: relative; min-height:320px; margin:80px 0 0; overflow: hidden}
.vt_mainInfo .content_area img {position: absolute; top:0; left:0;}
.vt_mainInfo .content_area .content {margin:80px 0 0 630px; text-align: left}
.vt_mainInfo .content_area .content .main_txt {font-size: 26px; font-weight: bold}

.vt_mainInfo .content_area.type02 .content {margin:80px 630px 0 0; text-align: right}
.vt_mainInfo .content_area.type02 img {left:auto; right:0;}

.vt_subInfo {overflow: hidden; margin:120px 0 0;}
.vt_subInfo .content_area {position: relative; overflow: hidden; float: left; width: 50%;}
.vt_subInfo .content_area img {position: absolute; top:0; left:0;}
.vt_subInfo .content_area .content {margin:0 30px 0 105px;text-align: left;}
.vt_subInfo .content_area .content .main_txt {font-size: 26px; font-weight: bold; line-height: 1}

.vt_subInfo .content_area.type02 .content {margin:0 0 0 130px;}
.vt_subInfo .content_area.type02 img {left:30px}

/* EOD : 가상훈련 소개 */


/* 인사말 */

.txt_greeting {font-size:40px; font-weight:300; text-align:center; line-height:1.2; margin:20px 0 0}
.txt_greeting strong {font-weight:500}

.greetingBox {display:table; width:100%; margin:70px 0 0}
.greetingBoxL {display:table-cell; vertical-align:top; width:430px}
.greetingBoxR {display:table-cell; vertical-align:top; padding: 0 0 0 70px;}
.greetingBoxR .txt_default {margin:40px 0 0}

.txt_signature {font-size:18px; color:#222; margin:30px 0 40px}
.txt_signature span {vertical-align:middle; margin:0 20px 0 0; font-weight: bold}
.txt_signature img {vertical-align:middle}

/* EOD : 인사말 */

/* 연혁 */

.historyBox > ul {overflow:hidden}
.historyBox > ul > li {position:relative}
.history_year {text-align:center;}
.history_year_circle {display:inline-block; width:103px; height:103px; font-size:24px; text-align:center; color:white; line-height:103px; border-radius:50%; background-color:#334fab}

.historyBox > ul > li:nth-child(even) .history_year_circle {background-color: #617ede}

.history_txtBox {position:relative; text-align:right}
.history_txtBoxIn {position:relative; display:inline-block; margin:0 50% 0 0; padding:37px 0 10px; line-height:1.3; min-height: 40px;}
.history_txtBoxIn:before {content:""; position:absolute; top:40px; right:-7px; display:inline-block; width:15px; height:15px; border-radius:50%; background-color:#c1c1c1; z-index:1;}
.history_txtBoxIn:after {content:""; position:absolute; top:0; bottom:0; right:0; width:1px; height:100%; background-color:#c1c1c1}
.history_txtBoxIn .txt {position:relative; font-size:16px; color:#222; margin:15px 25px 0 0; padding:0 15px 0 0;}
.history_txtBoxIn .txt:before {content: ''; position: absolute;	top:10px; right:0; width: 4px; height: 4px; background: #555; border-radius: 50%;}
.history_txtBoxIn .txt:first-child {margin:0 25px 0 0}
.history_txtBoxIn .txt_hyphen {position:relative;font-size:16px; color:#666; margin:10px 45px 0 0; padding:0 10px 0 0;}
.history_txtBoxIn .txt_hyphen:before {content:'-'; position: absolute;top:1px; right:0;}
.history_txtBoxIn .txt_hyphen:first-child {margin:0 25px 0 0}

.historyBox > ul > li:last-child .history_txtBoxIn:after {height:50%}

.historyBox > ul > li:nth-child(2n) .history_txtBox {text-align:left}
.historyBox > ul > li:nth-child(2n) .history_txtBoxIn {margin:0 0 0 50%;}
.historyBox > ul > li:nth-child(2n) .history_txtBoxIn:before {right:auto; left:-7px}
.historyBox > ul > li:nth-child(2n) .history_txtBoxIn:after {right:auto; left:0}
.historyBox > ul > li:nth-child(2n) .history_txtBoxIn .txt {margin:15px 0 0 25px; padding:0 0 0 15px}
.historyBox > ul > li:nth-child(2n) .history_txtBoxIn .txt:first-child {margin:0 0 0 25px;}
.historyBox > ul > li:nth-child(2n) .history_txtBoxIn .txt:before {right:auto; left:5px}

.historyBox > ul > li:nth-child(2n) .history_txtBoxIn .txt_hyphen {margin:10px 0 0 45px; padding:0 0 0 10px}
.historyBox > ul > li:nth-child(2n) .history_txtBoxIn .txt_hyphen:before {right:auto; left:0;}
.historyBox > ul > li:nth-child(2n) .history_txtBoxIn .txt_hyphen:first-child {margin:0 0 0 25px}

/* EOD : 연혁 */


/* 찾아오시는길 */

.direction_map {height:348px; border:1px solid #d7d7d7;}
.direction_map_info {border:1px solid #d7d7d7; border-top:0; padding:30px; text-align:center}
.direction_map_info .map_name {font-size:20px; margin:0}
.direction_map_info .map_data {display:inline-block; margin:20px 0 0; font-size:16px; line-height:1.5}
.direction_map_info .map_data > li {display:inline-block; margin:10px 10px 0 10px}
.direction_map_info .map_data > li:first-child {display:block; margin-top:0}
.direction_map_info .map_data .map_label {color:#222; margin:0 12px 0 0;}
.direction_map_info .map_data .map_txt {color:#666}

/* EOD : 찾아오시는길 */

/* EOD : 교육원 소개 */



/* EOD : Membership */

/* 통합검색 */
.search_wrap {padding:60px 0 0;}
.search_wrap form , .search_wrap fieldset {margin: 0; padding: 0; border: 0;}
.search_wrap legend span {visibility: hidden; overflow: hidden;	position: absolute;	width: 1%; height: 1%; font-size: 1%; z-index: -9999;}
.search_wrap .ir {overflow: hidden; position: absolute; width: 1%; height: 1%; margin: -1px; font-size: 1%; z-index: -9999; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);}
.search_wrap .search_top {padding: 40px 40px 30px; border-top: 1px solid #555; border-bottom: 1px solid #d7d7d7; background: #f5f7f9;}
.search_wrap .search_top .search_total {margin: 0; padding: 0; font-size: 16px; color: #666;}
.search_wrap .search_top .search_total .keyword,
.search_wrap .search_top .search_total .cnt {font-size: 20px; color: #0746c7; font-weight: 500;}
.search_wrap .search_top .search_input {margin-top: 20px; font-size: 0;}
.search_wrap .search_top .t {display: inline-block; margin-right: 20px; font-size: 16px; vertical-align: middle; cursor: pointer;}
.search_wrap .search_top .selectBox {width: 100%; max-width: 180px; margin-right: 10px; vertical-align: middle;}
.search_wrap .search_top .istyle {width: 100%; max-width: 450px; margin-right: 10px;}
.search_wrap .search_top .btn_s_blue {margin: 0; vertical-align: middle;}
.search_wrap .search_result {margin-top: 40px;}
.search_wrap .search_list {margin-top: 40px;}
.search_wrap .search_list .tabBox.active {margin-top: 40px;}
.search_wrap .search_list .tabBox.active + .tabBox.active {margin-top: 60px;}
.search_wrap .search_list .tabBox.active:first-child {margin-top: 0;}
.search_wrap .search_result .tit-h3 {margin-bottom: 0; font-size: 24px; font-weight: 500; text-align: left;}
.search_wrap .search_result .tit-h3 .cnt {font-size: 16px; color: #666; font-weight: 400;}
.search_wrap .search_result .tit-h3 .cnt em {color: #222; font-style: normal;}
.search_wrap .contents_list {margin-top: 20px; border-top: 1px solid #555;}
.search_wrap .contents_list li {position: relative; padding: 18px 120px 18px 0; border-bottom: 1px solid #d7d7d7; font-size: 0; line-height: 24px;}
.search_wrap .contents_list .txtBox {display: inline-block; max-width: calc(100% - 34px); vertical-align: middle;}
.search_wrap .contents_list a {overflow: hidden; display: inline-block; position: relative; max-width: 100%; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; transition: .3s width ease;}
.search_wrap .contents_list a:before{content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 1px; transition: width .6s cubic-bezier(0.51, 0.18, 0, 0.88) .1s; background: #0746c7;}
.search_wrap .contents_list a:after{content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 1px; transition: width .3s cubic-bezier(0.29, 0.18, 0.26, 0.83); background: #0746c7;}
.search_wrap .contents_list a:hover {color: #0746c7;}
.search_wrap .contents_list a:hover:before,
.search_wrap .contents_list a:hover:after {left: 0; width: 100%;}
.search_wrap .contents_list .date {position: absolute; right: 20px; top: 50%; margin-top: -12px; font-size: 16px; color: #666;}
.search_wrap .contents_list .no_data {padding: 60px 0; font-size: 18px; color: #222; background: #f5f7f9; text-align: center;}
.search_wrap .contents_list .no_data .txt {margin: 25px 0 0; line-height: 1;}
/* EOD : 통합검색 */

/* desktop */
@media only screen and (min-width: 1200px) {
	/* 메인 */
	/* 소셜 */
	.social-main .social-sns .social-sns-link .btn-social:hover {width: auto; padding: 0 15px; background-image: none;}
	.social-main .social-sns .social-sns-link .btn-social:hover .ir {position: static; width: auto; height: auto; margin: auto; font-size: 14px; color: #fff; line-height: inherit; clip: unset; clip-path: unset;}
}

/* tablet */
@media only screen and (max-width: 1199px) {
	/* 메인 */
	/* banner main */
	.banner-main .box {height: 188px;}
	.banner-main .img {position: absolute; max-width: none; height: 100%;}
	.banner-main .btn-banner-main-prev,
	.banner-main .btn-banner-main-next {width: 40px; height: 40px; margin: -20px 0 0 0;}
	.banner-main .btn-banner-main-prev:before,
	.banner-main .btn-banner-main-next:before {width: 9px; height: 16px; margin: -8px 0 0 -4px;}
	.banner-main .btn-banner-main-prev {left: 5px;}
	.banner-main .btn-banner-main-prev:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_lt_left_mobile.png");}
	.banner-main .btn-banner-main-next {left: auto; right: 5px;}
	.banner-main .btn-banner-main-next:before {background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/icon/icon_gt_right_mobile.png");}

	/* userinfo */
	/* lnb */
	.lnb-quick .lnb-wrap {padding: 0 15px;}
	.lnb-quick .btn-quick {height: 80px; padding-top: 10px; font-size: 12px;}
	.lnb-quick .btn-quick:before {height: 37px; margin-bottom: 4px;}
	.lnb-quick .ico-alllist:before {background-size: 30px auto;}
	.lnb-quick .ico-list:before {background-size: 30px auto;}
	.lnb-quick .ico-paper:before {background-size: 29px auto;}
	.lnb-quick .ico-keyboard:before {background-size: 31px auto;}
	.lnb-quick .ico-remote:before {background-size: 29px auto;}
	.lnb-quick .ico-board:before {background-size: 30px auto;}
	.lnb-quick .ico-question:before {background-size: 30px auto;}
	.lnb-quick .ico-smartpager:before {background-size: 33px auto;}
	.lnb-quick .ico-vr:before {background-size: 30px auto;}
	.lnb-quick .ico-file:before {background-size: 32px auto;}

	.lnb-quick .lnb-quick-basic {display: none;}
	.lnb-quick .is-mobile {display: block;}

		/* 유저정보 */
	.userinfo-main .userinfo-wrap {padding: 30px 15px;}
	.userinfo-main .userinfo-detail-user {display: none;}
	.userinfo-main .userinfo-detail-status {position: static; font-size: 0; text-align: center;}
	.userinfo-main .userinfo-detail-status li {display: inline-block; float: none; margin-left: 60px; font-size: 14px; vertical-align: top;}

	.userinfo-course .tit-h2 {display: none;}
	.userinfo-course .userinfo-course-contents {margin-top: 0;}
	.userinfo-course .userinfo-course-item {padding-bottom: 50px;}
	.userinfo-course .userinfo-course-thumb {width: 160px; height: 86px; margin-right: 10px;}
	.userinfo-course .userinfo-course-info .subject {height: 38px; font-size: 16px;}
	.userinfo-course .userinfo-course-info .box {margin-top: 12px;}
	.userinfo-course .userinfo-course-info .info {margin-right: 0; padding-top: 0;}
	.userinfo-course .userinfo-course-info .info li {margin-top: 7px; white-space: nowrap;}
	.userinfo-course .userinfo-course-info .t {display: none;}
	.userinfo-course .userinfo-course-info .period {font-size: 13px;}
	.userinfo-course .userinfo-course-info .btn-classroom {display: block; position: absolute; bottom: 0; left: 0; float: none; width: 100%; height: 40px;}
	.userinfo-course .userinfo-course-info .btn-classroom span br {display: none;}
	.userinfo-course .userinfo-course-slider .userinfo-course-empty {height: 136px; padding: 22px 15px;}
	.userinfo-course .userinfo-course-control {position: static; margin-top: 20px; padding: 0; text-align: center;}
	.userinfo-course .userinfo-course-control .paginationIn {font-size: 0;}
	.userinfo-course .userinfo-course-control .prevBtn.btn-userinfo-course-prev,
	.userinfo-course .userinfo-course-control .nextBtn.btn-userinfo-course-next {display: inline-block !important; position: static; margin: 0; font-size: 12px; background-size: auto 13px; vertical-align: middle;}
	.userinfo-course .userinfo-course-control .control_paging {display: inline-block !important; margin: 0 4px; vertical-align: middle;}
	.userinfo-course .userinfo-course-control .control_paging li {font-family: 'Noto Sans KR', sans-serif; font-size: 16px;     font-weight: 400;}
	.userinfo-course .userinfo-course-control .control_paging .slash {font-size: 14px;}
	.userinfo-course .userinfo-course-control .control_paging .slick-active {display: inline;}
	.userinfo-course .slick-list {margin: 0 -5px;}
	.userinfo-course .slick-slide {margin: 0 5px;}
	.userinfo-course .userinfo-course-empty {padding-top: 17px; padding-bottom: 17px;}
	.userinfo-course .userinfo-course-empty .txt {margin-top: 15px; font-size: 14px;}

	.userinfo-main .userinfo-data {margin-top: 0;}
	.userinfo-main .userinfo-data .userinfo-data-date {display: block; position: static; margin-bottom: 10px; text-align: right;}
	.userinfo-main .userinfo-data-table th {height: 42px; font-size: 14px;}
	.userinfo-main .userinfo-data-table td {height: 40px; font-size: 14px;}
	.userinfo-main .userinfo-data-table .cnt {font-size: 14px;}

	/* 과정 */
	.ProcessBox .thumBox {height: 264px;}
	.ProcessBox .thumBox .imgBox {height: 100px;}
	.ProcessBox .thumBox:hover .linkBox {transform: translateY(0);}
	.ProcessBox .thumBox .contentBox {height: 164px; padding: 10px;}
	.ProcessBox .thumBox .btn_like {top: 85px; right: 10px; padding: 7px 9px 4px 8px;}
	.ProcessBox .thumBox .btn_like .icon_heart {width: 13px; height: 12px;}
	.ProcessBox .thumBox .btn_like.active {}
	@keyframes size {
		0% {padding:7px 9px 4px 8px}
		50% {padding:11px 13px 8px 12px; right: 6px; top: 81px;}
		100% {padding:7px 9px 4px 8px}
	}
	.ProcessBox .thumBox .contentBox .thum_tit {height: 40px; margin-top: 8px; font-size: 16px}
	.ProcessBox .thumBox .contentBox .thum_label {font-size: 13px;}
	.ProcessBox .thumBox:hover .contentBox {top : 21px;}
	.ProcessBox .thumBox .thum_date > ul > li {margin-top: 5px; font-size: 13px;}
	.ProcessBox .thumBox .thum_tag > ul > li {white-space: nowrap;}
	.ProcessBox .thumBox .thum_tag > ul > li span {padding: 3px 5px; font-size: 12px;}
	.ProcessBox .thumBox .thum_date > ul > li {margin-top: 5px; font-size: 13px;}
	.ProcessBox .thumBox .serviceBox {display: none;}

	.course-main .content_wrap {margin: 0 15px;}
	.course-main .tit_area .tit {font-size: 20px; text-align: left;}
	.course-main .tit_area .right_area {bottom: 0; top: -6px;}
	.course-main .course-popularity {height: auto; padding: 35px 0; background: #e5eefb;}
	.course-main .btn-scroll-left,
	.course-main .btn-scroll-right {display: none;}
	.course-main .ProcessBox {height: auto; margin: 20px 15px 0;}
	/*.course-main .ProcessBox .ProcessBoxIn > ul {margin: -10px -5px 0; padding-bottom: 5px;}*/
	/*.course-main .ProcessBox .ProcessBoxIn > ul:after {content: ""; clear: both; display: table; height: 0; font-size: 0; line-height: 0;}*/
	/*.course-main .ProcessBox .ProcessBoxIn > ul >li {float: left; width: calc((100% - 40px) / 4); margin: 10px 5px 0;}*/
	.course-main .ProcessBox .slick-list {margin: 0 -8px;}
	.course-main .ProcessBox .slick-slide {margin: 0 8px;}
	/*.course-main .ProcessBox .thumBox {width: 100%; height: 265px;}*/
	/*.course-main .ProcessBox .thumBox .imgBox {height: 86px;}*/
	/*.course-main .ProcessBox .btn_like {top:70px; right: 10px; width: 30px; height: 30px; padding: 7px 7px 4px; box-sizing: border-box;}*/
	/*.course-main .ProcessBox .btn_like.active {animation: none;}*/
	/*.course-main .ProcessBox .thumBox:hover .btn_like {top: 5px;}*/
	/*.course-main .ProcessBox .thumBox .contentBox {top: 86px; height: 179px; padding: 18px 10px; box-sizing: border-box;}*/
	/*.course-main .ProcessBox .thumBox .contentBox .thum_tit {height: 40px; margin-top: 8px; font-size: 16px}*/
	/*.course-main .ProcessBox .thumBox .contentBox .thum_label {font-size: 13px;}*/
	/*.course-main .ProcessBox .thumBox:hover .contentBox {top : 21px;}*/
	/*.course-main .ProcessBox .thumBox .thum_date > ul > li {margin-top: 5px; font-size: 13px;}*/
	/*.course-main .ProcessBox .thumBox .thum_tag > ul {max-height: 50px; min-height: auto;}*/
	/*.course-main .ProcessBox .thumBox .thum_tag > ul > li {white-space: nowrap;}*/
	/*.course-main .ProcessBox .thumBox .thum_tag > ul > li span {padding: 3px 8px; font-size: 12px; vertical-align: top;}*/

	/*.course-main .ProcessBox .serviceBox .star_service {float: none; width: auto;}*/
	/*.course-main .ProcessBox .serviceBox .demo_service {display: none;}*/

	.course-main .course-recom {height: auto; padding: 35px 0;}

	/* 서비스 */
	.service-main {padding-top: 45px; padding-bottom: 40px;}
	.service-main .tit-h2 {font-size: 20px;}
	.service-main .tit-h2 span {font-weight: 700;}
	.service-main .service-main-head {float: none; margin-right: 0;}
	.service-main .service-main-list {margin-top: 20px; border-top: 1px solid #555;}
	.service-main .service-main-item a {padding: 10px 0;}
	.service-main .service-main-item .subject {font-size: 16px;}
	.service-main .service-main-item .summary {margin-top: 10px; font-size: 14px;}
	.service-main .service-main-item .date {margin-top: 3px; font-size: 13px;}

	.service-main .service-notice,
	.service-main .service-news {float: none; width: auto; padding: 0;}

	.service-main .service-notice {overflow: visible;}
	.service-main .service-notice .service-main-head {width: auto;}
	.service-main .service-notice .service-main-item {border-bottom: 1px solid #d7d7d7; background: none;}
	.service-main .service-notice .service-main-item a {padding: 12px 0;}
	.service-main .service-notice .service-main-item .subject {margin-top: -4px; line-height: 24px;}
	.service-main .service-notice .service-main-item .summary {display: none !important;}
	.service-main .service-notice .service-main-item:first-child a {padding-top: 12px;}
	.service-main .service-notice .btn-service-more {right: 0; left: auto; top: -5px;}

	.service-main .service-news {overflow: visible; margin-top: 45px;}
	.service-main .service-news .service-main-head {width: auto; font-size: 0; line-height: 20px;}
	.service-main .service-news .btn-tab {display: inline-block; height: auto; margin: 0 0 0 20px; font-size: 18px; vertical-align: middle;}
	.service-main .service-news .btn-tab:before {left: -10px; top: 50%; width: 4px; height: 4px; margin-top: -2px;}
	.service-main .service-news .btn-tab:first-child {margin-left: 0;}
	.service-main .service-news .btn-tab.active {font-size: 20px;}
	.service-main .service-news .service-main-item {margin-top: 0; padding-left: 0; border-bottom: 1px solid #d7d7d7;}
	.service-main .service-news .service-main-item:before {display: none;}
	.service-main .service-news .btn-service-more {right: 0; left: auto; top: -5px;}

	.social-main .social-step .social-step-empty {height: 240px;}

	/* 훈련 */
	.training-main {padding-top: 40px; padding-bottom: 70px;}
	.training-main .training-contents {min-height: auto; text-align: center !important;}
	.training-main .training-contents-head dt {font-size: 20px;}
	.training-main .training-contents-head dd {font-size: 14px;}
	.training-main .training-contents-head dd br ~ br {display: none;}
	.training-main .training-contents-step {position: static; margin-top: 50px; font-size: 0; transform: none;}
	.training-main .training-contents-step li {display: inline-block; float: none; height: 120px; font-size: 13px; vertical-align: top;}
	.training-main .training-contents-step li:after {top: 30px; right: -9px; width: 18px; height: 18px; background-size: cover;}
	.training-main .training-contents-step li:before {width: 80px; height: 80px; margin-bottom: 8px; background-size: 68px auto;}
	.training-main .training-smart .training-contents-step li {width: 104px;}
	.training-main .training-virtual .training-contents-step li:after {right: -42px;}
	.training-main .btn-training-more {left: 50%; bottom: 134px; margin-left: -50px;}

	.training-main .training-virtual {margin-left: 0; padding-left: 0;}
	.training-main .training-virtual .btn-training-more {left: 50%;}

	.training-main .training-market {margin-left: 0; padding-left: 0;}
	.training-main .training-market .training-contents-step li {width: 104px;}
	.training-main .training-market .btn-training-more {left: 50%;}

	/* 소셜 */
	.social-main .tit-h2 {padding: 0 15px; font-size: 20px;}
	.social-main .social-sns {padding-top: 40px; padding-bottom: 60px; background-position-y: 100%; background-size: cover;}
	.social-main .social-sns .social-sns-wrap {overflow: visible;}
	.social-main .social-sns .tit-h2 {display: none;}
	.social-main .social-sns .social-sns-link {position: static; text-align: center;}
	.social-main .social-sns .social-sns-link .btn-social {position: relative; width: 40px; height: 40px; margin-left: 64px;}
	.social-main .social-sns .social-sns-link .btn-social .ir {left: 50%; bottom: -25px; width: auto; height: auto; font-size: 14px; color: #666; transform: translateX(-50%); line-height: normal; white-space: nowrap; clip: unset; clip-path: unset;}
	.social-main .social-sns .social-sns-slider {display: none;}
	.social-main .social-sns .social-sns-control {display: none;}

	.social-main .social-step {padding-top: 40px; padding-bottom: 40px;}
	.social-main .social-step .social-people-slider,
	.social-main .social-step .social-intro-slider {margin-top: 10px;}
	.social-main .social-step .social-step-item .box {height: 90px; padding: 10px 15px;}
	.social-main .social-step .social-step-item .thumb {height: 150px;}
	.social-main .social-step .social-step-item .thumb:after {width: 83px; height: 83px; margin-top: -30px; background-size: 100%;}
	.social-main .social-step .social-step-item .subject {height: 38px; font-size: 16px;}
	.social-main .social-step .social-step-item .tag li {font-size: 13px;}
	.social-main .social-step .slick-dots {top: -24px; right: 40px;}
	.social-main .social-step .btn-social-step-control {top: 0; right: 11px;}

	/* 소셜·위키 */
	.social-utilWrap {height: auto; background:#f4f9fd url("https://webpi.github.io/step_portal/images/template11/resp/default/usr/wiki_util_bg_mob.png") 35% 0 no-repeat; margin: 29px -20px 0; padding: 15px 10px;}
	.social-utilBox .txt {display: block; font-size: 14px; line-height: 1.7;}
	.social-utilBox .utilBox {display: block; margin-top: 5px; padding: 0;}

	.social-utilWrap + .tab_arrowBox {margin-top: 30px !important;}
	.section_hd .sub {font-size: 14px;}

	.wiki-list {margin-top: 10px;}
	.moreBox {height: 80px;}
	.moreBox .more_btn {width: 38px; height: 38px; margin: -20px 0 0 -20px;}
	.moreBox .more_btn .icon_more {width: 20px; height: 20px; margin: -10px 0 0 -10px; background-size: 21px;}
	.moreBox .more_btn:hover {width: 48px; height: 48px; margin: -25px 0 0 -25px;}
	.moreBox .more_btn:hover .blind {margin: 0; font-size: 14px; line-height: 48px;}

	/* 전체 위키 */


	.social-wiki-all {padding-top: 0;}
	.social-wiki-all .social-wiki-head {margin: 0 -20px;}
	.social-wiki-all .social-wiki-control {position: static; margin-top: 20px; text-align: center;}
	.social-wiki-all .social-wiki-control .paginationIn {font-size: 0; vertical-align: top;}
	.social-wiki-head .social-wiki-control .prevBtn.btn-social-wiki-prev,
	.social-wiki-head .social-wiki-control .nextBtn.btn-social-wiki-next {display: inline-block !important; position: static; margin: 0; font-size: 12px; background-size: auto 13px; vertical-align: middle;}
	.social-wiki-all .social-wiki-control .control_paging {display: inline-block !important; margin: 0 4px; vertical-align: middle;}
	.social-wiki-all .social-wiki-control .control_paging li {font-family: 'Noto Sans KR', sans-serif; font-size: 16px;     font-weight: 400;}
	.social-wiki-all .social-wiki-control .control_paging .slash {font-size: 14px;}
	.social-wiki-all .social-wiki-control .control_paging .slick-active {display: inline;}

	.social-wiki-all .section_hd.select {margin-top: 50px;}
	.social-wiki-all .section_hd .selectBox {top: -24px;}
	.social-wiki-my .section_hd {margin-top: 30px;}

	/* 나의 위키 */
	.social-wiki-my {padding-top: 0;}

	/* 전체 인클럽 */
	.social-wiki-club {padding-top: 0;}
	.social-wiki-club .table_normal thead {display: none;}
	.social-wiki-club .table_normal td {padding: 15px 0;}
	.social-wiki-club .table_normal [class^="btn_s_"] {padding: 0 10px; font-size: 15px;}
	.social-wiki-club .table_normal .mobH {display: none;}
	.social-wiki-club .table_normal .list-contents-wiki .cnt-wiki {display: block;}
	.social-wiki-club .layer-reason {padding: 10px 30px 10px 15px; font-size: 14px;}

	/* 스탭 인클럽 */
	.social-wiki-clubview {padding-top: 0;}
	.social-wiki-clubview .club-intro {margin-bottom: 30px; padding: 15px 0 20px;}
	.social-wiki-clubview .club-intro .list-contents-media {float: none; width: auto;}
	.social-wiki-clubview .club-intro .list-contents-media .list-contents-thumb {width: 100px; height: 60px;}
	.social-wiki-clubview .club-intro .list-contents-media .subject span {height: 20px; font-size: 16px;}
	.social-wiki-clubview .club-intro .list-contents-wiki .list-contents-bot {margin-top: 0;}
	.social-wiki-clubview .club-intro .btn-club-config {padding-left: 24px; font-size: 13px; line-height: 20px;}
	.social-wiki-clubview .club-intro .btn-club-config:before {width: 20px; height: 20px; background-size: cover;}

	.social-wiki-clubview .club-intro .club-intro-info {overflow: hidden; position: static; float: none; width: auto; margin-top: 20px; padding: 20px 0 0 10px; background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/bg/bg_dotline_x.png"); background-repeat: repeat-x;}
	.social-wiki-clubview .club-intro .club-intro-info li {float: left; margin: 0 0 0 20px;}
	.social-wiki-clubview .club-intro .club-intro-info li:first-child {margin-left: 0;}
	.social-wiki-clubview .club-intro .club-intro-info .t,
	.social-wiki-clubview .club-intro .club-intro-info .conts {font-size: 14px;}
	.social-wiki-clubview .club-intro .club-intro-info .conts-email {font-size: 13px;}

	/* 소셜위키 소개 */
	.social-wiki-intro {padding-top: 0;}
	.social-wiki-intro .tit-h3 {font-size: 26px;}
	.social-wiki-intro .social-wiki-box .intro-conts {margin-top: 22px; font-size: 16px; line-height: 1.9;}
	.social-wiki-intro .social-wiki-rule:after {display: none;}
	.social-wiki-intro .tit-h4 {font-size: 22px;}
	.social-wiki-intro .social-wiki-rule-copyright .social-wiki-rule-in:before {width: calc(100% * (350 / 1200));}
	.social-wiki-intro .social-wiki-rule-copyright .tit-h4 {margin-top: 40px;}
	.social-wiki-intro .social-wiki-rule-del .social-wiki-rule-in:before {width: calc(80% * (350 / 680));}
	.social-wiki-intro .social-wiki-rule-limit .limit-list {margin-top: 12px;}
	.social-wiki-intro .social-wiki-rule-limit .limit-list li {width: 130px; height: 130px; margin: 0 0 15px 15px; padding-top: 0; font-size: 13px; line-height: 1.4;}
	.social-wiki-intro .social-wiki-rule-limit .limit-list li:first-child {margin-left: calc((100% - 565px) / 2);}
	.social-wiki-intro .social-wiki-rule-limit .limit-list li:nth-child(4) {margin-right: calc((100% - 565px) / 2);}
	.social-wiki-intro .social-wiki-rule-limit .limit-list .limit-list-bot {margin-right: 15px;}
	.social-wiki-intro .social-wiki-rule-limit .limit-list span {position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%);}
	.social-wiki-intro .social-wiki-rule-limit .limit-list li:before {display: none;}
	.social-wiki-intro .social-wiki-rule-block {margin-top: 40px;}
	.social-wiki-intro .social-wiki-rule-block .block-list {margin-top: 8px; font-size: 16px;}
	.social-wiki-intro .social-wiki-rule-block .block-list li {margin-top: 8px;}

	/* 사이트맵 */
	.sitemap-wrap {padding-top: 0;}
	.sitemap-wrap .sitemap-box {width: calc((100% - 35px) / 2); margin: 0 0 30px 0;}
	.sitemap-wrap .sitemap-box:first-child {margin-right: 35px;}
	.sitemap-wrap .sitemap-box:last-child {margin-bottom: 0;}
	.sitemap-wrap .sitemap-contents {margin-top: 30px; padding-bottom: 30px;}
	.sitemap-wrap .sitemap-contents .tit {width: 140px; padding-left: 10px; font-size: 20px;}
	.sitemap-wrap .sitemap-menu {font-family: "Noto Sans KR", sans-serif; font-size: 16px;}
	.sitemap-wrap .sitemap-menu > li {margin-top: 20px;}
	.sitemap-wrap .sitemap-menu .sitemap-menu-sub {margin-top: 15px; font-size: 14px;}
	.sitemap-wrap .sitemap-menu .sitemap-menu-sub li {margin-top: 15px; padding-left: 5px;}
	/* EOD : 사이트맵 */
}

/* tablet */
@media only all and (max-width: 1199px) and (min-width: 641px) {
	/* 메인 */

	.main_contentLayout {margin:0 0 70px}

	.process_content .content_wrap , .notice_content .content_wrap , .intro_content .content_wrap {margin:0 20px}

	.mainBanner .slick-prev {left:20px; margin:-25px 0 0}
	.mainBanner .slick-next {left:auto; right:20px; margin:-25px 0 0}
	.mainBannerBox .pagination {position: static; background: #f5f7f9; height:32px; overflow:hidden; top:0; margin:0}
	.mainBannerBox .paginationIn .main_paging {position:static; display: inline-block !important; vertical-align: middle; margin:4px 2px 0 0}
	.mainBannerBox .paginationIn .controlBox {position: static; display: inline-block; vertical-align: middle}


	.main_Pop_wrap {top:90px; margin:0; left: 5%;}
	.main_Pop_wrap.top {top:260px}

	.content_menuBox {position:static}
	.content_menu {height:auto}
	.content_menu .familysite {float:none; width:100%; padding-top: 30px;}
	.content_menu .familysite .t {top: 12px; left: 15px;}
	.content_menu .familysite .pagination {top: 12px;}
	.content_menu .familysite .logo_slider {height: 70px;}


	.content_menu > ul {float: none;width:100%;height:120px;display: table;table-layout: fixed;}
	.content_menu > ul > li {width: auto;display: table-cell;text-align: center;float: none;vertical-align: middle;}
	.content_menu > ul > li > a {display:block; text-align:center}
	.content_menu > ul > li > a:hover {background-color: transparent;}

	.content_menu .familysite .slick-slide , .content_menu .familysite .slick-slider .slick-track {width:100% !important;}

	.content_menu .logo_slider a {max-width:250px}
	.content_menuBoxIn:before {right:0; width:100%}

	.process_content {padding:0 0 70px}
	.ProcessBox {height:auto; margin:10px 20px 0}
	.ProcessBox.double {height:365px}
	.process_content .ProcessBox .mCSB_scrollTools.mCSB_scrollTools_horizontal {max-width:100%; margin:10px 0; left:0; bottom:-40px}

	.notice_content {margin:0 0 40px}
	.notice_content .content_wrap > ul > li {float:none; width:100%; margin:30px 0 0}

	.intro_content .tit_area {margin:30px 0 0}
	.intro_content:before {height:44px}
	.intro_slider_navBtn {top:325px}
	.intro_slider_main {margin: 0 auto;}
	.intro_slider_main .slick-track .slick-slide > div > div > a {width:460px; height:270px; margin: 0 auto;}
	.intro_slider_main .slick-track .slick-slide > div > div > a img {width:100%}
	.intro_slider_main .slick-track .slick-slide > div > div .txtBox {position:static; left:0; margin:25px 0 0}
	.intro_slider_main .slick-track .slick-slide > div > div .txtBox .tit {font-size:20px}
	.intro_slider_main .slick-track .slick-slide > div > div .txtBox .content_txt {font-size:14px; margin:20px 0 0}
	.intro_slider_main .slick-track .slick-slide > div > div .txtBox a {font-size:14px}
	.intro_slider_mainBox {margin:20px 0 0}
	.intro_slider_navBox {position:static; margin:20px 0 0}
	.intro_slider_nav {width:auto}
	.intro_slider_nav .slick-list {margin:0 0 0 -10px}
	.intro_slider_nav .slick-slide {margin:0 0 0 10px}
	.intro_slider_nav .slick-track .slick-slide > div .imgBox , .intro_slider_nav .slick-track .slick-slide > div .labelBox {margin:0 auto}
	.intro_slider_nav .slick-track .slick-slide > div .labelBox br {display:block}


	/* EOD : 메인 */

	/* 교육원 소개 */

	.intro_Area {margin:0}

	/* 교육기관 소개 */

	.table_block .th {min-height: 80px;}

	/* EOD : 교육기관 소개 */

	/* 인사말 */

	.intro_wrap h4 {margin:10px 0 0}

	.txt_greeting {font-size:30px}
	.greetingBox {margin:40px 0 0}
	.greetingBoxL {width:200px}
	.greetingBoxR {padding:0 0 0 30px}

	/* EOD : 인사말 */

	/* 연혁 */

	.intro_Area {margin:10px 0 0}

	/* EOD :  연혁 */


	/* 가상훈련 소개 */

	.vt_mainInfo .content_area {margin:40px 0 0}
	.vt_mainInfo .content_area img {position: static; max-width: 100%;}
	.vt_mainInfo .content_area .content , .vt_mainInfo .content_area.type02 .content {margin:30px 15px 0; text-align: center}

	.intro_vt .sub_txt {margin:20px 0 0}

	.vt_subInfo {margin:0 0 50px}
	.vt_subInfo .content_area {float:none; width: 100%; margin:40px 0 0}
	.vt_subInfo .content_area img {position: relative}
	.vt_subInfo .content_area.type02 img {left:5px}
	.vt_subInfo .content_area .content , .vt_subInfo .content_area.type02 .content {margin:40px 0 0; text-align: center}

	/* EOD : 가상훈련 소개 */

	/* EOD : 교육원 소개 */

	/* 훈련 안내 */

	/* 고용보험 환급제도 */

	.refuBox {padding:30px 10px}
	.refu_circle {width:100px; height:100px; font-size:16px}
	.refu_list > li {padding:0 10px}
	.refu_list .txt {font-size:14px}

	/* EOD : 고용보험 환급제도 */

	/* 훈련비 환급방법 & 훈련 진행절차 */

	.guide_processBox > ul > li {width:50%}
	.guide_processBox > ul > li:nth-child(2n) .processBox:after {display:none}
	.guide_processBox .txt_point {font-size:18px}
	.guide_processBox .processBox {height:330px}
	.guide_processBox .processBoxIn {padding:50px 15px 0}

	/* EOD : 훈련비 환급방법 & 훈련 진행절차 */

	/* 국민내일배움카드 */

	.next_cardWrap {padding:50px 10px 35px}
	.next_cardBox > .card img {width:140px}
	.next_cardBox > div.icon {padding:0 15px}

	/* EOD : 국민내일배움카드 */


	/* EOD : 훈련 안내 */

	/* 훈련 과정 */



	/* 원격 훈련과정 */

	/* 목록 */

	.process_searchBox {margin:0}
	.process_searchBox .typeBox , .process_searchBox .typeBox + .typeBox {padding:20px}
	.process_searchBox .buttonBox {padding:25px 0}
	.process_searchBox .search-comm {display: none !important;}
	.process_searchBox .search-comm .btn-search-clse {display: block;}

	.process_listBox > ul > li {float:left; width:33.33%;}
	.process_listBox .thumBox:hover .imgBox {top:0}
	.process_listBox .thumBox .imgBox {position:static;height: 160px;}
	.process_listBox .thumBox .contentBox , .process_listBox .thumBox:hover .contentBox {position:static}
	.process_listBox .thumBox .btn_like , .process_listBox .thumBox:hover .btn_like {top: 140px;}
	.process_listBox .thumBox .contentBox {display:block;  height: 164px; padding:20px 10px;}
	.process_listBox .thumBox .contentBox .thum_tit {height: 46px; min-height: auto; max-height: none; font-size:18px;}
	.process_listBox .thumBox .thum_date > ul > li {white-space:nowrap; width:100%; overflow:hidden; text-overflow:ellipsis}
	.process_listBox .thumBox .thum_tag > ul > li span {max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.process_listBox .serviceBox {display:none}

	/* EOD : 목록 */

	/* 상세 */

	.lectureBox {display: inline-block; width: 100%;}
	.lectureBoxL {left: 50%; margin: 0 0 0 -250px;}
	.lectureBoxL .buttonBox {position:absolute; bottom:10px; left:50%; width:290px; margin:0 0 0 -145px}
	.lectureBoxL .btn_blue {display:none}

	.lectureBoxR {margin:280px -20px 0}
	.lectureBoxR .listBtnBox {display:none}
	.lectureBoxR .lectureInfo {margin:0; border:0}
	.lectureBoxR .lectureInfoT {padding:65px 20px 20px}
	.lectureBoxR .lectureInfoT .tit {font-size:30px}
	.lectureBoxR .lectureInfoT .tag {margin: 0;	display: block;	overflow: hidden;}
	.lectureBoxR .lectureInfoT .share {position: static; float: right; margin: 10px 0 0;}
	.lectureBoxR .lectureInfoB {padding:20px}
	.lectureBoxR .lectureInfoB .list .dataBox .selectBox label {font-size:14px}

	.lectureB {display:block; margin:40px 0 0;}
	.lectureB .lectureContent {display:block}
	.lectureB .lectureContentIn {margin:0}
	.lectureDeInfo .table_hori {display:none}
	.lectureDeInfo {display:block; width:100%}

	.lecture_mob_btnBox {position:relative; margin:15px 0 0; min-height: 50px;}
	.lecture_mob_btnBox .Apply_btnBox {margin:0 157px 0 0}
	.lecture_mob_btnBox .Apply_btnBox .btn_m_blue_gra {width:100%; padding:0; margin:0}
	.lecture_mob_btnBox .btn_m_white {position:absolute; top:0; right:0; padding:0 40px; margin:0}


	/* EOD : 상세 */

	/* EOD : 원격 훈련과정 */

	/* EOD : 훈련과정 */


	/* 고객지원센터 */

		/* 썸네일 */

		.thum_list > li {width:33.33%;}

		/* EOD : 썸네일 */

	/* EOD : 고객지원센터 */


	/* 나의 강의실 */

	.lecture_section {margin:0}

	/* 나의 홈 */

	.processSliderBox {min-height:auto}

	.sub_content > ul > li {width:100%}
	.sub_contentBox {min-height: auto}
	.sub_content .sub_contentBox .tit_area {margin:30px 0 0}

	.myH_InfoBox {margin:10px -20px 30px; padding:30px}
	.myH_InfoBox_Select {position: static; text-align: center; margin:0}
	.myH_cntBox {margin:30px 0 0}
	.myH_circle {height: auto}
	.myH_circle > li {vertical-align: top}
	.myH_circle .obj {background:#f4f9fd; margin:0;display: flex;flex-direction: column-reverse;align-items: center;}
	.myH_circle .cnt {position:static;}
	.myH_circle .txt , .myH_circle .obj.type02 .txt, .myH_circle .obj.type03 .txt {margin: 15px 0 0; display: block;height: auto; font-size: 16px}
	.myH_circle .txtIn {display: block}
	.myH_circle .txtIn small {display: inline; margin:0}

	.myH_status .processSliderBox {height: auto;}
	.myH_status .sub_contentBox .list_area {min-height: auto;}

	.wgBoxArea {padding:0}
	.wgBoxArea > li {width:100%}
	.wgBoxArea > li .wgBox {margin:0}
	.wgBoxArea .wgBox .tag {margin:10px 0 0}

	/* EOD : 나의 홈 */


	/* 나의 학습 */

	.ThumBox {width:auto}
	.ThumBox .infoBox {margin:0; min-height:auto}
	.ThumBox .dayBox {font-size:13px; padding:2px 5px}
	.ThumBox .imgBox {width:98px; height:58px;}
	.ThumBox .txtBox {margin:0 0 0 110px; min-height:60px}
	.ThumBox .txtBox .label {font-size:13px}
	.ThumBox .txtBox .tit {font-size:16px}
	.ThumBox .tag {max-height:50px}
	.ThumBox .tag > li span {font-size:12px; padding:2px 5px}
	.ThumBox .likeBox {display:none}

	.table_detail tr.detail .ThumBox .infoBox {margin:0}
	.table_detail tr.detail .ThumBox .txtBox , .table_detail tr.detail .ThumBox .tag {margin:0 0 0 70px}
	.ThumBox .infoBox.vertical, .ThumBox .infoBox.vertical .txtBox {display: block;}


	/* 차수 팝업 */

	.windowPopBox .lectureBoxR {margin:280px 0 0}

	/* EOD : 차수 팝업 */


	/* EOD : 나의 학습 */

	/* 학습메모/북마크 */

	.Listinfo {font-size:14px}
	.Listinfo > li {margin:5px 0 0}


	/* EOD : 학습메모/북마크 */


	/* 나의 설문 */

	.list_survey > ul {overflow:hidden; margin:-20px 0 0 -20px;}
	.list_survey > ul > li {min-height:295px}
	.list_survey .surveyBox {margin:20px 0 0 20px;}
	.list_survey .surveyHeader {padding:16px 14px}
	.list_survey .surveyHeader .tit {font-size:16px}
	.list_survey .surveyContent {padding:19px 14px}

	/* EOD : 나의 설문 */



	/* 훈련과정 결제정보 */

	.date_searchBox {padding:10px 30px 20px}
	.content_Listed > li {margin:5px 10px 5px 0}

	.lecture_cart_txt {padding:20px}
	.table_normal.cart .ThumBox .imgBox {width:188px; height:108px}
	.table_normal.cart .ThumBox .txtBox {margin: 0 0 0 200px; min-height: 108px}
	.ThumBox .tool_tip.alarm {left:-15px}

	.table_normal.payment.type02 .ThumBox .imgBox {width:188px; height:108px}
	.table_normal.payment.type02 .ThumBox .txtBox {margin: 0 0 0 200px; min-height: 108px}


	.table_payment {margin:30px 0 0}
	.table_payment tbody tr {display:block}
	.table_payment tbody tr th {display:block; text-align: left; font-size:18px; padding: 15px 10px}
	.table_payment tbody tr td {display:block; padding:15px 0}

	.table_paymentBoxL .select_process .cnt {display:inline-block; min-width:90px}
	.table_paymentBoxL .select_process .cnt:after {display: none}
	.table_paymentBoxL, .table_paymentBoxR {display:block}
	.table_paymentBoxL .info > li {margin:0}
	.table_paymentBoxL .info > li:first-child {min-width: 90px;}
	.table_paymentBoxL .info > li:before {display: none}
	.table_paymentBoxLIn {margin:0 0 0 10px}
	.table_paymentBoxL .select_process {margin-left:0}
	.table_paymentBoxR {margin:5px 0 0}
	.table_paymentBoxR .number {margin:0 0 0 15px}
	.table_paymentBoxR button {display:block; width:100%; padding: 0; margin:15px 0 0}


	/* EDO : 훈련과정 결제정보 */


	/* EOD : 나의 강의실 */


	/* Membership */

	/* 강사 신청 */
	/* 심사중 & 심사완료 */

	.ms_procees > ul {margin:0 0 0 -50px}
	.ms_procees > ul > li {margin:0 0 0 50px}
	.ms_Circle {width:148px; height:148px}
	.ms_Circle .txt {font-size:16px; margin:15px 0 0}
	.ms_txtBox {margin:50px 0 0}

	/* EOD : 심사중 & 심사완료 */
	/* EOD : 강사 신청 */

	/* EOD : Membership */

	/* 원격지원서비스 */
	.remote_wrap { padding:50px 30px 50px 30px; }
	.remote_bg { margin:80px 0 0 0; }
	.remote_bg:before { left:0; width:190px; background-size:100% auto; bottom:-210px; }
	.remote_bg:after { width:197px; background-size:100% auto; bottom:-200px; }
	.remote_bg .remote_line01 { left:150px; right:141px; }
	.remote_bg .remote_line02 { left:157px; right:134px; }
	/* EOD : 원격지원서비스 */

	/* 통합검색 */
	.search_wrap {padding:40px 0 0; margin: 0 20px;}
	.search_wrap .search_top {padding: 20px 15px 15px;}
	.search_wrap .search_top .search_total {font-size: 14px;}
	.search_wrap .search_top .t {margin-right: 15px; font-size: 14px;}
	.search_wrap .search_top .selectBox {max-width: 150px;}
	.search_wrap .search_top .istyle {width: calc(100% - 36px - 80px);max-width: none; margin-top: 10px;}
	.search_wrap .search_top .btn_s_blue {margin-top: 10px;}
	.search_wrap .search_result {margin-top: 30px;}
	.search_wrap .search_list {margin-top: 30px;}
	.search_wrap .search_list .tabBox.active {margin-top: 30px;}
	.search_wrap .search_list .tabBox.active + .tabBox.active {margin-top: 40px;}
	.search_wrap .search_result .tit-h3 {font-size: 20px;}
	.search_wrap .search_result .tit-h3 .cnt {font-size: 14px}
	/* EOD : 통합검색 */

	/* 스마트플랫폼 STEP 소개 */

	.section_top {margin:0;}
	.section_top .main_txt {font-size:24px}
	.section_top .main_txt br {display: none}

	.section_top .left_content {margin:50px 0 0; height: auto}
	.section_top .left_content .imgBox , .section_top .right_content .imgBox {position: static; margin:0 -20px}
	.section_top .left_content .imgBox img , .section_top .right_content .imgBox img {width:100%}
	.section_top .left_content .contentBox , .section_top .right_content .contentBox {margin:0; text-align: center}

	.section_top .right_content {display:flex; flex-direction:column-reverse; height: auto; margin:50px 0 0}

	.section_mid {margin:40px 0 0}
	.step_intro_circle {margin:-35px 0 0}
	.step_intro_circle > li {width:50%; margin:35px 0 0}

	.section_bot {margin:60px 0 0}

	.bg_intro_BIBox {margin:40px 0 0}
	.bg_intro_BIBox img {width:90%; max-width:387px;}

	.bg_intro_symbolBox {margin:50px 0 0}
	.bg_intro_symbolBoxIn {display: block}
	.bg_intro_symbolBoxIn .symbol_img {display: block}
	.bg_intro_symbolBoxIn .symbol_img img {width:90%; max-width: 534px}
	.bg_intro_symbolBoxIn .symbol_txt {display: block; margin:20px 0 0; padding: 0; text-align: center; font-size: 18px}
	.bg_intro_symbolBoxIn .symbol_txt br {display: none}


	/* EOD : 스마트플랫폼 STEP 소개 */

}

/* mobile */
@media only screen and (max-width: 767px) {
	/* 메인 */
	/* banner main */
	.banner-main .box {height: 150px;}
	/* img */
	.banner-main .is-img-desktop {display: none;}
	.banner-main .is-img-mobile {display: inline-block;}

	/* 소셜 */
	.social-main .social-step .social-people,
	.social-main .social-step .social-intro {float: none; width: auto;}
	.social-main .social-step .social-intro {margin: 40px 0 0 0;}
}

/* mobile */
@media only all and (max-width:640px) {
	/* 메인 */
	/* 공지 레이어 */
	.pop-noti.pop-noti-layer {left: 0 !important; top: 0 !important; max-width: 100% !important;}

	/* 유저정보 */
	.userinfo-main .userinfo-detail-status li {display: block; float: left; width: calc(100% / 4); margin: 0; padding: 0; line-height: 1;}
	.userinfo-main .userinfo-detail-status .cnt {position: static; display: block; margin: 0 auto 10px;}

	.userinfo-main .userinfo-data-table {overflow: hidden;}
	.userinfo-main .userinfo-data-table thead {display: block; float: left;}
	.userinfo-main .userinfo-data-table tbody {overflow: hidden; display: block;}
	.userinfo-main .userinfo-data-table tr,
	.userinfo-main .userinfo-data-table th,
	.userinfo-main .userinfo-data-table td {display: block; padding: 0; line-height: 42px;}
	.userinfo-main .userinfo-data-table th {width: 140px; border-top: 0; border-bottom: 1px solid #4dcceb;}
	.userinfo-main .userinfo-data-table th span {line-height: 42px;}
	.userinfo-main .userinfo-data-table th span:before {display: none;}
	.userinfo-main .userinfo-data-table td {height: 42px; border-left: 0;}
	.userinfo-main .userinfo-data-table th:first-child {border-top: 1px solid #00a1c9;}
	.userinfo-main .userinfo-data-table th:last-child {border-bottom-color: #00a1c9;}
	.userinfo-main .userinfo-data-table td:first-child {border-top: 1px solid #ccc;}
	/* ie9 hack */
	.userinfo-main .userinfo-data-table thead,
	.userinfo-main .userinfo-data-table tbody,
	.userinfo-main .userinfo-data-table tr,
	.userinfo-main .userinfo-data-table th,
	.userinfo-main .userinfo-data-table td {overflow: hidden\0/; float: left\0/;}
	.userinfo-main .userinfo-data-table thead,
	.userinfo-main .userinfo-data-table thead tr {width: 140px\0/;}
	.userinfo-main .userinfo-data-table th {width: 138px\0/;}
	.userinfo-main .userinfo-data-table tbody {width: calc(100% - 140px)\0/;}
	.userinfo-main .userinfo-data-table tbody tr {width: 100%\0/}
	.userinfo-main .userinfo-data-table td {width: calc(100% - 2px)\0/;}

	.userinfo-main .userinfo-training .userinfo-data-table tbody {position: relative; padding-top: 44px;}
	.userinfo-main .userinfo-training .userinfo-data-table tr {overflow: hidden;}
	.userinfo-main .userinfo-training .userinfo-data-table tr:first-child {float: left;}
	.userinfo-main .userinfo-training .userinfo-data-table th:first-child {position: absolute; left: 0; top: 0; width: 100%; height: auto; box-sizing: border-box;}
	.userinfo-main .userinfo-training .userinfo-data-table td:first-child {border-top: 0;}
	/* ie9 hack */
	.userinfo-main .userinfo-training .userinfo-data-table {position: relative;}
	.userinfo-main .userinfo-training .userinfo-data-table tbody {width: 100%\0/;}
	.userinfo-main .userinfo-training .userinfo-data-table tr:first-child {width: 140px\0/;}
	.userinfo-main .userinfo-training .userinfo-data-table tr:last-child {width: calc(100% - 140px);}

		/* 과정 */
	.course-main .ProcessBox .ProcessBoxIn > ul >li {width: calc((100% - 20px) / 2);}

	/* 메인 팝업 */
	.pop-noti {left: 15px !important; right: 15px; width: auto; max-width: none;}

	/* EOD : 메인 */

	/* 교육원 소개 */

	/* 교육기관 소개 */

	.intro_Area {margin:10px 0 0}

	.table_block {font-size:14px; border-right:0}
	.table_block > ul > li {display:block; border-left:0; margin: 5px 0 0;}
	.table_block > ul > li:first-child {margin:0}
	.table_block .th , .table_block .td {min-height: 40px; border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7}
	.table_block .th > span {padding:15px 10px}

	.white_radiusBox {margin:0; height: 58px;}
	.white_radiusBoxIn {padding:15px; font-size:18px}
	.white_radiusBox.type02 .white_radiusBoxIn {font-size:14px}

	/* EOD : 교육기관 소개 */

	/* 가상훈련 소개 */

	.vt_mainInfo {margin:0 -15px}
	.vt_mainInfo .content_area {margin:40px 0 0}
	.vt_mainInfo .content_area img {position: static; max-width: 100%;}
	.vt_mainInfo .content_area .content , .vt_mainInfo .content_area.type02 .content {margin:30px 15px 0; text-align: center}
	.vt_mainInfo .content_area .content .main_txt , .vt_subInfo .content_area .content .main_txt {font-size: 22px}

	.intro_vt .sub_txt {font-size: 16px; margin:20px 0 0}

	.vt_subInfo {margin:0 0 50px}
	.vt_subInfo .content_area {float:none; width: 100%; margin:40px 0 0}
	.vt_subInfo .content_area img {position: relative}
	.vt_subInfo .content_area.type02 img {left:5px}
	.vt_subInfo .content_area .content , .vt_subInfo .content_area.type02 .content {margin:40px 0 0; text-align: center}

	/* EOD : 가상훈련 소개 */

	/* 인사말 */

	.intro_wrap h4 {margin:10px 0 0}

	.txt_greeting {font-size:22px}
	.greetingBox {margin:20px 0 0}
	.greetingBoxL {display:block; text-align: center; width:100%}
	.greetingBoxR {display:block; padding:0}

	.txt_signature {margin:30px 0}
	.txt_signature img {display:block; margin:5px 0 0}

	/* EOD : 인사말 */

	/* 연혁 */

	.historyBox {margin:10px 0 0}

	.history_year {position:absolute; top:0; left:0; z-index:2}
	.history_year_circle {width:70px; height:70px; line-height:70px; font-size:14px}
	.history_txtBox {margin:0 0 0 70px;padding:0 0 20px;text-align:left;display: table; min-height: 70px;}
	.history_txtBox:before {content:""; position:absolute; top:0; bottom:0; left:-35px; width:1px; background-color:#c1c1c1}
	.history_txtBoxIn , .historyBox > ul > li:nth-child(2n) .history_txtBoxIn {margin: 0;padding: 0;display: table-cell;vertical-align: middle;height: 100%;}
	.historyBox > ul > li:nth-child(2n) .history_txtBoxIn .txt {margin:15px 0 0}
	.history_txtBoxIn .txt , .historyBox > ul > li:nth-child(2n) .history_txtBoxIn .txt {margin:15px 0 0 10px; padding:0 0 0 10px; font-size:14px}
	.history_txtBoxIn .txt:first-child , .historyBox > ul > li:nth-child(2n) .history_txtBoxIn .txt:first-child {margin:0 0 0 10px}
	.history_txtBoxIn .txt_hyphen {font-size:14px; margin:10px 0 0 20px;}
	.history_txtBoxIn .txt_hyphen:before {position:static; margin: 0 3px 0 0;}
	.history_txtBoxIn .txt:before , .historyBox > ul > li:nth-child(2n) .history_txtBoxIn .txt:before {right:auto; left:0}
	.history_txtBoxIn:before {display:none}
	.history_txtBoxIn:after {display:none}
	.historyBox > ul > li:last-child .history_txtBox:before {display:none}

	/* EOD : 연혁 */

	/* 찾아오시는길 */

	.direction_map {height:258px; margin:0}
	.direction_map_info {padding:20px 15px}
	.direction_map_info .map_data {font-size:14px}

	/* EOD : 찾아오시는길 */

	/* EOD : 교육원 소개 */

	/* 훈련 안내 */

	/* 고용보험 환급제도 */

	.refuBox {padding:40px 20px}
	.refu_circle {width:150px; height:150px; font-size:22px}
	.refu_arrow {width:50px; height:30px; margin:0; background:url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_refu_arrow_mob.png") no-repeat}
	.refu_list > li {display:block; padding:10px 0}
	.refu_list .txt {font-size:14px}

	/* EOD : 고용보험 환급제도 */

	/* 훈련비 환급방법 & 훈련 진행절차 */


	.guide_processBox > ul > li , .guide_processBox.type02 > ul > li {width:100%}
	.guide_processBox .processBox {height:auto}
	.guide_processBox .processBox:after {display:none}
	.guide_processBox .processBox:before {content: "";	display: inline-block;	width: 40px; height: 40px;	position: absolute;	left: 50%;	bottom: -20px;	background: url(https://webpi.github.io/step_portal/images/template9/resp/default/usr/guide_bottom_arrow.png) no-repeat;	z-index: 1;	margin: 0 0 0 -20px;}
	.guide_processBox > ul > li:last-child .processBox:before {display:none}
	.guide_processBox .processBoxIn {padding:40px 15px 30px}
	.guide_processBox .guide_pro_num {font-size:14px}
	.guide_processBox .txt_point {font-size:16px; margin:0 0 30px}
	.guide_processBox .txt_content {font-size:13px}


	/* EOD : 훈련비 환급방법 & 훈련 진행절차 */

	/* 국민내일배움카드 */

	.next_cardBox {display:block}
	.next_cardBox > div.icon {display:block; padding:15px 0}
	.next_cardWrap {padding:50px 10px 35px}

	/* EOD : 국민내일배움카드 */


	/* 모사답안 처리기준 */

	.grayBox {padding:30px 20px;}

	/* EOD : 모사답안 처리기준 */


	/* EOD : 훈련 안내 */

	/* 훈련 과정 */

	/* 훈련 일정 */

	.calender_date {text-align:left}
	.calender_date p {font-size:20px; margin:0 20px}

	.planLinkBox a {width:38px}
	.planLinkBox a.link_calender {background:white url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_datepicker.png") no-repeat 9px 9px}
	.planLinkBox > ul > li.active a.link_calender {background:#0d7fa0 url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_datepicker_active.png") no-repeat 9px 9px}
	.planLinkBox a.link_list {background: white url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_list.png") no-repeat 8px 9px}
	.planLinkBox > ul > li.active a.link_list {background: #0d7fa0 url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_list_active.png") no-repeat 8px 9px}

	.table_normal.cal thead tr th {padding:15px 10px}
	.table_normal.cal tbody tr td {padding:20px 0}
	.table_normal.cal .dateNo {top:5px; right:5px; font-size:12px}

	/* EOD : 훈련 일정 */

	/* 원격 훈련과정 */

	/* 목록 */

	.section_hd .tit {font-size:20px}
	.section_hd .sub {font-size:14px}

	.process_searchBox {margin:0}
	.process_searchBox .search-comm {display: none !important;}
	.process_searchBox .search-comm .btn-search-clse {display: block;}
	.process_searchBox .typeBox .select_list {margin:0}
	.process_searchBox .typeBox .select_list > li {width:100%; margin:5px 0 0}
	.process_searchBox .typeBox .select_list > li:first-child {margin:0}
	.process_searchBox .typeBox .select_list .selectBox {width:100%}
	.process_searchBox .typeBox , .process_searchBox .typeBox + .typeBox {padding:10px}
	.process_searchBox .typeBox .label {width:82px;}
	.process_searchBox .typeBox .label span {font-size:15px;}
	.process_searchBox .typeBox .dataBox {margin:0 0 0 85px}
	.process_searchBox .typeBox + .typeBox .label {top:10px}
	.process_searchBox .process_search {padding: 0}
	.process_searchBox .typeBox .process_search .detail_btn {display: none}
	.process_searchBox .typeBox .divi > li {margin:0}
	.process_searchBox .typeBox .divi > li:first-child .area:first-child {margin:0}
	.process_searchBox .typeBox .divi > li > .area {display:block; margin:20px 0 0}

	.process_searchBox .typeBox .dataBox .radioList .Box {margin:0 10px 0 0}

	.process_searchBox .buttonBox {padding:25px 0 35px}
	.process_searchBox .buttonBox .mobBox {display:block; position:absolute; bottom:-20px; left:50%; margin:0 0 0 -60px}
	.process_searchBox .buttonBox .mobBox .btn_mob_detail {display:inline-block; width:120px; height:40px; padding:0; color: white;	font-size: 16px; background-color: #1464d9; border:none; border-radius: 20px; box-shadow: 5px 5px 7px 0 rgba(0,0,0,0.12);}
	.process_searchBox .buttonBox .mobBox .txt {margin:0 10px 0 0}
	.process_searchBox .buttonBox .mobBox .icon {display:inline-block; width:14px; height:14px; background: url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_detail_btn.png") no-repeat}

	.process_searchBox .mobC {display:none}
	.process_searchBox.active .mobC {display:block}
	.process_searchBox.active .buttonBox .mobBox .icon {background-position-x:-14px}

	.process_listBox > ul {margin:-20px 0 0 -10px}
	.process_listBox > ul > li {float:left; width:50%;}
	.process_listBox > ul > li .Box {margin:20px 0 0 10px}
	.process_listBox > ul > li.no_data {margin:20px 0 0; padding:60px 0}
	.process_listBox .thumBox {height: 268px;}
	.process_listBox .thumBox .imgBox {position:static; height:100px}
	.process_listBox .thumBox .contentBox {height: 148px;}
	.process_listBox .thumBox .contentBox , .process_listBox .thumBox:hover .contentBox {position:static;}
	.process_listBox .thumBox .btn_like {top: 85px;right:10px;padding:7px 9px 4px 8px;}
	.process_listBox .thumBox .btn_like .icon_heart {width:13px; height:12px}
	.process_listBox .thumBox .thum_date > ul > li {display:block; width:100%; font-size:13px; margin:5px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
	.process_listBox .thumBox .contentBox {display:block;padding: 10px 10px;}
	.process_listBox .thumBox .contentBox .thum_label {font-size:13px}
	.process_listBox .thumBox .contentBox .thum_tit {font-size:16px; min-height:42px; max-height:42px; -webkit-line-clamp: 2;}
	.process_listBox .thumBox .thum_tag {margin:10px 0 0}
	.process_listBox .thumBox .thum_tag > ul > li span {font-size:12px; padding:2px 4px; max-width: 128px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.process_listBox .thumBox:hover .thum_tit {color:#222; text-decoration: none;}
	.process_listBox .thumBox:hover .btn_like {top: 85px;}
	.process_listBox .serviceBox {display:none}


	@keyframes size {
		0% {padding:12px 12px 9px; padding:7px 9px 4px 8px}
		50% {padding:11px 13px 8px 12px; right:6px; margin-top:-4px;}
		100% {padding:12px 12px 9px; padding:7px 9px 4px 8px}
	}

	/* EOD : 목록 */

	/* 상세 */

	.lectureBox {display: inline-block; width: 100%; margin:0}
	.lectureBoxL {width:100%;}
	.lectureBoxL .thumBox {height:208px}
	.lectureBoxL .buttonBox {position:absolute; bottom:-20px; left:0; width:100%; margin:0; text-align: center;}
	.lectureBoxL .buttonBox > ul {float:none; display: inline-block}
	.lectureBoxL .btn_blue {display:none}

	.lectureBoxR {background: #f5f7f9; margin: 0 -15px 0; padding: 210px 0 0;}
	.lectureBoxR .listBtnBox {background: white; margin: 0; padding: 10px 15px 10px 0;}
	.lectureBoxR .listBtnBox .btn_sr_white {margin:0}
	.lectureBoxR .lectureInfo {margin:0; border-top-width: 0; border-bottom-width:1px;}
	.lectureBoxR .lectureInfoT {padding:45px 15px 15px}
	.lectureBoxR .lectureInfoT .tit {font-size:26px}
	.lectureBoxR .lectureInfoT .tag {margin:5px 0 0; display: block; overflow: hidden;}
	.lectureBoxR .lectureInfoT .share {position: static; float: right; margin: 10px 0 0;}
	.lectureBoxR .lectureInfoB {padding:30px 15px}
	.lectureBoxL .btn_white {width:38px; height: 38px}
	.lectureBoxL .btn_white span {display: none}
	.lectureBoxR .lectureInfoB .list .dataBox .selectBox {width:100%; max-width: 250px;}
	.lectureBoxR .lectureInfoB .list .dataBox .selectBox label {font-size:14px}

	.windowPopBox .lectureBoxR {margin:0}

	.lectureB {display:block; margin:40px 0 0;}
	.lectureB .lectureContent {display:block}
	.lectureB .lectureContentIn {margin:0}
	.lectureDeInfo .table_hori {display:none}
	.lectureDeInfo {display:block; width:100%}

	.lectureBoxR .lectureInfoB .list {float:none}
	.lectureBoxR .lectureInfoB .btn {float:none; display: table; width:100%; margin:20px 0 0}
	.lectureBoxR .lectureInfoB .btn > li {display: table-cell; margin:0}
	.lectureBoxR .lectureInfoB .btn > li div {margin:0 0 0 4px}
	.lectureBoxR .lectureInfoB .btn > li:first-child div {margin:0 4px 0 0}
	.lectureBoxR .lectureInfoB .btn button {margin:0; width: 100%; padding: 0}

	.lecture_grayBox {padding:20px; font-size: 15px;}
	.lecture_grayBox p {margin:10px 0 0; line-height:1.3}

	.list_review .info {padding:8px 18px}
	.list_review .info > ul > li {font-size:13px;}
	.list_review .contents {padding:15px 18px; font-size:14px}

	.list_contents > ul > li > .class {width:72px; font-size:14px; font-weight:400; padding:21px 0}
	.list_contents > ul > li > .tit {padding:21px 0}
	.list_contents > ul > li > .tit span {word-break:break-all; font-size:14px; margin: 0 120px 0 20px;}

	.list_contents_dpeth .contentsBox {padding:20px}
	.list_contents_dpeth .titBox > a {padding:9px 50px 9px 10px}

	.list_contents_dpeth .contentsBox ul > li span {font-size:14px; line-height:1.2; padding: 0 0 0 14px;}
	.list_contents_dpeth .contentsBox ul > li span:before {top:9px}


	/* EOD : 상세 */

	/* EOD : 원격훈련과정 */

	/* 혼합훈련과정 */

	/* 상세 */

	.list_study .imgBox {width:98px; height:58px; margin: -29px 0 0;}
	.list_study .txtBox {margin:15px 30px 15px 115px}
	.list_study .txtBox .label {font-size:13px}
	.list_study .txtBox .tit {font-size:16px; margin:10px 0 0}
	.list_study .txtBox .info {font-size:12px; margin:10px 0 0; letter-spacing: -0.2px;}
	.list_study .studyBox:after {right:9px}
	.list_study .contents {padding:20px 10px}

	/* EOD : 상세 */

	/* EOD : 혼합훈련과정 */

	/* 수강신청 팝업 */

	.join_write_process > ul > li:first-child .stepIn , .join_write_process > ul > li.active .stepIn {padding:7px 30px 7px 35px}
	.join_write_process > ul > li:first-child .stepIn {padding:7px 10px}
	.join_write_process .stepIn {padding:7px 30px 7px 35px}
	.join_write_process .stepIn br {display:block}

	/* EOD : 수강신청 팝업 */

	/* EOD : 훈련과정 */

	/* 소셜 위키 */
		.social-wiki-all .social-wiki-head {margin: 0 -15px;}

		.social-utilBox .txt br {display: inline;}

		.social-wiki-all .social-wiki-Banner .is-img-desktop {display: none;}
		.social-wiki-all .social-wiki-Banner .is-img-mobile {display: inline-block;}

		/* 위키 등록 */

		.wiki-blueBox {margin:20px 0; padding:15px 10px}
		.wiki-blueBox .main_txt {font-size:16px; margin:0 0 10px}

		.txt_notice {display: block; font-size: 14px; margin: 5px 0 0; line-height: 1.5;}

		/* EOD : 위키 등록 */

		/* 인클럽 개설 & 설정하기 팝업 */

		.thumb_FileBox , .thumb_FileBox .thumb_area , .thumb_FileBox .btn_area {display:block; text-align: center}
		.thumb_FileBox {height: auto}
		.thumb_FileBox .btn_area {margin:10px 0 0; padding: 0}

		/* EOD : 인클럽 개설 & 설정하기 팝업 */


		/* 소셜 위키 닉네임 설정 팝업 */

		.social-nickBox {padding: 20px 10px}
		.social-nickBoxIn {min-width: auto; line-height: 1}
		.social-nickBoxIn .txt-area {position: static; text-align: left; margin:0 0 0 10px}
		.social-nickBoxIn .input-areaIn {margin:10px 0 0}
		.social-nickBoxIn .input-area {margin:0}
		.social-nickBoxIn .input-area .txt_asterisk {font-size: 14px; margin:5px 0 0}

		/* EOD : 소셜 위키 닉네임 설정 팝업 */

		/* 전체 인클럽 */
		.social-wiki-club .searchBox.type02 {margin: 30px 0 0 0;}
		.social-wiki-club .section_hd.select {margin-top: 120px;}
		.social-wiki-club .section_hd .section_hd_aside {left: 0;}
		.social-wiki-club .section_hd .section_hd_aside .selectBox {position: absolute; right: 0; top: 0;}
		.social-wiki-club .section_hd .section_hd_aside .btn-inclub-open {position: absolute; top: -70px; left: 50%; margin: 0; transform: translateX(-50%);}
		.social-wiki-club .wiki-list-club {margin-top: 10px;}
		.social-wiki-club .table_normal colgroup {display: none;}
		.social-wiki-club .table_normal tr {display: block; position: relative;}
		.social-wiki-club .table_normal td {display: block; width: 100%;}
		.social-wiki-club .table_normal .club-menu {position: absolute; right: 0; bottom: 40px; width: auto; border: 0; padding: 0; background: none;}
		/* ie9 hack */
		.social-wiki-club .table_normal .club-menu {right: 15px\0/; bottom: auto\0/; margin-top: 158px\0/;}

		.social-wiki-club .btn-favo .btn-favo-icon {font-size: 0;}
		.social-wiki-club .btn-favo .btn-favo-icon:after {width: 22px; height: 20px; margin-left: 5px; background-position: 0 -52px; vertical-align: middle;}
		.social-wiki-club .btn-favo .icheck:checked + .btn-favo-icon:after {background-position: 0 100%;}
		.social-wiki-club .btn-favo .btn-favo-icon .ir {position: static; display: inline-block; width: auto; height: auto; font-size: 14px; line-height: 1; vertical-align: middle; clip: unset; clip-path: unset;}
		.social-wiki-club .table_normal .club-status {font-size: 14px;}
		.social-wiki-clubview .club-intro .list-contents-media .subject span {height: auto;}
		.social-wiki-clubview .club-intro .club-intro-info li {float: none; margin: 20px 0 0 0;}

		/* 소셜위키 소개 */
		.social-wiki-intro .tit-h3 {text-align: center;}
		.social-wiki-intro .social-wiki-box + .social-wiki-box {margin-top: 10px;}
		.social-wiki-intro .social-wiki-rule:before {display: none;}
		.social-wiki-intro .social-wiki-rule-copyright {text-align: center;}
		.social-wiki-intro .social-wiki-rule-copyright .social-wiki-rule-in:before {display: block; float: none; width: 100%; height: 224px; margin: 0; background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/bg/bg_social_wiki_intro_large.png"); background-size: auto 240px;}
		.social-wiki-intro .social-wiki-rule-copyright .tit-h3 {margin-top: 28px;}
		.social-wiki-intro .social-wiki-rule-del {margin-top: 12px; text-align: center;}
		.social-wiki-intro .social-wiki-rule-del .social-wiki-rule-in:before {display: block; position: static; width: auto; height: 224px; background-image: url("https://webpi.github.io/step_portal/images/template11/resp/default/bg/bg_social_wiki_intro2_large.png"); background-size: auto 100%;}
		.social-wiki-intro .social-wiki-rule-del .tit-h4 {margin-top: 38px;}
		.social-wiki-intro .social-wiki-rule-limit {margin-top: 32px; text-align: center;}
		.social-wiki-intro .social-wiki-rule-limit .limit-list {overflow: hidden; margin: 12px -7px -15px;}
		.social-wiki-intro .social-wiki-rule-limit .limit-list li {width: 100px; height: 100px; margin-left: 7px; margin-right: 7px;}
		.social-wiki-intro .social-wiki-rule-limit .limit-list .limit-list-bot {margin-left: 7px; margin-right: 7px;}
		.social-wiki-intro .social-wiki-rule-limit .limit-list li:first-child {margin-left: 7px;}
		.social-wiki-intro .social-wiki-rule-limit .limit-list li:last-child {margin-right: 7px;}
		.social-wiki-intro .social-wiki-rule-limit .limit-list li:nth-child(4) {margin-left: 7px; margin-right: 7px; background: #4862b3;}
		.social-wiki-intro .social-wiki-rule-limit .limit-list li:nth-child(4) ~ li {background: #4862b3;}
		.social-wiki-intro .social-wiki-rule-limit .limit-list li:nth-child(7) {background: #334fab !important;}
		.social-wiki-intro .social-wiki-rule-limit .limit-list li:nth-child(7) ~ li {background: #334fab !important;}
		.social-wiki-intro .social-wiki-rule-block {text-align: center;}
		.social-wiki-intro .social-wiki-rule-block .intro-point {display: block;}
		.social-wiki-intro .social-wiki-rule-block .block-list {margin-top: 0; line-height: 1.9;}
		.social-wiki-intro .social-wiki-rule-block .block-list li {margin-top: 0;}
		.social-wiki-intro .social-wiki-rule-block .block-list span {display: block;}
		/* EOD : 소셜 위키 */


	/* 고객지원센터 */

		/* faq */

		.faq_list li .faqBox > a , .faq_list li.active .faqBox > a {padding:9px 50px 9px 20px}
		.faq_list li .faqBox > a:before {left:0}
		.faq_list li .faqBox > a:after {right:0}
		.faq_list li .faq_contents {padding:20px 30px 20px 50px}

		/* EOD : faq */

		/* 썸네일 */

		.thum_list {margin:-30px 0 0}
		.thum_list > li {width:100%; margin:30px 0 0}
		.thum_list:after {left:0}
		.thum_list > li.no_data {margin:50px 0 -50px; padding:30px 15px;}
		.thum_list > li.no_data .txt {font-size:14px; margin:15px 0 0}
		.thum_list .thum_content {margin:0}
		.thum_list .thum_content .tit.oneRow .titBox .txt {padding: 4px 0}

		/* EOD : 썸네일 */

	/* EOD : 고객지원센터 */

	/* 나의 강의실 */

	.lecture_section {margin:0}

	/* 나의 홈 */

	.myH_InfoBox {margin:10px -15px 30px; padding:30px}
	.myH_InfoBox_Select {position: static; text-align: center; margin:0}
	.myH_InfoBox_Select .selectBox {width:108px;}
	.myH_InfoBox_Select button {padding: 0 15px}
	.myH_cntBox {margin:30px 0 0}
	.myH_circle {height: auto}
	.myH_circle > li {vertical-align: top}
	.myH_circle .obj {background:#f4f9fd; margin:0;display: flex;flex-direction: column-reverse;align-items: center;}
	.myH_circle .cnt {position:static; width:75px; height:75px; line-height:75px; font-size: 26px;}
	.myH_circle .txt , .myH_circle .obj.type02 .txt, .myH_circle .obj.type03 .txt {margin: 15px 0 0; display: block;height: auto; font-size: 14px}
	.myH_circle .txtIn {display: block}
	.myH_circle .txtIn small {display: inline; margin:0}

	.processSlider {padding: 0}
	.processSlider .wgBox {margin:0; height: 242px}
	.processSliderBox {min-height:auto}
	.processSlider .no_data	{margin:0; padding:65px 15px}
	.wgBox .tag {margin:6px 0 0}

	.sub_content > ul > li {width:100%}
	.sub_content > ul {margin:-30px 0 0}
	.sub_contentBox {margin:30px 0 0; min-height: auto}
	.sub_contentBox .listBoxIn {padding:21px 18px}
	.sub_contentBox .listBoxIn .txt {font-size:16px}
	.sub_contentBox .listBoxIn .txtBox a {font-size:16px; max-height:32px;}
	.sub_contentBox .listBoxIn .label_gray , .sub_contentBox .listBoxIn .label_white {font-size:13px; padding:3px 2px; margin:-10px 0 0}
	.sub_contentBox .list_area {min-height:auto}
	.sub_contentBox .list_area .no_data {padding:59px 15px}
	.sub_contentBox .list_area .no_data .txt {margin:20px 0 0}

	.myH_status .processSliderBox {height: auto;}
	.myH_status .sub_contentBox .list_area {min-height: auto;}
	.myH_status .sub_contentBox .list_area .no_data {padding-bottom: 59px;}

	.wgBox .imgBox {width:98px; height:58px}
	.wgBox .txtBox {margin:0 0 0 115px}
	.wgBox .txtBox .sub_infoBox {margin:10px 0 0}
	.wgBox .txtBox .sub_infoBox .info {font-size:13px}
	.wgBox .txtBox .tit {margin:5px 0 0; font-size:16px; line-height:1.2}
	.wgBox .infoBox .dateBox {text-align: left}
	.wgBox.type02 .infoBox .dateBox {margin:10px 0 0; }
	.wgBox.type02:after {height:180px}
	.wgBox.type03 {height:150px}
	.wgBox.type03:after {height:80px}
	.wgBox.type03 .txtBox {margin:0}
	.wgBox.type03 .tit , .wgBox.type03 .txtBox > p:first-child {margin:0 0 0 115px; min-height: 38px; max-height: 38px;}
	.wgBox.type03 .sub_infoBox {margin:35px 120px 0 0}
	.wgBox.type04 {height:100px}
	.wgBox.type04:after {height:30px}
	.wgBox.type04 .tag {max-height:29px; margin:3px 0 0}
	.wgBoxIn {padding:20px}
	.wgBoxIn > .tit {font-size:18px}
	.wgBox .infoBox {display: block; margin:10px 5px 0 0;}
	.wgBox .infoBox .leftBox .label , .wgBox .infoBox .dateBox .label {margin:0 5px 0 0;}
	.wgBox .infoBox .dateBox .data {display: inline-block; margin:10px 0 0}
	.wgBox .infoBox .dateBox button {float:right}
	.wgBox .infoBox .leftBox , .wgBox .infoBox .dateBox {font-size:14px; display: block}
	.wgBox .progresLabel {width:60px}


	/* EOD : 나의 홈 */


	/* 나의 학습 */

	.ThumBox {width:auto}
	.ThumBox .infoBox {margin:0; min-height:auto}
	.ThumBox .dayBox {font-size:13px; padding:2px 5px}
	.ThumBox .imgBox {width:98px; height:58px;}
	.ThumBox .txtBox {margin:0 0 0 110px; min-height:60px}
	.ThumBox .txtBox .label {font-size:13px}
	.ThumBox .txtBox .tit {font-size:16px}
	.ThumBox .tag {max-height:48px}
	.ThumBox .tag > li span {font-size:12px; padding:2px 5px}
	.ThumBox .likeBox {display:none}
	.paymentBox .payment_status {font-size: 13px; padding: 0 15px}

	.table_detail tr.detail td {position:relative}
	.table_detail tr.detail .ThumBox {position:static; margin:10px 0 0}
	.table_detail tr.detail .ThumBox .infoBox {margin:0}
	.table_detail tr.detail .ThumBox .txtBox , .table_detail tr.detail .ThumBox .tag {margin:0 0 0 30px}
	.table_detail tr.detail .ThumBox:before {bottom:0;}
	.table_detail tr.detail.first .ThumBox:before {top:0}
	.table_detail tr.detail .ThumBox:after {width:12px; top:50px; left:21px}
	.table_detail tr.detail.last .ThumBox:before {top:0; height:51px}
	.w.table_detail tbody tr.detail td .mobBox {margin: 8px 0 0 30px;}

	.progressWrap.mob {display:table; word-break: normal;}
	.progressWrap.mob .progressPer {display:table-cell; padding:0 15px 0 0}
	.progressWrap.mob .progressBar {display:table-cell; width:100%; font-size:16px; padding:6px 0 0}
	.progressWrap.mob .progressPer .num {font-size:18px}

	/* EOD : 나의 학습 */


	/* 학습 창 */

	.learning {min-height:400px}
	.learningHeader .title h2 {margin:0 170px 0 20px; font-size:18px;}
	.learningHeader .title .title_btnBox a {font-size:16px; padding:0 10px}
	.learningHeader .title .title_btnBox a.menu_btn {display:none}
	.learningBox .infoR .download { top:21px; }
	.videoBtnBox {position:static}
	.learning_menu {position:static; width:100%}
	.learning_menu_List {overflow:hidden; height:auto !important}
	.learning_menu_Header > li:first-child , .learning_menu_Header > li:before , .learning_menu .icon_close {display:none}
	.learningBox {padding:20px}
	.learningBox .tit {font-size:18px}
	.learning_dep2 .tit:before {top:1px}
	.learning_dep2 {padding:11px 20px}
	.learning_dep2 .tit {font-size:16px}

	/* EOD : 학습 창 */

	/* 교재 배송현황 */

	.ThumBox .infoBox.vertical , .ThumBox .infoBox.vertical .txtBox {display:block}

	/* EOD : 교재 배송현황 */

	/* 나의 설문 */

	.list_survey > ul {overflow:hidden; margin:-10px 0 0;}
	.list_survey > ul > li {width:100%; min-height:auto}
	.list_survey .surveyBox {margin:10px 0 0;}
	.list_survey .surveyHeader {padding:16px 14px}
	.list_survey .surveyHeader .labelBox {left:14px}
	.list_survey .surveyHeader .titBox {margin:0 0 0 45px}
	.list_survey .surveyHeader .tit {font-size:16px}
	.list_survey .surveyContent {padding:19px 14px}
	.list_survey .surveyContent .content {font-size:14px; max-height:42px;}
	.list_survey .surveyContent .blockTable {font-size:14px;}
	.list_survey .surveyContent .blockTable .th {padding:5px 10px 5px 0 }
	.list_survey .surveyContent .btnBox {margin:15px 0 0}

	.list_survey > ul > li.no_data .no_dataBox {margin:0}

	.test_label li {font-size:14px}

	/* EOD : 나의 설문 */


	/* 훈련과정 결제정보 */

	.date_searchBox {padding:10px 15px}
	.date_searchBoxIn .label {float:none; display:block; line-height:1; margin:0 0 5px}
	.content_Listed > li {margin:5px 10px 5px 0}
	.search_area .selectBox {margin:0 1px 0 0}

	.table_normal.payment {border-top:0; margin:10px 0 0}
	.table_normal.payment tbody tr {display:block; position: relative;border-bottom: 1px solid #d7d7d7;}
	.table_normal.payment tbody tr td {display:flex; flex-direction: column; border-bottom: 0; padding:0 10px 10px; text-align: left; }
	.table_normal.payment tbody tr td .ThumBox {margin:15px 0 0}
	.table_normal.payment tbody tr.row {margin:30px 0 0;}
	.table_normal.payment tbody tr.row td:first-child {border-top:1px solid #555555; background:#ebeff2; position:relative; margin:0; padding:15px 10px}
	.table_normal.payment tbody tr.row td:first-child button {position: absolute; top:50%; right: 10px; margin:-20px 0 0}
	.table_normal.payment tbody tr td button {padding: 0 10px; font-size: 14px}
	.table_normal.payment tbody tr td:last-child button {position: absolute; bottom:15px; right:10px; margin:0}
	.table_normal.payment.type02 {border-top:1px solid #666}
	.table_normal.payment.type02 thead tr th, .table_normal.payment.type02 tbody tr td {border-left:0}

	.table_normal.payment .orderInfo {margin:0 120px 0 0}
	.table_normal.payment .orderInfo p {font-size:14px; margin:5px 0 0}
	.table_normal.payment .orderInfo p:first-child {margin:0}
	.table_normal.payment .orderInfo span {margin:0 0 0 8px; word-break: break-all;}

	.table_normal.payment .mob_label {position: relative; font-size:14px; margin:0 100px 0 0}
	.table_normal.payment .mob_label .label {position: absolute; top:0; left:0; display:inline-block; color:#222; font-weight: 500; }
	.table_normal.payment .mob_label .data {display:inline-block; margin:0 0 0 65px; word-break: break-all}

	.cartTopArea {border-top: 1px solid #555555; background: #ebeff2; margin:30px 0 0; padding: 15px 10px;}
	.cartTopBox .leftBox > ul > li {float:none; margin:7px 0 0; font-size: 14px;}
	.cartTopBox .leftBox > ul > li:first-child {margin:0;}
	.cartTopBox .leftBox > ul > li:before {display: none}

	.cartTopBox .leftBox {vertical-align: middle; padding: 0 10px 0 0}
	.cartTopBox .rightBox {vertical-align: middle}
	.cartTopBox .rightBox button {min-width:80px; font-size: 14px; margin:0; padding: 0 10px;}

	.ThumBox .tool_tip {left:-15px}
	.ThumBox .tool_tip.alarm {width:calc(100% + 20px)}
	.ThumBox .tool_tip .txt {font-size: 14px; padding: 10px; white-space: inherit; right:0; line-height: 1.3}

	.table_normal.cart {border-top:0; margin:0}
	.table_normal.cart tbody tr {display:block; position: relative;border-bottom: 1px solid #d7d7d7;}
	.table_normal.cart tbody tr td {display:flex; flex-direction: column; border-bottom: 0; padding:0 10px 10px; text-align: left; }
	.table_normal.cart tbody tr td:first-child {padding: 0}
	.table_normal.cart tbody tr td:first-child .checkBox {position: absolute; top:15px; left:0;}
	.table_normal.cart tbody tr td .ThumBox {margin:15px 0 0 40px}
	.table_normal.cart tbody tr.row {margin:30px 0 0;}
	.table_normal.cart tbody tr td:last-child a , .table_normal.cart tbody tr td:last-child button {position: absolute; bottom:20px; right:10px; margin:0}

	.table_normal.cart .orderInfo {margin:0 120px 0 0}
	.table_normal.cart .orderInfo p {font-size:14px; margin:5px 0 0}
	.table_normal.cart .orderInfo p:first-child {margin:0}
	.table_normal.cart .orderInfo span {margin:0 0 0 8px; word-break: break-all;}

	.table_normal.cart .mob_label {position: relative; font-size:14px; margin:0 40px 0 0}
	.table_normal.cart .mob_label .label {position: absolute; top:0; left:0; display:inline-block; color:#222; font-weight: 500; }
	.table_normal.cart .mob_label .data {display:inline-block; margin:0 0 0 65px; word-break: break-all}
	.table_normal.cart .mob_label + .mob_label {margin-top:0}

	.table_normal.payment tbody tr:hover td , .table_normal.cart tbody tr:hover td {background:white}

	.lecture_cart_txt {padding:10px}
	.lecture_cart_txt .txt_bullet {display: block}
	.lecture_cart_txt .txt_bullet:first-child {margin-top:0}
	.lecture_cart_txt .txt_bullet + .txt_bullet {margin-left:0}

	.table_payment {margin:30px 0 0}
	.table_payment tbody tr {display:block}
	.table_payment tbody tr th {display:block; text-align: left; font-size:18px; padding: 15px 10px}
	.table_payment tbody tr td {display:block; padding:15px 0}

	.table_paymentBoxL .select_process .cnt {display:inline-block; min-width:90px; margin:0; font-weight: 500}
	.table_paymentBoxL .select_process .cnt:after {display: none}
	.table_paymentBoxL, .table_paymentBoxR {display:block}
	.table_paymentBoxLIn {margin:0 0 0 10px}
	.table_paymentBoxL .agencyBox > li {margin:0}
	.table_paymentBoxL .agencyBox > li:first-child {min-width: 90px;}
	.table_paymentBoxL .agencyBox > li:before {display: none}
	.table_paymentBoxL .select_process {margin:0; font-size: 14px}
	.table_paymentBoxR {margin:5px 0 0}
	.table_paymentBoxR .number {margin:0 0 0 15px}
	.table_paymentBoxR button {display:block; width:100%; padding: 0; margin:15px 0 0}

	.select_delBox {margin:30px 0 10px; height: auto}
	.select_delBox button {position: static}

	.agencyBox {font-size: 14px; padding:5px 0;}
	.agencyBox.bg {background-color: #ebeff2; padding:10px 0; border-top:1px solid black; border-bottom:1px solid #d7d7d7}
	.agencyBox > li:before {display: none}

	h4 + .agencyBox {margin:-25px 0 0 }

	/* EDO : 훈련과정 결제정보 */

	/* 결제취소 / 환불신청 팝업 */

	.refund_cashBox .label {position: static; line-height: 1.4; font-size: 16px}
	.refund_cashBox .refund_Input {margin:5px 0 0}
	.refund_cashBox .refund_Input .bank {width:50%}
	.refund_cashBox .refund_Input .person {width:49%; margin:0}
	.refund_cashBox .refund_Input .ac_number {width:100%; margin:5px 0 0}

	/* EOD : 결제취소 / 환불신청 팝업 */



	/* EOD : 나의 강의실 */

	/* 강의실 */

	.score_num {font-size:20px;}
	.exam_scoreBox {font-size:16px}

	/* EOD : 강의실 */

	/* 스마트플랫폼 STEP 소개 */

	.section_top {margin:0;}
	.section_top .main_txt {font-size:24px}
	.section_top .main_txt br {display: none}

	.section_top .left_content {margin:35px 0 0; height: auto}
	.section_top .left_content .imgBox , .section_top .right_content .imgBox {position: static; margin:0 -15px}
	.section_top .left_content .imgBox img , .section_top .right_content .imgBox img {width:100%}
	.section_top .left_content .contentBox , .section_top .right_content .contentBox {margin:0; text-align: center}

	.step_intro_circle > li .num {font-size: 30px}
	.step_intro_circle > li .txt {font-size: 20px}

	.step_intro_circle .step_circleBox {width:150px; height: 150px; margin:10px 0 0}
	.step_intro_circle .step_circleBox .icon {width: 31px; height: 31px}
	.step_intro_circle .step_circleBox.type02 .icon {width:30px; height: 29px}
	.step_intro_circle .step_circleBox.type03 .icon {width:11px; height: 30px}
	.step_intro_circle .step_circleBox.type04 .icon {width:32px; height: 26px}
	.step_intro_circle .step_circleBox .content {font-size: 14px; margin:5px 0 0}

	.section_top .right_content {display:flex; flex-direction:column-reverse; height: auto; margin:50px 0 0}
	.section_top .contentBox .tit {font-size: 24px;}
	.section_top .contentBox .content_txt {font-size: 14px; line-height: 1.5}

	.section_mid {margin:40px 0 0}
	.step_intro_circle {margin:-20px 0 0}
	.step_intro_circle > li {width:50%; margin:20px 0 0}

	.step_intro_circle_txt {font-size:16px}

	.section_bot {margin:60px 0 0}

	.bg_intro_BIBox {margin:40px 0 0}
	.bg_intro_BIBox img {width:90%; max-width:387px;}

	.bg_intro_symbolBox {margin:50px 0 0}
	.bg_intro_symbolBoxIn {display: block}
	.bg_intro_symbolBoxIn .symbol_img {display: block}
	.bg_intro_symbolBoxIn .symbol_img img {width:90%; max-width: 534px}
	.bg_intro_symbolBoxIn .symbol_txt {display: block; margin:20px 0 0; padding: 0; text-align: center; font-size: 16px}
	.bg_intro_symbolBoxIn .symbol_txt br {display: none}

	/* EOD : 스마트플랫폼 STEP 소개 */


	/* Membership */

	/* 강사 신청 */

	.tc_terms_list .terms_contents {padding:13px 9px; font-size:14px}
	.tc_terms_list .table_veti thead tr td {font-size:14px; padding:10px 5px}
	.tc_terms_list .table_veti tbody tr td {font-size:14px; padding:10px}
	.tc_terms_list .table_veti tbody tr td {font-size:14px; padding:10px 5px}
	.tc_terms_list .table_hori tbody tr th , .tc_terms_list .table_hori tbody tr td {display:block}
	.tc_terms_list .table_hori tbody tr td inputBox {margin:5px 0}
	.tc_terms_list .input_bank , .tc_terms_list .input_ac_number {width:110px}
	.tc_terms_list .terms_contents textarea {height:48px}
	.tc_terms_list .stepBox .btnBox {padding:9px}
	.tc_terms_list .stepBox > a {padding:19px 50px 19px 9px}
	.tc_terms_list .inputList > li {margin:5px 20px 5px 0}
	.tc_terms_list .inputList input[type="text"] {width:90px}
	.tc_terms .txt_default {margin:15px 0}

	/* NCS 분류 팝업 */


	.ncsTypeBox {display:block; border-top: 0;}
	.ncsTypeBox .typeBox {display:block;}
	.ncsTypeBox .tit {position:relative; height: 30px;line-height: 30px;border-top: 0;}
	.ncsTypeBox .typeBox.active .tit {background: linear-gradient(90deg, rgba(13,127,96,1) 8%, rgba(13,127,160,1) 91%); color:white}

	.ncsTypeBox .list_type {border:0;height:auto; min-height:158px; max-height:158px; border-right: 1px solid #555; border-left: 1px solid #555;}
	.ncsTypeBox .list_type a {font-size:14px; padding:13px 20px}


	/* EOD : NCS 분류 팝업 */


	/* EOD : 강사 신청 */

	/* 심사중 & 심사완료 */

	.ms_procees {margin:80px 0 0}
	.ms_procees > ul {margin:0 0 0 -30px}
	.ms_procees > ul > li {margin:0 0 0 30px}
	.ms_procees > ul > li:before {width:10px; height:18px; margin:-9px 0 0 25px;}
	.ms_procees > ul > li.disabled:before {background:url("https://webpi.github.io/step_portal/images/template9/resp/default/icon/icon_ms_arrow.png") no-repeat -9px 0}
	.ms_Circle {width:88px; height:88px; border: 1px solid #555;}
	.ms_Circle .txt {font-size:13px; margin:9px 0 0}
	.ms_Circle .icon {width:40px; height:35px}
	.ms_Circle.type02 .icon , .ms_Circle.type03 .icon {height:34px}
	.ms_txtBox {margin:50px 0 0}

	/* EOD : 심사중 & 심사완료 */

	/* 원격지원서비스 */
	.remote_wrap { padding:30px 20px 70px 20px; }
	.remote_wrap .remote_tit { font-size:20px; margin:40px 0 20px 0; }
	.remote_wrap .remote_txt { font-size:16px; line-height:1.6; }
	.remote_wrap .remote_bold {text-decoration: underline}
	.remote_wrap .remote_bold:after {display:none}
	.remote_bg { margin:60px 0 0 0; }
	.remote_bg:before { left:-40px; width:150px; background-size:100% auto; bottom:-270px; }
	.remote_bg:after { right:-50px; width:160px; background-size:100% auto; bottom:-255px; }
	.remote_bg .remote_line01 { left:80px; right:70px; border-top:1px dashed #555; top:0; }
	.remote_bg .remote_line01:after { width:6px; height:14px; background-size:100% auto; top:-6px; right:-8px; }
	.remote_bg .remote_line02 { left:85px; right:65px; border-top:1px dashed #f64141; top:15px; }
	.remote_bg .remote_line02:after { width:6px; height:14px; background-size:100% auto; top:-6px; left:-8px; }
	/* EOD : 원격지원서비스 */

	/* 사이트맵 */
	.sitemap-wrap .sitemap-box {float: none; width: auto;}
	.sitemap-wrap .sitemap-box:first-child {margin-right: 0;}

	/* EOD : Membership */


	/* 통합검색 */
	.search_wrap {padding:30px 0 0; margin: 0 15px;}
	.search_wrap .search_top {padding: 20px 15px 15px;}
	.search_wrap .search_top .search_total {font-size: 14px;}
	.search_wrap .search_top .t {margin-right: 15px; font-size: 14px;}
	.search_wrap .search_top .selectBox {max-width: 150px;}
	.search_wrap .search_top .istyle {width: calc(100% - 36px - 80px);max-width: none; margin-top: 10px;}
	.search_wrap .search_top .btn_s_blue {margin-top: 10px;}
	.search_wrap .search_result {margin-top: 30px;}
	.search_wrap .search_list {margin-top: 30px;}
	.search_wrap .search_list .tabBox.active {margin-top: 30px;}
	.search_wrap .search_list .tabBox.active + .tabBox.active {margin-top: 40px;}
	.search_wrap .search_result .tit-h3 {font-size: 20px;}
	.search_wrap .search_result .tit-h3 .cnt {font-size: 14px}
	/* .search_wrap .contents_list .no_data {font-size: 16px} */
	.search_wrap .contents_list {margin-top: 20px; border-top: 1px solid #555;}
	.search_wrap .contents_list li {padding: 14px 15px;line-height: 1;}
	.search_wrap .contents_list li a {font-size: 16px; white-space: normal; text-overflow: unset; line-height: 1.3;}
	.search_wrap .contents_list .date {display: block; position: static; margin: 8px 0 0 0; font-size: 13px;}
	/* EOD : 통합검색 */
}

/* mobile */
@media only all and (max-width:420px) {
	.process_searchBox .typeBox .dataBox {display: block}
	.process_searchBox .typeBox .dataBox .dateBox {display: block; margin:0}
	.process_searchBox .typeBox .dataBox .dateBox .wave {display: none}
	.process_searchBox .typeBox .dateBoxIn .inputBox {display: block; margin:5px 0}
}

/* mobile */
@media only all and (max-width:320px) {
	/* 과정 */
	.ProcessBox .thumBox .thum_tag > ul > li span {padding: 3px;}
}