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


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

/* 메인비주얼 */
.m_top{position:relative; height:440px;border:0px solid #f00;}
.m_top .mVarea{position:relative; height:100%; width:1300px; margin:0 auto;}
/*.m_top .mVarea img{position:absolute; top:80px; left:-50px;}*/
.m_top figure{position: relative; overflow: hidden; height:100%; display:flex; justify-content: flex-end;}
.copy{position:absolute; z-index: 10; top:50px; width:355px;}
.slider{}
.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:-43px;display: block; width:100%; text-align:right;}
.slider .slick-dots li{display: inline-block; width:23px; height:23px; margin:2px;}
.slider .slick-dots li button{font-size:13px; font-weight:bold; color:#444; width:23px; height:23px; cursor: pointer; background:#d7d7cd; border-radius: 50%;}
.slider .slick-dots li.slick-active button{background:#4eab9f; color:#fff;}
.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;
}*/

/* 팝업존 */
.m_top .mVarea .popZone{position:absolute; z-index:11; bottom:0; right:0; width:400px; height:368px; background:#fff;}
.popZone h3{font-size:20px; font-weight:bold; margin-left:20px; color:#444;}
.popZone > div{position:relative; margin:-10px auto; width:360px; height:294px;}
.popZone .pop{width:360px; height:294px; }
.popZone .pop img{padding-bottom:30px; width:100%;}

.dv01{background:url(../images/bg01.jpg) center top repeat-y; display:block; min-height: 365px;}
.dv02{background:url(../images/bg02.jpg) center top repeat-y; display:block; min-height: 365px;}
.dv01, .dv02{border:0px solid #000}
.dv01 > div, .dv02 > div{display:flex; flex-wrap: wrap;}

.myself{width:53%; margin-top:25px; flex-wrap: wrap;}
.myself h3{position:relative; padding-top:30px; font-family: paybooc-ExtraBold; font-size: 28px;}
.myself h3:before{
    content:'내 속의 나 알기';
    color:#f5622e;
    position:absolute;
    top:0; left:0;
    border-bottom:1px solid #f5622e;
    font-size:20px;
    font-family:NEXON Lv2 Gothic Bold;
}
.myself ul{display:flex; justify-content: space-between; flex-wrap: wrap;}
.myself ul li{width:162px; height:162px; border-radius: 50%; transition: .4s;}
.myself ul li:hover{width:162px; height:162px; border-radius: 50%; transform: scaleX(-1);}
.myself ul li a{display:inline-block; width:100%; height:100%;}
.myself ul li a:hover{display:inline-block; width:100%; height:100%; transform: scaleX(-1); transition: .4s;}
.myself ul li:nth-child(1){background:#46B7C9 url(../images/m_q01.png) 50% 35px no-repeat;}
.myself ul li:nth-child(2){background:#449BC8 url(../images/m_q02.png) 50% 35px no-repeat;}
.myself ul li:nth-child(3){background:#46B7C9 url(../images/m_q03.png) 50% 38px no-repeat;}
.myself ul li:nth-child(4){background:#449BC8 url(../images/m_q04.png) 50% 35px no-repeat;}
.myself ul li:nth-child(1):hover{background:#F78159 url(../images/m_q01.png) 50% 25px no-repeat;}
.myself ul li:nth-child(2):hover{background:#F78159 url(../images/m_q02.png) 50% 25px no-repeat;}
.myself ul li:nth-child(3):hover{background:#F78159 url(../images/m_q03.png) 50% 28px no-repeat;}
.myself ul li:nth-child(4):hover{background:#F78159 url(../images/m_q04.png) 50% 25px no-repeat;}
.myself ul li span{display: block; margin-top:80px; color:#fff;}
.myself ul li strong{display: block; text-align:center;}
.myself ul li strong:first-child{font-size:20px;}
.myself ul li strong:last-child{font-size:18px; margin-top:10px;}

/********************* modal *********************/

.page-wrapper {
    width: 100%;
    height: 100%;
    background: url(https://goo.gl/OeVhun) center no-repeat;
    background-size: cover;
}

.blur-it {
    filter: blur(4px);
}


.modal-wrapper1,
.modal-wrapper2,
.modal-wrapper3,
.modal-wrapper4{
    position: relative;
    z-index: 20;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    visibility: hidden;
    opacity: 0;
    transition: all 0.25s ease-in-out;
    text-align:left;
}

.modal-wrapper1.open,
.modal-wrapper2.open,
.modal-wrapper3.open,
.modal-wrapper4.open{
    opacity: 1;
    visibility: visible;
}

.modal {
    width: 600px;
    height: 300px;
    display: none;
    border-radius: 30px;
    box-sizing: border-box;
    padding-top:30px;
    position: relative;
    top: 70%;
    left: 10%;
    /*transform: translateX(-50%);*/
    background: #fff;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    font-family:InfinitySans-RegularA1;
}

.modal-wrapper1.open .modal,
.modal-wrapper2.open .modal,
.modal-wrapper3.open .modal,
.modal-wrapper4.open .modal{
    display: block;
    margin-top: -200px;
    opacity: 1;
}

.modal_head {
    width: 90%;
    padding: 12px 30px;
    overflow: hidden;
    font-family:InfinitySans-BoldA1;
    letter-spacing: -1px;
}

.modal_head .tit span:first-child{
    font-size:32px;
    color:#36ABBC;
}
.modal_head .tit span:last-child{
    font-size:24px;
    color:#444;
}
.modal_head .tit{padding:0 0 50px 80px;border-bottom:1px dashed #ddd;}
.modal_head .tit span{display:inline-block; margin:0 5px;}
.modal-wrapper1 .modal_head .tit{background:url(../images/w_icon01.png) no-repeat;}
.modal-wrapper2 .modal_head .tit{background:url(../images/w_icon02.png) no-repeat;}
.modal-wrapper3 .modal_head .tit{background:url(../images/w_icon03.png) no-repeat;}
.modal-wrapper4 .modal_head .tit{background:url(../images/w_icon04.png) no-repeat;}

.btn-close{
    font-size: 62px;
    display: block;
    float: right;
    color: #5DBEAB;

}
.modal_head{}
.modal_head a{position:absolute; top:25px; right:35px; color:#37ACBD;}
.modal_head a:hover{color:#449BC8;}

.modal_con {
    padding: 30px;
    color:#666;
    line-height: 32px;
}

.modal_con .mb30{margin-bottom:30px;}
.modal_con div p{word-break:break-all; font-size:20px;}

/* 공지사항 */
.notice{position:relative; width:40%; margin:30px 0 0 5%; display:inline-block; padding-top:10px;  font-size:14px;}
.notice .noti_tit{margin:6px 0 0 14px;border:1px solid #0ff;}
.notice ul{margin:8px 0 0 0;}
.notice li{position:relative; width:96%; padding:15px 0 15px 14px; 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 a{display:inline-block; display: flex;width:100%;}
.notice li a span{display:inline-block; justify-content: space-between;}
.notice li .tit{width:70%; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}
.notice li .date{width:30%; 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;}
.ico_new{padding:0 6px 0 4px; font-size:13px; border-radius: 4px; background:#2F9D8F; color:#fff; }

/* 포토갤러리 */
.gall{position:relative; width:53%; margin-top:25px;}
.gall ul{display:flex; justify-content: space-between; margin-top:-10px; padding:0;}
.gall ul li{width:48%;}
.gall ul li p{width:100%; overflow:hidden; margin-bottom:20px;}
.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:18px;}
.gall ul li .date{font-size:14px; color:#777; margin-top:10px;}


/* 퀵메뉴 */
.qMenu{width:40%; margin:0 0 0 5%; vertical-align: middle; padding-top:20px;}
.qMenu div{display: flex; width:100%; height:146px; margin:10px 0; transition: .5s;}
.qMenu div a{position:relative; display:inline-block; width:100%; height:100%; padding:20px 0 0 40px; box-sizing: border-box;}
.qMenu div:first-child{background:#46B7C9;}
.qMenu div:first-child:hover{background:#3CB6A6;}
.qMenu div:first-child > a span:first-child{background:#fff url(../images/q01.png) 50% 50% no-repeat;}
.qMenu div:last-child{background:#449BC8;}
.qMenu div:last-child:hover{background:#279F8F;}
.qMenu div:last-child > a span:first-child{background:#fff url(../images/q02.png) 50% 50% no-repeat;}
.qMenu div > a span:first-child{position:relative; display:inline-block; width:109px; height:109px; border-radius: 50%; transition: .5s;}
.qMenu div > a:hover span:first-child{position:relative; display:inline-block; width:109px; height:109px; border-radius: 20%; transform: rotateZ(360deg);}
.qMenu div > a span:last-child:before{
    content:'';
    position: absolute;
    top:0; left:-40px;
    width:1px; height:55px;
    background:rgba(255,255,255,.5);
}
.qMenu div a span:last-child{position:absolute; top:50%; transform: translateY(-50%); display:inline-block; margin:0 0 0 80px; color:#fff;}
.qMenu div a span strong{font-size:26px; font-weight:bold;}
.qMenu div a span em{display: block; color:#fff; margin-top:6px;}

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

/* mediaQuery */
@media (min-width:1300px){

    #contents{width:1280px; margin:0 auto;}
    .copy_mobi{display:none;}
    .modal {
        top: 70%;
        left: 20%;
    }
}
@media (max-width:1299px){
    .mwrap{background:url(/images/mVisual_bg.jpg) 30% 0 no-repeat;}
    .m_top .mVarea{position:relative; height:100%; width:100%; margin:0 auto; padding:0 2%; box-sizing: border-box;}
    .copy_mobi{display:none;}
    #contents{width:100%; margin:0 auto;border:0px solid #ff0;}
    .dv01 > div{width:96%;}
    .dv02 > div{width:96%;}
    .myself{width:55%;border:0px solid #ff0; background:#F3F5F4;}
    .myself ul{display:flex; justify-content: space-around;}
    .myself ul li{width:140px; height:140px; border-radius: 50%; transition: .3s;}
    .myself ul li span{display: block; margin-top:70px; color:#fff;}
    .myself ul li strong:first-child{font-size:16px;}
    .myself ul li strong:last-child{font-size:15px; margin-top:5px;}
    .myself ul li:nth-child(1){background:#46B7C9 url(../images/m_q01.png) 50% 25px no-repeat;}
    .myself ul li:nth-child(2){background:#449BC8 url(../images/m_q02.png) 50% 25px no-repeat;}
    .myself ul li:nth-child(3){background:#46B7C9 url(../images/m_q03.png) 50% 28px no-repeat;}
    .myself ul li:nth-child(4){background:#449BC8 url(../images/m_q04.png) 50% 25px no-repeat;}
    .myself ul li:nth-child(1):hover{background:#35A7B7 url(../images/m_q01.png) 50% 20px no-repeat;}
    .myself ul li:nth-child(2):hover{background:#3484AF url(../images/m_q02.png) 50% 20px no-repeat;}
    .myself ul li:nth-child(3):hover{background:#35A7B7 url(../images/m_q03.png) 50% 20px no-repeat;}
    .myself ul li:nth-child(4):hover{background:#3484AF url(../images/m_q04.png) 50% 20px no-repeat;}
    .notice{width:40%;margin:30px 0 0 3%;}
    .notice h3{margin-bottom:10px;}
    .qmenu{width:40%;border:0px solid #f00; margin:0 0 0 3%;}
}

@media (max-width:1152px){
    .myself ul li{width:130px; height:130px; border-radius: 50%; transition: .3s;}
}

@media (max-width:1024px) {
    .mwrap{background:url(/images/mVisual_bg.jpg) 20% 0 no-repeat; transition: .3s;}
    .inner {
        width: 100%;
        margin: 0 auto;
        position:relative;
    }
    .myself ul li{width:110px; height:110px; border-radius: 50%; transition: .3s;}
    /* .myself ul li strong:first-child{font-size:16px;}
    .myself ul li strong:last-child{font-size:15px; margin-top:10px;} */
    .notice{margin:30px 0 0 5%;}
}

@media (max-width:960px){
    #contents{width:100%;}
    .mVisual{width:100%;}
    .mVisual img{width:100%;}
    .dv01{background:none;/*url(../images/bg01.jpg) center top repeat-y; display:block; min-height: auto*/;}
    .dv02{background:none;}
    .dv01 > div{width:100%;}
    .myself{width:100%;border:0px solid #ff0; background:#F3F5F4; padding:0 2%; margin-top:7px;}
    .myself ul{justify-content: space-around;}
    .myself ul li{width:150px; height:150px; border-radius: 50%; transition: .3s; margin-bottom:15px;}
    .notice{width:92%; margin:30px auto; padding:0 2%;}
    .notice h3{margin-bottom:10px;}
    .gall{width:100%; margin-top:0;}
    .gall ul li img{width:100%;}
    .qMenu{width:100%; margin:30px 0 0 0;}
    .qMenu li{height:26vh;}
}

@media (max-width:640px){
    .modal {
        width: 85%;
        margin:0 auto;
        left:0;
    }
}

@media (max-width:480px){
    .m_top .mVarea .popZone{position:absolute; z-index:11; bottom:0; left:50%; transform: translateX(-50%); width:360px; height:342px;}
    .copy{display:none;}
    .copy_mobi{display:block; text-align:center; padding-top:30px;}
    .popZone h3{font-size:18px; margin-left:20px; color:#444;}
    .popZone > div{position:relative; margin:-10px auto; width:89%; height:254px; }
    .popZone .pop{width:360px;}
    .popZone .pop img{padding-bottom:30px;width:100%;}
    .modal_head .tit span:first-child{
        width:100%;
    }
    .modal_head .tit span:last-child{
        width:100%;
    }
    .modal_con div p{font-size:16px;}
    .qMenu div a span strong{font-size:20px; font-weight:bold;}
    /*.myself h3, .notice h3, .gall h3{font-size:24px;}*/
}
/*
@media (max-width:600px){

}
@media (max-width:480px){
    .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){

}*/