/* 레이아웃 */
body {background: url(../img/header_bg.jpg) repeat-x center top;}
#header {}
#nav {background-color: #f6fdff;}
#title {background-color: #eaf7fd;}
#contents .container {border-right: 1px solid #dbdbdb; border-left: 1px solid #dbdbdb;}
#cont_left {float: left; width: 250px;}
#cont_center {
    overflow: hidden; min-height: 1300px; margin-right: 250px;
    border-right: 1px solid #dbdbdb;
    border-left: 1px solid #dbdbdb;
}
#cont_right {position: absolute; right: 0; top: 0; width: 250px;}
#footer {border-top: 1px solid #dbdbdb;} 

/* 컨테이너 */
.container {position: relative; width: 1200px; margin: 0 auto; /* background: rgba(0,0,0,0.3); */}








#header {background: url(https://store.img11.co.kr/69122131/fda67ec4-6636-427c-b0ce-b8ff07f45b97_1652774391649.jpg);
    background-size: cover;
        
    repeat-x center top;}
#nav {background-color: #f6fdff;}

.container{width:1200px; margin:0 auto;}

.header{height: 327px;}
.header .header_menu{text-align: right;}
.header_menu a{color: #fff; padding: 8px 0 6px 10px;
display: inline-block; color 0.3s ease; font-family: 'Abel', sans-serif;
}
.header .header_menu a:hover {color: #ccc;}


header .header_tit {text-align: center; text-transform: uppercase; margin-top: 55px; font-family: 'Abel', sans-serif;}
.header .header_tit h1 {
    font-size: 30px; 
    color: #fff; 
    background: #51b0dc; 
    display: inline-block; 
    padding: 5px 30px 5px 30px; 
    letter-spacing: 2px; 
    font-weight: 900; 
    transition: box-shadow 0.25s ease-in-out;
}
.header .header_tit h1:hover {
    box-shadow: 
        inset -9em 0 0 0 #257fac, 
        inset 9em 0 0 0 #257fac;
    }
.header .header_tit a {
    font-size: 16px; 
    color: #fff; 
    background: #4a9abf; 
    display: inline-block; 
    padding: 10px 20px 10px 20px; 
    margin-top: -7px; 
    transition: box-shadow 0.25s ease-in-out;
}
.header .header_tit a:hover {
    box-shadow: 
        0 0 0 5px rgba(75,154,191,0.9) inset, 
        0 0 0 100px rgba(0,0,0,0.1) inset;
}

header .header_icon {text-align: center; margin-top: 40px; padding-bottom: 45px;}
.header .header_icon li {display: inline; margin: 0 2px;}
header .header_icon li a {
    position: relative; 
    background-color: #1cd3b4; 
    border-radius: 50%; 
    width: 60px; height: 60px; 
    color: #fff;  display: 
    inline-block; 
    font-size: 35px; 
    line-height: 60px; 
    transition: all 0.3s ease;
}

.header .header_icon li a span {
    position: absolute; 
    left: 50%; top: -40px; 
    transform: translateX(-50%); 
    font-size: 12px; 
    line-height: 1.6; 
    background: #3192bf; 
    padding: 3px 9px; 
    border-radius: 6px 0; 
    opacity: 0; 
    transition: all 0.3s ease;
}


/* 전체 메뉴 */
.nav {overflow: hidden; padding: 25px 0;}
.nav > div {float: left; width: 40%;}
.nav > div:last-child {width: 20%;}
.nav > div:last-child li {width: 100%;}
.nav > div h3 {font-size: 18px; color: #25a2d0; font-weight: bold; margin-bottom: 4px;}
.nav > div li a {position: relative;}
.nav > div li:hover a:after {width: 100%;}



/* 타이틀 */
.title {position: relative; text-align: center;}
.title h2 {font-family: 'Nanum Brush Script', cursive; font-size: 39px; color: #0093bd; padding: 5px 0;}
.title .btn {
    position: absolute; right: 0; top: 5px;
    width: 60px; height: 60px;
    line-height: 60px;
    background: #3192bf; color: #fff;
    font-size: 35px;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.title .btn:hover {
    box-shadow:
        0 0 0 3px rgba(71,154,191,0.9) inset,
        0 0 0 100px rgba(0,0,0,0.1) inset; 
}

/* 컨텐츠 영역 */
.column {padding: 15px; border-bottom: 1px solid #dbdbdb;}
.column .col_tit {font-size: 20px; color: #2f7fa6; padding-bottom: 5px;}
.column .col_desc {
    border-bottom: 1px dashed #dbdbdb; 
    padding-bottom: 15px; margin-bottom: 15px; 
    color: #878787; line-height: 18px;
}
.column.col1 {}
.column.col2 {}
.column.col3 {border-bottom: 0;}
.column.col4 {}
.column.col5 {}
.column.col6 {border-bottom: 0;}
.column.col7 {}
.column.col8 {}
.column.col9 {border-bottom: 0;}

/* 메뉴 */
.menu {}
.menu li {position: relative;}
.menu li a {
    font-size: 16px; text-transform: uppercase;
    color: #878787;
    border-bottom: 1px solid #dbdbdb;
    padding: 10px; display: block;
    transition: box-shadow 0.34s ease, background 0.34s ease;
}
.menu li a i {
    position: absolute; right: 10px; top: 15px;
}

.menu li a:hover {
    box-shadow: inset 180px 0 0 0 rgba(36,130,174,0.7);
    color: #fff;
    background: rgba(36,130,174,0.9);
}

/* 게시판1 */
.notice1 {position: relative;}
.notice1 h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 5px;}
.notice1 li {position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 8px;}
.notice1 li:before {
    content: '';
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #449ce2;
    position: absolute; left: 0; top: 6px;
}
.notice1 .more {
    position: absolute; right: 0; top: 3px;
    color: #878787;
    text-transform: uppercase;
    font-size: 10px;
}

/* 게시판2 */
.notice2 {position: relative;}
.notice2 h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 5px;}
.notice2 li {
    position: relative;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    padding-left: 8px;
    padding-bottom: 5px;
    max-height: 40px; /* ie */
}
.notice2 li:before {
    content: '';
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #449ce2;
    position: absolute; left: 0; top: 6px;
}
.notice2 .more {
    position: absolute; right: 0; top: 3px;
    color: #878787;
    text-transform: uppercase;
    font-size: 10px;
}



/* 블로그1 */
.blog1 img {width: 100%;}
.blog1 .img-retina {display: none;}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (min-device-pixel-ratio: 1.5),
        only screen and (min-resolution: 1.5dppx) {
        .blog1 .img-retina {display: initial;}
        .blog1 .img-normal {display: none;}
}

/* 블로그2 */
.blog2 h5 {color: #fff; text-align: center; padding: 30px 30px; text-transform: uppercase;}
.blog2 p {padding-top: 5px;}
.blog2 .img-retina {
    background-image: url(https://store.img11.co.kr/69122131/ead9ad46-d29d-47ee-ad81-8f91eb72b88b_1653291461792.jpg);
    background-size: cover;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (min-device-pixel-ratio: 2),
        only screen and (min-resolution: 2dppx) {
        .blog2 .img-retina {background-image: url(https://store.img11.co.kr/69122131/ead9ad46-d29d-47ee-ad81-8f91eb72b88b_1653291461792.jpg);}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3),
        only screen and (min-device-pixel-ratio: 3),
        only screen and (min-resolution: 3dppx) {
        .blog2 .img-retina {background-image: url(https://store.img11.co.kr/69122131/ead9ad46-d29d-47ee-ad81-8f91eb72b88b_1653291461792.jpg);}
}





/* 라이트 박스 */
.square a {position: relative; overflow: hidden; float: left; width: 19%; margin: 0.5%;}
.square a img {width: 100%; display: block;}
.square a em {background: rgba(0,0,0,.77); color: #fff; width: 100%; text-align: center; 
    position: absolute; left: 0; bottom: -30px; opacity: 1; transition: all .3s ease;}
.square a:hover em {bottom: 0; background: rgba(0,0,0,.57);}
.square a:nth-child(1):hover img {filter: blur(2px);}
.square a:nth-child(2):hover img {filter: brightness(50%);}
.square a:nth-child(3):hover img {filter: contrast(10%);}
.square a:nth-child(4):hover img {filter: grayscale(100%);}
.square a:nth-child(5):hover img {filter: hue-rotate(120deg);}
.square a:nth-child(6):hover img {filter: invert(100%);}
.square a:nth-child(7):hover img {filter: opacity(10%);}
.square a:nth-child(8):hover img {filter: saturate(10%);}
.square a:nth-child(9):hover img {filter: sepia(120%);}
.square a:nth-child(10):hover img {filter: sepia(120%) hue-rotate(120deg);}

/* 비디오 */
.video {position: relative; width: 100%; padding-bottom: 55.25%;}
.video iframe {position: absolute; width: 100%; height: 100%;}











/* media query*/
/* 화면 너비 0 ~ 1220px */
@media (max-width: 1220px){
    .container {width: 100%;}
    .row {padding: 0 15px;}
    #contents .container {border: 0;}

    .title .btn {right: 5px;}
    .square a {width: 24%;}
    .square a:nth-child(5n) {display: none;}
}

/* 화면 너비 0 ~ 1024px */
@media (max-width: 1024px){
    .square a {width: 32.3333%;}
    .square a:nth-child(5) {display: block;}
}

/* 화면 너비 0 ~ 960px */
@media (max-width: 960px){
    #cont_right {position: static; width: 100%; border-top: 1px solid #dbdbdb;}
    #cont_center {margin-right: 0; border-right: 0;}

    .nav > div {float: none; width: 100%;}
    .nav > div:last-child {width: 100%;}
    .nav > div li {width: 33.33333%;}
    .nav > div:last-child li {width: 33.33333%;}
    .nav > div ol {margin-bottom: 10px;}
}

/* 화면 너비 0 ~ 768px */
@media (max-width: 768px){
    #cont_left {float: none; width: 100%;}
    #cont_center {border-left: 0;}
}

/* 화면 너비 0 ~ 600px */
@media (max-width: 600px){
    .header {height: auto;}
    .header .header_tit {display: none;}
    .header .header_icon {display: none;}
    .title .btn {display: none;}

    .nav > div li {width: 50%;}
    .nav > div:last-child li {width: 50%;}

    .column.col1 .col_tit {display: none;}
    .column.col1 .col_desc {display: none;}
    .column.col1 .menu li a i {display: none;}
    .column.col1 {padding: 0; border-bottom: 0;}
    .column.col1 .menu ul {overflow: hidden;}
    .column.col1 .menu li {float: left; width: 33.3333%; border-right: 1px solid #dbdbdb; text-align: center; box-sizing: border-box;}
    .column.col1 .menu li:nth-child(3n) {border-right: 0;}
    .column.col1 .menu li a {color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.7);}
    .column.col1 .menu li a:hover { box-shadow: none; background: rgba(36,130,174,0.3);}
    .column.col2 {background: #fff;}
    .column.col4 {border-top: 1px solid #dbdbdb;}

    .slider figcaption {padding: 10px;}
    .slider figcaption em {font-size: 18px;}
    .slider figcaption span {font-size: 14px;}

    .square a {width: 49%;}
    .square a:nth-child(5) {display: none;}
}

/* 화면 너비 0 ~ 480px */
@media (max-width: 480px){
    
}

/* 화면 너비 0 ~ 320px */
@media (max-width: 320px){
    .nav > div li {width: 100%;}
    .nav > div:last-child li {width: 100%;}

    .square a {width: 100%; margin-right: 0; margin-left: 0;}
}