/* a {color:#666; text-decoration:none;}
ul,li {list-style:none;}
button {border:none; background:none;}
img {max-width:100%;} */

header {position:relative; height:50px; box-sizing:border-box; font-size:0; background:#0555ac; }
header div.content { border-bottom:1px solid #e6e6e6;}
header div.content > div.container {position:relative;}
header h1 {float:left; height:50px;}
header h1 > a { display:inline-block; width:130px; height:100%; overflow:hidden; font-size:0; text-indent:-9999px; background-repeat:no-repeat; background-position:center; background-size:contain; vertical-align:middle;}
header div.box_btn {float:right; width:calc(100% - 130px); text-align:right }
header div.box_btn > button { height:50px; padding:0 10px; border:none; vertical-align:middle; font-size:30px; }
header div.box_btn > button + button {margin-left:17px; }
header div.box_btn > button.push {background:url(/common/images/ico_alert.png)no-repeat center; background-size:contain; }
header div.box_btn > button.slide {background:url(/common/images/ico_menu0.png)no-repeat center; background-size:contain; }
header div.headerWeather {text-align:right; margin-right: 8px; width:64px; font-size: 12px; color: #fff; display:inline-flex;}
header div.temperature {display: flex; justify-content: space-between; align-items: center;}
header div.temperature > i {font-size : 12px;}
header div.date {font-size:14px;}

nav.navigation {position:relative; border-bottom:1px solid #ddd; }
nav.navigation div.container {overflow:hidden; padding: 0; background: #fff;}
nav.navigation ul {width: fit-content; box-sizing: border-box;}
nav.navigation ul li {position:relative; display:inline-block; width:auto; }
nav.navigation ul li a {display:block; padding:0 15px; font-weight:bold; text-align:center; overflow:hidden; color:#9f9f9f; }
nav.navigation ul li a span {box-sizing:border-box; position:relative; width:100%; display:block; padding:12px 0; height:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:13px;}
nav.navigation ul li.selected a {color:#1a1a1a; }
nav.navigation ul li.selected a span:after {content:''; position:absolute; bottom:0px; left:50%; transform:translateX(-50%); display:block; width:100%; height:2px; background:#0555ac; }

.swiper,
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  Fix of Webkit flickering
  z-index: 1;
  display: block;
  box-sizing: border-box;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.side-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background-color: #f4f4f4;
    /* box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5); */
    overflow-y: auto;
    transition: right 0.3s ease;
}

.side-menu.show {
    right: 0;
}

.sub-navigation-context {
    /* position: relative; */
    display: block;
    width: 100%;
    padding: 5px 0;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    margin: 0px;
    -webkit-font-smoothing: antialiased;
}

.sub-navigation-context > div.container {padding: 0;}

.disable {
    /* height: 0px;
    visibility: hidden;
    padding: 0px;
    border-bottom: 0px; */
    
    display: none;
}

.sub-navigation-context .container .sub-navigation {
	position: relative;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
}

.sub-navigation-context .container .sub-navigation .sub-navigation-content-wrapper {
	transition-duration: 0ms;
    transform: translate3d(0, 0, 0);
    width: 100%;
    font-size: 0;
    background: #f5f5f5;
    transition-timing-function: ease-out;
    margin: 0 auto; padding: 0 10px;
    box-sizing: border-box;
        
    overflow-x: auto;
    white-space: nowrap;
    cursor: grab;
    -ms-overflow-style: none; /* IE 및 Edge 스크롤바 숨기기 */
    scrollbar-width: none; /* Firefox 스크롤바 숨기기 */
}

.sub-navigation-context .container .sub-navigation .sub-navigation-content-wrapper::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera 스크롤바 숨기기 */
}

.sub-navigation-context .container .sub-navigation .sub-navigation-content-wrapper li.sub-navigation-content {
	margin-right: 10px;
	box-sizing: border-box;
    position: relative;
    display: inline-block;
    width: auto;
    border: 1px solid #ddd;
    border-radius: 25px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
}
.sub-navigation-context .container .sub-navigation .sub-navigation-content-wrapper li.sub-navigation-content:last-child {margin-right: 0;}

.sub-navigation-context .container .sub-navigation .sub-navigation-content-wrapper li.sub-navigation-content a {
	box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 5px 15px;
    text-align: center;
    font-size: 12px;
    word-break: keep-all;
    color: #000;
}

li.active {
    background: #00a95c !important;
    /* transition: 0.3s; */
} 

li.active a {
    color: #fff !important;
    /* transition: 0.3s; */
}

@media (max-width: 768px) { /* 모바일 기기 최대 가로 사이즈 */
    .sub-navigation-context .container .sub-navigation .sub-navigation-content-wrapper {
	    transform: translate3d(0px, 0px, 0px);
	}
}

@media (max-width: 280px) {
	header div.headerWeather {display:none;}
}