/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Featured
# Features
# Showcase
# Footer Featured
# Media Queries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Featured
--------------------------------------------------------------*/

#featured {
	background-image   : url("../../images/page/product/header-featured-bg.jpg");
	background-position: 50% 0;
	background-repeat  : no-repeat;
	background-size    : auto 100%;
	height             : 28.75em;
	overflow           : hidden;
	position: relative;
}
/* pc端点击注册显示二维码部分（手机端跳转链接） */
#featured .qr-wrap{
	display: none;
	position: absolute;
	bottom: 2em;
	right: 6em;
	width: 10em;
}
#featured .qr-wrap .register-title{
	text-align: center;
	margin-bottom: 0.5em;
}
#featured .qr-wrap .register-image{
	display: block;
	width: 10em;
	height: 10em;
}

#featured .featured-header,
#featured .featured-main {
	margin-left : auto;
	margin-right: 0;
	width       : 45%;
}

#featured .featured-header {
	margin-top: 8em;
}

#featured .featured-title {
	color        : #222;
	font-size    : 2.5em;
	font-weight  : normal;
	margin-bottom: .75em;
}

#featured .featured-title:before {
	border-color         : #ff3c26;
	-webkit-border-radius: .125em;
	border-radius        : .125em;
	border-style         : solid;
	border-width         : .05em;
	color                : #ff3c26;
	content              : "买卖助理";
	display              : block;
	font-size            : .45em;
	line-height          : 1.875;
	padding              : 0 .5em;
	position             : absolute;
	top                  : -2.5em;
}

#featured .featured-summary {
	color      : #333;
	font-size  : 1em;
	line-height: 1.5;
}

#featured .featured-main {
	margin-top: 3em;
}

#featured .featured-main .external {
	background-color     : #ff3c26;
	-webkit-border-radius: .25em;
	border-radius        : .25em;
	color                : #fff;
	display              : inline-block;
	font-size            : 1.25em;
	line-height          : 2.5;
	padding              : 0 1em;
	text-align           : center;
}

/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/

#features .subsection {
	overflow  : hidden;
	text-align: center;
}

#features .subsection:nth-child(2n) {
	background-color: #f8f8f8;
}

#features .subsection-header {
	color        : #333;
	line-height  : 1.5;
	margin-bottom: 4em;
	margin-top   : 4em;
}

#features .subtitle {
	color        : #24b4ff;
	font-size    : 1.75em;
	font-weight  : normal;
	margin-bottom: .5em;
}

#features .title {
	font-size  : 2.215em;
	font-weight: normal;
}

#features .summary {
	font-size: 1em;
}

#features .feature-item {
	display        : inline-block;
	list-style-type: none;
	vertical-align : top;
}

#features .subsection:nth-child(1) .features {
	margin-bottom: 6em;
}

#features .subsection:nth-child(1) .feature-item {
	position: relative;
	width   : 30%;
}

#features .subsection:nth-child(1) .feature-thumbnail {
	background-image : url("../../images/page/product/features-subsection-0.png");
	background-repeat: no-repeat;
	background-size  : auto 100%;
	margin           : 0 auto 2em;
	width            : 9.75em;
}

#features .subsection:nth-child(1) .feature-item:nth-child(2) .feature-thumbnail {
	background-position: 50% 0;
}

#features .subsection:nth-child(1) .feature-item:nth-child(3) .feature-thumbnail {
	background-position: 100% 0;
}

#features .subsection:nth-child(1) .feature-thumbnail::before {
	content    : "";
	display    : block;
	padding-top: 100%;
}

#features .subsection:nth-child(1) .feature-title {
	color        : #333;
	font-size    : 1.125em;
	margin-bottom: .25em;
}

#features .subsection:nth-child(1) .feature-summary {
	color      : #777;
	font-size  : 1em;
	line-height: 1.5;
}

#features .subsection:nth-child(1) .feature-scene {
	background-color  : #fff;
	bottom            : 100%;
	font-size         : 1em;
	left              : 0;
	margin            : 0 auto 1em;
	opacity           : 0;
	padding           : .5em;
	position          : absolute;
	right             : 0;
	-webkit-transform : translateY(30%);
	transform         : translateY(30%);
	-webkit-transition: opacity .4s cubic-bezier(.4, 0, .2, 1), -webkit-transform .4s cubic-bezier(.4, 0, .2, 1);
	transition        : opacity .4s cubic-bezier(.4, 0, .2, 1), transform .4s cubic-bezier(.4, 0, .2, 1);
	width             : 70%;
}

#features .subsection:nth-child(1) .feature-item:hover .feature-scene {
	opacity          : 1;
	-webkit-transform: translateY(0);
	transform        : translateY(0);
}

