/* 声明字体图标 这里一定要注意路径的变化 */
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?tomleg');
    src:  url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?tomleg') format('truetype'),
      url('../fonts/icomoon.woff?tomleg') format('woff'),
      url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

/* 版心 */
.w {
    width: 1200px;
    /* 版心居中对齐 */
    margin: 0 auto;
}

/* 版心里面左浮动 */
.fl {
    float: left;
}

/* 版心里面右浮动 */
.fr {
    float: right;
}

/* 文字红色公共样式 */
.style_red {
    color: #c81623;
}
/* 快捷导航模块 */
.shortcut {
    /* 宽度不要给，就是100% */
    height: 31px;
    /* shortcut子盒子会继承父盒子的高度，达到垂直居中*/
    line-height: 31px;
    background-color: #f1f1f1;
}

/* shortcut中的li */
.shortcut ul li {
    float: left;
}
/* 使用结构伪类选择器--选择所有的偶数的小li---小竖线 */
.shortcut .fr ul li:nth-child(even) {
    width: 1px;
    height: 12px;
    background-color: #666;
    /* 左右撑开，上边距撑开 */
    margin: 9px 15px 0;
}

/* 伪元素选择器---在元素li的后面插入下三角 */
.arrow-icon::after {
    /* \e91e是下三角的unicode编码 */
    content: '\e91e';
    /* 引入字体库 */
    font-family: 'icomoon';
    /* 左外边距 */
    margin-left: 6px;
}
/* header 头部制作 */
.header {
    /* 相对定位---保留原来位置 */
    position: relative;
    /* 宽度 w已经给出，高度需要在此给出 */
    height: 105px;
    /* background-color: pink; */
}

/* logo整体大盒子 */
.logo {
    /* 子元素绝对定位 */
    position: absolute;
    /* 距离大盒子上面25px */
    top: 25px;
    width: 171px;
    height: 61px;
    
}
.logo a {
    /* 链接属于行内元素，需转换为块元素，才能设置宽高 */
    display: block;
    /* 图片宽高与logo一样大 */
    width: 171px;
    height: 61px;
    background: url(../images/logo.png) no-repeat;
    /* font-size: 0;京东的做法*/
    /* 淘宝的做法让文字隐藏 即a的文字不显示*/
    /* 负值，往左边走，首行缩进无穷大 */
    text-indent: -9999px;
    /* 溢出隐藏 */
    overflow: hidden;
}

/* 搜索模块整体设置 */
.search {
    position: absolute;
    /* left，top是相对于整个大的盒子 */
    left: 346px;
    top: 25px;
    width: 538px;
    height: 36px;
    /* 有2px 的边框 */
    border: 2px solid #b1191a;
}

/* 搜索输入框 */
.search input {
    /* input 属于行内块元素，元素之间有缝隙，但是加上浮动，可以消除缝隙 */
    float: left;
    /* 大盒子内的宽高 */
    width: 454px;
    height: 32px;
    /* 文字内边距 */
    padding-left: 10px;
}

/* 搜索按钮 */
.search button {
    /* button属于行内块元素，元素之间有缝隙，但是加上浮动，可以消除缝隙 */
    float: left;
    width: 80px;
    height: 32px;
    background-color: #b1191a;
    font-size: 16px;
    color: #fff;
}

/* 搜索热词 */
.hotwords {
    position: absolute;
    top: 66px;
    left: 346px;
}

/* 热词---链接a */
.hotwords a {
    /* a与a之间间隔10px */
    margin: 0 10px;
}

/* 我的购物车 */
.shopcar {
    position: absolute;
    right: 60px;
    top: 25px;
    width: 140px;
    height: 35px;
    /* 文字垂直居中 */
    line-height: 35px;
    text-align: center;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}

/* 伪元素选择器---并不会产生真正的元素 */
.shopcar::before {
    /* 购物车图标 */
    content: '\e93a';
    font-family: 'icomoon';
    /* 距离文字右侧10px */
    margin-right: 10px;
    /* 购物车图标颜色，图标相当于文字 */
    color: #b1191a;
}
.shopcar::after {
    /* 右侧小三角 */
    content: '\e920';
    font-family: 'icomoon';
    /* 距离文字左10px */
    margin-left: 10px;
}
.count {
    /* 定位定到右上角去 */
    position: absolute;
    top: -5px;
    /* 左对齐，当文字过多时候，往右边延展宽度 */
    left: 105px;
    /* 不给宽度，因文字的多少并不确定 */
    height: 14px;
    /* 继承父元素行高35px，所以需要重新指定行高14px */
    line-height: 14px;
    color: #fff;
    background-color: #e60012;
    padding: 0 5px;
    /* 不规则形状 */
    border-radius: 7px 7px 7px 0;
}

