header {
    background: #ffffff80;
    display: flex;
    height: 140px;
    justify-content: space-between;
    padding: 70px 4.4271vw 20px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99
}
.logo { height: 40px; padding: 0 30px 0 0}
header .p1,header .p2 { align-items: center; display: flex}
header .name { font: 500 18px var(--font01)}

/*smaller*/
header.smaller { background: #fff; height: 80px; padding: 20px 4.4271vw 20px; transition:all .3s}

/*menu*/
.menu { display: flex; padding: 0 0 0 100px}
.menu a { display: block; padding: 7px 15px; position: relative}
.menu .pa:after { content: ""; display: block; position: absolute; left: 0; bottom: 0;     transition: .3s ease; width: 0 }
.menu .pa:hover:after { border-top: 1px solid var(--MC01); width: 100% }
.menu .pa i { font-size: 10px}
.menu .sub { display: none}
.menu li:hover .sub { display: block; position: absolute; box-shadow: 0 5px 5px #0002;}
.menu .sub a { background: var(--Cw);padding: 12px 20px}
.menu .sub a:hover,.box.ln ul a:hover { background: var(--MC03); transition: .5s}

header .p2 .box { align-items: center; display: flex; padding: 0 20px 0 0}
header .p2 .box a { align-items: center; display: flex}
header .p2 .box img { padding: 0 5px 0 0; width: 28px}
.box.ln { cursor: pointer; position: relative}
.box.ln ul { box-shadow: -1px 5px 10px #0002; display: none; padding: 10px 0 0; position: absolute; top: 100%}
.box.ln:hover ul { display: block}
.box.ln ul a { background: var(--Cw); display: block; padding: 5px 20px}


.menuB { display: flex; align-items: center}
.menuB p { padding: 0 10px 0 0}
.menuB .p1,.menuB .p2,.menuB .p3 { border-top: 2px solid; display: block; width: 28px}
.menuB .p1,.menuB .p2 { margin: 0 0 6px}

/*Snav*/
/*.toggle-menu { display: none}*/
.Snav { background: #0009; height: 100vh; opacity: 0; position: fixed; top:0; transition: opacity 0.5s, visibility 0s linear 0.5s; visibility: hidden; width: 100vw; z-index: 100}
.Snav:target { visibility: visible; opacity: 1;-webkit-transition-delay: 0s; transition-delay: 0s;}
.close-menu {
  background: rgba(0, 0, 0, 0.7);
  cursor: default;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  /* "delay" the visibility transition */
  -webkit-transition: opacity 0.5s, visibility 0s linear 0.5s;
  transition: opacity 0.5s, visibility 0s linear 0.5s;
}
.Snav:target + .close-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.SnC {
    background: var(--Cw);
    height: 100vh;
    overflow: auto;
    position: absolute;
    top: 0;
    right: 0;
    width: 450px;
}
.SnC .Tbox {
    align-items: center;
    background: var(--Cw);
    display: flex;
    justify-content: space-between;
    padding: 30px;    
    position: sticky;
    top: 0
}
.SnC .Tbox .p1 { display: flex}
.SnC .Tbox .p1 img { margin: 0 10px 0 0; width: 18px}
.SnC .Tbox .box { align-items: center; display: flex; padding: 0 15px 0 0}
.SnC .Tbox .box a { align-items: center; display: flex}
.x { cursor: pointer}
.x i { display: block; height: 25px; margin: 0 auto; position: relative; width: 25px; transform: rotate(45deg);}
.x i:before,.x i:after { content: ""; display: block; position: absolute}
.x i:before { background: var(--Cb); height: 1px; top: 50%; width: 100%}
.x i:after { background: var(--Cb); height: 100%; left: 50%; width: 1px}
.x:hover i { transform: rotate(315deg); transition: .3s}
nav.SnC ul a {
    border-bottom: 1px solid #eee;
    display: block;
    padding: 10px 30px
}
.SnC ul a:hover { background: var(--MC03); transition: .3s}
.SnC .sec ul { display: none}
.SnC .sec:hover ul { display: block}
.SnC .sec ul a { padding: 10px 30px 10px 50px}
.SnC .sec i { font-size: 12px}    

/*submenu*/
.subM { background: var(--MC03); display: flex; gap: 30px; text-align: center}
.subM.t2 { background: var(--Cw)}
.subM a {
    align-content: center;
    background: var(--Cw);
    box-shadow: -1px 5px 10px #0002;
    flex-wrap: wrap;
    height: 150px;
    justify-content: center;
    margin: 0 0 20px;
    width: calc((100% - 240px)/9)
}
.subM a:hover { background: var(--MC02); transform: scale(1.1); transition: .3s}
.subM .active { border: 1px solid #77909f}
.subM .active:hover { background: var(--Cw); transform: none}
.subM .flash { animation: flash 3s linear infinite; background: var(--MC02)}
@keyframes flash {
    0% { background: var(--MC02)}
    50% { background: var(--MC03)}
    100% { background: var(--MC02)}
}
.subM a img { height: 51px; width: 51px}
.subM a p { padding: 20px 0 0; width: 100%}

@media screen and (max-width: 1300px){
    header { height: 80px; padding: 15px 4.4271vw 20px}
    .menu { display: none}
    .subM { gap: 10px}
    .subM a { height: 120px; width: calc((100% - 80px)/9)}
     
}
@media screen and (max-width: 991px){
    header .p2 .box { display: none}
    .subM { flex-wrap: wrap}
    .subM a { height: 120px; margin: 0; width: calc((100% - 40px)/5)}   
    
}
@media screen and (max-width: 768px){
    header { height: auto; padding: 15px}
    header.smaller { height: auto; padding: 15px}
    .logo { height: auto; padding: 0 15px 0 0; max-width: 165px}
    header .name { font-size: 13px}
    .SnC { width: 100%}
    .search .p01 .sw100 { width: 100%}
    .subM a { height: 100px; width: calc((100% - 20px)/3)}
    .subM a p { padding: 10px 0 0}
    
}
@media screen and (max-width: 640px){
    footer { font-size: 13px}
    footer .L { flex-wrap: wrap}
    footer .L .p3 { padding: 20px 0; width: 100%}
}