@charset "utf-8";

/* top banner */
#top_bannerWrap { width: 100%; height: 380px; background: url(../images/main/top_bg.gif) no-repeat center top; padding: 30px 0 0 0; }
#top_bannerWrap #top_banner { width: 1200px; height: 350px; position: relative; margin: 0 auto; background: #0077be; }
#top_bannerWrap #top_banner .control { position: absolute; left: 0; bottom: 0; width: 400px; height: 58px; background: #003b5f; line-height: 58px; text-align: center; z-index: 1; }
#top_bannerWrap #top_banner .control button { background: #001d2f; width: 36px; height: 36px; text-indent: -50000px;}
#top_bannerWrap #top_banner .control button.btn_prev { background: #001d2f url(../images/main/btn_prev.png) no-repeat center 50%; }
#top_bannerWrap #top_banner .control button.btn_next { background: #001d2f url(../images/main/btn_next.png) no-repeat center 50%; }
#top_bannerWrap #top_banner .control button.play { background: #001d2f url(../images/main/btn_play.png) no-repeat center 50%; }
#top_bannerWrap #top_banner .control button.stop { background: #001d2f url(../images/main/btn_stop.png) no-repeat center 50%; }
#top_bannerWrap #top_banner .control .count { display: inline-block; padding: 0 15px; color: #fff; font-size: 18px; }
#top_bannerWrap #top_banner .banner_list li { float: left; width: 100%; height: 100%; overflow: hidden; position: relative; }
#top_bannerWrap #top_banner .banner_list li .text { width: 33.3325%; float: left; padding: 30px 30px; box-sizing: border-box; color: #fff; z-index: 1; }
#top_bannerWrap #top_banner .banner_list li .text a { color: #fff; }
#top_bannerWrap #top_banner .banner_list li .text strong { font-size: 24px; line-height: 30px; display: block; }
#top_bannerWrap #top_banner .banner_list li .text span { margin-top: 30px; display: block; line-height: 22px; }
#top_bannerWrap #top_banner .banner_list li .img { width: 66.6675%; max-width: 800px; overflow: hidden; height: 350px; border: 1px solid #ccc; box-sizing: border-box; float: right; background: #fff; }
#top_bannerWrap #top_banner .banner_list li .img:after { clear: both; display: block; content: ""; }

/* contant */
#main_content1 { width: 1200px; margin: 30px auto 0 auto; overflow: hidden; }
#main_content1 .noticeWrap { width: 48.75%; height: 270px; float: left; border: 1px solid #ccc; position: relative; box-sizing: border-box; }
#main_content1 .noticeWrap .tab_btn { float: left; margin-top: -1px; line-height: 40px; background: #f2f2f2; padding: 0 20px; color: #333; border-top: 1px solid #ccc; border-right: 1px solid #ccc; font-size: 18px; }
#main_content1 .noticeWrap .tab_btn.on, #main_content1 .noticeWrap .tab_btn:hover { border-top: 1px solid #0074bd; background: #fff; color: #0074bd; font-weight: 500; }

#main_content1 .noticeWrap .notice_content { position: absolute; top: 40px; left: 0; width: 100%; box-sizing: border-box; display: none; }
#main_content1 .noticeWrap .notice_content .notice_new { border-top: 1px solid #ccc; padding: 28px 30px 0 30px; margin-bottom: 17px; }
#main_content1 .noticeWrap .notice_content .notice_new strong { display: inline-block; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; width: 70%; }
#main_content1 .noticeWrap .notice_content .notice_new strong a { color: #000; }
#main_content1 .noticeWrap .notice_content .notice_new .date { float: right; color: #888; }
#main_content1 .noticeWrap .notice_content .notice_new .txt { clear: both; line-height: 20px; margin-top: 28px!important; overflow: hidden; text-overflow: ellipsis; word-wrap: normal; max-height: 40px;  }
#main_content1 .noticeWrap .notice_content ul { border-top: 1px solid #ccc; width: 90%; margin: 0 auto; padding-top: 13px; }
#main_content1 .noticeWrap .notice_content ul li { background: url(../images/common/dot01.gif) no-repeat left 50%; padding-left: 8px; position: relative; line-height: 26px; }
#main_content1 .noticeWrap .notice_content ul li a { width: 80%; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; display: inline-block; float: left; }
#main_content1 .noticeWrap .notice_content ul li .date { width: 20%; text-align: right; color: #888; display: inline-block; }
#main_content1 .courseWrap { width: 48.75%; height: 270px; float: right; border: 1px solid #ccc; border-top: 1px solid #0077be; box-sizing: border-box; padding: 20px 30px 30px 30px; position: relative; }
#main_content1 .courseWrap:after { clear: both; display: block; content: ""; }
#main_content1 .courseWrap .tit { color: #000; font-size: 22px; }
#main_content1 .courseWrap .course_new { border-bottom: 1px solid #ccc; overflow: hidden; margin-top: 22px; padding-bottom: 10px; }
#main_content1 .courseWrap .course_new .tit { margin-bottom: 3px; }
#main_content1 .courseWrap .course_new .tit span { margin-top: 3px; margin-right: 10px; }
#main_content1 .courseWrap .course_new .tit strong { font-size: 18px; display: block; }
#main_content1 .courseWrap .course_new dl.left { float: left; width: 50%; }
#main_content1 .courseWrap .course_new dl.right { float: right; width: 50%; }
#main_content1 .courseWrap .course_new dl dt { float: left; color: #333; padding-right: 10px; background: url(../images/common/bar02.gif) no-repeat right 50%; margin-right: 10px; line-height: 26px; width: 58px; }
#main_content1 .courseWrap .course_new dl dd { line-height: 26px; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; }
#main_content1 .courseWrap ul { padding-top: 13px; }
#main_content1 .courseWrap ul li { position: relative; line-height: 26px; }
#main_content1 .courseWrap ul li .c_tit { color: #333; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; width: 65%; float: left; margin-right: 10px; }
#main_content1 .courseWrap ul li .area { color: #888; float: left; width: 20%; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; margin-right: 15px; }
#main_content1 .courseWrap ul li .org { color: #888; width: auto; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; }

