@charset "UTF-8";

/* header menu*/
.header-container {
    background: space;
    height: 180px;
}

.header {
    position: relative;
    background: white;
    padding-top: 10px;
    z-index: 10;
    box-shadow: 0px -2px 23px #b0b0b0;
}

.picture-and-logo {
    display: inline-block;
    width: 30%;
    vertical-align: middle;
}

.ten-aniv-icon {
    width: 16%;
    margin-left: 10px;
}

.tradeline-logo {
    display: inline-block;
    position: relative;
    bottom: 28px;
    width: 78%;
    vertical-align: middle;
}

.tradeline-logo img {
    width: 100%;
}

.header-menu {
    display: block;
    width: 80%;
    margin: 0px auto;
    text-align: center;
}

.header-mo {
    display: inline-block;
    width: 15%;
    height: 40px;
    vertical-align: top;
    cursor: pointer;
    border-radius: 5px;
}

.header-mo .changed-value {
    opacity: 0;
    z-index: 1;
}

.header-mo span {
    display: block;
    margin-top: 10px;
}

.header-menu-sepalate-line {
    display: inline-block;
    height: 40px;
    border-right: 1px solid #c5c4c4;
    margin-left: 5px;
}

.header-mo.mouse-over {
    background: rgb(255, 225, 225);
    transition: 1s;
}

.header-description-box {
    display: inline-block;
    width: 30%;
    vertical-align: top;
    margin-left: 10px;
}

.header-main-imgae {
    margin-left: 50px;
}

/* header sub menu*/
.header-submenu {
    padding-top: 30px;
    display: inline-block;
    height: 0px;
    width: 100%;
    background-color: rgb(255, 225, 225);
    position: relative;
    bottom: 50px;
    transition: 1s;
    border-radius: 5px;
    z-index: 1;
    opacity: 0;
    padding: 5px;
}

.header-submenu.active {
    height: 170px;
    bottom: -20px;
    opacity: 1;
}

.header-submenu div {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
    cursor: pointer;
    transform: 1s;
}

.header-submenu div.active {
    background-color: white;
}

#active-sub-menu {
    margin: auto 10px;
}

.sbmenu-item {
    display: inline-block;
    margin: 20px 50px;
    font-weight: bold;
}