@charset "utf-8";

/*header, menu*/
.mobi_mu{visibility:hidden;}
#mobi_menu{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:100; width:40%; margin-top:15px;}
header h1 img{vertical-align: middle;}
header h1 span{vertical-align: middle; font-size:26px; font-weight:700;}
header #gnb{width:60%;}
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:400px; opacity: 1;}
header #gnb nav > ul > li{position:relative;font-weight:700; width:30%; }
header #gnb nav > ul > li:first-child{margin:0 5%;}
header #gnb nav > ul > li > a{position:relative; display:block; width:100%; height:89px; line-height:89px; font-size:1.1rem; color:#222;}
header #gnb nav > ul > li > a:after{
    content: '';
    width:0; height:3px;
    position:absolute;
    left:50%; bottom:0;
    background:#2AA15F;
    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.8rem; color:#444; display:inline-block; transition: all .5s;}
header #gnb nav > ul ul a:hover{color:#2AA15F;}
header #gnb nav > ul ul a:after{
    content: '';
    width:0; height:1px;
    position:absolute;
    left:50%; bottom:0;
    background:#2AA15F;
    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;}
.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);}

.mobi_mu{display:inline-block; position:absolute; z-index:999; top:35px; right:0;}
.mobi_mu .mu_icon{display:block; padding:7px 15px 6px 12px;}
#mobi_menu{position:absolute; top:0; left:0; z-index:2009; width:50%; height:100%; background:#fff;}
#mobi_menu .mobi_mu .mu_close{display:inline-block; padding:9px 12px 7px 12px;}
#mobi_menu .area{display:inline-block; margin:50px 0 0 0; width:100%;}
/*1차메뉴*/
#mobi_menu .menuList{width:100%; border-top:1px solid #ddd;}
#mobi_menu .menuList>li{width:97%; border-bottom:1px solid #ddd; font-weight:bold;}
#mobi_menu .menuList .gmov{color:#333;}
#mobi_menu .menuList>li a{width:90%; color:#333; display:inline-block; padding:15px 0 15px 10px; font-size:1.05em;}
/*2차메뉴*/
#mobi_menu .menuList>li>ul{display:none; 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:#f3f3f3;}
#mobi_menu .menuList li ul li a{color:#333; padding:0; font-size:1em;}
#mobi_menu .menuList .sov{color:#333;}

.sbVisual{position:relative;clear:left; height:300px;}
.sbVisual p{position:relative; width:1200px; height:100%; margin:0 auto; width:100%; text-align:center;}
.sbVisual p span{margin:85px 0 0 0; text-align:center; color:#fff; font-weight:100; font-size:1rem;}
.sbVisual p .tit{display:inline-block; font-size:1.6rem; font-weight:700;}
.sbVisual p .tit:before{
    content:'';
    width:30px; height:1px;
    background:rgba(255,255,255, 1);
    position:absolute; top:70px; left:49%;
}
.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;}

/*서브메뉴*/
.snb{/*border-bottom:1px solid #ddd; */height:70px;}
.snb .list{width:1200px; margin:0 auto; display:flex; justify-content: space-between;}
.snb .list li{position:relative; line-height:70px; text-align:center; width:100%; border:1px solid #ddd; margin:0 2px;}
.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(98,140,96,0);
}
.snb .list li:hover:after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:4px;
    background:rgba(98,140,96,1);
}
.snb .list li a{display:inline-block; width:100%;}
.snb .smov:after{
    content: '';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:4px;
    color:#2AA15F;
    background:rgba(98,140,96,1);}
.snb .smov{color:#2AA15F;}
/*.snb .list li:after{
    content:'';
    position:absolute;
    top:0;
    left:0px;
    width:1px;
    height:70px;
    background:#ddd;
}*/
/*footer*/
footer{position:relative; clear:left; width:100%; border-top:1px solid #ddd; padding-top:30px; margin:50px 0;}
footer > div{width:100%; display: flex; justify-content: space-between;}
footer > div > div{display: flex;}
footer > div > div div:nth-child(1){vertical-align: middle;}
footer > div > div div:nth-child(2){margin-left:20px; margin-top:-10px;}
footer > div .add span{font-size:0.75rem; color:#777;}
footer > div .add p{ font-size:0.7rem; color:#777}
footer > div > div:last-child{margin-top:-15px;}

/* mediaQuery */
@media screen and (min-width:1280px){
    header > div:first-child{width:1200px;}
    .sbVisual p{position:relative; width:1260px;}
    .snb .list{width:1200px;}
    footer > div{width:1180px; margin:0 auto;}
}

@media screen and (max-width:1279px){
    .wrap>section, header{padding:0 20px; box-sizing:border-box;}
    footer{padding:30px 0 0 20px; box-sizing:border-box;}
    .sbVisual p{position:relative; width:100%;}
    header > div:first-child{width:100%;}
    mobi_mu{display:none;}

    .subVisual01{background:#ddd url(../images/sub01/subVisual.jpg) center top no-repeat; background-size:cover;}
    .subVisual02{background:#ddd url(../images/sub02/subVisual.jpg) center top no-repeat; background-size:cover;}
    .subVisual03{background:#ddd url(../images/sub03/subVisual.jpg) center top no-repeat; background-size:cover;}
    .subVisual04{background:#ddd url(../images/sub04/subVisual.jpg) center top no-repeat; background-size:cover;}

    footer > div{width:100%;}
}


@media screen and (max-width:1024px){
    header{width:100%;}
    header > div{height:93px;}
    header h1{position:absolute; left:50%; transform: translateX(-50%); z-index:1001; width:60%; text-align:center; float:0; margin-top:15px;}
    header #gnb{display:none;}
    .mobi_mu{visibility:visible; position:absolute; z-index:999; top:12px; right:0;}
    .mobi_mu .mu_icon{display:block; padding:17px 12px 6px 12px;}
    #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:32px 12px 7px 12px; margin-right:16px; cursor:pointer;}
    #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;}


    footer > div{width:100%;}
}
@media screen and (max-width:960px){
    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;}

    .snb{display:none;}
    .snb .list{width:100%;}
}
@media screen and (max-width:640px){
    .sbVisual{position:relative; height:180px;border:1px solid #fff;}
    .sbVisual p{position:relative; margin:0 auto;}
    .sbVisual p span{margin:40px 0 0 20px; color:#fff; font-weight:100; font-size:0.85rem;}
    .sbVisual p .tit{font-size:1.6rem;}
    .sbVisual p .tit:before{
        content:'';
        width:30px; height:1px;
        background:rgba(255,255,255, 0);
        position:absolute; top:80px; left:100px;
    }

}
@media screen and (max-width:480px){


}
@media screen and (max-width:320px){

}