/* 스킵 내비게이션 */
#skip {position: relative;}
#skip a {position: absolute; left: 0; top: -50px; color: #fff;
    /* border-width: 1px;
    border-style: solid;
    border-color: #fff; */ 
    /* 속기형 작성법 */
    border: 1px solid #fff; 
    background-color: #333;
    line-height: 40px;
    height: 40px;
    width: 200px;
    text-align: center;
}
#skip a:focus ,#skip a:active {top: 0px;}

/* 레이아웃 */
#wrap {}
#header {
    height: 325px;
    /* 
    background-image: url(../img/header_bg.jpg);
    background-repeat: repeat-x;
    background-position: center top; */ 
    /* 속기형 작성법 */
    background: url(../img/header_bg.jpg) repeat-x center top;
}
#contents {}
#footer {border-top: 1px solid #eee;}

/* 컨텐츠 레이아웃 */
#cont_nav {background: #f6fdff; display: none;}
#cont_tit {background: #eaf7fd;}
#cont_ban {background: #dceff7;}
#cont_cont {background: #f6fdff;}

/* 컨테이너 */
.container {width: 990px; margin: 0 auto; height: inherit; /* background: rgba(255,255,255,0.3); */}

/* header */
.header {}
.header .header_menu {text-align: right;}
.header .header_menu a {color: #fff; padding: 10px 0px 10px 10px; display: inline-block;}
.header .header_menu a:hover {color: #666;}

.header .header_tit {text-align: center;}
.header .header_tit h1 {background-color: #4aa8d4; display: inline-block; font-size: 28px; color: #fff; margin-top: 40px; text-transform: uppercase; padding: 5px 20px 6px 20px;}
.header .header_tit a {display: inline-block; background-color: #2698cb; font-size: 18px; padding: 5px 20px 6px 20px; color: #fff; text-transform: uppercase; margin-top: -5px;}

.header .header_icon {text-align: center; margin-top: 40px;}
.header .header_icon a {
    display: inline-block;
    width: 60px; height: 60px;
    background-image: url(../img/icon.png);
}
.header .header_icon a.icon1 {background-position: 0 0;}
.header .header_icon a.icon1:hover {background-position: -60px 0;}
.header .header_icon a.icon2 {background-position: 0 -60px;}
.header .header_icon a.icon2:hover {background-position: -60px -60px;}
.header .header_icon a.icon3 {background-position: 0 -120px;}
.header .header_icon a.icon3:hover {background-position: -60px -120px;}
.header .header_icon a.icon4 {background-position: 0 -180px;}
.header .header_icon a.icon4:hover {background-position: -60px -180px;}

/* 전체 메뉴 */
.nav {overflow: hidden; padding: 30px 0;}
.nav > div {float: left; width: 40%;}
/* .nav > div.last {width: 20%;} */
.nav > div:last-child {width: 20%;}
.nav > div h3 {font-size: 18px; color: #25a2d0;}
.nav > div ul {overflow: hidden;}
.nav > div ul li {float: left; width: 50%;}
.nav > div:last-child ul li {width: 100%;}
.nav > div ul li a:hover {text-decoration: underline;}

/* 타이틀 */
.tit {position: relative;}
.tit h2 {text-align: center; font-size: 40px; padding: 5px 0; color: #2c94c4; letter-spacing: 2px; font-family: "Nanum Brush Script";}
.tit .btn {
    position: absolute; right: 0; top: 5px; 
    width: 60px; height: 60px;
    background-image: url(../img/icon.png);
    background-position: 0 -600px;
} 
.tit .btn.on {
    background-position: -0px -660px;
}

/* 배너 */
.ban {position: relative; padding: 24px 0;}
.ban > a {
    position: absolute; top: 60px; 
    width: 43px; height: 43px; 
    background-image: url(../img/icon.png); 
} 
.ban a.prev {
    left: -80px;
    background-position: -150px 0;
}
.ban a.prev:hover {background-position: -193px 0;}
.ban a.next {
    right: -80px; 
    background-position: -150px -43px;
}
.ban a.next:hover {background-position: -193px -43px;}
.ban ul {overflow: hidden;}
.ban ul li {float: left; width: 330px;}
.ban ul li img {border: 4px solid #dcdcdc;}
.ban ul li img:hover {border-color: #98bcdc;}
.ban ul li.ban_img1 {text-align: left;}
.ban ul li.ban_img2 {text-align: center;}
.ban ul li.ban_img3 {text-align: right;}

/* 이미지 슬라이드 */
.slider {}
.slider .div.slick-track {position: relative;}
.slider .slick-prev {
    position: absolute; left: -80px; top: 75px;
    width: 43px; height: 43px;
    background: url(../img/icon.png);
    background-position: -150px 0;
    border: none;
    text-indent: -9999px;
}
.slider .slick-next {
    position: absolute; right: -80px; top: 75px;
    width: 43px; height: 43px;
    background: url(../img/icon.png);
    background-position: -150px -43px;
    border: none;
    text-indent: -9999px;
}
.slider .slick-dots {
    position: absolute; left: 50%; bottom: 8px;
    transform: translateX(-50%);
}
.slider .slick-dots li {
    display: inline-block;
    width: 15px; height: 15px; margin: 5px;
}
.slider .slick-dots li button {
    width: 15px; height: 15px;
    background: #5dbfeb;
    border-radius: 50%;
    text-indent: -9999px;
    border-width: 0;
}

/* 컨텐츠 */
.cont {overflow: hidden; padding-top: 30px;}
.cont .column {
    width: 289px; height: 363px; float: left; 
    margin: 0 30px 30px 0; padding-right: 30px;
    position: relative;
}
/* width : padding + border + margin */
/* 289: + 30 +30 = 349 (990) */
.cont .column.col1 {border-right: 1px solid #c8c8c8;}
.cont .column.col2 {border-right: 1px solid #c8c8c8;}
.cont .column.col3 {margin-right: 0; padding-right: 0;}
.cont .column.col4 {border-right: 1px solid #c8c8c8;}
.cont .column.col5 {border-right: 1px solid #c8c8c8;}
.cont .column.col6 {margin-right: 0; padding-right: 0;}

.cont .column .ico_img {
    position: absolute; left: 0; top: 0;
    display: block; width: 60px; height: 60px;
    background-image: url(../img/icon.png);
}
.cont .col1 .ico_img {background-position: 0 -240px;}
.cont .col1 .ico_img:hover {background-position: -60px -240px;}
.cont .col2 .ico_img {background-position: 0 -300px;}
.cont .col2 .ico_img:hover {background-position: -60px -300px;}
.cont .col3 .ico_img {background-position: 0 -360px;}
.cont .col3 .ico_img:hover {background-position: -60px -360px;}
.cont .col4 .ico_img {background-position: 0 -420px;}
.cont .col4 .ico_img:hover {background-position: -60px -420px;}
.cont .col5 .ico_img {background-position: 0 -480px;}
.cont .col5 .ico_img:hover {background-position: -60px -480px;}
.cont .col6 .ico_img {background-position: 0 -540px;}
.cont .col6 .ico_img:hover {background-position: -60px -540px;}
.cont .column .ico_tit {padding-left: 70px; font-size: 16px; color: #2c94c4;}
.cont .column .ico_desc {padding-left: 70px; border-bottom: 1px solid #d0d0d0; padding-bottom: 15px; margin-bottom: 15px;}

/* 게시판 */
.notice {position: relative;}
.notice h4 {font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;}
.notice ul li {
    padding-left: 8px;
    background: url(../img/dot.gif) no-repeat 0 8px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /* 한줄 효과 */
}
.notice ul li a {font-size: 12px;}
.notice a.more {
    position: absolute; right: 0; top: 0;
    width: 17px; height: 17px; display: block;
    background: url(../img/icon.png) -150px -90px;
}

/* 게시판2 */
.notice2 {position: relative; margin-top: 15px;}
.notice2 h4 {font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;}
.notice2 li {
    padding-left: 8px; 
    background: url(../img/dot.gif) no-repeat 0 8px;
    overflow: hidden;
    font-size: 12px;
}
.notice2 li a {
    float: left; width: 66%;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.notice2 li span {float: right; width: 30%; text-align: right;}
.notice2 a.more {
    position: absolute; right: 0; top: 0;
    width: 17px; height: 17px; display: block;
    background: url(../img/icon.png) -150px -90px;
}

/* 게시판3 */
.notice3 {position: relative;}
.notice3 h4 {font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;}
.notice3 li {position: relative; padding: 8px 0 14px 60px;} 
.notice3 li a img {width: 50px; position: absolute; left: 0; top: 0; border: 1px solid #0093bd;}
.notice3 li a strong {
    display: block;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.notice3 li a span {
    display: block;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-size: 12px;
}
.notice3 a.more {
    position: absolute; right: 0; top: 0;
    width: 17px; height: 17px; display: block;
    background: url(../img/icon.png) -150px -90px;
}

/* 마우스 오버효과 */
.notice_hover {}
.notice_hover h4 {font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;}
.notice_hover ul {overflow: hidden;}
.notice_hover li {float: left; width: 93px; margin-right: 5px; text-align: center;}
/* .notice_hover li:last-child {margin-right: 0;} */
/* .notice_hover li:nth-child(3) {margin-right: 0;} */
.notice_hover li:nth-of-type(3) {margin-right: 0;}
.notice_hover li a span {position: relative; display: block; width: 93px; height: 93px; line-height: 93px;}
.notice_hover li a span img {width: 100%;}
.notice_hover li a span em {
    position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.7);
    color: #fff;
    width: 100%; height: 100%;
    text-align: center;
    visibility: hidden;
}
.notice_hover li a span:hover em {visibility: visible;}
.notice_hover li a strong {font-size: 12px; padding-top: 3px; display: inline-block;}

/* 마우스 오버효과2 */
.notice_hover2 {padding-top: 20px;}
.notice_hover2 ul {overflow: hidden;}
.notice_hover2 li {float: left; width: 93px; margin-right: 5px; text-align: center;}
.notice_hover2 li:last-child {margin-right: 0;}
.notice_hover2 li a span {position: relative; display: block; width: 93px; height: 93px;}
.notice_hover2 li a span img {width: 100%;}
.notice_hover2 li a span em {
    position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,0.7);
    text-align: center;
    width: 100%;
    color: #fff;
    visibility: hidden;
}
.notice_hover2 li a span:hover em {visibility: visible;}
.notice_hover2 li a strong {font-size: 12px; padding-top: 3px; display: inline-block;}

/* 콘텐츠 요소를 보이지 않게 하는 방법 */
/* 
1. display: none; <--> display: block; (영역이 사라짐)
2. visibility: hidden; <--> visibility: visible;  (영역유지)
3. opacity: 0; <--> opacity: 1; (영역유지)(애니메이션 가능)
4. width: 0; height: 0; overflow:hidden; (IR효과)
*/

/* 탭 메뉴 */
.tab_menu {border: 1px solid #ccc; padding: 8px; height: 105px; position: relative;}
.tab_menu ul {overflow: hidden; border-bottom: 1px solid #ccc;}
.tab_menu ul li {float: left; border: 1px solid #ccc; margin-right: -1px; margin-bottom: -1px;}
.tab_menu ul li a {padding: 5px 10px; display: block;}
.tab_menu ul li ul {position: absolute; left: 0; top: 48px; border: 0;}
.tab_menu ul li ul li {
    border: 0; float: none; padding-left: 18px;
    background: url(../img/dot.gif) no-repeat 9px 8px; 
} 
.tab_menu ul li ul li a {padding: 0 0 3px 0;}
.tab_menu ul li.active {background: #2c94c4;}
.tab_menu ul li.active a {color: #fff;}
.tab_menu ul li.active ul li a {color: #333;}

/* 최신 공지사항 */
.notice4 {margin-top: 15px; border: 1px solid #ccc; position: relative; height: 120px;}
.notice4 h4 {border-bottom: 1px solid #ccc; font-size: 14px; color: #0093bd; padding: 8px 10px; font-weight: bold;}
.notice4 h4 em {color: darkred;}
.notice4 ul {padding-top: 10px;}
.notice4 ul li {
    overflow: hidden;
    background: url(../img/dot.gif) no-repeat 8px 8px;
    padding-bottom: 2px;
}
.notice4 ul li a {
    width: 60%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    float: left; padding-left: 18px;
}
.notice4 ul li span {width: 28%; float: right;}
.notice4 a.more {position: absolute; right: 9px; top: 9px;}

/* 로그인 */
#login-wrap {background: #f2f4f5; padding: 15px; margin-bottom: 15px;}
.logign_header {overflow: hidden; font-size: 12px; height: 30px;}
.logign_header .lh_check {float: left; padding-right: 15px;}
.logign_header .lh_check .input_check {vertical-align: -2px;}
.logign_header .lh_ip {float: left;}
.logign_header .lh_ip em {color: #0093bd; text-decoration: underline;}
.logign_contents {position: relative;}
.logign_contents .lc_btn {position: absolute; right: 0; top: 0; width: 62px; height: 47px; background: #fff; border: 1px solid #bebebe;}
.logign_contents .input_text {width: 182px; height: 16px; padding: 2px 5px; border: 1px solid #bebebe; margin-bottom: 3px; background: #fff;}
.logign_footer {margin-top: 5px;} 
.logign_footer li {display: inline;} 
.logign_footer li a {font-size: 12px;} 

/* 갤러리 */
.gallery {position: relative; border: 1px solid #ccc; height: 255px; overflow: hidden;}
.gallery h4 {font-size: 14px; color: #0093bd; padding: 10px 0 8px 11px; border-bottom: 1px solid #ccc;}
.gallery .gallery_btn {position: absolute; right: 5px; top: 7px;}
.gallery .gallery_btn ul {overflow: hidden;}
.gallery .gallery_btn li {float: left; margin: 1px 2px;}
.gallery .gallery_btn li a {display: block; width: 23px; height: 23px; background: url(../img/icon.png) no-repeat;}
.gallery .gallery_btn li.gb_icon1 a {background-position: -150px -120px;}
.gallery .gallery_btn li.gb_icon2 a {background-position: -150px -143px;}
.gallery .gallery_btn li.gb_icon3 a {background-position: -150px -166px;}
.gallery .gallery_btn li.gb_icon4 a {background-position: -150px -189px;}
.gallery .gallery_btn li.gb_icon1 a:hover {background-position: -173px -120px;}
.gallery .gallery_btn li.gb_icon2 a:hover {background-position: -173px -143px;}
.gallery .gallery_btn li.gb_icon3 a:hover {background-position: -173px -166px;}
.gallery .gallery_btn li.gb_icon4 a:hover {background-position: -173px -189px;}

.gallery .gallery_img img {width: 100%;}

/* 푸터 */
.footer {text-align: center; padding: 25px 0;} 
.footer ul {}
.footer li {display: inline; padding: 0 7px 0 10px; position: relative;}
.footer li::before {
    content: '';
    width: 1px; height: 12px; background: #ccc;
    position: absolute; left: 0; top: 2px;
}
.footer li:first-child::before {
    width: 0; height: 0;
}
.footer address {margin-top: 20px;}

/* 팝업 */
.popup {}
.popup h4 {font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold; }
.lightbox a {float: left; width: 93px; display: block; margin-right: 5px;}
.lightbox a:last-child {margin-right: 0;}
.lightbox a img {width: 100%;}
.slider .slick-dots li.slick-active button {
    background: #2b91c8;
}