@charset "utf-8";

/* CSS Document*/

.index{position: relative;}

.index .header{position: absolute; top: 0; left: 0; z-index: 99; width: 100%;}

.index .header ul{width: 720px; margin: 0 auto;}

.index .header ul li{float: left; font-size: 18px; line-height: 100px; width: 120px; text-align: center;}

.index .header ul li a{color: #fff; transition: .4s;}

.index .header ul li a:hover{color: #cbaa72;}

.nav_color{color: #cbaa72!important;}

.text1{position: absolute; left: 50%; top: 0; width: 232px; margin-left: -116px;}

.text1>img{display: block; margin: 310px auto 0;}

.text1 .a1{display: block; width: 100%; height: 76px; font-size: 30px; color: #666666; line-height: 76px;

	text-align: center; background-color: rgba(255,255,255,.9); margin-top: 35px; transition: .4s;}

.text1 .a1:hover{background-color: #cbaa72; color: #fff; border-radius: 10px;}

.swiper-pagination-bullet-active{background-color: #fff;}



.sec1 .line{display: block; width: 100%; margin-top: 42px;}

.sec1 .about{padding: 0 100px 200px;}

.sec1 .about .tit{font-size: 48px; color: #333; padding-top: 170px; text-align: center; padding-bottom: 30px;}

.sec1 .about .tit>span{color:#cbaa72; font-family: "BebasNeue Bold";}

.sec1 .about .con{font-size: 18px; color: #949496; text-align: justify; line-height: 32px; margin-bottom: 30px;}

.sec1 .about .more{float: right; font-size: 16px; color: #949496; transition: .3s;}

.sec1 .about .more:hover{color: #cbaa72;}



.sec2 .taobao{height: 144px; background-color: #f5f5f5;}

.sec2 .taobao .logo2{margin-top: 30px;}

.sec2 .taobao .tbdp{width: 172px; height: 60px; background-color: #dd3333; font-size: 18px; color: #fff;

	line-height: 60px; text-align: center; margin-top: 43px; transition: .4s;}

.sec2 .taobao .tbdp:hover{background-color: #b80606; border-radius: 10px;}

.sec2 .taobao .xym{font-size: 18px; color: #949496; line-height: 144px; margin-right: 40px;}

.sec2 .product{width: 100%; height: 1137px; background: url(../images/index3.jpg) no-repeat center;

	background-size: cover;}

.sec2 .product .probox{overflow: hidden;}

.sec2 .product .tit{font-size: 36px; color: #000; padding-top: 100px; padding-bottom: 50px; margin-left: 14px;}

.sec2 .product .tit>span{color:#cbaa72; font-family: "BebasNeue Bold";}



.sec2 .product .pro{position: relative; width: 396px; height: 383px; margin-bottom: 30px; margin-right: 6px;}

.sec2 .product .pro:nth-child(3n){margin-right: 0;}

.sec2 .product .pro>img{display: block; width: 382px; height: 368px; margin-top: 14px; margin-left: 14px;

	transition: .5s;}

.sec2 .product .pro .bg{position: absolute; top: 14px; left: 14px; z-index: 9; width: 376px; height: 363px;

	opacity: 0; transition: .5s;}

.sec2 .product .pro .bg>p{font-size: 24px; color: #fff; text-align: center; font-family:'宋体'; padding-top: 40%;}

.sec2 .product .pro .bg>span{width: 32px; height: 32px; background-color: rgba(255,255,255,.5); color: #fff;

	font-size: 20px; display: block; border-radius: 50%; text-align: center; line-height: 32px; font-family:'宋体';

	margin: 10px auto 0;}

.sec2 .product .pro .kuang{position: absolute; top: 14px; left: 14px; width: 376px; height: 363px;

	border: 6px solid #cbaa72; z-index: 9; opacity: 0; transition: .4s;}

.gray{  

	-webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);

    filter: grayscale(100%);

    filter: gray;

}

.opacity1{opacity: 1!important;}

.opacity2{top: 0!important; left: 0!important; opacity: 1!important;}

.swiper-pagination2{text-align: center; margin-top: 20px;}

.swiper-pagination2 .swiper-pagination-bullet{border: 2px solid #b4b4b4; background-color: transparent; opacity: 1;}

.swiper-pagination2 .swiper-pagination-bullet-active{background-color: #cbaa72; border: 2px solid #cbaa72;}



@media screen and (max-width: 1768px){

	.text1>img{margin: 280px auto 0;}

}

@media screen and (max-width: 1600px){

	.text1>img{margin: 230px auto 0;}

}

@media screen and (max-width: 1440px){

	.index .header ul li{line-height: 80px;}

	.text1>img{margin: 200px auto 0; width: 100%;}

	.text1{width: 200px; margin-left: -100px;}

	.text1 .a1{height: 55px; line-height: 55px; font-size: 24px;}

}

@media screen and (max-width: 1280px){

	.text1{width: 190px; margin-left: -95px;}

}

@media screen and (max-width: 1240px){

	.sec1 .about{padding: 0 0 150px;}

	.sec2 .product{height: 950px;}

	.sec2 .product .pro{width: 296px; height: 286px;}

	.sec2 .product .pro>img{width: 282px; height: 272px;}

	.sec2 .product .pro .bg{width: 276px; height: 266px;}

	.sec2 .product .pro .bg>p{font-size: 20px;}

	.sec2 .product .pro .kuang{width: 276px; height: 266px; border: 3px solid #cbaa72;}

	.sec2 .product .pro .bg>span{font-size: 18px; width: 28px; height: 28px; line-height: 28px;}

}

@media screen and (max-width: 900px){

    .index_wap_banner{width: 100%; height: 350px; background-size: cover!important;}

    .sec1 .line{margin-top: 20px;}

    .sec1 .about{padding: 0 0 60px;}

    .sec1 .about .tit{font-size: 20px; padding-top: 30px; padding-bottom: 15px;}

    .sec1 .about .con{font-size: 16px; line-height: 28px; margin-bottom: 20px;}

    .sec1 .about .more{font-size: 16px;}



    .sec2 .taobao{height: auto; padding-bottom: 0;}

    .sec2 .taobao .logo2{height: 40px; margin-top: 20px;}

    .sec2 .taobao .tbdp{width: 140px; height: 40px; line-height: 40px; margin-top: 20px;}

    .sec2 .taobao .xym{margin-right: 0; line-height: 28px; font-size: 16px; width: 100%; margin-top: 10px;

        text-align: justify;}

    .sec2 .taobao .xym>span{display: inline-block /* Opera */; padding-left: 100%;}



    .sec2 .product{height: 770px;}

    .sec2 .product .tit{font-size: 20px; margin-left: 0; padding-top: 40px; padding-bottom: 30px;}

    .sec2 .product .pro{width: 48%; height: auto; margin-right: 0; margin-bottom: 20px;}

    .sec2 .product .pro:nth-child(2n){float: right!important;}

    .sec2 .product .pro .kuang{display: none;}

    .sec2 .product .pro>img{width: 100%; height: auto; margin-left: 0; margin-top: 0; filter: none!important;}

    .sec2 .product .pro .bg{width: 100%; height: 100%; top: 0; left: 0; opacity: 1;}

    .sec2 .product .pro .bg>p{font-size: 14px;}

    .sec2 .product .pro .bg>span{width: 24px; height: 24px; line-height: 24px; font-size: 14px;}

    .swiper-pagination2{margin-top: 10px;}

    .swiper-pagination2 .swiper-pagination-bullet{border: 1px solid #b4b4b4;}

    .swiper-pagination2 .swiper-pagination-bullet-active{border: 1px solid #cbaa72;}

}
@media screen and (max-width: 375px){
    .sec2 .product{height: 710px;}
}