.device-col{

}

.reference-col {
	padding-bottom: 15px;
}
.reference-col {
	padding-bottom: 15px;
}
.device-content-img {
	width: 100%;
}
#macbook-reference {
	filter: drop-shadow(0px 10px 12px #666);
	-webkit-filter: drop-shadow(0px 10px 12px #666);
	padding: 17px 20px 50px 50px;
}
.reference-area {
	padding-top: 50px;
}
.reference-area .reference-title {
	color: #1e76bc;
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 0px;
}
.reference-area .reference-title-description {
	font-size: 13px;
	font-weight: 400;
	margin: -7px 0px 0px 10px;
	padding-bottom: 13px;
}
.reference-area .reference-description {
}
.reference-area .reference-go {
	display: block;
	width: 85px;
	background-color: #1e76bc;
	color: #fff;
	padding: 7px 10px;
	text-align: center;
	float: right;
	border-radius: 2px;
	margin-top: 30px;
	margin-right: 10px;
	box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.4);
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.reference-area .reference-go:hover {
	text-decoration: none;
	box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.4);
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}


.reference-detail-area {
    background-color: #fff;
    padding: 15px 25px 35px 50px;
    height: auto;
    border-radius: 25px;
    display: inline-block;
    margin: 10px auto;
    box-shadow: 7px 6px 23px 3px rgba(30, 30, 30, 0.48);
}
.reference-detail-area .reference-detail-title {
	color: #e74c3c;
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 0px;
}
.reference-detail-area .reference-detail-title-description {
	font-size: 13px;
	font-weight: 400;
	margin: -7px 0px 0px 10px;
	padding-bottom: 13px;
}
.reference-detail-area .reference-detail-description {
}
.reference-detail-area .reference-detail-go {
	display: block;
	width: 110px;
	background-color: #1e76bc;
	color: #fff;
	padding: 7px 10px;
	text-align: center;
	float: right;
	border-radius: 2px;
	margin-top: 30px;
	margin-right: 10px;
	box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.4);
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.reference-detail-area .reference-detail-go:hover {
	text-decoration: none;
	box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.4);
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}



.arrows {
	width: 60px;
	height: 72px;
	position: absolute;
	left: 45%;
	margin-left: 0;
	bottom: 100px;
	z-index: 100;
	opacity: 1;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}
.reference-col:hover .arrows {
	opacity: 0;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}
.arrows path {
	stroke: #fff;
	fill: transparent;
	stroke-width: 2px;
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite;
}
 @keyframes arrow {
	0% {
	opacity:0
	}
	40% {
	opacity:1
	}
	80% {
	opacity:0
	}
	100% {
	opacity:0
	}
}
 @-webkit-keyframes arrow /*Safari and Chrome*/ {
	0% {
	opacity:0
	}
	40% {
	opacity:1
	}
	80% {
	opacity:0
	}
	100% {
	opacity:0
	}
}
.arrows path.a1 {
	animation-delay: -1s;
	-webkit-animation-delay: -1s; /* Safari 和 Chrome */
}
.arrows path.a2 {
	animation-delay: -0.5s;
	-webkit-animation-delay: -0.5s; /* Safari 和 Chrome */
}
.arrows path.a3 {
	animation-delay: 0s;
	-webkit-animation-delay: 0s; /* Safari 和 Chrome */
}

.wrap-scroll::-webkit-scrollbar {
	width: 6px;
}
 
.wrap-scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.15);
}
 
.wrap-scroll::-webkit-scrollbar-thumb {
  background-color: #111111;
  outline: 1px solid slategrey;
}
@media (max-width: 991px){
	.reference-detail-area {
		background-color: #fff;
		padding: 20px 25px 30px 45px;
		height: auto;
		border-radius: 25px;
		display: inline-block;
		margin: 10px auto;
		box-shadow: 7px 6px 23px 3px rgba(30, 30, 30, 0.48);
	}
}