.nav{
    float: right;
    text-align: right;
    position: relative;
    z-index: 9;}
.nav>ul{
    font-size: 0;
    margin-top: 18px;}
.nav>ul>li{
    display: inline-block;
    width: 100px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    padding-bottom: 10px;}

.nav>ul>.login{
    width: 85px;
    display: inline-block;
    vertical-align: baseline;}
.nav>ul>li>a{
    font-size: 16px;
    line-height: 28px;
    color: #fff;}
.login>a{
    display: block;
    font-size: 16px;
    line-height: 25px;
    color: #fff;
    text-align: center;
    background: rgba(255,255,255,.33);
    border-radius: 50px;}
.nav .lv2{
    position: absolute;
    left: -50%;
    right: 0;
    top: 100%;
    background: #ad6359;
    padding: 10px 0;
    display: none;
    z-index: 99;
    width: 140%;
    transform: translateX(20%);}
.nav .lv2:before{
    content: '';
    position: absolute;
    top: -5px;
    border-style: solid;
    border-width: 0 6px 6px 6px;
    left: 50%;
    transform: translateX(-50%);
    border-color: transparent transparent #ad6359 transparent;}
.nav .lv2>li{
    font-size: 14px;
    line-height: 36px;
    color: #fff;
    transition: all .3s;
    position: relative;}
.nav .lv2>li:hover{
    background: #b6756c;}
.nav .lv2>li .lv3{
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
    background: #b6756c;
    padding: 5px 0;
    display: none;
    z-index: 99;}
.nav>ul>li:nth-child(7) .lv2>li .lv3{
    left: auto;
    right: 100%;}
.nav .lv2>li:hover .lv3{
    display: block;}
.nav .lv2>li .lv3>li>a{
    display: block;
    font-size: 14px;
    color: #fff;
    line-height: 36px;}
.nav .lv2>li .lv3>li:hover>a{
    color: #eddcda;}