.yl_head{position: fixed;top: 0;left: 0;right: 0;z-index: 10;background-color: #fff;height: 100px;}
.yl_head_c{display: flex;justify-content: space-between;align-items: center;height: 100%;}
.yl_head_r{display: flex;align-items: center;}
.yl_head_ri{text-align: center;position: relative;height: 100%;display: flex;align-items: center;margin-left: 40px;}
.yl_head_ri>a{color: #808080;font-size: 16px;line-height: 100px;display: inline-block;height: 100px;width: 100%;padding: 0 10px;}
.yl_head_ri:last-child>a{border-right: 0;}
.yl_head_ri>span{position: absolute;bottom: 0 ;left: 50%;transform: translateX(-50%);height: 4px;background-color: var(--base);transition: .3s;opacity: 0;width: 70px;}
.yl_head_ri:hover>a{color: var(--base);}
.yl_head_a a{color: var(--base);}
.yl_head_a span{opacity: 1;}
.yl_head_exc{position: absolute;top: 100%;left: -30px;right: -30px;z-index: 2;background-color: #fff;display: none;overflow: hidden;box-shadow: 0 1px 12px 1px #eee;}
.yl_head_exc>a{color: #666;font-size: 13px;display: block;text-align: center;height: 50px;line-height: 50px;transition: .3s;}
.yl_head_exc>a:hover{background-color: var(--base);color: #fff;}

.yl_foot{color: #fff;}
.yl_foot_t{background-color: #27292f;}
.yl_foot_tc{display: flex;justify-content: space-between;padding: 50px 0;}
.yl_foot_tl>p{margin-top: 30px;font-size: 16px;}
.yl_foot_tl>p>span{font-size: 26px;font-weight: bold;color: var(--base);}
.yl_foot_tm{display: flex;flex-wrap: wrap;align-items: center;border-left: 1px solid var(--base);border-right: 1px solid var(--base);padding: 0 20px;}
.yl_foot_tm>a{width: 50%;text-align: center;}
.yl_foot_tr{display: flex;flex-direction: column;justify-content: center;}
.yl_foot_tr>h1{font-size: 20px;margin-bottom: 20px;}
.yl_foot_tr>p{font-size: 14px;line-height: 2;}
.yl_foot_b{background-color: #000;}
.yl_foot_bc{display: flex;justify-content: space-between;height: 50px;align-items: center;font-size: 12px;}

.yl_title{text-align: center;}
.yl_title>h1{font-size: 24px;color: #333;}
.yl_title>span{display: inline-block;width: 40px;height: 5px;background-color: var(--base);margin: 26px 0 18px;}
.yl_title>p{font-size: 12px;color: #999;line-height: 2;}

.yl_cate{border-bottom: 1px solid #e7e7e7;height: 70px;}
.yl_cate_c{width: 1200px;margin: 0 auto;display: flex;}
.yl_cate_c>a{color: #636363;font-size: 16px;line-height: 69px;height: 69px;margin-right: 64px;cursor: pointer;white-space: nowrap;transition: .3s;}
.yl_cate_c>a:hover{color: var(--base);}
.yl_cate_c> .yl_cate_a{border-bottom: 2px solid var(--base);color: var(--base);}


@media screen and (max-width: 766px){
    .yl_head{height: 6rem;}
    .yl_head_c{width: 100%;height: 6rem;padding: 0 20px;}
    .yl_head_l>a>img{width: 4rem;}

    .yl_head_menu{width: 3rem;}
    .yl_head_menu>img{width: 100%;}

    .yl_head_r{position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: #fff;flex-direction: column;padding: 50px 0;z-index: 10000;transform: translateZ(100px);display: none;margin-right: 0;}
    .yl_head_r>i{position: absolute;top: 20px;right: 20px;font-size: 30px;font-weight: bold;font-style: normal;line-height: 1;color: #666;}
    .yl_head_ri{margin: 0;padding: 0;}
    .yl_head_ri>a{width: 100%;text-align: center;color: #999;height: 5rem;line-height: 5rem;margin: 0;font-size: 1.6rem;}
    .yl_head_a>a{color: var(--base);}
    .yl_head_ri{height: 6rem;}
    .yl_head_exc{display: none;}
    
    .yl_foot_tc{flex-direction: column;padding: 5rem 0;}
    .yl_foot_tl{}
    .yl_foot_tl>p{font-size: 1.6rem;line-height: 2;margin-top: 0;}
    .yl_foot_tl>img{width: 40vw;margin-bottom: 40px;}
    .yl_foot_tl>p>span{font-size: 2.6rem;}
    .yl_foot_bc{flex-direction: column;height: unset;padding: 2rem 0;}
    .yl_foot_bc>p{line-height: 2;text-align: center;}
    .yl_foot_bc>a{line-height: 2;}

    .yl_title>h1{font-size: 2.4rem;}
    .yl_title>p{font-size: 1.2rem;}

    .yl_cate{height: 7rem;overflow-x: auto;}
    .yl_cate::-webkit-scrollbar{display: none;}   
    .yl_cate_c{width: 150vw;padding: 0 1.5rem;}
    .yl_cate_c>a{height: 7rem;line-height: 7rem;font-size: 1.6rem;margin-right: 5rem;}
}