@charset "utf-8";
html{font-size:20px;}
body{font-size:1rem;}

/* Common CSS */
.mwrap{background:url(/images/bg_sky.jpg) no-repeat;}
.wrap>section{margin-bottom:100px;}
.wrap section:nth-child(6){margin-top:100px;}
.inner {
    width: 1300px;
    margin: 0 auto;
    position:relative;
}

/* 메인비주얼 */
.intro{padding:30px;}
.intro div{height:100%;}
.intro figure{position: relative; overflow: hidden; height:100%; display:flex; justify-content: flex-end;}
/*.intro figure p{position: absolute; bottom:0; right:0; vertical-align:bottom;}*/
.slider figcaption{
    position:absolute; top:50%; transform: translateY(-50%); left:50px; width:40%; padding:20px;
    box-sizing:border-box;
}
.slider figcaption em strong:first-child{color:#f0564f;font-size:48px;}
.slider figcaption em strong:last-child{color:#34a35a;font-size:48px;}
.slider figcaption em,
.slider figcaption span{display: block; opacity:0; transform: translateX(100px); padding-left:20px;}
.slider figcaption em{font-weight:bold; font-size:2rem; letter-spacing: -2px; line-height:120%; transition: all .3s;}
.slider figcaption span{overflow: hidden; text-overflow:ellipsis; transition: all 2.8s; margin-top:20px;}
.slider .slick-active figcaption em,
.slider .slick-active figcaption span{ opacity:1; transform: translateX(0);}
.slider .slick-dots{position:absolute; bottom:10px;display: block; width:100%; text-align:center;}
.slider .slick-dots li{display: inline-block; width:7px; height:7px; margin:5px;}
.slider .slick-dots li button{font-size:0; width:7px; height:7px; cursor: pointer; background:#ccc; border-radius: 50%;}
.slider .slick-dots li.slick-active button{background:#299F56;}
.slider .slick-prev,
.slider .slick-next{
    position:absolute; top:50%; transform: translate(0, -50%); z-index:80;
    display: inline-block; text-indent: -9999px; padding:10px 20px; cursor:pointer;
    font:normal normal normal 2rem/1 FontAwesome;
    background: none;}
.slider .slick-prev{left:0; }
.slider .slick-next{right:0;}
.slider .slick-prev:before,.slider .slick-next:after{
    color:rgba(255,255,255,.6); text-indent: 0;
    position:absolute; top:8px;
}
/*.slider .slick-prev:before{
    content: '\f053';
    left:9px;
}
.slider .slick-next:after{
    content: '\f054';
    right:9px;
}*/

/* 주요활동 */
.mh2{position: relative;}
.mh2:before{position:absolute; content:''; width:35%; height:1px; background:#ddd; top:50%; left:0;}
.mh2:after{position:absolute; content:''; width:35%; height:1px; background:#ddd; top:50%; right:0;}
.mh2, .h2_exp{text-align:center;}
.h2_exp{margin-top:15px; font-size:15px; color:#555;}
.active_gall{position:relative;}
.active_gall .active{margin-top:30px; display: flex; justify-content: space-between;}
.active_gall .active h3{position:relative;}
.active_gall .active h3:before{content:''; position:absolute; width:27px; height:2px; background:#0f944b; top:-10px;}
.active_gall .active div{position:relative; width:31%;}
.active_gall .active div ul li p{width:100%; overflow:hidden; margin-bottom:20px;}
.active_gall .active div ul li a{position:relative; display:block; width:100%; height:100%;}
.active_gall .active div ul li p a:after{
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.6);
    z-index:1;
    opacity:0;
    transition:all .35s;
}
/*.active_gall .active div ul li > a hover + p img{transform: scale(1.2);}*/
.active_gall .active div ul li:hover p a:after{opacity:1;}
.active_gall .active div ul li a:hover img{transform: scale(1.2);}
.active_gall .active div ul li img{width:100%; height:100%; transition: .5s;}
.active_gall .active div ul li:last-child{margin-right:0;}
.active_gall .active div ul li span{display:block; margin:0;}
.active_gall .active div ul li span:nth-child(1){width:100%; vertical-align:top; font-size:1rem;}
.active_gall .active div ul li span:last-child{font-size:0.7rem; color:#777; margin-top:10px;}

/* 퀵메뉴 */
.qMenu{ width:100%;}
.qMenu ul{display:flex; justify-content: space-between;}
.qMenu li{width:24.5%; height:208px; transition: all 0.5s;}
.qMenu li:hover{}
.qMenu li a{display:inline-block; position:relative; width:100%; height:100%; border:1px solid #ddd;transition: all 0.5s;}
.qMenu li a:hover{background:#39A55C; border:1px solid #0f934a;}

.qMenu li:first-child a:before{
    width:0px;
}
.qMenu li a:hover span:before{border-radius: 30px;}
.qMenu li a span:after{transition: all 0.5s;}
.qMenu .qm01 a span:after{
    content: '';
    width:100%; height:100%;
    position:absolute;
    top:0; left:0;
    background:url(../images/q_icon01.png) 50% 40px no-repeat;
}
.qMenu .qm01 a:hover span:after{
    background:url(../images/q_icon01_1.png) 60% 40px no-repeat;
}
.qMenu .qm02 a span:after{
    content: '';
    width:100%; height:100%;
    position:absolute;
    top:0; left:0;
    background:url(../images/q_icon02.png) 50% 40px no-repeat;
    transition: all 0.5s;
}
.qMenu .qm02 a:hover span:after{
    background:url(../images/q_icon02_1.png) 60% 40px no-repeat;
}
.qMenu .qm03 a span:after{
    content: '';
    width:100%; height:100%;
    position:absolute;
    top:0; left:0;
    background:url(../images/q_icon03.png) 50% 40px no-repeat;
}
.qMenu .qm03 a:hover span:after{
    background:url(../images/q_icon03_1.png) 60% 40px no-repeat;
}
.qMenu .qm04 a span:after{
    content: '';
    width:100%; height:100%;
    position:absolute;
    top:0; left:0;
    background:url(../images/q_icon04.png) 50% 40% no-repeat;
}
.qMenu .qm04 a:hover span:after{
    background:url(../images/q_icon04_1.png) 60% 40% no-repeat;
}
.qMenu li a:hover span:after{
    transform: rotateY(180deg);
    /*transition: transform 0.8s ease;*/
    transform-style: preserve-3d;
}
.qMenu li a strong{position:absolute; margin-top:150px; box-sizing: border-box; width:100%; font-size:20px; font-weight:bold; color:#111; text-align:center;}
.qMenu li a:hover strong{color:#fff;}

.mov_noti .inner{border:0px solid #f00; display:flex; justify-content: space-between;}


/* 공지사항 */
.notice{position:relative; width:50%; display:inline-block; border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding-top:10px;}
.notice .noti_tit{margin:6px 0 0 14px;}
.notice ul{margin:8px 0 0 0;}
.notice li{position:relative; width:96%; padding:15px 0 15px 14px; font-size:0.95rem; display:inline-block;}
.notice li:after{
    content: '';
    width:5px; height:5px; background:#ccc;
    position:absolute; top:50%; left:0;
    border-radius: 50%;
    -moz-border-radius:50%; -webkit-border-radius:50%;
}
.notice li .tit{float:left; width:74%; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}
.notice li .date{float:left; width:25%; text-align:right;}

section .more{position:absolute; top:25px; right:0; text-align:center; transition: 0.3s;}
section .more a,.more i{font-size:0.7rem; color:#777; font-weight:bold;}
section .more:hover a,.more:hover i {color:#222;}

/* 사진자료 */
/*.gallery{position:relative; height:334px;}
.gallery ul{display:flex; margin-left:50px;}
.gallery ul li{margin-right:2%; width:315px; height:190px; overflow:hidden;}
.gallery ul li a{position:relative;display:block; width:100%; height:100%;}
.gallery ul li a:after{
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.7);
    z-index:1;
    opacity:0;
    transition:all .35s;
}
.gallery ul li:hover a:after{opacity:1;}
.gallery ul li img{width:100%; height:100%; transition: .5s;}
.gallery ul li a:hover img{transform:scale(1.2);}
.gallery ul li:last-child{margin-right:0;}

.gallery ul li a:hover span{top:52%;}
.gallery ul li a span{position:absolute; top:150%; left:50%; transform:translate(-50%, -50%); z-index:2; width:100%; padding:0 20px; text-align:center; color:#fff; transition:all .35s;}
.gallery ul li:hover a span{top:50%; transform:translate(-50%, -50%);}
.gallery .inner{display: flex; align-items: center; height:100%;}
.gallery .inner .tit{position:relative; margin-top:-50px;}
.gallery .inner .tit h3{color:#fff; text-align:center; width:100%; padding:0; margin:0;}
.gallery .inner .tit span{color:#fff; text-align:center; display:block; width:100%;}
.gallery .inner .tit .more{position:absolute; top:120px;}
.gallery .inner .tit .more a{color:#fff;border:1px solid rgba(255,255,255,.5); padding:5px 15px;}*/

/* 배너 */
.banner ul{display:flex;justify-content: space-around; padding:0 150px;}
.banner li{}


/* mediaQuery */
@media (min-width:1260px){
    #contents{width:1214px; margin:0 auto;}
    .active_gall .active div ul li p{height:250px;}
}

@media (max-width:1300px) {
    .inner {
        width: 98%;
        margin: auto;
        position:relative;
    }
    .mh2:before{width:30%;}
    .mh2:after{width:30%;}
}

@media (max-width:1024px) {
    .active_gall ul li:nth-child(3){display:none;}
    .active_gall ul li{}
    .gallery ul{display:flex; justify-content: space-between; margin:50px 0 0 0;width:100%;}
    .gallery ul li:nth-child(3){display:none;}
    .gallery ul li{width:45%;}
}

@media (max-width:960px){
    .wrap>section{}
    .intro figure{position: relative; overflow: hidden; height:100%; display:flex; justify-content: space-between;}
    .intro figure p{margin:0 auto;}
    .intro figure p img{width:80%; margin:0 auto;}
    .slider figcaption{
        position:absolute; top:20%; left:0; width:40%; padding:20px;
        box-sizing:border-box;
    }
    .slider figcaption em strong:first-child{font-size:24px;}
    .slider figcaption em strong:last-child{font-size:24px;}
    .slider figcaption em{font-size:24px;}

    .active_gall .active h3{position:relative; font-size:22px; letter-spacing: -1px;}
    section .more{position:absolute; top:50px; right:0; text-align:center; transition: 0.3s;}
    .gallery .inner{flex-wrap:wrap;}
    .qMenu ul{flex-wrap:wrap; width:100%; border:0px solid #000;}
    .qMenu li{width:48%; margin-bottom:15px; height:208px; transition: all 0.5s;}
    .qMenu li a strong{margin-top:;}
}
@media (max-width:768px){
    .wrap>section{margin-bottom:50px;}
    .intro > div{ margin-top:20px; }
    .intro figure{position:relative; display:block; height:99%;}
    .intro figure p{height:100%;}
    .mh2:before{width:20%;}
    .mh2:after{width:20%;}
    .intro figure p img{width:70%;}
    .slider figcaption span{display:none;}
    .active_gall ul{flex-wrap:wrap;}
    .active_gall ul li{width:100%; margin-bottom:30px;}
    .mov_noti .inner{border:0px solid #f00; flex-wrap:wrap;}
    .movie{width:100%;}
    .notice{width:100%; margin-top:100px;}
    /*.gallery{background:none; height:550px;}
    .gallery ul{display:flex; justify-content: space-between; margin:50px 0 0 0;width:100%;}
    .gallery ul li{width:100%;}
    .gallery .inner .tit{position:relative; margin-top:-50px; width:100%;}
    .gallery .inner .tit h3{color:#333; text-align:left; width:100%;}
    .gallery .inner .tit .tit_exp{color:#777; text-align:left;}
    .gallery .inner .tit .more{position:absolute; top:15px; right:0; width:100%; text-align:right;}
    .gallery .inner .tit .more a{color:#666;border:none; padding:5px 15px; transition: .5s;}
    .gallery .inner .tit .more a:hover{background:#fff; color:#444;}*/
    footer > div > div:last-child{display:none;}
}
@media (max-width:640px){
    .slider figure  figcaption{display:none;}
    .intro figure p img{width:100%;}
    .mh2:before{width:15%;}
    .mh2:after{width:15%;}
    .qMenu li a strong{margin-top:;}
}
@media (max-width:480px){

    .mh2{font-size:28px;}
    .mh2:before{width:10%;}
    .mh2:after{width:10%;}
    .mh2:after{position:absolute; content:''; height:1px; background:#ddd; top:50%; right:0;}

    .active_gall .active{margin-top:30px; display: flex; justify-content: space-between; flex-wrap: wrap;}
    .active_gall .active div{width:100%;}

    .qMenu ul li{width:49%; height:150px; border:0px solid #f00; margin:3px 0;}
    .qMenu li a strong{font-size:16px; margin-top:60%; letter-spacing: -1px;}
    /*.gallery ul li{display:block; width:50%;}
    .community{background:#999 url(../images/q_link_bg.jpg) 100% 0 no-repeat; background-size:cover; height:100%;}
    .community ul{float:none; margin:10px auto;}*/
}
@media (max-width:320px){

}