@charset "UTF-8";

/*
Theme Name: 舒舍工匠
Theme URI: https://www.ssgj100.com/mc/
Author: the 承寒
Author URI: https://www.bluelass.com/
Description: BLS
Requires at least: 4.0
Tested up to: 5.7
Requires PHP: 5.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bls
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
*/
@media (-webkit-max-device-pixel-ratio: 1) {
	::-webkit-scrollbar-track-piece {
		background-color: #ffffff;
	}

	::-webkit-scrollbar {
		width : 6px;
		height: 6px;
	}

	::-webkit-scrollbar-thumb {
		background-color: #c2c2c2;
		background-clip : padding-box;
		min-height      : 28px;
	}

	::-webkit-scrollbar-thumb:hover {
		background-color: #a0a0a0;
	}
}

* {
	-webkit-touch-callout: none;
	-webkit-user-select  : none;
	-khtml-user-select   : none;
	-moz-user-select     : none;
	-ms-user-select      : none;
	user-select          : none;
}

body {
	position        : relative;
	margin          : 0;
	background-color: #f3f3f3;
}

.ani,
.ani * {
	-webkit-transition: all 0.4s;
	-ms-transition    : all 0.4s;
	transition        : all 0.4s;
}

.l2 {
	overflow          : hidden;
	text-overflow     : ellipsis;
	display           : -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.navbar {
	padding-top  : 15px;
	min-height   : 80px;
	margin-bottom: 0px;
}

.navbar-inverse .navbar-toggle .icon-bar {
	background-color: #666;
}

.navbar-inverse {
	background-color: transparent;
	border-color    : transparent;
}

.navbar-black {
	background-color: #000;
}

.navbar-inverse .show {
	background-color: rgba(8, 0, 0, .75);
}

.navbar-inverse .navbar-nav>li>a {
	color: #999;
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
	color           : #fff;
	font-weight     : bold;
	background-color: transparent;
}

.box {
	text-align: center;
	padding   : 50px 0;
	font-size : 13px;
}

.reverse {
	color                : #ffffff;
	background-color     : #070019;
	background-repeat    : no-repeat;
	background-size      : auto 100%;
	background-attachment: fixed;
	background-position  : center center;
}

.title {
	font-size     : 30px;
	font-weight   : 500;
	letter-spacing: 4px;
	position      : relative;
	text-align    : center;
	padding       : 0 15px 40px 15px;
}

.reverse .title {
	color: #ffffff;
}

.title small {
	letter-spacing: 2px;
	display       : block;
	font-size     : 14px;
	opacity       : .5;
}

.title+p {
	padding      : 0 15px;
	margin-bottom: 50px;
}

.title:before {
	content         : ' ';
	position        : absolute;
	width           : 160px;
	left            : 50%;
	margin-left     : -80px;
	background-color: #E61F19;
	height          : 2px;
	bottom          : 30px;
}

.title:after {
	content    : ' ';
	position   : absolute;
	width      : 0px;
	left       : 50%;
	margin-left: -12px;
	height     : 0px;
	bottom     : 10px;
	border     : 12px solid transparent;
	border-top : 8px solid #E61F19;
}

.reverse .title:before {
	background-color: #ffffff;
}

.reverse .title:after {
	border-top-color: #ffffff;
}

.banner {
	position        : relative;
	overflow        : hidden;
	background-color: #fff;
}

.banner img {
	opacity   : .8;
	width     : 100%;
	min-width : 768px;
	height    : auto;
	max-height: 400px;
}

.banner h2 {
	position       : absolute;
	width          : 100%;
	height         : 100%;
	margin         : 0;
	top            : 0;
	left           : 0;
	color          : #000;
	display        : flex;
	align-items    : center;
	justify-content: center;
	letter-spacing : 4px;
	text-shadow    : 0 0 20px rgba(255, 255, 255, 1);
}

.breadcrumb {
	padding         : 20px 0;
	border-bottom   : 1px solid #ccc;
	margin-bottom   : 20px;
	background-color: transparent;
}

.breadcrumb a {
	color: #000;
}

.content {
	line-height: 2;
}

.content h2 {
	border-bottom: 1px solid #ccc;
	margin-bottom: 20px;
	padding      : 20px 0;
}

.content p {
	margin-bottom: 2em;
}

.content a {
	color: #333;
}

.content img {
	max-width: 100%;
	height   : auto;
	display  : block;
	margin   : 0 auto;
}

.content .list-group .list-group-item::before {
	content         : ' ';
	display         : inline-block;
	width           : 3px;
	height          : 16px;
	background-color: #ddd;
	vertical-align  : text-top;
	margin-right    : 10px;
}

.content .list-group .list-group-item span {
	float    : right;
	font-size: 12px;
	color    : #999;
}

.content .meta span+span {
	margin-left : 5px;
	border-left : 1px solid #888;
	padding-left: 10px;
}

#banner .swiper-pagination-bullet {
	background-color: #fff;
	opacity         : .5;
}

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

