@charset "utf-8";

/*header, menu*/
.mobi_mu{display:none;}

header > div{display:flex; justify-content: space-around;}
header > div:first-child{margin:0 auto; padding:15px 0 0 0;display: flex;}
header .visual img{width:100%;}
header h1{position:relative; z-index:15; width:30%; margin:15px 0 0 -30px;}
header h1 img{vertical-align: middle;}
header h1 span{vertical-align: middle; font-size:26px; font-weight:700;}
header #gnb{width:70%; margin-top:20px; margin-right:-50px;}
header #gnb nav{text-align:center; font-size:0; line-height:0;}
header #gnb nav > ul{position:relative;  z-index:100; display:flex; justify-content: right; height:89px; overflow:hidden;}
header #gnb nav > ul:hover{overflow:visible;}
header #gnb nav + div{position:absolute; top:0; left:0; z-index:99; width:100%; height:0; background: rgba(255,255,255,.95) 25% 50% no-repeat; transition: all .5s; opacity: 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
header #gnb nav:hover + div{height:350px; opacity: 1;}
header #gnb nav > ul > li{position:relative; width:40%; text-align:center;}
header #gnb nav > ul > li:nth-child(3){margin:0 3%;}
header #gnb nav > ul > li:nth-child(4){width:45%;}
header #gnb nav > ul > li > a{position:relative; display:block; width:100%; height:89px; line-height:89px; font-size:18px; color:#222; font-weight: bold;}
header #gnb nav > ul > li > a:after{
    content: '';
    width:0; height:3px;
    position:absolute;
    left:50%; bottom:0;
    background:#399B92;
    transition: all .5s;
}
header #gnb nav > ul > li:hover > a:after{width:100%; left:0;}
header #gnb nav > ul ul{position:absolute; width:100%; height:170px; text-align:center; padding:10px 0 0; opacity: 0; transition: all .5s;}
header #gnb nav > ul:hover ul{display:block; opacity: 1;}
header #gnb nav > ul ul li{line-height:39px;}
header #gnb nav > ul ul a{position:relative; font-size:0.75rem; letter-spacing: -1px; color:#444; display:inline-block; transition: all .5s;}
header #gnb nav > ul ul a:hover{color:#399B92;}
header #gnb nav > ul ul a:after{
    content: '';
    width:0; height:1px;
    position:absolute;
    left:50%; bottom:0;
    background:#399B92;
    transition: all .5s;
}
header #gnb nav > ul ul a:hover:after{width:100%; left:0;}

/*!* mobile menu *!
.mobiNav{display:none; position:absolute; right:0; top:20px; z-index:103; width:30px; height:50px; text-decoration: none;border:1px solid #f00;}
.mobiNav span{display:block; position:absolute; top:50%; width:100%; height:3px; background:rgba(180,180,180,1); color:transparent; transform: translate(0,-50%); transition: all .5s;}
.mobiNav span:before,
.mobiNav span:after{content:''; position:absolute; left:0; top:0; width:100%; height:3px; background: rgba(180,180,180,1); transition: all .5s;}
.mobiNav span:before{top:-8px;}
.mobiNav span:after{top:8px;}
.mobiNav.over span{background:rgba(180,180,180,0);}
.mobiNav.over span:before{top:0; transform: rotate(45deg);}
.mobiNav.over span:after{top:0; transform: rotate(-45deg);}*/

/* mobile menu */
.mobiNav{display:none; position:absolute; right:0; top:20px; width:30px; height:50px; text-decoration: none;}
.mobiNav span{display:block; position:absolute; z-index:103; top:50%; width:100%; height:3px; background:rgba(180,180,180,1); color:transparent; transform: translate(0,-50%); transition: all .5s;}
.mobiNav span:before,
.mobiNav span:after{content:''; position:absolute; left:0; top:0; width:100%; height:3px; background: rgba(180,180,180,1); transition: all .5s;}
.mobiNav span:before{top:-8px;}
.mobiNav span:after{top:8px;}
.mobiNav.over span{background:rgba(180,180,180,0);}
.mobiNav.over span:before{top:0; transform: rotate(45deg);}
.mobiNav.over span:after{top:0; transform: rotate(-45deg);}

