@font-face {
  font-family: 'icomoon';
  src:  url('../../font/fonts/icomoon.eot?qbc67c');
  src:  url('../../font/fonts/icomoon.eot?qbc67c#iefix') format('embedded-opentype'),
    url('../../font/fonts/icomoon.ttf?qbc67c') format('truetype'),
    url('../../font/fonts/icomoon.woff?qbc67c') format('woff'),
    url('../../font/fonts/icomoon.svg?qbc67c#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.course-class-infos {
position: relative;
    background: #666;
	top:50px;
	z-index: 10;
}           
.info-bg ,.cover-img-wrap{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
	z-index:-10;
}       
.cover-img-wrap {
    z-index: -1;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	background-image: url(../images/callin-banner.jpg);
}


.banner-outer {
	height: 500px;
	width: 100%;
	background-image: url(../images/callin-banner.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	padding-top: 1px;
	margin-top: 63px
}

.course-class-infos .banner-inner {
	width: 960px;
	margin: 0 auto;
	position:absolute;
	top:120px;
	left:0;
	right:0;
	color: #fff
}

.course-class-infos .banner-inner h1 {
	font-size: 50px;
	font-weight: 400;
	margin: 0
}

.course-class-infos .banner-inner .text {
	font-size: 18px;
	margin-top: 25px
}

.banner-outer .banner-inner .buttons {
	margin-top: 50px
}

.banner-outer .banner-inner a {
	display: inline-block;
	width: 150px;
	height: 45px;
	line-height: 45px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 2px;
	text-decoration: none;
	text-align: center;
	color: #09aeb0;
	transition: background-color .2s ease-in-out
}

.banner-outer .banner-inner a:hover {
	background-color: rgba(255,255,255,.85)
}

.banner-outer .banner-inner a:last-child {
	background-color: transparent;
	color: #fff;
	margin-left: 10px
}

.banner-outer .banner-inner a:last-child:hover {
	background-color: rgba(255,255,255,.3)
}

.detail-item {
	color: #545d69;
	min-height: 590px;
	padding: 90px 0;
	box-sizing: border-box;
	background-color: #fff
}

.detail-item.bg-gray {
	background-color: #f9f9fb
}

.detail-item-new {
	width: 960px;
	margin: auto
}

.detail-item-new.bg-gray {
	width: auto
}

.detail-item-new .detail-info-view-wrap {
	width: 960px;
	margin: auto
}

.detail-item-new .detail-info-view-wrap h2 {
	margin-bottom: 70px
}

.detail-item-new h2 {
	font-size: 32px;
	font-weight: 400;
	margin: 0 0 20px;
	text-align: center
}

.detail-item-new .second-title {
	margin-bottom: 80px;
	text-align: center;
	color: #7B8390;
	font-size: 16px
}

.detail-item-new .clear {
	padding-bottom: 10px
}

.detail-item-new .clear:after {
	content: " ";
	display: block;
	clear: both;
	visibility: hidden
}

.detail-item-new .light-blue-c {
	color: #19b6bc
}

.detail-item-new .detail-info-new {
	width: 460px;
	float: left;
	height: 584px
}

.detail-item-new .detail-info-new .callin-logo {
	height: 157px;
	line-height: 157px;
	text-align: right;
	color: #fff
}

.detail-item-new .detail-info-new .callin-logo.callin-logo-first {
	background-image: url(../images/toc-1448afc43b.png)
}

.detail-item-new .detail-info-new .callin-logo.callin-logo-second {
	background-image: url(../images/tob-517adb8537.png)
}

.detail-item-new .detail-info-new .callin-logo .logo-text {
	font-size: 30px;
	margin-right: 30px
}

.detail-item-new .detail-info-new .info-body {
	height: 427px;
	padding: 50px 20px 0;
	box-sizing: border-box;
	border: 1px solid #d5dce3;
	box-shadow: 1px 1px 5px #d5dce3
}

.detail-item-new .detail-info-new .info-body .body-item {
	padding: 12px
}

.detail-item-new .detail-info-new .info-body .body-item.body-item-bg {
	font-size: 21px;
	background: #E7F0F7
}

.detail-item-new .detail-info-new .info-body .body-item .body-item-title {
	font-size: 18px
}

.detail-item-new .detail-info-new .info-body .body-item .body-item-detail {
	margin-top: 6px;
	font-size: 14px;
	line-height: 24px;
	color: #9099a4
}

.detail-item-new .href-wrap .one {
	width: 150px
}

.detail-item-new .detail-info-view {
	width: 210px;
	float: left;
	height: 412px;
	margin-right: 30px;
	box-sizing: border-box;
	border: 1px solid #d5dce3;
	border-radius: 4px;
	text-align: center;
	background: #fff
}

.detail-item-new .detail-info-view .view-logo {
	width: 66px;
	height: 65px;
	margin: 55px auto 40px
}

.detail-item-new .detail-info-view .view-logo.scene {
	background-image: url(../images/callin-scene-d585deb747.png)
}

.detail-item-new .detail-info-view .view-logo.answer {
	background-image: url(../images/callin-answer-3701fea9b8.png)
}

.detail-item-new .detail-info-view .view-logo.mult {
	background-image: url(../images/callin-mult-16783aaff7.png)
}

.detail-item-new .detail-info-view .view-logo.interface {
	background-image: url(../images/callin-interface-e505049030.png)
}

.detail-item-new .detail-info-view .view-title {
	font-size: 20px
}

.detail-item-new .detail-info-view .view-info {
	margin-top: 20px;
	font-size: 14px;
	color: #9099a4
}

.detail-item-new .detail-info-view .view-info li {
	line-height: 24px
}

.detail-item-new .detail-info-view .view-info li:before {
	content: " ";
	display: inline-block;
	vertical-align: middle;
	height: 4px;
	width: 4px;
	border-radius: 50%;
	margin-right: 5px;
	background-color: #68707D
}

.detail-item-new .callin-value {
	height: 587px;
	width: 965px;
	border:2px dashed #4ACECB;
	overflow:hidden;
	position:relative;
}	
.detail-item-new .callin-value .right-callin{
	width:0;
	height:0;
	border-top:334px solid transparent;
	border-bottom:334px solid transparent;
	border-right:632px solid rgba(74,206,203,.3);
	position:absolute;
	right:0;
	top:-40.5px;
}
.detail-item-new .callin-value .left-callin1,.detail-item-new .callin-value .left-callin2{
	width:0;
	height:0;
	border-top:207px solid transparent;
	border-bottom:207px solid transparent;
	border-left:400px solid rgba(192,192,192,.4);
	position:absolute;
	left:0;
}
.detail-item-new .callin-value .vs{
	text-transform: uppercase;
	font-size:100px;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	color:rgb(255,189,178);
	font-weight: 600;
	position:absolute;
	top:50%;
	left:200px;
	transform:translateY(-50%);
}
.detail-item-new .callin-value .left{
	width:213px;
	height:180px;
	position:absolute;
	left:20px;
}
.detail-item-new .callin-value div.left-callin11{
	top:56px;
}
.detail-item-new .callin-value div.left-callin12{
	bottom:50px;
}
.detail-item-new .callin-value .left ul{
	width:188px;
	height:137px;
	background:#CCD1D4;
	padding-top:5px;
	padding-left:8px;
	box-sizing: border-box;
	margin-left:10px;
}
.detail-item-new .callin-value .left h3{
	margin:0;
	padding:0;
	text-align:left;
	font-size: 18px;
	margin-left:10px;
	margin-bottom:8px;
}
.detail-item-new .callin-value .left ul li{
	width:170px;
	height:26px;
	line-height: 26px;
	background:#fff;
	margin-top:5px;
}
.detail-item-new .callin-value .left ul li p{
	margin:0;
	padding:0;
	font-size: 14px;
}
.detail-item-new .callin-value .left ul li p::before{
	content:"";
	width:5px;
	height:5px;
	display:inline-block;
	background:black;
	border-radius: 50%;
	vertical-align: middle;
	margin-top:-2px;
	margin-left:10px;
	margin-right:5px;
}
.detail-item-new .callin-value .left-callin1{
	top:-60.25px;
}
.detail-item-new .callin-value .left-callin2{
	bottom:-60.25px;
}
.detail-item-new .callin-value .ivr , .detail-item-new .callin-value .reli{
	text-transform:uppercase;
	color:#fff;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 22px;
	position:absolute;
	left:237px;
	font-weight: 500;
	letter-spacing: 1px;
}
.detail-item-new .callin-value .ivr{
	top:140px;
}
.detail-item-new .callin-value div.reli{
	bottom:130px;
}
.detail-item-new .callin-value .right{
	width:258px;
	height:176px;
	position:absolute;
	right:10px;
	box-sizing: border-box;
}
.detail-item-new .callin-value .right h3{
	font-size:18px;
	margin:0;
	padding:0;
	margin-bottom:8px;
	letter-spacing: 1.5px;
	color:#4ACECB;
}
.detail-item-new .callin-value ol{
	margin:0;
	padding:0;
	background:#4ACECB;
	width:236px;
	height:137px;
	overflow:hidden;
	box-sizing:border-box;
	padding-top:3px;
	padding-left:8px;
}

.detail-item-new .callin-value ol li{
	width:220px;
	height:26px;
	line-height: 26px;
	background:#fff;
	margin-top:5.5px;
	border-radius:1px;
	position:relative;
}
.detail-item-new .callin-value ol li p{
	font-size: 14px;
	color:#4ACECB;
	margin:0;
	padding:0;
	margin-left:25px;
}
.detail-item-new .callin-value ol li::before{
	content:"";
	display:inline-block;
	width:5px;
	height:5px;
	border-radius:50%;
	background:#4ACECB;
	position: absolute;
	top:50%;
	transform:translateY(-50%);
	margin-left:10px;
	margin-right:8px;	
}
.detail-item-new .callin-value div.right-top{
	top:113px;
}
.detail-item-new .callin-value div.right-footer{
	bottom:105px;
}
.detail-item-new .callin-value .circle1,.detail-item-new .callin-value .circle2,.detail-item-new .callin-value .circle3{
	border-radius: 50%;
	background:#4ACECB;
	text-align:left;
	position:absolute;
	color:#fff;
	font-size:15px;
}
.detail-item-new .callin-value .circle1 em,.detail-item-new .callin-value .circle2 em,.detail-item-new .callin-value .circle3 em{
	font-style:normal;
	font-size: 20px;
}
.detail-item-new .callin-value .circle1 .item,.detail-item-new .callin-value .circle2 .item,.detail-item-new .callin-value .circle3 .item{
	font-family: icomoon;
	position:absolute;
	width:78%;
	height:80%;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}
.detail-item-new .callin-value .circle3{
	width:89px;
	height:89px;
	bottom:159px;
	right:304px;
}
.detail-item-new .callin-value .circle2{
	width:99px;
	height:99px;
	top:241px;
	right:344px;
}
.detail-item-new .callin-value .circle1{
	width:83px;
	height:83px;
	top:162px;
	right:305px;
}
.detail-item-new .callin-value .xiaoying{
	width:127px;
	height:58px;
	text-align: center;
	font-size: 20px;
	font-weight: 500;
	color:#fff;
	position:absolute;
	top:265px;
	left:381px;
	letter-spacing: 3px;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}
.detail-item-new .scene-bg {
	height: 525px;
	background-image: url(../images/callin-scene-bg-49b9389443.png);
	background-position: center 0
}

.scene-item {
	width: auto!important;
	height: 1190px;
	padding: 16px 0 90px!important;
	position: relative
}

.scene-item h2 {
	position: absolute;
	top: 110px;
	color: #fff;
	left: 0;
	right: 0
}

.scene-item .callin-banner {
	position: absolute;
	top: 220px;
	left: 0;
	right: 0;
	width: 838px;
	height: 702px;
	margin: 0 auto
}

.scene-item .callin-banner .banner-wrap {
	position: relative;
	margin: 0 15px;
	padding: 0;
	width: 808px;
	height: 702px;
	overflow: hidden
}

.scene-item .callin-banner .banner-wrap .banner-img {
	position: absolute;
	margin: 0;
	padding: 0;
	left: -404px;
	top: 0;
	width: 2919px;
	list-style: none
}

.scene-item .callin-banner .banner-wrap .banner-img li {
	float: left;
	margin: 0;
	padding: 0 20px;
	height: 702px;
	background-repeat: no-repeat;
	background-position: center 0
}

.scene-item .callin-banner .banner-dot {
	position: absolute;
	bottom: -45px;
	left: 50%;
	margin-left: -30px
}

.scene-item .callin-banner .banner-dot li {
	width: 9px;
	height: 9px;
	margin-left: 10px;
	border-radius: 50%;
	float: left;
	cursor: pointer;
	background: #B5B5B5
}

.scene-item .callin-banner .banner-dot li.active {
	background: #17A0A1
}

.scene-item .callin-banner .banner-arrow {
	margin: 0;
	padding: 0
}

.scene-item .callin-banner .banner-arrow .banner-arrow-icon {
	position: absolute;
	top: 205px;
	width: 55px;
	height: 55px;
	bottom: 120px;
	border-radius: 50%;
	cursor: pointer;
	background-color: #444;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../images/left-arrow-71d7321aef.png)
}

.scene-item .callin-banner .banner-arrow .banner-arrow-icon.right {
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	transform: scaleX(-1);
	left: 100%
}

.scene-item .callin-banner .banner-arrow .banner-arrow-icon.left {
	left: -55px
}

.scene-item .callin-banner .banner-arrow .banner-arrow-icon:hover {
	background-color: #5B5B5B;
	background-image: url(../images/right-arrow-hover-7d7ac7f8ab.png)
}

.scene-item .callin-banner .banner-arrow .banner-arrow-icon:hover.right {
	-moz-transform: none;
	-webkit-transform: none;
	-o-transform: none;
	transform: none
}

.scene-item .callin-banner .banner-arrow .banner-arrow-icon:hover.left {
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	transform: scaleX(-1)
}

.scene-item .href-wrap {
	position: absolute;
	top: 1040px;
	margin: 0;
	left: 0;
	right: 0
}