
.ttibanner {
	position:fixed; top:0;
	left:0; 
	width:100%;
	background:var(--color-indigo);
	color:#fff;
	z-index:11;
	text-align:center;
	padding:0 20px;
	height:35px;
	line-height:35px;
	font-size:14px;
}
.ttibanner .new {color:yellow; vertical-align:bottom; font-size:11px; font-weight:500; margin-right:3px;}
.ttibanner .bar {color:rgba(255,255,255,0.4); margin:0 2px;}
.ttibanner a {color:#fff;}

.arrow-prev,
.arrow-next {
    position: relative;
    width:12px;
    height:12px;
    margin:0px;
}

.arrow-prev::after {
    position: absolute;
    left: 2px; 
    top: 4px; 
    content: '';
    width: 8px; /* 사이즈 */
    height: 8px; /* 사이즈 */
    border-top: 1px solid #fff; /* 선 두께 */
    border-right: 1px solid #fff; /* 선 두께 */
    transform: rotate(225deg); /* 각도 */
}
.arrow-next::after {
    position: absolute;
    left: 2px; 
    top: 4px; 
    content: '';
    width: 8px; /* 사이즈 */
    height: 8px; /* 사이즈 */
    border-top: 1px solid #fff; /* 선 두께 */
    border-right: 1px solid #fff; /* 선 두께 */
    transform: rotate(45deg); /* 각도 */
}

.brand {
  font-family: inherit;
  font-size: 1.36rem;
  font-weight: 700;
  line-height: inherit;
  border: none;
  outline: none;
  color:#fff;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
}

.brand img {height:35px; display:inline-block; vertical-align:middle;  image-rendering:-webkit-optimize-contrast;
  transform:translateZ(0);  backface-visibility:hidden;}
.brand .name {display:inline-block; vertical-align:middle; margin-left:10px;}
.brand .loca {vertical-align:middle; color:#fff; font-weight:600;}

.brand .bar {color:rgba(255,255,255,0.4); font-weight:200;}
.brand .inno {}

.navbar.min .brand {  color: var(--color-indigo);}
.navbar.min .brand img {/*filter:none;*/}
.navbar.min .brand .bar {color:rgba(0,0,0,0.6);}
.navbar.min .brand .inno {color:#1e1e1e;}
.navbar.min .brand .loca {color:#000; font-weight:700;}

.brand .normal {display:none;}
.brand .white {display:inline-block;}
.navbar.min .normal {display:inline-block;}
.navbar.min .white {display:none;}

.navbar {
  position:fixed;
  top:35px;
  left:0;
  width:100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0.75rem 0;
  border: none;
  outline: none;
  color:#fff;
  z-index:11;
}
.navbar .wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.navbar .burger {
  position: relative;
  display: none;
  cursor: pointer;
  width: 2rem;
  height: 1rem;
  border: none;
  outline: none;
  opacity: 0;
  visibility: hidden;
  background: none;
  transform: rotate(0deg);
  transition: 0.35s ease-in-out;
}
.navbar .burger-line {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  border: none;
  outline: none;
  opacity: 1;
  border-radius: 0.25rem;
  background: var(--color-black);
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}
.navbar .burger-line:nth-child(1) {
  top: 0;
}
.navbar .burger-line:nth-child(2), .navbar .burger-line:nth-child(3) {
  top: 0.5rem;
}
.navbar .burger-line:nth-child(4) {
  top: 1rem;
}
.navbar .burger.is-active .burger-line:nth-child(1), .navbar .burger.is-active .burger-line:nth-child(4) {
  top: 1.25rem;
  width: 0%;
  left: 50%;
}
.navbar .burger.is-active .burger-line:nth-child(2) {
  transform: rotate(45deg);
}
.navbar .burger.is-active .burger-line:nth-child(3) {
  transform: rotate(-45deg);
}
.navbar .menu-inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}
.navbar .menu-link {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: inherit;
  border: none;
  color: var(--color-white);
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
  transition: all 0.35s ease-in-out;
}

.navbar.min {background:#fff; filter:drop-shadow(rgba(1, 30, 60, 0.1) 0px 10px 25px);}
.navbar.min .menu-link {color:#111;}


@media only screen and (max-width: 768px) {
  .navbar .burger-line {background:var(--color-white);}
  .navbar.min .burger-line {background:var(--color-black);}
  .navbar .burger {
    display: block;
    opacity: 1;
    visibility: visible;
  }
  .navbar .menu {
    width: 100%;
    max-height: 0rem;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: all 0.35s ease;
  }
  .navbar .menu.is-active {
    opacity: 1;
    visibility: visible;
  }
  .navbar .menu-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 0;
  }
  .brand {font-size:1.2rem;}
  .brand img {height:30px;}
}