@charset "utf-8";
.mr20{margin-right:20px}
.zq-icon{display:inline-block;background:url(/cj/sfq/icon.png) no-repeat;}
.icon40x40{width:40px;height:40px}
.crad-area-icon1{background-position:0 0}
.crad-area-icon2{background-position:-40px 0}
.crad-area-icon3{background-position:-80px 0}
.crad-area-icon4{background-position:-120px 0}

.card-area{margin: 20px auto 0;height: 650px;max-width: 1200px;position:relative;}
.card-area .bg-e8e8e8{background:#e8e8e8}
.card-area .bg-e1e1e1{background:#e1e1e1}
.card-area .card-item{z-index:4;transition:all .3s cubic-bezier(.4,0,.2,1),z-index 0s .12s;position:relative;float:left;width: 13%;height: 600px;background-color:transparent;}
.card-area .card-item+.card-item{margin-left:-1px;cursor:pointer}
.card-area .card-item .card{transition:all .3s cubic-bezier(.4,0,.2,1),z-index 0s .12s;width:100%;height:100%;text-align:center;background:#fff;}
.card-area .card-item .card .card-content{width:100%;line-height:2 }
.card-area .card-item .card .card-content.content-first{transition:all .12s cubic-bezier(.4,0,.2,1) .18s;z-index:3;opacity:1;filter:alpha(opacity=100);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(100))}
.card-area .card-item .card .card-content.content-second{transition:all .12s cubic-bezier(.4,0,.2,1) 0s;z-index:2;opacity:0;filter:alpha(opacity=0);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(0));line-height:2}
.card-area .card-item .card .card-content.content-second li{float:left;width:50%}
.card-area .card-item .card .card-content,.card-area .card-item .card .card-title{position:absolute;left:0;right:0;z-index:1;}
.card-area .card-item .card .card-title{padding-top:1px;transition:all .3s cubic-bezier(.4,0,.2,1),z-index 0s .12s;height: auto;line-height: 26px;font-size:14px;top:0;background:#1b77b9;border-left:1px solid #3285c0;}
.card-area .card-item .card .card-title .content{width:100%;margin-top: 0px;}
.card-area .card-item .card .card-title h1 {font-size:20px;font-weight:700;color:#d9efff;margin-bottom:0;margin-top: 6px;}
.card-area .card-item.active .card .card-title h1 { font-size:22px }
.card-area .card-item .card .card-title .short-info{color:#8dbbdc;font-size:14px;margin-top:0;margin-bottom: 15px;}
.card-area .card-item .card .card-title .zq-product-img{width:40px;height: auto;margin: 9px auto;}
.card-area .card-item .card .card-title .zq-product-img img{position:absolute;left:0;width:100%}
.card-area .card-item .card .card-title .zq-product-img .un-hover{z-index:1;opacity:1;filter:alpha(opacity=100);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(100))}
.card-area .card-item .card .card-title .zq-product-img .with-hover{z-index:2;opacity:0;filter:alpha(opacity=0);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(0))}
.card-area .card-item .card .card-title .short-info,.card-area .card-item .card .card-title .zq-product-img img,.card-area .card-item .card .card-title h1{transition:all .15s cubic-bezier(.4,0,.2,1) 0s}
.card-area .card-item .card .card-content{height: 470px;position:absolute;top: 80px;}
.card-area .card-item .card .card-content.content-first .content-first-list{width:100%;color:#373d41;margin-top: 40px;}
.card-area .card-item .card .card-content.content-first .content-first-list li{margin-bottom: 20px;padding: 0 6px;line-height: 20px;font-size: 15px;}
.content-first-list li .cardbg1,.content-first-list li .cardbg2,.content-first-list li .cardbg3,.content-first-list li .cardbg4,.content-first-list li .cardbg5 {
	width: 100%;height: 120px;bottom: 40px;position: absolute;}
.content-first-list li .cardbg1 {background:url(/images/China_course/High_school/XJB/1.jpg) center center;background-size: cover;}
.content-first-list li .cardbg2 {background:url(/images/China_course/High_school/XJB/2.jpg) center center;background-size: cover;}
.content-first-list li .cardbg3 {background:url(/images/China_course/High_school/XJB/3.jpg) center center;background-size: cover;}
.content-first-list li .cardbg4 {background:url(/images/China_course/High_school/XJB/4.jpg) center center;background-size: cover;}
.content-first-list li .cardbg5 {background:url(/images/China_course/High_school/XJB/5.jpg) center center;background-size: cover;}
.card-area .card-item .card .card-content.content-second{width: 92%;margin:  0 auto;padding-top: 15px;}
.card-area .card-item .card .card-content.content-second .main-head{color:#3db1ea;font-size:18px;line-height:28px;margin-bottom:10px}
.card-area .card-item .card .card-content.content-second p {margin: 10px 0;font-size: 16px;line-height:  22px;color: #00a0e9;text-align:left;}
.card-area .card-item .card .card-content.content-second .main-tip{color:#232933}
.card-area .card-item .card .card-content.content-second .main-desc{color:#8c8c8c;font-size:12px;line-height:22px}
.card-area .card-item .card .card-content.content-second .main-btn{cursor:pointer;width:160px;height:38px;font-size:16px!important;color:#fff;margin-top:22px;margin-bottom:33px;border-radius:19px;background:#3db1ea;border:none;transition:color .3s ease-in-out,background .3s ease-in-out}
.card-area .card-item .card .card-content.content-second .main-btn:hover{color:#fff;background:#1b77b9}
.card-area .card-item .card .card-content.content-second .main-white-btn{cursor:pointer;width:160px;height:36px;border:1px solid #3db1ea;font-size:16px!important;color:#3db1ea;margin-top:22px;margin-bottom:33px;border-radius:19px;background:#fff;transition:color .3s ease-in-out,background .3s ease-in-out}
.card-area .card-item .card .card-content.content-second .main-white-btn:hover{color:#fff;background:#3db1ea}
.card-area .card-item .card .card-content .other-info{width:105%;height:70px;overflow:hidden;line-height:22px;padding-top:20px;font-size:12px}
.card-area .card-item .card .card-content .other-info .other-info-list{width:27%;height:70px;background:#f2f2f2;margin-right:25px;padding:0 0 0 10px;position:relative}
.card-area .card-item .card .card-content .other-info .other-info-list .c-a-arrow{position:absolute;right:10px;top:15px;background-position:-200px 0}
.card-area .card-item .card .card-content .other-info .other-info-list:hover{background:#3db1ea}.card-area .card-item .card .card-content .other-info .other-info-list:hover .c-a-arrow{background-position:-200px -17px}
.card-area .card-item .card .card-content .other-info .other-info-list:hover .other-desc,.card-area .card-item .card .card-content .other-info .other-info-list:hover .other-head{color:#fff}
.card-area .card-item .card .card-content .other-info .other-info-list .list-context{color:#00c1de}
.card-area .card-item .card .card-content .other-info .other-head{font-size:16px;font-weight:400;color:#000;margin:13px 0 0 0;}
.card-area .card-item .card .card-content .other-info .other-desc{margin-top:2px;font-size:12px;color:#999}
.card-area .card-item.active{z-index:6;box-shadow:0 0 30px rgba(0,0,0,.2);width: 48%;height:580px;}
.card-area .card-item.active .card .card-title{background-color:#3db1ea;height: 90px;top: -6px;border:none;}
.card-area .card-item.active .card .card-title .short-info{color:#9ed8f5}
.card-area .card-item.active .card .card-title h1{color:#fff;margin-top: 10px;}
.card-area .card-item.active .card .card-content.content-first{transition:all .12s cubic-bezier(.4,0,.2,1) 0s;z-index:2;opacity:0;filter:alpha(opacity=0);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(0))}
.card-area .card-item.active .card .card-content.content-second{transition:all .12s cubic-bezier(.4,0,.2,1) .18s;z-index:3;opacity:1;filter:alpha(opacity=100);-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=(100))}

.card-content img { width:100%; height:auto; margin-top:10px}
.card i { color:#FFFFFF}
@media (min-width: 768px) and (max-width: 1199px) {
.card-area .card-item .card .card-title h1 {font-size:16px; height:26px; overflow:hidden}
.card-area .card-item.active .card .card-title h1 { font-size:22px }
}
@media only screen and (max-width: 768px)  {
.card-area .card-item.active {width:100%; overflow:hidden; margin-bottom:10px}
.card-area .card-item {width:100%;}
.card-area .card-item .card,.card-area .card-item {height: 100%;}
.card-area .card-item .card .card-content {height:auto;}
.card-area .card-item .card .card-title h1 {font-size:16px; height:26px; overflow:hidden}
.card-area .card-item.active .card .card-title h1 { font-size:20px }
}

/*------------------------------------*/
.panel-title i {font-size:16px;vertical-align: middle;margin: 0 10px 4px 0;}
.panel-body p {font:500 16px/22px 'Microsoft YaHei';margin:   0 0 10px;}
.panel-body  img { width:100%}
.panel-default a .panel-heading { background-color: #1b77b9;   border-color: #ddd;   color: #fff;}