@import url('root.css');

/* container */
.container {width:1200px; margin: 0 auto; background: var(--container-background); position: relative;}


header{
  position: sticky;
  top: 0;
  z-index: 999;
}

header .container {
  display: flex;
  flex-direction: column;


}
header .container .navbar {
  /* BOX 표시방식 flex : 한줄에 나란히 표시*/
  display: flex;
  /* 중간 중간에 스페이싱을 넣을때 같은중심축에서 넣음  */
  justify-content: space-between ;
  /* 수직적으로 중간으로 배치 : 반대축이기 때문에 */
  align-items: center;

  background-color: var(--background-color);
  /* 위 8px 양엽은 12px 간격 padding */
  padding: 8px 12px;

  width: 100%;

  box-sizing: border-box;
}

header  a {
  color: var(--text-color);

}

header .container .navbar__logo {
  font-size: 24px;
  color: var(--text-color);

}

header .container  .navbar__logo i {
  color: var(--accent-color);
}

header .container .navbar__menu {
  display: flex;
  /* 리스트 모양 꾸밈세 제거 */
  list-style: none;
  /* 메뉴를 중간으로 이동*/
  padding-left: 0;
}

  /* 리스트 Item 스페이싱 처리 */
  header .container .navbar__menu li {
  padding: 8px 12px;
}

header  .container .navbar__menu li:hover {
  background-color: var(--accent-color);
  border-radius: 4px;
}

header .container .navbar__menu a {
  font-size:100%;padding:30px 5px;
}
/* Hide Dropdowns by Default */
header .container .navbar__menu  ul {
  display: none;
  position : absolute;
  top : 60px;
}
/* Display Dropdowns on Hover */
header .container .navbar__menu li:hover > ul {
  display: inherit;
}
/* Fisrt Tier Dropdown */
header .container .navbar__menu ul li {
  width:80px;
  float: none;
  display: list-item;
  position: relative;
}
/* Second, Third and more Tiers	*/
header .container .navbar__menu ul ul li {

  position: relative;
  top: -60px;
  left: 90px;
}

header   .container  .navbar__icons {
  display: flex;
  list-style: none;
  color: var(--text-color);
  padding-left: 0;

}

header  .container .navbar__icons li {
  padding: 8px 12px;
}

header .container .navbar__toogleBtn {
  display: none;
  position: absolute;
  right: 32px;
  font-size: 24px;
  color: var(--accent-color);
}


/* title */
.header-title .container .title {text-align: center; text-transform: uppercase;padding-top: 15px; width: 100%;}
.header-title .container .title  p {display:inline; font-size: 24px; color: var(--title-p);padding: 10px 20px;}
.header-title .container .title  h1 {font-size: 14px; color:var(--title-p)}
.header-title .container .title  h1  a {display:inline-block;  color:var(--title-p);padding: 10px 20px;margin-top: -4px;}

/* icon-font */
.icon-font {text-align: center; margin-top: 40px;padding-bottom: 40px;}
.icon-font  ul {}
.icon-font  li {position: relative; display: inline;padding: 0 40px;}
.icon-font  li a {display: inline-block;  width: 60px;height: 60px; background-color: var(--icon-font-background);color:var(--icon-font-color); font-size: 30px;border-radius: 50%;margin:0 3px;  line-height: 58px;}
.icon-font  li a .tool {opacity: 0; font-size: 9px; position: absolute; left: 50%; top : -62px; background-color: var(--icon-font-background);line-height: 20px; padding: 1px 7px;transform: translateX(-50%); border-radius: 6px 0; transition: all 0.3s ease-in-out;}
.icon-font  li a:hover .tool {width: 80px;opacity: 1;top :-52px}
.icon-font  li a .tool::before {content: ""; position: absolute; bottom: -5px; left: 50%;margin-left: -5px;
  border-top: 5px solid var(--border-color);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.ie7 .icon-font {display: none;}
.ie8 .icon-font li a .tool {display: none;}


@media (max-width: 1280px) {

  .container {width: 100%;}
  .container-index {width:100%; }


  header .container {width: 100%;}
  .row {padding: 0 15px;}
}

@media screen and (max-width: 768px) {
  header  .container  .navbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 24px;
  }  
  header  .container .navbar__menu {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  header  .container .navbar__menu li {
    width: 100%;
    text-align: center;
  }

  header  .container .navbar__icons {
    display: none;
    justify-content: center;
    width: 100%;

  }

  header .container  .navbar__toogleBtn {
    display: block;
  }

  header .container .navbar__menu.active,
  header .container .navbar__icons.active {
    display: flex;
  }


  header .container .title {text-align: center; text-transform: uppercase;padding-top: 5px;}
  header .container .title  p {display:inline; font-size: 20px; color: #fff;padding: 5px 20px;}
  header .container .title  h1 {font-size: 14px; color:#fff}
  header .container .title  h1  a {display:inline-block;  color:#fff;padding: 5px 20px;margin-top: -4px;}


  .icon-font {
    display: none;
  }
  
}