/* 页面样式写在这里 */
.header{
    height: 140px;
    /* background-color: skyblue; */
}
.site-topbar {
    height: 40px;
    background-color: #333;
    font-size: 12px;
    line-height: 40px;
}
.site-topbar a {
    color: #b0b0b0;
}
.site-topbar .topbar-nav > ul > li {
    float: left;
    margin-left: 15px;
}

/* 小箭头 */
.site-topbar .topbar-nav > ul > li.submenu{
    position: relative;
    padding-right: 14px;
}
.site-topbar .topbar-nav > ul > li.submenu::after {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    content: '';
    width: 5px;
    height: 5px;
    border-right: 1px solid #b0b0b0;
    border-bottom: 1px solid #b0b0b0;
    /* 旋转 45 度 */
    transform: translateY(-4px) rotate(45deg);
    /* 箭头动画 */
    transition: transform 0.3s ease 0s;
}
/* 鼠标触碰，箭头旋转 */
.site-topbar .topbar-nav > ul > li.submenu:hover::after{
    transform: translateY(0) rotate(225deg);
    border-color: #fff;
}

/* 实心三角形 */
.site-topbar .topbar-nav >ul > li.active::before{
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
    content: '';
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom-color: #fff;
    /* 默认隐藏 */
    display: none;
}
/* 鼠标触碰，显示实心三角形 */
.site-topbar .topbar-nav > ul > li.active:hover::before{
    display: block;
}

/* 云服务下拉列表 */
.site-topbar .topbar-nav > ul > li.submenu .submenu-list {
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -52.5px;
    width: 105px;
    background-color: #fff;
    box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.3);
    /* 动画 */
    height: 0;
    overflow: hidden;
    transition: height 0.3s;
    z-index: 999;
}
/* 鼠标触碰，显示云服务下拉列表 */
.site-topbar .topbar-nav > ul > li.submenu:hover .submenu-list{
    height: 150px;
}
.site-topbar .topbar-nav > ul > li.submenu .submenu-list>ul>li>a i{
    margin: 0 3px 0 6px;
    vertical-align: -2px;
}
.site-topbar .topbar-nav > ul > li.submenu .submenu-list>ul>li>a:hover{
    color: #ff6a00;
}
.site-topbar .topbar-nav > ul > li.submenu .submenu-list>ul>li{
    line-height: 30px;
}

/* 下载app */
.site-topbar .topbar-nav > ul > li.submenu .appcode{
    position: absolute;
    top: 40px;
    left: 50%;
    width: 124px;
    background-color: #fff;
    margin-left: -62px;
    box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.3);
    text-align: center;
    font-size: 14px;
    line-height: 1;
    color: #333;
    /* 默认隐藏 */
    height: 0;
    overflow: hidden;
    transition: height 0.3s;
    z-index: 999;
}
/* 鼠标触碰，显示下载app */
.site-topbar .topbar-nav > ul > li.submenu:hover .appcode{
    height: 148px;
}
.site-topbar .topbar-nav > ul > li.submenu .appcode > img{
    display: block;
    margin: 17px auto 16px;
}


.site-topbar .topbar-info {
    float: right;
}
.site-topbar .topbar-info>a {
    margin-left: 13px;
}
.site-topbar .topbar-info > a:hover,
.site-topbar .topbar-nav > ul > li > a:hover {
    color: #fff;
}

/* 购物车 */
.site-topbar .topbar-cart {
    float: right;
    margin-left: 15px;
    position: relative;
}
.site-topbar .topbar-cart .cart-mini{
    display: block;
    height: 40px;
    background-color: #424242;
    padding: 0 24px;
}
.site-topbar .topbar-cart .cart-mini em{
    font-size: 16px;
    /* vertical-align属性的作用：垂直居中 */
    vertical-align: -1px; 
}
.site-topbar .topbar-cart .cart-mini:hover{
    color: #ff6a00;
    background-color: #fff;
}

/* 购物车菜单 */
.site-topbar .topbar-cart .cart-menu{
    position: absolute;
    top: 40px;
    right: 0;
    width: 316px;
    background-color: #fff;
    box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.05);
    text-align: center;
    /* 默认隐藏 */
    height: 0;
    padding: 0;
    overflow: hidden;
    /* 动画 */
    transition: height 0.3s, padding 0.3s;
    color: #333;
    z-index: 10;
}
/* 鼠标触碰，显示购物车菜单 */
.site-topbar .topbar-cart:hover .cart-menu{
    height: 50px;
    padding: 25px 0 25px;
}

