@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);
h1 {
    font: 400 40px 'pt sans', sans-serif;
    text-align: center;
}


/** 二级菜单导航 **/

.phonelist a {
    text-decoration: none;
}

.phonelist {
    z-index: 99;
    /**控制div在最底层 **/
    height: 70px;
    background: rgb(255, 255, 255);
    position: relative;
}

.phonelist>ul {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}

.phonelist>ul>li>ul {
    position: absolute;
    left: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}

.phonelist>ul>li:hover>ul li a {
    opacity: 1;
    height: 50px;
    transition: all .3s linear;
    -o-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
}


/***控制ul和li滑动的颜色 下划线的颜色 **/

.phonelist>ul li a:hover {
    font-family: PingFangSC-Medium;
    font-size: 18px;
    /**  16px -18px 控制字体逐渐变大 二级导航放大字体颜色 移动蓝色 **/
    color: #2749e0;
    letter-spacing: 0;
    padding-bottom: 2px;
    transform: scale(1.2);
    /**transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。 **/
    /**.CSS3的transform:scale()可以实现按比例放大或者缩小功能
    .CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。
    这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 **/
    transition: all 0.6s;
    /**ransition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。 **/
    border-bottom: 2px solid #ff5b2c;
    /** 二级导航下划线的颜色 **/
}

.phonelist>ul>li>ul a {
    display: block;
    color: rgb(255, 255, 255);
    width: 150px;
    line-height: 50px !important;
    font: 700 16px 'pt sans', sans-serif;
    /**  16px -18px 控制字体逐渐变大 **/
    background: #f8896a;
    border-bottom: 0px solid rgb(92, 66, 243);
    text-align: center;
    padding: 0 0px;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all .3s linear .2s;
    -o-transition: all .3s linear .2s;
    -moz-transition: all .3s linear .2s;
    -webkit-transition: all .3s linear .2s;
}

.phonelist>ul>li {
    float: left;
    position: relative;
}

.phonelist>ul>li>a {
    padding: 0 20px;
    color: rgb(0, 0, 0);
    display: block;
    line-height: 35px !important;
    /** 控制上边距 **/
    font: 400 15px 'PT Sans', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
}

.lamp span {
    display: block;
    height: 4px;
    background: #ee6666;
    position: relative;
}

.lamp span:after {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(238, 102, 102, 0);
    border-bottom-color: #ee6666;
    border-width: 4px;
    margin-left: -4px;
}

.lamp {
    position: absolute !important;
    height: 4px;
    top: 20px;
    background: rgb(252, 251, 251);
    transition: all .3s linear;
    -o-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
}

.selected.active>a,
.active>a {
    transition: all .3s linear;
    -o-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    color: rgb(3, 3, 3);
}

.credit {
    text-align: center;
    margin: 20px 0;
}

.blog-link {
    color: rgb(14, 13, 13);
    text-decoration: none;
    background: #eee;
    background-size: 40px;
    line-height: 50px;
    display: inline-block;
    padding: 0 10px;
    border-radius: 4px;
    border-bottom: 3px solid #ddd;
    color: #333;
    font-family: 'open sans', sans-serif;
    margin: 10px;
}

.dgithub {
    color: #fff;
    text-decoration: none;
    background: #eee url('https://lh6.googleusercontent.com/-MOW-T0KLZJI/UyR6EIggYkI/AAAAAAAAEbM/el92Uoxz-aI/s50-no/GitHub-Mark.png') no-repeat;
    background-size: 40px;
    line-height: 50px;
    display: inline-block;
    padding: 0 10px 0 50px;
    background-position: 5px;
    border-radius: 4px;
    border-bottom: 3px solid #ddd;
    color: #333;
    font-family: 'open sans', sans-serif;
    margin: 10px;
}