#features .subsection:nth-child(1) .feature-scene:after,
#features .subsection:nth-child(1) .feature-scene:before {
	background-color : #fff;
	content          : "";
	height           : .5em;
	left             : 50%;
	margin           : -.25em 0 0 -.25em;
	position         : absolute;
	top              : 100%;
	-webkit-transform: rotate(45deg);
	transform        : rotate(45deg);
	width            : .5em;
}

#features .subsection:nth-child(1) .feature-scene:before {
	z-index: -1;
}

#features .subsection:nth-child(1) .feature-item:nth-child(1) .feature-scene,
#features .subsection:nth-child(1) .feature-item:nth-child(1) .feature-scene:before {
	-webkit-box-shadow: rgba(255, 169, 30, .43) 0 0 .5em;
	box-shadow        : rgba(255, 169, 30, .43) 0 0 .5em;
}

#features .subsection:nth-child(1) .feature-item:nth-child(1) .feature-scene {
	color: #ff722a;
}

#features .subsection:nth-child(1) .feature-item:nth-child(2) .feature-scene,
#features .subsection:nth-child(1) .feature-item:nth-child(2) .feature-scene:before {
	-webkit-box-shadow: rgba(22, 166, 233, .43) 0 0 .5em;
	box-shadow        : rgba(22, 166, 233, .43) 0 0 .5em;
}

#features .subsection:nth-child(1) .feature-item:nth-child(2) .feature-scene {
	color: #0258b5;
}

#features .subsection:nth-child(1) .feature-item:nth-child(3) .feature-scene,
#features .subsection:nth-child(1) .feature-item:nth-child(3) .feature-scene:before {
	-webkit-box-shadow: rgba(255, 66, 0, .43) 0 0 .5em;
	box-shadow        : rgba(255, 66, 0, .43) 0 0 .5em;
}

#features .subsection:nth-child(1) .feature-item:nth-child(3) .feature-scene {
	color: #ff4200;
}

#features .subsection:nth-child(2) {
	padding-bottom: 4em;
}

#features .subsection:nth-child(2) .subsection-main {
	background-image   : url("../../images/page/product/features-subsection-1.png");
	background-position: 50% 100%;
	background-repeat  : no-repeat;
	background-size    : auto 100%;
	height             : 20.5em;
}

#features .subsection:nth-child(3) .features {
	margin-bottom: 2em;
}

#features .subsection:nth-child(3) .feature-item {
	margin-bottom: 4em;
	width        : 30%;
}

#features .subsection:nth-child(3) .feature-thumbnail {
	background-image : url("../../images/page/product/features-subsection-2.png");
	background-repeat: no-repeat;
	background-size  : auto 100%;
	margin           : 0 auto 2em;
	width            : 9.75em;
}

#features .subsection:nth-child(3) .feature-item:nth-child(2) .feature-thumbnail {
	background-position: 20% 0;
}

#features .subsection:nth-child(3) .feature-item:nth-child(3) .feature-thumbnail {
	background-position: 40% 0;
}

#features .subsection:nth-child(3) .feature-item:nth-child(4) .feature-thumbnail {
	background-position: 60% 0;
}

#features .subsection:nth-child(3) .feature-item:nth-child(5) .feature-thumbnail {
	background-position: 80% 0;
}

#features .subsection:nth-child(3) .feature-item:nth-child(6) .feature-thumbnail {
	background-position: 100% 0;
}

#features .subsection:nth-child(3) .feature-thumbnail::before {
	content    : "";
	display    : block;
	padding-top: 100%;
}

#features .subsection:nth-child(3) .feature-title {
	color        : #333;
	font-size    : 1.125em;
	margin-bottom: .25em;
}

#features .subsection:nth-child(3) .feature-summary {
	color      : #777;
	font-size  : 1em;
	line-height: 1.5;
}

#features .subsection:nth-child(4) .subsection-main .steps {
	background-image   : url("../../images/page/product/features-subsection-3.png");
	background-position: 50% 0;
	background-repeat  : no-repeat;
	background-size    : auto 100%;
	height             : 237.125em;
}

#features .subsection:nth-child(4) .subsection-main .step-list {
	display: none;
}

#features .subsection:nth-child(5) {
	margin-bottom: 4em;
}

#features .subsection:nth-child(5) .subsection-main {
	background-image   : url("../../images/page/product/features-subsection-4.png");
	background-position: 50% 0;
	background-repeat  : no-repeat;
	background-size    : auto 100%;
	height             : 24.565em;
}

/*--------------------------------------------------------------
# Showcase
--------------------------------------------------------------*/

