@charset "utf-8";

#top .inner{
    width: 1750px;
}

@media screen and (max-width: 1750px) {
    #top .inner{
        width: 100%;
    }
}

.btn_menu, #search, #footer .logo, #footer .link, #topmenu .menu > ul > li > a:after{display:none;}
#topmenu{padding:0 0 0 45%;}
#topmenu > li{width:26%;}
#topmenu > li:nth-child(2){width:28%;}
#topmenu > li:nth-child(3){width:20%;}
#topmenu > li > a{line-height:84px;}
#topmenu .menu{top:84px; min-height:300px; padding:37px 0 61px 35%;}
#topmenu .menu:before{width:727px; margin:0 231px 0 0;}
#topmenu .menu .tit{left:0;}

#menuArea:after{top:83px;}

#header{height:84px;}

.logo{top:20px;}
.logo span > span{padding:4px 0 1px; letter-spacing:-1px; font-family:'NanumSquare'; font-weight:800; font-size:15px;  color:#000;}
.logo strong{padding:4px 0 0; font-size:22px;}
.logo strong span{padding:0 0 0 2px; font-size:0.875em;}

#footer .info .inner{padding:49px 0 71px;}

#subVisual{position:relative; background-image:url(/images/data/sub/subvisual_cast.jpg); }
#subVisual h3{padding:117px 0 166px; color:#fff;}
#subVisual h3:after{background-image:url(/images/data/sub/img_leaf.png);}

#submenu{position:absolute; bottom:0; left:0; float:none; width:100%;}
#submenu:before{content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:#30328f;}
#submenu .depth2{display:table; table-layout:fixed; width:1200px; margin:0 auto;}
#submenu .depth2 li{position:relative; display:table-cell; height:60px;}
#submenu .depth2 > li:not(.none):before,
#submenu .depth2 > li + li:not(.none):after{z-index:1; opacity:0; content:''; position:absolute; bottom:0; left:-12px; width:calc(100% + 24px); height:100%; background:#21236c;}
#submenu .depth2 > li.current_on:before{opacity:1;}
#submenu .depth2 > li:first-child:before{left:0; width:calc(100% + 12px);}
#submenu .depth2 > li:last-child:before{left:auto; right:0; width:calc(100% + 12px);}

#submenu .depth2 > li + li:after{z-index:0; opacity:1; width:1px; height:16px; bottom:auto; top:50%; transform:translateY(-50%); left:0; background:rgba(255,255,255,0.5);}
#submenu .depth2 > li.current_on + li:after{display:none;}

#submenu .depth2 > li > a{position:absolute; bottom:0; left:0; width:100%; line-height:60px; padding:0; margin:0; border:none; border-radius:0; color:#fff; text-align:center; background:none; box-shadow:none; background:#30328f; transition:background 0.3s;}

#submenu .depth2 > li:hover > a,
#submenu .depth2 > li > a:hover,
#submenu .depth2 > li > a:focus,
#submenu .depth2 > li > a:active,
#submenu .depth2 > li.current_on > a{z-index:2; height:74px; line-height:74px; border:3px solid #30328f; border-bottom:none; font-size:21px; font-weight:900; color:#1c0872; background:#fff;}

#subContent{margin:0 auto;}
#subContent:before{display:none;}
#subContent #content{float:none; width:100%; padding:62px 0 0;}

@media all and (max-width:1750px) {
    #topmenu .menu:before{left:auto; right:50%;}
    .logo{left:0;}

    #top .inner{
        width: 100%;
    }
}

@media all and (max-width:1230px) {
    #topmenu .menu .tit{left:15px;}
    .logo{left:15px;}
    #footer .info{text-align:center;}
}
@media all and (max-width:1200px) {
    #submenu .depth2{width:100%;}
}
@media all and (max-width:1024px) {
    .logo span > span{font-size:13px; font-weight:400;}
    .btn_menu{display:block;}
    
    #subVisual h3{padding:50px 0 110px;}
    
    #submenu .depth2 > li{height:48px;}
    #submenu .depth2 > li > a{height:48px; line-height:48px; font-size:0.938em;}
    #submenu .depth2 > li:hover > a,
    #submenu .depth2 > li > a:hover,
    #submenu .depth2 > li > a:focus,
    #submenu .depth2 > li > a:active,
    #submenu .depth2 > li.current_on > a{height:58px; line-height:58px; font-size:1.063em;}
    
    #subContent #content{padding:0;}
}
@media all and (max-width:768px) {
    .logo{left:10px;}
    .logo span > span{padding:0;}
    .logo strong{font-size:18px;}
    #footer .info .inner{padding:45px 0;}
    
    #subVisual h3{padding:35px 0 80px;}
    #submenu .depth2 > li{height:40px;}
    #submenu .depth2 > li > a{height:40px; line-height:40px;}
    #submenu .depth2 > li:hover > a,
    #submenu .depth2 > li > a:hover,
    #submenu .depth2 > li > a:focus,
    #submenu .depth2 > li > a:active,
    #submenu .depth2 > li.current_on > a{height:50px; line-height:50px;}
}
@media all and (max-width:568px) {
    #subVisual h3{padding:25px 0 65px;}
    #submenu .depth2 > li{height:35px;}
    #submenu .depth2 > li:before{display:none;}
    #submenu .depth2 > li + li:after{height:10px;}
    #submenu .depth2 > li > a{height:35px; line-height:35px; font-weight:400;}
    #submenu .depth2 > li:hover > a,
    #submenu .depth2 > li > a:hover,
    #submenu .depth2 > li > a:focus,
    #submenu .depth2 > li > a:active,
    #submenu .depth2 > li.current_on > a{height:45px; line-height:45px; font-size:0.938em; font-weight:800;}
}