#main_content2 { width: 1200px; margin: 30px auto; overflow: hidden; }
#main_content2 .mapWrap { width: 48.75%; height: 270px; float: left; border: 1px solid #ccc; position: relative; box-sizing: border-box; background: #ebebeb url(../images/main/map_bg.gif) no-repeat center; padding: 30px 30px; position: relative; }
#main_content2 .mapWrap strong { display: block; color: #000; font-size: 22px; margin-bottom: 20px; }
#main_content2 .mapWrap span.txt { font-size: 14px; line-height: 20px; }
#main_content2 .mapWrap .map_mobile { font-size: 14px; line-height: 20px; display: none; }
#main_content2 .mapWrap .map_mobile a { display: block; border: 1px solid rgba(0,0,0,0.3); line-height: 33px; color: #333; font-weight: 500; text-decoration: none; margin-top: 10px; text-align: center; }
#main_content2 .mapWrap ul { margin-top: 88px; }
#main_content2 .mapWrap ul li { float: left; margin-right: 5px; text-align: center; }
#main_content2 .mapWrap ul li a { width: 133px; border: 1px solid rgba(0,0,0,0.3); line-height: 33px; display: block; color: #333; font-weight: 500; text-decoration: none; }
#main_content2 .etcWrap { width: 48.75%; float: right; overflow: hidden; }
#main_content2 .etcWrap:after { clear: both; display: block; content: ""; }
#main_content2 .etcWrap .cyber_link { width: 50%; height: 270px; float: left; text-align: center; background: #28b34b url(../images/main/cyber_bg.png) no-repeat center 76px; padding: 30px 30px; box-sizing: border-box; position: relative; }
#main_content2 .etcWrap .cyber_link ul { margin: 109px auto 0 auto; }
#main_content2 .etcWrap .cyber_link ul li, #main_content2 .etcWrap .group_link ul li { text-align: center; margin-bottom: 5px; }
#main_content2 .etcWrap .cyber_link ul li:last-child, #main_content2 .etcWrap .group_link ul li:last-child { margin-bottom: 0; }
#main_content2 .etcWrap .cyber_link ul li a, #main_content2 .etcWrap .group_link ul li a { width: 100%; border: 1px solid rgba(255,255,255,0.5); line-height: 33px; display: block; color: #fff; font-weight: 400; text-decoration: none; }
#main_content2 .etcWrap .group_link { width: 50%; height: 270px; float: right; background: #555; text-align: center; padding: 30px 30px; box-sizing: border-box; }
#main_content2 .etcWrap .group_link ul { margin: 29px auto 0 auto; }
#main_content2 .etcWrap .cyber_link strong, #main_content2 .etcWrap .group_link strong { font-size: 22px; color: #fff; }

#main_content3 { width: 100%; background: #ebebeb; border-top: 1px solid #ccc; margin: 30px auto 0 auto; overflow: hidden; padding: 30px 0; }
#main_content3 .onlineWrap { width: 1200px; margin: 0 auto; }
#main_content3 .onlineWrap .online_left { width: 48.75%; float: left; overflow: hidden; position: relative; }
#main_content3 .onlineWrap ul { margin-top: 20px; }
#main_content3 .onlineWrap ul li { float: left; width: 31.5%; margin-right: 2.75%; box-sizing: border-box; }
#main_content3 .onlineWrap ul li:last-child { margin-right: 0; }

/* 2017.05.24 */
#main_content3 .onlineWrap ul li .thumbnail { display: inline-block; width: 181px; height: 103px; text-align: center; overflow: hidden; border: 1px solid #ccc; background: #fff; }
#main_content3 .onlineWrap ul li .thumbnail img { max-width: 181px; max-height: 103px }

#main_content3 .onlineWrap ul li .thumbnail span { display: block; margin-top: 10px; overflow: hidden; height: 38px; width: 95%; text-align: left; }
#main_content3 .onlineWrap .tit { font-size: 18px; color: #333; font-weight: 500; }
#main_content3 .onlineWrap .online_right { width: 48.75%; float: right; overflow: hidden; position: relative; }

