@charset "utf-8";

/* mainSection */
.mainSection {position: relative; width: 1240px; margin: 0px auto; z-index: 1;}
    .mainSection.type01 {margin: 33px auto 0;}
    .mainSection.type02 {height: 1040px;}
    .mainSection.type03 {margin: 60px auto;}

div.main_slide_area {position: relative; display: inline-block; width: 822px; height: 382px; margin-right: 29px; float: left;}
    div.main_slide_area img {position: relative; width: 100%; max-height: 382px; border-radius: 14px;}
    div.main_slide_area .swiper-container {border-radius: 14px;}
    
div.page_btn_area {overflow: hidden; position: absolute; width: 235px; height: 44px; bottom: 0px; left: 0px; font-size: 0px; background: #393d40; z-index: 500; border-radius: 0 14px 0 14px;}
    div.page_btn_area a {position: relative; display: inline-block; width: 45px; height: 44px; top: auto; left: auto; right: auto; margin-top: auto; border-right: 1px solid #777777; opacity: 1 !important;}
    div.page_btn_area a:hover {background-color: #000;}
    div.page_btn_area a::after {content: none;}
    div.page_btn_area a.swiper-button-prev {background: url('../images/common/main_slide_prev.png') no-repeat center center;}
    div.page_btn_area a.swiper-button-prev:hover {background: url('../images/common/main_slide_prev_hover.png') no-repeat center center #000;}
    div.page_btn_area a.swiper-button-next {background: url('../images/common/main_slide_next.png') no-repeat center center;}
    div.page_btn_area a.swiper-button-next:hover {background: url('../images/common/main_slide_next_hover.png') no-repeat center center #000;}
    div.page_btn_area .play_btn.stop {background: url('../images/common/main_slide_stop.png') no-repeat center center;}
    div.page_btn_area .play_btn.stop:hover {background: url('../images/common/main_slide_stop_hover.png') no-repeat center center #000;}
    div.page_btn_area .play_btn.play {background: url('../images/common/main_slide_play.png') no-repeat center center;}
    div.page_btn_area .play_btn.play:hover {background: url('../images/common/main_slide_play_hover.png') no-repeat center center #000;}
    div.page_btn_area div.slideNum_area {display: inline-block; width: 100px; height: 45px; line-height: 45px; font-size: 15px; color: #fff; text-align: center; vertical-align: middle;}
    div.page_btn_area .swiper-pagination {display: none !important;}
/**
* 메인페이지 로그인 버튼
 */
    div.login_area {overflow: hidden; display: inline-block; width: 389px; height: 382px; box-shadow: 4px 4px 20px 6px rgba(0,0,0,0.05); border-radius: 14px;}
    /*div.login_area > div {padding: 25px 40px 20px 40px;}*/
    /*div.login_area > div {padding: 25px 40px 40px 40px;}*/
    div.login_area > div {padding: 25px 40px 40px 40px;}
    div.login_area div strong {display: block; margin-bottom: 10px; font-size: 28px; font-weight: 500; color: #333;}
    div.login_area div p {margin-bottom: 30px; font-size: 16px; color: #888; letter-spacing: -0.04em;}
    div.login_area div.input_area {margin-bottom: 25px; background-color: #ececec; border-radius: 50px;}
    div.login_area div.input_area input {width: 100%; height: 60px; padding: 0 20px 0 45px; font-size: 16px; background-color: transparent; border: 0px;}
    /*div.login_area div.input_area input {width: 100%; height: 65px; padding: 0 20px 0 45px; font-size: 16px; background-color: transparent; border: 0px;}*/
    div.login_area div.input_area.id {background: url('../images/icon/icon_id.png') no-repeat left 15px center #ececec;}
    div.login_area div.input_area.pw {background: url('../images/icon/icon_pw.png') no-repeat left 15px center #ececec;}
    div.login_area a.login_btn {display: block; width: 100%; height: 45px; color: #fff; font-size: 18px; line-height: 45px; text-align: center; border-radius: 50px; background: linear-gradient(to right, #2b8cc6, #2bbccf);}

    div.login_area a.oacx_login_btn {display: block; width: 100%; height: 70px; color: #FFFFFF; border-style: solid; border-color: #dddddd; border-width: 1px; font-size: 25px; line-height: 65px; border-radius: 10px; background: url('../images/icon/icon_certificate.png') no-repeat center left 26px #374151;margin-top: 15px; background-size: 23px}
    div.login_area a.oacx_login_btn span {position: relative; padding-left: 90px;}
    div.login_area a.oacx_login_btn span::before {position: absolute; display: inline-block; content: ""; width: 2px; height: 40px; top: 0px; left: 70px; background-color: #dddddd;}

    /*div.login_area a.naver_login_btn {display: block; width: 100%; height: 65px; color: #333333; border-style: solid; border-color: #dddddd; border-width: 1px; font-size: 17px; line-height: 62px; border-radius: 10px; background: url('../images/common/login_naver2.png') no-repeat center left 25px #FFFFFF;margin-top: 15px;}*/
    div.login_area a.naver_login_btn {display: block; width: 100%; height: 45px; color: #333333; border-style: solid; border-color: #dddddd; border-width: 1px; font-size: 16px; line-height: 45px; border-radius: 10px; background: url('../images/common/login_naver2.png') no-repeat center left 25px #FFFFFF;margin-top: 15px;}
    div.login_area a.naver_login_btn span {position: relative; padding-left: 90px;}
    div.login_area a.naver_login_btn span::before {position: absolute; display: inline-block; content: ""; width: 1px; height: 20px; top: 3px; left: 70px; background-color: #dddddd;}

    div.login_area a.kakao_login_btn {display: block; width: 100%; height: 45px; color: #333333; border-style: solid; border-color: #dddddd; border-width: 1px; font-size: 16px; line-height: 45px; border-radius: 10px; background: url('../images/common/ico_login_kakao.png') no-repeat center left 14px #FFFFFF;margin-top: 15px; background-size: 13%;}
    div.login_area a.kakao_login_btn span {position: relative; padding-left: 90px;}
    div.login_area a.kakao_login_btn span::before {position: absolute; display: inline-block; content: ""; width: 1px; height: 20px; top: 3px; left: 70px; background-color: #dddddd;}
    div.login_area a.pass_login_btn {display: block; width: 100%; height: 45px; color: #fff; font-size: 16px; line-height: 45px; border-radius: 10px; background: url('../images/common/login_pass.png') no-repeat center left 15px #8951ff;margin-top: 15px;}
    div.login_area a.pass_login_btn span {position: relative; padding-left: 90px;}
    div.login_area a.pass_login_btn span::before {position: absolute; display: inline-block; content: ""; width: 1px; height: 20px; top: 3px; left: 70px; background: rgba(255,255,255,0.5);}

    div.login_area > ul {border-top: 1px solid #dddddd;}
    div.login_area > ul > li {display: inline-block; width: 50%; height: 55px; float: left;}
    div.login_area > ul > li + li {border-left: 1px solid #dddddd;}
    div.login_area > ul > li a {display: block; height: 100%; font-size: 14px; color: #000; text-align: center; padding-left:20px;}
    div.login_area > ul > li a span {display: block; padding-top: 17px;}
    div.login_area > ul > li a.find_idpw_btn {background: url('../images/common/find_bg.png') no-repeat calc(50% - 45px) 50%; background-size:30px;}
    div.login_area > ul > li a.memberjoin_btn {background: url('../images/common/join_bg.png') no-repeat calc(50% - 40px) 50%; background-size:30px;}

div.member_info_area {overflow: hidden; display: inline-block; width: 389px; height: 382px; padding: 33px; box-shadow: 4px 4px 20px 6px rgba(0,0,0,0.05); border-radius: 14px;}
    div.member_info_area span.member_picture {display: none; overflow: hidden; float: left; width: 58px; height: 58px; margin-right: 20px; border-radius: 50%;}
    div.member_info_area span.member_picture img {width: 58px; height: 58px;}
    div.member_info_area div.member_info {overflow: hidden; display: block; vertical-align: middle;}
    div.member_info_area div.member_info p {margin-bottom: 10px; font-size: 18px; color: #333; letter-spacing: -0.04em;}
    div.member_info_area div.member_info p span {color: #018f9b;}
    div.member_info_area div.member_info span.organize {overflow: hidden; display: block; max-height: 40px; font-size: 14px; color: #888;}
    div.member_info_area div.member_info span.organize + a {margin-top: 5px;}
    div.member_info_area div.member_info a {display: inline-block; width: 81px; height: 24px; font-size: 13px; color: #666; text-align: center; line-height: 22px; border: 1px solid #dddddd; border-radius: 10px;}
    div.member_info_area ul {overflow: hidden; /*margin-top: 23px;*/ margin-top: 15px;}
    div.member_info_area ul li {display: inline-block; width: calc(50% - 12px);}
    div.member_info_area ul li:first-child {float: left;}
    div.member_info_area ul li:last-child {float: right;}
    div.member_info_area ul li a {position: relative; display: inline-block; width: 100%; height: 51px; font-size: 16px; color: #333; line-height: 49px; border-radius: 50px;}
    div.member_info_area ul li a span {padding-left: 60px;}
    div.member_info_area ul li a.alarm_btn {border: 1px solid #7dd5ec; background-color: #dbf3fa;}
    div.member_info_area ul li a.alarm_btn::before {position: absolute; display: inline-block; content: ""; width: 35px; height: 35px; top: 7px; left: 10px; background: url('../images/icon/icon_alarm.png') no-repeat center center #42c2e3; border-radius: 50%;}
    div.member_info_area ul li a.certificate_btn {border: 1px solid #a5a4ce; background-color: #e6e5f1;}
    div.member_info_area ul li a.certificate_btn::before {position: absolute; display: inline-block; content: ""; width: 35px; height: 35px; top: 7px; left: 10px; background: url('../images/icon/icon_certificate.png') no-repeat center center #7c7bb8; border-radius: 50%;}

    div.member_info_area ul.add_link {height: 150px;}

    div.member_info_area ul.add_link li{margin-top:3px;}
    div.member_info_area ul.add_link li a {height: 100%; line-height: 35px;}
    div.member_info_area ul.add_link li a > span {display: block; font-size: 16px; padding-top: 110px; color: #000; text-align: center; letter-spacing: -0.04em; padding-left:0px;}
    div.member_info_area ul.add_link li a > span.bg05 {background: url('../images/sub/main_link_bg05.png') no-repeat center 15px; background-size:120px;}
    div.member_info_area ul.add_link li a > span.bg06 {background: url('../images/sub/main_link_bg06.png') no-repeat center 15px; background-size:120px;}

    /*div.member_info_area ul.add_link {height: 150px;padding-top:20px;}*/
    /*div.member_info_area ul.add_link li {height: 50px;width:100%;}*/
    /*div.member_info_area ul.add_link li a{padding-left:20px; font-weight:bold;}*/

    /*div.member_info_area ul.add_link li.myedu_btn {border: 1px solid #7dd5ec;border-radius: 20px;}*/
    /*div.member_info_area ul.add_link li.paper_btn {border: 1px solid #a5a4ce;border-radius: 20px;margin-top:20px;}*/

    /*div.member_info_area ul.add_link li.myedu_btn a::before {position: absolute; display: inline-block; content: ""; width: 30px; height: 30px; top: 10px; left: 17px; background: url('../images/sub/main_link_bg07.png') no-repeat center center;background-size: contain;}*/
    /*div.member_info_area ul.add_link li.paper_btn a::before {position: absolute; display: inline-block; content: ""; width: 25px; height: 30px; top: 10px; left: 20px; background: url('../images/sub/main_link_bg08.png') no-repeat center center;background-size: contain;}*/

    /*div.member_info_area ul.add_link li.myedu_btn a span::before {position: absolute; display: inline-block; content: ""; width: 1px; height: 34px; top: 8px; left: 60px; background: rgba(140, 191, 220, 0.57);}*/
    /*div.member_info_area ul.add_link li.paper_btn a span::before {position: absolute; display: inline-block; content: ""; width: 1px; height: 34px; top: 8px; left: 60px; background: rgba(177, 140, 220, 0.57);}*/
    /*div.member_info_area ul.add_link li.myedu_btn:hover, :focus {background-color: rgba(140, 191, 220, 0.10);}*/
    /*div.member_info_area ul.add_link li.paper_btn:hover, :focus {background-color: rgba(177, 140, 220, 0.10);}*/

div.member_info_area div.member_calendar_area {/*margin-top: 23px;*/ margin-top: 10px;}
    div.member_info_area div.member_calendar_area div.member_calendar_top {position: relative;}
    div.member_info_area div.member_calendar_area div.member_calendar_top strong {font-size: 19px; color: #000;}
    div.member_info_area div.member_calendar_area div.member_calendar_top span {font-size: 15px; color: #888;}
    div.member_info_area div.member_calendar_area div.member_calendar_top div {position: absolute; top: 5px; right: 0px;}
    div.member_info_area div.member_calendar_area div.member_calendar_top div a {display: inline-block; width: 12px; height: 12px; font-size: 0px;}
    div.member_info_area div.member_calendar_area div.member_calendar_top div a + a {margin-left: 10px;}
    div.member_info_area div.member_calendar_area div.member_calendar_top div a.calendar_prev {background: url('../images/icon/icon_prev.png') no-repeat center center;}
    div.member_info_area div.member_calendar_area div.member_calendar_top div a.calendar_next {background: url('../images/icon/icon_next.png') no-repeat center center;}
    
    div.member_info_area div.member_calendar_area div.member_calendar {margin-top: 10px; padding: 3px 0; border: 1px solid #dddddd; border-radius: 10px;}
    div.member_info_area div.member_calendar_area div.member_calendar table.calendar_table {width: 100%; table-layout: fixed; font-size: 14px;}
    div.member_info_area div.member_calendar_area div.member_calendar table.calendar_table th {padding: 8px 0; font-weight: bold; color: #000; text-align: center;}
    div.member_info_area div.member_calendar_area div.member_calendar table.calendar_table td {position: relative; padding: 5px 0; font-size: 13px; text-align: center; color: #323232;}
    div.member_info_area div.member_calendar_area div.member_calendar table.calendar_table td.unactive {color: #cdcdcd;}
    div.member_info_area div.member_calendar_area div.member_calendar table.calendar_table td.schedule::before {position: absolute; display: inline-block; content: ""; width: 5px; height: 5px; top: 50%; left: 50%; margin: 11px 0 0 -2.5px; border-radius: 50%; background-color: #ff7065; z-index: 1;}
    div.member_info_area div.member_calendar_area div.member_calendar table.calendar_table td.today span {display: block; position: relative; z-index: 2; color: #fff;}
    div.member_info_area div.member_calendar_area div.member_calendar table.calendar_table td.today span::before {position: absolute; display: inline-block; content: ""; width: 20px; height: 20px; top: 50%; left: 50%; margin: -10px 0 0 -10px; border-radius: 50%; background-color: #01a4b2; z-index: -1;}
  
div.main_link_area {width: 100%; height: 247px; margin: 44px 0 80px 0; box-shadow: 4px 4px 20px 6px rgba(0,0,0,0.05); border-radius: 14px;}
    div.main_link_area ul {height: 100%;}
    div.main_link_area ul li {position: relative; display: inline-block; width: 25%; height: 100%; float: left; vertical-align: middle;}
    div.main_link_area ul li:hover {cursor: pointer;}
    /*div.main_link_area ul li a:hover {display: block;}
    div.main_link_area ul li a:focus {display: block;}
    !*div.main_link_area ul li a:focus-within {display: block;}*!*/
    div.main_link_area ul li + li {border-left: 1px solid #dddddd;}
    div.main_link_area ul li:nth-child(5) {display:none;}
    div.main_link_area ul li:nth-child(6) {display:none;}
    div.main_link_area ul li > span {display: block; font-size: 20px; padding-top: 190px; color: #000; text-align: center; letter-spacing: -0.04em;}
    div.main_link_area ul li span.bg01 {background: url('../images/sub/main_link_bg01.png') no-repeat center 45px;}
    div.main_link_area ul li span.bg02 {background: url('../images/sub/main_link_bg02.png') no-repeat center 45px;}
    div.main_link_area ul li span.bg03 {background: url('../images/sub/main_link_bg03.png') no-repeat center 45px;}
    div.main_link_area ul li span.bg04 {background: url('../images/sub/main_link_bg04.png') no-repeat center 45px;}
    div.main_link_area ul li span.bg05 {background: url('../images/sub/main_link_bg05.png') no-repeat center 45px;}
    div.main_link_area ul li span.bg06 {background: url('../images/sub/main_link_bg06.png') no-repeat center 45px;}
    div.main_link_area ul li a {position: absolute; display: block; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center;}
    div.main_link_area ul li a strong {display: none; margin-bottom: 50px; padding-top: 70px; font-size: 24px; color: #fff; text-align: center;}
    div.main_link_area ul li a span {position: relative; display: none; width: 110px; height: 35px; font-size: 16px; line-height: 31px; text-align: center; color: #fff; border: 2px solid #fff;}
    div.main_link_area ul li a:hover {display: block; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; background: #f06400; opacity: 0.9;}
    div.main_link_area ul li a:focus {display: block; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; background: #f06400; opacity: 0.9;}
    div.main_link_area ul li a:focus-within {display: block; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; background: #f06400; opacity: 0.9;}
    div.main_link_area ul li a:hover strong {display: block; margin-bottom: 50px; padding-top: 70px; font-size: 24px; color: #fff; text-align: center;}
    div.main_link_area ul li a:focus strong {display: block; margin-bottom: 50px; padding-top: 70px; font-size: 24px; color: #fff; text-align: center;}
    div.main_link_area ul li a:focus-within strong {display: block; margin-bottom: 50px; padding-top: 70px; font-size: 24px; color: #fff; text-align: center;}
    div.main_link_area ul li a:hover span {position: relative; display: inline-block; width: 110px; height: 35px; font-size: 16px; line-height: 31px; text-align: center; color: #fff; border: 2px solid #fff;}
    div.main_link_area ul li a:focus span {position: relative; display: inline-block; width: 110px; height: 35px; font-size: 16px; line-height: 31px; text-align: center; color: #fff; border: 2px solid #fff;}
    div.main_link_area ul li a:focus-within span {position: relative; display: inline-block; width: 110px; height: 35px; font-size: 16px; line-height: 31px; text-align: center; color: #fff; border: 2px solid #fff;}
    div.main_link_area ul li a:hover span::before {position: absolute; display: inline-block; content: ""; width: 37px; height: 18px; top: 7px; right: -20px; background: url('../images/icon/icon_arrow.png') no-repeat center center #f06400;}
    div.main_link_area ul li a:focus span::before {position: absolute; display: inline-block; content: ""; width: 37px; height: 18px; top: 7px; right: -20px; background: url('../images/icon/icon_arrow.png') no-repeat center center #f06400;}
    div.main_link_area ul li:first-child a {border-radius: 14px 0 0 14px;}
    div.main_link_area ul li:last-child a {border-radius: 0 14px 14px 0;}


.edu_tab_area {display: inline-block; height: 100%; padding: 50px 0;  background: url('../images/sub/main_edu_bg.png') no-repeat left 0px bottom 0px;}
    .edu_tab_area p.tit {font-size: 34px; color: #000;}
    .edu_tab_area p.tit strong {display: block;}
    .edu_tab_area ul {margin-top: 40px;}
    .edu_tab_area ul li + li {margin-top: 20px;}
    .edu_tab_area ul li:hover {cursor: pointer;}
    .edu_tab_area ul li:hover span {color: #000;}
    .edu_tab_area ul li span {display: block; font-size: 20px; color: #777777;}
    .edu_tab_area ul li a {display: block; width: 0px; height: 0px; top: 0px;}
    .edu_tab_area ul li a span {display: none;}
    .edu_tab_area ul li.active {position: relative; width: 313px; height: 110px; padding: 20px 0 20px 20px; background: #ffffff; box-shadow: 4px 4px 20px 6px rgba(0,0,0,0.05); border-radius: 14px;}
    .edu_tab_area ul li.active::before {position: absolute; display: inline-block; content: ""; width: 0px; height: 0px; top: 0px; right: -25px; border-top: 54px solid transparent; border-left: 30px solid #fff; border-bottom: 54px solid transparent; border-radius: 10px;}
    .edu_tab_area ul li.active span {color: #000; font-weight: bold;}
    .edu_tab_area ul li.active a {position: relative; display: inline-block; width: 110px; height: 35px; margin-top: 10px; font-weight: bold; font-size: 16px; line-height: 29px; text-align: center; color: #000; border: 3px solid #006cb8;}
    .edu_tab_area ul li.active a::before {position: absolute; display: inline-block; content: ""; width: 37px; height: 18px; top: 5px; right: -20px; background: url("../images/icon/icon_arrow02.png") no-repeat center center #fff;}
    .edu_tab_area ul li.active a span {display:block; font-size: 16px;}

    .edu_btn_area {position: relative; margin-top: 15px;}
    .edu_btn_area a {position: relative; display: inline-block; width: 42px; height: 42px; top: auto; left: auto; right: auto; margin: auto;; font-size: 0px; border-radius: 50%;}
    .edu_btn_area a + a {margin-left: 15px;}
    .edu_btn_area a::after {content: none;}
    .edu_btn_area a.edu_prev_btn {background: url('../images/common/main_slide_prev02.png') no-repeat top 11px left 13px #4c4c4c;}
    .edu_btn_area a.edu_next_btn {background: url('../images/common/main_slide_next02.png') no-repeat top 11px right 13px #4c4c4c;}

.tab_content_area {overflow: hidden; display: inline-block; width: 880px; height: calc(100% - 100px); padding: 50px 0 50px 43px; vertical-align: top; background-color: #f6f6f6; box-sizing: content-box;}
    .tab_content {display: none; width: 880px; }
    .tab_content.active {display: inline-block;}
    .swiper-container.pcType {display: block;}
    .swiper-container.mobileType {display: none;}
    
    .edu_none_con {text-align: center; margin-top: 115px; padding-bottom: 610px; background: url('../images/sub/edu_none_con.png') no-repeat center bottom;}
    .edu_none_con span {display: inline-block; padding: 9px 76px; font-size: 24px; color: #888888; background: #eee; border-radius: 50px;}

ul.edu_list_area {width: 880px; font-size: 0px;}
    ul.edu_list_area > li {display: inline-block; margin-bottom: 30px; vertical-align: top;}
    ul.edu_list_area > li + li {margin-left: 50px;}
    ul.edu_list_area > li:nth-child(4) {margin-left: 0px;}
    
    ul.edu_list_area li div.edu_box {width: 260px;}
    ul.edu_list_area li div.edu_box span.edu_division {font-size: 13px; color: #666;}
    ul.edu_list_area li div.edu_box p {overflow: hidden; height: 62px; margin-top: 10px; font-size: 26px; color: #333; line-height: 1.2em; letter-spacing: -0.04em;}
    ul.edu_list_area li div.edu_box div.thumbnail {overflow: hidden; width: 260px; height: 260px; max-width: 260px; max-height: 260px; margin-top: 20px; border-radius: 14px;}
    ul.edu_list_area li div.edu_box div.thumbnail img {display: block; width: 100%; height: 100%;}
    ul.edu_list_area li div.edu_box ul.edu_info {margin-top: 10px;}
    ul.edu_list_area li div.edu_box ul.edu_info li {display: block; padding: 5px 0;}
    ul.edu_list_area li div.edu_box ul.edu_info li + li {border-top: 1px solid #dddddd;}
    ul.edu_list_area li div.edu_box ul.edu_info li span {position: relative;}
    ul.edu_list_area li div.edu_box ul.edu_info li:first-child span {font-size: 15px; color: #010101;}
    ul.edu_list_area li div.edu_box ul.edu_info li:first-child span + span {margin-left: 0px;}
    ul.edu_list_area li div.edu_box ul.edu_info li:first-child span:first-child {width: 80px; vertical-align: top;}
    ul.edu_list_area li div.edu_box ul.edu_info li:first-child span:last-child {overflow: hidden; display: inline-block; width: calc(100% - 112px); padding-left: 15px; vertical-align: top;}
    ul.edu_list_area li div.edu_box ul.edu_info li:first-child span:last-child::before {top: 12px; left: 7px; margin-top: -5px;}
    ul.edu_list_area li div.edu_box ul.edu_info li:last-child span {font-size: 14px; color: #777;}
    ul.edu_list_area li div.edu_box ul.edu_info li span + span {margin-left: 15px;}
    ul.edu_list_area li div.edu_box ul.edu_info li span + span::before {position: absolute; display: block; content: ""; width: 1px; height: 10px; top: 50%; left: -9px; margin-top: -5px; background-color: #dddddd;}

/* 좋아요 버튼 */
i.like {display: inline-block; width: 18px; height: 16px; margin-right: 5px; background: url('../images/common/like.png') no-repeat center center; background-size: cover; vertical-align: middle;}
i.like span {display: inline-block; width: 0px; height: 0px; text-indent: -9999px;}
/* i.like:hover {background: url('../images/common/like_active.png') no-repeat center center; background-size: cover;} */
i.like.active { background: url('../images/common/like_active.png') no-repeat center center; background-size: cover;}

/* 모바일 더보기 버튼 */
a.m_more_btn {display: none;}

/* 자활TV영역 */
ul.kdissw_tv {font-size: 0px;}
    ul.kdissw_tv li {display: inline-block; width: 293px; height: 260px; vertical-align: middle;}
    ul.kdissw_tv li + li {margin-left: 22px;}
    ul.kdissw_tv li:nth-child(1), ul.kdissw_tv li:nth-child(5) {margin-left: 0px;}
    ul.kdissw_tv li:nth-child(-n+4) {margin-bottom: 40px;}
    ul.kdissw_tv li:first-child {}
    ul.kdissw_tv li:first-child p {font-size: 34px; color: #000; line-height: 1.3em;}
    ul.kdissw_tv li:first-child p strong {display: block;}
    ul.kdissw_tv li:first-child p:nth-child(2) {margin-top: 30px; font-size: 18px; color: #777777;}
    ul.kdissw_tv li:first-child a {position: relative; display: inline-block; width: 110px; height: 35px; margin-top: 30px; font-weight: bold; font-size: 16px; line-height: 29px; text-align: center; color: #000; border: 3px solid #006cb8;}
    ul.kdissw_tv li:first-child a::before {position: absolute; display: inline-block; content: ""; width: 37px; height: 18px; top: 5px; right: -20px; background: url('../images/icon/icon_arrow02.png') no-repeat center center #fff;}
    ul.kdissw_tv li a {}
    ul.kdissw_tv li a div.thumbnail_area {overflow: hidden; width: 293px; height: 163px; border-radius: 14px;}
    ul.kdissw_tv li a div.thumbnail_area img {width: 100%; height: 100%;}
    ul.kdissw_tv li a p.tit {overflow: hidden; height: 56px; margin-top: 15px; font-size: 19px; color: #000; letter-spacing: -0.04em; word-break: keep-all;}
    ul.kdissw_tv li a span.viewNum {font-size: 14px; color: #777777;}

/* 공지사항, 자료실 */
.main_list_tab {display: none;}
.main_list_area {position: relative; display: inline-block; width: 596px; vertical-align: top;}
    .main_list_area + .main_list_area {margin-left: 44px;}
    .main_list_area + .main_list_area::before {position: absolute; display: inline-block; content: ""; width: 1px; height: 100%; top: 0px; left: -22px; border-left: 1px dotted #a5a6a6;}
    .main_list_area > strong {font-size: 30px; color: #000; letter-spacing: -0.04em;} 
    .main_list_area ul.main_list {overflow: hidden; width: 596px; margin-top: 30px; font-size: 0px;}
    .main_list_area ul.main_list li {display: inline-block;}
    .main_list_area ul.main_list li a {display: inline-block; width: 290px; height: 127px; padding: 10px; border: 4px solid #fff; background-color: #fff; border-radius: 14px;}
    .main_list_area ul.main_list li a:hover {border: 4px solid #cc8600; background-color: #353535;}
    .main_list_area ul.main_list li a > span {padding: 1px 10px; font-size: 12px; color: #555555; background: #efefef; border-radius: 20px;}
    .main_list_area ul.main_list li a:hover > span {background: #4c4b4a; color: #cbcbcb;}
    .main_list_area ul.main_list li a div {margin-top: 20px;}
    .main_list_area ul.main_list li a div span {display: inline-block; width: 45px; font-size: 12px; color: #777777; text-align: center; line-height: 1.2em; vertical-align: middle; letter-spacing: -0.04em;}
    .main_list_area ul.main_list li a:hover div span {color: #999999;}
    .main_list_area ul.main_list li a div span span {font-size: 29px;}
    .main_list_area ul.main_list li a div p {overflow: hidden; display: inline-block; width: calc(100% - 60px); height: 50px; margin-left: 10px; font-size: 17px; color: #222; line-height: 1.5em; word-break: keep-all; vertical-align: middle;}
    .main_list_area ul.main_list li a:hover div p {color: #fff;}
    .main_list_area ul.main_list li:nth-child(1), ul.main_list li:nth-child(2) {margin-bottom: 15px;}
    .main_list_area ul.main_list li:nth-child(2), ul.main_list li:nth-child(4) {margin-left: 16px;}
    .main_list_area a.more_btn {position: absolute; display: inline-block; width: 28px; height: 28px; top: 11px; right: 0px; font-size: 0px; background: url('../images/icon/icon_plus.png') no-repeat center center;}

/* 자활 소통마당 */
.commu_area {height: 200px;}
    .commu_area > div {display: inline-block; vertical-align: top;}
    .commu_area .commu_con_area01 > strong {font-size: 34px; color: #000; letter-spacing: -0.04em; line-height: 1em;}
    .commu_area .commu_con_area01 > p {margin-top: 35px; font-size: 18px; color: #777777;}
    .commu_area .commu_con_area02 {float: right; font-size: 0px;}
    .commu_area .commu_con_area02 a {display: inline-block; width: 398px; height: 200px; padding: 30px 20px; border-radius: 14px;}
    .commu_area .commu_con_area02 a + a {margin-left: 25px;}
    .commu_area .commu_con_area02 a.commu_link_btn01 {background: url('../images/sub/main_link02_bg01.png') no-repeat top 20px right 25px #006cb8;}
    .commu_area .commu_con_area02 a.commu_link_btn02 {background: url('../images/sub/main_link02_bg02.png') no-repeat top 30px right 25px #006774;}
    .commu_area .commu_con_area02 a span.tit {font-size: 28px; color: #fff;}
    .commu_area .commu_con_area02 a p {margin-top: 10px; font-weight: 300; font-size: 15px; color: #fff; line-height: 1.4em;}
    .commu_area .commu_con_area02 a span.more {display: inline-block; margin-top: 20px; padding-right: 15px; font-size: 14px; color: #fff; opacity: 1; background: url('../images/common/more_bg.png') no-repeat center right;}

/* 메인팝업 */
.main_pop { overflow: hidden; position: absolute; min-width: 300px; left: 50%; z-index: 1001; border: 1px solid #ddd; background-color: #fff; transform: translate(-50%, 0);}
.main_pop .pop_con {}
.main_pop .pop_con img {width: 100%;}
.main_pop .pop_footer {overflow: hidden; border-top: 1px solid #ddd;}
.main_pop .pop_footer a {float: left; display: inline-block; width: 33.3%; font-size: 15px; color: #111; font-weight: 600; text-align: center; line-height: 55px; background-color: #fff;}
.main_pop .pop_footer a + a {border-left: 1px solid #ddd;;}

/* 인증서변경 팝업 */
.inquiry_area {overflow: hidden;}
.inquiry_area > strong {display: block; padding: 0 0 20px 0; font-size: 26px; color: #000; text-align: center; border-bottom: 1px solid #dddddd;}
.inquiry_area > p {margin: 20px 0 30px 0; font-size: 17px; color: #333; text-align: center; line-height: 2em; letter-spacing: -0.04em; word-break: keep-all;}
.inquiry_area > p > strong {font-size: 22px;}
.inquiry_area > p > strong > span {color: #01a4b2;}
.inquiry_area > .inquiry_input_area {margin: 0 0 20px 0; padding: 40px 0; border: 1px solid #ddd; border-radius: 15px;}
ul.certify_list {display: block; width: 320px; margin: 0 auto; text-align: center;}
ul.certify_list li {display: block; font-size: 0px;}
ul.certify_list li + li {margin-top: 10px;}
ul.certify_list li a {position: relative; display: block; width: 100%; height: 45px; color: #fff; font-size: 16px; text-align: left; line-height: 45px; border-radius: 10px;}
ul.certify_list li a.naver {color: #333333; border-style: solid; border-color: #dddddd; border-width: 1px; background: url('../images/common/login_naver2.png') no-repeat center left 25px #FFFFFF;}
ul.certify_list li a.kakao_login {color: #333333; border-style: solid; border-color: #dddddd; border-width: 1px; background: url('../images/common/ico_login_kakao.png') no-repeat center left 14px #FFFFFF; background-size: 13%;}
ul.certify_list li a.pass {background: url('../images/common/login_pass.png') no-repeat center left 15px #8951ff;}
ul.certify_list li a span {padding-left: 90px;}
ul.certify_list li a span::before {position: absolute; display: inline-block; content: ""; width: 1px; height: 20px; top: 50%; left: 70px; background-color: #dddddd; transform: translate(0, -50%);}


/* 테블릿 */
@media only screen and (max-width: 1024px) {

/* mainSection */
.mainSection {position: relative; width: 100%; margin: 0px auto; padding: 0 20px; z-index: 1;}
.mainSection.type01 {margin: 0px auto 0;}
.mainSection.type02 {height: auto; padding: 0 20px 40px 20px;}
.mainSection.type03 {margin: 40px auto;}

div.main_slide_area {position: relative; display: inline-block; width: 100%; height: auto; margin-right: 0px; float: none;}
div.main_slide_area img {width: 100%; height: 100%;}

div.page_btn_area {overflow: hidden; position: absolute; width: 235px; height: 44px; bottom: 0px; left: 0px; font-size: 0px; background: #393d40; z-index: 500; border-radius: 0 14px 0 14px;}
div.page_btn_area a {position: relative; display: inline-block; width: 45px; height: 44px; top: auto; left: auto; right: auto; margin-top: auto; border-right: 1px solid #777777; opacity: 1 !important;}
div.page_btn_area a:hover {background-color: #000;}
div.page_btn_area a::after {content: none;}
div.page_btn_area a.swiper-button-prev {background: url('../images/common/main_slide_prev.png') no-repeat center center;}
div.page_btn_area a.swiper-button-prev:hover {background: url('../images/common/main_slide_prev_hover.png') no-repeat center center #000;}
div.page_btn_area a.swiper-button-next {background: url('../images/common/main_slide_next.png') no-repeat center center;}
div.page_btn_area a.swiper-button-next:hover {background: url('../images/common/main_slide_next_hover.png') no-repeat center center #000;}
div.page_btn_area .play_btn.stop {background: url('../images/common/main_slide_stop.png') no-repeat center center;}
div.page_btn_area .play_btn.stop:hover {background: url('../images/common/main_slide_stop_hover.png') no-repeat center center #000;}
div.page_btn_area .play_btn.play {background: url('../images/common/main_slide_play.png') no-repeat center center;}
div.page_btn_area .play_btn.play:hover {background: url('../images/common/main_slide_play_hover.png') no-repeat center center #000;}
div.page_btn_area div.slideNum_area {display: inline-block; width: 100px; height: 45px; line-height: 45px; font-size: 15px; color: #fff; text-align: center; vertical-align: middle;}
div.page_btn_area .swiper-pagination {display: none !important;}

div.login_area {display: none;}
div.member_info_area {display: none;}

div.main_link_area {overflow: hidden; width: 100%; height: auto; margin: 26px 0 40px 0; box-shadow: 4px 4px 20px 6px rgba(0,0,0,0.05); border-radius: 14px;}
div.main_link_area ul {height: 100%;}
div.main_link_area ul li {position: relative; display: inline-block; width: 33.3333%; height: 100%; float: left; vertical-align: middle;}
div.main_link_area ul li + li {border-left: 1px solid #dddddd;}
div.main_link_area ul li:nth-child(4) {border-left: 0px;}
div.main_link_area ul li:nth-child(5) {display: block;}
div.main_link_area ul li:nth-child(6) {display: block;}
div.main_link_area ul li:nth-child(-n+3) {border-bottom: 1px solid #ddd;}
div.main_link_area ul li > span {display: block; font-size: 18px; padding: 87px 0 20px 0; color: #000; text-align: center; letter-spacing: -0.04em;}
div.main_link_area ul li span.bg01 {background: url('../images/sub/main_link_bg01.png') no-repeat center 20px; background-size: 66px 53px;}
div.main_link_area ul li span.bg02 {background: url('../images/sub/main_link_bg02.png') no-repeat center 20px; background-size: 66px 53px;}
div.main_link_area ul li span.bg03 {background: url('../images/sub/main_link_bg03.png') no-repeat center 20px; background-size: 66px 53px;}
div.main_link_area ul li span.bg04 {background: url('../images/sub/main_link_bg04.png') no-repeat center 20px; background-size: 66px 53px;}
div.main_link_area ul li span.bg05 {background: url('../images/sub/main_link_bg05.png') no-repeat center 20px; background-size: 66px 53px;}
div.main_link_area ul li span.bg06 {background: url('../images/sub/main_link_bg06.png') no-repeat center 20px; background-size: 66px 53px;}
/*div.main_link_area ul li a {position: absolute; display: none; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; background: #ffa000; opacity: 0.9;}*/
/*div.main_link_area ul li a strong {display: block; margin-bottom: 15px; padding-top: 40px; font-size: 18px; color: #fff; text-align: center;}*/
/*div.main_link_area ul li a span {position: relative; display: inline-block; width: 80px; height: 23px; font-size: 11px; line-height: 21px; text-align: center; color: #fff; border: 2px solid #fff;}*/
/*div.main_link_area ul li a span::before {position: absolute; display: inline-block; content: ""; width: 25px; height: 12px; top: 4px; right: -15px; background: url('../images/icon/icon_arrow.png') no-repeat center center #faae2d; background-size: cover;}*/

    div.main_link_area ul li a {position: absolute; display: block; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center;}
    div.main_link_area ul li a strong {display: none; margin-bottom: 15px; padding-top: 40px; font-size: 18px; color: #fff; text-align: center;}
    div.main_link_area ul li a span {position: relative; display: inline-block; width: 80px; height: 23px; font-size: 11px; line-height: 21px; text-align: center; color: #fff; border: 2px solid #fff;}
    div.main_link_area ul li a span::before {position: absolute; display: none; content: ""; width: 25px; height: 12px; top: 4px; right: -15px; background: url('../images/icon/icon_arrow.png') no-repeat center center #faae2d; background-size: cover;}
    div.main_link_area ul li a:hover {display: block; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; background: #ffa000; opacity: 0.9;}
    div.main_link_area ul li a:focus {display: block; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; background: #ffa000; opacity: 0.9;}
    div.main_link_area ul li a:focus-within {display: block; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; background: #ffa000; opacity: 0.9;}
    div.main_link_area ul li a:hover strong {display: block; margin-bottom: 15px; padding-top: 40px; font-size: 18px; color: #fff; text-align: center;}
    div.main_link_area ul li a:focus strong {display: block; margin-bottom: 15px; padding-top: 40px; font-size: 18px; color: #fff; text-align: center;}
    div.main_link_area ul li a:focus-within strong {display: block; margin-bottom: 15px; padding-top: 40px; font-size: 18px; color: #fff; text-align: center;}
    div.main_link_area ul li a:hover span {position: relative; display: inline-block; width: 110px; height: 35px; font-size: 11px; line-height: 31px; text-align: center; color: #fff; border: 2px solid #fff;}
    div.main_link_area ul li a:focus span {position: relative; display: inline-block; width: 110px; height: 35px; font-size: 11px; line-height: 31px; text-align: center; color: #fff; border: 2px solid #fff;}
    div.main_link_area ul li a:focus-within span {position: relative; display: inline-block; width: 80px; height: 23px; font-size: 11px; line-height: 31px; text-align: center; color: #fff; border: 2px solid #fff;}
    div.main_link_area ul li a:hover span::before {position: absolute; display: inline-block; content: ""; width: 25px; height: 12px; top: 9px; right: -15px; background: url('../images/icon/icon_arrow.png') no-repeat center center #faae2d; background-size: cover;}
    div.main_link_area ul li a:focus span::before {position: absolute; display: inline-block; content: ""; width: 25px; height: 12px; top: 9px; right: -15px; background: url('../images/icon/icon_arrow.png') no-repeat center center #faae2d; background-size: cover;}

div.main_link_area ul li:nth-child(1) a {border-radius: 14px 0 0 0px;}
div.main_link_area ul li:nth-child(3) a {border-radius: 0px 14px 0 0px;}
div.main_link_area ul li:nth-child(4) a {border-radius: 0px 0 0 14px;}
div.main_link_area ul li:nth-child(6) a {border-radius: 0 0 14px 0;}


.edu_tab_area {display: block; width: 100%; height: 100%; padding: 30px 0 10px 0; background: none; border-bottom: 1px solid #a7a7a7;}
.edu_tab_area p.tit {font-size: 25px; color: #000;}
.edu_tab_area p.tit strong {display: inline-block; margin-left: 4px;}
.edu_tab_area ul {overflow: hidden; margin-top: 30px;}
.edu_tab_area ul li {display: inline-block; width: 50% !important; float: left; margin-bottom: 20px; vertical-align: middle;}
.edu_tab_area ul li + li {margin-top: 0px;}
.edu_tab_area ul li:hover {cursor: pointer;}
.edu_tab_area ul li:hover span {color: #000;}
.edu_tab_area ul li span {display: block; font-size: 18px; color: #777777;}
.edu_tab_area ul li a {position: relative; display: none; width: 110px; height: 35px; margin-top: 10px; font-weight: bold; font-size: 16px; line-height: 29px; text-align: center; color: #000; border: 3px solid #006cb8;}
.edu_tab_area ul li a::before {position: absolute; display: inline-block; content: ""; width: 37px; height: 18px; top: 5px; right: -20px; background: url("../images/icon/icon_arrow02.png") no-repeat center center #fff;}
.edu_tab_area ul li a span {font-size: 16px;}
.edu_tab_area ul li.active {position: relative; width: auto; height: auto; padding: 0; background: transparent; box-shadow: none; border-radius: 0px;}
.edu_tab_area ul li.active::before {content: none;}
.edu_tab_area ul li.active span {color: #000; font-weight: bold;}
.edu_tab_area ul li.active a {display: none;}

.edu_btn_area {display: none; position: relative; margin-top: 15px;}
.edu_btn_area a {position: relative; display: inline-block; width: 42px; height: 42px; top: auto; left: auto; right: auto; margin: auto;; font-size: 0px; border-radius: 50%;}
.edu_btn_area a + a {margin-left: 15px;}
.edu_btn_area a::after {content: none;}
.edu_btn_area a.edu_prev_btn {background: url('../images/common/main_slide_prev02.png') no-repeat top 11px left 13px #4c4c4c;}
.edu_btn_area a.edu_next_btn {background: url('../images/common/main_slide_next02.png') no-repeat top 11px right 13px #4c4c4c;}

.tab_content_area {overflow: hidden; display: inline-block; width: 100%; height: calc(100% - 100px); padding: 30px 0 30px 0px; vertical-align: top; background-color: #f6f6f6; box-sizing: content-box;}
.tab_content {display: none; width: 100%; }
.tab_content.active {display: inline-block;}
.swiper-container.pcType {display: none;}
.swiper-container.mobileType {display: block;}

.edu_none_con {margin-top: 100px; padding-bottom: 60%; background: url('../images/sub/edu_none_con.png') no-repeat center bottom; background-size: 70%;}
.edu_none_con span {padding: 9px 60px; font-size: 20px;border-radius: 50px;}

ul.edu_list_area {width: 100%; font-size: 0px;}
ul.edu_list_area > li {display: inline-block; width: 50%; margin-bottom: 0px;}
ul.edu_list_area > li + li {margin-left: 0px;}
ul.edu_list_area > li:nth-child(4) {margin-left: 0px;}
ul.edu_list_area li div.edu_box {width: calc(100% - 26px); margin: 0 auto;}
ul.edu_list_area li div.edu_box span.edu_division {font-size: 16px; color: #666;}
ul.edu_list_area li div.edu_box p {overflow: hidden; height: 46px; margin-top: 13px; font-size: 19px; color: #333; line-height: 1.2em; letter-spacing: -0.04em;}
ul.edu_list_area li div.edu_box div.thumbnail {overflow: hidden; width: 40vw; height: 40vw; margin: 16px auto; border-radius: 14px;}
ul.edu_list_area li div.edu_box div.thumbnail img {display: block; width: 100%; height: 100%;}
ul.edu_list_area li div.edu_box ul.edu_info {margin-top: 10px;}
ul.edu_list_area li div.edu_box ul.edu_info li {display: block; padding: 5px 0;}
ul.edu_list_area li div.edu_box ul.edu_info li + li {border-top: 1px solid #dddddd;}
ul.edu_list_area li div.edu_box ul.edu_info li span {position: relative;}
ul.edu_list_area li div.edu_box ul.edu_info li:first-child span {font-size: 15px; color: #010101;}
ul.edu_list_area li div.edu_box ul.edu_info li:last-child span {font-size: 15px; color: #777;}
ul.edu_list_area li div.edu_box ul.edu_info li span + span {margin-left: 15px;}
ul.edu_list_area li div.edu_box ul.edu_info li span + span::before {position: absolute; display: block; content: ""; width: 1px; height: 10px; top: 50%; left: -9px; margin-top: -5px; background-color: #dddddd;}

/* 좋아요 버튼 */
i.like {display: inline-block; width: 18px; height: 16px; margin-right: 5px; background: url('../images/common/like.png') no-repeat center center; background-size: cover; vertical-align: middle;}
i.like span {display: inline-block; width: 0px; height: 0px; text-indent: -9999px;}
/* i.like:hover {background: url('../images/common/like_active.png') no-repeat center center; background-size: cover;} */
i.like.active { background: url('../images/common/like_active.png') no-repeat center center; background-size: cover;}

/* 모바일 더보기 버튼 */
a.m_more_btn {display: block; width: 100%; height: 36px; line-height: 32px; text-align: center; border: 2px solid #006cb8;}
a.m_more_btn span {font-size: 17px; font-weight: bold; color: #000;}

/* 자활TV영역 */
ul.kdissw_tv {margin-bottom: 30px; font-size: 0px;}
ul.kdissw_tv li {display: none; width: calc(50% - 14px); height: auto; vertical-align: middle;}
ul.kdissw_tv li + li {margin-left: 0px;}
ul.kdissw_tv li:nth-child(1), ul.kdissw_tv li:nth-child(5) {margin-left: 0px;}
ul.kdissw_tv li:nth-child(2) {margin-right: 14px;}
ul.kdissw_tv li:nth-child(3) {margin-left: 14px;}
ul.kdissw_tv li:nth-child(-n+4) {margin-bottom: 0px;}
ul.kdissw_tv li:nth-child(-n+3) {display: inline-block;}
ul.kdissw_tv li:first-child {width: 100%; margin-bottom: 30px;}
ul.kdissw_tv li:first-child p {font-size: 25px; color: #000; line-height: 1.3em;}
ul.kdissw_tv li:first-child p strong {display: inline-block;}
ul.kdissw_tv li:first-child p:nth-child(2) {margin-top: 20px; font-size: 17px; color: #777777;}
ul.kdissw_tv li:first-child a {display: none;}
ul.kdissw_tv li:first-child a::before {content: none;}
ul.kdissw_tv li a {}
ul.kdissw_tv li a div.thumbnail_area {overflow: hidden; max-width: 293px; max-height: 162px; width: 40vw; height: 22vw; margin: 0 auto; border-radius: 14px;}
ul.kdissw_tv li a div.thumbnail_area img {width: 100%; height: 100%;}
ul.kdissw_tv li a p.tit {overflow: hidden; height: 2.4em; margin-top: 15px; font-size: 17px; color: #000; letter-spacing: -0.04em; word-break: keep-all; line-height: 1.2em;}
ul.kdissw_tv li a span.viewNum {display: block; margin-top: 10px; font-size: 14px; color: #777777;}


/* 공지사항, 자료실 */
.main_list_tab {display: block;}
.main_list_tab li {display: inline-block;}
.main_list_tab li:hover {cursor: pointer;}
.main_list_tab li + li {margin-left: 30px;}
.main_list_tab li strong {font-size: 22px; color: #a7abad; letter-spacing: -0.04em;}
.main_list_tab li.active strong {color: #000;}
.main_list_area {position: relative; display: none; width: 100%;}
.main_list_area.active {display: block;}
.main_list_area + .main_list_area {margin-left: 0px;}
.main_list_area + .main_list_area::before {content: none;}
.main_list_area > strong {display: none;}
.main_list_area ul.main_list {overflow: hidden; width: 100%; margin-top: 20px; font-size: 0px;}
.main_list_area ul.main_list li {display: block;}
.main_list_area ul.main_list li + li {margin-top: 13px;}
.main_list_area ul.main_list li a {display: inline-block; width: 100%; height: 108px; padding: 10px; border: 4px solid #fff; background-color: #fff; border-radius: 14px;}
.main_list_area ul.main_list li a > span {padding: 1px 10px; font-size: 14px; color: #777777; background: #efefef; border-radius: 5px;}
.main_list_area ul.main_list li a:hover > span {background: #4c4b4a; color: #999999;}
.main_list_area ul.main_list li a div {margin-top: 13px;}
.main_list_area ul.main_list li a div span {display: inline-block; width: 55px; font-size: 15px; color: #777777; text-align: center; line-height: 1.2em; vertical-align: middle; letter-spacing: -0.04em;}
.main_list_area ul.main_list li a div span span {font-size: 25px;}
.main_list_area ul.main_list li a div p {overflow: hidden; display: inline-block; width: calc(100% - 75px); height: 50px; margin-left: 10px; font-size: 17px; color: #222; line-height: 1.5em; word-break: keep-all; vertical-align: middle;}
.main_list_area ul.main_list li a:hover div p {color: #fff;}
.main_list_area ul.main_list li:nth-child(1), ul.main_list li:nth-child(2) {margin-bottom: 0px;}
.main_list_area ul.main_list li:nth-child(2), ul.main_list li:nth-child(4) {margin-left: 0px;}
.main_list_area a.more_btn {position: absolute; display: inline-block; width: 23px; height: 23px; top: -48px; right: 0px; font-size: 0px; background: url('../images/icon/icon_plus.png') no-repeat center center; background-size: cover;}


/* 자활 소통마당 */
.commu_area {height: auto;}
.commu_area > div {display: block; vertical-align: top;}
.commu_area .commu_con_area01 > strong {font-size: 25px; color: #000; letter-spacing: -0.04em; line-height: 1em;}
.commu_area .commu_con_area01 > p {margin-top: 17px; font-size: 17px; color: #777777;}
.commu_area .commu_con_area02 {float: none; font-size: 0px; margin-top: 30px;}
.commu_area .commu_con_area02 a {display: inline-block; width: 100%; height: 156px; padding: 25px 16px; border-radius: 14px;}
.commu_area .commu_con_area02 a + a {margin-left: 0px; margin-top: 13px;}
.commu_area .commu_con_area02 a.commu_link_btn01 {background: url('../images/sub/main_link02_bg01.png') no-repeat top 15px right 25px #006cb8; background-size: 140px 130px;}
.commu_area .commu_con_area02 a.commu_link_btn02 {background: url('../images/sub/main_link02_bg02.png') no-repeat top 15px right 25px #006774; background-size: 140px 130px;}
.commu_area .commu_con_area02 a span.tit {font-size: 21px; color: #fff;}
.commu_area .commu_con_area02 a p {margin-top: 10px; font-weight: 300; font-size: 16px; color: #fff; line-height: 1.4em;}
.commu_area .commu_con_area02 a span.more {display: inline-block; margin-top: 15px; padding-right: 15px; font-size: 13px; color: #fff; opacity: 1; background: url('../images/common/more_bg.png') no-repeat center right;}


/* 메인팝업 */
.main_pop {width: auto !important; max-width: 600px; min-width: 280px; top: 94px !important; left: 50% !important; transform: translate(-50%, 0px) !important;}
.main_pop .pop_con {}
.main_pop .pop_con img {width: 100%;}
.main_pop .pop_footer a {font-size: 15px; line-height: 55px;}

/* 인증서변경 팝업 */
.inquiry_area > strong {display: block; padding: 0 0 20px 0; font-size: 21px; color: #000; text-align: center; border-bottom: 1px solid #dddddd;}
.inquiry_area > p { margin: 20px 0 26px 0; font-size: 16px; color: #333; text-align: center; line-height: 2em; word-break: keep-all;}
.inquiry_area > p > strong {font-size: 20px;}
.inquiry_area > .inquiry_input_area {margin: 0 0 20px 0; padding: 26px 0; border: 1px solid #ddd; border-radius: 15px;}
ul.certify_list li + li {margin-top: 18px;}
ul.certify_list li a {width: 100%; height: 41px; line-height: 41px; font-size: 16px;}
ul.certify_list li a.naver {color: #333333; border-style: solid; border-color: #dddddd; border-width: 1px; background: url('../images/common/login_naver2.png') no-repeat center left 25px #FFFFFF;}
ul.certify_list li a.kakao_login {color: #333333; border-style: solid; border-color: #dddddd; border-width: 1px; background: url('../images/common/ico_login_kakao.png') no-repeat center left 14px #FFFFFF; background-size: 13%;}
ul.certify_list li a.pass {background: url('../images/common/login_pass.png') no-repeat center left 15px #8951ff;}
ul.certify_list li a span {padding-left: 90px; }
ul.certify_list li a span::before {position: absolute; display: inline-block; content: ""; width: 1px; height: 20px; top: 50%; left: 70px; background-color: #dddddd; transform: translate(0, -50%);}
}


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

/* mainSection */
.mainSection {position: relative; width: 100%; margin: 0px auto; padding: 0 15px; z-index: 1;}
.mainSection.type01 {margin: 0px auto 0;}
.mainSection.type02 {height: auto; padding: 0 15px 30px 15px;}
.mainSection.type03 {margin: 30px auto;}

div.main_slide_area {position: relative; display: inline-block; width: 100%; height: auto; margin-right: 0px; float: none;}
div.main_slide_area img {width: 100%; height: 100%; border-radius: 7px;}
div.main_slide_area .swiper-container {border-radius: 7px;}
div.page_btn_area {overflow: hidden; position: absolute; width: 125px; height: 24px; bottom: 0px; left: 0px; font-size: 0px; background: #393d40; z-index: 500; border-radius: 0 7px 0 7px;}
div.page_btn_area a {position: relative; display: inline-block; width: 24px; height: 24px; top: auto; left: auto; right: auto; margin-top: auto; border-right: 1px solid #777777; opacity: 1 !important;}
div.page_btn_area a:hover {background-color: #000;}
div.page_btn_area a::after {content: none;}
div.page_btn_area a.swiper-button-prev {background: url('../images/common/main_slide_prev.png') no-repeat center center; background-size: 8px 12px;}
div.page_btn_area a.swiper-button-prev:hover {background: url('../images/common/main_slide_prev_hover.png') no-repeat center center #000; background-size: 8px 12px;}
div.page_btn_area a.swiper-button-next {background: url('../images/common/main_slide_next.png') no-repeat center center; background-size: 8px 12px;}
div.page_btn_area a.swiper-button-next:hover {background: url('../images/common/main_slide_next_hover.png') no-repeat center center #000; background-size: 8px 12px;} 
div.page_btn_area .play_btn.stop {background: url('../images/common/main_slide_stop.png') no-repeat center center; background-size: 8px 12px;}
div.page_btn_area .play_btn.stop:hover {background: url('../images/common/main_slide_stop_hover.png') no-repeat center center #000; background-size: 8px 12px;}
div.page_btn_area .play_btn.play {background: url('../images/common/main_slide_play.png') no-repeat center center; background-size: 8px 12px;}
div.page_btn_area .play_btn.play:hover {background: url('../images/common/main_slide_play_hover.png') no-repeat center center #000; background-size: 8px 12px;}
div.page_btn_area div.slideNum_area {display: inline-block; width: 50px; height: 24px; line-height: 26px; font-size: 10px; color: #fff; text-align: center; vertical-align: middle;}
div.page_btn_area .swiper-pagination {display: none !important;}

div.login_area {display: none;}
div.member_info_area {display: none;}

div.main_link_area {overflow: hidden; width: 100%; height: auto; margin: 20px 0 32px 0; box-shadow: 4px 4px 20px 6px rgba(0,0,0,0.05); border-radius: 14px;}
div.main_link_area ul {height: 100%;}
div.main_link_area ul li {position: relative; display: inline-block; width: 33.3333%; height: 100%; float: left; vertical-align: middle;}
div.main_link_area ul li + li {border-left: 1px solid #dddddd;}
div.main_link_area ul li:nth-child(4) {border-left: 0px;}
div.main_link_area ul li:nth-child(-n+3) {border-bottom: 1px solid #ddd;}
div.main_link_area ul li > span {display: block; font-size: 13px; padding: 70px 0 10px 0; color: #000; text-align: center; letter-spacing: -0.04em;}
div.main_link_area ul li span.bg01 {background: url('../images/sub/main_link_bg01.png') no-repeat center 20px; background-size: 55px 45px;}
div.main_link_area ul li span.bg02 {background: url('../images/sub/main_link_bg02.png') no-repeat center 20px; background-size: 55px 45px;}
div.main_link_area ul li span.bg03 {background: url('../images/sub/main_link_bg03.png') no-repeat center 20px; background-size: 55px 45px;}
div.main_link_area ul li span.bg04 {background: url('../images/sub/main_link_bg04.png') no-repeat center 20px; background-size: 55px 45px;}
div.main_link_area ul li span.bg05 {background: url('../images/sub/main_link_bg05.png') no-repeat center 20px; background-size: 55px 45px;}
div.main_link_area ul li span.bg06 {background: url('../images/sub/main_link_bg06.png') no-repeat center 20px; background-size: 55px 45px;}
/*div.main_link_area ul li a {width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; background: #ffa000; opacity: 0.9;}*/
/*div.main_link_area ul li a strong {display: block; margin-bottom: 10px; padding-top: 25px; font-size: 15px; color: #fff; text-align: center;}*/
/*div.main_link_area ul li a span {position: relative; display: inline-block; width: 70px; height: 20px; font-size: 11px; line-height: 18px; text-align: center; color: #fff; border: 2px solid #fff;}*/
/*div.main_link_area ul li a span::before {position: absolute; display: inline-block; content: ""; width: 20px; height: 7px; top: 5px; right: -11px; background: url('../images/icon/icon_arrow.png') no-repeat center center #faae2d; background-size: cover;}*/

    div.main_link_area ul li a strong {display: none; margin-bottom: 10px; padding-top: 25px; font-size: 15px; color: #fff; text-align: center;}
    div.main_link_area ul li a span {position: relative; display: inline-block; width: 70px; height: 20px; font-size: 11px; line-height: 18px; text-align: center; color: #fff; border: 2px solid #fff;}
    div.main_link_area ul li a span::before {position: absolute; display: none; content: ""; width: 20px; height: 7px; top: 5px; right: -11px; background: url('../images/icon/icon_arrow.png') no-repeat center center #faae2d; background-size: cover;}

    div.main_link_area ul li a:hover {display: block; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; background: #f86812; opacity: 0.9;}
    div.main_link_area ul li a:focus {display: block; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; background: #f86812; opacity: 0.9;}
    div.main_link_area ul li a:focus-within {display: block; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; background: #f86812; opacity: 0.9;}
    div.main_link_area ul li a:hover strong {display: block; margin-bottom: 10px; padding-top: 25px; font-size: 15px; color: #fff; text-align: center;}
    div.main_link_area ul li a:focus strong {display: block; margin-bottom: 10px; padding-top: 25px; font-size: 15px; color: #fff; text-align: center;}
    div.main_link_area ul li a:focus-within strong {display: block; margin-bottom: 10px; padding-top: 25px; font-size: 15px; color: #fff; text-align: center;}
    div.main_link_area ul li a:hover span {position: relative; display: inline-block; width: 70px; height: 20px; font-size: 11px; line-height: 18px; text-align: center; color: #fff; border: 2px solid #fff;}
    div.main_link_area ul li a:focus span {position: relative; display: inline-block; width: 70px; height: 20px; font-size: 11px; line-height: 18px; text-align: center; color: #fff; border: 2px solid #fff;}
    div.main_link_area ul li a:focus-within span {position: relative; display: inline-block; width: 70px; height: 20px; font-size: 11px; line-height: 18px; text-align: center; color: #fff; border: 2px solid #fff;}
    div.main_link_area ul li a:hover span::before {position: absolute; display: inline-block; content: ""; width: 20px; height: 7px; top: 5px; right: -11px; background: url('../images/icon/icon_arrow.png') no-repeat center center #faae2d; background-size: cover;}
    div.main_link_area ul li a:focus span::before {position: absolute; display: inline-block; content: ""; width: 20px; height: 7px; top: 5px; right: -11px; background: url('../images/icon/icon_arrow.png') no-repeat center center #faae2d; background-size: cover;}


div.main_link_area ul li:nth-child(1) a {border-radius: 14px 0 0 0px;}
div.main_link_area ul li:nth-child(3) a {border-radius: 0px 14px 0 0px;}
div.main_link_area ul li:nth-child(4) a {border-radius: 0px 0 0 14px;}
div.main_link_area ul li:nth-child(6) a {border-radius: 0 0 14px 0;}


.edu_tab_area {display: block; width: 100%; height: 100%; padding: 23px 0 8px 0; background: none; border-bottom: 1px solid #a7a7a7;}
.edu_tab_area p.tit {font-size: 19px; color: #000;}
.edu_tab_area p.tit strong {display: inline-block; margin-left: 4px;}
.edu_tab_area ul {overflow: hidden; margin-top: 25px;}
.edu_tab_area ul li {display: inline-block; width: 50% !important; float: left; margin-bottom: 17px; vertical-align: middle;}
.edu_tab_area ul li + li {margin-top: 0px;}
.edu_tab_area ul li:hover {cursor: pointer;}
.edu_tab_area ul li:hover span {color: #000;}
.edu_tab_area ul li span {display: block; font-size: 14px; color: #777777;}
.edu_tab_area ul li a {display: none;}
.edu_tab_area ul li.active {position: relative; width: auto; height: auto; padding: 0; background: transparent; box-shadow: none; border-radius: 0px;}
.edu_tab_area ul li.active::before {content: none;}
.edu_tab_area ul li.active span {color: #000; font-weight: bold;}
.edu_tab_area ul li.active a {display: none;}
/*
.edu_btn_area {display: none; position: relative; margin-top: 15px;}
.edu_btn_area a {position: relative; display: inline-block; width: 42px; height: 42px; top: auto; left: auto; right: auto; margin: auto;; font-size: 0px; border-radius: 50%;}
.edu_btn_area a + a {margin-left: 15px;}
.edu_btn_area a::after {content: none;}
.edu_btn_area a.edu_prev_btn {background: url('../images/common/main_slide_prev02.png') no-repeat top 11px left 13px #4c4c4c;}
.edu_btn_area a.edu_next_btn {background: url('../images/common/main_slide_next02.png') no-repeat top 11px right 13px #4c4c4c;}
*/
.tab_content_area {overflow: hidden; display: inline-block; width: 100%; height: auto; padding: 25px 0 25px 0px; vertical-align: top; background-color: #f6f6f6; box-sizing: content-box;}
.tab_content {display: none; width: 100%; }
.tab_content.active {display: inline-block;}
.swiper-container.pcType {display: none;}
.swiper-container.mobileType {display: block;}

.edu_none_con {margin-top: 59px; padding-bottom: 244px; background: url('../images/sub/edu_none_con.png') no-repeat center bottom; background-size: 308px 216px;}
.edu_none_con span {padding: 9px 35px; font-size: 14px; border-radius: 50px;}

ul.edu_list_area {width: 100%; font-size: 0px;}
ul.edu_list_area > li {display: inline-block; width: 50%; margin-bottom: 0px;}
ul.edu_list_area > li + li {margin-left: 0px;}
ul.edu_list_area > li:nth-child(4) {margin-left: 0px;}
ul.edu_list_area li div.edu_box {width: calc(100% - 12px); margin: 0 auto;}
ul.edu_list_area li div.edu_box span.edu_division {font-size: 12px; color: #666;}
ul.edu_list_area li div.edu_box p {overflow: hidden; height: 2.4em; margin-top: 8px; font-size: 14px; color: #333; line-height: 1.2em; letter-spacing: -0.04em;}
ul.edu_list_area li div.edu_box div.thumbnail {overflow: hidden; margin: 14px auto; border-radius: 14px;}
ul.edu_list_area li div.edu_box div.thumbnail img {display: block; width: 100%; height: 100%;}
ul.edu_list_area li div.edu_box ul.edu_info {margin-top: 10px;}
ul.edu_list_area li div.edu_box ul.edu_info li {display: block; padding: 5px 0;}
ul.edu_list_area li div.edu_box ul.edu_info li + li {border-top: 1px solid #dddddd;}
ul.edu_list_area li div.edu_box ul.edu_info li span {position: relative;}
ul.edu_list_area li div.edu_box ul.edu_info li:first-child span {display: block; font-size: 11px; color: #010101;}
ul.edu_list_area li div.edu_box ul.edu_info li:first-child span:first-child {width: auto;}
ul.edu_list_area li div.edu_box ul.edu_info li:first-child span:last-child {display: block; width: 100%; padding: 0px;}
ul.edu_list_area li div.edu_box ul.edu_info li:first-child span:last-child::before {content: none;}
ul.edu_list_area li div.edu_box ul.edu_info li:last-child span {font-size: 11px; color: #777;}
ul.edu_list_area li div.edu_box ul.edu_info li span + span {margin-left: 10px;}
ul.edu_list_area li div.edu_box ul.edu_info li span + span::before {position: absolute; display: block; content: ""; width: 1px; height: 10px; top: 50%; left: -5px; margin-top: -5px; background-color: #dddddd;}

/* 좋아요 버튼 */
i.like {display: inline-block; width: 14px; height: 12px; margin-right: 3px; background: url('../images/common/like.png') no-repeat center center; background-size: cover; vertical-align: middle;}
i.like span {display: inline-block; width: 0px; height: 0px; text-indent: -9999px;}
/* i.like:hover {background: url('../images/common/like_active.png') no-repeat center center; background-size: cover;} */
i.like.active { background: url('../images/common/like_active.png') no-repeat center center; background-size: cover;}

/* 모바일 더보기 버튼 */
a.m_more_btn {display: block; width: 100%; height: 26px; line-height: 22px; text-align: center; border: 2px solid #006cb8;}
a.m_more_btn span {font-size: 13px; font-weight: bold; color: #000;}

/* 자활TV영역 */
ul.kdissw_tv {margin-bottom: 25px; font-size: 0px;}
ul.kdissw_tv li {display: none; width: calc(50% - 7px); height: auto; vertical-align: middle;}
ul.kdissw_tv li + li {margin-left: 0px;}
ul.kdissw_tv li:nth-child(1), ul.kdissw_tv li:nth-child(5) {margin-left: 0px;}
ul.kdissw_tv li:nth-child(2) {margin-right: 7px;}
ul.kdissw_tv li:nth-child(3) {margin-left: 7px;}
ul.kdissw_tv li:nth-child(-n+4) {margin-bottom: 0px;}
ul.kdissw_tv li:nth-child(-n+3) {display: inline-block;}
ul.kdissw_tv li:first-child {width: 100%; margin-bottom: 22px;}
ul.kdissw_tv li:first-child p {font-size: 19px; color: #000; line-height: 1.3em;}
ul.kdissw_tv li:first-child p strong {display: inline-block;}
ul.kdissw_tv li:first-child p:nth-child(2) {margin-top: 15px; font-size: 13px; color: #777777;}
ul.kdissw_tv li:first-child a {display: none;}
ul.kdissw_tv li:first-child a::before {content: none;}
ul.kdissw_tv li a {}
ul.kdissw_tv li a div.thumbnail_area {overflow: hidden; border-radius: 14px;}
ul.kdissw_tv li a div.thumbnail_area img {width: 100%; height: 100%;}
ul.kdissw_tv li a p.tit {overflow: hidden; height: 2.4em; margin-top: 15px; font-size: 13px; color: #000; letter-spacing: -0.04em; word-break: keep-all; line-height: 1.2em;}
ul.kdissw_tv li a span.viewNum {display: block; margin-top: 5px; font-size: 11px; color: #777777;}


/* 공지사항, 자료실 */
.main_list_tab {display: block;}
.main_list_tab li {display: inline-block;}
.main_list_tab li:hover {cursor: pointer;}
.main_list_tab li + li {margin-left: 25px;}
.main_list_tab li strong {font-size: 17px; color: #a7abad; letter-spacing: -0.04em;}
.main_list_tab li.active strong {color: #000;}
.main_list_area {position: relative; display: none; width: 100%;}
.main_list_area.active {display: block;}
.main_list_area + .main_list_area {margin-left: 0px;}
.main_list_area + .main_list_area::before {content: none;}
.main_list_area > strong {display: none;} 
.main_list_area ul.main_list {overflow: hidden; width: 100%; margin-top: 15px; font-size: 0px;}
.main_list_area ul.main_list li {display: block;}
.main_list_area ul.main_list li + li {margin-top: 10px;}
.main_list_area ul.main_list li a {display: inline-block; width: 100%; height: 81px; padding: 8px; border: 2px solid #fff; background-color: #fff; border-radius: 14px;}
.main_list_area ul.main_list li a:hover {border: 2px solid #cc8600;}
.main_list_area ul.main_list li a > span {padding: 1px 10px; font-size: 11px; border-radius: 5px;}
.main_list_area ul.main_list li a div {margin-top: 9px;}
.main_list_area ul.main_list li a div span {display: inline-block; width: 45px; font-size: 11px; color: #777777; text-align: center; line-height: 1.2em; vertical-align: middle; letter-spacing: -0.04em;}
.main_list_area ul.main_list li a div span span {font-size: 19px;}
.main_list_area ul.main_list li a div p {overflow: hidden; display: inline-block; width: calc(100% - 55px); height: 37px; margin-left: 10px; font-size: 13px; color: #222; line-height: 1.5em; word-break: keep-all; vertical-align: middle;}
.main_list_area ul.main_list li a:hover div p {color: #fff;}
.main_list_area ul.main_list li:nth-child(1), ul.main_list li:nth-child(2) {margin-bottom: 0px;}
.main_list_area ul.main_list li:nth-child(2), ul.main_list li:nth-child(4) {margin-left: 0px;}
.main_list_area a.more_btn {position: absolute; display: inline-block; width: 17px; height: 17px; top: -41px; right: 0px; font-size: 0px; background: url('../images/icon/icon_plus.png') no-repeat center center; background-size: cover;}


/* 자활 소통마당 */
.commu_area {height: auto;}
.commu_area > div {display: block; vertical-align: top;}
.commu_area .commu_con_area01 > strong {font-size: 19px; color: #000; letter-spacing: -0.04em; line-height: 1em;}
.commu_area .commu_con_area01 > p {margin-top: 14px; font-size: 13px; color: #777777;}
.commu_area .commu_con_area02 {float: none; font-size: 0px; margin-top: 25px;}
.commu_area .commu_con_area02 a {display: inline-block; width: 100%; height: 119px; padding: 19px 12px; border-radius: 14px;}
.commu_area .commu_con_area02 a + a {margin-left: 0px; margin-top: 13px;}
.commu_area .commu_con_area02 a.commu_link_btn01 {background: url('../images/sub/main_link02_bg01.png') no-repeat top 10px right 10px #006cb8; background-size: 110px 100px;}
.commu_area .commu_con_area02 a.commu_link_btn02 {background: url('../images/sub/main_link02_bg02.png') no-repeat top 10px right 10px #006774; background-size: 110px 100px;}
.commu_area .commu_con_area02 a span.tit {font-size: 16px; color: #fff;}
.commu_area .commu_con_area02 a p {margin-top: 10px; font-weight: 300; font-size: 12px; color: #fff; line-height: 1.4em;}
.commu_area .commu_con_area02 a span.more {display: inline-block; margin-top: 5px; padding-right: 15px; font-size: 11px; color: #fff; opacity: 1; background: url('../images/common/more_bg.png') no-repeat center right; background-size: 6px 9px;}

/* 메인팝업 */
.main_pop {max-width: 300px;}
.main_pop .pop_footer a {font-size: 13px; line-height: 35px;}

/* 인증서변경 팝업 */
.inquiry_area > strong {display: block; padding: 0 0 18px 0; font-size: 19px; color: #000; text-align: center; border-bottom: 1px solid #dddddd;}
.inquiry_area > p {margin: 20px 0 24px 0; font-size: 14px; color: #333; text-align: center; line-height: 2em; word-break: keep-all;}
.inquiry_area > p > strong {font-size: 18px;}
.inquiry_area > p > span {font-size: 14px;}
.inquiry_area > .inquiry_input_area {margin: 0 0 20px 0; padding: 23px 0; border: 1px solid #ddd; border-radius: 15px;}

}