#welcome .bls {
	font-size: 100px;
}

#welcome h3 {
	font-size: 17px;
}

#welcome .active h3 {
	color: #E61F19;
}

#welcome h3 small {
	display  : block;
	opacity  : .5;
	font-size: 17px;
}


#news .link a {
	color        : #000;
	border-radius: 40px;
	line-height  : 40px;
	height       : 40px;
	padding      : 0 15px;
	margin-top   : 20px;
	display      : inline-block;
	border       : 1px solid #000;
}

#news .link a+a {
	margin-left: 15px;
}

#news .swiper-container {
	margin-top: 50px;
}

#news .row {
	padding         : 15px;
	background-color: #eee;
}

.intro {
	text-align: left;
}

.intro .row+.row {
	margin-top: 20px;
}

.intro .img-responsive {
	overflow  : hidden;
	height    : 200px;
	text-align: center;
}

.intro .img-responsive img {
	position: relative;
	width   : auto;
	height  : 100%;
	display : block;
}

.intro .img-responsive:hover img {
	height     : 120%;
	margin-top : -10%;
	margin-left: -10%;
}

.intro strong {
	display    : block;
	position   : relative;
	font-size  : 48px;
	font-weight: normal;
	line-height: 1;
	margin-top : 10px;
	padding    : 20px 0;
}

.intro strong:before,
.intro strong:after {
	font-size : 18px;
	content   : "/";
	position  : absolute;
	font-style: italic;
	font-size : 24px;
}

.intro strong:before {
	left: 43px;
	top : 0;
}

.intro strong:after {
	left  : 0;
	bottom: 0;
}

.intro strong span {
	font-size: 20px;
}

.intro a {
	color      : #000;
	font-weight: bold;
}

#products {
	background-image: url(img/b6.jpg);
}

#products .nav-tabs {
	display         : inline-block;
	margin          : 0 auto;
	background-color: #478384;
	border-bottom   : 0 none;
}

#products .nav-tabs>li>a {
	border-radius: 0;
	padding      : 10px 30px;
	color        : #fff;
}

#products .nav-tabs>li.active>a,
#products .nav-tabs>li.active>a:focus,
#products .nav-tabs>li.active>a:hover,
#products .nav-tabs>li>a:focus,
#products .nav-tabs>li>a:hover {
	color: #000;
}

#products .tab-content {
	padding: 50px 0;
}

#products h2 {
	position    : relative;
	text-align  : left;
	padding-left: 30px;
}

#products h2 span {
	position      : relative;
	font-size     : 16px;
	font-weight   : normal;
	display       : block;
	text-transform: uppercase;
}

#products h2 span::after {
	content         : ' ';
	width           : 10px;
	height          : 50px;
	background-color: #fff;
	position        : absolute;
	left            : -30px;
	right           : -85px;
}

#products ul {
	list-style: none;
	padding   : 0;
	margin-top: 50px;
}

#products small {
	color: #fff;
}

#products h2+p {
	text-align: left;
}

#products .bls {
	font-size: 18px;
}

#products img {
	cursor: pointer;
}

#cases {
	background-image: url(img/b1.jpg);
}

#rank {
	margin-top: 50px;
	padding   : 0;
	list-style: none;
	text-align: left;
}

#rank li {
	margin-bottom: 30px;
}

#rank li img {
	width : 100%;
	height: auto;
	min-height: 200px;
}

#rank li p {
	position: relative;
	margin  : 0 0 15px 0;
	overflow: hidden;
}

#rank li p i,
#rank li p em,
#rank li p span {
	position: absolute;
	display : block;
	width   : 100%;
	height  : 100%;
}

#rank li p i {
	left  : 0;
	bottom: -100%;
}

#rank li:hover p i {
	bottom          : 0;
	background-color: rgba(8, 0, 0, .75);
}

#rank li p span {
	padding    : 15px;
	top        : -100%;
	left       : 0;
	text-indent: 2em;
}

#rank li:hover p span {
	top: 0;
}

#rank li p em {
	left  : 100%;
	bottom: 0;
}

#rank li:hover p em {
	left         : 0;
	border-bottom: 5px solid #E61F19;
}

#rank li a {
	font-size : 18px;
	text-align: left;
	color     : #fff;
}

#vr {
	padding-top   : 50px;
	padding-bottom: 50px;
}

#vr .row {
	position  : relative;
	overflow  : hidden;
	max-height: 500px;
}

#vr a {
	position     : absolute;
	top          : 50%;
	left         : 50%;
	width        : 280px;
	height       : 80px;
	border       : 1px solid #fff;
	border-radius: 20px;
	color        : #fff;
	margin       : -40px 0 0 -140px;
	text-align   : center;
	line-height  : 80px;
	font-size    : 20px;
	z-index      : 2;
}

#vr a:hover {
	text-decoration : none;
	background-color: rgba(8, 0, 0, .75);
}

#vr a:hover+img {
	filter        : blur(4px);
	-webkit-filter: blur(4px);
}

