@charset "utf-8";

@import url("base.css");
@import url("ctl_contents.css");

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 공통 - UI 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#skip_navi {display:none;}
body {background-color:#fff;}
#wrapper {background-repeat:no-repeat; background-position:center top; box-sizing: border-box;}

.header_pos {width:100%; min-width:320px; position:relative; z-index:90;}

.base_width {margin:0 auto; width:1400px; position:relative;}
/* 데스크탑 */
@media all and (max-width:1400px){      
      .base_width {width:100%;}
}

.header .base_width {height:80px; text-align:center; position:relative;}
.header h1.logo {width:200px; height:80px; line-height:80px; font-size:0; text-indent:-10000; background:url('../../images/CC/common/05/logo.png') no-repeat left center;
position:absolute; left:0; top:0; z-index:0;}

/* 데스크탑 */
@media all and (max-width:1400px){
      .header {padding:0 10px; width:100%; box-sizing:border-box;}
}

/* 태블릿 */
@media all and (max-width:1024px){
      .header {width:100%;}
}
@media all and (max-width:768px){
      .header {height:50px;}
      .header .base_width {height:50px;}
      .header h1.logo,
      .header.fixed h1.logo {width:200px; height:50px; line-height:50px;}

      h1.logo {margin-top:0; height:50px; line-height:50px;}
      h1.logo img {height:25px;}
}

/* 모바일 */
@media all and (max-width:640px){
}

.header_top {border-bottom:solid 1px #ccc; /*background: linear-gradient(to right, #7fbc03, #0086c5);*/}
.header_top .base_width {display:flex; justify-content:space-between;}
.header_top .left {padding:9px 0;}
.header_top .left a {color:#333;}
.header_top .left a i {color:#333; font-size:12px;}

.header_top .right ul {display:flex; align-items:center;}
.header_top .right ul>li {display:inline-block; padding-left:5px; padding-right:5px; box-sizing:border-box;}

.header_top .right ul>li.user_area {padding-top:7px; position:relative;}      
.header_top .right ul>li.user_area .before a.btn_login_utill {display:inline-block; margin-left:10px; padding:0 10px; height:24px; line-height:24px; color:#333; font-size:13px; border:solid 1px #999; border-radius:24px;}
.header_top .right ul>li.user_area .before a.btn_login_utill:hover {color:#333; border:solid 1px #333;}
.header_top .right ul>li.user_area .before a.btn_login_utill:first-child {margin-left:0;}

.header_top .right ul>li.user_area .after a.btn_login_user {color:#333; font-size:13px;}

.header_top .right ul>li a.btn_go_search {display:block;margin:0 3px;margin-left:9px;width:19px;height:40px;line-height:40px;font-size:0;text-indent:-10000px;border-left:none;background:url('../../images/CC/icon/icon_top_search.png') no-repeat center center;}

.user_info_pop {width:160px; background-color:#fff; border:solid 1px #aaa; border-radius:10px; overflow:hidden;
      position:absolute; top:36px; right:-1px; z-index:100;
      box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.40);}
.user_info_pop ol {}
.user_info_pop ol li {text-align:left; border-bottom:solid 1px #ddd;}
.user_info_pop ol li a {display:block; padding:10px; line-height:1.2; color:#666;}
.user_info_pop ol li a i {margin-right:10px; font-size:12px; color:#999;}
.user_info_pop ol li a:hover {color:#006940; background-color:#e3f3ed;}
.user_info_pop ol li a:hover i {color:#006940;}

.user_info_pop .authority_select {padding:10px 10px; background-color:#fff;}
.user_info_pop .authority_select:last-child {padding:10px 10px 5px;}
.user_info_pop .authority_select select {margin-bottom:5px; width:100%; color:#333; font-size:12px; border:solid 1px #999; border-radius:5px;}

/* 데스크탑 */
@media all and (max-width:1400px){
      .header_top .base_width {width:initial; margin:0 10px;}
}
/* 태블릿 */
@media all and (max-width:1024px){}
@media all and (max-width:768px){
      .header_top {display:none;}
      .header_top .base_width {display:block;}
      .header_top .left {display:none;}
      .header_top .right {text-align:right;}
      .header_top .right ul>li {display:inline-block; text-align:left;}
}
/* 모바일 */
@media all and (max-width:640px){}

/* 검색 팝업 ///////////////////////////////////////////////////////////////////////*/
.search_pop {width:600px; font-size:16px; line-height:1.4; /*border:solid 1px #cccccc;*/ border-bottom:none; background-color:#fff; position:absolute; top:40px; right:0; z-index:10;
      -webkit-box-shadow: 0px 2px 7px 2px rgba(0,0,0,0.20);
      -moz-box-shadow: 0px 2px 7px 2px rgba(0,0,0,0.20);
      box-shadow: 0px 2px 7px 2px rgba(0,0,0,0.20);
}
.search_pop .search_input .outline {display:table; width:100%; height:58px;}
.search_pop .search_input .outline .div_select {display:table-cell; width:120px; padding:0 10px; vertical-align:middle;}
.search_pop .search_input .outline .div_select select {width:100%; height:30px; font-size:14px; border:solid 1px #ccc;}

.search_pop .search_input .outline .div_input {display:table-cell; padding-right:20px; vertical-align:middle;}
.search_pop .search_input .outline .div_input .input_search_box {padding-right:40px; height:28px; border:solid 1px #ccc; position:relative;}
.search_pop .search_input .outline .div_input .input_search_box input {float:left; width:100%; height:28px; text-align:left; border:none;}
.search_pop .search_input .outline .div_input .input_search_box button.btn_search {float:right; width:40px; height:28px; line-height:28px; font-size:0; text-indent:-10000px; background:url('../../images/CC/icon/icon_top_search.png') no-repeat center center; position:absolute; top:0; right:0;}

.search_pop .search_input .outline .div_close {display:table-cell; padding:0; width:50px; vertical-align:middle; text-align:center; /*border-left:solid 1px #ccc;*/ background-color:#f5f5f5;}
.search_pop .search_input .outline .div_close a.btn_search_pop_close {display:inline-block; width:58px; height:58px; line-height:58px; font-size:0; text-indent:-10000px; background:url('../../images/CC/icon/btn_alarmpop_close.png') no-repeat center center;}

.search_pop .search_result {border-top:solid 1px #f5f5f5; padding: 10px;}
.search_pop .search_result .list_scroll {height:307px; overflow-y:auto;}

table.table_search_basic {width:100%; font-size:16px; background-color:#fff;
      word-break:keep-all;
  white-space:-moz-pre-wrap;
  white-space:-pre-wrap;
  white-space:-o-pre-wrap;
  word-wrap:break-word;
}
table.table_search_basic thead th {padding:0 5px; height:30px; color:#333333; font-weight:normal; border-left:solid 1px #ddd; border-bottom:solid 1px #ddd; border-top:none; background-color:#e6e6e6;}
table.table_search_basic thead th:first-child {border-left:none;}
table.table_search_basic tbody th {padding:0 5px; height:45px; color:#333333; font-weight:normal; border-left:solid 1px #ddd; border-bottom:solid 1px #ddd; background-color:#e6e6e6;}
table.table_search_basic tbody th:first-child {border-left:none;}
table.table_search_basic tbody td {padding:0 5px; height:45px; font-size:14px; text-align:center; border-left:solid 1px #ddd; border-bottom:solid 1px #ddd;}
table.table_search_basic tbody td:first-child {border-left:none;}

@media all and (max-width:640px){   
      .search_pop {width:100%; font-size:14px; line-height:1.4;} 
      .search_pop .search_input .outline .div_select {width:80px;}
      table.table_search_basic {width:650px; font-size:16px;}
}


/* 대메뉴 */
.gnbarea {display:inline-block; float:right; margin-right:50px;}
.gnbarea ul.gnb {height:80px;}
.gnbarea ul.gnb>li {float:left; position:relative;}
.gnbarea ul.gnb>li a.title {display:block; padding:0 20px; height:80px; line-height:80px; color:#333; font-size:18px;}
.gnbarea ul.gnb>li a.title:hover, ul.gnb>li a.title.active {color:#fff; background-color:#3c60a6 ;}

@media all and (max-width:1024px){
      .gnbarea {display:none;}
}

.gnbarea ul.gnb>li .submenu {min-width:170px; background-color:#fff; border:solid 1px #ccc; border-top:solid 3px #3c60a6 ; position:absolute; top:80px; left:0; opacity:0;
      box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.20);
      -webkit-border-radius:0 0 5px 5px;
      -moz-border-radius:0 0 5px 5px;
      -o-border-radius:0 0 5px 5px;
      border-radius:0 0 5px 5px;
}
.gnbarea ul.gnb>li .submenu ul {}
.gnbarea ul.gnb>li .submenu ul li a {display:block; padding:15px 20px; color:#333; text-align:left; border-top:solid 1px #ccc; white-space:nowrap;}
.gnbarea ul.gnb>li .submenu ul li:first-child a {border-top:none;}
.gnbarea ul.gnb>li .submenu ul li a:hover {color:#3c60a6 ; background-color:#fff;}


/* 헤더 : 전체메뉴 */
.totalmenu_li {position:absolute; top:0; right:10px; z-index:0;}
.totalmenu_li ul {display:table; height:80px;}
.totalmenu_li ul li {display:table-cell;}
.totalmenu_li ul>li {padding-left:20px; vertical-align:middle;}
.totalmenu_li ul>li a.btn_totalmenu {display:block; padding:2px 0;}
.totalmenu_li ul>li a.btn_totalmenu span {display:block; margin:5px 0; width:20px; height:2px; background-color:#333;  transition: all 0.5s;}
.totalmenu_li ul>li a.btn_totalmenu span:nth-child(2) {width:13px;}
.totalmenu_li ul>li a.btn_totalmenu:hover span:nth-child(1) {width:13px;}
.totalmenu_li ul>li a.btn_totalmenu:hover span:nth-child(2) {width:20px;}

/* 사이드 메뉴 버튼 */
.btn_sidemenu {display:none;}

/* 테스크탑 */
@media all and (max-width:1200px){
}
@media all and (max-width:1024px){
      .totalmenu_li {display:none;}
      a.btn_sidemenu {display:inline-block; width:30px; height:24px; line-height:0; text-align:center; position:absolute; top:50%; right:5px; margin-top:-12px;}
      a.btn_sidemenu span {display:inline-block; margin:3px 0;  width:100%; height:2px; background-color:#333;}
}
/* 테블릿*/
@media all and (max-width:768px){
      a.btn_sidemenu {margin-top:-12px;}
}
/* 모바일*/
@media all and (max-width:640px){   
      a.btn_sidemenu {margin-top:-8px; padding:0 5px; box-sizing:border-box; right:0;}
      a.btn_sidemenu span {margin:2px 0;}
}

/* 모바일 사이드 메뉴 */
.gnbarea_mobile {position:fixed; top:0; right:-300px; width:300px; height:100vh; height:100%; background-color:#fff; z-index:300;}
.gnbarea_mobile .outline {padding-bottom:70px; height:100vh; height:100%; overflow-y:auto; box-sizing:border-box;}
.gnbarea_mobile .self_info_area {position:relative; background-color:#f5f5f5;}
.gnbarea_mobile .self_info_area .login_before {padding:40px 0;}
.gnbarea_mobile .self_info_area .login_before .func_area {}
.gnbarea_mobile .self_info_area .userinfo_header {text-align:center;}
.gnbarea_mobile .self_info_area .userinfo_header .user_photo {display:inline-block; margin-bottom:10px; padding:0 !important; vertical-align:middle; width:30px; height:30px; background:url('../../images/ctl/sidemenu/icon_user.png') no-repeat center center;}
.gnbarea_mobile .self_info_area .userinfo_header .user_name {display:inline-block; padding-left:5px; vertical-align:middle;}
.gnbarea_mobile .self_info_area .userinfo_header .user_name strong {margin-right:5px; color:#000; font-size:20px; font-weight:normal; vertical-align:middle;}
.gnbarea_mobile .self_info_area .func_area {padding-left:5px; text-align:center;}
.gnbarea_mobile .self_info_area .func_area a {display:inline-block; margin-right:10px; color:#333; font-weight:600;}
.gnbarea_mobile .self_info_area .func_area a.btn_login_mobile {display:inline-block; padding:0 20px 0 50px; height:40px; line-height:40px; font-size:18px; font-weight:normal; background:url('../../images/ctl/sidemenu/icon_touch.png') no-repeat 20px center #fff;
      -webkit-border-radius:50px; -moz-border-radius:50px; -o-border-radius:50px; border-radius:50px;
      -webkit-box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.40);
      -moz-box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.40);
      box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.40);
}

.gnbarea_mobile .self_info_area .login_after {padding:20px 0;}
.gnbarea_mobile .self_info_area .func_area a.btn_lectureroom_mobile {display:inline-block; padding:0 40px 0 70px; height:40px; line-height:40px; font-size:18px; font-weight:normal; color:#fff; background:url('../../images/ctl/sidemenu/icon_learn.png') no-repeat 40px center #701e20;
      -webkit-border-radius:50px; -moz-border-radius:50px; -o-border-radius:50px; border-radius:50px;
      -webkit-box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.40);
      -moz-box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.40);
      box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.40);
}

.gnbarea_mobile .self_info_area .btn_sidemenu_close {display:inline-block; font-size:0; text-indent:-1000px; width:50px; height:50px; background:url('../../images/ctl/icon_sidemenu_close.png') no-repeat center center; position:absolute; top:10px; right:0;}


/* 모바일 로그인 영역 */
.logo_mobile {padding:15px;}
.logo_mobile img {max-width:100%;}
.loginbox_mobile {padding:30px 15px; border-bottom:solid 3px #f2f2f2; background-color:#fff;}
.loginbox_mobile .login_tab {margin-bottom:20px;}
.loginbox_mobile .login_tab ul {overflow:hidden;}
.loginbox_mobile .login_tab ul li {display:block; color:#333; font-size:16px; text-align:center; height:30px; font-weight:normal; border-bottom:solid 3px #ccc;}

.loginbox_mobile .total_box {}
.loginbox_mobile .total_box .login_ment {padding-top:10px; padding-left:25px; text-indent:-13px;}

.loginbox_mobile .btn_main_login {width:100%; height:42px; font-size:16px; color:#333; border:solid 2px #333; background-color:transparent; border-radius:50px; transition: all 0.3s; position:relative; top:0;}

.loginbox_mobile .normal_box {}
.loginbox_mobile .normal_box input[type="text"],
.loginbox_mobile .normal_box input[type="password"] {padding-left:35px; margin-bottom:10px; width:100%; height:40px; color:#fff; box-sizing:border-box; border:none; border-bottom:solid 1px #ccc; transition: all 0.5s;}
.loginbox_mobile .normal_box input[type="text"]:focus,
.loginbox_mobile .normal_box input[type="password"]:focus {border-bottom:solid 1px #333;}
.loginbox_mobile .normal_box input::placeholder {color:#333;}
.loginbox_mobile .normal_box .input_id {background:url('../../images/ctl/main/icon_login_id_m.png') no-repeat 10px 9px;}
.loginbox_mobile .normal_box .input_pw {background:url('../../images/ctl/main/icon_login_pw_m.png') no-repeat 10px 9px;}
.loginbox_mobile .normal_box .func {padding-bottom:20px; text-align:right;} 
.loginbox_mobile .normal_box .func input[type="checkbox"] {border:none;}


.loginbox_mobile .pc_userinfo {padding:5px 0; border-bottom:solid 1px #f2f2f2; position:relative;}
.loginbox_mobile .pc_userinfo .user_txbox {padding:5px 0 5px 35px; line-height:1.2; vertical-align:middle; color:#333; background:url('../../images/icon/icon_user_on.png') no-repeat left center;}
.loginbox_mobile .pc_userinfo .user_txbox strong {font-size:16px; color:#333;}

.loginbox_mobile .after .selectbox {padding:10px 5px; border-bottom:solid 1px #f2f2f2;}
.loginbox_mobile .after .selectbox select {width:100%; border-radius:5px;}

.loginbox_mobile .after .bottom {padding-top:10px}
.loginbox_mobile .after .bottom button.btn_main_login {width:100%; height:46px; font-size:16px; background-color:#ffb400; border-radius:50px; transition: all 0.5s;}
.loginbox_mobile .after .bottom button.btn_main_login:hover {color:#333; background-color:#f2f2f2;}

.loginbox_mobile .after .bottom button.btn_myclass {width:100%; height:42px; font-size:16px; color:#333; border:solid 2px #333; background-color:transparent; border-radius:50px; transition: all 0.3s; position:relative; top:0;}


/* 모바일 메뉴 */
ul.gnb_mobile {margin:0 10px; border-top:solid 1px #fff;}
ul.gnb_mobile>li {border-bottom:solid 1px #f2f2f2; }
ul.gnb_mobile>li a.title {display:block; padding:10px 15px; color:#333; font-size:16px; position:relative;}
ul.gnb_mobile>li a.title i {color:#999; font-size:20px; font-weight:normal; position:absolute; top:calc(50% - 15px); right:10px; transition: all 0.3s ease-out;}
ul.gnb_mobile>li a.title.active {color:#3c60a6;}
ul.gnb_mobile>li a.title.active i {color:#3c60a6; transform:rotate(180deg);}
ul.gnb_mobile>li .submenu {padding:0 10px 10px; background-color:#fff;}
ul.gnb_mobile>li .submenu>ul {}
ul.gnb_mobile>li .submenu>ul>li>a {display:block; padding:0 20px 0 30px; height:35px; line-height:35px; color:#333; border-top:solid 1px #fff; position:relative;}
ul.gnb_mobile>li .submenu>ul>li>a::after {display:block; content:''; width:5px; height:2px; background-color:#999; position:absolute; top:calc(50% - 2px); left:15px;}
ul.gnb_mobile>li .submenu>ul>li:first-child>a {border-top:none;}
ul.gnb_mobile>li .submenu>ul>li>a:hover {background-color:#f2f2f2;}

ul.gnb_mobile>li .submenu>ul>li ol.depth3 {padding:0 10px 10px; /*background-color:#f2f2f2;*/}
ul.gnb_mobile>li .submenu>ul>li ol.depth3>li {border-bottom:solid 0px #ebebeb;}
ul.gnb_mobile>li .submenu>ul>li ol.depth3>li a {display:block; padding:3px 15px; color:#3c3c3c; font-size:13px;}
ul.gnb_mobile>li .submenu>ul>li ol.depth3>li.active a {color:#3c60a6;}
ul.gnb_mobile>li .submenu>ul>li ol.depth3>li:hover a {color:#3c60a6; text-decoration:underline;}


.modal_screen_sidemenu {width:100%; height:100%; background-color:rgba(0,0,0,0.7); position:fixed; top:0; left:0; z-index:150;}

.gnbarea_mobile .bottom_func {width:100%; height:50px; border-top:solid 1px #e2e2e2; background-color:#f5f5f5; position:absolute; bottom:0; left:0;}
.gnbarea_mobile .bottom_func ul {overflow:hidden;}
.gnbarea_mobile .bottom_func ul li {float:left; width:100%; text-align:center;}
.gnbarea_mobile .bottom_func ul li a {display:block; height:50px; line-height:50px; color:#555555; border-left:solid 1px #ebebeb; border-right:solid 1px #fff;}
.gnbarea_mobile .bottom_func ul li a span {display:inline-block; vertical-align:middle;}
.gnbarea_mobile .bottom_func ul li:first-child a {border-left:none;}
.gnbarea_mobile .bottom_func ul li:last-child a {border-right:none;}
span.icon_modify {display:inline-block; width:15px; height:15px; vertical-align:middle; margin-right:5px; background:url('../../images/ctl/sidemenu/icon_modify.png') no-repeat center center;}
span.icon_power {display:inline-block; width:15px; height:15px; vertical-align:middle; margin-right:5px; background:url('../../images/ctl/sidemenu/icon_power.png') no-repeat center center;}


/*///////////////////////////////////////////////////////////////////////////////////////////////
 로그인
 ///////////////////////////////////////////////////////////////////////////////////////////////*/
 .login_page_bg {background-color:#3d4455;}
 .login_page {margin:0 auto; padding:10px; width:790px; box-sizing:border-box; background-color:#fff; border-radius:10px;
      position:absolute; top:calc(50% - 250px); left:50%; margin-left:-395px;}
.login_page .outline {display:table; width:100%; height:500px;}
.login_page .outline .thum {display:table-cell; width:335px; background:url('../../images/ctl/login_img.png') no-repeat center center #333; background-size:cover; border-radius:3px; box-sizing:border-box;}

.login_box {display:table-cell; padding:0 30px; text-align:center; vertical-align:middle; box-sizing:border-box;}
.login_box .inner_box {padding:40px 0; margin:0 auto; width:300px;}
.login_box h2 {padding:5px 0 10px; text-align:center; font-size:24px; color:#666666;}
.login_box h2 img {vertical-align:middle;}
.login_box h2 span {display:inline-block; margin-left:10px; padding-left:15px; vertical-align:middle; position:relative;}
.login_box h2 span:after {display:block; content:''; width:1px; height:18px; background-color:#ccc; clear:both; position:absolute; top:calc(50% - 9px); left:0;}

.login_ment {margin-bottom:5px;}

.login_box button.btn_login {width:100%; height:38px; font-size:16px; color:#fff; background-color:#3c60a6; border-radius:30px;}
.login_box button.btn_login:hover {background-color:#2f4f8f;}
.login_box input[type="text"] {margin-bottom:13px; padding-left:20px; width:100%; height:38px; font-size:16px; color:#999999; border-radius:38px; color:#333; background:url('../../images/login/icon_email.png') no-repeat 15px center #efefef; border:none; box-sizing:border-box;}
.login_box input[type="password"] {margin-bottom:13px; padding-left:20px; width:100%; height:38px; font-size:16px; color:#999999; border-radius:38px; color:#333; background:url('../../images/login/icon_key.png') no-repeat 15px center #efefef; border:none; box-sizing:border-box;}

.login_box .func_area {padding:15px 10px; text-align:right;}
.login_box .func_area a {display:inline-block; padding:0 10px; line-height:1; font-weight:600; color:#666; letter-spacing:-1px;}
.login_box .func_area a:hover {color:#000;}

 .login_guide {padding-top:15px; text-align:left; border-top:solid 1px #ccc;}
 .login_guide ul {}
 .login_guide ul li {padding-left:15px; font-size:12px; color:#666; position:relative;}
 .login_guide ul li::after {display:block; content:'-'; position:absolute; left:0; top:0px;}

/* 테블릿*/
@media all and (max-width:820px){
      .login_page {width:96%; left:2%; margin-left:0;}
      .login_page .outline .thum {width:335px;}      
}

@media all and (max-width:640px){
      .login_page .outline .thum {display:none;}
      .login_box {padding:0; box-sizing: border-box;}      
}
/* 모바일*/
@media all and (max-width:480px){   
      .login_page {width:90%; left:5%;}
      .login_page .outline {height:initial;}
      .login_box .inner_box {width:300px;}      
}
@media all and (max-width:400px){   
      .login_box {padding:0;}
      .login_ment {letter-spacing:-1px;}
      .login_box .inner_box {padding:20px 0; width:280px; box-sizing: border-box;}
}

@media all and (max-width:360px){   
      .login_box .inner_box {padding:20px 10px; width:100%;}
}



/* 전체메뉴 //////////////////////////////////////////////////////////////////////////////////////////////////////*/
.totalmenu_box {display:grid;  padding:100px; box-sizing:border-box; width:100%; height:100%; overflow-y:auto; position:fixed; top:0; left:0; z-index:1000; background-color:#fff;;
      -webkit-box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.40);
      -moz-box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.40);
      box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.40);
}

.totalmenu_box .row_totalmenu_outline {display:grid; grid-template-columns:300px auto; padding:100px; box-sizing:border-box; width:100%; height:100%;}

.menu_title {margin-right:30px; padding:30px 50px 30px 0; line-height:1.2; box-sizing:border-box; position: relative; border-right:solid 1px #ccc;}
.menu_title h3.totalmenu_logo {margin-bottom:10px; font-size:0; text-indent:-10000px; width:100%; height:40px; background: url('../../images/common/logo.png') no-repeat left center;}
.menu_title img {display:block; padding-bottom:10px;}
.menu_title strong {display:block; font-size:30px; letter-spacing:-1px; color:#333;}
.menu_title span {display:block; font-size:15px; color:#999;
      word-break:keep-all;
      white-space:-moz-pre-wrap;
      white-space:-pre-wrap;
      white-space:-o-pre-wrap;
      word-wrap:break-word;}

a.btn_totalmenu_close {position:absolute; right:100px; top:50px;}
a.btn_totalmenu_close i {font-size:40px; color:#999;}
a.btn_totalmenu_close:hover i {color:#3c60a6; transition: all 0.1s;}

ul.totalmenu_list {display:grid; padding-top:30px; box-sizing:border-box; grid-template-columns: repeat(5, 1fr);}
ul.totalmenu_list>li {padding:0 20px 20px; box-sizing:border-box;}
ul.totalmenu_list>li .outline {}
ul.totalmenu_list>li .title {width:100%;}
ul.totalmenu_list>li .title strong,
ul.totalmenu_list>li .title a {display:block; font-weight:600; font-size:20px; color:#000; line-height:1.2;}
ul.totalmenu_list>li .title a:hover {color:#3c60a6;}

ul.submenulist {padding:10px 0;}
ul.submenulist li {padding:2px 10px;}
ul.submenulist li a {padding-left:15px; font-size:16px; color:#999; position:relative;}
ul.submenulist li a:after {content: '-'; display:block; font-size:17px; position:absolute; top:-5px; left:0;}
ul.submenulist li a:hover {color:#3c60a6;}

@media all and (max-width:1400px){
      .totalmenu_box {padding:100px 30px; grid-template-columns:200px auto;}
      .menu_title {margin-right:0; padding:30px 30px 0 0;}
      .menu_title img {height:30px;}
      .menu_title strong {font-size:24px;}

      a.btn_totalmenu_close {right:30px;}

      ul.totalmenu_list {grid-template-columns: repeat(4, 1fr);}
      ul.totalmenu_list>li .title strong,
      ul.totalmenu_list>li .title a {font-size:20px;}

      ul.submenulist {padding:7px 0;}
      ul.submenulist li {padding:3px 7px;}
      ul.submenulist li a {display:block; padding-left:15px; font-size:16px;}
      ul.submenulist li a:after {content: '-'; display:block; font-size:17px; position:absolute; top:-2px; left:0;}
}

/* 테스크탑 */
@media all and (max-width:1200px){
}
@media all and (max-width:1024px){      
      .totalmenu_box {display:none;}
}
/* 테블릿*/
@media all and (max-width:768px){
}
/* 모바일*/
@media all and (max-width:640px){
}

@media all and (max-width:414px){   
      
}

/*////////////////////////////////////////////////////////////
  메인 : main_visual_rolling 리스트  
////////////////////////////////////////////////////////////*/
.main_top_container {padding-bottom:70px; position:relative; overflow:hidden;}
.bg_lect {width:700px; height:700px; border-radius:50px; transform:rotate(58deg); background-color:#b4ddec; position:absolute; left:-150px; top:400px; z-index:0;}
.bg_donut {width:400px; height:400px; border:solid 150px #fdd4d0; border-radius:700px; background-color:#fff; position:absolute; right:-190px; bottom:-170px; z-index:-1;}

  .main_visual_box {margin:0 auto; width:1400px; border-radius:0 25px 0 25px; overflow:hidden; box-sizing:border-box; position:relative; z-index:1;}
    
  /* 테스크탑 */
  @media all and (max-width:1400px){
       .main_visual_box {margin:0 10px; width:initial; border-radius:0 15px 0 15px;}
  }

  @media all and (max-width:1200px){
      .bg_donut {width:350px; height:350px; border:solid 130px #fdd4d0; right:-190px; bottom:-170px;}
  }

  @media all and (max-width:1024px){
  }
 
  /* 테블릿*/
  @media all and (max-width:768px){   
      .bg_lect {width:500px; height:500px; transform:rotate(58deg); left:-80px; top:350px;}      
  }
  /* 모바일*/
  @media all and (max-width:640px){
      .bg_lect {width:500px; height:500px; transform:rotate(58deg); left:-180px; top:200px;}
      .bg_donut {width:250px; height:250px; border:solid 100px #fdd4d0; right:-250px; bottom:-170px;}
  }
 
  .visual_banner_zone {padding:0;}

 .main_visual_rolling .slick-list {}
 
 .main_visual_rolling {margin-bottom:-9px;}
 .main_visual_rolling .outline {margin:0; height:500px; background-repeat:no-repeat; background-size:cover; background-position:bottom center; background-color:#ddd; position:relative;}
 .main_visual_rolling .outline a {display:block; width:100%; height:100%;}

/* 테스크탑 */
@media all and (max-width:1400px){
}
@media all and (max-width:1200px){
     .main_visual_rolling .outline {height:540px;}
}
@media all and (max-width:1024px){
     .visual_banner_zone {padding:0;}
     .main_visual_rolling .outline {height:500px;}
}      
/* 테블릿*/
@media all and (max-width:768px){
     .main_visual_rolling .outline {height:350px;}
}
/* 모바일*/
@media all and (max-width:640px){      
     .main_visual_rolling .outline {height:250px;}
}
@media all and (max-width:480px){      
      .main_visual_rolling .outline {height:200px;}
 }

 .visual_banner_zone .slick-prev, 
 .visual_banner_zone .slick-next {
      font-size: 0;
      line-height: 0;
      position: absolute;
      top: 50%;
      display: block;
      width: 50px;
      height: 50px;
      padding: 0;
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transform: translate(0, -50%);
      cursor: pointer;
      color: transparent;
      border: none;
      outline: none;
      background: transparent;
      z-index: 10;
      color:#333 !important;
      background-color:#fff;
      border-radius:50px;
  }

  .visual_banner_zone .slick-prev:before {content: '';}
  [dir='rtl'] .visual_banner_zone .slick-prev:before {content: '';}
  
  .visual_banner_zone .slick-next:before {content: '';}
  [dir='rtl'] .visual_banner_zone .slick-next:before {content: '';}
  
  .visual_banner_zone .slick-prev {
      left:20px;
      background:url('../../images/ctl/main/mainvisual_navi_prev_org.png')  no-repeat center center; opacity: 0.7; z-index:10;
  }
  .visual_banner_zone .slick-prev:hover, .visual_banner_zone .slick-prev:focus {
      background:url('../../images/ctl/main/mainvisual_navi_prev.png')  no-repeat center center; opacity: 1;
  }
  .visual_banner_zone .slick-next {
      right:20px;
      background:url('../../images/ctl/main/mainvisual_navi_next_org.png')  no-repeat center center; opacity: 0.7;
  }
  .visual_banner_zone .slick-next:hover, .visual_banner_zone .slick-next:focus {
      background:url('../../images/ctl/main/mainvisual_navi_next.png')  no-repeat center center; opacity: 1;
  } 


 .main_visual_rolling .slick-dots {bottom:20px; right:20px; text-align:right;}
 .main_visual_rolling .slick-dots li {margin:0;}
 .main_visual_rolling .slick-dots li button:before {opacity:1; color:#cccccc; content:''; width:15px; height:6px; background-color:#ccc; border-radius:6px; transition: all 0.5s;}
 .main_visual_rolling .slick-dots li.slick-active button:before {width:15px; background-color:#ff9d2f;}
  

 /*////////////////////////////////////////////////////////////
  메인 : 공개강의  - New, 추천, 분야별 바로가기
  ////////////////////////////////////////////////////////////*/
.main_openlecture_box_3grid {margin-top:80px; position:relative; z-index:1;}
.main_openlecture_box_3grid .base_width {display:grid; grid-template-columns:500px auto 400px; justify-content: space-between; margin:0 auto; padding:25px 0; width:1400px; border-radius:25px; border:solid 0px #ddd; background-color:#fff; overflow:hidden; box-sizing:border-box;
      box-shadow: 0px 5px 10px 7px rgba(0,0,0,0.07);}

.col_openlec_new {padding:0 30px;}
.col_openlec_new .gep {}
.col_openlec_new .top {}
.col_openlec_new .top h3 {}
.col_openlec_new .top h3 strong {display:inline-block; margin-right:5px; font-size:24px; vertical-align:middle;}
.col_openlec_new .top h3 strong span {font-size:24px; color:#df2d68;}
.col_openlec_new .top h3 a.btn_more {display:inline-block; vertical-align:middle; width:29px; height:29px; line-height:29px; text-align:center; color:#999; border-radius:29px; border:solid 1px #999; transition:all 0.3s;}
.col_openlec_new .top h3 a.btn_more:hover {color:#333; border:solid 1px #333;}

.openlec_list_box_type1 {}
.openlec_list_box_type1 ul {}
.openlec_list_box_type1 ul li {padding:10px 0;}
.openlec_list_box_type1 ul li .outline {padding-left:220px; overflow:hidden;}
.openlec_list_box_type1 ul li .outline .thum {float:left; width:220px; margin-left:-220px;}
.openlec_list_box_type1 ul li .outline .thum img {border-radius:0 20px 0 20px;}
.openlec_list_box_type1 ul li .outline .thum img {}
.openlec_list_box_type1 ul li .outline .info {float:right; padding:30px 0 0 10px; width:100%; box-sizing:border-box;}
.openlec_list_box_type1 ul li .outline .info a {}
.openlec_list_box_type1 ul li .outline .info strong.title {display:block; font-size:20px; color:#333333;
      display:block;
      text-overflow:ellipsis;
      white-space:nowrap;
      word-wrap:normal;
      overflow:hidden;}
.openlec_list_box_type1 ul li .outline .info a:hover strong.title {color:#000;}
.openlec_list_box_type1 ul li .outline .info span.teacher {display:block; font-size:14px; color:#999999;}

/* 분야별 공개강좌 바로가기 */
.col_openlec_cata {padding:0 50px; border-left:solid 1px #ddd; border-right:solid 1px #ddd;}
.col_openlec_cata .top {position:relative;}
.col_openlec_cata .top h3 {text-align:center;}
.col_openlec_cata .top h3::after {display:block; content:'...'; font-size:25px; font-weight:800; color:#999; letter-spacing:3px;
      position:absolute; bottom:-35px; left:calc(50% - 15px);}
.col_openlec_cata .top h3 strong {display:inline-block; margin-right:5px; font-size:24px; vertical-align:middle;}
.col_openlec_cata .cata_box {padding-top:45px;}
.col_openlec_cata .cata_box ul {}
.col_openlec_cata .cata_box ul li {display:inline-block; margin:5px 6px;}
.col_openlec_cata .cata_box ul li a {display:inline-block; padding:0 15px; height:34px; line-height:34px; font-size:15px; color:#666666; background-color:#fff; border:solid 1px #ccc; border-radius:30px; transition:all 0.5s;}
.col_openlec_cata .cata_box ul li a:hover {color:#fff; border:solid 1px #3c60a6; background-color:#3c60a6;}

/* 추천강좌 */
.col_openlec_recommand {}
.col_openlec_recommand .top {margin:0 auto; width:300px;}
.col_openlec_recommand .top h3 {}
.col_openlec_recommand .top h3 strong {display:inline-block; margin-right:5px; font-size:24px; vertical-align:middle;}
.col_openlec_recommand .top h3 strong span {font-size:24px; color:#df2d68;}
.col_openlec_recommand .top h3 a.btn_more {display:inline-block; vertical-align:middle; width:29px; height:29px; line-height:29px; text-align:center; color:#999; border-radius:29px; border:solid 1px #999; transition:all 0.3s;}
.col_openlec_recommand .top h3 a.btn_more:hover {color:#333; border:solid 1px #333;}

.openlec_list_box_type2 {}
.openlec_list_box_type2 .outline {margin:10px auto 0; width:300px;}
.openlec_list_box_type2 .outline .thum {text-align:center;}
.openlec_list_box_type2 .outline .thum img {border-radius:0 20px 0 20px;}
.openlec_list_box_type2 .outline .info {padding-top:10px; margin:0 20px;}
.openlec_list_box_type2 .outline .info a {}
.openlec_list_box_type2 .outline .info a strong.title {display:block; font-size:20px; color:#333;
      display:block;
      text-overflow:ellipsis;
      white-space:nowrap;
      word-wrap:normal;
      overflow:hidden;}
.openlec_list_box_type2 .outline .info a span.teacher {font-size:14px; color:#999999;}

.openlec_list_box_type2 .outline .info .others {display:flex; margin:20px 0 0; padding:15px 0 0; justify-content: space-between; border-top:solid 1px #ddd;}
.openlec_list_box_type2 .outline .info .others i {}
.openlec_list_box_type2 .outline .info .others span.number {font-size:14px; color:#333333;}
.openlec_list_box_type2 .outline .info .others .rate {}
.openlec_list_box_type2 .outline .info .others .rate i {color:#ff6600;}
.openlec_list_box_type2 .outline .info .others .reply {}
.openlec_list_box_type2 .outline .info .others .reply i {color:#999999;}
.openlec_list_box_type2 .outline .info .others .like {}
.openlec_list_box_type2 .outline .info .others .like i {color:#cc3333;}

/* 테스크탑 */
@media all and (max-width:1400px){
      .main_openlecture_box_3grid {margin-top:50px;}
      .main_openlecture_box_3grid .base_width {margin:0 10px; width:initial; grid-template-columns:450px auto 380px;}

      .col_openlec_cata {padding:0 35px;}
}
@media all and (max-width:1200px){
      .main_openlecture_box_3grid .base_width {grid-template-columns:400px auto 320px;} 
      
      .col_openlec_new .top h3 strong {font-size:20px;}
      .col_openlec_new .top h3 strong span {font-size:20px;}
      .col_openlec_new .top h3 a.btn_more {width:24px; height:24px; line-height:24px;}

      .openlec_list_box_type1 ul li .outline .info strong.title,
      .openlec_list_box_type2 .outline .info a strong.title {font-size:18px;}
      .openlec_list_box_type2 .outline {width:260px;}
      .openlec_list_box_type2 .outline .info .others {margin:10px 0 0; padding:10px 0 0;}
      
      .col_openlec_cata {padding:0 25px;}
      .col_openlec_cata .top h3 strong {font-size:20px;}
      .col_openlec_cata .cata_box ul li {margin:3px 6px;}
      .col_openlec_cata .cata_box ul li a {padding:0 10px; height:30px; line-height:30px; font-size:14px;}
      
      .col_openlec_recommand .top {width:260px;}
      .col_openlec_recommand .top h3 strong {font-size:20px;}
      .col_openlec_recommand .top h3 strong span {font-size:20px;}
      .col_openlec_recommand .top h3 a.btn_more {width:24px; height:24px; line-height:24px;}
}
@media all and (max-width:1024px){
      .main_openlecture_box_3grid {margin-top:30px; position:relative;}
      .main_openlecture_box_3grid .base_width {grid-template-columns:60% 40%; grid-template-rows: repeat(5, minmax(55px,auto));}
      .col_openlec_cata {width:100%; margin-top:20px; padding-top:30px; box-sizing:border-box; border:none; border-top:solid 1px #ddd; position:absolute; left:0; top:320px;}
}      
/* 테블릿*/
@media all and (max-width:768px){
      .main_openlecture_box_3grid {display:block; margin-top:20px;}
      .main_openlecture_box_3grid .base_width {display:block; grid-template-columns:initial; grid-template-rows:initial;}

      .col_openlec_cata {padding-bottom:30px; border-top:solid 1px #ddd; border-bottom:solid 1px #ddd; position:relative; left:initial; top:initial;}
      .col_openlec_cata .top h3 {text-align:left;}

      .col_openlec_recommand {padding:30px 30px 0;}
      .col_openlec_recommand .top {margin:initial; width:initial;}
      .openlec_list_box_type2 .outline {width:initial;}
}
/* 모바일*/
@media all and (max-width:640px){
      .main_openlecture_box_3grid .base_width {padding:15px 0; border-radius:15px;}
      .col_openlec_new {padding:0 15px;}

      .col_openlec_new .top h3 strong {font-size:18px;}
      .col_openlec_new .top h3 strong span {font-size:18px;}
      .col_openlec_new .top h3 a.btn_more {width:22px; height:22px; line-height:22px;}
      
      .col_openlec_cata {padding:20px 15px;}
      .col_openlec_cata .top h3 strong {font-size:18px;}
      
      .col_openlec_recommand {padding:20px 15px 0;}
      .col_openlec_recommand .top h3 strong {font-size:18px;}
      .col_openlec_recommand .top h3 strong span {font-size:18px;}
      .col_openlec_recommand .top h3 a.btn_more {width:22px; height:22px; line-height:22px;}

      .openlec_list_box_type1 ul li .outline {padding-left:initial;}
      .openlec_list_box_type1 ul li .outline .thum {float:initial; width:initial; margin-left:initial; text-align:center;}
      .openlec_list_box_type1 ul li .outline .info {float:initial; padding:10px 0 0 10px; width:initial;}

      .openlec_list_box_type1 ul li .outline .info strong.title,
      .openlec_list_box_type2 .outline .info a strong.title {font-size:16px;}
}


  /*////////////////////////////////////////////////////////////
  메인 : hotlecture_rolling 리스트  
  ////////////////////////////////////////////////////////////*/
  .main_openlecture_box {margin-top:50px; position:relative; z-index:1;}
  .main_openlecture_box .base_width {padding:25px 0; width:1400px; border-radius:25px; border:solid 0px #ddd; overflow:hidden; box-sizing:border-box; background-color:#fff;
      box-shadow: 0px 5px 10px 7px rgba(0,0,0,0.07);}

  .hotlecture {margin:0 30px;}
  .hotlecture .header_box {margin:0 10px 10px;}
  .hotlecture .header_box h3 strong {display:inline-block; margin-right:5px; font-size:24px; vertical-align:middle;}
  .hotlecture .header_box h3 strong span {font-size:24px; color:#df2d68;}
  .hotlecture .header_box h3 img.icon {display:inline-block; vertical-align:middle; position:relative; top:-3px;}
  .hotlecture .header_box h3 a.btn_more {display:inline-block; vertical-align:middle; width:29px; height:29px; line-height:29px; text-align:center; color:#999; border-radius:29px; border:solid 1px #999; transition:all 0.3s;}
  .hotlecture .header_box h3 a.btn_more:hover {color:#333; border:solid 1px #333;}

/* 테스크탑 */
@media all and (max-width:1400px){
      .main_openlecture_box .base_width {margin:0 10px; width:initial;}
 }
 
 @media all and (max-width:1200px){
      .hotlecture .header_box h3 strong {font-size:20px;}
      .hotlecture .header_box h3 strong span {font-size:20px;}
 }
 
 @media all and (max-width:1024px){
 }
 
 /* 테블릿*/
 @media all and (max-width:768px){   
 }
 /* 모바일*/
 @media all and (max-width:640px){
      .hotlecture .header_box h3 strong {font-size:18px;}
      .hotlecture .header_box h3 strong span {font-size:18px;}

      .hotlecture .header_box h3 img.icon {height:26px;}
 }
 

  .hot_zone {}

  .hot_zone .slick-prev, 
  .hot_zone .slick-next {
       font-size: 0;
       line-height: 0;
       position: absolute;
       top:-10px;
       /* top: 50%; */
       display: block;
       width: 50px;
       height: 50px;
       padding: 0;
       -webkit-transform: translate(0, -50%);
       -ms-transform: translate(0, -50%);
       transform: translate(0, -50%);
       cursor: pointer;
       color: transparent;
       border: none;
       outline: none;
       background: transparent;
       z-index: 10;
       color:#333 !important;
       background-size:30% !important;
   }
 
   .hot_zone .slick-prev:before {content: '';}
   [dir='rtl'] .hot_zone .slick-prev:before {content: '';}
   
   .hot_zone .slick-next:before {content: '';}
   [dir='rtl'] .hot_zone .slick-next:before {content: '';}
   
   .hot_zone .slick-prev {
       left:initial; right:60px;
       background:url('../../images/ctl/main/kocw_navi_prev.png')  no-repeat center center; opacity: 0.7; z-index:10;
   }
   .hot_zone .slick-prev:hover, .hot_zone .slick-prev:focus {
       background:url('../../images/ctl/main/kocw_navi_prev.png')  no-repeat center center; opacity: 1;
   }
   .hot_zone .slick-next {
         right:20px;
       background:url('../../images/ctl/main/kocw_navi_next.png')  no-repeat center center; opacity: 0.7;
   }
   .hot_zone .slick-next:hover, .hot_zone .slick-next:focus {
       background:url('../../images/ctl/main/kocw_navi_next.png')  no-repeat center center; opacity: 1;
   } 


  .hotlecture_rolling .slick-list {}
  
  .hotlecture_rolling {margin:0 -25px; position:relative;}
  .hotlecture_rolling .outline {margin:0 25px; background-repeat:no-repeat; background-size:cover; background-position:bottom center;}

  .hotlecture_rolling .outline {}
  .hotlecture_rolling .outline .thum {text-align:center;}
  .hotlecture_rolling .outline .thum img {margin:0 auto; border-radius:0 20px 0 20px;}
  .hotlecture_rolling .outline .info {padding-top:10px; margin:0 20px;}
  .hotlecture_rolling .outline .info a {}
  .hotlecture_rolling .outline .info a strong.title {display:block; font-size:20px; color:#333;
      display:block;
      text-overflow:ellipsis;
      white-space:nowrap;
      word-wrap:normal;
      overflow:hidden;}
  .hotlecture_rolling .outline .info a span.teacher {font-size:14px; color:#999999;}

  .hotlecture_rolling .outline .info .others {display:flex; margin:20px 0 0; padding:15px 0 0; justify-content: space-between; border-top:solid 1px #ddd;}
  .hotlecture_rolling .outline .info .others i {}
  .hotlecture_rolling .outline .info .others span.number {font-size:14px; color:#333333;}
  .hotlecture_rolling .outline .info .others .rate {}
  .hotlecture_rolling .outline .info .others .rate i {color:#ff6600;}
  .hotlecture_rolling .outline .info .others .reply {}
  .hotlecture_rolling .outline .info .others .reply i {color:#999999;}
  .hotlecture_rolling .outline .info .others .like {}
  .hotlecture_rolling .outline .info .others .like i {color:#cc3333;}

  .hotlecture_rolling .slick-dots {bottom:-40px;}
  .hotlecture_rolling .slick-dots li {margin:0;}
  .hotlecture_rolling .slick-dots li button:before {opacity:1; color:#cccccc; content:''; width:10px; height:6px; background-color:#ccc; border-radius:6px; transition: all 0.5s;}
  .hotlecture_rolling .slick-dots li.slick-active button:before {width:10px; background-color:#ff9d2f;}

  /* 테스크탑 */
  @media all and (max-width:1200px){
      .hotlecture .header_box h3 a.btn_more {width:24px; height:24px; line-height:24px;}
      .hotlecture_rolling .outline .info a strong.title {font-size:18px;}
  }
  @media all and (max-width:1024px){
      .hotlecture {margin:0 20px;}
      .hotlecture .header_box h3 {font-size:24px;}
      .hot_zone {padding:10px 30px 20px;}
  }      
  /* 테블릿*/
  @media all and (max-width:768px){      
      .hot_zone {padding:0 20px 20px;}

      .hotlecture {margin:0;}
      .hotlecture .header_box {padding:0 10px;}
      .hotlecture .header_box h3 {font-size:20px;}
      .hotlecture .header_box h3 span {font-size:14px;}            
      
      .hotlecture_rolling .slick-dots {bottom:-35px;}
  }
  /* 모바일*/
  @media all and (max-width:640px){
      .hotlecture .header_box h3 a.btn_more {width:22px; height:22px; line-height:22px;}
      .hotlecture_rolling .outline .info a strong.title {font-size:16px;}
  }
  

 /*//////////////////////////////////////////////////////////////////
 역량별 강좌 바로가기
 //////////////////////////////////////////////////////////////////*/
.main_capa_cata {background:url('../../images/ctl/main/capa_banner_bg.jpg') no-repeat right center #058dbf; background-size:cover;}
.main_capa_cata .base_width {}
.main_capa_cata .outline {padding:45px 0; text-align:center;}
.main_capa_cata .outline h3 {font-size:24px; color:#fff;}
.main_capa_cata .outline ul {margin-top:10px;}
.main_capa_cata .outline ul li {display:inline-block; margin:0 10px;}
.main_capa_cata .outline ul li a {}
.main_capa_cata .outline ul li a {display:inline-block; padding:0 25px; height:40px; line-height:40px; font-size:20px; color:#fff; border:solid 1px #fff; border-radius:30px; transition:all 0.5s;}
.main_capa_cata .outline ul li a:hover {color:#fff; border:solid 1px #f86f64; background-color:#f86f64;}

/* 테블릿*/
@media all and (max-width:768px){
      .main_capa_cata .outline {padding:35px 0;}
      .main_capa_cata .outline h3 {font-size:20px;}
      .main_capa_cata .outline ul li {margin:0 5px; padding:5px 0;}
      .main_capa_cata .outline ul li a {padding:0 20px; height:36px; line-height:36px; font-size:16px;}
  }
/* 모바일*/
@media all and (max-width:640px){
      .main_capa_cata {background:url('../../images/ctl/main/capa_banner_bg.jpg') no-repeat 70% center;}
      .main_capa_cata .outline {padding:35px 20px;}
      .main_capa_cata .outline ul {margin-top:0;}
      .main_capa_cata .outline ul li a {padding:0 15px; height:30px; line-height:30px; font-size:14px;}
}

/*//////////////////////////////////////////////////////////////////
 비교과 영역 : 신규, 추천
 //////////////////////////////////////////////////////////////////*/
.nonsubject_container {padding:100px 0 70px; background-color:#e6eaee;}
.nonsubject_container .base_width {}

.nonsubject_box {}
.nonsubject_box .top h3 {margin-bottom:10px;}
.nonsubject_box .top h3 strong {display:inline-block; margin-right:5px; font-size:24px; vertical-align:middle;}
.nonsubject_box .top h3 strong span {font-size:24px; color:#df2d68;}
.nonsubject_box .top h3 img.icon {display:inline-block; vertical-align:middle; position:relative; top:-3px;}
.nonsubject_box .top h3 a.btn_more {display:inline-block; vertical-align:middle; width:29px; height:29px; line-height:29px; text-align:center; color:#999; border-radius:29px; border:solid 1px #999; transition:all 0.3s;}
.nonsubject_box .top h3 a.btn_more:hover {color:#333; border:solid 1px #333;}

.nonsubject_list_box {display:grid; margin-bottom:50px; grid-template-columns:1fr 1fr;}

/* 테스크탑 */
@media all and (max-width:1400px){
      .nonsubject_container {padding:60px 0;}
      .nonsubject_container .base_width {padding:0 10px 0 20px; box-sizing:border-box;}
      .nonsubject_list_box {grid-template-columns:auto 640px;}
      
}
@media all and (max-width:1200px){
      .nonsubject_box .top h3 strong {font-size:20px;}
      .nonsubject_box .top h3 strong span {font-size:20px;}
      .nonsubject_box .top h3 a.btn_more {width:24px; height:24px; line-height:24px;}
}
@media all and (max-width:1024px){
      .nonsubject_container {padding:40px 0;}      
      .nonsubject_container .base_width {padding:0 10px;}

      .nonsubject_list_box {margin-bottom:0; grid-template-columns:initial;}
}
/* 테블릿*/
@media all and (max-width:768px){ 
      .nonsubject_container {padding:30px 0 0;}
}

/* 모바일*/
@media all and (max-width:640px){
      .nonsubject_box .top h3 strong {font-size:18px;}
      .nonsubject_box .top h3 strong span {font-size:18px;}
      .nonsubject_box .top h3 a.btn_more {width:22px; height:22px; line-height:22px;}
}



/* 와이드 */
.nonsubject_list_wide {}
.nonsubject_list_wide .thum {border-radius:0 20px 0 20px; height:300px; background-size:cover; background-position:center top; box-shadow: 0px 7px 7px 3px rgba(0,0,0,0.05); position:relative;}
.nonsubject_list_wide .thum::after {display:block; content:''; width:100%; height:100%; border-radius:0 20px 0 20px; position:absolute; bottom:0; left:0; z-index:0;
      background: rgb(60,96,166);
      background: linear-gradient(180deg, rgba(60,96,166,0.1) 0%, rgba(17,28,39,0.3) 60%, rgba(17,28,39,0.7) 100%)}
.nonsubject_list_wide .thum .func {display:flex; justify-content:space-between; padding:10px; width:100%; box-sizing:border-box; position:absolute; top:0; left:0; z-index:1;}
 
.nonsubject_list_wide .thum .info {padding:30px 20px; width:90%; box-sizing:border-box; border-radius:20px; background-color:#fff; z-index:3; position:absolute; bottom:-20px; left:5%;
      box-shadow: 0px 7px 7px 3px rgba(0,0,0,0.05);}
.nonsubject_list_wide .thum .info .cata {margin-bottom:10px;}
.nonsubject_list_wide .thum .info .cata span {display:inline-block; padding:0 10px; height:20px; line-height:20px; color:#666; font-size:12px; background-color:#fff; border:solid 1px #666; border-radius:20px;}
.nonsubject_list_wide .thum .info a.title {display:block; font-size:20px; color:#333333; line-height:24px; height:50px;      
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      text-overflow:ellipsis;}
.nonsubject_list_wide .thum:hover .info a.title {color:#3c60a6;}
      
.nonsubject_list_wide .thum .info .bottom_info {display:grid; justify-content:space-between; align-items:end; grid-template-columns:auto 45%;}
.nonsubject_list_wide .thum .info .bottom_info .others {padding:7px 0 0; line-height:1.2;}
.nonsubject_list_wide .thum .info .bottom_info .others span.product {display:block; color:#666;}
.nonsubject_list_wide .thum .info .bottom_info .others span.date {display:block; color:#666;}
.nonsubject_list_wide .thum .info .bottom_info .app_status_box {display:flex; justify-content:space-between; align-items:center;}
.nonsubject_list_wide .thum .info .bottom_info .status_bar_box {display:inline-block; width:100%; height:5px; line-height:0; font-size:0; background-color:#ddd; border-radius:5px; overflow:hidden;}
.nonsubject_list_wide .thum .info .bottom_info .status_bar_box span.bar {display:inline-block; height:5px; background-color:#df2d68; border-radius:5px;}
.nonsubject_list_wide .thum .info .bottom_info .count {text-align:right; width:80px; font-size:12px; color:#666;}

/* 모집상황 및 좋아요 */
span.app_state {display:inline-block; padding:0 10px; height:33px; line-height:33px; color:#fff; font-size:13px; background-color:rgba(0,0,0,0.7); border-radius:33px;}
span.app_state.before {}
span.app_state.ing {background-color:#3c60a6;}
span.app_state.closed {}
a.btn_like {display:inline-block; width:33px; height:33px; line-height:1.8; color:#666; text-align:center; background-color:#fff; border-radius:33px;}
a.btn_like i {font-size:20px; font-weight:normal;}
a.btn_like.check {color:#fff; background-color:#e22f68;}


/* 기본 */
.nonsubject_list_base {}
.nonsubject_list_base ul {padding-left:20px;}
.nonsubject_list_base ul::after {display:block; content:''; clear:both;}
.nonsubject_list_base ul li {float:left; margin:0 20px;}
.nonsubject_list_base ul li .outline {margin:0 auto; width:300px; border-radius:0 20px 20px 20px; background-color:#fff;
      box-shadow: 0px 7px 7px 3px rgba(0,0,0,0.05);}
.nonsubject_list_base ul li .outline .thum {text-align:center; height:150px; background-repeat:no-repeat; background-size:cover; background-position:center center; border-radius:0 20px 0 20px; overflow:hidden; position:relative;}
.nonsubject_list_base ul li .outline .thum::after {display:block; content:''; width:100%; height:150px; position:absolute; bottom:0; left:0;z-index:1;;
      background: rgb(60,96,166);
      background: linear-gradient(180deg, rgba(60,96,166,0.1) 0%, rgba(17,28,39,0.3) 60%, rgba(17,28,39,0.7) 100%)}
.nonsubject_list_base ul li .outline .thum img {}
.nonsubject_list_base ul li .outline .thum .func {display:flex; justify-content:space-between; padding:10px; width:100%; box-sizing:border-box; position:absolute; top:0; left:0; z-index:2;}
.nonsubject_list_base ul li .outline .info {padding:15px 20px 5px;}
.nonsubject_list_base ul li .outline .info .cata {margin-bottom:10px;}
.nonsubject_list_base ul li .outline .info .cata span {display:inline-block; padding:0 10px; height:20px; line-height:20px; color:#666; font-size:12px; background-color:#fff; border:solid 1px #666; border-radius:20px;}
.nonsubject_list_base ul li .outline .info a.title {display:block; font-size:20px; color:#333333; line-height:24px; height:50px;      
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      text-overflow:ellipsis}
.nonsubject_list_base ul li .outline .info .others {padding:7px 0; line-height:1.2;}
.nonsubject_list_base ul li .outline .info .others span.product {display:block; color:#666;}
.nonsubject_list_base ul li .outline .info .others span.date {display:block; color:#666;}
.nonsubject_list_base ul li .outline .info .app_status_box {display:flex; justify-content:space-between; align-items:center;}
.nonsubject_list_base ul li .outline .info .app_status_box .status_bar_box {display:inline-block; width:100%; height:5px; line-height:0; font-size:0; background-color:#ddd; border-radius:5px; overflow:hidden;}
.nonsubject_list_base ul li .outline .info .app_status_box .status_bar_box span.bar {display:inline-block; height:5px; background-color:#df2d68; border-radius:5px;}
.nonsubject_list_base ul li .outline .info .app_status_box .count {text-align:right; width:80px; font-size:12px; color:#666;}


/* 테스크탑 */
@media all and (max-width:1400px){
      .nonsubject_list_wide .thum {height:295px;}
      .nonsubject_list_wide .thum .info {padding:15px 20px 5px;}
      .nonsubject_list_wide .thum .info .bottom_info {display:block; grid-template-columns:initial;}        
      
      .nonsubject_list_base ul {}
      .nonsubject_list_base ul li {margin:0; padding:0 10px; width:50%; box-sizing:border-box;}
      .nonsubject_list_base ul li .outline {width:initial;}
}
@media all and (max-width:1200px){
}

@media all and (max-width:1024px){
      .nonsubject_list_base ul {padding-left:0; margin:40px -10px;}

      .nonsubject_list_wide .thum {height:285px;}

      .nonsubject_list_wide .thum .info a.title,
      .nonsubject_list_base ul li .outline .info a.title {margin-bottom:5px; font-size:18px; line-height:20px; height:40px;} 

      .nonsubject_list_wide .thum .info .bottom_info .others span,
      .nonsubject_list_base ul li .outline .info .others span {font-size:12px;}
}
/* 테블릿*/
@media all and (max-width:768px){ 
      
}
/* 모바일*/
@media all and (max-width:480px){
      .nonsubject_list_wide .thum {height:230px;}

      .nonsubject_list_base ul li {padding:0 10px 15px; width:100%; box-sizing: border-box;}
      
      .nonsubject_list_wide .thum .info a.title,
      .nonsubject_list_base ul li .outline .info a.title {font-size:16px; line-height:18px; height:initial;
            -webkit-line-clamp:initial;
            -webkit-box-orient:initial;
            overflow:initial;
            text-overflow:initial;} 
}



/*//////////////////////////////////////////////////////////////////
 공지사항
 //////////////////////////////////////////////////////////////////*/
.main_content_board {padding:85px 0; border-top:solid 1px #ddd;}
/* 테스크탑 */
 @media all and (max-width:1400px){
       .main_content .base_width,
       .main_content_board .base_width {width:auto; padding:0 10px;}
 }
 @media all and (max-width:1024px){
      .main_content .base_width {padding:0;}
 }
 /* 테블릿*/
 @media all and (max-width:768px){ 
       .main_content,
       .main_content_board {padding:30px 0;}
 }
 /* 모바일*/
 @media all and (max-width:480px){
      .main_content {margin-top:20px;}
      .main_content_board {padding:15px 0 30px;}
 }
 

.new_post_row {padding-left:260px;}
.new_post_row:after {display:block; content:''; clear:both;}

.new_post_row .header_box {float:left; width:260px; margin-left:-260px;}
.new_post_row .header_box .box_pos {padding-left:30px;}
.new_post_row .header_box h3 {font-size:24px; color:#333333;}
.new_post_row .header_box a.btn_more {display:inline-block; padding:0 10px; height:24px; line-height:24px; border:solid 1px #999999; border-radius:24px;}
.new_post_row .header_box a.btn_more:hover {border:solid 1px #333;}
.new_post_row .header_box a.btn_more span {font-size:14px; color:#666;}
.new_post_row .header_box a.btn_more i {color:#ff9e1a;}
.new_post_row .cont_list {float:right; width:100%;}


 /* 테스크탑 */
 @media all and (max-width:1200px){
      .new_post_row {padding-left:200px;}
      .new_post_row .header_box {width:200px; margin-left:-200px;}
 }
 @media all and (max-width:1024px){
      .new_post_row {padding-left:130px;}
      .new_post_row .header_box .box_pos {margin-top:90px; padding-left:10px;}
      .new_post_row .header_box {width:130px; margin-left:-130px; padding-top:15px;}
      .new_post_row .header_box h3 {font-size:24px;}
      .new_post_row .header_box .btn_more span.bar {width:80px;}
 }
 /* 테블릿*/
 @media all and (max-width:768px){ 
      .new_post_row {padding-left:0;}
      .new_post_row .header_box .box_pos {margin-top:0; padding-left:0; display:flex; justify-content:space-between; align-items: center;}
      .new_post_row .header_box {float:initial; width:auto; line-height:50px; margin-left:0; padding-top:15px;}
      .new_post_row .header_box h3 {font-size:20px;}
      .new_post_row .header_box .btn_more span.bar {width:60px; top:-15px;}
      .new_post_row .cont_list {float:initial;}
 }
 /* 모바일*/
 @media all and (max-width:480px){
      .new_post_row .header_box a.btn_more span {font-size:12px;}
 }
 

  .board_zone {}  
  .board_rolling {margin:0 -25px; position:relative;}
  .board_rolling .outline {padding:20px 0;}
  .board_rolling .outline a {display:block; margin:0 40px; border:solid 1px #ccc; background-color:#fff; transition: all 0.5s; border-radius:30px; position:relative; top:0;}
  .board_rolling .outline a:hover {box-shadow:5px 5px 20px 0 #ccc; color:#ff9e1a; border:solid 1px #eee; top:-7px;}
  .board_rolling .outline .row_top {overflow:hidden; padding:20px 20px 0; margin-bottom:40px;}
  .board_rolling .outline .row_top .cata_new {float:left; color:#df8200;}
  .board_rolling .outline .row_top .date {float:right; color:#999999;}
  
  .board_rolling .outline .cont {padding:0 20px;}
  .board_rolling .outline .cont .title {display:block; margin-bottom:10px; font-size:20px; font-weight:normal; line-height:26px;
        height:80px; 
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden;
        text-overflow:ellipsis}
  .board_rolling .outline .cont .lead_txt {display:block; color:#999; line-height:18px;
        height:100px; 
        display:-webkit-box;
        -webkit-line-clamp:5;
        -webkit-box-orient:vertical;
        overflow:hidden;
        text-overflow:ellipsis}
  
  .board_rolling .outline .deatil_view {padding:7px 0; text-align:center; border-top:solid 1px #ddd;}
  .board_rolling .outline .deatil_view span.txt {color:#999; vertical-align:middle;}
  .board_rolling .outline .deatil_view span.bar {display:inline-block; width:34px; height:2px; line-height:0; vertical-align:middle; background-color:#bfbfbf; position:relative;}
  .board_rolling .outline .deatil_view span.bar .point_bar {display:inline-block; color:#ff9e1a; font-size:18px; font-weight:600; position:absolute; top:0px; right:-2px;}

  .board_rolling .slick-dots {bottom:-20px;}
  .board_rolling .slick-dots li {margin:0;}
  .board_rolling .slick-dots li button:before {opacity:1; color:#cccccc; content:''; width:10px; height:6px; background-color:#ccc; border-radius:6px; transition: all 0.5s;}
  .board_rolling .slick-dots li.slick-active button:before {width:10px; background-color:#ff9d2f;}
   
 /* 테스크탑 */
 @media all and (max-width:1400px){
      .board_rolling {margin:0 -10px 20px;}
      .board_rolling .outline a {margin:0 10px;}
}
@media all and (max-width:1024px){
}
/* 테블릿*/
@media all and (max-width:768px){ 
}
/* 모바일*/
@media all and (max-width:640px){
      .board_rolling .outline .cont .title {margin-bottom:20px; font-size:18px; line-height:22px;
            height:44px; 
            -webkit-line-clamp:2;}
      .board_rolling .outline .cont .lead_txt {margin-bottom:20px; font-size:12px; line-height:18px;
            height:54px; 
            -webkit-line-clamp:3;}
}


/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 Footer
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#footer {width:100%; padding-bottom:70px; color:#666666; background-color:#fff; border-top:solid 1px #ddd; position:relative;}
.base_width {position:relative;}
.footer_top {display:flex; padding:15px 20px; justify-content:space-between;}
.footer_top ul.footer_menu {overflow:hidden;}
.footer_top ul.footer_menu li {float:left; padding:0 15px; height:38px; line-height:38px; position:relative;}
.footer_top ul.footer_menu li:first-child {padding-left:0;}
.footer_top ul.footer_menu li::after {display:block; content:''; width:1px; height:12px; background-color:#999; 
      position:absolute; left:0; top:calc(50% - 5px);}
      .footer_top ul.footer_menu li:first-child::after {display:none;}
.footer_top ul.footer_menu li a {display:block; color:#6c6c6c; font-size:16px;}
.footer_top ul.footer_menu li a:hover {text-decoration:underline;}
.footer_top ul.footer_menu li a.btn_footer_policy {color:#ff9900;}

.footer_copy {padding:20px; color:#999999; font-weight:normal; border-top:solid 1px #ddd; position:relative;
      word-break:keep-all; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;}
.footer_copy .adress {margin-bottom:10px;}
.footer_copy .copyright {color:#999;}


/* 주요사이트 */
.relative_site {width:200px; position:relative;}
.relative_site a.btn_siteview {display:flex; justify-content:space-between; align-items: center; height:30px; line-height:30px; border:solid 1px #979797; border-radius:30px; position:relative;}
.relative_site a.btn_siteview .title {display:inline-block; padding-left:15px; color:#333; font-weight:normal;}
.relative_site a.btn_siteview i {padding:0 15px; color:#999; font-size:12px; transition:all 0.3s ease-out;}
.relative_site a.btn_siteview.active i {transform:rotate(180deg);}
.relative_site .site_list {width:200px; position:absolute; bottom:45px; right:0;}
.relative_site .site_list ul {background-color:#fff; border:solid 1px #ccc; border-radius:10px;}
.relative_site .site_list ul li {padding:7px 10px; border-bottom:solid 1px #ddd;}
.relative_site .site_list ul li:last-child {border-bottom:none;}
.relative_site .site_list ul li a {display:block; color:#333;}
.relative_site .site_list ul li:hover {background-color:#f2f2f2;}
.relative_site .site_list ul li:hover a {color:#333;}

/* 데스크탑 */
@media all and (max-width:1400px){
      .relative_site {margin-right:10px;}       
}
/* 테블릿 */
@media all and (max-width:640px){
      .footer_top {display:block; padding:15px 10px;}
      .footer_top ul.footer_menu {margin-left:5px;}
      .footer_top ul.footer_menu li {padding:0 15px;}
      .footer_top ul.footer_menu li a {font-size:13px; font-weight:normal;}

      .relative_site {width:96%; margin:0 auto; position:relative;}
      .footer_copy .footer_logo {display:none;}
      .footer_copy {padding-left:10px;}
}
/* 테블릿 */
@media all and (max-width:480px){      
      #footer {padding-bottom:30px;}
      .relative_site {display:none;}
      .footer_copy {padding-top:20px; padding:20px 10px;}
      .footer_copy .adress {font-size:12px;}
      .footer_copy .copyright {font-size:12px;}
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 고정메뉴
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.fixedmenu {position:fixed; bottom:20%; right:10px; z-index:1;}

/* 추가 메뉴 보기 */
.function_menu {margin-bottom:5px; position:relative;}
.function_menu a.btn_othermenu {display:inline-block; width:50px; height:50px; line-height:50px; text-align:center; border-radius:50px; background-color:#fff; overflow:hidden;
      box-shadow:0 0 10px rgba(0,0,0,0.2);}
.function_menu a.btn_othermenu i {color:#333; font-size:22px; font-weight:normal; transition:all 0.3s ease-out;}
.function_menu a.btn_othermenu:hover i {transform:rotate(45deg);}

.quick_gomenu {background-color:#fff; border-radius:25px; box-shadow:0 0 10px rgba(0,0,0,0.2); transition:all 0.3s ease-out;
      position:absolute; bottom:7px; right:-200px; opacity:0;}
.quick_gomenu.active {right:0; opacity:1;}
.quick_gomenu ul {margin-bottom:30px; padding:20px 20px 0;}
.quick_gomenu ul li {padding:2px 0;}
.quick_gomenu ul li a {display:block; white-space:nowrap; color:#666; font-size:16px;}
.quick_gomenu ul li a:hover {color:#df2d68;}

.quick_gomenu .btn_quick_gomenu_close {position:absolute; bottom:0; right:15px;}
.quick_gomenu .btn_quick_gomenu_close i {font-size:22px; font-weight:normal;}


/* Go_top */
a.go_page_top {display:inline-block; width:50px; height:50px; line-height:50px; text-align:center; border-radius:50px; background-color:#df2d68; overflow:hidden;
box-shadow:0 0 10px rgba(0,0,0,0.2);}
a.go_page_top i {color:#fff; font-size:22px; font-weight:normal; transition:0.3s;}
a.go_page_top:hover {background-color:#be1c52;}


/* 데스크탑 */
@media all and (max-width:1400px){

}
/* 테블릿 */
@media all and (max-width:640px){
}
/* 테블릿 */
@media all and (max-width:480px){      
 
}