@charset "utf-8";

/*해더*/
#header{
    background:transparent;
    position:relative;
    position: absolute;
    z-index:9;
    width:100vw;
    height:90px;
    _border-bottom:1px solid #666666;
	font-weight: 300;
    line-height: 90px;
}

.gnb{width:800px;position:absolute;left:55%;transform:translate(-50%);}
.menu_warp li{float:left;margin:0 28px;font-size:20px;}
.menu_warp li:first-child{margin-left:0;}
.menu_warp li:last-child{margin-right:0;}

.logo{float:left;}


#header .menu_warp li a{
     color:#373737;
    _line-height:162px;
}
#header .menu_warp .menu ul a{color:#373737;transition:0.1s;}
#header .menu_warp .menu ul a:hover{color:#f06e7e;transition:0.1s;}

#header .menu_warp ul{
    position: absolute;
    margin:0;
    padding:0;
    z-index:999;
    _background:#17416E;
    background:#ffffff;
    height: auto;
	border-radius:10px;
}


#nav_main{}
#nav_main,
#menu_warp ul {
    list-style:none;
}
#nav_main {
    width:100%;
}

#nav_main li a {
    display: block;
    text-decoration: none;
    color:#A9A9A9;
}


.menu_warp ul {
    position: absolute;
    margin:0;
    padding:0;
    display:none;
    z-index: 999;
    width: 150px;
}
#nav_main ul .menu a:hover{color:#005998;}
.menu_warp ul{_left:-15px;top:75px;z-index:2;box-shadow: 4px 6px 28px -6px rgba(0,0,0,0.3);}
.menu_warp ul li{padding:0 8px;width:100%;line-height:35px;text-align:center;font-weight:normal;font-size:14px;}
.menu_warp ul li a{color:#ffffff;}
.menu_warp ul li a:hover a{color:#373737;}
.menu_warp ul li:nth-child(1n){background:url(../images/nav_sub_bg1.png)no-repeat;}
.menu_warp ul li:nth-child(2n){background:url(../images/nav_sub_bg2.png)no-repeat;}
.menu_warp .menu_b ul li{left:20px; width:112px;line-height:45px;}
.menu_warp .menu_b ul li:nth-child(1n){background:url(../images/nav_sub_bg1_b.png)no-repeat;}
.menu_warp .menu_b ul li:nth-child(2n){background:url(../images/nav_sub_bg2_b.png)no-repeat;}
.menu_warp .menu_b ul li a:hover a{font-weight:bold;}
.menu_warp .menu ul li{margin:0;}
.menu_warp .list_1{left:-15px;}
.menu_warp .menu2{position:relative;}
.menu_warp .list_2{position:absolute;left:-40px;}
.menu_warp .list_3{position:absolute;right:-5px;}
.menu_warp .list_4{position:absolute;right:260px;}



#menuToggle
{z-index: 9999999;
  display: block;
  position: absolute;
  top: 67px;
  right: 177px;
  float:right;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #717171;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: #FB9098;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  background: none;
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 999; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 24px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  
  background: #5b5b5b;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #5b5b5b;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position:absolute;
  top:0;
  right:0;
  padding-top:135px;
  width:480px;
  max-width:90vw;
  height:calc(100vh + 40px);
  transform:translate(40px, -40px);
  display:none;
  background:#fff;
  /*
  height: 3000px;
    top: 0px;
    right: -192px;
  position: absolute;
  width: 480px;
  margin: -100px 0 0 -50px;
  _padding: 50px;
  padding-top: 215px;
  _padding-left:64px;
  
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  
  transform-origin: 0% 0%;
  transform: translate(50%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    background:#ffffff;
    font-weight:300;
    display:none;
  */
}

#menu>li
{
  font-size: 22px;
  cursor:pointer;   
}

#menu>li:hover{background:url(../images/nav_on.png)no-repeat left;
}



/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  display:block;
  /*transform: translateX(-170px);*/
}

