@charset "utf-8";
@import url('font.css');
*{
    box-sizing: border-box;
}
/* ncs_tab */
.ncs_tab{max-width: 100%; width: 100%; margin: 0 auto 60px; display: none; table-layout: fixed}
.ncs_tab li{background: #fff; border: 1px solid #D3D3D3; border-left: 0; display: table-cell; vertical-align: middle; position: relative; text-align: center}
.ncs_tab li:first-child{border-left: 1px solid #d3d3d3}
.ncs_tab li a, .ncs_tab li span{word-break:keep-all; padding: 10px 5px; display: block; color: #4c4c4c; font-size: 17px; letter-spacing: -1px}
.ncs_tab li a.on{border-color: #66b1f1; background: #4c4c4c}
.ncs_tab li a.on:after{content: ''; position: absolute; left: 50%; bottom: -10px; border-top: 5px solid #4c4c4c; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid transparent; transform: translate(-50%, 0)}
.ncs_tab li.on a, .ncs_tab li.on span{color: #ffffff;}
.ncs_tab li.on{border-color: #4c4c4c; background: #4c4c4c}
.ncs_tab li.on:after{content: ''; position: absolute; left: 50%; bottom: -10px; border-top: 5px solid #4c4c4c; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid transparent; transform: translate(-50%, 0)}
.ncs_tab li a.on, .ncs_tab li a.on span{color: #ffffff}
.ncs_tab .on { background: rgb(168, 168, 168);}

@media screen and (max-width:1299px){
    .ncs_tab{display:table;}
}

@media screen and (max-width:768px){
	.ncs_tab{display: flex; flex-flow: wrap}
	.ncs_tab li{width: 50%; border-top: 0; display: block}
	.ncs_tab li:nth-child(1).on,
	.ncs_tab li:nth-child(2).on{border-color: #4c4c4c}
	.ncs_tab li:nth-child(odd){border-left: 1px solid #d3d3d3}
	.ncs_tab li.on:after{display: none}
}

@media screen and (max-width:1410px){
    .ncs_tab li a, .ncs_tab li span{font-size:15px; word-break: break-all; }
}
@media screen and (max-width:1310px){
    .ncs_tab li a, .ncs_tab li span{font-size:14px; word-break: break-all; }
}
@media screen and (max-width:1200px){
    .ncs_tab li a, .ncs_tab li span{font-size:13px; word-break: break-all; }
}

.tab_wrap ul.tab_container{width: 100%; overflow: hidden;}
.tab_wrap ul.tab_container > li{overflow:hidden; display: none;}
.tab_wrap ul.tab_container > li.on{display: block;}

/* ncs_tab */
/* 강좌 리스트 공통 */
.lecture_wrap .lecture_list { display:flex; justify-content:space-between; flex-wrap:wrap; border-bottom:1px solid #e0e0e0; margin-top:10px; overflow:hidden;}
.lecture_wrap .lecture_list .pic { width:200px; margin-right:20px;margin-left:20px;margin-bottom:10px;}
.lecture_wrap .lecture_list .pic .pic_div {border-radius: 4px; overflow: hidden;}
.lecture_wrap .lecture_list .pic .pic_div img { width:100%;}
.lecture_wrap .lecture_list .info { flex-grow:3; margin:auto 0; padding: 10px;}
.lecture_wrap .lecture_list .info .tit { font-size: 1em;font-weight: 700;color: #222;line-height: 1.3em;white-space: nowrap;overflow: hidden;width: 500px;display: inline-block;text-overflow: ellipsis;}
.lecture_wrap .lecture_list .info .price { font-size:1em; font-weight:600; color:#727272; line-height:1.5em;}
.lecture_wrap .lecture_list .info .price strong { font-weight:700; color:#ee3f3f;}
.lecture_wrap .lecture_list .info .sort { margin-top:10px; overflow:hidden;}
.lecture_wrap .lecture_list .info .sort ul li { margin:3px 0; }
.lecture_wrap .lecture_list .info .sort ul li span {display:inline-block; background:#eaf2fb; padding:2px 10px; margin-right:8px; font-size:0.9em; color:#20222d; text-align:center;}
.lecture_wrap .lecture_list .btn { flex-grow:2; margin:auto 0; }
.lecture_wrap .lecture_list .btn a.order {transition: all 0.3s ease-in-out; display:block; background:#ee3f3f; padding:7%; margin:10px 0; color:#fff; text-align:center;}
.lecture_wrap .lecture_list .btn a.preview {transition: all 0.3s ease-in-out; display:block; background:#fff; border:1px solid #e0e0e0; padding:7%; margin:10px 0; text-align:center;}
.lecture_wrap .lecture_list .btn a.order:hover { background:#4c61b5; color:#fff; }
.lecture_wrap .lecture_list .btn a.preview:hover { border:1px solid #ee3f3f; color:#ee3f3f; }

.paginate{ width:100%; text-align:center; margin-top:2em;}
.paginate a { margin-left:0px; display:inline-block; width:23px; color:#686868; font-size:0.9em; line-height:23px; background:#ffffff; border:1px #c5c5c5 solid; }
.paginate a:hover { border:1px solid #ee3f3f; color:#ee3f3f; }
.paginate a.on{ margin-left:0px; display:inline-block;  width:25px; color:#fff; font-size:0.9em; line-height:25px;  background:#484848; border:0;  }
.paginate a.on:hover { background:#4c61b5; color:#fff; }

@media (min-width:1300px){
    #container{*display:inline-block; width:1250px; overflow:hidden; margin:50px auto;}
    #container:after{display:block;clear:both;content:''}

    /* 상단이미지 */
    .subtop_01{ position:relative; width:100%; height:130px; overflow:hidden; background-color:#ffe9dc; background-image:url(../img/subtop_01.png); background-position:center; background-repeat:no-repeat; z-index:7; }
    .subtop_02{ position:relative; width:100%; height:130px; overflow:hidden; background-color:#d4e2ff; background-image:url(../img/subtop_01.png); background-position:center; background-repeat:no-repeat; z-index:7; }
    .subtop_03{ position:relative; width:100%; height:130px; overflow:hidden; background-color:#d4e2ff; background-image:url(../img/subtop_01.png); background-position:center; background-repeat:no-repeat; z-index:7; }
    .subtop_04{ position:relative; width:100%; height:130px; overflow:hidden; background-color:#cbffe4; background-image:url(../img/subtop_01.png); background-position:center; background-repeat:no-repeat; z-index:7; }
    .subtop_05{ position:relative; width:100%; height:130px; overflow:hidden; background-color:#cac2ff; background-image:url(../img/subtop_01.png); background-position:center; background-repeat:no-repeat; z-index:7; }
    .subtop_06{ position:relative; width:100%; height:130px; overflow:hidden; background-color:#d2ffeb; background-image:url(../img/subtop_01.png); background-position:center; background-repeat:no-repeat; z-index:7; }
    .subtop_07{ position:relative; width:100%; height:130px; overflow:hidden; background-color:#ffe3f2; background-image:url(../img/subtop_01.png); background-position:center; background-repeat:no-repeat; z-index:7; }

    .subtoptext {position:absolute; left:50%; top:50%; transform:translate(-50%) translateY(-50%); width:1000px; margin:0 auto; z-index:7;}
    .subtoptext .txt { font-size:1.0em; color:#8c93a0; line-height:1.4em; }
    .subtoptext strong { font-size:1.8em; font-weight:800; color:#333; line-height:1.5em; }

    /* 서브메뉴 */
    .snb_container{border-top:0px solid #e0e0e0; border-bottom:1px solid #e0e0e0; height:55px;}
    .snb { width:1000px; margin:0 auto; z-index:8;}
    .snb .home{display:block; float:left; width:55px; height:55px;}
    .snb .wrapper{position:relative; float:left; width:220px; height:100%;}
    .snb .wrapper .tit{ position: relative; display:block; height:55px; line-height:55px; vertical-align:middle; padding-left:25px; font-size:16px; font-weight:500; color:#2d2d2d;}
    .snb .wrapper .tit:hover { color:#4c61b5;}
    .snb .wrapper .tit::before{content: "";position: absolute;left:0; top:50%; transform: translateY(-50%); height:16px; border-left:0px solid #e8e8e8;}
    .snb .wrapper .tit::after{content: "";position: absolute;right:18px;top:26px;width:0; height:0;border-style:solid; border-width:7px;border-color:transparent transparent transparent #4d4d4d;transform: rotate(90deg);-webkit-transform: rotate(90deg);}
    .snb .wrapper .tit.on::after{top:18px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);}
    .snb .wrapper .snb_menu{position:absolute; left:0; top:54px; width:100%; z-index:8;}
    .snb .wrapper .snb_menu li{display:none;margin-top:10px;}
    .snb .wrapper .snb_menu li:first-child{margin-top:0;}
    .snb .wrapper .snb_menu.open {/*overflow-y:auto;max-height:188px;*/ background:#fff; border:1px solid #e0e0e0; border-top:0; width:168px; padding:25px;}
    .snb .wrapper .snb_menu.open a { font-size:; font-weight:400; color:#676767; }
    .snb .wrapper .snb_menu.open a:hover { color:#4c61b5;}
    .snb .wrapper .snb_menu.open li{display:block;}
    .snb .wrapper .snb_menu.open li a{display:block;width:100%;}
    .snb .depth3_wrap .snb_menu.open{border:none;}
    .snb .depth2_wrap,.snb .depth3_wrap{display: none;}
    .snb .depth2_wrap.active,
    .snb .depth3_wrap.active{display: block;}
    .snb .depth2_wrap a { color:#fff;}
    .snb .wrapper.last{background:#4c61b5;}
    .snb .wrapper.last .snb_menu{ background:#4c61b5; top:54px; width:168px; border:1px solid #4c61b5; border-top:none; } /* 2차 메뉴*/
    .snb .wrapper.last .snb_menu a{ color:#fff;} 
    .snb .wrapper.last .snb_menu a:hover{ color:#ffe746;}
    .snb .wrapper.last > .tit{color:#fff}
    .snb .wrapper.last > .tit::before{display:none;}
    .snb .wrapper.last .tit::after{border-color:transparent transparent transparent #fff;}
    .snb::after{content:"";clear: both;display: block;}

    /* fixed */
    .snb[data-fixed="fixed"]{position: fixed;/*left:0;*/top:82px;width:100%;}


    /* 상단타이틀영역 */
    .titleArea { width:1000px; height:; border-bottom:1px #404040 solid; overflow:hidden; }
    .titleArea > #subtitle { float:left; padding-bottom:10px; font-size:1.5em;; font-weight:500; color:#222; line-height:1.5em;; letter-spacing:-1.2px; text-align:;}
    .titleArea .search_box { display: flex; flex-wrap: wrap; float:right; border:1px solid #ccc; margin-bottom: 10px;}
    .titleArea .search_box input { flex-grow: 1; padding:8px; border:0; width:250px;font-family: 'NotoSansKR','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum';}
    .titleArea .search_box input:focus-visible {border: 1px solid #3b82f6;}
    .titleArea .search_box button { flex-grow: 0; padding:8px; border:0; cursor:pointer;}
    .titleArea .search_box button img { height:20px;}


    /* 컨텐츠영역 */
    #content{ position:relative; float:left; width: calc(100% - 250px); }
    #content .wrapper { clear:both; margin:60px 0; overflow:hidden; }
    #content .wrapper h1, #content .wrapper2 h1 {font-size:1.7em; font-weight:500; color:#333; line-height:1.5em; letter-spacing:-1.0px; }
    #content .wrapper h1 strong { color:#ff6000; }


    /* 좌측 컨텐츠 카테고리바 */
    .ncs-side-menu{width: 200px; height: 100%!important; float: left; margin-right: 30px;}
    .ncs-side-menu .banner{width: 100%; height: 90px; overflow: hidden; background: #bdbdbd; margin-bottom: 10px; text-align: center; position: relative;}
    .ncs-side-menu .lec-link-wrap{padding: 20px 10px 100% 10px; border: 1px solid #dbdbdb; border-bottom:none; }
    .ncs-side-menu .lec-link-wrap h3.title{font-size: 20px; font-weight: 500; letter-spacing: -1.1px; text-align: center; color: #212121; border-bottom: 1px solid #404040 ; padding-bottom: 20px;}
    .ncs-side-menu .lec-link{ padding-bottom: 100%;}
    .ncs-side-menu .lec-link li{white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
    .ncs-side-menu .lec-link li a{ width:100%; font-family: 'Noto Sans KR', sans-serif!important; font-size: 15px; color: #212121;}
    .ncs-side-menu .lec-link li a:hover,
    .ncs-side-menu .lec-link li a:active{color: #464646;}

    /* 메뉴구성 드롭다운 */
    .nav-links{ height: 100%; overflow: auto;}
    .nav-links .on{ display: block;}
    .nav-links .off{ display: none;}
    .nav-links::-webkit-scrollbar{ display: none;}
    .nav-links li{ position: relative; list-style: none; transition: all 0.1s ease;}
    .nav-links li .iocn-link{ display: flex; align-items: center; justify-content: space-between;}
    .nav-links li i{  height: 25px;  min-width: 51px;  text-align: center;  line-height: 25px;  color: #787878;  font-size: 19px;  cursor: pointer;  transition: all 0.1s ease;}
    .nav-links li.showMenu i.arrow{  transform: rotate(-180deg);}
    .nav-links li a{ display: flex; align-items: center; text-decoration: none;}
    .nav-links li a .link_name{ font-size: 15px; font-weight: 700; width: 100%; padding: 11px 0 11px 14px; color:#838383;}
    .nav-links li a .link_name:hover{ color: #ff6868; font-weight: 900;}
    .nav-links li.showMenu .sub-menu{ display: block; transition: all 0.1s ease; padding: 5px 5px;}
    .nav-links .showMenu .link_name{ display: block; transition: all 0.1s ease; font-weight: bold; color: #ff0000;}
    .nav-links li .sub-menu{ background: rgb(246, 246, 246); display: none;}
    .nav-links li .sub-menu a{ color: #575757; font-size: 14px; white-space: nowrap;padding: 0px 0px 0px 10px; line-height: 30px; transition: all 0.1s ease;display: block; overflow: hidden; text-overflow: ellipsis;}
    .nav-links li .sub-menu a:hover{ color: #000000; font-weight: 700;}
    .nav-links li .sub-menu .on{ color: #111; font-weight: 700;}
    .nav-links li .sub-menu .link_name{ display: none;}
    .nav-links li .sub-menu.blank{ pointer-events: auto; padding: 3px 20px 6px 16px; pointer-events: none;}
    .nav-links li:hover .sub-menu.blank{ top: 50%; transform: translateY(-50%);}
}

@media (max-width:1299px){
    .ncs-side-menu{display:none;}
}



@media (min-width:768px) and (max-width:1299px){
    #container{*display:inline-block; width:90%; overflow:hidden; margin:40px auto;}
    #container:after{display:block;clear:both;content:''}

    /* 상단이미지 */
    .subtop_01{ position:relative; width:100%; height:130px; overflow:hidden; background-color:#ffe9dc; background-image:url(../img/subtop_01.png); background-position:right; background-size:cover; z-index:7; }
    .subtop_02{ position:relative; width:100%; height:130px; overflow:hidden; background-color:#d4e2ff; background-image:url(../img/subtop_01.png); background-position:right; background-size:cover; z-index:7; }
    .subtop_03{ position:relative; width:100%; height:130px; overflow:hidden; background-color:#d4e2ff; background-image:url(../img/subtop_01.png); background-position:right; background-size:cover; z-index:7; }
    .subtop_04{ position:relative; width:100%; height:130px; overflow:hidden; background-color:#cbffe4; background-image:url(../img/subtop_01.png); background-position:right; background-size:cover; z-index:7; }
    .subtop_05{ position:relative; width:100%; height:130px; overflow:hidden; background-color:#cac2ff; background-image:url(../img/subtop_01.png); background-position:right; background-size:cover; z-index:7; }
    .subtop_06{ position:relative; width:100%; height:130px; overflow:hidden; background-color:#d2ffeb; background-image:url(../img/subtop_01.png); background-position:right; background-size:cover; z-index:7; }
    .subtop_07{ position:relative; width:100%; height:130px; overflow:hidden; background-color:#ffe3f2; background-image:url(../img/subtop_01.png); background-position:right; background-size:cover; z-index:7; }

    .subtoptext {position:absolute; left:50%; top:50%; transform:translate(-50%) translateY(-50%); width:90%; margin:0 auto; z-index:7;}
    .subtoptext .txt { font-size:0.8em; color:#8c93a0; line-height:1.4em; }
    .subtoptext strong { font-size:1.5em; font-weight:800; color:#333; line-height:1.5em; }

    /* 서브메뉴 */
    .snb_container{border-top:0px solid #e0e0e0; border-bottom:1px solid #e0e0e0; height:55px;}
    .snb{ width:90%; margin:0 auto; z-index:8;}
    .snb .home{display:block; float:left; width:55px; height:55px;}
    .snb .wrapper{position:relative; float:left; width:220px; height:100%;}
    .snb .wrapper .tit{ position: relative; display:block; height:55px; line-height:55px; vertical-align:middle; padding-left:25px; font-size:16px; font-weight:500; color:#2d2d2d;}
    .snb .wrapper .tit:hover { color:#4c61b5;}
    .snb .wrapper .tit::before{content: "";position: absolute;left:0; top:50%; transform: translateY(-50%); height:16px; border-left:0px solid #e8e8e8;}
    .snb .wrapper .tit::after{content: "";position: absolute;right:18px;top:26px;width:0; height:0;border-style:solid; border-width:7px;border-color:transparent transparent transparent #4d4d4d;transform: rotate(90deg);-webkit-transform: rotate(90deg);}
    .snb .wrapper .tit.on::after{top:18px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);}
    .snb .wrapper .snb_menu{position:absolute; left:0; top:54px; width:100%; z-index:8;}
    .snb .wrapper .snb_menu li{display:none;margin-top:10px;}
    .snb .wrapper .snb_menu li:first-child{margin-top:0;}
    .snb .wrapper .snb_menu.open {/*overflow-y:auto;max-height:188px;*/ background:#fff; border:1px solid #e0e0e0; border-top:0; width:168px; padding:25px;}
    .snb .wrapper .snb_menu.open a { font-size:; font-weight:400; color:#676767; }
    .snb .wrapper .snb_menu.open a:hover { color:#4c61b5;}
    .snb .wrapper .snb_menu.open li{display:block;}
    .snb .wrapper .snb_menu.open li a{display:block;width:100%;}
    .snb .depth3_wrap .snb_menu.open{border:none;}
    .snb .depth2_wrap,.snb .depth3_wrap{display: none;}
    .snb .depth2_wrap.active,
    .snb .depth3_wrap.active{display: block;}
    .snb .depth2_wrap a { color:#fff;}
    .snb .wrapper.last{background:#4c61b5;}
    .snb .wrapper.last .snb_menu{ background:#4c61b5; top:54px; width:168px; border:1px solid #4c61b5; border-top:none; } /* 2차 메뉴*/
    .snb .wrapper.last .snb_menu a{ color:#fff;} 
    .snb .wrapper.last .snb_menu a:hover{ color:#ffe746;}
    .snb .wrapper.last > .tit{color:#fff}
    .snb .wrapper.last > .tit::before{display:none;}
    .snb .wrapper.last .tit::after{border-color:transparent transparent transparent #fff;}
    .snb::after{content:"";clear: both;display: block;}

    /* fixed */
    .snb[data-fixed="fixed"]{position: fixed;/*left:0;*/top:82px;width:100%;}

    /* 상단타이틀영역 */
    .titleArea { height:; border-bottom:1px #404040 solid; overflow:;padding: 10px;}
    .titleArea > #subtitle { padding-bottom:5px; font-size:1.3em; font-weight:500; color:#222; line-height:1.5em; letter-spacing:-1.2px; text-align:;}
    .titleArea .search_box { display: flex; flex-wrap: wrap; float:right; border:1px solid #ccc;}
    .titleArea .search_box input { flex-grow: 1; padding:6px; border:0; width:200px;}
    .titleArea .search_box input:focus {outline: none;}
    .titleArea .search_box button { flex-grow: 0; padding:6px; border:0; cursor:pointer;}
    .titleArea .search_box button img { height:18px;}

    /* 컨텐츠영역 */
    #content{ position:relative; float:left; width:100%; }
    #content .wrapper { clear:both; margin:50px 0; overflow:hidden; }
    #content .wrapper h1{font-size:1.7em; font-weight:500; color:#333; line-height:1.5em; letter-spacing:-1.0px; }
    #content .wrapper h1 strong { color:#ff6000; }
}


@media (max-width:767px){

    #container{*display:inline-block; width:90%; overflow:hidden; margin:30px auto; font-size:14px; line-height:1.5em;}
    #container:after{display:block;clear:both;content:''}

    /* 상단이미지 */
    .subtop_01{ position:relative; border-bottom:1px solid #e0e0e0; width:100%; height:130px; overflow:hidden; background-color:#ffe9dc; background-image:linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url(../img/subtop_01_m.png); background-position:center bottom; background-repeat:no-repeat; background-size:100%; z-index:; }
    .subtop_02{ position:relative; border-bottom:1px solid #e0e0e0; width:100%; height:130px; overflow:hidden; background-color:#d4e2ff; background-image:linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url(../img/subtop_01_m.png); background-position:center bottom; background-repeat:no-repeat; background-size:100%; z-index:; }
    .subtop_03{ position:relative; border-bottom:1px solid #e0e0e0; width:100%; height:130px; overflow:hidden; background-color:#d4e2ff; background-image:linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url(../img/subtop_01_m.png); background-position:center bottom; background-repeat:no-repeat; background-size:100%; z-index:; }
    .subtop_04{ position:relative; border-bottom:1px solid #e0e0e0; width:100%; height:130px; overflow:hidden; background-color:#cbffe4; background-image:linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url(../img/subtop_01_m.png); background-position:center bottom; background-repeat:no-repeat; background-size:100%; z-index:; }
    .subtop_05{ position:relative; border-bottom:1px solid #e0e0e0; width:100%; height:130px; overflow:hidden; background-color:#cac2ff; background-image:linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url(../img/subtop_01_m.png); background-position:center bottom; background-repeat:no-repeat; background-size:100%; z-index:; }
    .subtop_06{ position:relative; border-bottom:1px solid #e0e0e0; width:100%; height:130px; overflow:hidden; background-color:#d2ffeb; background-image:linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url(../img/subtop_01_m.png); background-position:center bottom; background-repeat:no-repeat; background-size:100%; z-index:; }
    .subtop_07{ position:relative; border-bottom:1px solid #e0e0e0; width:100%; height:130px; overflow:hidden; background-color:#ffe3f2; background-image:linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url(../img/subtop_01_m.png); background-position:center bottom; background-repeat:no-repeat; background-size:100%; z-index:; }

    .subtoptext {position:absolute; left:50%; top:50%; transform:translate(-50%) translateY(-50%); width:85%; margin:0 auto; text-align:center; z-index:7;}
    .subtoptext .txt { font-size:1em; color:#ffffff; line-height:1.4em;}
    .subtoptext strong { font-size:1.3em; font-weight:800; color:#ffffff; line-height:1.5em; }

    /* 서브메뉴 */
    .snb_container{border-top:0px solid #e0e0e0; border-bottom:1px solid #e0e0e0; height:45px;}
    .snb{ width:; margin:0 auto; z-index:8;}
    .snb .home{display:none; float:left; width:45px; height:45px;}
    .snb .wrapper{position:relative; float:left; width:50%; height:100%;}
    .snb .wrapper .tit{ position: relative; display:block; height:45px; line-height:45px; vertical-align:middle; padding-left:15px; font-size:14px; font-weight:500; color:#2d2d2d;}
    .snb .wrapper .tit:hover { color:#4c61b5;}
    .snb .wrapper .tit::before{content: "";position: absolute;left:0; top:50%; transform: translateY(-50%); height:16px; border-left:0px solid #e8e8e8;}
    .snb .wrapper .tit::after{content: "";position: absolute;right:10px; top:20px;width:0; height:0;border-style:solid; border-width:7px;border-color:transparent transparent transparent #4d4d4d;transform: rotate(90deg);-webkit-transform: rotate(90deg);}
    .snb .wrapper .tit.on::after{top:13px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);}
    .snb .wrapper .snb_menu{position:absolute; left:0; top:44px; width:100%; z-index:8;}
    .snb .wrapper .snb_menu li{display:none;margin-top:10px;}
    .snb .wrapper .snb_menu li:first-child{margin-top:0;}
    .snb .wrapper .snb_menu.open {/*overflow-y:auto;max-height:188px;*/ background:#fff; border:1px solid #e0e0e0; border-top:0; width:; padding:15px 0;}
    .snb .wrapper .snb_menu.open a {  font-size:; font-weight:400; color:#2d2d2d; line-height:1.7em;}
    .snb .wrapper .snb_menu.open a:hover { color:#4c61b5; }
    .snb .wrapper .snb_menu.open li{display:block; padding-left:15px; }
    .snb .wrapper .snb_menu.open li a{display:block;width:100%; font-size:14px; }
    .snb .depth3_wrap .snb_menu.open{border:none;}
    .snb .depth2_wrap,.snb .depth3_wrap{display: none;}
    .snb .depth2_wrap.active,
    .snb .depth3_wrap.active{display: block;}
    .snb .depth2_wrap a { color:#fff;text-decoration:none;}
    .snb .wrapper.last{background:#4c61b5;}
    .snb .wrapper.last .snb_menu{ background:#4c61b5; top:44px; width:; border:0px solid #4c61b5; border-top:none; } /* 2차 메뉴*/
    .snb .wrapper.last .snb_menu a{ font-weight:400; color:#fff; line-height:1.7em;} 
    .snb .wrapper.last .snb_menu a:hover{ color:#ffe746;}
    .snb .wrapper.last > .tit{ font-weight:400; color:#fff}
    .snb .wrapper.last > .tit::before{display:none;}
    .snb .wrapper.last .tit::after{border-color:transparent transparent transparent #fff;}
    .snb::after{content:"";clear: both;display: block;}

    /* fixed */
    .snb[data-fixed="fixed"]{position: fixed;/*left:0;*/top:82px;width:100%;}

    /* 상단타이틀영역 */
    .titleArea { width:100%; height:; border-bottom:1px #404040 solid; overflow:hidden; }
    .titleArea > #subtitle { padding-bottom:5px; font-size:1.3em;; font-weight:500; color:#222; line-height:1.5em;; letter-spacing:-1.2px; text-align:;}
    .titleArea .search_box { display: flex; flex-wrap: wrap; margin-bottom:5%; }
    .titleArea .search_box input { flex-grow: 1; padding:8px;font-family: 'NotoSansKR','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum';}
    .titleArea .search_box input:focus {outline: none;}
    .titleArea .search_box button { flex-grow: 0; padding:8px;}
    .titleArea .search_box button img { height:20px;}

    /* 컨텐츠영역 */
    #content{ position:relative; float:left; width:100%; }
    #content .wrapper { clear:both; margin:40px 0; overflow:hidden; }


    #content .wrapper h1, #content .wrapper2 h1 {font-size:1.3em; font-weight:500; color:#333; line-height:1.5em; letter-spacing:-1.0px; }
    #content .wrapper h1 strong { color:#ff6000; }

    /* 강좌 리스트 */
    .lecture_wrap { margin:20px 0; }
    .lecture_wrap .lecture_list { display:flex; justify-content:space-between; flex-wrap:wrap; border-bottom:1px solid #e0e0e0; margin-bottom:10px; overflow:hidden;}
    .lecture_wrap .lecture_list .pic { flex-grow:1;}
    .lecture_wrap .lecture_list .pic .pic_div {border-radius: 4px; overflow: hidden;}
    .lecture_wrap .lecture_list .pic .pic_div img { width:100%;}
    .lecture_wrap .lecture_list .info { flex-grow:3; margin:auto 0;}
    .lecture_wrap .lecture_list .info .tit { margin:5% 0; font-size:1em; font-weight:600; color:#222; line-height:1.3em;}
    .lecture_wrap .lecture_list .info .price { font-size:1em; font-weight:600; color:#727272; line-height:1.0em;}
    .lecture_wrap .lecture_list .info .price strong { font-weight:700; color:#ee3f3f;}

    .lecture_wrap .lecture_list .btn { flex-grow:2; margin:auto 0; }
    .lecture_wrap .lecture_list .btn a.order { display:block; background:#ee3f3f; padding:4%; margin:10px 0; color:#fff; text-align:center;}
    .lecture_wrap .lecture_list .btn a.preview { display:block; background:#fff; border:1px solid #e0e0e0; padding:4%; margin:10px 0; text-align:center;}
    .lecture_wrap .lecture_list .btn a.order:hover { background:#4c61b5; color:#fff; }
    .lecture_wrap .lecture_list .btn a.preview:hover { border:1px solid #ee3f3f; color:#ee3f3f; }

}

@media (max-width:970px){
    .lecture_wrap .lecture_list .btn {max-width: 100px; margin-right: 20px; margin-left: 20px;}
}
@media (max-width:700px){
    .lecture_wrap .lecture_list .btn {max-width: 100%; margin-right: 0px; margin-left: 0px;}
}
@media (max-width:500px){
    .lecture_wrap .lecture_list .pic .pic_div img { width:100%; height:250px;}
}

/* 서브페이지 서브카테고리 디자인 */
.sub_navi{border-top: 0px solid #e0e0e0;border-bottom: 1px solid #e0e0e0;height: 55px;}
.sub_navi:after{content: ''; display: block; clear: both}
.sub_navi>ul{max-width: 1250px; margin: 0 auto}
.sub_navi>ul>li{width: 260px; height: 56px; line-height: 55px; float: left; position: relative; z-index: 10;  font-size: 17px; font-weight: 500; word-break: break-word}
.sub_navi>ul>li.home{display: block; float: left; width: 55px; height: 55px;}
.sub_navi>ul>li>span{padding-left: 15px; border-right: 1px solid #d1d1d1; display: block; background: url(../img/comm/icon_arrow.png) no-repeat; background-position-x: calc(100% - 15px); background-position-y: center; cursor: pointer}
.sub_navi>ul>li>ul{width: calc(100% + 1px); border: 1px solid #D9D9D9; border-top: 0; display: none; position: absolute; top: 55px; left: -1px; background: #ffffff}
.sub_navi>ul>li>ul>li>a{padding: 0 15px; display: block; font-weight: 400;}
.sub_navi>ul>li>ul>li>a:hover{background: #D9D9D9}
.sub_navi>ul>li.on>ul{display: block}
.sub_navi>ul>li:hover >ul,
.sub_navi>ul>li:focus >ul{display: block}

@media screen and (max-width:768px){
	.sub_navi>ul{width: 100%; display: table; table-layout: fixed}
	.sub_navi>ul>li{width: 50%; height: auto; border-right: 1px solid #e0e0e0; display: table-cell; vertical-align: middle; float: none; line-height: 1.49em}
	.sub_navi>ul>li:last-child{border-right: 0}
	.sub_navi>ul>li.home{display: none}
	.sub_navi>ul>li>span{height: 100%; padding: 15px; padding-right: 40px; border-right: 0}
	.sub_navi>ul>li>ul>li>a{padding: 15px 40px 15px 15px}
}

.ncs_badge {
    display: flex;
    column-gap: 5px;
    padding-bottom: 5px;
}
.ncs_badge span {
    padding: 0 6px;
    font-size: 12px;
    line-height: 21px;
}
.ncs_badge .ncs {
    background-color: #fbf4d6;
    color: #ff7a43;
}
.ncs_badge .saup {
    background-color: #f5f8fc;
    color: #4067b1;
}
.ncs_badge .ncs_best {
    background-color: #fff1f0;
    color: #ee3f3f;
}
.ncs_badge .ncs_chuchun {
    background-color: #f6f6f6;
    color: #3030f5;
}
.package {
    font-size:11px;
    background-color: #fff7b7;
    color: #818702;
}
.me {
    background-color: #fff1f0;
    color: #ee3f3f;
}
.ck {
    background-color: #f6f6f6;
    color: #3030f5;
}
.ncs {
    background-color: #fbf4d6;
    color: #ff7a43;
}
.saup {
    background-color: #f5f8fc;
    color: #4067b1;
}
.si {
    background-color: #b8ffd7;
    color: #6e6e6d;
}
.book {
    font-size:11px;
    background-color: #7c4335;
    color: #ffffff;
    padding: 0px 2px 0px 2px;
}
.kdgt {
    background-color: #3f73e0;
    color: #eaf0fc;
    padding: 0px 2px 0px 2px;
}
.sanup {
    background-color: rgb(247, 218, 19);
    color: rgb(0, 0, 0);
    padding: 0px 2px;
}
.secret_y{
    background-color: #273450;
    color: #f0f0f0;
}
.secret_y2{
    background-color: #273450;
    color: #f0f0f0;
}
.mosa {
    background-color: #ffc9c5;
    color: #ff0000;
}
.ncs_best {
    background-color: #fff1f0;
    color: #ee3f3f;
}
.ncs_chuchun {
    background-color: #f6f6f6;
    color: #3030f5;
}
/* 수강신청 상세페이지 */
.left_text{
    margin: 10px 0 10px;
    max-height: 200px;
    padding: 20px 20px;
    border-radius: 4px;
    background-color: #fafafa;
}

.left_text li{
    padding: 0px 0px 10px 0px;
    font-weight: 400;
    font-size: 13px;
    color: #000000;
    line-height: 20px;
    position: relative;
}

#sub_content {
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
    max-width: 1050px;
    margin: 60px auto;
    padding: 0 20px;
}
@media screen and (max-width: 500px){
	#sub_content {
        /* margin: 0px 20px 0px 20px; */
        padding: 0px;
    }
}
/* 상세 */
.sub_content {
  margin-bottom: 80px;
}

.sub_content .title-wrap{
    overflow: hidden;
    border-bottom: 2px solid #212121;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 0;
}

.sub_content .vw-header {
  position: relative;
  border-bottom: 2px #20222d solid;
  padding-bottom: 12px;
}
.sub_content .vw-header>h1 {
  margin-top: 8px;
  font-size: 24px;
  letter-spacing: -0.8px;
}
.sub_content .vw-header>h1 i {
  margin-right: -3px;
}
.sub_content .vw-header>h1>strong {
  margin-left: 5px;
}
.sub_content .vw-header>h1>i>img {
  vertical-align: middle;
  margin-right: -2px;
}
.sub_content .vw-header .ico_aside {
  position: absolute;
  right: 0;
  top: 2px;
}
.sub_content .vw-header .ico_aside>i {
  margin-left: -3px;
}
.sub_content .sub_box {
    padding-top: 30px;
    background: none;
}
.sub_content .sub_box:after {
  content: '';
  display: block;
  clear: both;
}

.sub_content .sub_box>.left {
    float: left;
    width: 35%;
    padding-top: 0;
}
.sub_content .sub_box>.left>.img_box {
    width: 360px;
}
.sub_content .sub_box>.left>.img_box>p {
  position: relative;
}
.sub_content .sub_box>.left>.img_box>.view {
  margin: -3px 0 0 0;
}
.sub_content .sub_box>.left .btns {
  position: relative;
  top: -1px;
}
.sub_content .sub_box>.left .btns .btn {
  margin-right: -5px;
  *margin-right: -7px;
  border: 0;
}
.sub_content .sub_box>.left .btns .btn .icon {
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.sub_content .sub_box>.left .btn-preview {
  width: 102px;
  border-radius: 0px;
  background: #3b4655;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border-top: 1px #505a67 solid;
  border-right: 1px #2f3844 solid;
  font-family: 'Noto Sans KR', dotum;
  letter-spacing: -1px;
}
.sub_content .sub_box>.left .btn-preview:hover {
  background-color: #626b77;
}
.sub_content .sub_box>.left .btn-mobile {
  width: 102px;
  *width: 103px;
  border-radius: 0px;
  background: #606976;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border-top: 1px #808791 solid;
  border-left: 1px #808791 solid;
  font-family: 'Noto Sans KR', dotum;
  letter-spacing: -1px;
}
.sub_content .sub_box>.left .btn-mobile:hover {
  background-color: #808791;
}

@-moz-document url-prefix(){
  .sub_content .sub_box>.left .btn-mobile {
    width: 101px;
  }
  .sub_content .sub_box>.left .btns {
    position: relative;
    top: -3px;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0){
  .sub_content .sub_box>.left .btn-mobile {
    width: 101px;
  }

  ::i-block-chrome,
  .sub_content .sub_box>.left .btn-mobile {
    width: 102px;
  }
}

.sub_content .sub_box>.left .summary {
  *margin-bottom: -10px;
  font-size: 12px;
  font-family: 'Noto Sans KR', '나눔고딕', 'nanum gothic', '맑은 고딕', 'malgun gothic',
    'Nanum Gothic';
  letter-spacing: -1px;
  *padding-bottom: 15px;
  border-bottom: 2px #dddfe2 solid;
}
.sub_content .sub_box>.left .summary>.header {
  position: relative;
  margin-top: 15px;
}
.sub_content .sub_box>.left .summary>.header a {
  position: absolute;
  right: 0;
  top: 0;
}
.sub_content .sub_box>.left .summary p {
  max-height: 130px;
  color: #7a7a7a;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-height: 160%;
  margin: 10px 0 17px;
  -webkit-box-orient: vertical;
  width: 240px;
}
.sub_content .sub_box>.left .grade {
  position: relative;
  background: #dddfe2;
  padding: 15px 12px 10px 12px;
  margin-top: 5px;
}
.sub_content .sub_box>.left .grade>i {
  position: absolute;
  right: -2px;
  top: -2px;
}
.sub_content .sub_box>.left .grade ul {
  *margin-top: -25px;
}
.sub_content .sub_box>.left .grade li {
  font-size: 11px;
  font-family: 'Noto Sans KR', dotum;
  color: #575757;
  margin-bottom: 6px;
  *margin-bottom: 2px;
}

.sub_content .sub_box>.left>.share {
  margin-top: 12px;
  font-size: 11px;
  color: #767676;
  font-family: 'Noto Sans KR', dotum;
  letter-spacing: -1px;
  margin-bottom: 12px;
}
/* /20150401 margin-bottom 추가 */
.sub_content .sub_box>.left>.share img {
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.sub_content .sub_box>.left>.share strong {
  margin-right: 4px;
}

.sub_content .sub_box>.left .training-download {
  display: block;
  width: 100%;
  padding: 9px 0;
  border: solid 1px #ebebeb;
  font-size: 14px;
  text-align: center;
  color: #20222d;
  letter-spacing: -0.2px;
}

.sub_content .sub_box>.center {
  float: left;
  width: 64%;
  margin-left: 10px;
  padding-top: 10px;
}
.sub_content .sub_box>.right {
  float: right;
  width: 190px;
  padding: 18px 15px;
  background: #f4f4f4;
  margin-top: 0;
}
.sub_content .sub_box>.right .best {
  border-bottom: 2px #bfbfbf solid;
  padding: 0 0 15px;
}
.sub_content .sub_box>.right h3 {
  font-family: 'Noto Sans KR', '나눔고딕', 'nanum gothic', '맑은 고딕', 'malgun gothic',
    'Nanum Gothic';
  font-style: normal;
  font-weight: 600;
  color: #575757;
  font-size: 15px;
  letter-spacing: -1px;
}
.sub_content .sub_box>.right .best>.cont {
  color: #7a7a7a;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-height: 150%;
  margin: 10px 0 0;
  -webkit-box-orient: vertical;
  width: 190px;
  letter-spacing: -1px;
  font-size: 12px;
  font-family: 'Noto Sans KR', '나눔고딕', 'nanum gothic', '맑은 고딕', 'malgun gothic',
    'Nanum Gothic';
}
.sub_content .sub_box>.right .best>.rating {
  margin: 6px 0;
  font-family: 'Noto Sans KR', '나눔고딕', 'nanum gothic', '맑은 고딕', 'malgun gothic',
    'Nanum Gothic';
  font-style: normal;
  color: #575757;
  letter-spacing: -1px;
  font-size: 13px;
}
.sub_content .sub_box>.right .best>.rating>.star>.star-state-big {
  position: relative;
  top: -2px;
  margin: 0 2px 0 4px;
}
.sub_content .sub_box>.right .best>.rating strong {
  font-size: 20px;
  color: #da2128;
  font-family: 'Noto Sans KR', '나눔고딕', 'nanum gothic', '맑은 고딕', 'malgun gothic',
    'Nanum Gothic';
  font-style: normal;
  font-weight: 600;
}
.sub_content .sub_box>.right .recobel-course {
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #f4f4f4;
  position: relative;
}
.sub_content .sub_box>.right .recobel-course div {
  background: #f4f4f4;
}
.sub_content .sub_box>.right .recobel-course .img_boxb {
  display: block;
  width: 166px;
  margin: 0 auto;
  padding: 15px 0 5px;
}
.sub_content .sub_box>.right .recobel-course .img_boxb img {
  width: 100%;
  height: 91px;
}
.sub_content .sub_box>.right .recobel-course a {
    font-size: 12px;
    color: #444;
    outline: none;
}
.sub_content .sub_box>.right .recobel-course a .title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sub_content .sub_box>.right .bx-controls {
    height: 30px;
}
.sub_content .sub_box>.right .bx-controls .bx-controls-direction {
    position: absolute;
    bottom: 17px;
    *bottom: 30px;
    right: 12px;
    width: 30px;
    float: right;
}

.sub_content .sub_box>.right .bx-controls .bx-controls-direction .bx-next {
    background-position: -14px 0;
}
.sub_content .sub_box>.right .recobel-course .bx-paging {
    font-size: 12px;
    position: absolute;
    bottom: 16px;
    right: 48px;
}

.sub_content .sub_box>.left>.img_box>a {
    display: block;
    padding: 10px 0 10px 0;
    position: relative;
    overflow: hidden;
}

.sub_content .sub_box>.left>.img_box>a::after {
    position: absolute;
    right: 5px;
    bottom: 14px;
    width: 42px;
    height: 42px;
    background: url(../img/ncs/play.png) no-repeat 0;
    content: '';
}
.sub_content .sub_box>.left>.img_box img {
  width: 100%;
  height: auto;
  vertical-align: top;
  border-radius: 5px;
}

.sub_content .sub_box>.center .lecture_box {
  padding: 20px 20px;
  border: 1px solid #ebebeb;
}
.sub_content .sub_box>.center .lecture_detail th,
.sub_content .sub_box>.center .lecture_detail td {
  padding: 13.7px 3px;
  border-bottom: 0;
  font-size: 14px;
}
.sub_content .sub_box>.center .lecture_detail th {
    text-align: left;
    font-weight: 400;
    color: #737378;
}
.sub_content .sub_box>.center .lecture_detail td {
  color: #20222d;
}

.sub_content .sub_box>.center .lecture_detail .price th,
.sub_content .sub_box>.center .lecture_detail .price td {
  color: #ee3f3f;
}
.sub_content .sub_box>.center .lecture_detail .price td {
  font-size: 14px;
  letter-spacing: -0.9px;
}
.sub_content .sub_box>.center .lecture_detail .place {
  line-height: 1.6;
}
.sub_content .sub_box>.center .line { display: inline-block; width: 1px; height: 14px; background-color: #dfdfdf; vertical-align: middle;}




/* 버튼 */
.btn-enroll{font-weight: 600; cursor: pointer; transition: all 0.3s ease-in-out; display:block; font-size: 16px; width:100%; background: #ee3f3f; border: solid 1px #e0e0e0; color: #fff; padding: 15px 0;  width: calc(100% / 2 - 2px); margin: 10px 0 0 0; display: inline-block;font-family: 'NotoSansKR','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum';}
.btn-cart{font-weight: 600; cursor: pointer; transition: all 0.3s ease-in-out; display:block; font-size: 16px; width:100%; background: #fff; color: #464646; border: solid 1px #e0e0e0;  padding: 15px 0; width: calc(100% / 2 - 2px); margin: 10px 0 0 0; display: inline-block;font-family: 'NotoSansKR','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum';}
.btn-naeil_enroll{font-weight: 600; cursor: pointer; transition: all 0.3s ease-in-out; display:block; font-size: 16px;width:100%; background: #ee3f3f; border: solid 1px #e0e0e0; color: #fff; padding: 15px 0;  margin: 10px 0 0 0; display: inline-block;font-family: 'NotoSansKR','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum';}
.btn-cart_enroll{font-weight: 600; cursor: pointer; transition: all 0.3s ease-in-out; display:block; font-size: 16px;width:100%; background: #fff; border: solid 1px #e0e0e0; color: #464646; padding: 15px 0;  margin: 10px 0 0 0; display: inline-block;font-family: 'NotoSansKR','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum';}

.btn-enroll:hover { background:#4c61b5; color:#fff; }
.btn-cart:hover { border:1px solid #ee3f3f; color:#ee3f3f; }
.btn-naeil_enroll:hover { background:#4c61b5; color:#fff; }
.btn-cart_enroll:hover { border:1px solid #ee3f3f; color:#ee3f3f; }

/* 상세페이지 학습기간 */
#class_id{border: 1px solid #bdbdbd;background-color: #fff; color: #9e9e9e; width: 100%; height: 38px;padding: 5px; margin-right: 4px; display: block; float: left;font-size: 17px;  border-radius: 4px;padding: 0 15px;}
#course_type {font-family: 'NotoSansKR','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum'; width: 280px; height: 32px; padding: 0 24px 0 10px; border: 1px solid #dfdfdf; border-radius: 4px; background: url(../img//icon_select.png) no-repeat right 10px center; -webkit-appearance: none; -moz-appearance: none; appearance: none;}

/* 상세페이지 하단 */
/* tbl */
.tbl thead th {font-size: 17px; color:#222;padding: 1.1em 0.5em;border-right: 1px solid #e1e1e1;border-bottom: 1px solid #e1e1e1;background: #f7f7f7;font-weight:bold;line-height: 1.3;}
.tbl tbody th,.tbl tfoot th,.tbl td {padding: 1em;font-size:0.95em;border-right: 1px solid #e1e1e1;border-bottom: 1px solid #e1e1e1;text-align:center;background:#fff;}
.tbl caption {font-size: 20px; font-weight: bold; line-height: 1.6; text-align: left; color: #212121; margin-bottom: 10px;}
.tbl tr td:last-child {border-right: none; max-width: 100px; overflow: auto; white-space: nowrap;}
.tbl tr td .txt_right {  padding: 0.5em; }
.tbl tr td .txt_right {  padding: 0.5em; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.tbl tbody th{color:#222;background: #f7f7f7; }
.tbl tfoot th, .tbl  tfoot td {background-color: #626776;color: #fff;border-bottom: 1px solid #626776;border-right: 1px solid #525764;}
.tbl tfoot td {background-color: #787c89}
.tbl thead th:last-child,.tbl tfoot th:last-child,.tbl tbody th:last-child{border-right:none;}
.tbl tbody.tL td,.tbl td ul {text-align:left;}
.tbl th.line,.tbl td.line{border-right:1px solid #e1e1e1 !important;}
.tbl.tbl_sm {border: 1px solid  #e1e1e1; border-bottom: none; font-size: .852em}
.tbl.tbl_sm th{padding: .7em 0;}
.tbl.tbl_sm td{padding: .4em 0}
.tbl thead th .txt_sm{ color:#222; font-weight: 400;}

@media only screen and (max-width:768px){
    .ttl03 + .text_indent { padding-left:15px;}
    .tbl_white{ margin-bottom: 15px;}	
    .tbl thead th, .tbl th, .tbl td,
    .tbl_white thead th, .tbl_white th, .tbl_white td,
    .tbl_left thead th, .tbl_left th, .tbl_left td{ padding:0.65em 0.5em;}
    .sub_content .sub_box>.center .lecture_box { padding: 10px 10px;}
}

@media only screen and (max-width:300px){
    .tbl tbody th, .tbl tfoot th, .tbl td{ padding:0em;}
    .tbl thead th, .tbl th, .tbl td,
    .tbl_white thead th, .tbl_white th, .tbl_white td,
    .tbl_left thead th, .tbl_left th, .tbl_left td{ padding:0em;}
}
@media (max-width:1200px){
    .sub_content .sub_box>.left>.img_box { width: 100%; height: 100%;}
    .sub_content{ width: 90%; margin: 20px auto;}
    .sub_content .sub_box>.left { float: left; width: 100%; padding-top: 0;}
    .sub_content .sub_box>.center{ float: left; width: 100%; margin-left: 0px; padding-top: ;}
}

.tab_bottom{ text-align: center;}
.tab_bottom > a{ min-width: 100px; height: 40px; padding: 7px 20px; border: 0; vertical-align: top; color: #ffffff; font-size: 17px; text-align: center; background: #333333; cursor: pointer; border-radius: 4px;}
.tab_bottom > a:hover { background:#4c61b5; color:#fff; }

.datebox{font-family: 'NotoSansKR','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum'; width: 280px; height: 32px; padding: 0 24px 0 10px; border: 1px solid #dfdfdf; border-radius: 4px; appearance: none; font-size: 15px;}
.start_box input{
    background: url(../img/ncs/calendar.png) no-repeat right 10px center;
}
@media (max-width:500px){
    #course_type {width: 100%;}
    .datebox {width: 100%;}
}

/* lecture css */
.picker_img{ top: 10px; position: relative;  }
.line{ display: inline-block; width: 1px; height: 14px;vertical-align: middle;}
.dday{ color: #ee3f3f; letter-spacing: 0; font-weight: 700;}
.desc01 { /* 강조 */ background: url(../adm/images/dot_blue.gif) no-repeat left -1px; background-position: left; font-size: 11px; color: #999999; padding-left: 7px; margin-left: 5px; letter-spacing: -1px;}
.tab_menu{width: 100%; margin: 44px auto 0px; display: table; table-layout: fixed}
.tab_menu.fixed{position: fixed; top: 100px; left: 0}
.tab_menu.fixed + #tab_con1{margin-top: 200px}
.tab_menu li{height: 40px; line-height: 40px; border: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; border-left: 0; display: table-cell; position: relative; color: #777777; font-size: 14px; text-align: center; background-color: #f4f4f4; cursor: pointer}
.tab_menu li:first-child{border-left: 1px solid #d3d3d3;}
.tab_menu li:hover{background-color: #d3d3d3}
.tab_menu li.on{border-color: #e9e9e9; border-bottom-color: #ffffff; color: #1b2a4c; background-color: #ffffff}
.tab_menu li.on:before{content: ''; height: calc(100% + 1px); border-left: 1px solid #e9e9e9; position: absolute; left: -1px}
.tab_menu li a{color: #777777; display: block}
.tab_menu li a:hover,
.tab_menu li a:focus,
.tab_menu li a:visited{font-weight: 400}
.tab_menu li.on a{color: #1b2a4c}
.tab_con .tL{text-align: left;}
.box{padding-bottom: 5px;}
.box_span{ line-height: 26px; padding: 0px 8px; margin-right: 5px; border-radius: 14px;border: 1px solid rgb(189, 189, 189) !important; background-color: rgb(255, 255, 255); font-size: 12px; color: rgb(117, 117, 117); margin-left: 3px;  cursor: pointer;}
.box_span_pk{ font-weight: 700; padding: 0px 8px !important; vertical-align: bottom; border-radius: 14px; border: 1px solid rgb(189, 189, 189) !important; background-color: rgb(255, 255, 255) !important; font-size: 10px !important; color: rgb(117, 117, 117) !important; margin-left: 8px; cursor: pointer;}
.arrow_box {display: none;  position: absolute; z-index: 9999; line-height: 20px; padding: 10px; border-radius: 8px;  box-shadow: 0 3px 9px rgba(0, 0, 0, .5);  background: #fff; }
.box:hover + p.arrow_box {display: block;}
/*  */
.me_search{background-color:#edf3ff}
.me_search .me_text{color: rgb(33, 33, 33); padding: 130px 0px; font-size: 20px; font-weight: 700; text-align: center;}
.me_class{}
.me_class .me_text{color: rgb(33, 33, 33); padding: 60px 100px 100px 100px; font-size: 20px; font-weight: 700; text-align: center; border-bottom: 1px solid #d3d3d3;}
.me_order_list .me_text{color: rgb(33, 33, 33); padding: 100px 0px; font-size: 20px; font-weight: 700; text-align: center;}

[type="radio"] {
    margin: 0px;
    vertical-align: sub;
    appearance: none;
    border: max(2px, 0.1em) solid gray;
    border-radius: 50%;
    width: 1.25em;
    height: 1.25em;
    transition: border 0.1s ease-in-out;
}

[type="radio"]:checked {
    border: 0.4em solid #ee3f3f;
}

[type="radio"]:focus-visible {
    outline-offset: max(2px, 0.1em);
    outline: max(2px, 0.1em) dotted #ee3f3f;
}

[type="radio"]:hover {
    box-shadow: 0 0 0 max(4px, 0.2em) lightgray;
    cursor: pointer;
}

[type="radio"]:disabled {
    background-color: lightgray;
    box-shadow: none;
    opacity: 0.7;
    cursor: not-allowed;
}

[type="radio"]:disabled + span {
    opacity: 0.7;
    cursor: not-allowed;
}