/* 网站头部 */
.site-header .header-logo{ 
    float: left;
    margin-top: 23px;
}
.site-header .header-logo a img{
    border-radius: 10px;
}
/* 鼠标触碰，logo缩小 0.9倍 */
.site-header .header-logo a:active img{
     /* logo缩小 0.9倍  */
     transform: scale(0.9);
}
.site-header .header-nav{
    float: left;
}
.site-header .header-nav .nav-list{
    margin-left: 194px;
}
.site-header .header-nav .nav-list > li{
    float: left;
    padding: 38px 10px;
}
.site-header .header-nav .nav-list >li > a{
    font-size: 16px;
    color: #333;
}
.site-header .header-nav .nav-list >li > a:hover{
    color: #ff6700;
}

/* 搜索框 */
.site-header .header-search{ 
    width: 297px;
    float: right;
    background-color: #ff6700;
    margin-top: 25px;
}
.site-header .header-search .search-text{
    width: 245px; 
    height: 50px;
    border: 1px solid #e0e0e0;
    border-right: none;
    font-size: 14px;
    color: #333;
    line-height: 50px;
    padding: 0 11px;
    box-sizing: border-box;
    float: left;
}
.site-header .header-search .search-btn{ 
    display: block;
    width: 52px;
    height: 50px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    float: left;
    font-size: 18px;
    text-align: center;
    line-height: 50px;
}
.site-header .header-search .search-btn:hover{ 
    background-color: #ff6700;
    color: #fff;
    border-color: #ff6700;
}

/* 当鼠标触碰到搜索框时，整体搜索框颜色变化 */
.site-header .header-search:hover .search-text,
.site-header .header-search:hover .search-btn{ 
    border-color: #9d9999;
}
/* 当鼠标点击获取焦点时，搜索框样式停留 */
.site-header .header-search .search-text:focus,
.site-header .header-search .search-text:focus + .search-btn { 
    border-color: #ff6700;
}

/* ================================================================== */
.focus-slider{
    position: relative;
}
/* 分类导航 */
.focus-slider .category{
    position: absolute;
    top: 0;
    left: 0;
    width: 234px;
    height: 460px;
    background-color: rgba(105, 101, 101, 0.4);
    padding-top: 19px;
    box-sizing: border-box;
    z-index: 2;
}
.focus-slider .category > ul > li{
    line-height: 42px;
}
.focus-slider .category > ul > li > a{
    display: block;
    font-size: 14px;
    color: #fff;
    padding: 0 23px 0 30px;
}
.focus-slider .category > ul > li >a:hover{
    background-color: #ff6700;
}
.focus-slider .category > ul > li:hover .category-list {
    display: grid;
}
.focus-slider .category> ul > li > a > em{
    float: right;
}

.category-list{
    position: absolute;
    top: 0;
    left: 234px;
    /* width: 992px; */
    height: 460px;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #333;
    box-sizing: border-box;
    display: none;
    grid-template-rows: repeat(6, 1fr);
    /* grid-template-columns: 250px; */
    grid-auto-flow: column;
    grid-auto-columns: 250px;
}

.category-list a {
    display: flex;
    align-items: center;
    color: #000;
}
.category-list a:hover {
    color: #ff6700;
}
.category-list a img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

/* 轮播图 */
.focus-slider .swiper{
    width: 1226px;
    height: 460px;
    background-color: #dbd1cb;
}
.swiper-button-prev{
    left: 244px;
}
.swiper-slide img{
    width: 100%;
    height: 100%;
}
/* 轮播图指示器 */
.swiper-pagination{
    text-align: right;
    padding-right: 34px;
    /* 怪异盒模型 */
    box-sizing: border-box;
}
.swiper-pagination-bullet-active{
    background-color: #009dff;
}


/* recommend 推荐*/
.recommend{
    width: 100%;
    height: 620px;
    background-color: #f7f7f7;
    margin: 26px 0 34px 0;
    /* 消除margin塌陷 */
    overflow: hidden;
    padding-bottom: 36px;
}
.recommend .index-banner{
    width: 1226px;
    height: 120px;
    margin: 26px auto 48px;
}
/* 歌单推荐 */
.music-con .m-title{
    text-align: center;
    font-size: 32px;
    color: #333;
}
.music-con .m-tab{
    text-align: center;
    padding: 34px 0 36px 0;
}
.music-con .m-tab a{
    font-size: 16px;
    color: #757575;
    margin: 0 23px;
}
.music-con .m-tab a.active{
    color: #31c27c;
}

.music-item .music-list > li{
    width: 224px;
    float: left;
    margin-right: 26px;
    color: #757575;
}
.music-item .music-list > li:last-child{
    margin-right: 0;
}
.music-item .music-list > li > a{
    position: relative;
    width: 224px;
    height: 224px;
    display: block;
    overflow: hidden;
}
.music-list-title{
    margin: 14px 0 6px 0;
    font-size: 14px;
}
.music-list-title > a{
    color: #333;
}
.music-list-title > a:hover{
    color: #31c27c;
}
.music-item .music-list li span{
    color: #999;
}
/* 阴影效果 */
.img-mask{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 224px;
    height: 224px;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color ease 0.6s;
    z-index: 0;
}
.music-list > li > a:hover .img-mask{
    background-color: rgba(0, 0, 0, 0.4);
}

