@charset "utf-8";

@font-face{
	font-family: 'beb';
	src : url('../fonts/BEBASNEUE.OTF');
}
@font-face{
	font-family: 'qtf';
	src : url('../fonts/Quantify Bold.ttf');
}

@font-face{
	font-family: 'ali';
	src : url('../fonts/Alibaba-PuHuiTi-Light.otf');
}

@font-face{
	font-family: 'acc';
	src : url('../fonts/ACCIDENTALPRESIDENCY.TTF');
}

@font-face{
	font-family: 'shs';
	src : url('../fonts/AbrilFatface-Regular.otf');
}


.pc_show{ display:block; }
.ph_show{ display:none; }


.swiper-pagination{ text-align:center; z-index:9;}
.swiper-pagination-bullet{ display:inline-block; width:10px; height:10px; background-color: #c9c9c9; cursor:pointer; opacity: 1;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 10px; }
.swiper-pagination-bullet-active{ background-color: #22242e; }

.fillbox{ height: 100px; }
.index3{ margin: 0 auto;max-width:1600px }
.index2{ margin: 0 auto;max-width:1600px }


@media (max-width:1500px){
	.fbanner{ padding-top: 0px;}
	.fillbox{ height: 90px; }
}
@media (max-width:1200px){
	
}
@media (max-width:991px){
	.fbanner{ padding-top: 0px;}
	.fillbox{ height: 66px; }
}
@media (max-width:768px){
	.pc_show{ display:none; }
	.ph_show{ display:block; }

	.swiper-pagination-bullet{ width:8px; height:8px;}
	.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 5px; }
}
@media (max-width:480px){
	.fbanner{ padding-top: 0px;}
	.fillbox{ height: 50px; }
}



/* 标题 */
.comm_ih{ height: 58px; }
.comm_ih h2{ display: inline-block; line-height: 58px; font-size: 36px; font-weight: bold;}
.comm_ih .en{ padding-left: 15px; font-size: 30px; font-family: "qtf"; text-transform: uppercase; color: #c9c9c9; }
.comm_ih .more{ float: right; line-height: 40px; border-bottom: 2px solid #000; letter-spacing: 1px; font-family: "微软雅黑"; font-weight: bold; }
.comm_ih .more i{ padding-left: 40px; font-size: 24px; vertical-align: -4px; }
.comm_ih .more:hover{ opacity: .6; }

@media (max-width:1500px){
	.turnt{ right: 15px; bottom: 150px; opacity: .6;}
	.comm_ih h2{ font-size: 34px;}
	.comm_ih .en{ font-size: 28px; }
}
@media (max-width:1200px){
	.comm_ih h2{ font-size: 32px;}
	.comm_ih .en{ font-size: 26px; }
}
@media (max-width:991px){
	.turnt{ width: 40px; height: 40px; bottom: 80px;}
	.comm_ih h2{ font-size: 30px;}
	.comm_ih .en{ font-size: 24px; }
}
@media (max-width:768px){
	.comm_ih h2{ font-size: 26px;}
	.comm_ih .en{ font-size: 22px; }
	.comm_ih .more i{ padding-left: 25px; }
}
@media (max-width:480px){
	.turnt{ width: 30px; height: 30px;} 
	.comm_ih h2{ font-size: 22px; line-height: 30px;}
	.comm_ih .en{ display: block; padding-left: 0px; font-size: 20px; }
}


.index2{ height: 700px; color: #fff; }
.index2 .main{ position: relative; height: 100%; padding: 80px 60px 0; box-sizing: border-box; background: url(../img/indexbg2.jpg) left center no-repeat ; background-size: auto 100%; }
.index2 .en{ font-family: "shs"; line-height: 90px; font-size: 82px; }
.index2 h3{ font-family: "ali"; font-size: 40px; }
.index2 .textp{ margin-top: 85px; max-width: 446px; line-height: 30px; font-size: 14px; }
.index2 .fashion{ position: absolute; right: 0; top: 50%; width: 55.3%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);}
.fashion .img{ width: 100%; height: 0; padding-top: 60%; background-position: center center; background-repeat: no-repeat; background-size: cover; }

.index2 .pagebox{ margin-top: 80px; position: relative; }
.index2 .pagebox .num{ margin-bottom: 15px; font-size: 24px; font-family: "ali"; }
.index2 .swiper-pagination-bullet{ margin: 0 6px; width: 6px; height: 6px; border: 1px solid #fff; }


@media (max-width:1500px){
	.index2{ height: 600px; }
	.index2 .main{ padding: 60px 40px 0;}
	.index2 .en{ line-height: 75px; font-size: 72px; }
	.index2 h3{ font-size: 36px; }
	.index2 .textp{ margin-top: 60px; max-width: 420px; } 
	.index2 .pagebox { margin-top: 60px; }
}
@media (max-width:1200px){
	.index2{ height: 460px; }
	.index2 .main{ padding: 40px 25px 0;}
	.index2 .en{ line-height: 60px; font-size: 60px; }
	.index2 h3{ font-size: 32px; }
	.index2 .textp{ margin-top: 40px; max-width: 360px; } 
	.index2 .pagebox { margin-top: 40px; }
}
@media (max-width:991px){
	.index2{ height: auto; color: #333; text-align: center; }
	.index2 .main{ position: static; padding: 40px 25px; background: #eee; }
	.index2 .en{ line-height: 40px; font-size: 40px; }
	.index2 h3{ font-size: 28px; }
	.index2 .textp{ margin: 10px auto 20px; width: 100%; line-height: 26px; max-width: 600px; }
	.index2 .fashion{ position: static; width: 100%; max-width: 600px; margin: 0 auto; transform: none; -webkit-transform: none; -moz-transform: none; }
	.index2 .pagebox{ margin-top: 15px; }
	.index2 .swiper-pagination{ position: static; }
}
@media (max-width:768px){
	.index2 h3{ font-size: 25px; }
	.index2 .main{ position: static; padding: 35px 15px; background: #eee; }
	.index2 .pagebox .line{ display: none; }
}
@media (max-width:480px){
	.index2 .en{ line-height: 30px; font-size: 30px; }
	.index2 h3{ font-size: 22px; }
	.index2 .textp{ margin: 10px auto 15px;; line-height: 24px; }
	.index2 .pagebox{ margin-top: 10px; }
	.index2 .pagebox .num{ font-size: 20px; margin-bottom: 0px; }
}


.index3{ padding: 103px 0 60px; }
.custom{ margin-top: 60px; }
.custom .swiper-container{ padding-bottom: 80px; }
.custom .img{ position: relative; width: 100%; height: 0; padding-top: 131%; color: #fff; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.custom .img::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); opacity: 0; }
.custom .img:hover::before{ opacity: 1; }
.custom .en{ position: absolute; left: 40px; top: 40px; font-size: 28px; font-style: italic; font-weight: bold; text-transform: uppercase; }
.custom h4{ position: absolute; left: 40px; bottom: 40px; font-size: 28px; font-weight: bold; }
.custom h4 i{ display: block; margin-top: 15px; width: 31px; height: 21px; background: url(../img/rig.png) center center no-repeat; background-size: auto 21px; }


@media (max-width:1500px){
	.index3{ padding: 90px 15px 50px; box-sizing: border-box; }
	.custom{ margin-top: 50px; }
	.custom .swiper-container{ padding-bottom: 70px; }
}
@media (max-width:1200px){
	.index3{ padding: 75px 15px 45px; }
	.custom{ margin-top: 40px; }
	.custom .swiper-container{ padding-bottom: 60px; }
	.custom .en{ left: 30px; top: 30px; font-size: 24px; }
	.custom h4{ left: 30px; bottom: 30px; font-size: 24px; }
	.custom h4 i{ margin-top: 10px; background-size: auto 18px; }
}
@media (max-width:991px){
	.index3{ padding: 60px 15px 40px; }
	.custom{ margin-top: 30px; }
	.custom .swiper-container{ padding-bottom: 50px; }
}
@media (max-width:768px){
	.index3{ padding: 50px 15px 35px; }
	.custom{ margin-top: 20px; }
	.custom .en{ left: 20px; top: 20px; font-size: 20px; }
	.custom h4{ left: 20px; bottom: 20px; font-size: 20px; }
	.custom h4 i{ margin-top: 6px; background-size: auto 15px; }
}
@media (max-width:480px){
	.index3{ padding: 40px 15px 26px; }
	.custom{ margin-top: 10px; }
	.custom .swiper-container{ padding-bottom: 40px; }
}



/* pro */
/* pc端pronav */
.pronav{ margin-top: 40px; padding: 0 15px; box-sizing: border-box; }
.pronav .list{ display: flex; padding: 10px 0; margin-bottom: 10px; border-bottom: 1px solid #eaeaea; }
.pronav .list span{ flex: 0 0 60px; line-height: 30px; font-weight: bold; white-space: nowrap; font-size: 18px; color: #666; }
.pronav .list ul{  }
.pronav .list li{ position: relative; float: left; padding: 0 25px; line-height: 30px; font-size: 16px; }
.pronav .list li:first-child::after{ content: ">"; position: absolute; top: 0px; right: -3px; color: #666; }
.pronav .list li.on,.pronav .list li:hover{ color: #c7000c; }

@media (max-width:1200px){
	.pronav{ margin-top: 30px;}
}

@media (max-width:768px){
	.pronav{ display: none; }
}



/* 移动端pronav */
.pullbtn{ text-align: right; font-size: 18px; color: #333; margin-bottom: 15px;}
.pullbtn em{ display: inline-block; text-align: center; width: 13px; }
.pronav_mb{
	padding:30px 15px;
}
.pronav_mb .list{
	padding-bottom:10px;
}
.pronav_mb .list h4{
	height:40px;
	line-height:40px;
	background:#22242e;
	color:#fff;
	font-size:15px;
	padding:0 15px;
}
.pronav_mb .list ul{
	padding:10px 0 10px 10px;
	border:1px solid #22242e;
	display:block;
}
.pronav_mb .list ul li{
	display:inline-block;
	height:35px;
	line-height:35px;
	font-size:14px;
	color:#666;
	padding:0 15px;
	float:left;
	margin:4px 10px 4px 0;
	border-radius: 4px;
}
.pronav_mb .list ul li:active,
.pronav_mb .list ul li.on{
	background:#22242e;
	color:#fff;
}
.pronav_mb .list ul li.on a{color:#fff;}
.pronav_mb .list ul li a{
	display:block;
}

@media (max-width:768px){
	.pronav_mb{
		padding:20px 15px 30px;
		display: block!important;
	}
}

@media (max-width:480px){
	.pullbtn{ font-size: 16px; }
	.pronav_mb .list ul li{ height: 30px; line-height: 30px; }
}




.pro{ padding: 70px 15px 0; box-sizing: border-box; }
.pro_box{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.pro_box .list{
	width:33%;
	max-width: 480px;
	height: 0;
	border-radius: 4px;
	padding-bottom: 22%;
	margin-bottom: 160px;
	position: relative;
}
.pro_box::after{ content: ""; width: 33%; }

.pro_box .list .img{
	width:100%;
	height:100%;
	display:inline-block;
	position: absolute;
	padding: 20px;
	box-sizing: border-box;
	left:0;
	top:0;
	opacity: 0;
	z-index: 8;
	border-radius: 4px;
	background-color: rgba(255,255,255,1);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	opacity: 1;
}
.pro_box .list .img img{ -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
     -o-transform: rotate(90deg);
        transform: rotate(180deg); }
.pro_box .list:hover .img{
	opacity: 0;
}
/*.pro_box .list .img img{ width: 100%; height:100%; object-fit: cover; }*/
.pro_box .list p{
	padding: 20px 0;
	width:100%;
	height:auto;
	position: absolute;
	left:0;
	bottom:-100px;
	color:#999;
	font-size:14px;
	text-align: left;
	z-index: 10;
	border-bottom: 1px solid #e0e0e0;
	text-align: center;
}
.pro_box .list p span{ display: inline-block; padding: 0 12px; width: 100%; line-height: 30px; box-sizing: border-box; overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.pro_box .list p span.color0{ font-size: 16px; color: #000; }
.pro .page{ padding-top: 0; }


@media (max-width:1500px){
	.pro{ padding-top: 50px; }
	.pro_box .list{ width:32.5%; margin-bottom: 150px; }
	.pro_box::after{ width: 32.5%; }
	.pro_box .list p{ padding: 15px 0; bottom: -90px; }
	.pro_box .list p span{ line-height: 26px;}
}
@media (max-width:1200px){
	.pro_box .list{ margin-bottom: 140px; }
}
@media (max-width:991px){
	.pro{ padding-top: 40px; }
	.pro_box .list{ margin-bottom: 130px; }
	.pro_box .list p{ padding: 15px 0 10px; bottom: -80px; }
	.pro_box .list p span{ line-height: 24px; }
}
@media (max-width:768px){
	.pro{ padding-top: 15px; }
	.pro_box .list{ width:49%; padding-bottom: 33%; margin-bottom: 120px; }
	.pro_box::after{ display: none; }
.img_box img {
    vertical-align: middle;
    border: none;
    display: block;
    height: inherit !important;
    margin: 0 auto;
}
}
@media (max-width:480px){
	.pro{ padding-top: 0px; }
.pro_box .list {
    width: 50%;
    margin-bottom: 110px;
	height: 180px;
}
	.pro_box .list p{ padding: 12px 0 8px; bottom: -74px; }
	.pro_box .list .img{ padding: 5px;height: 180px !important; }
}
@media (max-width:375px){
	.pro_box .list{ width:100%; padding-bottom: 66%; }
	.pro_box .list p span.color0{ font-size: 15px;  }
}

.img_box img {
    vertical-align: middle;
    border: none;
    display: inline-block;
}


.img_box img {
    vertical-align: middle;
    border: none;
    display: block;
    height: 319px;
    margin: 0 auto;
}




.prov{
	padding:0px 0 50px;
}
.prov_slide{
	width:500px;
	float:left;
	position: relative;
}
.prov_slide .mainSlide{
	padding-bottom:25px;
}
.prov_slide .mainSlide .img_box{
	width:500px;
	height:500px;
}
.prov_slide .mainSlide .swiper-scrollbar{
	height:1px;
}

.prov_slide .mainSlide .swiper-scrollbar-drag{  margin-top: -1px; height: 3px; }

.prov_slide .slide_btn{
	height:500px;
	position: absolute;
	right:-130px;
	top:0;
}
.prov_slide .swiper-container{ height:500px; }
.prov_slide .slide_btn .img_box{
	margin-bottom:5px;
	border:1px solid #ccc;
	cursor: pointer;
	box-sizing: border-box;
}
.prov_slide .slide_btn .swiper-slide-thumb-active .img_box{ border:1px solid #000; }

.prov_slide .slide_btn .img_box{
	width:118px;
	height:118px;
}


.prov .text_box{
	width:55%;
	padding: 70px 100px 30px;
	height: 500px;
	float:right;
	box-sizing: border-box;
	background-color: #f6f6f6;
}
.prov .text_box h2{
	font-size:36px;
	color:#333;
	padding-bottom:22px;
}

.prov .text_box ul{ padding: 20px 0; width: 100%; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; }
.prov .text_box li{ float: left; width: 50%; line-height: 48px; }
.prov .text_box li em{ color: #999; }

.prov .text_box .link_a{ margin-top: 35px; }
.prov .text_box .link_a a{ display: inline-block; margin-right: 12px; padding: 0 40px; line-height: 50px; border-radius: 25px; background-color: #fff; }
.prov .text_box .link_a a:last-of-type{ margin-right: 0; }
.prov .text_box .link_a .black{ background-color: #22242e; color: #fff; }

@media (max-width:1500px){
	.prov{
		padding:0px 15px 45px;
	}
	.prov_slide{
		width:450px;
	}
	.prov_slide .mainSlide .img_box{
		width:450px;
		height:450px;
	}
	.prov_slide .slide_btn,.prov_slide .swiper-container{ height:450px;}
	.prov_slide .slide_btn{ right: -110px; }
	.prov_slide .slide_btn .img_box{ width: 100px; height: 100px; }
	.prov .text_box{ width: 50%; height: 450px; padding: 50px 70px 30px; }
}
@media (max-width:1200px){
	.prov_slide{
		width:400px;
	}
	.prov_slide .mainSlide .img_box{
		width:400px;
		height:400px;
	}
	.prov_slide .slide_btn,.prov_slide .swiper-container{ height:400px;}
	.prov_slide .slide_btn{
		right:-100px;
	}
	.prov_slide .slide_btn .img_box{
		width:90px;
		height:90px;
	}
	.prov .text_box{ width: 45%; height: 400px; padding: 40px 50px; }
	.prov .text_box li{ line-height: 40px; }
	.prov .text_box .link_a a{ padding: 0 20px; line-height: 40px; }
}
@media (max-width:991px){
	.prov{
		padding:40px 15px;
	}
	.prov_slide{
		width:300px;
	}
	.prov_slide .mainSlide .img_box{
		width:300px;
		height:300px;
	}
	.prov_slide .slide_btn,.prov_slide .swiper-container{ height:300px;}
	.prov_slide .slide_btn{ right: -80px; }
	.prov_slide .slide_btn .img_box{ width: 70px; height: 70px; }
	.prov .text_box{ width: 45%; height: 300px; padding: 30px 20px; }
	.prov .text_box h2{ padding-bottom: 10px; font-size: 28px; }
	.prov .text_box li{ line-height: 30px; }
	.prov .text_box .link_a{ margin-top: 15px; }
	.prov .text_box .link_a a{ margin: 5px 3px 5px 0; padding: 0 15px; line-height: 40px; font-size: 15px; }
}

@media (max-width:768px){
	.prov{
		padding:0px 15px 30px;
	}
	.prov_slide{
		float:none;
		display:block;
		margin:0 auto;
		width:auto;
		width:300px;
		margin-bottom:30px;
	}
	.prov_slide .mainSlide .img_box{
		width:300px;
		height:300px;
	}
	.prov_slide .slide_btn{
		display:none;
	}
	.prov .text_box{
		float:none;
		display:block;
		width:auto;
	}
	.prov .text_box{ padding: 20px 15px; height: auto; }
	.prov .text_box .link_a a{ font-size: 14px; }
}

@media (max-width:480px){
	.prov .text_box h2{ font-size: 22px; }
	.prov .text_box ul{ padding: 10px 0; }
}
@media (max-width:420px){
	.prov_slide{
		width:280px;
	}
	.prov_slide .mainSlide .img_box{
		width:280px;
		height:280px;
	}
}
@media (max-width:370px){
	.prov_slide{
		width:280px;
	}
	.prov_slide .mainSlide .img_box{
		width:280px;
		height:280px;
	}

}



.pdetail{ margin-bottom: 90px; padding: 50px 135px 86px; box-sizing: border-box; background-color: #f6f6f6; }
.pdetail h4{ margin-bottom: 42px; font-size: 30px; text-align: center; color: #22242e; }
.pdetail h4 em{ margin-top: 12px; display: block; font-size: 36px; letter-spacing: 6px; font-family: "beb"; text-transform: uppercase; }
.pdetail .text_box{ line-height: 28px; }


@media (max-width:1500px){
	.pdetail{ margin-bottom: 70px; padding: 45px 115px 75px;}
	.pdetail h4{ font-size: 28px;}
	.pdetail h4 em{ font-size: 32px; letter-spacing: 5px;}
}
@media (max-width:1200px){
	.pdetail{ margin-bottom: 60px; padding: 40px 85px 65px;}
	.pdetail h4 em{ font-size: 30px;}
}
@media (max-width:991px){
	.pdetail{ margin-bottom:50px; padding: 35px 60px 55px;}
	.pdetail h4{ margin-bottom: 32px; font-size: 24px;}
	.pdetail h4 em{ font-size: 28px;}
}
@media (max-width:768px){
	.pdetail{ margin-bottom: 40px; padding: 30px 30px 45px;}
	.pdetail h4{ margin-bottom: 25px;  font-size: 22px;}
	.pdetail h4 em{ margin-top: 8px; font-size: 24px; letter-spacing: 4px; }
}
@media (max-width:480px){
	.pdetail{ margin-bottom: 30px; padding: 25px 15px 30px;}
	.pdetail h4{ margin-bottom: 20px; font-size: 19px;}
	.pdetail h4 em{ font-size: 20px; letter-spacing: 3px; }
}


.swiper-pagination{ text-align:center; z-index:9;}
.swiper-pagination-bullet{ display:inline-block; width:10px; height:10px; background-color: #c9c9c9; cursor:pointer; opacity: 1;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 10px; }
.swiper-pagination-bullet-active{ background-color: #22242e; }

.fillbox{ height: 100px; }



@media (max-width:1500px){
	.fbanner{ padding-top: 0px;}
	.fillbox{ height: 90px; }
}
@media (max-width:1200px){
	
}
@media (max-width:991px){
	.fbanner{ padding-top: 0px;}
	.fillbox{ height: 66px; }
}
@media (max-width:768px){
	.pc_show{ display:none; }
	.ph_show{ display:block; }

	.swiper-pagination-bullet{ width:8px; height:8px;}
	.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 5px; }
}
@media (max-width:480px){
	.fbanner{ padding-top: 0px;}
	.fillbox{ height: 50px; }
}



/* pro-det */
.jump{ padding: 36px 0px; box-sizing: border-box; }
.jump .breadcrumb{
	padding: 10px 0;
	float: left;
	display:inline-block;
	color: #666;
	font-size: 14px;
}
.jump .breadcrumb li{
	display:inline-block;
	float:left;
	height:30px;
	line-height:30px;
	position: relative;
	padding:0 5px 0 20px;
}
.jump .breadcrumb li::after{ display:inline-block; content: '>'; height:30px; width:20px; position: absolute; left:0; top:0; text-align:center; line-height:30px; color:#666; }
.breadcrumb li:nth-child(1),.breadcrumb li:nth-child(2){ padding-left:0; }
.breadcrumb li:nth-child(1)::after,.breadcrumb li:nth-child(2)::after{ display:none; }
.breadcrumb li a{
	display:block;
	color:inherit;
}
.breadcrumb li a:hover{
	text-decoration: underline;
	color:#22242e;
}

.jump .return{ float: right; display: inline-block; padding: 0 40px;line-height: 50px; border-radius: 25px; background-color: #f6f6f6; }
.jump .return:hover{ background-color: #22242e; color: #fff; }


@media (max-width:1500px){
	.jump{ padding: 30px 15px; }
	.jump .breadcrumb{ padding: 5px 0; }
	.jump .return{ padding: 0 20px; line-height: 40px; border-radius: 20px; }
}
@media (max-width:1200px){
	.jump{ padding: 26px 15px; }
}
@media (max-width:991px){
	.jump{ padding: 22px 15px; }
}
@media (max-width:768px){
	.jump{ padding: 18px 15px; }
}
@media (max-width:480px){
	.jump{ padding: 10px 15px; }
}
@media (max-width:375px){
	.jump .breadcrumb{ padding: 3px 0; }
	.jump .return{ padding: 0 12px; line-height: 36px;}
}


.main {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}