/* nav导航整体大盒子 */
.nav {
    height: 47px;
    border-bottom: 2px solid #b1191a;
}
/* nav左侧盒子 */
.nav .dropdown {
    float: left;
    width: 210px;
    /* 此处只有dt一个子元素，所以高度不必包括dd的高度，因为dt与dd同级关系 */
    height: 45px;
    background-color: #b1191a;
}

/* nav右侧盒子 */
.nav .navitems {
    float: left;
}

.dropdown .dt {
    /* 继承的是.dropdown宽高 */
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
}

/* dd与dt同级关系，且dd自己指定高度 */
.dropdown .dd {
    /* 制作footer测试用，最后打开它 */
    /* display: none; */
    width: 210px;
    height: 465px;
    background-color: #c81623;
    /* dd上沿应该是贴着dt下的一条线的bottom */
    margin-top: 2px;
}

/* 单个条目li的属性设置 */
.dropdown .dd ul li {
    /* 添加了右箭头的伪元素且子绝，所以此处要父相对 */
    position: relative;
    height: 31px;
    line-height: 31px;
    /* 左侧外边距2px缝隙 */
    margin-left: 2px;
    padding-left: 10px;
}

/* a的字体属性设置 */
.dropdown .dd ul li a {
    font-size: 14px;
    color: #fff;
}

/* 注意此处的背景色还用li设置 */
.dropdown .dd ul li:hover {
   background-color: #fff;
}

/* li中a的链接里面的文字属性应该给a设置，而不是li */
.dropdown .dd ul li:hover a {
    font-size: 16px;
    color: #c81623;
}

/* 此处是给li设置伪元素，而不是a */
.dropdown .dd ul li::after {
    /* 加定位，将箭头撑到右边 */
    position: absolute;
    top: 1px;
    right: 10px;
    color: #fff;
    font-family: 'icomoon';
    /* 右箭头 */
    content: '\e920';
    font-size: 14px;
}

/* 全部分类左侧的导航链接 */
.navitems ul li {
    /* 加浮动，变为一行 */
    float: left;
}

.navitems ul li a {
    /* 块元素可设置宽高 */
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    /* 给padding将字体区域撑大，鼠标体验更好 */
    padding: 0 25px;
}


/* 底部模块制作 */
.footer {
    height: 415px;
    background-color: #f5f5f5;
    /* 第一个盒子上内边距，拉开内容的顶部高度 */
    padding-top: 30px;
}

/* 服务模块 */
.mod_service {
    height: 80px;
    border-bottom: 1px solid #ccc;
    /* background-color: powderblue; */
}


.mod_service ul li {
    /* 浮动，li转换为同一行显示 */
    float: left;
    width: 300px;
    height: 50px;
    /* 距离中盒子35px */
    padding-left: 35px;
}

/* h5标题 */
.mod_service ul li h5 {
    /* 加左侧浮动，下侧的文字自动跑到右边去 */
    float: left;
    width: 50px;
    height: 50px;
    /* 在h5中使用精灵图设置背景图片，不适用img标签 */
    background: url(../images/icons.png) no-repeat -252px -2px;
    /* 右边距离 */
    margin-right: 8px;
}

/* 上标题h4 */
.service_txt h4 {
    font-size: 14px;
}

/* 段落 p */
.service_txt  p {
    font-size: 12px;
}

/* 帮助模块--整体 */
.mod_help {
    height: 185px;
    border-bottom: 1px solid #ccc;
    /* 将dl挤下来 */
    padding-top: 20px;
    padding-left: 50px;
}

/* 整个大的dl */
.mod_help dl {
    /* 所有dl横着显示 */
    float: left;
    width: 200px;
}

/* 具体的服务模块 */
.mod_help dl dt {
    font-size: 16px; 
    /* dt与dd之间的上外边距离 */
    margin-bottom: 10px;
}


/* 所有dl中的最后一个dl */
.mod_help dl:last-child {
    /* 统一设置的200px宽度放不下最后一个，所以重新设置最后一个宽度 */
    width: 90px;
    /* 文字水平居中 */
    text-align: center;
}

/* 版权信息---整体 */
.mod_copyright {
    /* 文字居中显示 */
    text-align: center;
    /*上内边距距离*/
    padding-top: 20px;
}

.links {
    /* links模块下外边距 */
    margin-bottom: 15px;
}
.links a {
    /* 每个链接的左右外边距 */
    margin: 0 3px;
}

.copyright {
    /* 文字垂直居中 */
    line-height: 20px;
}