.ms_head{position: fixed;top: 0;left: 0;right: 0;z-index: 10;height: 120px;transition: .3s;}
.ms_head_c{display: flex;justify-content: space-between;align-items: center;height: 100%;}
.ms_head_l>a>img{height: 40px;}
.ms_head_r{display: flex;align-items: center;}
.ms_head_ri{text-align: center;position: relative;height: 100%;display: flex;align-items: center;margin-left: 30px;}
.ms_head_ri>a{color: #fff;font-size: 16px;line-height: 62px;display: inline-block;height: 62px;width: 100%;font-weight: 400;}
.ms_head_ri:last-child>a{border-right: 0;}
.ms_head_ri>span{position: absolute;bottom: 0 ;left: 50%;transform: translateX(-50%);height: 2px;background-color: var(--base);transition: .3s;opacity: 0;width: 70px;}
.ms_head_ri:hover>a{color: var(--base);}
.ms_head_a>a{color: var(--base);border-bottom: 3px solid var(--base);}
.ms_head_a span{opacity: 1;}
.ms_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;}
.ms_head_exc>a{color: #666;font-size: 13px;display: block;text-align: center;height: 50px;line-height: 50px;transition: .3s;}
.ms_head_exc>a:hover{background-color: var(--base);color: #fff;}
.ms_head_la{height: 40px;width: 84px;border-radius: 10px;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.ms_head_la>span{margin: 0 10px;}
.ms_head_la>a{color: #fff;}
.ms_head_la>.ms_head_laa{color: var(--base);font-weight: bold;}

.ms_head_search{position: relative;padding: 10px 0;}
.ms_head_search>img{padding: 10px;}
.ms_head_search>img:last-of-type{display: none;}
.ms_head_sear{padding: 20px 30px;width: 316px;position: absolute;display: none;left: 50%;top: 100%;transform: translateX(-50%);width: auto;box-shadow: 0 0 20px 1px #efefef;background-color: #fff;border-radius: 10px;}
.ms_head_se{border-bottom: 1px solid #bbb;display: flex;justify-content: space-between;align-items: center;}
.ms_head_se>input{height: 50px;color: #333;}
.ms_head_se>img{cursor: pointer;}

.ms_head_white{background-color: #fff;box-shadow: 0 0 10px #ddd;}
.ms_head_white .ms_head_ri>a{color: #595959;}
.ms_head_white .ms_head_a>a{color: var(--base);}
.ms_head_white .ms_head_ri:hover>a{color: var(--base);}
.ms_head_white .ms_head_la>a{color: #595959;}
.ms_head_white .ms_head_la>.ms_head_laa{color: var(--base);}
.ms_head_white .ms_head_search>img:first-of-type{display: none;}
.ms_head_white .ms_head_search>img:last-of-type{display: inline;}

.ms_head_prod{background-color: #fff;position: absolute;top: 100%;width: 520px;display: none;box-shadow: 0 0 10px #ddd;}
.ms_head_pc{display: flex;justify-content: space-between;padding: 40px;}
.ms_head_pl>a{display: block;line-height: 3;transition: .3s;text-align: left;}
.ms_head_pl>a:hover{color: var(--base);}
.ms_head_pr{height: 200px;width: 300px;}
.ms_head_pr>img{width: 100%;height: 100%;object-fit: cover;}

.ms_foot{background-color: #788991;}
.ms_foot_c{padding: 50px 0;}
.ms_foot_t{display: flex;justify-content: space-between;align-items: flex-end;padding-bottom: 30px;border-bottom: 1px solid #999;}
.ms_foot_tl>img{}
.ms_foot_tr>a{display: inline-block;margin-left: 10px;}

.ms_foot_m{display: flex;justify-content: space-between;padding: 40px 0;}
.ms_foot_m>span{display: block;height: 150px;width: 0;border-left: 1px solid #ababab;}
.ms_foot_ml{display: flex;justify-content: space-between;width: 54%;}
.ms_foot_ml>div>h1{font-size: 18px;color: #f7f7f7;margin-bottom: 20px;}
.ms_foot_ml>div>a{font-size: 14px;color: #e8e8e8;line-height: 2.5;display: block;}
.ms_foot_ml>div>a:hover{color: var(--base);}
.ms_foot_mr{width: 34%;display: flex;justify-content: space-between;background: url('/images/hf/13.png') no-repeat center;}
.ms_foot_mr>div:first-child{margin-right: 20px;}
.ms_foot_mr>div>p{line-height: 2;color: #fff;font-size: 14px;}
.ms_foot_mr>div>span{color: #fff;display: block;text-align: center;line-height: 3;}

.ms_foot_b{margin-top: 30px;display: flex;justify-content: space-between;align-items: center;color: #fff;}
.ms_foot_bl>p{line-height: 2;font-size: 14px;}
.ms_foot_br>a{margin-left: 20px;}

.ms_aside{position: fixed;right: 0;top: 50vh;}
.ms_aside_i{background-color: var(--base);width: 72px;height: 78px;display: flex;flex-direction: column;align-items: center;position: relative;justify-content: center;cursor: pointer;transition: .3s;}
.ms_aside_i>span{position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 24px;height: 1px;background-color: #fff;}
.ms_aside_i>img{}
.ms_aside_i>p{color: #fff;margin-top: 10px;font-size: 12px;}
.ms_aside_i:hover{background-color: #008874;}
.ms_aside_r{position: absolute;right: calc(100% + 24px);display: none;width: 156px;padding: 12px;background-color: #fff;box-shadow: 0 0 10px -3px var(--base);text-align: center;font-size: 15px;color: #6a6a6a;font-weight: bold;}
.ms_aside_r>img{width: 100%;}
.ms_aside_i:hover >.ms_aside_r{display: block;}

.ms_nav{background-color: #fff;}
.ms_nav_c{font-size: 16px;height: 63px;display: flex;align-items: center;width: var(--lg);margin: 0 auto;}
.ms_nav_c>span{margin: 0 10px;}

.ms_cate{padding: 50px 0;}
.ms_cate_c{margin: 0 auto;display: flex;justify-content: center;}
.ms_cate_c>a{color: #636363;font-size: 16px;line-height: 50px;height: 50px;cursor: pointer;white-space: nowrap;transition: .3s;padding: 0 50px;background-color: #fff;margin-right: 15px;}
.ms_cate_c>a:last-child{margin-right: 0;}
.ms_cate_c> .ms_cate_a{background-color: var(--base);color: #fff;}

.ms_tact{background-color: #fff;}
.ms_tact_c{padding: 100px 0;text-align: center;}
.ms_tact_c>h1{font-size: 30px;color: #666;font-weight: bold;}
.ms_tact_c>span{width: 50px;height: 5px;border-radius: 3px;background-color: var(--base);display: inline-block;margin-top: 30px;}
.ms_form{display: flex;justify-content: space-between;margin-top: 42px;}
.ms_form>input{width: 340px;height: 60px;border: 2px solid #e9e9e9;border-radius: 5px;padding: 0 20px;}
.ms_form>a{height: 60px;padding: 0 46px;border-radius: 5px;border: 1px solid var(--base);color: var(--base);line-height: 60px;font-size: 18px;transition: .3s;cursor: pointer;}
.ms_form>button{opacity: 0;}
.ms_form>a:hover{background-color: var(--base);color: #fff;}



@media screen and (max-width: 766px){
    .ms_head{height: 6rem;}
    .ms_head_c{width: 100%;height: 6rem;padding: 0 20px;}
    .ms_head_l>a>img{height: 3rem;}

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

    .ms_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;}
    .ms_head_r>i{position: absolute;top: 20px;right: 20px;font-size: 30px;font-weight: bold;font-style: normal;line-height: 1;color: #666;}
    .ms_head_ri{margin: 0;padding: 0;}
    .ms_head_ri>a{width: 100%;text-align: center;color: #999;height: 5rem;line-height: 5rem;margin: 0;font-size: 1.6rem;}
    .ms_head_a>a{color: var(--base);border: 0;}
    .ms_head_ri{height: 6rem;}
    .ms_head_exc{display: none;}
    
    .ms_foot_t{flex-direction: column;align-items: center;}
    .ms_foot_m{padding: 2rem 0;}
    .ms_foot_mr{width: 100%;flex-direction: column;}
    .ms_foot_mr>div:first-child{margin-right: 0;}
    .ms_foot_mr>div:last-child{align-self: center;margin-top: 2rem;}
    
    .ms_foot_b{flex-direction: column;margin-top: 2rem;}
    .ms_foot_b>p{line-height: 2;text-align: center;}

    .ms_nav{overflow: auto;}
    .ms_nav::-webkit-scrollbar{display: none;}
    .ms_nav_c{width: 150vw;padding: 0 1.5rem;height: 6.5rem;font-size: 1.6rem;}
    .ms_nav_c>a{white-space: nowrap;}

    .ms_cate{padding: 0;background-color: #fff;overflow: auto;margin-bottom: 5rem;}
    .ms_cate::-webkit-scrollbar{display: none;}
    .ms_cate_c{width: 150vw;padding: 0 1.5rem;justify-content: flex-start;}
    .ms_cate_c>a{background-color: unset;height: 8rem;line-height: 8rem;margin-right: 1rem;padding: 0 2rem;}
    .ms_cate_c> .ms_cate_a{color: var(--base);background-color: unset;border-bottom: 2px solid var(--base);}

    .ms_tact_c{padding: 6rem 0;}
    .ms_tact_c>h1{font-size: 2.6rem;}
    .ms_tact_c>span{margin-top: 2rem;}
    .ms_form{margin-top: 4rem;flex-direction: column;}
    .ms_form>input{width: 100%;margin-bottom: 2rem;height: 5rem;padding: 0 2rem;}
    .ms_form>a{height: 5rem;font-size: 1.6rem;line-height: 5rem;}
}