#showcase {
	background-color   : #4181e9;
	background-image   : url("../../images/page/product/showcase-bg.png");
	background-position: 50% 100%;
	background-repeat  : no-repeat;
	background-size    : auto 100%;
	padding-bottom     : 3em;
	overflow           : hidden;
}

#showcase .section-header {
	color        : #fff;
	margin-bottom: 3em;
	margin-top   : 4em;
	text-align   : center;
}

#showcase .section-title {
	font-size  : 2em;
	font-weight: normal;
}

#showcase .section-main {
	text-align: center;
}

#showcase .section-main .showcase-item {
	background-color: rgba(255, 255, 255, .95);
	display         : inline-block;
	height          : 20em;
	margin          : 0 1.75%;
	overflow        : hidden;
	vertical-align  : top;
	width           : 20%;
}

#showcase .section-main .showcase-wrap {
	margin    : 2em 1.25em;
	text-align: left;
	text-align: justify;
}

#showcase .section-main .showcase-header {
	margin-bottom: 1em;
	text-align   : center;
}

#showcase .section-main .showcase-avatar {
	margin-bottom: 1em;
	padding-top  : 60%;
	position     : relative;
}

#showcase .section-main .showcase-avatar .avatar-image {
	bottom  : 0;
	left    : 0;
	margin  : auto;
	position: absolute;
	right   : 0;
	top     : 0;
}

#showcase .section-main .showcase-title {
	font-size  : 1.125em;
	font-weight: bold;
}

#showcase .section-main .showcase-summary {
	font-size  : .75em;
	line-height: 1.5;
}

/*--------------------------------------------------------------
# Footer Featured
--------------------------------------------------------------*/

#footer-featured {
	overflow: hidden;
}

#footer-featured .featured-header {
	margin-bottom: 3em;
	margin-top   : 4em;
	text-align   : center;
}

#footer-featured .featured-title {
	font-size  : 2em;
	font-weight: normal;
}

#footer-featured .featured-main {
	margin-bottom: 4em;
	text-align   : center;
}

#footer-featured .feature-list {
	margin-bottom: 2em;
}

#footer-featured .feature-item {
	display       : inline-block;
	vertical-align: top;
	width         : 18%;
}

#footer-featured .feature-thumbnail {
	background-image : url("../../images/page/product/footer-featured.png");
	background-repeat: no-repeat;
	background-size  : auto 100%;
	margin           : 0 auto 1.5em;
	width            : 7.75em;
}

#footer-featured .feature-thumbnail::before {
	content    : "";
	display    : block;
	padding-top: 100%;
}

#footer-featured .feature-item:nth-child(2) .feature-thumbnail {
	background-position: 25% 0;
}

#footer-featured .feature-item:nth-child(3) .feature-thumbnail {
	background-position: 50% 0;
}

#footer-featured .feature-item:nth-child(4) .feature-thumbnail {
	background-position: 75% 0;
}

#footer-featured .feature-item:nth-child(5) .feature-thumbnail {
	background-position: 100% 0;
}

#footer-featured .external {
	background-color     : #ff5236;
	-webkit-border-radius: .208333em;
	border-radius        : .208333em;
	color                : #fff;
	display              : inline-block;
	font-size            : 1.125em;
	line-height          : 3;
	margin               : 0 auto;
	padding              : 0 2.5em;
	text-align           : center;
}

/*--------------------------------------------------------------
# Media Queries
--------------------------------------------------------------*/
@media screen and ( max-width: 1200px ) {
	#featured,
	#features,
	#footer-featured,
	#showcase {
		font-size: .8rem;
	}
}
@media screen and ( max-width: 960px ) {
	#featured,
	#features,
	#footer-featured,
	#showcase {
		font-size: .75rem;
	}

	#features .subsection:nth-child(2),
	#features .subsection:nth-child(4),
	#features .subsection:nth-child(5) {
		display: none;
	}

	#showcase .section-main .showcase-list {
		margin-bottom: -2em;
	}

	#showcase .section-main .showcase-item {
		margin-bottom: 2em;
		width        : 40%;
	}

	#showcase .section-main .showcase-summary {
		line-height: 1.25;
	}
}
@media screen and ( max-width: 640px ) {
	#featured,
	#features,
	#footer-featured,
	#showcase {
		font-size: .6rem;
	}

	#featured .featured-header,
	#featured .featured-main {
		margin-right: auto;
		text-align  : center;
		width       : 85%;
	}

	#featured .featured-title:before {
		left        : 0;
		margin-left : auto;
		margin-right: auto;
		right       : 0;
		width       : 6em;
	}

	#features .subsection:nth-child(1) .feature-thumbnail,
	#features .subsection:nth-child(3) .feature-thumbnail {
		width: 6em;
	}

	#footer-featured .feature-thumbnail {
		width: 4em;
	}
}