#toparea { position:absolute; top:20px; height:120px; width:1200px; margin-left:auto; margin-right:auto; left:0; right:0; }
#top {  border-bottom:0px solid #343848;   position:relative;   }
#topBox { margin:0 auto; max-width:1150px !important;  position:relative;}
div.top_mask {width:100%; } 
aside.util {  position:relative; width:1200px; margin:0 auto; font-size:13px; display:block; z-index:15 ;
 border-bottom:0px solid #dfdfdf;  }
aside.util div.util_Area { color:#fff; right:0px; width:100%;   margin:0 auto;  text-align:right; padding:2px 0px 5px 0; box-sizing:border-box; }
aside.util div.util_Area a{  padding:0px 10px 0 10px; border-left:0px solid #888;  }
aside.util div.util_Area a:hover {color:#dfdfdf;}
aside.util div.util_Area a.first{ border-left:0px; }

#header div.logo { position:absolute;  top:15px ; padding:0px 10px;   box-sizing:border-box;   z-index:23 ; }
.button_container {display:none;}


/* Header */
header {  background-color: #fff;   width: 100%;  position: fixed; top:0;  z-index: 10;}
header a {  color: #222;  text-decoration: none;  text-transform: uppercase;}
header a.active,header a:hover {  color: #3d3d3d;}
header li { }

@media all and (min-width:1024px)  { 
.gnb {
    position: absolute;
    top: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    left: 0;
    width: 100%;
    z-index: 13;
    margin: 0px auto 0 auto;
}
.gnb a {
    display: block;
    height: 100%;
    width: 100%;
    color: #171717;
}
    .gnb .depth1>a {
        color: ##171717!important;
        font-weight: 600;
        font-size: 18px;
    }
.gnb .depth1 a:hover {color:#29166e !important; font-weight: 600;}
.gnb > ul{overflow:hidden; list-style-type:none; width:1200px; padding-left:220px; padding-right:150px; box-sizing:border-box; margin:0 auto;}
.gnb .menu{float:left; width:25%; text-align:center;}
.gnb .menu:first-child{margin:0}
.gnb .depth1 {
    padding: 0;
    font-size: 17px;
    letter-spacing: -0.3px;
    text-align: center;
    margin: 0 auto;
    padding: 0 10px;
    display: block;
    line-height: 90px;
    box-sizing: border-box;
}
.gnb .depth2 a {color:#171717;}
.gnb .depth2{height:0 ; font-size:16px; border-left:0px solid #353535;  }
.gnb .menu:first-child .depth2{border-left:0px solid #dfdfdf; }
.gnb .depth2 ul{ list-style-type:none; padding:0; margin:0;  color:#888;} /*depth2 height -> menu.js */
.gnb .depth2 ul.depth2_ul1 > li{margin-top:15px; padding:0 10px; }
.gnb .depth2 ul.depth2_ul1 > li:first-child{margin-top:10px;}
.gnb .depth2 ul li a { padding:3px 0; border-radius:5px 5px; display:block;  }
.gnb .depth2 ul li a:hover { color:#29166e;  -webkit-transition: 0.5s;  transition: 0.5s;font-weight: 600; }

.gnb .depth2 ul.depth2_ul2 {background-color:#f0f0f0; padding:10px 10px; border-radius: 5px 5px; margin-top:10px;}
.gnb .depth2 ul.depth2_ul2 > li {line-height: 25px;  font-size:12px;}

.gnb:hover {background:#fff; color:#171717; }
.gnb:hover a {color:#171717;}
.gnb .menu:hover {/*background-color:#3f4a7c; */ color:#171717 !important; }
.gnb .menu:hover  a{  color:#111}
.gnb .menu:hover .depth1 a{  border-bottom:2px solid #0077b7;  padding-bottom:7px; }
.gnb .menu:hover .depth1 a,.gnb .menu:hover .depth2 ul{color:#171717}
.gnb .menu:hover .depth2 ul li a {border-bottom:0;}
.gnb:hover .depth2 {    transition: all .3s;
}
    .depth2 li { position: relative;}
.depth2 li .depth3 {
    position: absolute;
    top: 3px;
    right: -150px;
    height: 0;
    display: none;
}

.depth2 li:hover .depth3 {
    display: block;
    height: 62px;
    background: #eee;    
    transition: all .3s;
}

.depth3 li {
    transition: all .3s;
}

.depth3 li:hover {
    background: #29166e;
}

.depth3 li:hover a {
    color: #fff !important;
}

.depth3 a {
    font-size: 15px;
    line-height: 1.2;
    padding: 6px 10px!important;
}
/* header large */
header.large .logo img {  width: auto;  height: 60px;  position: absolute;  top: 17px;   margin: auto;}
/* header small*/
header.small .logo img {  width: auto;  height: 43px;  position: absolute;  top: 3px;   margin: auto;}
header.small .util { margin:-30px auto 0 auto; width:1200px; }
header.small .gnb{top:0px ; border-bottom:1px solid #dfdfdf; }
header.small #toparea {top:0px; width:100%; }
header.small .gnb .depth1{font-size:16px; padding:0 10px; line-height:60px;}
header.small #header div.logo {   top:5px ; }
header.small .cd-nav-trigger {top:3px !important; transition: .5s all;}

/* Transitions */
header,nav,header a,header img,header li,.util, .gnb, util {  
	transition: .5s all;  -moz-transition: .5s all;  -webkit-transition: .5s all;  -o-transition: .5s all;}
}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1024px) {
#toparea {width:100%; top:0px; height:auto;  }
header.small #toparea {top:0px; width:100%; background-color:#fff; border-bottom:1px solid #dfdfdf; }
#wrap {max-width:100%; margin:0 auto; position:relative; padding:0; }
aside.util { display:none; }
#topBox { margin:0 auto; max-width:98% !important; }
#header div.logo {display:table-cell; vertical-align:middle; position:relative; left:0; top:0; height:70px; padding:0 0 0 5px;   box-sizing:border-box;   z-index:23 ; }
#header div.logo img {vertical-align: top;}
.gnb{ display:none; }
.overlay div.contact {display:none; }
div.button_container div.txt{display:none;}
.button_container { display:block;  position: absolute;  }
.button_container {    top: 20px;  right: 20px; }
    .cd-nav-trigger {
        top:10px!important;
    }
    .txt-wrapper {
        width:70%!important;
        margin: auto;
    }
    .sec-goto {
        position: static!important;
    }
    .goto-wrapper {
        width: 100%!important;
    }
    .info-wrapper {
        width: 98%;
        padding-top: 40px!important;
    }
    #header div.logo img {
        max-height: 90%;
    }
}
@media (max-width: 812px) {
    .cd-nav-trigger{
        display: none;
    }
    #header div.logo img {
        max-height: 70%;
    }
}
@media (max-width: 640px) {
    .txt-wrapper {
        width: 100%!important;
    }
    .info-wrapper {
        width: 100%;
    }
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}