@charset "UTF-8";nav{background:#333;color:#fff;text-align:center}nav ul{list-style:none;display:flex;justify-content:center}nav ul ul{display:block}nav ul li{position:relative}nav ul li a{display:block;text-decoration:none;color:#1c283c;padding:20px 35px;transition:all .3s}nav ul li li a{padding:10px 35px}nav ul li a:hover{color:#fff}nav ul li.has-child:before{content:'';position:absolute;left:15px;top:25px;width:6px;height:6px;border-top:2px solid #999;border-right:2px solid #999;transform:rotate(135deg)}nav ul ul li.has-child:before{content:'';position:absolute;left:6px;top:17px;width:6px;height:6px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg)}nav li.has-child ul{position:absolute;left:0;top:62px;z-index:4;background:#28bfe7;width:180px;visibility:hidden;opacity:0;transition:all .3s}nav li.has-child:hover>ul,nav li.has-child ul li:hover>ul,nav li.has-child:active>ul,nav li.has-child ul li:active>ul{visibility:visible;opacity:1}nav li.has-child ul li a{color:#fff;border-bottom:solid 1px rgba(255,255,255,.6)}nav li.has-child ul li:last-child a{border-bottom:none}nav li.has-child ul li a:hover,nav li.has-child ul li a:active{background:#3577ca}nav li.has-child ul ul{top:0;left:182px;background:#66adf5}nav li.has-child ul ul li a:hover,nav li.has-child ul ul li a:active{background:#448ed3}@media screen and (max-width:768px){nav{padding:0}nav ul{display:block}nav li.has-child ul,nav li.has-child ul ul{position:relative;left:0;top:0;width:100%;visibility:visible;opacity:1;display:none;transition:none}nav ul li a{border-bottom:1px dotted #ccc}nav ul li.has-child:before{left:20px}nav ul ul li.has-child:before{transform:rotate(135deg);left:20px}nav ul li.has-child.active:before{transform:rotate(-45deg)}}