/* 播放按钮 */
.m-icon-play{
    width: 65px;
    height: 65px;
    display: block;
    background-image: url(../images/play.png);
    position: absolute;
    top: 50%;
    left:50%;
    margin: -32.5px 0 0 -32.5px;
    z-index: 1;
    /* 透明度 */
    opacity: 0;
    /* 先缩小 */
    transform: scale(0.2);
    /* 动画 */
    transition: transform ease 0.6s;
}
.music-list > li > a:hover .m-icon-play{
    /* 放大 */
    transform: scale(1);
    opacity: 1;
}
/* 图片放大 */
.music-list > li > a > img{
    transition: transform ease 0.6s;
}
.music-list > li > a:hover > img{
    transform: scale(1.5);
}

.music-item .music-list {
    display: none;
}
.music-item ul.current{
    display: block;
}

/* playground start */
.header-title{
    float: left;
    width: 826px;
}
.header-title h2{
    font-size: 24px;
    color: #333;
    margin-bottom: 24px;
}
.more-products{
    float: right;
}
.more-products a{
    display: block;
    width: 118px;
    height: 42px;
    color: #000;
    border: 1px solid #bababa;
    border-radius: 20px;
    line-height: 42px;
    text-align: center;
    margin-top: 12px;
}
.more-products a:hover{
    border-color: #000;
}

.playground-con{
    margin: 33px 0 40px 0;
}
.playground-con .con-l{
    width: 610px;
    height: 715px;
    float: left;
    background-image: url(../images/家居1.jpg);
    background-size: cover;
}
.con-m, .con-r{
    width: 295px;
    height: 715px;
    float: left;
}
.con-m-1{
    position: relative;
    width: 295px;
    height: 295px;
    background-image: url(../images/jiaju2.jpeg);
    background-size: cover;
}
.con-m-2{
    position: relative;
    width: 295px;
    height: 400px;
    background-image: url(../images/家居3.jpg);
    background-size: cover;
}
.con-r-1{
    width: 295px;
    height: 400px;
    background-image: url(../images/jiaju6.jpg);
    background-size: cover;
}
.con-r-2{
    width: 295px;
    height: 295px;
    background-image: url(../images/家居4.jpg);
    background-size: cover;
}
.con-l, .con-m{
    margin-right: 13px;
}
.con-m-1, .con-r-1{ 
    margin-bottom: 20px;
}
.con-l{
    position: relative;
}
/* 小点 */
.dot{
    position: absolute;
    display: none;
    width: 42px;
    height: 32px;
    color: #333;
}

.dot-1{
    top: 300px;
    left: 90px;
}
.dot-2{
    top: 580px;
    left: 260px;
}
.dot-3{
    top: 430px;
    left: 400px;
}
.dot-4{
    top: 235px;
    left: 220px;
}
.dot-5{
    top: 200px;
    left: 220px;
}

/* 外圈圆 */
.dot::before{
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    /* 动画 */
    transition: transform ease 0.5s;
}
.dot:hover::before{
    transform: scale(0.9);
    box-shadow: 0 0 5px #fff;
}

/* 内圈圆 */
.dot::after{
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
    transition: transform ease 0.5s;
}
.dot:hover::after{
    transform: scale(0.7);
}
.dot-tips{
    position: absolute;
    top: -30px;
    left: 40px;
    width: 130px;
    background-color: #fff;
    padding: 10px;
    display: none;
}
.dot-tips-4{
    top: -40px;
    left: -160px;
}
.dot-tips-5{
    top: -30px;
    left: -160px;
}
.dot-tips span{
    font-size: 24px;
    font-weight: bold;
}
.dot-tips span i{
    font-size: 12px;
}
.dot:hover .dot-tips{
    display: block;
}

/* 所有的小圆点默认都是隐藏，鼠标触碰时显示 */
.con-l:hover a,
.con-m-1:hover a,
.con-m-2:hover a{
    display: block;
}
/* end playground */

/* videos start */
.videos{
    background-color: #f8f8f8;
    overflow: hidden;
    padding-bottom: 28px;
}
.videos h2{
    font-size: 28px;
    text-align: center;
    color: #000;
    margin: 34px 0 33px 0;
}
.videos ul li{
    float: left;
    margin-right: 6px;
    margin-bottom: 10px;
    position: relative;
    transition: all .5s;
}
.videos ul li:hover{
    transform: translateY(-10px);
    box-shadow: 0px 0px 15px 5px #949494;
}