#menuToggle .menu_in li{padding:0px;margin-bottom:10px; }
#menuToggle .menu_in li a{display: block;padding-left: 16px;font-size: 16px;opacity: 0.8}
.mo_logo{width:30px;height:30px; background:url(../images/logo_mo2.png)no-repeat !important;background-size:cover !important;}
.mo-gnb{position: absolute; width: 100%;top: 70px;border-top: 1px solid rgba(255, 255, 255, 0.1);}
#menu .d1{}
#menu .d1 .m{display: block;padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1);font-size: 18px;padding-left:35px;height:50px; line-height:50px; background:#ffffff;border-bottom:1px solid #e6e6e6;}
#menu .d1 .m2{display: block;border-bottom: 1px solid rgba(255, 255, 255, 0.1);font-size: 18px;padding-left:35px;background:#ffffff;border-bottom:1px solid #e6e6e6;}
#menu .d1{}
#menu .d1 .m.active{/*background-color: #059b04;color:#fff; border-bottom: 1px solid #059b04;배경초록색*/color: #373737;}
#menu .d1 .sub{display:none;background-color: #eee;}
#menu .d1 .sub li{border-bottom:1px solid #ddd;}
#menu .d1 .sub li:last-child{border-bottom:0;}
#menu .d1 .sub li a{display: block;font-size: 16px;color: #555;padding: 10px 0; height:50px; line-height:30px; /*font-family: 'GmarketSansMedium';*/font-weight:500;padding-left:35px;}
#menu .d1 .m{transition:all 0.2s;}
#menu .d1 .m i{transition:all 0.2s;float:right;}
#menu .d1 .m i.rightico{transform:rotate(180deg);transition:all 0.2s;}

.box_m{padding-top: 90px;background:#0081BE;padding-bottom: 14px;}
#menuToggle .box_m a{color:#ffffff !important;}
#menuToggle .box_m li{float:left;}







/*푸터*/
#footer{height:180px;padding-top: 50px;}
#footer .f_wrap>div{float:left;}
#footer .t2{margin-left:82px;}
#footer .t2 p{font-size:18px;}
#footer .t3{margin-left:120px;}
#footer .t3 img{margin-left:15px;vertical-align: text-top;}
#footer .t1 p{float:left;margin-top: 5px;}
#footer .t1 ul{display:inline-block;margin-left:20px;}
#footer .t1 ul li{margin-bottom:10px;}
#footer .t1 ul li img{padding-right:10px;}
#footer p{display:inline-block;}
#footer .t2 img{float:right;margin-left:20px;}
#footer .t1 .tel{display:block;margin-left:42px;}


#menuToggle{display:none;}
nav{_display:none;}


/* --- 768px --- */
@media screen and (max-width: 768px) {
    body{max-width: 100%;
    overflow-x: hidden;
    min-width: auto;}
    nav{display:block;}
    #header{}
    .gnb{display:none;}
    .logo img{width:80%;margin-left:20px;}
     #menuToggle{display:block;right:20px;position: fixed;}
    /*#menu{width:450px;padding-top:135px;height: 3000px;top: 0px;}*/
    #header{line-height:50px;}
    #header #menu .sub li{line-height:30px;}
    
    
    
    #footer{height:auto;padding:0 20px;padding:40px 20px;}
    #footer .f_wrap>div{float:none;}
    #footer .t2{margin-left:0;}
    #footer .t3{margin-left:0;}
    .f_wrap{font-size:14px;}
    #footer .t1 ul{margin-left:0;}
    #footer .t1 p{font-weight:bold;margin-bottom: 10px;}
    #footer .t2 p{font-weight:bold;margin-bottom: 20px;margin-top: 10px;font-size: 14px;}
    #footer .t3 p{font-weight:bold;margin-bottom: 10px;}
    #footer .t1 ul li img{width:10%;}
    #footer .t1 ul li{font-size:12px;}
    #footer .t3 img{width:30%;}
}