/* settimeout? 쓰면 된다. 마우스 떠날때, 딜레이 주고 사라지게 할라면. */



/* header start */
.header_div{position: relative; z-index: 999;}
.header_div #header.down{height: 80px; background-color: rgba(0,0,0,0.7);}
.header_div #header.down .header_inner{height: 80px;}
#header{position: fixed; width: 100%; top: 0; left: 0; z-index: 999; transition-duration: 0.5s;}
#header .menu_btn{position: absolute; width: 35px; left: 10%; top: 50%; transform: translateY(-50%); z-index: 999;}
#header .menu_btn a img{width: 100%;}
#header .header_inner{width: 90%; max-width: 1400px; height: 80px; margin: 0 auto;}
#header .header_inner h1{position: absolute; left: 10%; top: 50%; transform: translateY(-50%); width: 120px; height: 37px; overflow: hidden;}
#header .header_inner h1 a{display: block; position: relative; width: 100%; background-image: url(../img/logi-logo-anim-light.png); background-position-y: 0; z-index: 999}
/* #header .header_inner h1 img{width: 100%; margin-top: -1276px; transition-duration: 0.5s;} */
#header .header_inner .menu{display: flex; justify-content: space-between; align-items: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 500px;}
#header .header_inner .menu li{width: 25%; text-align: center;}
#header .header_inner .menu li a{font-weight: 500; color: #fff; font-size: 1.2em;}
#header .header_inner .menu li a:hover{background-color: #fff; color: #212121; padding: 5px 15px; border-radius: 20px;}
#header .header_inner .util{position: absolute; right: 10%; top: 50%; transform: translateY(-50%); display: flex;}
#header .header_inner .util a{width: 30px; margin-left: 20px;}
#header .header_inner .util a img{width: 100%;}
/* submenu */
.sub_menu{position: fixed; left: 50%; top: 80px; transform: translateX(-50%); width: 90%; height: 0px; max-width: 1400px; background-color: #eee; border-radius: 0 0 20px 20px; z-index: 999;} /*서브 메뉴 숨기기. 스크롤?*/
.sub_menu .close_btn_wrap{position: absolute; right: 4%; top: 10px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; width: 45px; height: 20px; display: none;}
.sub_menu .close_btn_wrap .close span{position: absolute; right: 0px; top :50%; transform: translateY(-50%); display: block; width: 10px; height: 2px; background-color: #212121; transform: rotate(45deg);}
.sub_menu .close_btn_wrap .close span:nth-child(2){transform: rotate(135deg);}
.sub_menu .close_btn_wrap .close{border: none; background: none; cursor: pointer;}

.sub_menu .mid_menu{position: relative; width: 96%; margin: 0 auto; z-index: 999; display: none;}
.sub_menu .mid_menu .sub_inner{position: absolute; display: flex; flex-direction: column; padding-top: 30px; width: 180px;} /*높이 변경*/

.sub_menu .mid_menu .sub_inner>li{padding: 25px 0; border-bottom: 1px solid #eee; text-align: center; box-sizing: border-box;}
.sub_menu .mid_menu .sub_inner>li.select{background-color: #fff; border: 1px solid #eee; border-radius: 10px 0 0 10px; box-sizing: border-box; border-right: none; z-index: 1;}/*select*/
.sub_menu .mid_menu .sub_menu_wrap{width: 100%;}
.sub_menu .mid_menu .sub_menu_wrap>div{display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; margin-top: 30px; position: absolute; top: 0; left: 178px; padding: 20px 4%; display: none; background-color: #fff; width: calc(92% - 180px); border: 1px solid #eee; border-radius: 10px; box-sizing: border-box; height: 520px;}
.sub_menu .mid_menu .sub_menu_wrap>div:nth-child(1){border-radius: 0 10px 10px 10px;}
.sub_menu .mid_menu:last-child .sub_menu_wrap>div{border-radius: 10px; left: 50%; transform: translateX(-50%); width: calc(92% - 90px);}
.sub_menu_wrap .sub_menu_contents{position: relative; width: 100%; display: flex; flex-wrap: wrap; z-index: 1; margin-right: 4%; z-index: 999;}
.sub_menu_wrap .sub_menu_contents>li{margin-bottom: 40px; margin-right: 20px; width: 27%; line-height: 1.8em;}
.sub_menu_wrap .sub_menu_contents>li>a{font-weight: bold; margin-bottom: 10px; display: block;}
.sub_menu_wrap .sub_menu_contents>li>ul>li a{position: relative; transition-duration: 0.5s;}
.sub_menu_wrap .sub_menu_contents>li>ul>li a:hover::after{width: 100%;}
.sub_menu_wrap .sub_menu_contents>li>ul>li a::after{content: ''; display: block; position: absolute; width: 0; height: 1px; background-color: #212121; transition-duration: 0.5s; left: 50%; transform: translateX(-50%);}
.sub_menu_wrap .sub_menu_contents>li>ul>li a.make{background-color: #DCFD00;}
.sub_menu_wrap .sub_menu_contents>li>ul>li a.make::after{background-color: #DCFD00;}
.sub_menu_wrap .sub_menu_contents>li>ul>li a:hover.make{background-color: #DCFD00;}

.sub_menu>nav>ul{position: absolute; top: 0;}
/* 불러오기 */
/* .sub_menu .mid_menu:nth-child(2) .sub_inner{display: flex;} */
/* .sub_menu .mid_menu:nth-child(2) .sub_menu_wrap>div:nth-child(2){display: flex;} */
/*
2~5
[2,1] [2,2] [2,3]
[3,1] [3,2] [3,3] [3,4]
[4,1] [4,2] [4,3] [4,4] [4,5]
[5,1] [5,2] [5,3]
*/

/* .mid_menu:nth-child(2) .sub_menu_wrap>div:nth-child(1) : 제품 */
.product_menu_wrap .product_left{position: absolute; width: 160px; right: 0;}
.product_menu_wrap .product_left>ul>li{line-height: 1.8em;}
.product_menu_wrap .product_left>ul>li>a{font-weight: bold;}
.product_menu_wrap .product_left>ul>li>ul{margin-top: 10px;}
.product_menu_wrap .product_menu_under{position: relative; width: 100%; display: flex; justify-content: space-between; border: 1px solid #000;}
.product_menu_wrap .product_menu_under span{font-size: 20px; font-weight: bold;}
.product_menu_wrap .product_menu_under p{line-height: 2em; padding: 20px;}
.product_menu_wrap .product_menu_under a{align-self: center; margin-right: 20px;}

.product_menu_under{position: relative; background-image: url(../img/search_banner.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}
/* .mid_menu:nth-child(2) .sub_menu_wrap>div:nth-child(2) : 비즈니스 */
.business_btn_wrap{position: absolute; width: 180px; display: flex; flex-direction: column; top: 420px; justify-content: center; align-items: center;}
.business_btn_wrap .business_btn{margin-bottom: 10px; width: 110px; line-height: 25px; border-radius: 10px; border: none; background-color: #000; color: #fff; font-weight: bold; font-size: 0.9em;}
/* .sub_menu .product_menu .sub_inner 의 높이 = 330*/
/* .mid_menu:nth-child(2) .sub_menu_wrap>div:nth-child(3) : 크리에이터 */
.creator_left, .logistory_left, .engneer_left, .about_left, .resource_left{width: 250px; height: 100px; position: absolute; right: 0; padding: 0 10px; box-sizing: border-box;}
.creator_left a img, .logistory_left a img, .engneer_left a img, .about_left a img, .resource_left a img{width: 100%;}
.creator_left span, .logistory_left span, .engneer_left span, .about_left span{line-height: 2em; font-weight: bold;}
.creator_left{object-fit: contain;}
/* .mid_menu:nth-child(3) .sub_menu_wrap>div:nth-child(1) : logi 스토리 */
/* .mid_menu:nth-child(3) .sub_menu_wrap>div:nth-child(2) : 기술 */
/* .mid_menu:nth-child(4) .sub_menu_wrap>div:nth-child(1) : 기술 */
.solution_menu_wrap .sub_menu_contents>li, .business_product_menu_wrap .sub_menu_contents>li{width: 30%;}
/* .mid_menu:nth-child(5) .sub_menu_wrap>div:nth-child(1) */
.solution_menu_wrap>div{border-radius: 10px;}
.solution_menu_wrap>ul{height: 350px;}
.solution_menu_wrap>ul>li{font-weight: bold; margin-bottom: 10px;}
.resource_left{width: 30%;}
.resource_left ul{margin-bottom: 10px;}
.resource_left ul>li{font-weight: bold; line-height: 1.8em;}
.resource_left ul>li>ul{display: flex; flex-direction: column;}

.logistory_menu_wrap>.sub_menu_contents>li>a.make{background: #DCFD00; width: 75px; transition-duration: 0.5s;}
.logistory_menu_wrap>.sub_menu_contents>li>a.make:hover{background-color: #DCFD00;}

.brand_menu_wrap .sub_menu_contents li a{width: 100%; font-size: 0.9em; text-align: center; font-weight: 400;}
.brand_menu_wrap .sub_menu_contents li a img{width: 100%;}

.partner li{width: 200px;}
.partner li a img{width: 100%;}
/* mobile */


.m_sub_wrap{position: fixed; top: 0; left: -300px; background-color: #fff; width: 300px; height: 100vh; z-index: 999; overflow: hidden;}
.m_sub{width: 300%; display: flex; position: relative;}
.m_sub .m_sub_main>ul{display: flex; flex-direction: column;}
.m_sub .m_sub_main>ul>li>a{position: relative; display: flex; width: 100%; padding: 10px 0; align-items: center; color: #212121;background-color: #eee;}
.m_sub .m_sub_main>ul>li>a>img{width: 30px; height: 30px; margin-right: 10px; margin-left: 20px;}
.m_sub .m_sub_main>ul>li>ul{display: flex; flex-direction: column;}
.m_sub .m_sub_main>ul>li>ul>li{box-sizing: border-box; border-bottom: 1px solid #eee; display: flex; justify-content: space-between;}
.m_sub .m_sub_main>ul>li>ul>li>a{font-weight: bold; width: 100%; position: relative; padding: 20px; display: flex; justify-content: space-between;}
.m_sub .m_sub_main>ul>li>ul>li>a>div{width: 24px; height: 24px;}
.m_sub .m_sub_main>ul>li>ul>li>a>div>img{width: 100%;}

/*  */
.m_sub .m_sub_main{width: 33.333%;}
/*  */
.m_sub .m_sub_mid_wrap{display: flex; flex-direction: column; width: 33.333%; overflow: hidden;}
.m_sub .m_sub_mid_wrap .m_sub_mid{width: 100%;}

.m_sub .m_sub_mid_wrap .m_sub_mid>ul{display: flex; flex-direction: column; width: 100%;}
.m_sub .m_sub_mid_wrap .m_sub_mid>ul>li{width: 100%; display: none;}
.m_sub .m_sub_mid_wrap .m_sub_mid>ul>li>a{position: relative; display: flex; padding: 10px 0; align-items: center; color: #212121; background-color: #eee; font-weight: bold; padding-left: 20px; cursor:default;}
.m_sub .m_sub_mid_wrap .m_sub_mid>ul>li>a>img{width: 30px; height: 30px; margin-right: 10px; margin-left: 20px;}
.m_sub .m_sub_mid_wrap .m_sub_mid>ul>li>ul{display: flex; flex-direction: column;}
.m_sub .m_sub_mid_wrap .m_sub_mid>ul>li>ul>li{box-sizing: border-box;display: flex; justify-content: space-between;}
.m_sub .m_sub_mid_wrap .m_sub_mid>ul>li>ul>li>a{width: 94%; position: relative; line-height: 2.2em; display: flex; justify-content: space-between; padding-left: 20px;}
.m_sub .m_sub_mid_wrap .m_sub_mid>ul>li>ul>li>a>div{width: 24px; height: 24px;}
.m_sub .m_sub_mid_wrap .m_sub_mid>ul>li>ul>li>a>div>img{width: 100%;}

.m_sub a.m_make{background: #00B8FC; width: 100%; transition-duration: 0.5s;}
.m_sub a.m_make:hover{background-color: #DCFD00;}

.back_name{display: none;}
.back_name a{display: flex; align-items: center; width: 100%; padding: 10px; border-bottom: 1px solid #eee;}
.back_name a img{width: 16px; height: 16px;}


.m_sub .m_sub_inner_inner_wrap{display: flex; flex-direction: column; width: 33.333%; overflow: hidden;}
.m_sub_outer .m_sub_inner_wrap .m_sub_inner{width: 100%; display: none;}
/* .m_sub_outer:nth-child(1) .m_sub_inner_wrap:nth-child(1) .m_sub_inner:nth-child(1){display: block;} */

.m_sub_inner>li{background-color: #eee;}
.m_sub_inner>li>ul{border-top: 1px solid #eee; width: 100%;}
.m_sub_inner>li>a{padding: 10px; background-color: #fff; display: flex; align-items: center;}
.m_sub_inner>li>a>img{width: 16px; height: 16px;}
.m_sub_inner>li>ul>li{padding: 10px 0; position: relative;}
.m_sub_inner>li>ul>li>a{padding: 10px 20px; display: block; width: 94%;}
/* .m_sub_inner{display: none;} */

.m_sub .m_sub_mid_wrap .m_sub_mid>.depth2_4>li>a>img{width: 90%; height: 50px;}
.m_sub .m_sub_mid_wrap .m_sub_mid>.depth2_4>li:nth-child(2)>a>img{width: 100%; height: 30px;}

.m_close{position: absolute; background-color: #fff; border: 1px solid #eee; box-sizing: border-box; width: 50px; height: 50px; left: -300px; top: 0; z-index: 999;}
.m_close>span{position: relative;}
.m_close>span::after{content: ''; display: block; position: absolute; top: 0%; width: 30px; height: 2px; background-color: #000; margin-left: 10px;}
.m_close>span:first-child:after{rotate: 135deg;}
.m_close>span:last-child:after{rotate: 45deg;}

/* footet start */
#footer{position: relative; background-color: #212121; color: #eee; padding: 40px 0;}
#footer .footer_wrap{position: relative; width: 90%; margin: 0 auto;border-top: 1px solid #f1f1f1; padding-top: 40px;}
#footer .footer_wrap p{margin-bottom: 10px;}
#footer .footer_inner{display: flex; justify-content: space-between;}

#footer .footer_inner .footer_sns{display: flex; justify-content: space-between; width: 120px; margin-bottom: 40px;}
#footer .footer_inner .footer_sns a{width: 23%;}
#footer .footer_inner .footer_sns a:hover img{opacity: 1;}
#footer .footer_inner .footer_sns a img{width: 100%; opacity: 0.5; transition-duration: 0.5s;}

#footer .footer_inner .footer_right_wrap{position: relative; width: 40%; color: #eee;}
#footer .footer_inner .footer_right_wrap a{color: #eee;}
#footer .footer_inner .footer_right_wrap .footer_email_wrap{display: flex; flex-direction: column;}
#footer .footer_inner .footer_right_wrap .footer_email_wrap input[type=text]{height: 30px; line-height: 30px; margin-bottom: 10px; border: none;}
#footer .footer_inner .footer_right_wrap .footer_email_wrap label{color: #eee; line-height: 1.6em; font-size: 0.8em; font-weight: normal;}
#footer .footer_inner .footer_right_wrap .footer_email_wrap label>span{font-weight: 500; font-size: 1em; cursor: pointer; text-decoration: underline; }
#footer .footer_right_wrap .footer_email_wrap label>span:hover{font-weight: bold;}
#footer .footer_right_wrap .footer_email_wrap input[type=checkbox]{margin-right: 5px;}

.email_btn{position: absolute; width: 30px; height: 30px; background-color: #DCFD00; top: 0; right: 0; cursor: pointer;}
.email_btn img{margin: 7px auto;}

#footer .footer_link_wrap{margin-bottom: 10px;}
#footer .footer_link_wrap a{color: #eee;}
#footer .footer_link_wrap ul{display: flex; justify-content: space-between; width: 600px;}
#footer .footer_link_wrap ul li::after{content: ''; display: block; position: absolute; width: 1px; height: 12px; background-color: #eee; margin-top: -16px; margin-left: -20px;}
#footer .footer_link_wrap ul li:first-child::after{display: none;}
#footer .footer_right_wrap ul li{text-align: end; font-size: 0.9em; margin-bottom: 40px;}

#footer address{display: flex; flex-wrap: wrap;}
#footer address p{margin-right: 20px; font-size: 0.9em;}






@media screen and (min-width:1201px) {
  #header .menu_btn{display: none;}
}





/* 타블랫 가로 */
@media screen and (min-width:801px) and (max-width:1200px) {
  /* header */
  .header_div #header.down{height: 60px;}
  .header_div #header.down .header_inner{height: 60px;}
  #header .header_inner{height: 60px;}
  /* submenu */
  .sub_menu{top: 60px;} /*서브 메뉴 숨기기. 스크롤?*/
  
  #header .header_inner h1{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 120px; height: 34px; overflow: hidden;}
  #header .header_inner h1 img{width: 100%; margin-top: -1276px;}
  #header .header_inner .menu{display: none;};

  #header .header_inner .util a:first-child{display: none;}
  #header .header_inner .util a:last-child{display: none;}
  #header .header_inner .util a:last-child img{display: none;}


  
  
  
  /* footer */
  #footer .footer_wrap{display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
  #footer .footer_wrap>p{text-align: center; margin:
  10px 0;}
  #footer .footer_inner{display: flex; flex-direction: column; justify-content: center; align-items: center;}
  #footer .footer_inner .footer_right_wrap{width: 400px;}
  #footer .footer_inner .footer_right_wrap a{text-align: end; display: block;}
  
  #footer .footer_link_wrap{margin-bottom: 10px;}
  #footer .footer_link_wrap ul{position: relative; margin: 0 auto; display: flex; justify-content: space-between; width: 600px;}

  #footer address{display: flex; flex-direction: column; justify-content: center; align-items: center;}
}





/* 타블랫 세로 */
@media screen and (min-width:601px) and (max-width:800px) {
  /* header */
  .header_div #header.down{height: 60px;}
  .header_div #header.down .header_inner{height: 60px;}
  #header .header_inner{height: 60px;}
  /* submenu */
  .sub_menu{top: 60px;} /*서브 메뉴 숨기기. 스크롤?*/

  #header .header_inner h1{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 120px; height: 34px; overflow: hidden;}
  #header .header_inner h1 img{width: 100%; margin-top: -1276px;}
  #header .header_inner .menu{display: none;};

  #header .header_inner .util a:first-child{display: none;}
  #header .header_inner .util a:last-child{display: none;}
  #header .header_inner .util a:last-child img{display: none;}



  /* footer */
  #footer .footer_wrap{display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
  #footer .footer_wrap>p{text-align: center; margin:
  10px 0;}
  #footer .footer_inner{display: flex; flex-direction: column; justify-content: center; align-items: center;}
  #footer .footer_inner .footer_right_wrap{width: 320px;}
  #footer .footer_inner .footer_right_wrap a{text-align: end; display: block;}
  
  #footer .footer_link_wrap{margin-bottom: 10px;}

  #footer .footer_link_wrap ul{width: 500px;}
  #footer .footer_link_wrap ul li::after{margin-left: -10px;}

  #footer address{display: flex; flex-direction: column; justify-content: center; align-items: center;}
}





/* 모바일 */
@media screen and (max-width:600px) {
  /* header */
   /* header */
  .header_div #header.down{height: 60px;}
  .header_div #header.down .header_inner{height: 60px;}
  #header .header_inner{height: 60px;}
  /* submenu */
  .sub_menu{top: 60px;} /*서브 메뉴 숨기기. 스크롤?*/
  #header .header_inner h1{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 120px; height: 34px; overflow: hidden;}
  #header .header_inner h1 img{width: 100%; margin-top: -1276px;}
  #header .header_inner .menu{display: none;};

  #header .header_inner .util a:first-child{display: none;}
  #header .header_inner .util a:last-child{display: none;}
  #header .header_inner .util a:last-child img{display: none;}
  /* footer */
  
  #footer .footer_wrap{display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
  #footer .footer_wrap>p{text-align: center; margin: 10px 0; font-size: 0.8em;}
  #footer .footer_wrap a{font-size: 0.8em;}
  #footer .footer_inner{display: flex; flex-direction: column; justify-content: center; align-items: center;}
  #footer .footer_inner .footer_right_wrap{width: 320px;}
  #footer .footer_inner .footer_right_wrap a{text-align: end; display: block; font-size: 0.8em;}

  #footer .footer_link_wrap{margin-bottom: 10px;}

  #footer .footer_link_wrap ul{width: 90%; flex-wrap: wrap; justify-content: space-around;}
  #footer .footer_link_wrap ul li:nth-child(1)~li:nth-child(2){width: 50%; flex-wrap: wrap;}
  #footer .footer_link_wrap ul li::after{height: 10px; margin-top: -14px;}
  #footer .footer_link_wrap ul li:nth-child(2)::after{margin-left: -15px;}
  #footer .footer_link_wrap ul li:nth-child(3)::after{display: none;}
  #footer .footer_link_wrap ul li:nth-child(4)::after{margin-left: -14px;}
  #footer .footer_link_wrap ul li:nth-child(5)::after{margin-left: -13px;}
  #footer .footer_right_wrap ul li>a{font-size: 0.8em;}

  #footer address{display: flex; flex-wrap: wrap;}
  #footer address p{font-size: 0.8em;}
  #footer address{display: flex; flex-direction: column; justify-content: center; align-items: center;}
}