@charset "UTF-8";
/* Future Smile Nav CSS Document */

/*nav*/
nav {
	background: white;
	padding: 2vh 0;
}
.navigation {
	display: flex;
	background:transparent !important;
	justify-content: center;
	list-style-type: none;
}
.navigation > li {
	position: relative;
}
.navigation > li ~ li {
	margin-left: 1vw;
}
.navigation ul li {
	border-bottom: solid 1px ivory;
}
.navigation ul li:last-child {
	border-bottom: none;
}
.navigation > li > a {
	border-radius: 10px 10px 0 0;
	font-size: calc(1.2rem + 0.6vw);
	color: var(--main-grey);
	padding: 4px 0.5vw;
}
.navigation > li a:hover {
	background: var(--main-green) !important;
	color: white !important;
}

nav ul ul {
	display: none;
	
}

nav ul li:hover>ul {
	display: block;
}


nav ul {
	z-index: 20;
	background: var(--main-logo-color);
 	padding: 0 20px;
	/*圆角边框*/
	list-style: none;
	/*所有的列表属性*/
	position: relative;
	/*相对定位ul的位置*/
	display: inline-table;
	/*内敛表格*/
}
.navigation ul {
	width:140px;
	text-align: center;
	transition: max-height 800ms ease-in-out;
}

nav ul:after {
	/* css after选择器 */
	content: "";
	clear: both;
	display: block;
}

nav ul li {
	-webkit-transition: all 1s;
	/*Firefox4*/
	-moz-transition: all 1s;
	/*Safari and Chrome*/
	-o-transition: all 1s;
	/* Opera*/
	transition: all 1s;
	float: left;
	/*使竖向菜单变为横向菜单*/
}
nav > ul > li:hover {
	 border-radius: 10px 10px 0 0;
}
nav ul li:hover {
	 background: var(--main-green);
}

nav ul li:hover a {
	color: #fff;
}
.navigation ul li a {
	font-size: calc(1.2rem + 0.3vw);
	font-weight: 300;
	color: ivory;
	padding: 8px 0;
	display: block;
	border-radius: 0;
}
.navigation ul li a:hover {
	background: olivedrab;
	color: linen;
}

nav ul li a {
	display: block;
	/*使a标签变成块状*/
	padding: 25px 40px;
	/*a标签左右的距离*/
	color: #757575;
	text-decoration: none;
	/*文本的属性*/
}


nav ul ul {
	border-radius: 0px;
	padding: 0;
	position: absolute;
	/*定义子ul的位置*/
	top: 100%;
}

nav ul ul li {
	float: none;
	/*清楚子ul里面li标签的浮动*/
	border-top: 1px solid #6b727c;
	/*下拉菜单中的分割线*/
	border-bottom: 1px solid #575f6a;
	position: relative;
}

nav ul ul li a {
	padding: 15px 40px;
	color: #fff;
}

nav ul ul li a:hover {
	background: #4b545f;
}

nav ul ul ul {
	position: absolute;
	left: 100%;
	top: -1px;
}



.toggle-label, .toggle {
	display: none;
}

@media (max-width: 576px) {

    nav {
        background: var(--main-orange);
        padding: 6px 0;
        position: relative;
        height: 45px;

    }

    .toggle-label {
        display: block;
        cursor: pointer;
        height: 40px;
        width: 45px;
        padding: 15px 2px 0 15px;
    }

    .toggle-label span,
    .toggle-label span::before,
    .toggle-label span::after {
        display: block;
        width: 4em;
        height: 4px;
        border-radius: 2px;
        background: white;
        position: relative;
    }

    .toggle-label span::before {
        content: '';
        position: absolute;
        bottom: 10px;
    }

    .toggle-label span::after {
        content: '';
        position: absolute;
        top: 10px;
    }

    .navigation {
        max-height: 0;
        width: 160px;
        flex-flow: column;
        position: absolute;
        top: 45px;
        left: 0;
        z-index: 99;
        overflow: hidden;
        text-align: center;
        transition: max-height 800ms ease-in;
    }

    input:checked+.navigation {
        max-height: 500px;
    }

    .navigation li {
        padding: 0;
    }

    .navigation li~li {
        margin-left: 0;
    }

    .navigation>li a {
        display: block;
        color: white;
        font-weight: 400;
        padding: 8px 0;
        background: var(--main-green);
        border-bottom: solid 1px white;
        border-radius: 0;
    }

    .navigation>li a:hover {
        background: var(--main-grey);
    }

    .navigation ul {
        position: static;
        box-shadow: none;
        padding: 0;
        width: 100%;
    }

    .navigation ul li a {
        background: var(--main-blue);
        color: yellow;
        border-bottom: none;
    }

    .navigation ul li a:hover {
        color: white;
    }


}