.sbVisual{position:relative; height:250px;}
.sbVisual p{position:relative; width:760px; height:100%; margin:0 auto;}
.sbVisual p span{margin:85px 0 0 0; text-align:center; color:#444; font-size:0.85rem; font-family: paybooc-Light;}
.sbVisual p .tit{display:inline-block; font-size:1.6rem; font-weight:bold; color:#4BA094;}
.sbVisual p .exp{display:inline-block;margin-top:10px;}
/*.sbVisual p .tit:before{
    content:'';
    width:30px; height:1px;
    background:rgba(60,182,166, 1);
    position:absolute; top:70px; left:0;
}*/
.subVisual01{background:#ddd url(../images/sub01/subVisual.jpg) no-repeat; background-size:cover;}
.subVisual02{background:#ddd url(../images/sub02/subVisual.jpg) no-repeat; background-size:cover;}
.subVisual03{background:#ddd url(../images/sub03/subVisual.jpg) no-repeat; background-size:cover;}
.subVisual04{background:#ddd url(../images/sub04/subVisual.jpg) no-repeat; background-size:cover;}
.subVisual06{background:#ddd url(../images/sub05/subVisual.jpg) no-repeat; background-size:cover;}

/*서브메뉴*/
.snb{border-bottom:1px solid #ddd; height:60px;}
.snb .list{width:1300px; margin:0 auto; display:flex; justify-content: space-between;}
.snb .list li{position:relative; line-height:60px; text-align:center; width:100%; border-right:1px solid #ddd;}
.snb .list li:first-child{border-left:1px solid #ddd;}
.snb .list li:after{transition:all, .3s;
    content:'';
    position:absolute;
    bottom:0;
    left:0px;
    width:100%;
    height:1px;
    background:rgba(68,183,171,0);
}
.snb .list li:hover:after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:3px;
    background:rgba(68,183,171,1);
}
.snb .list li a{display:inline-block; width:100%; font-size:18px; font-family: paybooc-Medium;}
.snb .list li a:hover{color:#37A89A;}
.snb .smov:after{
    content: '';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:3px;
    color:#399B92;
    background:rgba(68,183,171,1);}
.snb .smov{color:#37A89A;}
/*.snb .list li:after{
    content:'';
    position:absolute;
    top:0;
    left:0px;
    width:1px;
    height:70px;
    background:#ddd;
}*/
/*footer*/
footer{position:relative; width:100%; border-top:1px solid #ddd; padding-top:30px; margin:50px 0;}
footer > div{width:100%; display: flex; flex-wrap: wrap;}
footer .add{margin:5px 0 0 30px;}
footer .add p:first-child{font-size:0.7rem; color:#777;}
footer .add p:last-child{ font-size:0.65rem; color:#777; margin-top:5px;}

/* mediaQuery */
@media screen and (min-width:1300px){
    header > div:first-child{width:1300px;}
    .container{width:100%;}
    .row{padding:0 15px;}
    footer > div{width:1180px; margin:0 auto;}
}

@media screen and (max-width:1299px){
    header h1{width:25%; margin-left:0;}
    header #gnb{width:75%; margin-right:0; margin-left:30px;}
    header > div:first-child{width:98%;}
    .container{width:100%;}
    .row{padding:0 15px;}
    footer > div{width:100%; margin-left:2%; box-sizing: border-box;}

    .sbVisual{position:relative; height:200px;}

    .snb{border-bottom:1px solid #ddd; height:60px;}
    .snb .list{width:100%; margin:0 auto; display:flex; justify-content: space-between;}
    .snb .list li{position:relative; line-height:60px; text-align:center; width:100%; border-right:1px solid #ddd;}
    .snb .list li:first-child{border-left:1px solid #ddd;}
    .snb .list li:after{transition:all, .3s;
        content:'';
        position:absolute;
        bottom:0;
        left:0px;
        width:100%;
        height:1px;
        background:rgba(68,183,171,0);
    }
    .snb .list li:hover:after{
        content:'';
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:3px;
        background:rgba(68,183,171,1);
    }
    .snb .list li a{display:inline-block; width:100%; font-size:18px; font-family: paybooc-Medium;}
    .snb .list li a:hover{color:#37A89A;}
    .snb .smov:after{
        content: '';
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:3px;
        color:#399B92;
        background:rgba(68,183,171,1);}
    .snb .smov{color:#37A89A;}
}

@media screen and (max-width:1024px){
    header{width:100%;}
    header > div{height:90px; display:none;}
    header h1{position:absolute; left:50%; transform: translateX(-50%); /*z-index:102;*/ width:100%; text-align:center; float:0; margin-top:15px;}
    header #gnb{display:none; position:absolute; right:-120%; top:0; z-index:100; width:calc(100% - 40px); height:100%; transition:all 0.5s; background:#fff; box-sizing: border-box;}
    .mobiNav{display:block;}
    header  #gnb.on{right:0;display:block;}
    .bk_cover{display:none; position:fixed; left:0; top:0; z-index:99; width:100%; height:100%; background: rgba(0,0,0,0.8); transition:all 0.5s;}
    #gnb nav:hover + div{display:none;}
    header #gnb nav{margin-top:150px; border-top:2px solid #333;}
    header #gnb nav > ul{position:relative;  z-index:100; display:inline-block; width:100%; height:100%; overflow:visible;}
    header #gnb nav > ul > li{display:block; width:100%; border-bottom:1px solid #ddd;}
    header #gnb nav > ul > li > a{position:relative; display:block; width:160px; height:69px; line-height:69px; font-size:18px; color:#444;}
    header #gnb nav > ul > li > a:after{display: none;}
    header #gnb nav > ul ul a{color:#222;}

    .mobi_mu{display:inline-block; position:absolute; z-index:999; top:12px; right:0;}
    .mobi_mu .mu_icon{display:block; padding:0 12px 6px 12px; font-size:24px;}
    #mobi_menu{position:absolute; top:0; right:0; z-index:1000; width:100%; height:100%; background:#fff;}
    #mobi_menu .mobi_mu .mu_close{display:inline-block; padding:12x 12px 7px 12px; margin-right:16px; cursor:pointer; font-size:24px;}
    #mobi_menu .area{display:inline-block; margin:107px 0 0 0; width:100%;}
    /*1차메뉴*/
    #mobi_menu .menuList{width:100%; border-top:3px solid #333; border-bottom:1px solid #ddd;}
    #mobi_menu .menuList>li{width:100%; border-bottom:1px solid #ddd; font-weight:bold; text-align:center;}
    #mobi_menu .menuList>li:last-child{border-bottom:0;}
    #mobi_menu .menuList .gmov{color:#0075BE;}
    #mobi_menu .menuList>li>a{width:90%; color:#333; display:inline-block; padding:15px 0 15px 10px; font-size:1.05em;}
    #mobi_menu .menuList>li>a:hover{color:#0075BE;}
    /*2차메뉴*/
    #mobi_menu .menuList>li>ul{width:100%; left:0; border-top:1px solid #ddd;}
    #mobi_menu .menuList>li a{color:#888;}
    #mobi_menu .menuList li ul li{border-bottom:1px solid #ddd; font-weight:normal; background-color:#f9f9f9;padding:10px 0;}
    #mobi_menu .menuList li ul li:last-child{border-bottom:0;}
    #mobi_menu .menuList li ul li a{color:#333; padding:0; font-size:1em;}
    #mobi_menu .menuList .sov{color:#333;}
    .bk_cover{display:none; position:fixed; left:0; top:0; z-index:90; width:100%; height:100%; background: rgba(0,0,0,0.7); transition:all 0.5s;}

    .sbVisual{position:relative; height:200px;}
    .sbVisual p{margin:0 auto; text-align:center;}
    .sbVisual p .tit:before{
        content:'';
        width:30px; height:1px;
        background:rgba(60,182,166, 1);
        position:absolute; top:70px; left:45%;
    }
    .subVisual01{background:url(../images/sub01/subVisual.jpg) 50% 0 no-repeat; background-size:cover;}
    .subVisual02{background:url(../images/sub02/subVisual.jpg) 50% 0 no-repeat; background-size:cover;}
    .subVisual03{background:url(../images/sub03/subVisual.jpg) 50% 0 no-repeat; background-size:cover;}
    .subVisual04{background:url(../images/sub04/subVisual.jpg) 50% 0 no-repeat; background-size:cover;}
    .subVisual06{background:url(../images/sub05/subVisual.jpg) 50% 0 no-repeat; background-size:cover;}
}
@media screen and (max-width:960px){

    .snb{display: none;}
}
@media screen and (max-width:768px){
    .sbVisual p{width:100%;}
}
@media screen and (max-width:640px){
    footer > div{margin:0;}
    footer .logo, footer .add{width:100%; text-align:center; margin:0 0 20px 0;}
    .sbVisual p .exp{display:inline-block;margin-top:10px; letter-spacing: -1px;}
}