#vr i {
	font-size     : 36px;
	vertical-align: bottom;
	margin-right  : 10px;
}

#join {
	background-color: #fff;
	text-align      : center;
}

#join ul {
	margin-top: 30px;
	padding   : 0;
	list-style: none;
}

#join ul li {
	margin-bottom: 30px;
}

#join .hexagon {
	width        : 48px;
	height       : 82px;
	margin       : 0 auto;
	border-top   : 1px solid #666;
	border-bottom: 1px solid #666;
	position     : relative;
	text-align   : center;
	line-height  : 81px;
}

#join .hexagon:before,
#join .hexagon:after {
	content      : ' ';
	position     : absolute;
	left         : 0;
	top          : 0;
	width        : 48px;
	height       : 81.6px;
	transform    : translate(-50%, -50%);
	border-top   : 1px solid #666;
	border-bottom: 1px solid #666;
}

#join .hexagon:before {
	transform: rotate(60deg);
}

#join .hexagon:after {
	transform: rotate(300deg);
}

#join .hexagon i {
	font-size: 40px;
}

#join li p {
	margin-top  : 15px;
	text-align  : center;
	margin-left : -15px;
	margin-right: -15px;
}

#join .swiper-container {
	padding-bottom: 60px;
}

#join .swiper-slide {
	width     : 80%;
	background: #fff;
	box-shadow: 0 8px 30px #ddd;
}

#join .box {
	padding-top        : 100px;
	padding-bottom     : 100px;
	background-image   : url(img/b8.jpg);
	background-position: left bottom;
}

#join .box a {
	margin          : 0 auto;
	width           : 80%;
	height          : 60px;
	line-height     : 60px;
	font-size       : 18px;
	max-width       : 600px;
	display         : inline-block;
	background-color: #478384;
	color           : #fff;
}

#join .box a i,
#join .box a span {
	padding: 0 20px;
	display: none;
}

#join .box a i {
	font-size       : 24px;
	float           : left;
	background-color: #38b48b;
}

#join .box a span {
	font-size       : 14px;
	float           : right;
	background-color: #3eb370;
}

.testimonial {
	background: #f9f8f3;
	padding   : 30px;
	text-align: left;
}

.testimonial .col-sm-4 {
	text-align: center;
}


.testimonial .col-sm-8 {
	margin-top: 15px;

}

.testimonial img {
	width  : 100px;
	height : 100px;
	display: block;
}

.testimonial span {
	margin-top: 10px;
	display   : block;
}

#contract {
	background-color: #333;
	text-align      : center;
	color           : #888;
	line-height     : 24px;
	padding-bottom  : 60px;
}

#contract address {
	line-height: 24px;
}

#contract h4 {
	font-size    : 16px;
	margin       : 50px 0 20px 0;
	padding      : 20px 0;
	border-bottom: 1px solid #444;
}

#contract ol,
#contract ul {
	list-style  : square;
	padding-left: 15px;
	text-align  : left;
}

#contract li {
	border-bottom: 1px dotted #555;
}

#contract a {
	color: #888;
}

#contract span {
	float    : right;
	font-size: 12px;
}

#contract img {
	width : 100px;
	height: 100px;
}

.foot {
	background: #000;
	padding   : 20px;
	margin    : 0;
	color     : #999999;
	font-size : 13px;
	text-align: center;
	word-break: break-all;
	position  : relative;
	overflow  : hidden;
}

.foot p {
	margin-bottom: 0;
}

.foot p+p {
	margin-top: 10px;
}

.foot ul {
	position: absolute;
	bottom  : 0;
	left    : 0;
	right   : 0;
}

.foot li {
	display: inline-block;
}

.foot li+li {
	padding-left: 15px;
}

.foot li a {
	font-size: 12px;
	color    : #020202;
}

.foot li a:hover {
	color: #fff;
}

@media (min-width: 768px) {
	.navbar-inverse .show {
		background-color: transparent;
	}

	.navbar-inverse .navbar-nav>li>a {
		color: #888;
	}

	.navbar-inverse .navbar-nav>.active>a,
	.navbar-inverse .navbar-nav>.active>a:focus,
	.navbar-inverse .navbar-nav>.active>a:hover {
		color: #555;
	}

	.title {
		margin-top: 50px;
		font-size : 38px;
	}

	.title+p {
		font-size: 16px;
	}

	#welcome .bls {
		width           : 180px;
		height          : 180px;
		line-height     : 180px;
		font-size       : 120px;
		display         : block;
		border-radius   : 50%;
		margin          : 0 auto;
		background-color: #fff;
		border          : 1px solid #eee;
	}

	#welcome .active .bls {
		box-shadow: 0 0 10px #ffd8d6;
	}

	#join ul {
		max-width   : 768px;
		margin-left : auto;
		margin-right: auto;
	}

	#join .box {
		background-size: 100% auto;
		background-position: center bottom;
	}

	#join .box a i,
	#join .box a span {
		display: inline-block;
	}

	#contract {
		text-align: left;
	}
}