/* nth-child序号选择器 */
.videos ul li:nth-child(4n){
    margin-right: 0;
}
.videos ul li a{
    display: block;
    color: #000;
    font-size: 16px;
}

.videos ul li a img{
    display: block;
}

.videos ul li p{
    height: 55px;
    line-height: 55px;
    text-align: center;
    background-color: #fff;
}

/* 视频播放按钮 */
 .video-play{
    position: absolute;
    top: 145px;
    right: 13px;
    display: block;
    width: 30px;
    height: 30px;
    background-image: url(../images/play.png);
    background-size: cover;
    cursor: pointer;
}

/* end videos */

/* v-mask start */
/* 遮罩层 全屏浏览器宽度 */
.v-mask{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
    display: none;
}

.v-mask .mask-video{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1000px;
    transform: translate(-50%,-50%);
}

.mask-close{
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    background-color: #ddd;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50%;
}
.mask-close:hover{
    background-color: #fff;
}
/* end v-mask */

/* mall start */
.mall h2{
    position: relative;
    font-size: 34px;
    color: #000;
    text-align: center;
    margin: 36px 0 44px 0; 
}
.mall h2::after{
    position: absolute;
    left: 50%;
    bottom: -12px;
    margin-left: -15px;
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background-color: #c7000b;
}
.mall ul li{
    position: relative;
    float: left;
    margin-right: 13px;
    margin-bottom: 30px;
    overflow: hidden;
}
/* 序号选择器 */
.mall ul li:nth-child(3n){
    margin-right: 0;
}
.mall-info {
    position: absolute;
    bottom: -25px;
    left: 20px;
    z-index: 1;
    /* 动画 */
    transition: bottom ease 0.5s;
}
.mall ul li a:hover .mall-info{
    bottom: 40px;
}
.mall ul li a,
.mall-more span{
    color: #fff;
}
.mall ul li a{
    color: #fff;
    display: block;
}
.mall-title {
    font-size: 20px;
    /* 加粗 */
    font-weight: bold;
    padding: 5px 0;
}
.mall-more span {
    display: inline-block;
    font-size: 16px;
    padding-top: 18px;
}
.mall-more i {
    color: #c60318;
    font-size: 14px;
    font-weight: bold;
}

/* 产品信息动画 */
.mall 

/* 阴影 */
.mall-shadow{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 320px;
    background-color: rgba(0,0,0,0.5);
    z-index: 0;
    opacity: 0;
    transition: opacity ease 1s;
}
.mall ul li a:hover .mall-shadow{
    opacity: 1;
}

/* 图片放大 */
.mall ul li a img{
    display: block;
    transition: transform ease 0.6s;
}
.mall ul li a:hover img{
    transform: scale(1.3);
}

/* 更多箭头 */
.mall-more i{
    transition: margin-left ease 0.5s;
}
.mall-more:hover i{
    margin-left: 20px;
}
/* end mall */

/* site-footer start */
.footer-service{
    padding: 31px 0;
    border-bottom: 1px solid #e0e0e0;
}
.footer-service ul li{
    float: left;
    width: 19.8%;
    text-align: center;
    border-left: 1px solid #e0e0e0;
}
.footer-service ul li i{
    font-size: 24px;
    vertical-align: -2px;
}
.footer-service ul li a{
    font-size: 16px;
    font-weight: bold;
    color: #616161;
}
.footer-service ul li:first-child{
    border-left: none;
}


.footer-links{
    padding: 40px 0 46px;
}

.footer-links dl{
    float: left;
    width: 160px;
}
.footer-links dl:first-child{
    margin-left: 172px;
}
.footer-links dl dt{
    font-size: 14px;
    font-weight: bold;
    color: #424242;
    margin-bottom: 31px;
}
.footer-links dl dd{
    margin: 10px 0 0;
    font-size: 12px;
}
.footer-links dl dd a{
    font-size: 14px;
    color: #757575;
}
.footer-links dl dd a:hover{
    color: #ff6700;
}

.telephone{
    float: left;
    width: 251px;
    border-left: 2px solid #e0e0e0;
    text-align: center;
    color: #616161;
}
.telephone p{
    margin-bottom: 5px;
    font-size: 12px;
}
.telephone p.phone{
    font-size: 22px;
    color: #ff6700;
    font-weight: bold;
    line-height: 1;
}
.telephone a{
    display: inline-block;
    width: 120px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ff6700;
    color: #ff6700;
    transition: background-color ease 1s;
}
.telephone a em{
    font-size: 12px;
    vertical-align: 1px;
}
.telephone a:hover{
    background-color: #ff6700;
    color: #fff;
}

.copyright{
    text-align: center;
    line-height: 30px;
}
/* end site-footer */