@charset "utf-8";

/* 헤더///////////////// */
header{
    /*  position: absolute; */
     width: 100%;
    /*  z-index: 100; */
     background-color: #fff;
     top: 0;
      border-bottom: 1px solid #000;
 }
 #h_wrap{
     display: flex;
     max-width: 1828px;
     margin: 0 auto;
     height: 140px;
 }
 #logo{
     z-index: 101;
     transform: scale(0.7);
 }
 #main_nav{
     position: relative; 
     flex-grow: 1;
 }
 #main_nav > ul{
      width: 693px;
     display: flex;
     justify-content: space-around;
     padding-top: 63px;
     font-weight: 700;
 }
 #main_nav > ul > li{
     position: relative;
 }
 #main_nav > ul > li > a{
     display: block;
     color: #000;
     font-size: 20px;
     height: 70px;
 }
 header #main_nav > ul > li > a > span{
     border-bottom: 3px solid transparent;
     height: 74px;
     display: inline-block;
     padding: 0 5px;
 
 }
 header #main_nav > ul > li:hover > a > span{
     border-bottom: 3px solid #000;
 }
 #main_nav .sub_s{
    border-top: 1px solid #000;
     background-color: #fff;
     position: absolute;
     top: 77px;
     width: 100vw;
     height: 200px;
     display: none;
     left: -711px;
     z-index: 1000;
     overflow: hidden;
 }
 #main_nav .sub_navi{
     display: flex;
     justify-content: space-between;
     position: absolute;
     top: 25px;
     width: 693px;
     left: 713px;
     z-index: 1001;
 }
 #main_nav .nav_img ul{
     display: flex;
     justify-content: space-around;
 }
 #main_nav .nav_img ul li{
     margin-right: 10px;
 }
 #main_nav .nav_img img{
     width: 100%;
 }
 #main_nav .sub_navi > ul > li > a{
     height: 40px;
     line-height: 40px;
     display: block;
     font-size: 16px;
     font-weight: 400;
     color: #000;
     width: 115px;
 }
 #main_nav .sub_navi > ul > li > a:hover{
     border-bottom: 1px solid #000;
 }

 #main_nav .nav_bg{
    border-top: 1px solid #000;
    position: fixed;
    top: 140px;
    width: 100vw;
    left: 0px;
    height: 230px;
    background: #fff;
    z-index: 999;
    display: none;
 }
 .lang_icon > ul{
     display: flex;
     padding-top: 63px;
 }
 .lang_icon > ul > li > a{
     color: #000;
     width: 60px;
     height: 44px;
     display: inline-block;
     font-size: 17px;
     line-height: 44px;
     text-align: center;
 }
 .material-symbols-outlined{
     transform: scale(1.3);
 }
 /* 서브페이지 서브 메뉴 */
 #top{
     text-align: center;
 }
 #top > h1{
     font-size: 64px;
     margin-top: 170px;
     margin-bottom: 50px;
     font-weight: 700; 
 }
 #top > p{
     font-size: 24px;
     color: #646464;
     margin-bottom: 80px;
 }
 
 
 /* 모바일 스타일 */
 .mb_close{
     z-index: 1001;
     display: flex;
     justify-content: space-between;
     height: 50px;
     padding-left: 20px;
     line-height: 50px;
 }
 #mb_navi{
     position: fixed;
     top: 0;
     right: -100%; /* 닫힘: -100% */
     width: 100%;
     height: 100%;
     z-index: 1001;
     background: #fff;
     overflow-y: auto;  /* 밑에 메뉴가 있는데 안보여서 스크롤을 넣어서 보이게 하기 위해 */
 }
 /* ////////////////////////////////////////////////// */
 footer{
    background-color: #3A3A3A;
    margin-top: 50px;
}
.foot{
    display: flex;
}
.f_er{
    color: #fff;
}
.f_er p{
    font-size: 14px;
}
.f_er p:nth-child(1){
    font-size: 16px;
    margin-top: 30px;
    margin-bottom: 10px;
    margin-right: 50px;
}
.f_er p:nth-child(5){
    font-size: 12px;
    margin-top: 10px;
}
.f_el{
    margin: 30px 0;
}
.f_el img{
    width: 80%;
}

@media screen and (max-width: 1070px) {
    header{
        flex-wrap: nowrap;
        /* padding: 0 20px; */
        width: 100%;
        background-color: transparent;
    }
    #h_wrap {
        height: 125px;
    }
    #logo{
        width: auto;
        text-align: left;
        z-index: 1002;
        transform: scale(0.6);
    }
    #main_nav{
        display: none;
   }
   .lang_icon{
        position: relative;
        display: none;
   }
   .mb_menu{
    position: absolute;
    top: 35px;
    width: 30px;
    height: 30px;
    right: 38px;
    z-index: 1002;
   }
   .m_im figure img {
    object-position: center -83px;
   }
   .mb_1, .mb_2, .mb_3{
    border: 2px solid #000;
    margin-bottom: 7px;
    transition: 0.3s;
   }
   .mb_menu.cross .mb_1{
    transform: rotate(45deg) translate(6px, -4px);
    transform-origin: 0px 0px;
   }
   .mb_menu.cross .mb_2{
    opacity: 0;
   }
   .mb_menu.cross .mb_3{
    transform: rotate(-45deg) translate(14px, -17px);
    transform-origin: 100% 100%;
   }
       /* 모바일 메뉴 복사 */
       .mb_navi_wrap{
        position: relative;
        margin-top: 76px;
        width: 100%;
        height: calc(100% - 126px);
    }
    .mb_navi_wrap > ul{
    background: #181B1E ;
        height: 100%;
    }
    .mb_navi_wrap > ul > li > a{
        width: 100%;
        display: inline-block;
        padding-left: 10px;
        box-sizing: border-box;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 20px;
        letter-spacing: 2px;
    }
    .mb_navi_wrap > ul > li > a.on{
        background: #E3E5E2;
          color: #000;
        font-weight: 700;
    }
    .mb_navi_wrap .sub_s{
        background: #EAEAEA;
        text-align: center;
        position: absolute;
        left: 35%;
        top: 0;
        width: 65%;
        height: 100%;
        display: none;
    }
    .mb_navi_wrap ul  li:nth-child(1) .sub_s {
        display: block;
    }
    .mb_navi_wrap .sub_s ul{
        box-shadow: 1px 1px 1px #EAEAEA;    
    }

    .mb_navi_wrap .sub_s ul li a{
        background: #EAEAEA;
        color: #000;
        font-size: 17px;
        display: block;
        height: 50px;
        line-height: 50px;
        /* border-bottom: 1px solid #EAEAEA; */
        padding-left: 10px;
        box-sizing: border-box;
    }
    .mb_navi_wrap .sub_s ul li:hover a{
        color: #fff;
        background: #181B1E;
    }
    /* .mb_navi_wrap .sub_navi ul li:first-child a{
        border-top: 1px solid #EAEAEA;
    } */
    .nav_img{
        display: none;
    }
    .mb_cl{
        border-top: 1px solid #1d1d1b;
         position: fixed;
        bottom: 0px;
        right: 0px;
        width: 100%;
        display: none;
        background-color: #fff;
    }
    .mb_cl ul{
        display: flex;
        justify-content: end;
    }
    .mb_cl ul li{
        margin-right: 40px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .mb_cl ul li a{
        color: #000;
    }
}