@charset "utf-8";

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 공통 - UI
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#skip_navi {display:none;}
body {background-color:#fff;}
#wrapper {background-repeat:no-repeat; background-position:center top; /*width:100%; min-width:1000px;*/ /*height:100%;*/ box-sizing: border-box;}

.header_pos {width:100%; min-width:320px; position:relative; z-index:101;
      /*-webkit-box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.20);
      -moz-box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.20);
      box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.20);*/
}


/* 헤더 로그인 및 언어, 팝업 ////////////////////////////////////////// */
.header_top {padding:7px; background-color:#003366; position: relative; z-index:200;}
.site_function {padding-right:10px;}
.site_function ul {display:flex; align-items:center; justify-content:end;}
.site_function ul>li {display:inline-block; padding-left:5px; padding-right:5px; box-sizing:border-box;}

.site_function ul>li.user_area {position:relative;}      
.site_function ul>li.user_area .before a.btn_login_utill {margin-left:10px; color:#fff; font-size:13px;}
.site_function ul>li.user_area .before a.btn_login_utill:hover {color:#fff;}
.site_function ul>li.user_area .before a.btn_login_utill:first-child {margin-left:0;}

.site_function ul>li.user_area .after a.btn_login_user {color:#fff; font-size:13px;}

.user_info_pop {width:200px; background-color:#fff; border:solid 1px #aaa; border-radius:10px; overflow:hidden;
      position:absolute; top:34px; left:-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:#02476d; background-color:#e3f3ed;}
.user_info_pop ol li a:hover i {color:#02476d;}

.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;}

/* 언어선택 */
.site_function ul>li.lang_select {position:relative;}
.site_function ul>li.lang_select a.btn_langselect {display:flex; align-items:center; padding:0 7px; height:18px; line-height:18px; border:solid 1px #666; border-radius:20px;}
.site_function ul>li.lang_select a.btn_langselect:hover {border:solid 1px #333;}
.site_function ul>li.lang_select a.btn_langselect span {margin-right:5px; font-size:12px; color:#fff;}
.site_function ul>li.lang_select a.btn_langselect i {color:#fff; font-size:10px;}

.site_function ul>li.lang_select .lang_select_pop {position:absolute; top:32px; right:0; z-index:200;}
.site_function ul>li.lang_select .lang_select_pop ol {padding:10px; width:70px; border:solid 1px #aaa; border-radius:10px; background-color:#fff;;}
.site_function ul>li.lang_select .lang_select_pop ol li {padding:5px; line-height:1;}
.site_function ul>li.lang_select .lang_select_pop ol li a {font-size:12px; color:#333;}
.site_function ul>li.lang_select .lang_select_pop ol li a:hover {color:#0086c5;}


/* 팝업 */
.site_function ul>li.popup {width:90px; text-align:right; position:relative;}
.site_function ul>li.popup button {padding:0 10px; height:37px; color:#fff; font-size:12px; background-color:#ff6f32; border-radius:0 0 10px 10px;
      position:absolute; top:-18px; right:0;}
.site_function ul>li.popup button i {color:#ffcc00; opacity:0.5;}
.site_function ul>li.popup button:hover i { opacity:1;}


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

.header {height:80px; position:relative;}
.header::after {display:block; content:''; clear:both;}
.header h1.logo {float:left; width:400px; height:80px; line-height:80px; font-size:0; text-indent:-1000; background:url('../images/common/logo.png') no-repeat left center;
position:absolute; top:0; left:0;}


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

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

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

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


/* 대메뉴 */
.gnbarea {float:right; height:80px; padding-right:10px;}
.gnbarea ul.gnb {display:inline-block; height:80px; text-align:center;}
.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:#0778b3 ;}

.gnbarea ul.gnb>li.totalmenu_li {display:flex; align-items:center; justify-content:center; padding-left:10px; height:80px;}
.gnbarea ul.gnb>li.totalmenu_li a.btn_totalmenu {display:block; padding:2px 0;}
.gnbarea ul.gnb>li.totalmenu_li a.btn_totalmenu span {display:block; margin:5px 0; width:30px; height:2px; background-color:#333;  transition: all 0.5s;}
.gnbarea ul.gnb>li.totalmenu_li a.btn_totalmenu span:last-child {width:25px;}
.gnbarea ul.gnb>li.totalmenu_li a.btn_totalmenu:hover span:first-child {width:25px;}
.gnbarea ul.gnb>li.totalmenu_li a.btn_totalmenu:hover span:last-child {width:15px;}


@media all and (max-width:1400px){
      .gnbarea ul.gnb>li a.title {padding:0 8px;}
}
@media all and (max-width:1200px){
      .gnbarea {display:none;}
}
@media all and (max-width:1024px){
}

.gnbarea ul.gnb>li .submenu {width:200px; background-color:#fff; border:solid 1px #ccc; border-top:solid 3px #0778b3 ; 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 {text-align:left;}
.gnbarea ul.gnb>li .submenu ul li a {display:block; padding:15px 20px; color:#333; border-top:solid 1px #ccc;}
.gnbarea ul.gnb>li .submenu ul li.first a {border-top:none;}
.gnbarea ul.gnb>li .submenu ul li a:hover {color:#0778b3 ; background-color:#fff;}

.gnbarea ul.gnb>li.func_box {padding:20px 0 20px 10px;}
.gnbarea ul.gnb>li.func_box>a {float:left; display:inline-block; width:28px; height:28px; text-align:center;}
.gnbarea ul.gnb>li.func_box>a.btn_totalmenu {display:inline-block; padding-top:5px; height:23px; line-height:0; position:relative;}
.gnbarea ul.gnb>li.func_box>a.btn_totalmenu span {display:inline-block; margin:2px 0; width:15px; height:2px; background-color:#333;}
.gnbarea ul.gnb>li.func_box>a.btn_totalmenu.active {}
.gnbarea ul.gnb>li.func_box>a.btn_totalmenu.active span:nth-child(1) {transform:rotate(45deg ); position:relative; top:6px; }
.gnbarea ul.gnb>li.func_box>a.btn_totalmenu.active span:nth-child(2) {transform:rotate(-45deg );}
.gnbarea ul.gnb>li.func_box>a.btn_totalmenu.active span:nth-child(3) {display:none;}
.gnbarea ul.gnb>li.func_box>a.btn_login {width:50px; line-height:28px; color:#333; border-left:none; /*background:url('/images/ctl/btn_userlogin.png') no-repeat center center;*/  font-size:12;}

.gnbarea ul.gnb>li.func_box>a.btn_login {width:50px; line-height:28px; color:#333; border-left:none; /*background:url('/images/ctl/btn_userlogin.png') no-repeat center center;*/  font-size:12;}

.btn_sidemenu {display:none;}


.user_info_pop {width:120px; background-color:#fff; border:solid 1px #eee; position:absolute; top:52px; right:0; z-index:100;
      -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);
}
.user_info_pop ol {padding:5px 5px;}
.user_info_pop li {}
.user_info_pop li a {display:block; padding:5px 10px; line-height:2; color:#333; font-size:13px; line-height:1;}
.user_info_pop li a:hover {text-decoration:underline;}
/* 권한선택 */
.user_info_pop .authority_select {border-top:solid 1px #ccc; padding:5px; text-align:center;}
.user_info_pop .authority_select select {width:100%; font-size:13px;}

.btn_sidemenu {display:none;}

/* 모바일 사이드 메뉴 */
.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 {}
.loginbox_mobile .login_tab ul li {flex-basis:50%; flex-shrink:1; text-align:center; border-bottom:solid 3px #0778b3;}
.loginbox_mobile .login_tab ul li a {display:block; padding:5px 0; color:#999; font-size:16px; font-weight:normal;}
.loginbox_mobile .login_tab ul li a.active {color:#fff; background-color:#0778b3; border-radius:10px 10px 0 0;}

.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:#0778b3; border:solid 2px #0778b3; 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:#333; 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/TTC/ctl/main/icon_login_id_m.png') no-repeat 10px 9px;}
.loginbox_mobile .normal_box .input_pw {background:url('/images/TTC/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/TTC/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; background:url('/images/TTC/ctl/sidemenu/cert.png') no-repeat 95% center;}
ul.gnb_mobile>li a.title.active {background-color:#fff; color:#009688; font-weight:600; background:url('/images/TTC/ctl/sidemenu/cert_active.png') no-repeat 95% center;}
ul.gnb_mobile>li .submenu {padding:0 10px 10px; background-color:#fff;}
ul.gnb_mobile>li .submenu>ul {background-color:#fff;}
ul.gnb_mobile>li .submenu>ul>li>a {display:block; padding:0 20px 0 30px; 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:#aaa; position:absolute; top:calc(50% - 1px); left:20px;}
ul.gnb_mobile>li .submenu>ul>li.first>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:0 15px; color:#3c3c3c; font-size:13px;}
ul.gnb_mobile>li .submenu>ul>li ol.depth3>li.active a {color:#009c97;}
ul.gnb_mobile>li .submenu>ul>li ol.depth3>li:hover a {color:#009c97; 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:50%; 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/TTC/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/TTC/ctl/sidemenu/icon_power.png') no-repeat center center;}

/*///////////////////////////////////////////////////////////////////////////////////////////////
 로그인
 ///////////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////
 로그인
 ///////////////////////////////////////////////////////////////////////////////////////////////*/
.login_page {}
.login_page .outline {padding:200px 0 50px; text-align:center; vertical-align:middle; background-color:#0778b3;}

.login_page .login_guide {margin-top:20px; padding:30px 0; text-align:left; 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;}
.login_page .login_guide ul {margin:0 auto; width:650px;}
.login_page .login_guide ul li {padding:3px 0; padding-left:10px; background:url('/images/ctl/bullet_dot.png') no-repeat left 12px;}

/* 모바일 */
@media all and (max-width:700px){
      .login_page .outline {padding:150px 0 30px;}
      .login_page .login_guide {padding:10px 10px;}
      .login_page .login_guide ul {width:100%;}
}

@media all and (max-width:480px){
      .login_page .outline {padding:100px 0 30px;}
}

.membership_box {margin:0 auto; width:400px;}
.membership_box h3 {padding:5px 0 10px; text-align:center; font-size:18px;}
.membership_box button {padding:0; margin-bottom:5px; width:100%; height:40px; color:#fff; font-size:16px; border-radius:3px; line-height:30px; overflow:hidden; box-sizing:border-box;}
.membership_box button:hover {opacity:0.9;}
.membership_box .normal_type button.btn_mormal_type {background-color:#003366;}
.membership_box .normal_type button.btn_login_total {background-color:#464646;}
.membership_box .normal_type input[type="text"] {width:100%; height:40px; border-radius:3px 3px 0 0; color:#333; box-sizing:border-box; border:solid 1px #a79b9c;
      font-family:'나눔바른고딕','나눔고딕','돋움',dotum,AppleGothic,serif
}
.membership_box .normal_type input[type="password"] {margin-bottom:5px; width:100%; height:40px; border-radius:0 0 3px 3px; color:#333; border:solid 1px #a79b9c; border-top:none; box-sizing:border-box;
      font-family:'나눔바른고딕','나눔고딕','돋움',dotum,AppleGothic,serif
}
.membership_box .func_area {padding-top:10px; border-top:solid 1px #f2f2f2;}
.membership_box .func_area a {display:inline-block; padding:0 10px; line-height:1; font-weight:600; border-left:solid 1px #ccc;}
.membership_box .func_area a:hover {text-decoration:underline;}
.membership_box .func_area a:first-child, .m_membership_box .func_area a.first {border-left:none;}


/* 테스크탑 */
@media all and (max-width:1200px){
}
/* 테블릿*/
@media all and (max-width:480px){
      .membership_box {margin:30px auto 15px; width:80%; text-align:center;}
      .membership_box button {padding:0; width:100%; height:40px; color:#fff; font-size:16px; border-radius:3px; line-height:40px; overflow:hidden;}
      .membership_box .normal_type input[type="text"], .membership_box .normal_type input[type="password"] {width:100%;}
}
/* 모바일*/
@media all and (max-width:320px){
      .membership_box .func_area a {padding:0 5px; letter-spacing:-1px; font-size:13px;}
}


/* 전체메뉴 //////////////////////////////////////////////////////////////////////////////////////////////////////*/
.totalmenu_box {display:flex; padding:100px; box-sizing:border-box; width:100%; height:100%; 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);
}

.menu_title {margin-right:30px; padding:30px 50px 0 0; width:25%; line-height:1.2; box-sizing:border-box; position: relative; border-right:solid 1px #ccc;}
.menu_title img {display:block; padding-bottom:10px;}
.menu_title strong {display:block; font-size:40px; 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:#02476d; transition: all 0.1s;}

ul.totalmenu_list {padding-top:30px; width:75%; box-sizing:border-box;}
ul.totalmenu_list>li {float:left; padding-left:50px; margin-bottom:50px; width:33%; box-sizing:border-box;}
ul.totalmenu_list>li .outline {}
ul.totalmenu_list>li .title {width:100%;}
ul.totalmenu_list>li .title strong {font-weight:600; font-size:24px; color:#000;}

ul.submenulist {padding:10px 0; height:230px;}
ul.submenulist li {padding:5px 10px;}
ul.submenulist li a {padding-left:20px; font-size:18px; color:#999; position:relative;}
ul.submenulist li a:after {content: '-'; display:block; font-size:20px; position:absolute; top:-3px; left:0;}
ul.submenulist li a:hover {color:#02476d;}

@media all and (max-width:1400px){
      .totalmenu_box {padding:100px 30px;}
      .menu_title {margin-right:0; padding:30px 30px 0 0; width:30%;}
      .menu_title strong {font-size:30px;}
      .menu_title span {font-size:14px;}

      a.btn_totalmenu_close {right:50px;}

      ul.totalmenu_list {width:70%; box-sizing:border-box;}
      ul.totalmenu_list>li .title strong {font-size:20px;}

      ul.submenulist {padding:7px 0;}
      ul.submenulist li {padding:7px;}
      ul.submenulist li a {display:block; padding-left:20px; font-size:16px;}
}

/* 테스크탑 */
@media all and (max-width:1200px){
      a.btn_sidemenu {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:30px; height:80px; position:absolute; top:0%; right:5px;}
      a.btn_sidemenu span {display:inline-block; width:80%; height:2px; background-color:#333;}
      .header.fixed a.btn_sidemenu span {background-color: #333;}

      .totalmenu_box {display:none;}
}
/* 테블릿*/
@media all and (max-width:1024px){
      a.btn_sidemenu {height:50px;}
      
}
@media all and (max-width:768px){
}
/* 모바일*/
@media all and (max-width:640px){
}

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


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 main_cont_Top
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
  .main_visual_box {border-radius:0; overflow:hidden; box-sizing:border-box;}
 .col_visual {position:relative;}
 .col_func {float:right; margin-right:-380px; width:380px; height:640px; color:#fff; background:url('/images/TTC/ctl/main/grid_right_bg.png') no-repeat #02476d bottom right; overflow:hidden; position:relative;}

.main_top {padding-top:70px;}
.main_top .outline {display:table; width:100%; overflow:hidden; position:relative;}

  /* 테스크탑 */
  @media all and (max-width:1400px){
       /* .main_visual_box {margin:0 10px; width:initial; border-radius:15px;} */
  }

  @media all and (max-width:1200px){
      .col_func {margin-right:-340px; width:340px; height:540px;}
  }

  @media all and (max-width:768px){
      .col_func {float:initial; margin-right:0; width:initial; height:initial; padding:15px 10px;}
  }

  /* 테블릿*/
  @media all and (max-width:768px){
  }
  /* 모바일*/
  @media all and (max-width:480px){
       .col_func {padding:10px;}
  }

 /* 메인 - 로그인 영역 ////////////////////////////////////////////////////////////////*/
  button.btn_login_go {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; color:#fff; width:100px; height:100px; border-radius:100%; background:linear-gradient(#2474dc, #ff6f32);
position:absolute; bottom:80px; right:80px; transition: all 0.3s ease-out;}
 button.btn_login_go i {font-size:26px;}
 button.btn_login_go:hover {background:linear-gradient(#175bb4, #cf531e);}

  /* 테스크탑 */
  @media all and (max-width:1200px){
      button.btn_login_go {width:80px; height:80px; bottom:60px; right:60px;}
  }

  /* 테블릿*/
  @media all and (max-width:768px){   
      button.btn_login_go {gap:3px; width:60px; height:60px; bottom:30px; right:30px;}
      button.btn_login_go i {font-size:20px;}
      button.btn_login_go span {font-size:12px;}
  }
  /* 모바일*/
  @media all and (max-width:480px){
      button.btn_login_go {width:60px; height:60px; bottom:15px; right:15px;}      
  }
  
.loginbox_float {width:100%; height:100%; display:flex; justify-content: center; align-items: center; background-color:rgba(0,0,0,0.7); position:fixed; top:0; left:0; z-index:200;}
.loginbox {width:380px; height:380px; padding:50px 50px; color:#fff; background:#003366; overflow:hidden; border-radius:30px; box-sizing:border-box; position:relative;}
a.btn_loginbox_close {position:absolute; top:20px; right:20px;}

/* 모바일*/
@media all and (max-width:480px){
      .loginbox {width:90%; height:330px; padding:30px;}
}


.loginbox .login_tab {margin-bottom:10px;}
.loginbox .login_tab ul {}
.loginbox .login_tab ul li {flex-basis:50%; flex-shrink:1; text-align:center; border-bottom:solid 2px #3f80dd;}
.loginbox .login_tab ul li a {display:block; padding:5px 0; color:#ffffff; font-size:18px; font-weight:normal; opacity:0.5;}
.loginbox .login_tab ul li a.active {color:#fff; background-color:#3f80dd; border-radius:10px 10px 0 0; opacity:1;}
 
.loginbox .total_box {}
.login_ment {margin-bottom:10px; font-size:14px; text-align:center;}

.loginbox .btn_main_login {width:100%; height:42px; font-size:16px; color:#fff; border:solid 2px #fff; background-color:transparent; border-radius:50px; position:relative; top:0;}
.loginbox .btn_main_login:hover {top:-3px;}
 
.loginbox .normal_box {}
.loginbox .normal_box input[type="text"],
.loginbox .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 rgba(256,256,256,0.2); transition: all 0.2s ease-out;}
.loginbox .normal_box input[type="text"]:focus,
.loginbox .normal_box input[type="password"]:focus {border-bottom:solid 1px #fff;}
.loginbox .normal_box input::placeholder {color:#fff;}
.loginbox .normal_box .input_id {background:url('/images/TTC/ctl/main/icon_login_id.png') no-repeat 10px 9px;}
.loginbox .normal_box .input_pw {background:url('/images/TTC/ctl/main/icon_login_pw.png') no-repeat 10px 9px;}
.loginbox .normal_box .func {padding-bottom:20px; text-align:right;} 
.loginbox .normal_box .func input[type="checkbox"] {border:none;}

.loginbox .top_title {height:47px; line-height:47px; color:#fff; text-align:center; background-color:#3f80dd; border-bottom:0px solid #fff; border-radius:10px;}
.loginbox .top_title span {font-size:20px;}
.loginbox .outline {padding:20px 0; border-radius:0 0 20px 20px;}
.loginbox .outline .info_insert {}
.loginbox .outline .func {}
.loginbox .outline .func input[type="checkbox"] {}
.loginbox .bottom {text-align:center;}
.loginbox .outline .bottom {padding-top:10px}
.loginbox .outline .bottom button.btn_main_login {width:100%; height:46px; font-size:16px; background-color:#ffb400; border-radius:50px;}
.loginbox .outline .bottom button.btn_main_login:hover {color:#fff; background-color:#02476d;}
 
/* 로그인 후 */
.loginbox .pc_userinfo {padding:10px 0; border-bottom:solid 1px #5398c3; position:relative;}
.loginbox .pc_userinfo .left {display:table; width:100%;}
.loginbox .pc_userinfo .left .user_txbox {display:table-cell; padding:5px 0 5px 35px; line-height:1.2; vertical-align:middle; color:#fff; background:url('/images/icon/icon_user_on.png') no-repeat left center;}
.loginbox .pc_userinfo .left .user_txbox strong {font-size:16px; color:#fff;}
.loginbox .pc_userinfo .right {position:absolute; top:calc(50% - 13px); right:0; z-index:10;}

.loginbox .selectbox {padding:15px 5px; border-bottom:solid 1px #5398c3;}
.loginbox .selectbox select {width:100%; color:#666; border-radius:5px; border:none;}

.loginbox .outline .bottom {padding-top:15px;}
.loginbox .outline .bottom button.btn_myclass {width:100%; height:42px; font-size:16px; color:#666; border:solid 2px #fff; background-color:#fff; border-radius:50px; position:relative; top:0;}
.loginbox .outline .bottom button.btn_myclass:hover {color:#5398c3;}
.loginbox .outline .bottom button.btn_myclass i {font-size:18px;}

 /* 메인 - 퀵배너 ////////////////////////////////////////////////////////////////*/
 .quick_banner {width:400px; padding-top:80px; position:relative; z-index:10;}
 .quick_banner .dot_gepline {width:100%; text-align:center; position:absolute; top:0; left:0;}
 .quick_banner .dot_gepline span {display:inline-block; margin:0 3px; width:5px; height:5px; background-color:#fff; border-radius:5px;}

 .quick_banner ul {display:table; margin:0 auto;}
 .quick_banner ul li {display:table-cell; padding:0 20px; text-align:center; vertical-align:top;}
 .quick_banner ul li a {}
 .quick_banner ul li img {}
 .quick_banner ul li span {display:block; padding-top:5px; line-height:1.2; font-size:18px; font-weight:normal;}

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

}

@media all and (max-width:1200px){
      .loginbox {height:340px; padding:40px 50px 0;}
      .quick_banner {padding-top:50px; width:initial;}
      .quick_banner ul li img {width:60px;}
}

/* 태블릿 */
@media all and (max-width:1024px){
      .quick_banner {width:auto; padding-top:0;}
      .quick_banner .dot_gepline {display:none;}
      .quick_banner ul li {padding:0 35px;}
}
/* 테블릿*/
@media all and (max-width:760px){
      .loginbox {height:initial; padding:20px 30px 0;}
      .loginbox button.btn_main_login {width:90%;}
      .quick_banner {width:auto; padding:30px 0 10px;}
      .quick_banner ul li {padding:0 25px;}
      .quick_banner ul li img {width:50px;}
      .quick_banner ul li span {font-size:16px;}

 }
 /* 모바일*/
 @media all and (max-width:480px){
      .quick_banner ul li {padding:0 15px;}
      .quick_banner ul li img {width:50px;}
 }



 /*////////////////////////////////////////////////////////////
  메인 : main_visual_rolling 리스트
  ////////////////////////////////////////////////////////////*/
  .visual_banner_zone {border-radius:0 0 100px 0; overflow:hidden;}

 .main_visual_rolling .slick-list {}

 .main_visual_rolling {margin-bottom:-9px !important;}
 .main_visual_rolling .outline {margin:0; background-repeat:no-repeat; background-size:cover; background-position:bottom center; position:relative;}
 .main_visual_rolling .outline a {display:block; width:100%; height:100%;}

 .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/TTC/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/TTC/ctl/main/mainvisual_navi_prev.png')  no-repeat center center; opacity: 1;
  }
  .visual_banner_zone .slick-next {
      right:20px;
      background:url('/images/TTC/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/TTC/ctl/main/mainvisual_navi_next.png')  no-repeat center center; opacity: 1;
  }

/*////////////////////////////////////////////////////////////////////////////////////////
 중간 배너
 ////////////////////////////////////////////////////////////////////////////////////////*/
.nav {position:absolute; top:-5px; right:10px;}
.nav a {display:inline-block; width:20px; height:20px; font-size:0; text-indent:-10000px; border:solid 1px #ccc; opacity:0.4;
      -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px;}
.nav a.play {background:url('/images/TTC/ctl/main/icon_control_play.png') #fff no-repeat center center;}
.nav a.pause {background:url('/images/TTC/ctl/main/icon_control_stop.png') #fff no-repeat center center;}
.nav a:hover {opacity:1; border:solid 1px #aaa;}
.RollDiv {margin:0 auto; width:90%; height:60px; overflow:hidden;}
.RollDiv > div {overflow:hidden; height:60px; width:1500px;}
.RollDiv > div > a{ float:left; display:block;}
.RollDiv > div > a > img{width:auto; height:65px; margin:0 50px;}

 .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;}

 /* 테스크탑 */
 @media all and (max-width:1400px){
 }
 @media all and (max-width:1200px){
 }
 @media all and (max-width:1024px){
 }      
 /* 테블릿*/
 @media all and (max-width:768px){
      .visual_banner_zone {border-radius:0 0 60px 0;}    
 }
 /* 모바일*/
 @media all and (max-width:480px){      
      .visual_banner_zone {border-radius:0 0 30px 0;}  
 }


  /*////////////////////////////////////////////////////////////
  메인 : kocw_rolling 리스트
  ////////////////////////////////////////////////////////////*/
  .kocw {margin:0 20px}

  .kocw .header_box {display:flex; margin:10px 10px 0; justify-content: space-between;}
  .kocw .header_box .box_pos {}
  .kocw .header_box .box_pos2 {margin-top:20px; padding-left:30px;}
  .kocw .header_box h3 {font-size:30px; color:#333333; line-height:1;}
  .kocw .header_box .btn_more span {vertical-align:middle;}
  .kocw .header_box .btn_more span.bar {display:block; width:128px; height:3px; line-height:0; background-color:#666666; position:relative;}
  .kocw .header_box .btn_more span.bar .point_bar {display:inline-block; color:#ff9e1a; font-size:20px; font-weight:600; position:absolute; top:0px; right:-2px;}

  .kocw .header_box .box_tabmenu {}
  .kocw .header_box .box_tabmenu ul {}
  .kocw .header_box .box_tabmenu ul li {display:inline-block;}
  .kocw .header_box .box_tabmenu ul li a {display:block; padding:0 15px; font-size:20px; color:#666666; border:solid 3px #fff; border-radius:30px;}
  .kocw .header_box .box_tabmenu ul li a:hover {color:#007849;}
  .kocw .header_box .box_tabmenu ul li a.active {color:#007849; border:solid 3px #007849;}

  /* 테스크탑 */
  @media all and (max-width:1200px){
      .kocw .header_box h3 {font-size:24px;}
      .kocw .header_box .box_tabmenu {}
      .kocw .header_box .box_tabmenu ul li a {display:block; padding:0 10px; height:26px; font-size:16px; line-height:26px; border:solid 2px #fff;}
      .kocw .header_box .btn_more span.bar {width:60px; top:-15px;}
  }
  @media all and (max-width:1024px){

  }
  /* 테블릿*/
  @media all and (max-width:768px){
       .kocw .header_box h3 {font-size:20px;}
       .kocw .header_box .box_pos {margin-top:0; padding-left:0; display:flex; justify-content:space-between;}
  }
  /* 모바일*/
  @media all and (max-width:480px){
       .kocw {margin:0; margin-bottom:50px;}
  }



  .kocw_zone {}

  .kocw_zone .slick-prev,
  .kocw_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-size:30% !important;
   }

   .kocw_zone .slick-prev:before {content: '';}
   [dir='rtl'] .kocw_zone .slick-prev:before {content: '';}

   .kocw_zone .slick-next:before {content: '';}
   [dir='rtl'] .kocw_zone .slick-next:before {content: '';}

   .kocw_zone .slick-prev {
       left:-15px;
       background:url('/images/TTC/ctl/main/kocw_navi_prev.png')  no-repeat center center; opacity: 0.7; z-index:10;
   }
   .kocw_zone .slick-prev:hover, .kocw_zone .slick-prev:focus {
       background:url('/images/TTC/ctl/main/kocw_navi_prev.png')  no-repeat center center; opacity: 1;
   }
   .kocw_zone .slick-next {
       right:-15px;
       background:url('/images/TTC/ctl/main/kocw_navi_next.png')  no-repeat center center; opacity: 0.7;
   }
   .kocw_zone .slick-next:hover, .kocw_zone .slick-next:focus {
       background:url('/images/TTC/ctl/main/kocw_navi_next.png')  no-repeat center center; opacity: 1;
   }


  .kocw_rolling .slick-list {}

  .kocw_rolling {margin:0 -25px; position:relative;}
  .kocw_rolling .outline {margin:0 25px; padding:20px 0 30px; background-repeat:no-repeat; background-size:cover; background-position:bottom center;}
  .kocw_rolling .outline a {display:block; height:100%; padding:20px 15px; background-color:#ddd; border-radius:30px; bottom:0; position:relative; transition:all 0.2s ease-out;}
  .kocw_rolling .outline a:hover {box-shadow:5px 5px 20px 0 #ccc; bottom:5px;}

  .kocw_rolling .outline a:hover .top,
  .kocw_rolling .outline a:hover .subject_box,
  .kocw_rolling .outline a:hover .professor {opacity:0.2;}
  .kocw_rolling .outline a:hover .kocw_icon_arrow {width:50px; height:50px; line-height:50px; background-color:#fff; bottom:calc(50% - 25px); right:calc(50% - 25px);}
  .kocw_rolling .outline a:hover .kocw_icon_arrow i {color:#333; font-size:22px;}

  .kocw_rolling .outline.cata1 a {background: url('/images/TTC/ctl/main/kocw_listbg_cata_01.png') #00b09d center center;}
  .kocw_rolling .outline.cata1 .kocw_icon_arrow {background-color:#00b09d;}
  .kocw_rolling .outline.cata2 a {background: url('/images/TTC/ctl/main/kocw_listbg_cata_02.png') #0087ac center center;}
  .kocw_rolling .outline.cata2 .kocw_icon_arrow {background-color:#0087ac;}
  .kocw_rolling .outline.cata3 a {background: url('/images/TTC/ctl/main/kocw_listbg_cata_03.png') #b7a300 center center;}
  .kocw_rolling .outline.cata3 .kocw_icon_arrow {background-color:#b7a300;}
  .kocw_rolling .outline.cata4 a {background: url('/images/TTC/ctl/main/kocw_listbg_cata_04.png') #028e50 center center;}
  .kocw_rolling .outline.cata4 .kocw_icon_arrow {background-color:#028e50;}
  .kocw_rolling .outline.cata5 a {background: url('/images/TTC/ctl/main/kocw_listbg_cata_05.png') #7cb000 center center;}
  .kocw_rolling .outline.cata5 .kocw_icon_arrow {background-color:#7cb000;}
  .kocw_rolling .outline.cata6 a {background: url('/images/TTC/ctl/main/kocw_listbg_cata_06.png') #df9d0e center center;}
  .kocw_rolling .outline.cata6 .kocw_icon_arrow {background-color:#df9d0e;}
  .kocw_rolling .outline.cata7 a {background: url('/images/TTC/ctl/main/kocw_listbg_cata_07.png') #4a69a7 center center;}
  .kocw_rolling .outline.cata7 .kocw_icon_arrow {background-color:#4a69a7;}


  .kocw_rolling .outline .top {display:flex; justify-content:space-between; padding:0 10px; padding-bottom:10px; border-bottom:solid 1px rgba(255,255,255,0.3); transition:all 0.2s ease-out;}
  .kocw_rolling .outline .top .cata {}
  .kocw_rolling .outline .top .cata span {display:inline-block; padding:0 10px; height:20px; line-height:20px; color:#fff; font-size:13px; border:solid 1px #fff; border-radius:30px;}
  .kocw_rolling .outline .top .result_star {color:#ff6600;}
  .kocw_rolling .outline .top .result_star i {}

  .kocw_rolling .outline .subject_box {padding:15px 10px 20px; height:170px; box-sizing:border-box;  transition:all 0.2s ease-out;}

  .kocw_rolling .outline .subject_box .info {margin-top:30px; color:#fff;}
  .kocw_rolling .outline .subject_box .info span {font-weight:400;}
  .kocw_rolling .outline .subject_box .info span.element_type {display:inline-block; margin-right:5px; padding-right:15px; position:relative;}
  .kocw_rolling .outline .subject_box .info span.element_type::after {display:block; content:'|'; font-size:14px; font-weight:normal; opacity:0.5; position:absolute; top:0; right:0;}
  .kocw_rolling .outline .subject_box .info i {opacity:0.5;}

  .kocw_rolling .outline .subject_box .subject {}
  .kocw_rolling .outline .subject_box .subject strong {display:block; color:#fff; font-size:26px; font-weight:normal; line-height:28px;}

  .kocw_rolling .outline .professor {padding:0 20px; height:50px; line-height:50px; background-color:#fff; border-radius:50px;  transition:all 0.2s ease-out;}
  .kocw_rolling .outline .professor .name_box {}
  .kocw_rolling .outline .professor i {font-size:16px; color:#666;}
  .kocw_rolling .outline .professor strong {font-size:16px; color:#333333;}

  .kocw_rolling .outline .kocw_icon_arrow {display:inline-block; width:36px; height:36px; line-height:36px; text-align:center; border-radius:36px; background-color:#000;
      position:absolute; bottom:27px; right:24px;  transition:all 0.3s ease-out;}
  .kocw_rolling .outline .kocw_icon_arrow i {color:#fff;}

  .kocw_rolling .slick-dots {bottom:-40px;}
  .kocw_rolling .slick-dots li {margin:0;}
  .kocw_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;}
  .kocw_rolling .slick-dots li.slick-active button:before {width:10px; background-color:#ff9d2f;}

  .list_more_func {padding:10px 0 0; text-align:center;}
  .list_more_func button.btn_list_more {width:50px; height:50px; background-color:#fff; border:solid 1px #ccc; border-radius:50px; transition:all 0.2s ease-out;}
  .list_more_func button.btn_list_more:hover {border:solid 1px #333;}
  .list_more_func button.btn_list_more i {font-size:20px; font-weight:normal; color:#333;}


  /* 테스크탑 */
  @media all and (max-width:1400px){
      .kocw_rolling .outline {margin:0 15px;}
      .kocw_rolling .outline .subject_box .subject strong {font-size:22px; line-height:24px;}
      .kocw_rolling .outline a {border-radius:20px;}
  }
  @media all and (max-width:1024px){
      .kocw {margin:0;}
      .kocw .header_box h3 {font-size:24px;}
      .kocw_zone {padding:10px 30px 10px;}

      .kocw_rolling {margin:0 -30px;}
      .kocw_rolling .outline {margin:0 10px;}
      .kocw_rolling .outline a {border-radius:15px;}
      .kocw_rolling .outline span.title {font-size:15px;}

      .kocw_rolling .outline .subject_box {padding:15px 10px 20px; height:200px;}
      .kocw_rolling .outline .subject_box .info {margin-top:100px;}
      .kocw_rolling .outline .subject_box .subject strong {font-size:20px; line-height:22px;}
  }
  /* 테블릿*/
  @media all and (max-width:768px){
      .kocw_zone {padding:0 30px;}
      .kocw .header_box {padding:0;}
      .kocw .header_box h3 {font-size:18px; line-height:32px;}
      .kocw .header_box .box_tabmenu ul li a {padding:0 7px; font-size:14px;}

      .kocw_rolling .outline .subject_box {height:160px;}
      .kocw_rolling .outline .subject_box .info {margin-top:60px;}
      .kocw_rolling .outline .subject_box .subject strong {font-size:18px; line-height:20px;}
      .kocw_rolling .slick-dots {bottom:-10px;}
  }
  /* 모바일*/
  @media all and (max-width:480px){
      .kocw_rolling .outline {margin:0 5px;}
      .kocw_rolling .outline span.title {font-size:14px;}

      .list_more_func button.btn_list_more {width:40px; height:40px;}
      .list_more_func button.btn_list_more i {font-size:16px; color:#666;}
  }


/*//////////////////////////////////////////////////////////////////
 소식
 //////////////////////////////////////////////////////////////////*/
.main_content {margin-top:65px; padding-bottom:50px;}
/* 테스크탑 */
 @media all and (max-width:1400px){
       .main_content .base_width {width:auto; padding:0 10px;}
 }
 @media all and (max-width:1024px){
      .main_content .base_width {display:block; grid-template-columns:initial;}
 }
 /* 테블릿*/
 @media all and (max-width:768px){ 
       .main_content {padding:0 0 50px;}
 }
 /* 모바일*/
 @media all and (max-width:480px){
      .main_content {margin-top:30px; padding:0 0 30px;}
 }
 
 .new_post_row {margin:0 20px}
  
 .new_post_row .header_box {display:flex; margin:10px 10px 0; justify-content: space-between;}
 .new_post_row .header_box .box_pos {}
 .new_post_row .header_box .box_pos2 {margin-top:20px; padding-left:30px;}
 .new_post_row .header_box h3 {font-size:30px; color:#333333; line-height:1;}
 .new_post_row .header_box .btn_more span {vertical-align:middle;}
 .new_post_row .header_box .btn_more span.bar {display:block; width:128px; height:3px; line-height:0; background-color:#666666; position:relative;}
 .new_post_row .header_box .btn_more span.bar .point_bar {display:inline-block; color:#ff9e1a; font-size:20px; font-weight:600; position:absolute; top:0px; right:-2px;}

 .new_post_row .header_box .box_tabmenu {}
 .new_post_row .header_box .box_tabmenu ul {}
 .new_post_row .header_box .box_tabmenu ul li {display:inline-block;}
 .new_post_row .header_box .box_tabmenu ul li a {display:block; padding:0 15px; font-size:20px; color:#666666; border:solid 3px #fff; border-radius:30px;}
 .new_post_row .header_box .box_tabmenu ul li a:hover {color:#333333;}
 .new_post_row .header_box .box_tabmenu ul li a.active {color:#333333; border:solid 3px #333333;}

 /* 테스크탑 */
 @media all and (max-width:1200px){
      .new_post_row .header_box h3 {font-size:24px;}
      .new_post_row .header_box .box_tabmenu {}
      .new_post_row .header_box .box_tabmenu ul li a {display:block; padding:0 10px; height:26px; font-size:16px; line-height:26px; border:solid 2px #fff;}
      .new_post_row .header_box .btn_more span.bar {width:60px; top:-15px;}
 }
 @media all and (max-width:1024px){      
      .new_post_row {margin:0}
 }
 /* 테블릿*/
 @media all and (max-width:768px){ 
      .new_post_row .header_box h3 {font-size:18px; line-height:32px;}
      .new_post_row .header_box .box_tabmenu ul li a {padding:0 7px; font-size:14px;}
      .new_post_row .header_box .box_pos {margin-top:0; padding-left:0; display:flex; justify-content:space-between;}
 }
 /* 모바일*/
 @media all and (max-width:480px){
      .new_post_row {margin-bottom:0; margin-top:30px;}
 }
 

  .board_zone {}  
  .board_rolling {margin:0 -25px; position:relative;}
  .board_rolling .outline {padding:20px 0;}
  .board_rolling .outline a {display:block; margin:0 25px; padding:30px 30px 30px; border:solid 1px #ccc; background-color:#fff; transition: all 0.3s; border-radius:30px; position:relative; top:0;}
  .board_rolling .outline a:hover {box-shadow:5px 5px 20px 0 #ccc; color:#0778b3; border:solid 1px #eee; top:-7px;}
  .board_rolling .outline .row_top {overflow:hidden; margin-bottom:30px;}
  .board_rolling .outline .row_top .cata_new {float:left; color:#ff9e1a;}
  .board_rolling .outline .row_top .date {float:right; color:#999999;}
  
  .board_rolling .outline .cont {}
  .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:55px; 
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden;
        text-overflow:ellipsis}
  
  .board_rolling .outline .deatil_view {margin-top:15px; text-align:right;}
  .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; border-radius:20px;}
}
@media all and (max-width:1200px){
      
}
@media all and (max-width:1024px){
      .board_rolling .outline .row_top {margin-bottom:20px;}
      .board_rolling .outline a {border-radius:15px; padding:15px 15px 15px;}

      .board_rolling .outline .cont .title {font-size:18px; line-height:22px;
            height:46px; 
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
            text-overflow:ellipsis}
      .board_rolling .outline .cont .lead_txt {display:none; margin-bottom:20px; font-size:14px; line-height:16px;
            height:50px; 
            /* display:-webkit-box; */
            -webkit-line-clamp:3;
            -webkit-box-orient:vertical;
            overflow:hidden;
            text-overflow:ellipsis}
}
/* 테블릿*/
@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;}
}

.list_more_func {text-align:center;}
button.btn_list_more {width:36px; height:36px; background-color: #fff; border:solid 1px #999; border-radius: 100%;}

 /*/////////////////////////////////////////////////////////////////
  Q&A 배너
  /////////////////////////////////////////////////////////////////*/
 .qabanner .base_width {margin-bottom:80px;}
 .qabanner .base_width .banner_outline {display:flex; margin:0 20px; padding:15px 50px; box-sizing:border-box; align-items:center; justify-content:space-between; border:solid 3px #68ba9c; border-radius:15px; background-color:#f2f7ec;}
 .qabanner .base_width .banner_outline .left {display:flex; align-items:center;}
 .qabanner .base_width .banner_outline .left .img {}
 .qabanner .base_width .banner_outline .left .ment {padding-left:20px;}
 .qabanner .base_width .banner_outline .left .ment span {display:block; margin-top:5px; color:#666; line-height:1.2;}

 .qabanner .base_width .banner_outline .func {}
 .qabanner .base_width .banner_outline .func button {padding:0 20px 0 15px; height:40px; font-size:18px; color:#fff; font-weight:normal; background-color:#1aa96d; border:none; border-radius:40px;}
 .qabanner .base_width .banner_outline .func button i {color:#e4ff00; font-size:18px; font-weight:normal;}

 /* 테블릿*/
 @media all and (max-width:768px){
      .qabanner .base_width .banner_outline {margin:0 10px; padding:15px 30px;}
}
/* 모바일*/
@media all and (max-width:640px){
      .qabanner .base_width .banner_outline {display:block;}
      .qabanner .base_width .banner_outline .left .ment {padding-left:10px;}
      .qabanner .base_width .banner_outline .left .ment span {font-size:12px;}

      .qabanner .base_width .banner_outline .func {margin-top:5px; padding-top:10px; text-align:center; border-top:solid 1px #ccc;}
      .qabanner .base_width .banner_outline .func button {text-align:center; font-size:16px;}
      .qabanner .base_width .banner_outline .func button i {font-size:16px;}
}


.dot_navi {text-align:center;}
.dot_navi a {display:inline-block; margin:0 4px; font-size:0; text-indent:-10000px; width:17px; height:17px; background-color:#d7d7d7; -webkit-border-radius:20px; -moz-border-radius:20px; -o-border-radius:20px; border-radius:20px;}
.dot_navi a:hover {background-color:#999;}
.dot_navi a.active {width:45px; background-color:#1f4bb4;}
  /*////////////////////////////////////////////////////////////
  팝업 롤링 리스트
  ////////////////////////////////////////////////////////////*/
  .site_popup {width:100%; height:100%; background-color:rgba(0,0,0,0.8); position:fixed; left:0; top:0; z-index:1000;}
  
  .site_popup .popup_box {width:1300px; position:fixed; top:calc(50% - 280px); left:calc(50% - 650px)}
  .site_popup .popup_box .popup_header {margin:0 15px 10px;}
    
  .site_popup .popup_box .popup_header .pop_slogan {font-size:32px; color:#fff;
      word-break:keep-all;
      white-space:-moz-pre-wrap;
      white-space:-pre-wrap;
      white-space:-o-pre-wrap;
      word-wrap:break-word;}
  .site_popup .popup_box .popup_header .pop_slogan strong {font-size:32px; color:#00af9d;}

  .site_popup .popup_box .popup_header .title {position:relative;}
  .site_popup .popup_box .popup_header .title::after {display:block; content:''; width:calc(100% - 220px); height:1px; background-color:#ccc; opacity:0.3; margin:0 20px; position:absolute; left:200px; top:50%;}
  .site_popup .popup_box .popup_header .title h2 {display:inline-block; font-size:24px; color:#0093e3;}
  .site_popup .popup_box .popup_header .title h2 span {display:inline-block; font-size:24px; font-weight:normal; color:#0093e3;}
  
  .site_popup .popup_box .popup_footer {display:flex; justify-content:space-between; align-items:center; padding:30px 0; position:relative;}
  .site_popup .popup_box .popup_footer::after {display:block; content:''; width:calc(100% - 500px); height:1px; background-color:#ccc; opacity:0.3; margin:0 20px; position:absolute; left:400px; top:50%;}
  .site_popup .popup_box .popup_footer .function {}
  .site_popup .popup_box .popup_footer .function label {margin:0 5px; padding:0 15px; color:#fff; font-size:18px; font-weight:normal;}
  
  .site_popup .popup_box .popup_footer .close_func button.btn_main_popup_close {width:50px; height:50px; color:#fff; background:#0093e3; border-radius:100px; position:relative; transition:all 0.5s;}
  .site_popup .popup_box .popup_footer .close_func button.btn_main_popup_close i {font-size:24px; color:#fff; font-weight:normal; transition:all 0.3s;}
  .site_popup .popup_box .popup_footer .close_func button.btn_main_popup_close:hover i {transform: scale(0.7);}
  .site_popup .popup_box .popup_footer .close_func button.btn_main_popup_close::after {display:block; content:''; width:70px; height:70px; background:#0093e3; opacity:0.3; border-radius:100px; transition:all 0.3s;
      position:absolute; top:50%; left:50%; z-index:-1; margin:-35px 0 0 -35px;}
  .site_popup .popup_box .popup_footer .close_func button.btn_main_popup_close:hover::after {display:block; content:'';  width:90px; height:90px; background:#0093e3; opacity:0.1;
      position:absolute; top:50%; left:50%; z-index:-1; margin:-45px 0 0 -45px;}
  

  .popup_roll_list {margin:0 -20px;}
  .popup_roll_list .outline {margin:0 20px; border-radius:25px; background-color:#fff; overflow:hidden;}
  .popup_roll_list .outline .title {margin:0 20px; padding:35px 0 15px;}
  .popup_roll_list .outline .title strong {display:block; color:#333333; font-size:20px; line-height:26px;
      height:52px; 
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      text-overflow:ellipsis;}
  .popup_roll_list .outline:hover .title strong {color:#02476d;}
  .popup_roll_list .outline .lead_txt {margin:0 20px; padding:15px 0 25px; border-top:solid 1px #ccc;}
  .popup_roll_list .outline .lead_txt span {display:block; color:#666666; font-size:14px; line-height:18px;
      height:180px; 
      display:-webkit-box;
      -webkit-line-clamp:10;
      -webkit-box-orient:vertical;
      overflow:hidden;
      text-overflow:ellipsis;}

  .popup_roll_list .outline.thum_type {}
  .popup_roll_list .outline.thum_type .thum {height:180px; background-color:#f2f2f2; background-size:cover;}
  .popup_roll_list .outline.thum_type .title {padding:20px 0 10px;}
  .popup_roll_list .outline.thum_type:hover .title strong {color:#02476d;}
  .popup_roll_list .outline.thum_type .lead_txt {padding:5px 0 20px; border-top:none;}
  .popup_roll_list .outline.thum_type .lead_txt span {display:block; color:#666666; font-size:14px; line-height:18px;
      height:36px; 
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      text-overflow:ellipsis;}

  .popup_roll_list .slick-prev, 
  .popup_roll_list .slick-next {
       font-size: 0;
       line-height: 0;
       position: absolute;
       top: 50%;
       display: block;
       width: 26px;
       height: 34px;
       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;
   }
 
   .popup_roll_list .slick-prev:before {content: '';}
   [dir='rtl'] .popup_roll_list .slick-prev:before {content: '';}
   
   .popup_roll_list .slick-next:before {content: '';}
   [dir='rtl'] .popup_roll_list .slick-next:before {content: '';}
   
   .popup_roll_list .slick-prev {
       left:-30px;
       background:url('/images/ctl/main/pop_navi_prev.png')  no-repeat center center; opacity: 0.7; z-index:10;
   }
   .popup_roll_list .slick-prev:hover, .popup_roll_list .slick-prev:focus {
       background:url('/images/ctl/main/pop_navi_prev.png')  no-repeat center center; opacity: 1;
   }
   .popup_roll_list .slick-next {
         right:-30px;
       background:url('/images/ctl/main/pop_navi_next.png')  no-repeat center center; opacity: 0.7;
   }
   .popup_roll_list .slick-next:hover, .popup_roll_list .slick-next:focus {
       background:url('/images/ctl/main/pop_navi_next.png')  no-repeat center center; opacity: 1;
   } 

   .popup_roll_list .slick-dots {padding-left:180px; top:-38px; text-align:left; bottom:initial;}
   .popup_roll_list .slick-dots li {margin:0;}
   .popup_roll_list .slick-dots li button:before {opacity:1; color:#cccccc; content:''; width:10px; height:10px; background-color:#ccc; border-radius:6px; transition: all 0.5s;}
   .popup_roll_list .slick-dots li.slick-active button:before {width:10px; background-color:#0093e3;}
    
/* 데스크탑 */
@media all and (max-width:1400px){
      .site_popup .popup_box {width:90%; position:fixed; top:calc(50% - 200px); left:5%;}      
}
/* 테블릿 */
@media all and (max-width:1024px){
      .site_popup .popup_box .popup_header .pop_slogan {margin-bottom:15px; font-size:28px; line-height:1.2;}
      .site_popup .popup_box .popup_header .pop_slogan strong {font-size:28px;}

      .popup_roll_list {margin:0 -10px;}
      .popup_roll_list .outline {margin:0 10px;}

      .site_popup .popup_box .popup_footer .function label {margin:0 5px; padding:0 5px; font-size:16px;}
}
/* 테블릿 */
@media all and (max-width:480px){      
      .site_popup .popup_box {width:100%; top:calc(50% - 250px); left:0;}

      .site_popup .popup_box .popup_header .title h2 {font-size:18px;}
      .site_popup .popup_box .popup_header .title h2 span {font-size:18px;}
      .site_popup .popup_box .popup_header .function {position:relative;} 

      .site_popup .popup_box .popup_footer {padding:0 20px;}
      .site_popup .popup_box .popup_footer .function label {margin:0; font-size:13px;}
      
      .site_popup .popup_box .popup_footer .close_func {padding:15px 0;}
      .site_popup .popup_box .popup_footer .close_func button.btn_main_popup_close {width:32px; height:32px;}
      .site_popup .popup_box .popup_footer .close_func button.btn_main_popup_close i {font-size:16px;}
      .site_popup .popup_box .popup_footer .close_func button.btn_main_popup_close::after {display:block; content:''; width:46px; height:46px; background:#0093e3; margin:-23px 0 0 -23px;}
      .site_popup .popup_box .popup_footer .close_func button.btn_main_popup_close:hover::after {display:block; content:'';  width:90px; height:90px; background:#0093e3; opacity:0.1;
            position:absolute; top:50%; left:50%; z-index:-1; margin:-45px 0 0 -45px;}
      
      .popup_roll_list .slick-dots {padding-left:130px; top:-35px;}
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 Footer
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#footer {width:100%; color:#666666; background-color:#fff; position:relative;}
.base_width {position:relative;}
.footer_top {display:flex; padding:5px 50px; justify-content:space-between; align-items:center; border-radius:20px 20px 0 0; background-color:#282828;}
.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:#666; 
      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;}
.footer_top ul.footer_menu li a:hover {text-decoration:underline;}
.footer_top ul.footer_menu li a.btn_footer_policy {color:#ff8526;}

.footer_copy {display:flex; align-items:center; gap:25px; padding:20px; padding-bottom:50px; color:#666; font-weight:normal; 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:0;}
.footer_copy .copyright {color:#666666;}


/* 주요사이트 */
.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; position:relative;}
.relative_site a.btn_siteview .title {display:inline-block; padding-left:10px; color:#cccccc; font-weight:normal;}
.relative_site a.btn_siteview i {padding:0 7px; 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:40px; right:0;}
.relative_site .site_list ul {background-color:#fff; border:solid 1px #ccc; border-radius:10px 10px 0 0;}
.relative_site .site_list ul li {padding:7px 10px; border-bottom:solid 1px #ddd;}
.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;}

/* Go_top */
a.go_page_top {display:inline-block; width:50px; height:50px; line-height:50px; text-align:center; border-radius:50px; background-color:#0778b3; overflow:hidden;
       position:fixed; bottom:100px; right:10px; z-index:1; box-shadow:0 0 10px rgba(0,0,0,0.2);}
a.go_page_top i {color:#fff; transition:0.3s;}
a.go_page_top:hover {background-color:#7fbc03;}

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

      .relative_site {display:none;}
      .footer_copy {display:flex; flex-direction:column; align-items: start; gap:10px;}
      .footer_copy .footer_logo {display:none;}
      .footer_copy {padding-left:10px;}
}
/* 테블릿 */
@media all and (max-width:480px){      
      #footer {padding-bottom:0;}      
      .footer_copy .adress {font-size:13px;}
      .footer_copy .copyright {font-size:12px;}
}

/* 모바일 홈화면 바로가기 추가 */
.shortcut {padding:5px 0; width:100%; background-color:#fff; box-shadow: 5px 5px 7px 5px gray; overflow:hidden; position:fixed; bottom:0; left:0; z-index:10; display:none;}
.shortcut .left {padding-left:5px; float:left;}
.shortcut .left a.btn_shortcut_add {display:block; padding-left:50px; height:47px; line-height:47px; font-size:16px; background:url('/images/BLU3/common/shortcut/logo_simbol_shortcut.png') no-repeat left center;}
.shortcut .right {float:right;}
.shortcut .right a.btn_shortcut_close {display:block; width:47px; height:47px; background:url('/images/BLU3/common/shortcut/btn_close.png') no-repeat center center;}


/*개인정보 이용약관 브랜드컬러*/
.person_agree {background-color:#02476d;}

.d-none {display:none;}