/* media ************************************************************************/
@media all and (min-width:1200px) {
}

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

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

@media all and (max-width:768px) {
    #top_bannerWrap #top_banner .banner_list li .text span { text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; }
    #main_content1 .noticeWrap .notice_content ul li .date { display: none; }
    #main_content2 .etcWrap .cyber_link, #main_content2 .etcWrap .group_link { padding: 30px 15px; }
    #chungnam.main_map, .loc_div, .loc_div.main { display: none; }
    .loc_div a { display: none; }
    #main_content2 .mapWrap span.txt { display: none; }
    #main_content2 .mapWrap .map_mobile { display: block; }
    #main_content2 .mapWrap ul { position: inherit!important; bottom: inherit!important; margin-top: 5px!important; }
    #main_content2 .mapWrap ul li { float: none; width: 100%; }     
    #main_content2 .mapWrap ul li a { width: 100%!important; box-sizing: border-box; }
   
}

@media all and (max-width:1024px) {
    #top_bannerWrap { height: auto; padding-top: 0; }
    #top_bannerWrap #top_banner { width: auto; height: auto; overflow: hidden; }
    #top_bannerWrap #top_banner .control { width: auto; left: 0; padding: 0 30px; }
    #top_bannerWrap #top_banner .banner_list li .img { height: auto; }
    #main_content1, #main_content2 { width: 100%; }
    #main_content2 .mapWrap ul { position: absolute; bottom: 30px; margin-top: 0; }
    #main_content2 .mapWrap ul li { float: inherit; margin-bottom: 5px; }
    #main_content2 .mapWrap ul li:last-child { margin-bottom: 0; }
    #main_content1 .courseWrap ul li .org { display: none; }  
    #chungnam.main_map { left: 200px!important; }
    #loc_01.m_txt { left: 390px!important; top: 60px; } /* 천안 */
    #loc_02.m_txt { left: 290px!important; top: 45px; } /* 당진 */
    #loc_03.m_txt { left: 345px!important; top: 65px; } /* 아산 */
    #loc_04.m_txt { left: 310px!important; top: 90px; } /* 예산 */
    #loc_05.m_txt { left: 365px!important; top: 135px; } /* 공주 */
    #loc_06.m_txt { left: 320px!important; top: 145px; } /* 청양 */
    #loc_07.m_txt { left: 440px!important; top: 215px; } /* 금산 */
    #loc_08.m_txt { left: 330px!important; top: 190px; } /* 부여 */
    #loc_09.m_txt { left: 255px!important; top: 75px; } /* 서산 */
    #loc_10.m_txt { left: 280px!important; top: 120px; } /* 홍성 */
    #loc_11.m_txt { left: 280px!important; top: 170px; } /* 보령 */
    #loc_12.m_txt { left: 300px!important; top: 220px; } /* 서천 */
    #loc_13.m_txt { left: 215px!important; top: 75px; } /* 태안 */
    #loc_14.m_txt { left: 380px!important; top: 200px; } /* 논산 */
    #loc_15.m_txt { left: 390px!important; top: 180px; } /* 계룡 */ 
    #main_content3 .onlineWrap { width: 100%; }
}

@media all and (max-width:640px) {
    #top_bannerWrap #top_banner { height: 350px; }
    #top_bannerWrap #top_banner .control { width: 100%; left: 0; padding: 0 0; }
    #top_bannerWrap #top_banner .banner_list li .text { width: 100%; }
    #top_bannerWrap #top_banner .banner_list li .text span { text-overflow: inherit ; white-space: inherit; word-wrap: normal; overflow: inherit; }
    #top_bannerWrap #top_banner .banner_list li .img { display: none; }
    #main_content1 .noticeWrap, #main_content1 .courseWrap { float: inherit; width: 100%; overflow: hidden; }
     #main_content1, #main_content2 { margin-top: 10px!important; }
    #main_content2 .mapWrap, #main_content2 .etcWrap { float: inherit; width: 100%; overflow: hidden; }
    #main_content1 .noticeWrap .notice_content ul li span { display: none; }
    #main_content1 .courseWrap { margin-top: 10px; }
    #main_content1 .courseWrap .course_new dl:nth-of-type(1) { width: 100%; }
    #main_content1 .courseWrap .course_new dl:nth-of-type(2) { display: none; }
    #main_content1 .courseWrap ul li .c_tit { width: 100%; }
    #main_content1 .courseWrap ul li .area { display: none; }
    #main_content2 .etcWrap .cyber_link, #main_content2 .etcWrap .group_link { float: inherit; width: 100%; margin-top: 10px; }
    #chungnam, #chungnam.main_map, .loc_div { display: none; }
    
    #main_content3 .onlineWrap .online_left, #main_content3 .onlineWrap .online_right { float: inherit; width: 100%; }
    #main_content3 .onlineWrap .online_right { margin-top: 30px; }
  
}

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

}