@charset "UTF-8";






/*--------------------------------------------------------------------------------------------------------------------------*/

#wrap{  min-width: 1300px;max-width: 2000px;margin: 0 auto;}
#wrap.en{font-family: 'Arial', sans-serif;}
#wrap.en button,#wrap.en select,#wrap.en input{ font-family:'Arial'}
#header{position: absolute;top:0;left:0;right:0;min-width:1083px;}
#gnb .navi:before {
    content: "";
    position: absolute;
    top: 0;bottom:0;
    left: 80px;right:80px;
    z-index: 1000;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    background: rgba(0, 0, 0, 0.75);
    visibility: hidden;
}



body.stop{overflow: hidden;}
body.stop #gnb .navi:before {visibility:visible;opacity: 1;}
#misc_btns{position: relative;overflow: hidden; max-width: 1300px;margin: 0 auto;padding: 114px 0 12px;z-index: 999;opacity: 1;}
#misc_btns a{position: relative;display: inline-block;font-size: 11px;color: #fff;line-height: 12px;padding: 0 11px;}
#misc_btns a:before{content: '';position: absolute;top:0;bottom:0;left:0;width: 1px;background: #fff;opacity: 0.3}
#misc_btns a:first-child:before{content: none;}
#misc_btns .left_area{float: left;font-size: 0;letter-spacing: 0;word-spacing: 0;}
#misc_btns .left_area a{font-size: 11px;letter-spacing: 0;line-height: 12px;  font-weight: bold;}
#misc_btns .right_area{float: right;font-size: 0;letter-spacing: 0;word-spacing: 0;}
#gnb{position: relative;  top: 0; width:100%;margin: 0 auto;z-index: 999;height: 123px; }
#gnb .navi{min-width:1300px;position: absolute;left:0;right: 0;top:0;  width: 100%;height:123px;/* background-color: #ffffff;*/max-width: 1300px;margin: 0 auto;font-size: 0;letter-spacing: 0;word-spacing: 0;}
#gnb .navi:after{content:none;}
#gnb .navi .center{position:relative;max-width: 1060px; margin: 0 auto;display: inline-block;vertical-align: top;}
#gnb .navi .center> .center_inner>*{display: inline-block; vertical-align: top;}
#gnb .navi .btn_left{left:0;top:0;bottom:0;z-index: 1000; width: 103px;height:83px;font-size: 15px;position: absolute;top: 0;left: 0; }
body.active_right #gnb .navi .btn_left{z-index: 999;}
body.active_left #gnb .navi .btn_right{z-index: 999;}
#gnb .navi .btn_right{right:0;top:0;bottom:0;z-index: 1000;width: 103px;height:83px;font-size: 15px;position: absolute;top: 0;right: 0;}
#gnb .navi .btn_left{display: block;  background: #005bab url(../images/btn_business.png) no-repeat left center;}
#gnb .navi .btn_right{display: block; background: #005bab url(../images/btn_people.png) no-repeat right center;}
#gnb .navi .btn_left:hover{background-position:center center;}
#gnb .navi .btn_right:hover{background-position:center center;}
body.stop #gnb .navi .btn_left{background-position:right center;}
body.stop #gnb .navi .btn_right{background-position:left center;}


#wrap.main #gnb .navi > a.left:hover > div.rot_box:after{background-position:center center;}
#wrap.main #gnb .navi > a.right:hover > div.rot_box:after{background-position:center center;}
body.stop #wrap.main #gnb .navi > a.left > div.rot_box:after{background-position:right center;}
body.stop #wrap.main #gnb .navi > a.right > div.rot_box:after{background-position:left center;}

body.stop #misc_btns{opacity: 0;}


#wrap.main #gnb .navi > div.center .center_inner{  position: relative;visibility: hidden;opacity: 0;/*min-width: 1060px;*/  min-width: 1050px; padding-top:0px; overflow: hidden}
#wrap.main #gnb .navi .btn_left{background: none;position: absolute;top: 0;left: 0;}
#wrap.main #gnb .navi .btn_right{background: none;position: absolute;top: 0;right: 0;}

#wrap.main #gnb .navi > div.center > div.rot_box { transition-delay:0.1s; }
#wrap.main #gnb .navi > a.right > div.rot_box { transition-delay:0.2s; }

#wrap.main #gnb .navi > * > div.rot_box:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;

    transform: rotateX(0deg) translateZ(35px);
    backface-visibility: hidden;
}


/* animation */
#wrap.main #gnb .navi.step1{}
#wrap.main #gnb .navi.step1 > * > div.rot_box{transform: rotateX(-90deg);}

/* step */
#wrap.main #gnb .navi.step2 {width:1300px;transition:all 1s;-webkit-transition:all 1s;-moz-transition:all 1s;background: rgba(255,255,255,0.9);}
#wrap.main #gnb .navi.step2 > div.center {width:1060px;transition:all 1s;-webkit-transition:all 1s;-moz-transition:all 1s;}
#wrap.main #gnb.scroll .navi.step2 {width:100%;transition:all 1s;-webkit-transition:all 1s;-moz-transition:all 1s;}
#wrap.main #gnb .navi.step3 > div.center .center_inner{visibility: visible;opacity: 1; transition:all 0.5s 0.4s;-webkit-transition:all 0.5s 0.4s;-moz-transition:all 0.5s 0.4s; 



}

#wrap.main #gnb .navi.step3 {transition: all .4s;-webkit-transition: all .4s;-moz-transition: all .4s;}
#wrap.main #gnb.scroll .navi.step3 {transition: all .4s;-webkit-transition: all .4s;-moz-transition: all .4s;}
#wrap.main #gnb .navi.step3 .btn_left{background: #005bab url(../images/btn_business.png) no-repeat left center;}
#wrap.main #gnb .navi.step3 .btn_right{background: #005bab url(../images/btn_people.png) no-repeat right center;}
#wrap.main #gnb.scroll .navi.step3{background:#fff;max-width: 2000px;width:100%}












#gnb.scroll{position: fixed;max-width: none;}
#gnb.scroll .navi{max-width: 2000px;width:100%;top:0 !important;}
#gnb.scroll .navi:after{content: '';position: absolute;bottom:0;left:0;right:0;height: 1px;background: #eaeaea;}
#gnb.scroll .navi ul.depth1 > li .depth2{border-left: 1px solid #eaeaea;border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;}