/* common.css */
/*
@ author Nero
@ email 1204077793@qq.com
*/

:root{
    --font-size-root: 14px;     /* 字号 */
    --color-red: #C8161D;   /*红色*/
    --color-gray: #666465;   /*灰色*/
    /* 顶部导航栏高度 */
    --nav-height: 240px;
}
/* 字体样式 */
@font-face {
    font-family: "SY-Light";
    src: url("fonts/font-min/SourceHanSerifCN-Light.woff") format("woff"), /* chrome、firefox */
        url("fonts/font-min/SourceHanSerifCN-Light.ttf") format("truetype"); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}@font-face {
    font-family: "SY-Medium";
    src: url("fonts/font-min/SourceHanSerifCN-Medium.woff") format("woff"), /* chrome、firefox */
        url("fonts/font-min/SourceHanSerifCN-Medium.ttf") format("truetype"); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: "SY-Blod";
    src: url("fonts/font-min/SourceHanSerifCN-Bold.woff") format("woff"), /* chrome、firefox */
        url("fonts/font-min/SourceHanSerifCN-Bold.ttf") format("truetype"); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}


/* #region reset CSS*/
html,body,ul,ol,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,form,img,div,footer,header,section,em,i,strong,nav,main{
    margin:0;
    padding:0;
    border:0;
	box-sizing: border-box;
}
html,body{
    font-size: var(--font-size-root);
    font-family: 'Microsoft YaHei', 'sans-serif';
    color: #000;
    font-weight: normal;
    font-style: normal;
    position: relative;
    top: 0 !important; /* 针对 SEO quake插件 */
}
ul,ol{list-style-type:none;}
select,input{vertical-align:middle;}
img{max-width: 100%; height: auto;}
a{text-decoration:none;vertical-align: middle;color: inherit;}
a:hover{color: inherit;}

/* 表单元素 */

/* number 去除默认加减按钮 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]{
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* 针对Firefox浏览器 兼容 写法*/
@-moz-document url-prefix() {
    input[type="number"] {
		-webkit-appearance: textfield;
		-moz-appearance: textfield;
		appearance: textfield;
    }
    
} 
/* 去除默认边框 */
input[type="number"] {
    outline: none; /* 可选，去除焦点时的外边框 */
    text-align: center;
    padding: 0;
}
/* #endregion */

/* #region 自定义公用 CSS*/
/* 公用类名 */

/* 区块布局类 */
.full-wrapper,
.nav-wrapper,
.cont-wrapper,
.cont-wrapper-sm,
.cont-wrapper-sy,
.cont-wrapper-xm{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.full-wrapper{ 
	max-width: 1350px;
}
.nav-wrapper{ 
    max-width: 1560px;
}
.cont-wrapper{ 
    max-width: 1400px;
    padding-left: 2rem;
    padding-right: 2rem;
}
.cont-wrapper-sm{
    max-width: 1280px;
    padding-left: 2rem;
    padding-right: 2rem;
}
.cont-wrapper-xm{
    max-width: 1100px;
    padding-left: 6rem;
    padding-right: 2rem;
}

.cont-wrapper-sy{
    max-width: 1350px;
    padding-left: 6rem;
    padding-right: 2rem;
}

.cont-wrapper-pd{
	padding-left: 2rem;
    padding-right: 2rem;
}

 /* flex布局 */
.flex{display: flex;}
.flex-column{display: flex; flex-direction: column;}
.flex-wrap{ display: flex; flex-wrap: wrap;}
.flex-center{ display: flex; justify-content: center;align-items: center;}

.pt-100{padding-top:100px;}
.pt-60{padding-top:60px;}
.pt-50{padding-top:50px;}
.pt-170{padding-top:170px;}
.pt-130{padding-top:130px;}
.pt-140{padding-top:140px;}
.pt-180{padding-top:180px;}
.pt-210{padding-top:210px;}
.pt-260{padding-top:260px;}
.pt-280{padding-top:280px;}

.pb-230{padding-bottom:230px;}
.pb-130{padding-bottom:130px;}
.pb-100{padding-bottom:100px;}
.pb-60{padding-bottom:60px;}
.pb-50{padding-bottom:50px;}


.mt-3{margin-top: 3px;} 
.mt-5{margin-top: 5px;} 
.mt-10{margin-top: 10px;} 
.mt-20{margin-top: 20px;} 
.mt-30{margin-top: 30px;}
.mt-50{margin-top: 50px;}
.mt-100{margin-top: 100px;}
.mt-70{margin-top: 70px;}
.mt-80{margin-top: 80px;}
.mt-120{margin-top: 120px;}
.mt-150{margin-top: 150px;}
.mt-190{margin-top: 190px;}
.mt-220{margin-top: 220px;}

.mb-30{margin-bottom: 30px;}
.mb-20{margin-bottom: 20px;}


.br-5{border-radius: 5px;}
.hr{ border-bottom: 1px solid #a1a1a150;}

.hidden{display: none !important;}
.border{border: 1px solid red;}

/* 文字样式 */
/* 思源字体 */
.font-sy-blod{font-family: 'SY-Blod';}
.font-sy-medium{font-family: 'SY-Medium'; }
.font-sy-light{font-family: 'SY-Light'; font-weight: 200;}


.font-light{font-weight: 200; color: #727272;}
.font-bold{font-weight: 600;}



.font-red{color: var(--color-red);}
.font-gray{color: var(--color-gray);}
.font-white{color: #fff !important;}
.font-center{text-align: center;}
.font-56{font-size: 56px;}
.font-50{font-size: 50px;}
.font-48{font-size: 48px;}
.font-40{font-size: 40px;}
.font-30{font-size: 30px;}
.font-26{font-size: 26px;}
.font-24{font-size: 24px;}
.font-22{font-size: 22px;}
.font-20{font-size: 20px;}
.font-18{font-size: 18px;}
.font-17{font-size: 17px;}
.font-16{font-size: 16px;}
.font-14{font-size: 14px;}
.font-12{font-size: 12px;}

/* #endregion */

/* 移入放大效果 */
.h_scale {
    transition: transform .2s ease-in-out;
}
.h_scale:hover {
    transform: scale(1.08);
}
/* 移入放大效果 */
.h_scale {
    transition: all .2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.h_scale:hover {
    transform: scale(1.08);
}
.h_rotate{
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.h_rotate:hover{
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}
.h_underline {
    position: relative;
}
.h_underline::after{
    position: absolute;
    content: '';
    bottom: -5px;
    width: 0%;
    max-width: 120px;
    left: 0;
    height: 1px;
    background-color: var(--color-red);
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.h_underline:hover::after {
    width: 100%;


    
}
/* 等待动画
用到的地方：
    1.加入购物车按钮
    2.购物车等待更新
    3.删除商品
*/
.loading::before {
    content: "";
    position: absolute;
    inset: 0;
    /* opacity: 0; */
    z-index: 1;
    border-radius: inherit;
    background-color: inherit;
    box-shadow: inherit;
    transition: opacity 0s ease;
}
.loading::after {
    position: absolute;
    top: calc(50% - 9px);
    inset-inline-start: calc(50% - 9px);
    /* opacity: 0; */
    z-index: 2;
    transition: opacity 0s ease;
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(0,0,0,0);
    border-left-color: currentColor;
    border-radius: 50%;
    vertical-align: middle;
    animation: wd-rotate 450ms infinite linear;
}
@keyframes wd-rotate {
    100% {
        transform: rotate(360deg)
    }
}