/* 这里采用 媒体查询，里面的含有数值的尽量写变量方便控制和查找 */
:root{
    --header-background:240 240 240;
    --header-logo-width:140px;
    --header-logo-opacity:1;
    --header-text:26 26 26;
    --shadow: 0 5px 15px rgb(var(--text-primary) / 0.1);
    --shadow-md: 0 5px 30px rgb(var(--text-primary) / 0.1);
    --rounded-full:9999px;
    --header-grid-template:"logo main-nav secondary-nav" / minmax(0, 1fr) fit-content(70%) minmax(0, 1fr);
    --main-color:7 145 177;
    --main-inferior-color:255 183 74;
    --main-black:52 52 52;
    --main-bold:500;
    --main-bold-secondary:600;
    --cart-input-heihgt:50px;
    --main-button-hover:32 184 219;
    --header-backgournd:36 36 36;
}

/* 类明明采用 block__el__mod 的方式命名*/
/* 全局工具使用__来定义 */
.__sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
}

.__contents{
    display: contents;
}
.__relative{
    position: relative;
}
.__text-with-icon {
    gap: 0.75rem;
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.__text-with-icon>svg {
    flex-shrink: 0;
}
.icon {
    vertical-align: middle;
    display: block;
}
.tap-area{
    position: relative;
    display: flex;
    align-items: center;
}
.tap-area svg{
    margin-right:4px;
    color:#6B767A;
}
.tap-area:before {
    content: "";
    inset: calc(-1 * 0.625rem);
    position: absolute;
}
.tippy-box[data-theme='no-shadow-theme']{
    background-color: transparent !important; 
    box-shadow: none !important;
    border-radius: 0 !important;
}
.tippy-box[data-theme='drawer']{
    background-color: initial;
}
.tippy__not__show{
    display: none;
}
/* 全局 弹出遮罩 */
/* Overlay: 半透明 + 模糊 */
.tippy-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.tippy-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer 基础样式 */
.drawer__content {
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  z-index: 1001;
  transition: transform 260ms cubic-bezier(.22,.9,.3,1);
}

/* 屏幕大部分尺寸 */
/* 中心模式 */
.drawer__content.center {
    top: -14vh;
  top: -14dvh;
  left: 50%;
  width: 90vw;
  width: 90dvw;
  max-width: 600px;
  height: 60vh;
  height: 60dvh;
  transform: translate(-50%,-50%);
}

/* 左侧滑入 */
.drawer__content.left {
  top: 2vh;
  top: 2dvh;
  left: -80vw;
  left: -80dvw;
  width: 90vw;
   width: 90dvw;
  max-width: 500px;
  height: 90vh;
  height: 90dvh;
  /* transform: translateX(-100%); */
  transition: left 300ms ease;
}

/* 右侧滑入 */
.drawer__content.right {
  top: 2vh;
  top: 2dvh;
  right: 0;
  right: 0;
  width: 90vw;
  width: 90dvw;
  max-width: 700px;
  height: 90vh;
  height: 90dvh;
  transform: translateX(100%);
  transition: right 300ms ease;
}

/* 顶部滑入 */
.drawer__content.top {
  top: -50vh;
  top: -50dvh;
  left: 50%;
  width: 90vw;
  width: 90dvw;
  max-width: 600px;
  height: 50vh;
  height: 50dvh;
  /* transform: translate(-50%, -100%); */
    transition: top 300ms ease;
}

/* 底部滑入 */
.drawer__content.bottom {
  bottom: -50vh;
  bottom: -50dvh;
  left: 50%;
  width: 90vw;
  width: 90dvw;
  max-width: 600px;
  height: 50vh;
  height: 50dvh;
  /* transform: translate(-50%, 100%); */
    transition: bottom 300ms ease;
}

/* 显示状态动画 */
[data-state="visible"] .drawer__content.left { 
    /* transform: translateX(0);  */
    left: 0vw;
    left: 0dvw;
}
[data-state="visible"] .drawer__content.right {
     transform: translateX(0); 
     /* right: 0vw;
     right: 0dvw; */
}
[data-state="visible"] .drawer__content.top {
     /* transform: translate(-50%, 0);  */
     top: 0;
}
[data-state="visible"] .drawer__content.bottom { 
    /* transform: translate(-50%, 0);  */
    bottom: 0;
}
.drawer__content[data-state="visible"].center { transform: translate(-50%, -50%); }

/* 内部关闭按钮 */
.drawer__close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

/* body scroll lock */
html.tippy-drawer-open {
  overflow-y: hidden; /* 禁止滚动，但仍保留滚动条空间 */
  padding-right: var(--scrollbar-compensate);
}



/* 头部 */
.header__{
    z-index: 92;
    position: relative;
    position: sticky;
    top: 0;
    box-shadow:0 0 3px #ccc;
}
@media screen and (max-width:1600px) {
    .header__wrapper{
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
.header__notice__info{
    height: 3rem;
}
.header__notice__info__background{
    background-color:rgb(var(--main-inferior-color) / 1);
    height: 3rem;
}
.header__notice__info__container{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    color: rgb(3 3 3 / 1);
    font-size: 1.1rem;
    line-height: 1.75rem;
    height: 3rem;
    cursor: pointer;
    white-space: nowrap;
}
.header__wrapper {
    background: #fff;
}
.currency-icon{
    width: 106px;
line-height: 45px;
background: url(../../images/index/currency.png) no-repeat left 12px center;
height:45px;
border-radius: 23px ;
padding-left: 30px;

}
.currency-icon:hover{
    background-color: #E8E8E8;
}
.header__wrapper__container{
    max-width: 1600px;
    border-radius: inherit;
    transition: inherit;
    display: grid;
    margin: 0 auto;
    grid-template:var(--header-grid-template);
    /* 这里，控制grid 顺序，可以后面监控屏幕宽度，开始控制 */
    align-items: center;
    gap: 0.75rem;
    padding-top: 1.0rem;
    padding-bottom: 1.0rem;

}
.header__main__nav {
    grid-area: main-nav;
}
.header__icon__list {
    align-items: center;
    gap: 0 20px;
    display: flex;
}
.header__logo {
    grid-area: logo;
    max-width: max-content;
    display: block;
    position: relative;

}
.header__logo img{
    width: 150px;
    height: auto;
}
.header__logo-image {
    width: var(--header-logo-width);
    height: auto;
    opacity: var(--header-logo-opacity, 1);
}

.header__logo-image {
    width: 140px;
    height: auto;
    opacity: 1;
}
.header__logo-image:not(.header__logo-image--transparent):last-child {
    --header-logo-opacity: 1;
}
.header__link__list {
    gap: 1rem 1.8rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: safe center;
    font-size: 1rem;
}
.header__link__list .icon-chevron-bottom{
    position: relative;
    top: 2px;
}

.header__link__items{
    gap: 0.625rem;
    font-weight: 700;
}
.header__nav__dropdown-menu span:hover{
    color: #2495E1;
}
.link-faded-reverse{
    transition: opacity .3s ease;
   opacity: .8;
    height:40px;
    line-height: 40px;
    cursor: pointer;
}
.link-faded-reverse:hover{
    color:#FF6633;
    opacity: 1;
}
.header__nav__dropdown-menu {
    gap: 0.75rem;
    width: max-content;
    max-width: 350px;
    padding: 1.25rem 1.75rem;
    background: rgb(var(--header-background));
    color: rgb(var(--header-text));
    border-radius: 0.375rem;
    box-shadow: var(--shadow), 0 0 0 1px rgb(var(--text-color) / .12);
    box-shadow:0 0 3px #ccc;
    z-index: 1;
    display: grid;
        max-height: 80vh;
    overflow-y: auto;
}
.dropdown-menu--restrictable {

}
.header__nav__dropdown-menu:before {
    content: "";
    width: 100%;
    height: 1.125rem;
    position: absolute;
    bottom: 100%;
}
.dropdown-menu__item {
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    opacity: .7;
    transition: opacity .2s ease-in-out;
    display: flex;
    font-size: 1.075rem;
}
.reversed-link {
    text-decoration: none;
    background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.35em) / 0 1px no-repeat;
    transition: background-size .3s ease-in-out;
}
.header__secondary-nav {
    justify-content: flex-end;
    justify-self: end;
    align-items: center;
    gap: 0.75rem 1.5rem;
    flex-wrap: wrap;
    grid-area: secondary-nav;
    display: flex;
}
.header__icon-list {
    align-items: center;
    gap: 1.5rem;
    display: flex;
}
.tippy-arrow{display: none;}
.header__menu__phone{
    display: none;
}
.header__country__wrap{
    gap: 0.2rem;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.currency-icon .tippy-content{
    margin:-10px 0 0 -10px;
}
.header_country_select{
    gap: 0.5rem;
    align-items: center;
    display: flex;

}
.header__coutry__select-list{
    visibility: visible;
    border-radius: 0.5rem;
    width: max-content;
    box-shadow: var(--shadow-md);
    border: 1px solid rgb(26 26 26 / 0.12);
    height: 100%;
    max-height: 350px;
    max-width: 380px;
    background: rgb(255 255 255);
    color: rgb(26 26 26);
    border-radius: 8px;
    flex-direction: column;
    display: flex;
    position: relative;
    border-radius: 10px;
}
.header__country__symbol{
    font-size: 16px;
    font-family: Poppins-Medium;
    color:#231F20;
}
.header__country__icon{
    transition: transform .2s ease-in-out;
    vertical-align: middle;
    display: block;
}
.header__coutry__select-list-body{
    text-align: start;
    color: rgb(26 26 26);
    overflow: auto;
    border-radius: 10px;
    box-shadow: 0 5px 30px 0 rgb(26 26 26 / 10%);
}
/* 定义按钮悬停时的样式 */
.header__coutry__select-list-body-button:hover {
    background-color: #0791B1; /* 设置背景颜色 */
    color: #FFFFFF;
}
.header__coutry__select-list-body-button{
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1.5rem;
    color: rgb(26 26 26  / .7);
    background: rgb(255 255 255);
    transition: color .2s ease-in-out;
    display: flex;
}
.header__cart-count {
    left: .875rem;
    top: -.3125rem;
    position: absolute;
}
.header__cart__icon {
    padding: 0;
}
.count-bubble{
    --size: 1rem;
    width: var(--size);
    height: var(--size);
    min-width: min-content;
    border-radius: var(--rounded-full);
    background: rgb(231 46 14);
    color: rgb(255 255 255);
    place-items: center;
    padding-inline-start: 0.25rem;
    padding-inline-end: 0.25rem;
    font-size:12px;
    font-weight: 700;
    line-height: 1;
    display: grid;
}
/* 手机端弹出nav 和 cart */
.header__phone__sidebar-nav{
    width: 100%;
    height: 100%;
    color: rgb(26 26 26);
    align-items: start;
    display: grid;
    overflow-y: hidden;
    gap: 1.5rem;
    grid-template-rows: auto minmax(0, 1fr);
    padding-left: 1rem;
}
.header_phone__sidebar-close-button{
    display: grid;
    border-width: 1px;
    place-items: center;
    position: static;
    padding: 0.75rem;
    width: max-content;
    place-items: center;
    background-color: #fff;
    border-radius: 3rem;
    margin-top: 1rem;
}
.header_phone__sidebar-nav-items{
        height: 100%;
    position: relative;
}
.header_phone__sidebar-nav-items-panel{
    opacity: 1;
    visibility: visible;
    transform: translateX(0%);
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
}
.header_phone__sidebar-nav-items-panel__wrapper{
    justify-content: space-between;
    gap: 1.5rem;
    flex-direction: column;
    height: 100%;
    display: flex;
    /* overflow-y: auto; */
    padding: 0 1.5rem 1.5rem 0;
}
.header_phone__sidebar-nav-panel__scroller{
    height: 100%;
    align-content: flex-start;
    gap: 2rem;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
}
.header_phone__sidebar-nav-panel__scroller__ul{
    display: grid;
    gap: 2rem;
}
.header_phone__sidebar-nav-panel__scroller__ul > *:not(:last-child) {
  position: relative;
}

.header_phone__sidebar-nav-panel__scroller__ul > *:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: -1rem;   /* gap/2，放在两个元素间隔中心 */
  left: -1rem;
  width: 110%;
  height: 1px;
  background: #ccc;
}
.header_phone__sidebar-nav-panel__dropdown{
    display: grid;
    grid-template-columns: 1fr auto; /* 左边占满，右边自适应 */
  align-items: center;             /* 垂直对齐居中 */
}
.header_phone__sidebar-nav-panel__scroller__ul li{
    overflow-wrap: anywhere;
    text-transform: normal;
    letter-spacing: -0.02rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    font-size: 1.4rem;
}
.header_phone__sidebar-nav-panel__dropdown-arrow{
    width: 1.5rem;
    height:1.5rem;
    border-radius: 9999px;
    background: rgb(26 26 26  / .1);
    flex-shrink: 0;
    place-items: center;
    display: grid;
}
.header_phone__sidebar-nav-panel__dropdown.active .header_phone__sidebar-nav-panel__dropdown-arrow{
    transform: rotate(180deg);
}
.header_phone__sidebar-nav-panel-footer{
    gap: 1.25rem;
    background-color: rgb(255 255 255);
    display: grid;
}   
.header_phone__sidebar-nav-panel-footer-wrapper{
    gap: 1.5rem;
    border-top-width: 1px;
    padding-left: 1rem;
    align-items: center;
    display: flex;
    border-top: 1px solid #999999;
    padding-top: 1rem;
}
.header__phone__country__wrap{
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background-color: #fff ;
}

.header__phone__country__icon,.header__country__icon{
    transition: all .3s;
}
.header__phone__country__wrap.active .header__phone__country__icon,
.header__country__wrap.active .header__country__icon{
    transform: rotate(180deg);
}
.header__phone__country_select{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.header__phone__coutry__select-list{
    visibility: visible;
    border-radius: 0.5rem;
    width: max-content;
    box-shadow: var(--shadow-md);
    border: 1px solid rgb(26 26 26 / 0.12);
    height: 100%;
    max-height: 350px;
    max-width: 380px;
    background: rgb(255 255 255);
    color: rgb(26 26 26);
    border-radius: 8px;
    flex-direction: column;
    display: flex;
    position: relative;
    border-radius: 10px;
}
.header__phone__coutry__select-list-body{
    text-align: start;
    color: rgb(26 26 26);
    overflow: auto;
    border-radius: 10px;
    box-shadow: 0 -5px 30px 0 rgb(26 26 26 / 10%);
}
.header__phone__coutry__select-list-body-button{
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1.5rem;
    color: rgb(26 26 26  / .7);
    background: rgb(255 255 255);
    transition: color .2s ease-in-out;
    display: flex;
}
.header__phone__sidebar-nav-panel__dropdown-wrap{
    padding-left: 1rem;
    padding-top: 0.725rem;
    padding-bottom: 0.215rem;
}
.header__phone__sidebar-nav-panel__dropdown-wrap{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    opacity: 0;
}
.header__phone__sidebar-nav-panel__dropdown-wrap.open {
    max-height: 500px;
    opacity: 1;
}
.header__phone__sidebar-nav-panel__dropdown-items{
    font-size: 1.1rem;
    font-weight: 400;
    margin-top: 1rem;
    border-radius: .375rem;
    padding: .5rem;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
}
.header__phone__sidebar-cart{
    height: 100%;
    width: 100%;
}
.header__phone__sidebar-cart-title{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center; /* 可选，垂直居中 */
    gap: 10px;
    padding: 1rem 1rem 0.25rem 1rem;      
}
.header__phone__sidebar-cart-title-num{
    color: #999999;
    font-size: 1rem;
    font-weight: 400;
}
.header__phone__sidebar-cart-wrap{
    height: 100%;
    grid-template-rows: auto 1fr auto;
    display: grid;
}
.header__phone__sidebar-cart-list{
    overflow: auto;
    overflow-x: hidden;
    padding: 0 1rem 0.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.header__phone__sidebar-cart-list-items{
    height: 7rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    position: relative;
}
.header__phone__sidebar-cart-list-items-img-box{
    width: 6rem;
    height: 6rem;
    max-width: 6rem;
    position: relative;
}
.header__phone__sidebar-cart-list-items-img-box img{
    width: 100%;
}
.header__phone__sidebar-cart-list-content-box{
    display: grid;
    gap: 0.25rem;
    justify-items: start;
    grid-template-columns: 1fr auto;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: 100%;
}
.header__phone__sidebar-cart-list-content-box-content{
    display: grid;
    gap: 0.75rem;
    height: 100%;
    min-height: 0;
}
.header__phone__sidebar-cart-list-content-box-content .pkm-title{
    font-weight: 700;
    color: #353434;
    text-decoration: inherit;
    font-size: 1.015rem;
    min-height: 0;
    overflow: auto;
}
.header__phone__sidebar-cart-list-content-box-content .pkm-title .attr{
    color: #999999;
    font-size: 1rem;
 }
 .header__phone__sidebar-cart-list-content-box-content .pkm-title .attr .attr-info{
    margin-left: 0.2rem;
 }
.header__phone__sidebar-cart-list-content-box-content .price{
    align-items: baseline;
    gap: 0.125rem 0.5rem;
    flex-wrap: wrap;
    display: flex;
    color: rgb(26 26 26  / .7);
    font-weight: 500;
}
.header__phone__sidebar-cart-list-content-box-act{
    color: rgb(26 26 26  / .7);
    margin-inline-start: auto;
    display: grid;
    gap: 0.5rem;
}
.header__phone__sidebar-cart-list-content-box-act input{
    min-width: 48px;
    padding-block-start: 0.5rem;
    padding-block-end: 0.5rem;
    width: 1ch;
    border-radius: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    background: none;
    border-width: 1px;
    outline: none;
}
.header__phone__sidebar-cart-list-content-box-act button{
    text-align: center;
    line-height: 1.7;
    font-size: 0.75rem;
    background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.2lh) / 100% 1px no-repeat;
}
.header__phone__sidebar-cart-list-content-box-act button:hover{
    color:#222;
}
.header__phone__sidebar-cart-list .cart-empty{
    width: 100%;
    text-align: center;
}
.header__phone__sidebar-cart-list .cart-empty .empty{
    width:150px;
    display:block;
    margin:0 auto;
    position: relative;
}
.header__phone__sidebar-cart-list .cart-empty .empty span{
    --size: 1rem;
    width: 30px;
    height: 30px;
    min-width: min-content;
    border-radius: var(--rounded-full);
    background: rgb(231 46 14);
    color: rgb(255 255 255);
    place-items: center;
    padding-inline-start: 0.25rem;
    padding-inline-end: 0.25rem;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    display: grid;
    position:absolute;
    top:-2px;
    right:0;
}
.header__phone__sidebar-cart-list .cart-empty img{
    display: block;
    margin:3rem auto 1rem;
}
.header__phone__sidebar-cart-btn-box{
    position: relative;
    margin-block-start: auto;
    border-block-start: 1px solid rgb(26 26 26 / 0.12);
    padding: 1.5rem 1rem 1rem 1rem;
    display: grid;
    gap: 1rem;
}
.header__phone__sidebar-cart-info-prices{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #353434;
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 500;
}
.header__phone__sidebar-cart-checkout{
    display: grid;
    gap: 0.5rem;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));;
}
.header__phone__sidebar-cart-checkout .clear-all{
    font-weight: 700;
    line-height: 1.6;
    display: inline-block;
    position: relative;
    text-align: center;
    color: rgb(50 50 50);
    background-color: rgb(var(--main-inferior-color) / 1);
    border-radius: 3.75rem;
    appearance: none;
    font-size: 1rem;
    padding-block-start: 1.075rem;
    padding-block-end: 1.075rem;
    padding-inline-start: 2.5rem;
    padding-inline-end: 2.5rem;
    white-space: nowrap;
}
.header__phone__sidebar-cart-checkout .clear-all:hover{
    background: #20b8db;
    color: #fff;
}
.header__phone__sidebar-cart-checkout .checkout:hover {
    background: #20b8db;
}
.header__phone__sidebar-cart-checkout .checkout{
    font-weight: 700;
    line-height: 1.6;
    display: inline-block;
    position: relative;
    text-align: center;
    color: rgb(255 255 255);
    background-color: rgb(var(--main-color) / 1);
    border-radius: 3.75rem;
    appearance: none;
    font-size: 1rem;
    padding-block-start: 1.075rem;
    padding-block-end: 1.075rem;
    padding-inline-start: 2.5rem;
    padding-inline-end: 2.5rem;
}
.header__phone__sidebar-cart-list-content-box-delete-tips{
    height: 6rem;
    width: 100%;
    position: absolute;
    background: #eee;
    text-align: center;
    display: flex;
    align-items: center;
    top: 0;
    justify-content: center;
    right: -120%;
    transition: all 3s;
    color: #00aeff
}
.header__phone__sidebar-cart-list-content-box-delete-tips.display{
    right:20%
}
.header__account__phone__show{
    display: flex;
    align-items: center;
}
/* cart */
.attr-info{
    overflow:hidden;
}
@media screen and (max-width:530px) {
    .header__account__phone__show{
        display: none;
    }
    .sub-nav{
        left: -50px;
    }
    .phone_show{
        display: none;
    }

}
@media screen and (max-width:1200px) {
    .header__phone__sidebar-cart-list .cart-empty img,
    .header__phone__sidebar-cart-list .cart-empty .empty{width:80px;}
    .header__phone__sidebar-cart-list .cart-empty .empty span{right:-17px;}
    :root{
        --header-grid-template:"main-nav logo secondary-nav" / minmax(0, 1fr) fit-content(55%) minmax(0, 1fr);
    }
    .header__link__list{
        display: none;
    }
    .header__country__wrap,.currency-icon,.tap-area>span{
        display: none;
    }
    .header__menu__phone{
        display: block;
    }
    .header__icon__list{gap:0 10px;}
    .header__wrapper {
        padding: 1rem 1.25rem;
    }
    .header__logo  img{
        width: 100px;
        height: auto;
        transform: scale(1.2);
    }
    .header__wrapper__container{
        padding: 0;
    }

}

.__show{
    display: block;
}





/* 重写弹窗添加的类 */
.left-my-layer{
    clip-path: inset(0 100% 0 0); 
    opacity: 0;
    transition: clip-path .3s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.left-my-layer.in{
    clip-path: inset(0 0 0 0);
    opacity: 1;
}
.right-my-layer{
    clip-path: inset(0 0 0 100%); 
    opacity: 0;
    transition: clip-path .3s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.right-my-layer.in{
    clip-path: inset(0 0 0 0);
    opacity: 1;
}
.bottom-my-layer{
    clip-path: inset(100% 0 0 0); 
    opacity: 0;
    transition: clip-path .5s cubic-bezier(.4,0,.2,1), opacity .5s;
}
.bottom-my-layer.in{
    clip-path: inset(-20% 0 0 0);
    opacity: 1;
}