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

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

/* 메인비주얼 */
.mVisual > div figure{z-index:9; position:relative;}
.mVisual > div figure p{position:absolute; top:60%; right:5%; text-align:center; z-index:10; color:#013487; text-shadow: 2px 0 #fff, 0 2px #fff, -2px 0 #fff, 0 -2px #fff; font-family: 'NEXON Lv2 Gothic Bold'; letter-spacing:-1px;}
.mVisual > div figure p strong span:nth-child(1){color:#1A59A8; font-family: 'TheJamsil5Bold';}
.mVisual > div figure p strong span:nth-child(2){color:#1EACB0; font-family: 'TheJamsil5Bold';}
.mVisual > div figure p strong{font-size:36px; font-family: 'TheJamsil5Bold'; color:#333;}
.container{position:relative; margin:0 auto; width:1400px;}
.dv01{width:100%; /*height:493px;*/ display:flex; justify-content: space-between; flex-wrap: wrap; margin-top:66px;}
.graph{position:relative; width:573px; border-radius:15px; background:#fff;}
.graph .top{display:flex; justify-content: left; padding-bottom:20px;}
.graph .tit{position:relative; margin:20px 0 0 20px;}
.graph .tit:before{content:''; position:absolute; top:14px; left:0; width:18px; height:18px;  background:url(/images/icon01.png) no-repeat;/*border-radius: 50%; background:#f9684a;*/}
/*.graph .tit span{position:relative; padding-left:-20px;} !* 타이틀 아이콘 흰색부분 *!*/
.graph .tit strong{display: inline-block; margin-left:25px; font-size:24px;}
/*.graph .tit span:before{content:''; position:absolute; top:2px; left:0; width:8px; height:8px; border-radius: 50%; background:#fff; margin:2px 0 0 5px;}*/
.graph .inner_gr{position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
.graph .graph_sel{position:relative; width:30%; margin-top:28px;}
.graph select{position:absolute; top:0; border:1px solid #ccc; padding:5px 10px; font-size:18px; color:#888; margin-left:15px;}

.graph_area{width:93%; height:401px; margin:0 auto;}
.graph .s_more{position:absolute; top:20px; right:20px;}
.graph .s_more a{ display:inline-block; width:140px; height:34px; background:#444; color:#fff; font-size:16px; text-align:center;}

.slider{position:relative; width:811px; height:493px; border-radius:15px; overflow:hidden;}
.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;}
.slider figcaption em strong:last-child{color:#34a35a;}
.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 1.8s;}
.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; top:calc(100% - 50px);display: block; width:100%; text-align:center;}
.slider .slick-dots li{display: inline-block; margin:2px;}
.slider .slick-dots li button{font-size:0; width:15px; height:15px; cursor: pointer; background:#fff; border:2px solid #9BD546; border-radius: 50%;}
.slider .slick-dots li.slick-active button{background:#9BD546; border:2px solid #9BD546;}
.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;
    right:9px;
}

/*레이어 팝업*/
.layer_pop{position:absolute; top:150px; width:127; *top:0; left:330px; z-index:99999; /*width:530px; *//*height:700px;*/}
.layer_pop .pop{position:relative; width:100%;}
.layer_pop .pop ul{display:flex; flex-wrap: wrap; width:100%;}
.layer_pop .pop ul li p{}
.layer_pop .pop ul li p a{display: inline-block;}
.layer_pop .pop ul li > span a{display:inline-block; /*width:30px; height:30px; */text-align:center; font-weight:bold; background:#444; color:#fff;}
.layer_pop .pop ul li > span a:hover{background:#F45628; color:#fff;border:1px solid #F45628;}
.layer_pop .pop ul li .ov{background:#F45628; color:#fff;border:1px solid #F45628;}
.layer_pop .pop li .line a{border-bottom:none;}
/*.layer_pop ul li p{position:absolute; top:0; left:0; border:1px solid #ddd;}*/
.close{background:#333; color:#fff; font-size:18px; text-align:center; padding:5px 0; margin-top:-11px;}
.close span{color:#f80; font-weight:bold;}
.close span a{display:inline-block; padding:0 15px; color:#f80;}
.close span a:hover{color:#F4BF20;}
/*레이어 팝업*/


/* bxslide pager
.bx-wrapper .bx-pager {
    font-size: .85em;
    font-family: Arial;
    font-weight: bold;
    color: #666;
    position:absolute;
    top:0;
    left:200px;
}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    background:#cfd9d7;
    border:0;
    text-indent: 0;
    text-align:center;
    display: block;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    margin: 0 1px;
    outline: 0;
    padding-top:4px;
    border-radius: 50%;
    color:#999;
}
*/
/* 퀵메뉴 */
.quick{display:flex; justify-content: space-between; flex-wrap: wrap; width:100%; height:227px; background:#194ca2; margin-top:43px; border-radius: 15px;}
.quick .title{position:relative; width:25%;}
.quick .m_title{display:none;}
.quick .title span{position:absolute; top:40%; left:50%; transform: translate(-50%,-40%); text-align:center; color:#fff; font-size:34px; font-weight:bold; background:url(../images/q_arrow.png) 100% 100% no-repeat; padding:10px 10px 30px 10px;}
.quick .qMenu{width:68%; margin-right:4%;}
.quick .qMenu ul{width:100%; display:flex; justify-content: space-around; flex-wrap: wrap;}
.qMenu li{margin-top:30px;}
.qMenu li .out_cirle{position:relative; display:inline-block; width:131px; height:131px; background: rgba(255,255,255,.1); border-radius: 50%;
    -moz-border-radius:50%; -webkit-border-radius:50%;
    transition: all 0.4s;}
.qMenu li .out_cirle span{position:absolute; top:50%; left:50%; display:inline-block; width:104px; height:104px; transform: translate(-50%,-50%); border-radius: 50%;
    -moz-border-radius:50%; -webkit-border-radius:50%;}
.qMenu li .out_cirle span strong{display:inline-block; width:131px; margin:130px 0 0 -15%; text-align:center; color:#fff; transition: all 0.4s;}
.qMenu li .out_cirle .in_cirle01{background:#fff url(../images/q_ico01.png) 50% 50% no-repeat;}
.qMenu li .out_cirle .in_cirle02{background:#fff url(../images/q_ico02.png) 50% 50% no-repeat;}
.qMenu li .out_cirle .in_cirle03{background:#fff url(../images/q_ico03.png) 50% 50% no-repeat;}
.qMenu li .out_cirle .in_cirle04{background:#fff url(../images/q_ico04.png) 50% 50% no-repeat;}
.qMenu a:hover .out_cirle{background: rgba(255,255,255,1);}
.qMenu a:hover .out_cirle span strong{color:#9bd546;}

/*
.qMenu li:hover{background-size:150%;}
.qMenu li a{position:relative; display:inline-block; width:100%; height:100%; text-align:center;}
.qMenu li a span{position:absolute; left:50%; transform: translateX(-50%); top:15%; width:128px; height:128px; border-radius: 50%; -moz-border-radius:50%; -webkit-border-radius:50%;}
.qMenu li a:hover span{border-radius: 30%;}
.qMenu li a span:before{
    content: '';
    width:100%; height:100%;
    position:absolute;
    top:0; left:0;
    background:#fff; border-radius: 50%;
    -moz-border-radius:50%; -webkit-border-radius:50%;
    transition: all 0.5s;
}
.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_ico01.png) 50% 50% no-repeat;
}
.qMenu .qm02 a span:after{
    content: '';
    width:100%; height:100%;
    position:absolute;
    top:0; left:0;
    background:url(../images/q_ico02.png) 50% 50% no-repeat;
    transition: all 0.5s;
}
.qMenu .qm03 a span:after{
    content: '';
    width:100%; height:100%;
    position:absolute;
    top:0; left:0;
    background:url(../images/q_ico03.png) 50% 50% no-repeat;
}
.qMenu .qm04 a span:after{
    content: '';
    width:100%; height:100%;
    position:absolute;
    top:0; left:0;
    background:url(../images/q_ico04.png) 50% 50% no-repeat;
}
.qMenu li a:hover span:after{
    background-position: 50% 40%;
}
.qMenu li a strong{position:absolute; top:70%; left:0; width:100%; font-size:1.1rem; font-weight:normal; color:#fff;}
*/

/* dv02 */
.dv02{margin-top:60px; display:flex; justify-content: space-between; flex-wrap: wrap;}
.dv02 h3{font-size:32px;}
/* 조합소식 */
.notice{position:relative; width:46%;;}
.notice .noti_tit{margin:0 0 0 14px;}
.notice ul{margin:30px 0 0 0;}
.notice li{position:relative; width:96%; padding:0 0 0 14px; box-sizing: border-box; margin:20px 0;}
.notice li:before{
    content: '';
    width:5px; height:5px; background:#ccc;
    position:absolute; top:18px; left:0;
    border-radius: 50%;
    -moz-border-radius:50%; -webkit-border-radius:50%;
}
.notice li a{display:inline-block; width:100%;display: flex; justify-content: space-between;}
.notice li a .tit{width:73%; /*overflow:hidden;*/font-size:22px;}
.notice li a .date{width:25%; text-align:right;}
.notice .ico_new{padding:0 6px 1px; background:#29A7A7; color:#fff; border-radius: 5px; font-size:13px;}

/*gallery
.gallery{position:relative; width:45%;}
.gallery:before{content:''; position:absolute; top:0; left:-80px; width:1px; height:295px; background:#ddd;}
.gallery ul{margin:40px 0 0 0;}
.gallery ul li{ width:294px; height:165px;}
.gallery ul li span{display:inline-block; width:100%; vertical-align:top; font-size:20px; margin:10px 0 0 0;}
*/
.more{position:absolute; top:0; right:10px; display: flex; justify-content: space-between;}
.more a{display:inline-block; width:116px; height:40px; padding-top:5px; text-align:center; font-size:20px; font-family: 'NEXON Lv2 Gothic'; border:1px solid #ccc; background:#fff; transition: all .5s; color:#333;}
.more a:hover{ background:#333; color:#fff; border:1px solid #333;}
.more a:hover i{color:#fff;}
.more i{color:#ccc; font-size:36px; text-align:right;}
.more a strong{display:inline-block; vertical-align: top; font-weight:normal;}

/* 포토갤러리 */
.gall{position:relative; width:45%;}
.gall:before{content:''; position:absolute; top:0; left:-80px; width:1px; height:295px; background:#ddd;}
.gall ul{display:flex; justify-content: space-between; margin:30px 0 0 0;}
.gall ul li{width:48%;}
.gall ul li p{width:100%; overflow:hidden; margin-bottom:5px;}
.gall ul li p a{position:relative; display:block; width:100%; height:100%;}
.gall ul li p 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;
}
.gall ul li:hover a:after{opacity:1;}
.gall ul li a:hover img{transform: scale(1.2);}
.gall ul li img{width:100%; transition: .5s;}
.gall ul li:last-child{margin-right:0;}
.gall ul li span{display:block; margin:0;}
.gall ul li .tit{width:100%; vertical-align:top; font-size:22px;margin:0; padding:0;}
.gall ul li .date{font-size:18px; color:#777;margin-top:-10px; padding:0;}

/* mediaQuery */
@media (max-width:1260px){

}

@media (max-width:1023px) {
    .container{position:relative; margin:0 auto; width:96%;}
}

@media (max-width:960px){
    #contents{width:100%;}
    .slider{position:relative; width:100%; height:auto; border-radius:15px; overflow:hidden;}
    .slider img{width:100%;}
    .graph{position:relative; width:100%; border:1px solid #ddd; margin-top:20px;  border-radius:15px; background:#fff;}
    /*.mVisual{width:100%;}
    .mVisual img{width:100%;}*/
    .quick{display:flex; justify-content: space-between; flex-wrap: wrap; width:100%; height: auto; background:#194ca2; margin-top:43px; border-radius: 15px;}
    .quick .title{display:none;}
    .quick .m_title{display:inline-block; font-weight:bold; margin:10px auto; text-align:center;}
    .quick .m_title span{color:#fff; font-size:24px;}

@media (max-width:768px){
    .notice{width:100%;}
    .notice h3{margin-bottom:10px;}
    .gall{width:100%; margin-top:30px;}
    .gall .tit{text-overflow: ellipsis; white-space: nowrap;}
    /*.gallery ul li{margin-right:0;}
    .gallery h3{margin-bottom:10px;}
    .gallery ul li img{width:100%;}
    .community ul{margin-top:10px; width:100%;}
    .community div{display:none;}*/
}
}
@media (max-width:600px){
    /* 퀵메뉴 */
    .quick .qMenu{width:100%; margin-right:0;}
    .quick .qMenu ul{width:100%; display:flex; justify-content: space-around; flex-wrap: wrap;}
    .qMenu li{margin-top:5px; height:170px; width:48%; text-align:center;}
    .qMenu li .out_cirle{position:relative; display:inline-block; width:131px; height:131px; background: rgba(255,255,255,.1); border-radius: 50%;
        -moz-border-radius:50%; -webkit-border-radius:50%;
        transition: all 0.4s;}
    .qMenu li .out_cirle span{position:absolute; top:50%; left:50%; display:inline-block; width:100px; height:100px; transform: translate(-50%,-50%); border-radius: 50%;
        -moz-border-radius:50%; -webkit-border-radius:50%;}
    .qMenu li .out_cirle span strong{display:inline-block; width:131px; margin:115px 0 0 -18%; text-align:center; color:#fff; transition: all 0.4s;}
    .qMenu li .out_cirle .in_cirle01{background:#fff url(../images/q_ico01.png) 50% 50% no-repeat;}
    .qMenu li .out_cirle .in_cirle02{background:#fff url(../images/q_ico02.png) 50% 50% no-repeat;}
    .qMenu li .out_cirle .in_cirle03{background:#fff url(../images/q_ico03.png) 50% 50% no-repeat;}
    .qMenu li .out_cirle .in_cirle04{background:#fff url(../images/q_ico04.png) 50% 50% no-repeat;}
    .qMenu a:hover .out_cirle{background: rgba(255,255,255,1);}
    .qMenu a:hover .out_cirle span strong{color:#9bd546;}

}
@media (max-width:480px){
    .graph_area{width:93%; height:290px; margin:0 auto;}
    .graph .s_more{position:absolute; top:320px; right:20px;}
    .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;}
    .notice li .tit{width:73%; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;font-size:20px;}
    .notice li .date{width:25%; font-size:20px;}
    .gall ul li .tit{width:100%; vertical-align:top; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; font-size:20px;margin:0; padding:0;}
    .gall ul li .date{font-size:18px; color:#777;margin-top:-10px; padding:0;}
}
@media (max-width:320px){

}