@import url(../../cckm-box.css);

.single-service:before {
    height: 600px; width: 100%; position: absolute; content: ""; top: 20px; left: 0; z-index: -1; opacity: 0.1;
    background-image:url(https://d1r4509tniam8v.cloudfront.net/img/funcSubscribeBg.png);
    background-size: 200%; background-position: center top; background-repeat: no-repeat;
}
@media (min-width: 992px) {
	.single-service:before { background-size: 100%; }
}
.single-service { padding: 0 4em 3em; }
@media (max-width:1200px) {
	.single-service { padding-left: 1em; padding-right: 1em; }
} 
@media (max-width:991px){
	.single-service { background-size: 200% }
}
@media (max-width:767px){
	.single-service { background-size: 300% }
}
.single-service small { font-size:80% }
.single-service h3 > small { font-size: 70% }
.single-service .control-label { font-weight: 400; }
.single-service img { width: 100%; min-height:150px; background-color:#eee }
.single-service .img-block > img { min-height: auto; }
.single-service .context { color:#888; line-height: 1.6em; }
.single-service .context a { color:#888; border-bottom: 1px solid #FFE100; font-size:15px; }
.single-service .context a:hover { color: #333; }
.single-service .context ul li { margin-bottom:4px;  }

@media (max-width:767px) {
	.single-service .service-sub .sub-item { padding-left: 0; padding-right: 0 }
}

.single-service .service-sub > h3 { margin-top: 40px; margin-bottom:20px; }
.single-service .service-sub .thumbnail { padding: 0; overflow: hidden; }
.single-service .service-sub .thumbnail .caption { padding: 0 15px; }
.single-service .service-sub .thumbnail .caption h3 { margin-top: 20px; margin-bottom: 20px; }
.single-service .service-sub .thumbnail .caption h3 small { color:#ccc; font-size:13px; }
.single-service .service-sub .thumbnail .caption h3 small > .badge { display: inline; }
.single-service .service-sub .thumbnail .caption .context { -webkit-line-clamp: 3; font-size: 14px; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.5em; height: 4.5em; }
.single-service .service-sub .thumbnail .caption .btn .small-circle { padding: 7px; border-radius: 100%; background: #f6f6f655; margin-right: 10px; }
/* .single-service .service-sub .thumbnail:hover img { transform: scale(1.2); } */

.single-service .service-item .func-info .content .title { font-size: 2em;  }
.single-service .service-item .func-info .content .price { font-size: 4em; }
.single-service .service-item .func-info .content .price small { font-size: 30%; }
.single-service .service-item .func-info > [class^="col-"] { padding-left: 0; padding-right: 0 }
.single-service .service-item .func-info .desc-title { font-size: 18px;  font-weight: 700; border-left: 5px solid #FFE100; padding-left: 8px; margin-top: 20px; }

.single-service .service-item blockquote {  padding:20px; color:#888; border-left:8px solid #aaaaaa77; background:#aaaaaa11; }
.single-service .service-item blockquote.trial { border-left:8px solid #f39c1277; background:#f39c1211; }

.single-service .cc-func-header h1 small { font-size:50%; color:#888; margin-bottom: 10px; display: inline-block; }

.single-service .service-content .cc-func-content { background: rgba(var(--color),0.05); padding: 30px; }
@media (max-width:767px) {
	.single-service .service-content .cc-func-content { border-right: none; border-bottom: 2px dotted #ccc; padding-bottom: 10px; padding: 20px; }
}

.single-service .service-item .func-info .price-info .price { font-size: 1.8em; }

.single-service .service-content .cc-pay-content { padding-left: 20px; padding-right: 0; }
.single-service .service-content .cc-pay-content .no-login img,
.single-service .service-content .cc-pay-content .no-data img  { background: transparent; }
.single-service .service-content .cc-pay-content .no-data { font-size: large !important; }
.single-service .service-content .cc-pay-content .no-data .no-data-text { color: rgb(var(--color)) !important; padding-top: 20px; padding-bottom: 30px;  }

.single-service .service-content .shop .btn { padding-left: 50px; padding-right: 50px }

@media (max-width:767px) {
	.single-service .service-content .cc-pay-content { padding-left: 0; }
	.single-service .pay-info .pay-amt-block { margin-top: 15px; }
}
.single-service .pay-info .pay-amt-block .price { font-size: 1.8em; }

.step > li { padding: 15px 0 !important; }