body{ font-family:"Hiragino Sans GB", "Microsoft Yahei",Arial,Lucida,Verdana,SimSun,Helvetica,sans-serif; color: #484848;}
.default-body{/* padding-top:54px; */ overflow-x: hidden !important;}
a{transition: all 0.2s ease-in-out 0s;}
.home-body{overflow-x: hidden !important;}
.form-control.placeholder{color:#b4b4b4;}
ul{padding-left:0;}
dl,ul {margin:0;}
input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        box-shadow:0 0 0 60px #fff inset;
        -webkit-text-fill-color: #484848;
    }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color: #999; 
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
color: #999; 
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
color: #999; 
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
color: #999; 
} 
.btn-group.bootstrap-select .dropdown-toggle .filter-option{color:#484848;}
#main-menu {padding: 0; transition: all 0s;}
#main-menu.navbar-default {background-color: #fff;}
#main-menu.navbar-default { background-color:transparent\9;top: 120px;}
#main-menu a.navbar-brand { text-transform: uppercase; font-size: 22px; color: #434242; font-weight: 900;font-family: 'Montserrat', sans-serif;}
#main-menu a.navbar-brand i { color: #bbb;}
#main-menu.navbar-default .navbar-nav > li > a { color: #484848;font-size: 16px; letter-spacing: 1px;}
#main-menu.navbar-default .navbar-nav > li > a:hover { color: #f84c4c;}
#main-menu.navbar-default .navbar-nav .active  a { color: #f84c4c ;}
.on {background-color: #ffffff !important; /*padding: 0 !important;*/}
.navbar.navbar-default.navbar-fixed-top { border-bottom: 1px solid transparent;top: auto;}
.navbar-fixed-top{}
.navbar.navbar-default.navbar-fixed-top.on { border-bottom: 1px solid #eee;}
#main-menu.navbar-default.on .navbar-nav > li > a { color: #333;font-size: 16px;}
#main-menu.navbar-default.on .navbar-nav > li > a:hover{ color: #f84c4c;}
.navbar-default .navbar-nav>li>a{font-size:16px;color:#484848;}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{
    color:#f84c4c;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #f84c4c !important;
    background-color: transparent;
    font-weight: 500;
    }
.navbar-toggle { border-radius: 0;}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {background-color: #FEF7A4; border-color: #FEF7A4; color: #333;}
.navbar-default .navbar-toggle:hover>.icon-bar {background-color: #333;}
.default-body .navbar-default{background: #fff; border-bottom: 1px solid #eee !important;}

.navbar .vp-navbarLogin{
    display: none;
    float:right;
    margin:0 0 0 5px;
    line-height: 65px;
}
.navbar-nav{
    margin-left:8px;
}
.vp-memberCenter{
    display: none;
    float:right;
    width: 29px;
    height: 29px;
    margin-top: 18px;
}
.navbar-nav>li.vp-loginOut{
    display: none;
}
.vp-loginOut img{
    margin-right:5px;
}

.navbar-toggle.collapsed span{
    width:30px !important;
}
.nav .vp-loginStatus{
    min-width:90px;
}
.nav .vp-loginStatus a{
    padding-left:12px;
    padding-right:12px;
}
.navbar-default .navbar-nav>li.vp-loginStatus .loginOUt{
    display: block;
    opacity: 0;
    position: absolute;
    top:65px;
    left:0;
    width:100%;
    height:0;
    line-height: 40px;
    background-color: #ffffff;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
    padding-top:0;
    padding-bottom:0;
    text-align: left;
     *width:96px;
     display: none\9;
}
.navbar-default .navbar-nav>li.vp-loginStatus:hover .loginOUt{
    height: 40px;
    opacity: 1;
    display: block\9;
}
.navbar-default .navbar-nav>li.vp-loginStatus>a.loginOUt:focus, .navbar-default .navbar-nav>li.vp-loginStatus>a.loginOUt:hover{
    background-color: #ffffff;
}
.li-memberCenter{
   margin-left:14px;
}
.li-memberCenter .btn-danger{
    width: 110px;
    height: 36px;
    border-radius: 3px;
   background-color: #f74c4c;
   border-color:#f74c4c;
}
.li-memberCenter .btn-danger:hover{
    background-color: #c9302c;
    border-color: #ac2925;
}
.vp-backOldWeb{
    *width:158px;
}
.free-listen.vp-hiden{
    display: none;
}
.flip-container { perspective: 1000; position: relative; z-index:1029}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);}

.flip-container, .front, .back { width: 100%; height: 312px;}
/* flip speed goes here */
.flipper {transition: 0.6s;  transform-style: preserve-3d; position: relative;}

/* hide back of pane during swap */
.front, .back { backface-visibility: hidden;  position: absolute;top: 0;
    left: 0; border:1px solid #ddd; text-align: center; padding-top: 70px; padding-bottom: 70px; font-size: 18px; color: #575759; line-height: 1.6em;
}

/* front pane, placed above back */
.front {z-index: 2;    /* for firefox 31 */   transform: rotateY(0deg);  background: #fff;}

/* back, initially hidden pane */
.back {transform: rotateY(180deg);   background: #f3f3f3;}
.flip-container:hover .back{z-index: 3; backface-visibility:visible;}
.flip-container:hover .front{display: none}
.banner-video{
    background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/home-video.jpg) no-repeat top;
    width: 100%;
    height: 624px;
    overflow: hidden
    }
.banner-home{width: 100%;height: auto;background: #ececec;margin-top:65px;}
.banner-video .home-video{position: relative; z-index: 998; width: 100%;}
.banner-video .content{color: #fff; text-align:center; padding-top: 160px; position: absolute; top: 0;left: 0;right: 0; z-index: 999}
.banner-video h1{margin-bottom: 20px;font-size:60px; margin-top: 0}
.banner-video .lead{font-size: 20px; margin-bottom: 40px;}
.banner-video a{color: #fff; text-decoration:underline}
.banner-teacher{background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/teachers-banner.jpg) no-repeat center; width: 100%;height: 330px;  }
.banner-course{background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/course-banner.jpg) no-repeat center; width: 100%;height: 330px;}
/*.banner-course.banner-course2{background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/course-banner2.jpg) no-repeat center; width: 100%;height: 330px; position: relative;}*/
.banner-course.banner-course2{background: url(//source.vipabc.com/ext/images/website/abc/homePage/v3/banner_Teacher20160708.jpg) no-repeat center; width: 100%;height: 330px; position: relative;}
.backdrop3{
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    height: 330px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 8;
}
.backdrop4{
    background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
    height: 400px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 8;
}
.banner-course h2{color: #fff; padding-top: 165px; text-align: left; line-height: 1.6em}
/*.banner-course h2 span.text-rotator{border-bottom: 1px solid #fff; padding-bottom:2px;}*/
.adv-wrap{padding: 25px; background: #f4f4f4;}
.thumbnail-adv img{border:1px solid #e1e1e1; border-radius: 6px;width: 100%; transition:all 0.8s ease-in-out 0s;position: relative;z-index: 8;}
.thumbnail-adv:hover img{transform:scale(1.04);}
.adv-wrap .adv-info{position: relative;}


/*.form-course{position: absolute;top: 0; left: 0; right: 0; background: #fff; padding: 10px}*/
.form-course .form-group{margin-bottom: 15px; position: relative}
.form-course .form-group label.error{position: absolute; bottom: -20px;left:5px;font-size: 12px; font-weight: normal; white-space: nowrap}


.banner-video .btn{width: 272px; text-align: center; font-size: 18px; height: 60px;}
.know-me{margin-top: 15px; color: #f5f5f5;}
.banner-video .know-me a{color: #f5f5f5; }
.know-me:hover{margin-top: 15px; color: #fff;}
.banner-video .know-me a:hover{color: #fff; }


.text-height{display: inline-block;height: 50px; overflow: hidden}
.noticTipTxt{height:59px;line-height:64px;overflow:hidden; display: inline-block; vertical-align: middle; padding: 0;}
.noticTipTxt li{height:64px;line-height:64px; text-align: center}


.btn-danger-clear{border-color: #f84c4c; color: #f84c4c; background: none}
.btn-danger-clear:hover{border-color: #f74c4c; color: #fff; background-color: #f74c4c;}
.btn-danger-clear.btn-bgc-red:hover,
.btn-danger-clear.btn-bgc-red:focus,
.btn-danger-clear.btn-bgc-red:active{border-color: #fd9040; color: #fff; background-color: #f84c4c; outline-offset:0; }

.btn-danger2-clear{border-color: #f84c4c; color: #f84c4c; background: none}
.btn-danger2-clear:hover{border-color: #fd9040; color: #fd9040; background-color: #f84c4c; color:#fff; }
.qa .btn-danger2-clear {
    border-radius: 60px;
    line-height: 16px;
    padding: 15px 30px;
}

.btn-white-clear{border-color:rgba(255,255,255,.5); border-color:#fafafa\9; color:#fafafa\9;border:solid 1px #fafafa; color: rgba(255,255,255,.85); background-color:rgba(255,255,255,0.25);transition: all 0.8s;}
.btn-white-clear:hover{border-color: #fff; color: #fff; background-color:rgba(255,255,255,0.015)}
.btn-white-clear:focus{color:#fafafa\9; color: rgba(255,255,255,.85);}
.btn-white-clear2{border-color:rgba(255,255,255,.5); border-color:#fafafa\9; color:#fafafa\9; color: rgba(255,255,255,.85); background-color:rgba(255,255,255,0.25);transition: all 0.8s;}
.btn-white-clear2:hover{border-color: #fa2828; color: #fff; background-color:#fa2828; }
.btn-white-clear2:focus{color:#fafafa\9; color: rgba(255,255,255,.85);}
.btn-red-clear{
    /*border-color:rgba(255,255,255,.5);
    border-color:#fafafa\9; */
    color:#fafafa\9;
    color: rgba(255,255,255,.85);
    /*background-color:rgba(255,255,255,0.25);*/
    background-color:#e60014;
    border:0;
    transition: all 0.8s;
}
.banner-video .btn.btn-red-clear{
    font-size: 16px;
    width: auto;
    height: auto;
    padding: 18px 30px;
    line-height: 16px;
}
.btn-red-clear:hover{
    /*border-color: #fff; */
    border:0;
    color: #fff;
    /*background-color:rgba(255,255,255,0.015);*/
    background-color: #fa2828;
}
/*background:url("//source.vipabc.com/Ext/images/website/abc/homePage/v3/mac-bg.png") */
.mac-bg{background:url("//source.vipabc.com/Ext/images/website/abc/homePage/v3/mac-bg.png") no-repeat right bottom; width: 920px; height:520px; position: relative}
.nav-tabs{border: none;}
.nav-tabs li{float: none}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{border:none; color: #f74c4c; background: none}
.nav-tabs > li > a{padding: 5px;border: none; color: #555}
.nav-tabs > li > a:hover{background: none; color: #f74c4c; border: none}
.tabs-left{position: relative;height: 520px; float: left; width: 246px;}

.ipad-min{width: 780px; height: 660px; background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/ipad-min.png) no-repeat;}
.ipad-min2{width: 780px; height: 520px; background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/ipad-min2.png) no-repeat right bottom;}
.ipad-min2-po{position: absolute; right: -105px;}
.ipad-min2-po .tab-pane{position: relative}
.ipad-min2-po .tab-pane>.bottom{position: absolute; bottom: 20px;left:-150px;}
/*.iphone-bg{position: absolute; right: 500px; bottom: 20px; background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/iphone-bg.png) no-repeat; width: 300px; height: 150px;  z-index: 10}*/
.iphone-bg{position: absolute; right: 500px; bottom: 20px; background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/iphone-bg.png) no-repeat; width: 300px; height: 150px;  z-index: 10}
.ipad-bg{position: absolute; right: 0px; bottom:20px;background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/ipad-sm.png); width: 510px; height: 340px; z-index: 9}

.list{text-align: center}
.list>div>div{background: #fff; position: relative; color: #666; padding-bottom: 10px; border-radius: 6px;}
.list>div>div.height-md{min-height: 438px;}
.list>div.active>div{background: #fff;  border:1px solid #f74c4c;}
.list>div.active>div .title{border-color: #f74c4c; color: #fff; background: #f74c4c}
.list .title{width: 120px; height: 120px; border:3px solid #ddd; border-radius: 50%; background: #fff; display:inline-block;  position: absolute;
left: 50%; margin:-60px 0 0 -60px; font-size: 24px; padding:30px 0px; text-align: center;line-height: 100%}


.list .title.lg{padding-top: 40px}
.list .info{padding: 80px 20px 0px 20px;}
.list h3{color: #222; }
.list>div.active>div .icon-active{position: absolute; bottom: 10px;left: 50%; margin-left:-14px }
.list .comments{padding-left: 15px;padding-right: 15px; text-align: left}
.list .img{width: 100px; height: 100px; display:block;  position: absolute;z-index: 9;
    left: 50%; margin:-65px 0 0 -50px; overflow: hidden !important;border-radius: 50%;  }
.list .img img { transition: all 0.8s ease-in-out 0s;width: 100px; height: 100px;display: block; z-index: 8}
.list .img:hover img { transform: scale(1.2); }

/*.round{position: relative}
span.img{width: 100px; height: 100px; display:block;  position: absolute; z-index: 9;
    left: 50%; margin:-50px 0 0 -50px; overflow: hidden !important;border-radius: 50%;border:2px solid #fff; background: none }
.round-img{transition: all 0.8s ease-in-out 0s;width: 120px; height: 120px;display: block; position: absolute; z-index: 8}
.round-img:hover{ transform: scale(1.2); }*/

.course-list{   overflow: hidden}
.course-list .col-md-3 >div{border:1px solid #ddd; border-radius: 6px;}
.course-list .detail-list{text-align: left; padding-left: 20px}
.course-list .info{padding: 20px; min-height: 337px}
.course-list .price{font-size: 24px; font-weight: bold}
.course-list .price small{font-size: 50%; font-weight: normal}
.course-list .btn-radius{border-radius: 50px}
.course-list .btn-radius{width: 148px; }
.online-talk{position: absolute; top:50px; left:75%; }


.free-listen{padding-top: 14px;padding-right: 0px;}


.title-lg{padding-top: 100px; padding-bottom: 100px;}
.teachers-thumbnail{font-size: 18px; color: #484848}
.teachers-thumbnail dd{margin-top: 10px;}
.teachers-thumbnail .name{font-weight: bold}
.teachers-info{padding-top:100px;}
.teachers-info>h2{line-height: 150%}
.teachers-info h3{font-size: 31px; line-height: 1.5em}
.teachers-info>div{line-height: 180%}
.teachers-img3{background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/teachers-3.png) left bottom no-repeat; height: 475px; position:relative; bottom: -70px;}
.teachers-img3 .title{position: absolute; right: 8px; top:13px; width: 60%}

.num-info h2{font-size: 60px; font-weight: normal}
.num-info .red{color: #f74c4c; }

/*home*/
.section-map{
    /*background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/map.jpg) center no-repeat;*/
    height: 670px; position: relative; background:#20252d; }
.section-map .map{position: absolute;  left:0; right:0;height: 670px; background:url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/map.svg) center;
    background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/mapdots.png) no-repeat center\9;width: 100%;}
.section-map .dots{position: absolute; left:50px; top: 45px; width: 100%; height:670px; background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/dots.svg) center no-repeat; }
.section-map .teachers-map{height: 670px; position: relative;  overflow: hidden;}
.teachers-box{width:126px;height:200px; ;background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/rectangle-bg.png) no-repeat; position: absolute;
    text-align: center; padding-top: 30px;padding-bottom: 30px; color: #fff}
.p-abso{position: absolute}
.t1{left: 20px;bottom:54%;  }
.t2{left: 447px;bottom:64%; }
.t3{left:665px; bottom: 54%; }
.t4{left:550px; bottom: 25%; }
.t5{right:5px; bottom: 25.5%; }
/*.teachers-map img{width: 100%}
.teachers-map div.p-abso{width:6.8%}*/
.backdrop{
    /*background: rgba(0,0,0,0.6);*/
    background: #000;
    width: 100%;height: 670px; position: absolute; top:0; left: 0;filter: alpha(opacity=75) !important;}

.teachers-float{position: absolute;height:520px;bottom:50px; width: 100%; color: #fff; font-size: 16px; line-height: 1.5em;}
.teachers-float a{color: #fff}
.prel{position: relative}

.ip-1{position: absolute; right: -355px; z-index: 9}
.ipad-hand div.play {
    width: 90%;
    position: relative;
    margin-bottom: 10px
}

.ipad-hand div.play img {
    width: 100%
}

.ipad-hand div.video {
    width: 77%;
    height: 83%;
    position: absolute;
    left: 11.5%;
    top: 5%;
}

.ipad-hand div.video video 
{
    opacity: 0.3;
    width: 100%;
    height: 100%;
}

.ipad-hand div.video>div {
    width: 100%;
    height: 100%;
    background-color: #000
}

.ipad-hand video {
    cursor: pointer
}

.ipad-hand div.video .jp-mobile {
    display: none
}

.ipad-hand div.video .replay-button {
  left: 45%;
  top: 50%;
  font-size: 0em;
  display: none;
  z-index: 20;
  position: absolute;
  width: 52px;
  height: 52px;
  margin-top:-70px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
  background:url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/replay.png) no-repeat center center;
  background-size:cover;
}

.ipad-hand div.video .popup_layer 
{
    z-index: 10;
    opacity: 0.3;
    display: none;
    width: 100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
}

.ipad-hand div.video .dcgs-button {
  left: 45%;
  top: 50%;
  font-size: 0em;
  display: none;
  z-index: 20;
  position: absolute;
  width: 135px;
  height: 33px;
  margin-left:-42px;
  margin-top:12px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
  background:url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/DCGS_btn.png) no-repeat center center;
  background-size:cover;
}

.video .vjs-default-skin .vjs-big-play-button {
  left: 50%;
  top: 50%;
  font-size: 0em;
  display: block;
  z-index: 20;
  position: absolute;
  width: 89px;
  height: 89px;
  margin-left:-51px;
  margin-top:-51px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
  /* Need a slightly gray bg so it can be seen on black backgrounds */
  /* background-color-with-alpha */
  /*background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);*/
  /*border: 0.1em solid #3b4249;*/
  /* border-radius */
  /*-webkit-border-radius: 51px;
  -moz-border-radius: 51px;
  border-radius:51px;*/
  /* box-shadow */
  /*-webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);*/
  /* transition */
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  background:url("//source.vipabc.com/ext/images/website/abc/homePage/v3/play_btn.png") no-repeat center center;
  background-size:cover;
}

/* Hide when video starts playing */
.vjs-default-skin.vjs-has-started .vjs-big-play-button {
  display: none;
}

.vjs-poster
{
    opacity: 0.3;
    padding-top: 10px;
}

.vjs-poster IMG 
{
    padding-top: 10px;
}

.ipad-1{width: 100%; height: 580px;
    /*background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/ipad1.png) no-repeat center bottom;*/
    position: relative; z-index: 10; overflow: hidden}
.ipad-hand{width:816px; height: 502px; position: absolute; z-index: 11;right: 14%; bottom: 0}
.home-body h3{line-height: 1.8em}
.home-body p{line-height: 2em; font-size: 14px;}

.ipad-1 .row {
    position: absolute;
    height: 398px;
    bottom: 50px;
}

.team{position: relative; height: 570px; overflow: hidden}
.team-img{position: absolute; right: 46%; bottom: 0; background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/comp-2-100.png) no-repeat;width: 703px; height: 563px;}
.team-bg{background: #f3f3f3; }
.team-bg .prel{
    bottom: -90px;
}
/*.team-bg{background: #dbdbdb}*/

.home-media{width: 770px; margin-left: auto; margin-right: auto}
.talk.media{margin-top: 30px; position: relative}
.talk.media:first-child{margin-top: 0px;}
.talk .media-body{padding: 20px 25px;position: relative; overflow: visible; font-size: 18px; line-height: 1.8em}
.talk .media-body.right{ background: #eef9f9;}
.talk .media-body.right img{position: absolute; right: -33px; top:50%; margin-top: -22px;}
.talk .media-right,.talk .media > .pull-right{ padding-left: 0px}
.talk .media-body.left{ background: #f4f4f4;}
.talk .media-body.left img{position: absolute; left: -32px; top:50%; margin-top: -22px;}
/*.talk .media-left, .talk  .media > .pull-left{ padding-right: 50px}*/
.talk .info{width: 140px;}
.talk .info a .media-object{display: inline-block; width: 80px;height: 80px}
.talk .media-right .info{text-align: right;}
.talk .media-right .info a{padding-right: 10px}
.talk .media-right .name{padding-right: 30px; margin-top: 15px;}
.talk .media-right .detail{font-size: 12px; margin-top: 3px;padding-right:25px}
.talk .media-left .info a{padding-left: 10px;}
.talk .media-left .name{padding-left: 36px; margin-top: 15px;}
.member-feel .thumbnail{border: none;background: #fff;padding: 0; border-radius: 6px;}
.member-feel .thumbnail img{border-top-left-radius: 6px; border-top-right-radius: 6px; }
.member-feel .caption{padding: 25px 20px;}
.member-feel ._caption-content{height: 100px;line-height: 1.42857143;overflow:hidden;}
.custom-list{overflow: hidden; margin-top: 40px; padding-left: 84.5px;}
.custom-list li{float: left; padding: 12px;}


.home-teachers-1{position: absolute; top: 82px;left: 92px; z-index: 10; background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/home1.png) no-repeat;width: 164px;height: 150px;}
.home-teachers-2{position: absolute; top: 82px;left: 92px; z-index: 10; background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/home2.png) no-repeat;width: 164px;height: 150px;}

.teachers-body .bg-gray .pt-150{padding-top: 150px}

.form-wrap{
    /*background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/ipad2.jpg) no-repeat center; */
    height: 560px
}

.footer h5{font-size: 16px; margin-top: 0}
.footer-list,.footer-list ul{list-style: none; margin: 0; padding: 0; color: #fff; overflow: hidden}
/*.footer-list>li{float: left; padding: 0 30px; vertical-align: top; text-align: left !important; }*/
.footer-list>li{float: left; width:16.6%;vertical-align: top; text-align: left; }
.footer-list>li:first-child{width: 178px;margin-right: 25px;}
/*.footer-list>li:first-child .btn-group{display: block}*/
.footer-list>li:first-child{padding-left: 0}
.footer-list>li:last-child{padding-right: 0}
.footer-list li>ul>li{display: block; padding: 5px 0; font-size: 12px;}
.footer-list li>ul>li a {color: #9b9b9b; line-height: 1.7em;}
.footer-list li>ul>li a:hover{color: #fff}
.footer-list .btn-default{text-align: left; background-color: #8c8c8c; border-color:transparent;
    color:#fff; padding-right: 30px;position: relative; width: 178px; border-radius: 10px;}
.footer-list .btn-default span{position: absolute; right: 10px;top:15px}
.footer-list .btn-default.active,.footer-list .btn-default:active,.footer-list .open > .dropdown-toggle.btn-default{background-color: #777 !important;}

/*course*/
.section-chart{background: #f8f8f8;padding-top: 60px; z-index: 1029; position: relative}
#winScroll{z-index: 1029; position: relative}

.dashboard-chart{ border-top: 12px solid #e6e6e6; background: #fff;
    padding-right: 30px; padding-left: 30px;
    box-shadow: 0 0 0 rgba(0,0,0,.5),0 0 0 #ffffff,5px 0 6px rgba(0,0,0,.2);
}

/*.shadow-line{box-shadow: 1px 0px 6px rgba(0,0,0,0.5); width: 1px; background: transparent !important; height: 520px; position: absolute; right: -1px}*/
.study-time span{display: inline-block; width: 40px;height: 40px; border-radius: 50%; border:1px solid #ccc;
    vertical-align: middle; text-align:center;line-height: 40px; margin-left: 10px; cursor: pointer}
.study-time span.active{border-color: #f84c4c; color: #f84c4c}
.study-type label{padding: 5px; color: #666;font-weight: normal}
.study-type label:hover{color: #f84c4c}
.study-type i{font-style: normal; padding: 5px;}
.study-type{text-align: right}

.dashboard-chart-result{width:130px; }
.dashboard-text{margin-left: 20px;width: 710px;background: #fff}
.course-btn,.formbtn{width: 200px; margin-left: 20px;}
.course-form1,.formtext{width: 480px;}
.dashboard-info{position: relative; z-index: 9}
.dashboard-info .dropdown-menu,.dropdown-menu{z-index: 9999}

option{width: 100%}


.p-range{padding: 20px 30px;}
.level-group{position:relative; height: 300px;}
.level-group li{position: relative;  display: inline-block; width: 60px; bottom: 0; text-align: center; color: #fff;/*font-weight: bold;*/cursor: pointer;  margin-left: 10px;}
.level-group li i{width: 100%; text-align: center;position: absolute; left:0;bottom: 0;font-style: normal}
.level1{height:25px;}
.level2{height:50px;}
.level3{height:75px;}
.level4{height:100px;}
.level5{height:125px;}
.level6{height:150px;}
.level7{height:175px;}
.level8{height:200px;}
.level9{height:225px;}
.level10{height:250px;}
.level11{height:275px;}
.level12{height:300px;}
.level-bg1{background: #fdbd40}
.level-bg2{background: #fd9040}
.level-bg3{background: #f84c4c}
.level-group li .info{display: none; background: #fff; color:#999;position: absolute;left:-75px;bottom:100%;margin-bottom:30px; width: 200px;
    border-radius: 5px; padding: 10px;font-size: 12px; text-align: left; z-index: 999;}
.level-group li.level-bg1 .info{border:1px solid #fdbd40;}
.level-group li.level-bg2 .info{border:1px solid #fd9040;}
.level-group li.level-bg3 .info{border:1px solid #f84c4c;}
.level-group li .info span{position: absolute;bottom: -12px;left: 100px;}
.level-group li:hover .info{display: block;}

.dashboard-chart-result{border-right: 1px solid #ddd;padding: 5px 0}
.dashboard-chart-result h3{margin: 5px}
.dashboard-chart-result h3 span{padding: 0 5px}
.dashboard-chart-result img{width: 30px;}
#closeForm{cursor: pointer;color: #666}
#closeForm:hover{color:#f84c4c}
/*for course level*/
.irs-min,.irs-max{display: none}

/*community*/

.banner-community .carousel-caption{top: 50px; text-align: left; width: 500px; z-index: 10; }
.banner-community .carousel-caption h4{line-height: 2em}
.banner-community  .carousel-indicators{bottom: -60px;}
.banner-community  .carousel-indicators li {width: 88px;height: 88px;border:none; margin-right:5px; border-radius: 50%;text-indent: 0; background: none;
    vertical-align: middle;transition: all 0.6s ease-in-out 0s; line-height: 88px;}
.banner-community  .carousel-indicators li img{width: 66px;height: 66px; border-radius: 50%;border:2px solid #fff;transition: all 0.3s ease-in-out 0s; opacity: .85}
/*.banner-community  .carousel-indicators li:hover { width: 88px;height: 88px;}*/
/*.banner-community  .carousel-indicators li:hover img{  width: 88px;height: 88px; opacity: 1}*/
.banner-community  .carousel-indicators li.active {margin: 1px 5px 1px 1px; width: 88px;height: 88px;line-height: 88px; background: none !important;}
.banner-community  .carousel-indicators li.active img{  width: 88px;height: 88px; opacity: 1}
.banner-community  .carousel-indicators .name{margin-top: 5px; display: none; font-size: 12px;line-height: 20px;}
.banner-community  .carousel-indicators li.active .name{ display: block;line-height: 20px;}
/*.banner-community  .carousel-indicators li:hover .name{display: block}*/

.banner-community .item{width: 100%; height: 400px; }
.banner-community .slide1{ background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/pic01-josh.jpg) no-repeat center}
.banner-community .slide2{ background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/pic01-steve.jpg) no-repeat center}
.banner-community .slide3{ background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/pic01-wyz.jpg) no-repeat center}
.banner-community .slide4{ background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/pic01-zyt.jpg) no-repeat center}

.com-reason{background: #f8f8f8; padding: 20px; font-size: 16px; position: relative; line-height: 1.6em; color: #444;
    border-radius: 7px; margin-bottom: 30px}
.com-reason p{height: 104px; overflow: hidden}
.com-reason div{color: #999}
/*.com-reason img{position: absolute; bottom: -11px; right: 60px;}*/


.shadow, .shadow-narrow {  background-color: #fff;  position: relative; }
.overlay-container { display: block; overflow: hidden; position: relative;text-align: center;}
.overlay-bottom, .overlay-to-top, .overlay-top { background-color: #1e1e1e; color: #fff; opacity: 0;filter: alpha(opacity=0); position: absolute;top: auto;}
.overlay-bottom, .overlay-top {  top: 0; height: 100%; left: 0; overflow: hidden; padding: 15px; right: 0;transition: all 0.25s ease-in-out 0s; z-index: 9}
.overlay-bottom.links, .overlay-to-top.links {z-index: 12; display: none;}
.overlay-to-top { bottom: -30px; padding: 10px;  transition: all 0.25s ease-in-out 0s;}
.overlay-link, .overlay-to-top { left: 0; right: 0;}
.overlay-top {top: 0;}
.overlay-visible .overlay-bottom, .overlay-visible .overlay-top { height: auto !important; opacity: 1; padding-bottom: 20px;}
.overlay-visible.overlay-container:hover .overlay-bottom:not(.links), .overlay-visible.overlay-container:hover .overlay-top { opacity: 0.5;}
.overlay-bottom a, .overlay-to-top a, .overlay-top a { color: #fff;}
.overlay-container .text { padding: 0 20px; position: relative;}
.overlay-container .text h3, .overlay-container .text h3 .small { color: #fff;  margin-top: 0;}
.overlay-container .text a:hover {color: #fff;}
.overlay-bottom .btn, .overlay-top .btn {  border-color: #fff; color: #fff; position: absolute; top:40%; left: 18%}
.overlay-bottom .btn:hover, .overlay-top .btn:hover { background-color: #fff; color: #777;}
.image-box.style-2:hover .overlay-bottom, .image-box.style-2:hover .overlay-top, .overlay-container:hover .overlay-bottom, .overlay-container:hover .overlay-top {
    height: 100%; opacity: 0.5; top: 0; filter: alpha(opacity=50);}

.overlay-container .links{display: none;}
.overlay-container:hover .links{display: block}
.overlay-container:hover .links .btn{border-color: #fff; color: #fff; position: absolute; top:40%; left: 21%; z-index: 999;padding: 10px 30px; font-size: 18px;}
.overlay-container:hover .links .btn:hover {
    background-color: #f74c4c;
    color: #fff;
    border-color: #f74c4c;
}

.image-box:hover .overlay-to-top, .overlay-container:hover .overlay-to-top {
    bottom: 0;  opacity: 0.5;}
.overlay-link {
    background-color: rgba(30, 30, 30, 0.5);
    bottom: 0;  color: #fff; opacity: 0; overflow: hidden;
    padding: 15px; position: absolute; top: 0; transition: all 0.25s ease-in-out 0s; z-index: 10;}
.overlay-link i { border: 1px solid #fff; border-radius: 100%;
    color: #fff; font-size: 32px; height: 80px;left: 50%;
    line-height: 80px; margin: -40px 0 0 -40px;
    position: absolute;  top: 50%; transition: all 0.2s ease-in-out 0s; width: 80px;}
.overlay-link i:hover { background-color: #fff; color: #777;}
.jumbotron, .main-navigation .badge { background-color: transparent;}
.overlay-link.small i { font-size: 14px; height: 25px; line-height: 25px; margin: -12.5px 0 0 -12.5px; width: 25px;}
.overlay-container:hover .overlay-link { height: 100%; opacity: 1;}




.teachers-com{position: relative; margin-top: 20px;margin-bottom: 20px;}
.teachers-com img{width: 72px; height: 72px; border-radius: 50%;position: relative; z-index: 6}
.teachers-com .line{display: block; border-top:1px solid #ddd; width: 100%; position: absolute; left: 0; right: 0; top:50%; z-index: 5}
.teachers-com-name{font-weight: bold}
.course-com{margin-bottom: 30px}
.course-com .thumbnail{padding: 0; border: none; position: relative; z-index: 8;}
.course-com .caption{padding: 15px 20px; color: #666}
.course-com .caption-sm{padding: 20px; color: #666}
.course-com .caption p{height: 100px; overflow: hidden; text-align: left; }

.course-com .thumbnail .img-wrapper{position: relative;}
.course-com .thumbnail .img-wrapper img{width: 100%;}
.course-com .thumbnail .img-wrapper .course-title{
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
    width: 94%;
    padding: 6px 3%;
    font-size: 16px;
    color: #fff;
    background: url(//source.vipabc.com/Ext/images/website/abc/freelobby/specialSession/new/title_bg.png) repeat;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.course-com .thumbnail .caption .time{
    line-height: 35px;
}
.course-com .thumbnail .caption .hover-before p{
    text-align: center;
    font-size: 16px;
}


.study-report{padding-bottom: 50px;}
.study-report dl{ margin-bottom: 0px;}
.study-report dd{ margin-bottom: 10px; color: #999}
.study-report dt{  font-size: 14px; font-weight: bold}
.study-report .img{margin-bottom: 15px;margin-top: 39px;}
.study-report .img img{border-radius: 8px;  width: 100%;}
.study-report dd.view{margin-bottom: 0}
.study-report .view img{vertical-align: middle; margin-right: 5px;margin-bottom: 2px; display: inline-block}
.study-report.md dt{font-size: 30px; margin-bottom:20px}
.study-report.md .img{margin-top: 56px;}

.scheme-1{padding:20px 0 20px 40px; overflow: hidden}
.scheme-1 h2{color: #fff; font-size: 38px;}
.scheme-1 p{color: #afb7bc; font-size: 14px;}
.scheme-1 img{width: 64px; height: 64px; border-radius: 50%; border:1px solid #fff}
.scheme-1 .btn-white-clear{border-radius: 50px; width: 200px;padding: 12px 30px;font-size: 16px; margin-top: 15px;
    background: transparent;transition: all 0.25s ease-in-out 0s;}
.scheme-1 .btn-white-clear:hover{ background: rgba(255,255,255,0.2);}
.scheme-1 dl{margin-bottom: 0}
.scheme-1 dd,.scheme-1 dt{ display: inline-block; vertical-align: bottom}
.scheme-1 dt{color: #fff; padding-left: 10px}
.qa-list .qa{min-height:300px;}
.qa{background: #fff;padding: 30px 30px 20px; border-radius: 6px;}
.qa h4{font-weight: bold; margin-bottom: 20px;}
.qa p{color: #666; font-size: 14px; line-height: 2em}

.fav{width: 15px;height: 15px; display: inline-block;/* background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/fav.png) no-repeat; */ vertical-align: middle;}
.qa .active .fav{ background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/fav-active.png) no-repeat;}
.qa .active{color: #f74c4c}
.qa-list>div{margin-bottom: 30px;}
.qa .info{height: auto;overflow: hidden}
.qa>p:last-child{margin-bottom: 0}
.qa.last{padding: 80px 30px;}
.qa .btn-danger-clear{border-radius: 50px}
.col-lg-img{position: relative}
.col-lg-img img{width: 100%; border-radius: 6px;}
.col-lg-img p{padding:10px 5px;position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); border-radius: 0 0 6px 6px;
    color: #fff; font-size: 16px; text-align: right; margin-bottom: 0; letter-spacing: 0.1px;}
.col-md-img{position: relative}
.col-md-img img{width: 100%; border-radius: 6px 6px 0 0;}
.col-md-img p{background: #f8f8f8; padding: 20px 30px; font-size: 16px; line-height: 2em; margin-bottom: 0}
.col-md-img span.h3{font-size: 16px; font-weight: bold;margin-top: 0;line-height: 1.5em; display: block}
.col-md-img.md p{padding-top: 35px;}
.video-play-sm{position: absolute; top: 5px; left: 0;padding: 10px 20px; color: #fff; font-weight: bold; font-size: 16px;
    background: rgba(0,0,0,0.5); }
.video-play-sm img{ width: auto; display: inline-block; vertical-align: middle; margin-right: 8px}

.about-video{width: 100%; overflow: hidden}
.about-video .info{position: absolute; left: 0; right: 0; top: 100px; color: #fff !important; font-size: 48px;}
.about-video .info p small{color: #fff !important; font-size: 16px}
.play-btn{position: absolute; left: 50%; top: 280px; margin-left: -45px; cursor: pointer}
/*about us*/
.banner-about{background: url("//source.vipabc.com/Ext/images/website/abc/homePage/v3/about-banner.jpg") no-repeat center; width: 100%; height: 400px; position: relative}
.banner-about h1{color: #fff; padding-top:120px; line-height: 2em; margin-top: 0}
.introduces{width: 750px; margin:auto;font-size: 14px; line-height: 1.8em;}
.vp-introduceWrap{
    width:100%;
    padding:55px 0 50px 0;
    background: #f8f8f8;

}
.vp-introduceWrap img{
    display:block;
    margin:0 auto 35px auto;
}
.vp-department .container.p-lg{
    padding-top:85px;
}
.vp-hotNews{
    margin-top:20px;
}
.vp-hotNews.container{
    width:928px;
    padding:0;
}
.vp-hotnewsTop{
    margin-bottom:24px;
}
.vp-hotnewsTop img{
    height:340px;
}
.vp-hotnewsTop .title-gay{
    width:100%;
    height:50px;
    line-height: 50px;
    padding:0 23px;
    background-color: rgba(2,2,2,.5);
    overflow: hidden; 
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vp-hotnewsTop .col-lg-img p{
    text-align: left;
}
.vp-hotNews .news-list{
    position: relative;
    height:340px;
    padding:25px 30px;
    border-radius: 5px;
    background-color: #f8f8f8;
}
.vp-hotNews .news-list h2{  margin:0;  font-size: 20px; color: #484848; margin-bottom: 5px;}
.vp-hotNews .news-list .btn-more:hover{ color:rgb(212,63,58);}
.vp-hotNews .news-list .btn-more{ position: absolute; top:28px; right:30px; color: #ff434e; }
.vp-hotNews .news-list li{
    width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vp-hotNews .news-list li a{
    font-size: 14px;
  line-height: 2.43;
  color: #434343;
}
.vp-hotNews .news-list li a:hover,.vp-hotNews .col-md-img p a:hover{
    color:#f84c4c;
}
.vp-hotNews .news-list li i{
    display: inline-block;
    width:3px;
    height:3px;
    background-color:#b3b3b3;
    margin-right:8px;
    vertical-align: middle;
}
.vp-hotNews .vp-newsBig{width: 100%; height: 340px;  background-repeat: no-repeat; background-position: center center; border-radius: 5px;}
.vp-hotNews .col-md-img p{ height: 60px; overflow: hidden; padding: 8px 15px 8px 15px; letter-spacing: 0;}
.vp-hotNews .col-md-img .h3{ font-size: 14px; line-height: 1.43; color: #484848; }
.vp-knowMore{
    padding-top:40px;
}
.vp-certicate{
    margin:60px 0 50px 0;
    text-align: center;
}
.vp-certicate h2{
    font-size: 48px;
    color: #383838;
    margin-bottom:20px;
}


.video-modal .modal-dialog{margin-top: 50px}
.video-modal .modal-content{box-shadow: none; background: transparent; border: none; border-radius: 0;}

.a-timeline{position: relative;  color: #888;}
.a-line{height: 2px;background: #ddd; position: absolute;left:0; right: 0px; top: 5px}
/*.a-timeline ul{position: absolute; top:30px; width: 100%}*/
.a-timeline li{height: 68px; display: block; float: left; text-align: center; position: relative; top:-10px;   padding-top: 10px;}
.a-timeline li span{display: inline-block; width: 12px; height: 12px; border:2px solid #ddd;border-radius: 50%; background: #fff; margin-bottom: 10px;}
.a-timeline li i{display:inline-block;width: 32px;height: 32px; border-radius: 50%; background: #f64c4c;
    color: #fff; text-align: center;font-style: normal; font-size: 10px;  line-height: 32px; position: absolute; top: -0px; left: 0%; margin-left:-16px;
    transition: all 0.5s ease-in-out 0s; display: none; cursor: default;opacity: .1}
.a-timeline .show{left: 50%; display: block;opacity: 1 }
.a-timeline div[class^="tabnav-"]{ float: left}
.a-timeline div[class^="tabnav-"] ul{ margin: 0;padding: 0; width: 100%}
/*.tabnav-1{width: 11.11%}*/
.tabnav-1{width: 100%}
.tabnav-1 li{width: 11%;}
.tabnav-2{width: 16.665%}
.tabnav-2 li{width: 33.333%;}
.tabnav-3{width: 27.775%}
.tabnav-3 li{width: 20%;}
.tabnav-4{width: 27.775%}
.tabnav-4 li{width: 20%;}
.tabnav-5{width: 16.665%}
.tabnav-5 li{width: 33.333%;}
.tabnav-1.active li.current i{left: 50%; display: block;opacity: 1}
.tabnav-2.active li.current i{left: 50%; display: block;opacity: 1}
.tabnav-3.active li.current i{left: 50%; display: block;opacity: 1}
.tabnav-4.active li.current i{left: 50%; display: block;opacity: 1}
.tabnav-5.active li.current i{left: 50%; display: block;opacity: 1}
/*.active .current-active i{left: 50%; display: block;opacity:1 }*/

.timeline{padding:15px 30px;border:1px solid #ddd; border-radius: 15px}
.timeline>.news a{ display: block;color: #666; font-size: 16px; padding: 6px;}
.timeline>.news a:hover{ color: #f64c4c;}


/*box-gray*/
.box-gray-lg{background:#f0f0f0;border-radius: 10px; border:1px solid #dcdcdc; padding-top: 65px; padding-bottom: 45px;font-size: 16px;}
.box-gray-lg hr{border-color: #acacac}
.box-gray-lg .num{font-size: 32px; font-weight: bold}

.fill-in-form .gift{width: 365px; background: url("//source.vipabc.com/Ext/images/website/abc/homePage/v3/gift-line.png") no-repeat right center}
.fill-in-form .gift h4{margin-top: 35px;}
.fill-in-form .gift h4 p{margin-bottom: 5px;}
.fill-in-form .gift span{color: #484848}
.fill-in-form .gift .text-muted{color: #acacac}
.fill-in-form .form-modal {float: left;;width: 300px; margin: 60px 0 0 70px;}
.fill-in-form .form-modal .form-group{margin-bottom: 20px;}
.fill-in-form .close{position: absolute; top: 20px;right: 20px; opacity: .65; cursor: pointer;z-index: 999}
.fill-in-form .close:hover{position: absolute; top: 20px;right: 20px; opacity: 1; cursor: pointer;z-index: 999}
.fill-in-form .info{color: #acacac;font-size: 14px;}
.fill-in-form .info a{color:#acacac;}
/*.fill-in-form .info span{display: inline-block; vertical-align: middle}*/


/*scrollspy-wrap*/

/*.scrollspy-wrap{height: 1px}*/
.scrollspy-left{ right: 62.5% ; z-index: 1028;top:130px;font-size: 16px; width: 245px; text-align:left;border:none!important; display:none}
.scrollspy-left .navbar-nav{border:none !important;}
.scrollspy-left .navbar-nav>li{border:none !important;float: none; display: block}
.scrollspy-left .navbar-nav a{color: #484848; padding: 5px; }
.scrollspy-left .navbar-nav .active a{color: #f84c4c}
.scrollspy-left ul{position: relative}
/*.js-navbar-scrollspy{ width: 245px;  z-index: 9999; right: 62.5% }*/
.scrollspy-box .navbar-default{border:none !important;}

.scrollspy-left .bottom{ position: absolute; top:400px; width: 245px}
.scrollspy-box .ipad-min2,.scrollspy-box .mac-bg{margin-bottom: 150px;}
.scrollspy-box .ipad-min2{position: absolute; left: 40.5%; height: 600px;}
.scrollspy-box .mac-bg{position: absolute; left: 35%; height: 530px}
.scrollspy-box h4{color: transparent; font-size: 0; margin: 0;height: 10px; overflow: hidden}
.active .hide{display: block !important;}
.scrollspy-box .height-div{height:200px; z-index: 100}
.height-div#two{height:400px;}
.height-div#three{height:400px;}
.height-div#four{height:700px;}
.ipad-min2-1{left: 40.5%; z-index: 1000; position: fixed}
.mac-bg{left: 40.5%;  z-index: 999; position: fixed}
.height-div-sm{height: 300px}
.kehoupingfen{position: absolute;left: 80px; top: 140px;z-index: 1020; background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/video/kehoupingfen.jpg) no-repeat; width: 610px;height: 456px; display: none}
.shezhigerenpianhao{position: fixed;left:  80px; top: 140px;z-index: 1020;background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/video/course-DCGS.jpg) no-repeat; width: 610px;height: 456px;display: none}
.dingke{position: fixed;left: 80px; top: 140px;z-index: 1020;background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/video/dingke.jpg) no-repeat; width: 610px;height: 456px;display: none}
.kaishixuexi{position: fixed;left:80px; top: 140px;z-index: 1020;width:372px;height:280px;display: none;}
.h2-a{position: fixed; top: 80px;text-align: center; left: 0; right: 0}
/*.mac-bg-ipad{left: 40.5%;  z-index: 999; background:url("//source.vipabc.com/Ext/images/website/abc/homePage/v3/mac-bg.png") no-repeat right bottom; width: 920px; height:520px; position: relative}*/
.mac-bg-ipad{left: 40.5%;  z-index: 999; background:url("//source.vipabc.com/Ext/images/website/abc/homePage/v3/mac-bg.png") no-repeat right bottom; width: 920px; height:520px; position: relative}

.ipadnav{width: 250px;height: 400px}
.ipadnav li{ display: block; float: none}
.ipadnav li.active a{color: #f84c4c}
.ipadnav li a{padding: 5px 0; color: #666}
.ipadnav>div{ position: absolute; bottom: 0}

.ipadtabs>li{position: relative; padding-left: 0}
.ipadtabs>li>div{position: absolute; width: 300px;}


/*customer-story*/
.banner-customer{background: url("//source.vipabc.com/Ext/images/website/abc/homePage/v3/cs-banner.jpg") no-repeat;height: 630px; text-align: left; color: #fff}
.banner-customer .info{width: 660px; margin-top:160px;line-height: 1.5em}
.banner-customer h1{margin: 0; font-size: 36px;line-height: 1.5em}
.banner-customer h4{margin-top: 30px;line-height: 1.5em}
.banner-customer .profile{margin-top: 70px;}
.banner-customer .profile .name{font-size: 30px;font-weight: bold; display: block;margin-bottom: 15px;}
.cs-player{position: absolute; right: 0; bottom: 0px; width: 115px;height: 115px;}
.cs-player:hover{opacity: 0.8; filter: alpha(opacity=80);}
.attribute{padding: 35px 0; text-align: center; font-size: 16px; color: #666}
.attribute h4{font-size: 30px;}
h2.sm{font-size: 36px;}
.cs-article{width: 870px; font-size: 18px; margin-left:auto; margin-right:auto}
.motto{display: table; width: 100%}
.motto>div{display: table-cell;}
.motto>.left{background: #bc7663; font-size: 30px;color: #fff; vertical-align: middle; line-height: 1.8em }
.motto>.right{width: 1040px; }
.cs-from{background: url("//source.vipabc.com/Ext/images/website/abc/homePage/v3/cs-img5.png") no-repeat left bottom; height: 500px;}
.cs-from>div{margin-top: 70px;}
.cs-from button{width: 60%; margin-left: auto;margin-right: auto}
.cs-from a{text-decoration: underline; color: #484848}
.cs-member-feel .thumbnail{border:1px solid #ddd; border-radius: 6px; padding-top: 40px;}
.cs-member-feel .thumbnail:hover{border:1px solid #666;}
.cs-member-feel .thumbnail img{border-radius: 0}
.cs-member-feel .thumbnail .caption{padding-bottom: 10px}
.cs-member-feel .thumbnail .caption>p:last-child{opacity: 0; filter: alpha(opacity=0);}
.cs-member-feel .thumbnail:hover .caption>p:last-child{display: block;opacity: 10; filter: alpha(opacity=100);}

.home-marquee li{width: 100%}

/*select*/
.select-from .form-control{
    width:100%;
    /* height: auto; */
    color:#999;
}
.select-from .form-control.valid{color: #484848;}
.select-from .btn{ width:100%;border-radius: 6px;font-size: 16px; height: 46px; line-height: 1.33333; padding: 10px 16px;color: #999; margin: 0;border-color: #ddd}
.course-select .btn{height: 34px; font-size: 12px;}

.select-from button.error{border-color: #f84c4c}

.dropdown-menu > li > a:hover{background: #ececec}
/* for ie8*/
/*.video-modal .modal-dialog .modal-content{background:url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/bost.jpg) no-repeat center\9;min-height: 480px\9; background-size: cover\9}*/
.video-dcgs{width: 890px\9 !important;height: 480px\9 !important;}
@media (max-width: 768px){

    .tabs-left{position: relative;height: auto}

    .tabs-left>.bottom{position: absolute; bottom: 20px; display: none}
    .iphone-bg{position: absolute; left: 40px; bottom: 10px !important;
        background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/iphone-bg.png); background-size: cover;
        padding: 6px 20px 0 26px;        width: 300px;  }
    .ipad-bg{position: absolute; right: 0px; bottom:10px;background: url(//source.vipabc.com/Ext/images/website/abc/homePage/v3/ipad-bg.png);
        background-size: cover; width: 50%; height: auto;   padding: 20px 15px 0 10px
    }
    div[class^="col-md-"]{margin-bottom: 10px}
    .response-img{width: 100%}
    .mr-125{margin: 0}
    .w90{width: 100%}
    .container.width73per{width: 98% !important;}
    .course-list .btn-radius{width: 100%}
    .ipad-1 .row {top:15px;}
    .ipad-1 div[class^="col-md-"]{width: 100%}
    .ipad-hand {left: inherit!important;}
}
@media (min-width: 768px){
    .container.width73per{width: 98% !important;}
    .nav > li > a{padding-left: 6px;padding-right: 6px;}
    .navbar-default .navbar-nav>li>a,#main-menu.navbar-default .navbar-nav > li > a,#main-menu.navbar-default.on .navbar-nav > li > a{font-size: 12px;}
    .level-group li{width: 45px; margin-left: 5px}
    .course-list .btn-radius{width: 100%}
    /*.footer-list>li{ padding: 0 3px; }*/
    .footer-list>li:first-child{width: 148px}
    .footer-list .btn-default{width: 148px}
    /*.footer-list>li:last-child{margin-left: 5px}*/
    #footer .container{padding: 0}
/*     .footer-blogroll { margin-top: 38px; margin-left: 140px; } */
    .teachers-img3 .title{width: 58%;}
    .scheme-1 h2{font-size: 34px}
    .home-media{width: 720px; margin-left: auto; margin-right: auto}
    .home-media .media-body{width: 560px !important;}
    .custom-list{overflow: hidden; margin-top: 40px; padding-left:14.5px;}
    .custom-list li{padding: 12px 2px}
    .list .info { padding: 62px 10px 0;}
    .pt-200 {  padding-top: 100px; }
    .teachers-info h3{font-size: 24px;}
    .pull-right.mr-125{margin-top: 50px}
    #main-menu.navbar-default .navbar-nav > li > a{letter-spacing:normal;}
   
}
@media (min-width: 860px){
    .ipad-1 .row {
        width: 780px;
    }
}
@media (min-width: 992px){
    .nav > li > a{padding-left: 15px;padding-right: 15px;}
    .level-group li{width: 58px;margin-left: 10px;}
    .course-list .btn-radius{width: 148px}
    /*.footer-list>li{float: left; padding: 0 42px; vertical-align: top; text-align: left !important; }*/
/*    .footer-list>li{
        float: left;width:16.5%;text-align: left;
    }*/
    /*.footer-list>li:first-child{width: 178px;margin-right: 25px;}*/
    /*.footer-list>li:first-child .btn-group{display: block}*/
    /*.footer-list>li:first-child{padding-left: 0;/* display: none; */
    /*.footer-list>li:last-child{padding-right: 0; margin-left: 0}*/
/*     .footer-blogroll {  margin-top: 38px;  margin-left: 176px;    } */
    .teachers-img3 .title{width: 60%}
    .scheme-1 h2{font-size: 38px}
    .home-media{width: 770px; margin-left: auto; margin-right: auto}
    .home-media .media-body{width: 600px;}
    .custom-list{overflow: hidden; margin-top: 40px; padding-left: 0;}
    .custom-list li{padding: 4.5px; display: inline;}
    .custom-list li img{width: 100%; }
    .list .info {  padding: 62px 20px 0; }
    .pt-200 {  padding-top: 200px; }
    .teachers-info h3{font-size: 31px;}
    .pull-right.mr-125{margin-top: 0px}
}

@media (max-width: 1024px)
{
    .ipad-hand div.video>div {
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        display: none
    }
    .ipad-hand div.video .jp-mobile {
        display: block
    }
}
@media (min-width: 1200px){
    .container.width73per{width: 73% !important;}
     .nav > li > a{padding-left: 9px;padding-right: 9px;}
    .container {width: 984px;}
    .ipad-1 .row {
        width: 1014px;
    }
    .container-lg{width: 1140px; margin-right: auto; margin-left: auto}
    .level-group li{width: 60px;margin-left: 10px;}
    .navbar-default .navbar-nav>li>a, #main-menu.navbar-default .navbar-nav > li > a, #main-menu.navbar-default.on .navbar-nav > li > a{font-size:16px;}
    .navbar-default .navbar-nav > li.vp-loginStatus > a{
        font-size:14px!important;
    }
}
@media (max-width: 1200px)
{
    .navbar-default .navbar-nav>li>a, #main-menu.navbar-default .navbar-nav > li > a, #main-menu.navbar-default.on .navbar-nav > li > a{font-size:14px;}
}

@media (min-width: 1440px){
    .qa p{font-size: 16px; }
    .nav > li > a{padding-left: 20px;padding-right: 20px;}
    .introduces{font-size: 16px; }
    .home-body p{ font-size: 14px;}
    .container.width73per{width: 73% !important;}
}

@media (max-width: 1440px){
   .ipad-hand 
   {
        right: 0;
        width: 700px;
        top: 122px;
   }
}
@media (max-width: 992px) 
{
    .ipad-1 {height:710px;}
    .ipad-1 .row {top:15px;}
    .ipad-1 div[class^="col-md-"]{width: 100%}
    .ipad-hand {top:290px;}
    
   }


/*base css*/
p{letter-spacing:1px; }
h1{font-size: 72px;}
h2{font-size: 48px; letter-spacing: 2px}
h3{font-size: 36px;}
h3.small{font-size: 28px;}
h4{font-size: 24px;}
h5{font-size: 18px;}
h2>small{font-size: 50%}
h2>p>small{font-size:18px}
.mt-lg{margin-top:50px;}
.mt-lg.mt-lg2{margin-top: 34px; }
.mb-lg{margin-bottom:50px;}
.m30{margin: 30px}
.pt-lg{padding-top:100px;}
.w90{width: 95%}
.division{height:130px;}
.division-md{height:85px;}
.division-sm{height:45px;}
.pt-50{padding-top: 50px;}
.pt-150{padding-top: 150px !important;}
/*.pt-200{padding-top: 200px;}*/
.mr-125{margin-right: -125px;}
.bg-white{background: #fff !important;}
.form-control{border-radius: 6px; box-shadow: none; border-color: #ddd;color: #484848;}
.form-control:focus{box-shadow: none;border-color: #484848}
.error{color: #f74c4c;font-size: 12px;}
.error.form-control{border-color: #f84c4c}
select.error{color:#acacac;}
.form-group{margin-bottom: 30px;}
.form-group .item-left{
    float: left;
    width: 72px;
    }
.form-group .item-right{margin-left: 76px;}
.morphext>.animated{display: inline-block}
.red{color: #f84c4c}
.no-margins{margin: 0}
.border-r{border-right: 1px solid #ddd}
li{ list-style: none;}
.padding-sm{padding: 0 5px}
.modal-lg-md{width: 820px !important;}
.input-lg{height: 46px;font-size: 16px;}
a{color: #e50012;outline:none; }
a:hover, a:focus{text-decoration: none; color: rgb(212,63,58); outline:none;}
.btn-danger{background: #fa2828;font-size:14px;padding:7px 0px;text-align:center}
.bg-info{background: #f7faff;}
.bg-gray{background: #f8f8f8;}
.footer .bg-gray-dark{background: #505050;padding-bottom:0;}
.bg-gray-dark-d{background: #484848}
.bg-gray-dark{background: #5e5d5d}
.bg-gray-blue{background: #60666b}
.text-white{color: #fff}
.p-lg{padding-top: 60px; padding-bottom: 60px;}
.p-md{padding-top: 40px; padding-bottom: 40px}
.mt-lg{margin-top: 70px;}
.mt-md{margin-top: 40px;}
.mt-md-m{margin-top: 20px;}
.mt-sm{margin-top: 10px;}
.no-padding{padding: 0 !important;}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus{
    outline-offset:0;
    outline:medium dotted transparent;
}
.top-wrap{height:40px;background-color:#fff;border-bottom:1px solid #ddd}
.top-txt{float: right;color: #aaa;line-height: 40px;text-align: right;}


/*--site drainage lightBox--*/
.lightBox-bg{
	position:fixed;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:99999;
	background-color:#000;
	filter:alpha(opacity=75);
	opacity:0.75;
	-moz-opacity:0.75;
}

.site-drainage
{
    position:fixed;
    width: 840px;
    height: 560px;
    z-index:9999999;
    left:0;
    *left:50%;
    right:0;
    margin:0 auto;
    *margin-left:-420px;
    background-color:#fff;
 }
  .site-drainage .drainage-box{float:left;}
 .site-drainage .drainage-box h3
 {
     text-align:center;
     font-size:26px;
     line-height:36px;
     color:#333;
     font-weight:normal;
     padding:30px 0;
     margin: 0;
     }
  .site-drainage .drainage-div
  {
      margin: 0 38px;
   }
   .site-drainage .drainage-div div
   {
       float:left;
       position:relative;
       overflow:hidden;
       }
.site-drainage .drainage-div div a{display:inline-block;}
.site-drainage .drainage-div .adult-users{width: 504px; margin-right: 8px;border:1px solid rgba(255,255,255,0.5);}
.site-drainage .drainage-div .teen-users{ width: 247px;margin-bottom:8px;border:1px solid rgba(255,255,255,0.5);}
.site-drainage .drainage-div .freecourse,.site-drainage .drainage-div .Enterprise-users,.site-drainage .drainage-div .studyabroad{width:249px;margin-right:8px; }
.site-drainage .drainage-div .Enterprise-users{margin-right:0px;}
.site-drainage .drainage-div div a div
{
    position: absolute;
    display:block;
    width:100%;
    height:100%;
    top: 0;
    left: 0;
    color:#323232;
    }
.site-drainage .drainage-div div a span   
{
    position: absolute;
    display:block;
    top: 25px;
    left: 10px;
    color: #333;
} 
.site-drainage .drainage-div div.vp-teen-users a span{
    top:40px;
}
.site-drainage .drainage-div div.vp-teen-users a span strong{
    padding-bottom: 0;
}
.site-drainage .drainage-div .adult-users span{top:46px;}
.site-drainage .drainage-div div a span strong{display:block;padding-bottom:10px;font-size:26px;}
.site-drainage .drainage-div div a span em
{
    font-weight:normal;
    font-style:normal;
    font-size: 16px;
    }
.site-drainage .drainage-div.en-version div a span em{
    width: 80%;
    font-size: 14px;
    display: block;
    line-height: 18px;
}
.site-drainage .drainage-div.en-version div a span strong{
    font-size: 18px;
    line-height: 24px;
}
.site-drainage .drainage-div .freecourse a span em,.site-drainage .drainage-div .Enterprise-users a span em,.site-drainage .drainage-div .studyabroad a span em
{   display: none;
    }
.site-drainage .drainage-div.en-version .freecourse a span em, .site-drainage .drainage-div.en-version .Enterprise-users a span em, .site-drainage .drainage-div.en-version .studyabroad a span em {
    display: none;
    }
.site-drainage .drainage-div .freecourse:hover a div,.site-drainage .drainage-div .Enterprise-users:hover a div,.site-drainage .drainage-div .studyabroad:hover a div
{
   	background-color:#000;
	filter:alpha(opacity=60);
	opacity:0.6;
	-moz-opacity:0.6;
    }
.site-drainage .drainage-div .freecourse:hover span,.site-drainage .drainage-div .Enterprise-users:hover span ,.site-drainage .drainage-div .studyabroad:hover span   
{   width:100%;
    color: #fff;
    text-align: center;
    left:0;}
.site-drainage .drainage-div .freecourse:hover span strong,.site-drainage .drainage-div .Enterprise-users:hover span strong ,.site-drainage .drainage-div .studyabroad:hover span strong
{
    font-size:24px;}
.site-drainage .drainage-div.en-version .freecourse:hover span strong,.site-drainage .drainage-div.en-version .Enterprise-users:hover span strong ,.site-drainage .drainage-div.en-version .studyabroad:hover span strong{font-size:20px;}
.site-drainage .drainage-div .freecourse:hover span em,.site-drainage .drainage-div .Enterprise-users:hover span em,.site-drainage .drainage-div .studyabroad:hover span em 
{
   display:inline-block; }
.site-drainage .drainage-div.en-version .freecourse:hover span em, .site-drainage .drainage-div.en-version .Enterprise-users:hover span em, .site-drainage .drainage-div.en-version .studyabroad:hover span em {
  display:inline-block;  }
.site-drainage .drainage-div .Enterprise-users span
{
    top: 25px;
    left: 10px;}
.site-drainage .drainage-div .studyabroad span
{
    top: 25px;
    left: 10px;}
.site-drainage .myselect 
{
    float:right;
    padding:24px 0;
    margin-right:38px;
    color: #484848;
    width: 116px;
     *width: 124px;
    }
 .site-drainage .myselect label{font-weight:normal;}
.drainage-close{
	float:right;
	display:block;
	width:16px;
	height:16px;
	margin:15px 15px 0 0;
	background:url(//source.vipabc.com/ext/images/website/abc/homePage/v3/pc/close_icon.png) no-repeat center 0;
	cursor:pointer;
}
.drainage-close:hover{background-position:center -16px;}
@media all and (max-width:850px){
.site-drainage{width:726px;height:auto;}
.site-drainage .drainage-box h3{font-size:18px;line-height:24px;padding:15px 0;}
.site-drainage .drainage-div{margin:0 19px;}
.site-drainage .drainage-div .adult-users  
 {      
     width:454px;
     margin-right:7px;
     margin-bottom:7px;
  }
.site-drainage .drainage-div .teen-users
   {    
       width:222px;
 }
.site-drainage .drainage-div .freecourse, .site-drainage .drainage-div .Enterprise-users, .site-drainage .drainage-div .studyabroad
   {
       width:224px; }
 .site-drainage .drainage-div .freecourse,.site-drainage .drainage-div .studyabroad{margin-right:7px;}
 .site-drainage .drainage-div .adult-users span{top:44px;}
 .site-drainage .drainage-div div a span strong{font-size:24px;padding-bottom: 8px;}
 .site-drainage .drainage-div.en-version div a span strong{font-size: 17px;line-height: 20px;}
 .site-drainage .drainage-div.en-version div a span em{font-size:13px;line-height: 16px;}
 .site-drainage .drainage-div div a span em{font-size:14px;}
 .site-drainage .drainage-div .freecourse a span em,.site-drainage .drainage-div .Enterprise-users a span em,.site-drainage .drainage-div .studyabroad a span em
{   display:block;
    }
.site-drainage .myselect {padding:15px 0;}
	
}
/**
	2016.5.9 uther
*/
.header ul li{
	float:right;
	padding: 0px 9px;
	cursor: pointer;
}
.header ul li a
{
    color:#999999;
    line-height:40px;
    font-size:13px;
    
    }
    .header ul li a:hover{
        color:#f74c4c;
    }

#wechat
{
   height:40px;
    padding:7px 17px 0 0px;position: relative;}
#wechat img{
    width:105px;
    height:auto;
    margin-top:2px;
}
.social_border{
    height: 40px;
    line-height: 40px;
    color: #dce0dd;
}
#weibo
{ 
   height:40px;
   padding:7px 17px 0 0;
   }

#online-service-open
{
   height:40px;
   padding:7px 9px 0 0;position: relative;}
#online-service-open img{
    width:105px;
    margin-top:2px;
}
 #social_online
 {
   height:40px;
   padding:7px 12px 0 0;
     }
#weibo a {display:block;height:40px;width:25px;}
#wechat span{
    padding:0;
}
#wechat span,#online-service-open span{
    position: absolute;
    /*width: 118px;*/
    /*height:130px;*/
    left: 0px;
    top: 40px;
    z-index: 100000;
    border: solid 1px #e7e6e7;
    text-align: center;
    background-color: #fff;
    padding:5px 10px 10px 10px;
    font-size: 12px;
}
#wechat i{
    background: url(//source.vipabc.com/ext/images/website/abc/homePage/v2/home/icon_wechat.png) no-repeat 14% center;
}
#weibo i{
    background: url(//source.vipabc.com/ext/images/website/abc/homePage/v2/home/icon_weibo.png) no-repeat 14% center;
   }
#social_online i{
    background: url(//source.vipabc.com/ext/images/website/abc/homePage/v2/home/icon_online.png) no-repeat 14% center;
   }
#online-service-open i{
    background: url(//source.vipabc.com/ext/images/website/abc/homePage/v2/home/icon_download.png) no-repeat 14% center;
   }
#wechat i,#weibo i, #social_online i, #online-service-open i{
    display: block;
    width:25px;
    height:25px;
    background-color: #999999;
}
#wechat:hover i,#weibo:hover  i, #social_online:hover i, #online-service-open:hover  i{
    background-color: #f74c4c;
}
.navbar
{
    height:65px;}
.navbar-brand
{height:65px;
    }
.navbar-nav>li>a{line-height:35px;}

.owl-prev:hover,owl-next:hover{background:#eee}
@media screen and (max-width:2000px){
    .ipad-hand{right: 0;}
}
@media screen and (max-width:1600px){
    .vp-formBanner .carousel-indicators{
        z-index:1010;
    }
    .ipad-hand{right: 0;}
}
@media screen and (max-width:1300px){
    .vp-formBanner .banner-community .carousel-caption{
        width:35%;
    }
}
@media screen and (max-width:1100px){
    .banner-community .carousel-caption h4 {
        font-size: 20px;
        line-height: 30px;
    }
    .section-map,
    .vp-courseStructure .container,
    .vp-courseStructure #ipadScroll{
        overflow:hidden;
    }
    .team-img{
        width:550px;
        height:440px;
        background-size: contain;
    }
    .vpOrganize-container img{
        width:100%;
    }
    .vp-tutor .container,
    .vp-teacherSpeciality{
        overflow:hidden;
    }
}
@media screen and (max-width: 990px){
  .study-report .vp-headTxt{
    overflow: hidden;
  }
  .vp-formBanner .banner-community .carousel-caption{
        width:500px;
    }
.vp-formBanner .banner-community .carousel-caption h4 {
    font-size: 22px;
    line-height: 36px;
 }
 .vp-hotNews.container{
    width:100%;
    padding-left:20px;
    padding-right:20px;
 }
 .vp-certicate img{
    width:80%;
 }
 .dashboard-text{
    background-color:transparent;
 }
 .team-img{
    width:50%;
    height:310px;
    right:25%;
 }
 .team-bg .prel{
    width:100%;
 }
 .teachers-float h3.small{
    font-size:24px;
 }
}
@media screen and (max-width: 860px){
 .header{overflow: hidden;height:40px; }
 .container.width73per{
    position: relative;
 }
 .navbar-toggle{
    border:none;
    margin-top:17px;
}
.navbar .vp-navbarLogin{
    display: block;
}
.container .navbar-collapse{
    width:130px;
    background-color: rgba(255, 255, 255, 0.95);
     margin:0;
     margin-right:-1%;
     padding:0;
     float:right;
     position: absolute;
    top: 65px;
    right: 0;
    border-top:none;
    border-left: 1px solid #dddddd;
    border-bottom:1px solid #dddddd;;

}
.navbar-collapse ul li{
    padding-left: 3px;
    border-bottom:1px solid #f5f5f5;
}
.navbar-nav{
    margin:0;
}
.navbar-right{
    display: none;
}
.navbar-default .navbar-nav>li>a,#main-menu.navbar-default .navbar-nav > li > a,#main-menu.navbar-default.on .navbar-nav > li > a{
    font-size:16px;
    padding: 10px 15px;
}
#main-menu.navbar-default.on .navbar-nav > li > a{
    color:#777777;
}
#main-menu.navbar-default.on .navbar-nav > li > a:hover{
    color:#333333;
}
.navbar .vp-navbarLogin{
    font-size:16px;
}
.navbar-toggle .icon-bar{
    width:30px;
    color:#aaaaaa;
}
.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 5px;
}
.modal-dialog {
    margin: 30px auto;
}
.navbar-nav>li.vp-loginOut{
    display: block;
}
.vp-memberCenter{
    display: block;
}


}


     

.vp-clear{
    zoom:1;
}
.vp-clear:after{
    content: "";
    display: block;
    clear:both;
}

/*.footer-list>li{
    padding:0 42px;
}*/
.vp-footer{
    position: relative;
}
.vp-footer .container{
    padding:0;
    margin-bottom:0;
}
.vp-container{
    display: none;
    background-color: #505050;
    padding:58px 0 0 0;
    text-align: center;
}
.vp-container h5{
    font-size:16px;
    color:#ffffff;
    cursor: pointer;
}
.vp-container .footer-list{
    width:984px;
    margin:auto;
    padding-bottom: 30px;
    border-bottom: 1px solid #616161;
}
.vp-container .footer-list>li{
    width:25%;
    /*margin-left:50px;*/
    text-align: left;
    margin-right:0;
    padding-right:5%;
}
.vp-container .footer-list>li:first-child{
    margin-left:0;
}
.vp-container .footer-list li>ul>li{
    color:#878787;
    line-height: 142%;
    height: 27px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


.vp-li-qr div{
    width:115px;
    float: right;
}
.vp-li-qr p{
    color:#9b9b9b;
    font-size:12px;
    text-align: center;
    letter-spacing: 0;
    line-height: 17px;
    margin-top:10px;
}
.vp-li-qr img{
    width: 120px;
    height: 120px;
    border: 2px solid #fff;
}
.footer-list>li:first-child + li{
    padding-left:0;
}
.vp-webMap{
    border-bottom:1px solid #616161;
    padding-bottom:22px;
}
.footer .container..footer .vp-container{
    padding:50px 0 30px 0;
}
.footer-hover{
    position: absolute;
    top: 0;
    left: 50%;
    width:30px;
    height:45px;
    margin-left:-15px;
    padding:15px 0 15px 0;
    cursor: pointer;
}
.footer-hover  .ft_iconShow_hide{
    width: 18px;
    height: 10px;
    background: url("//source.vipabc.com/ext/images/website/share/iconUp_down20160601.png") no-repeat;
    background-position: -10px -10px;

}
.footer-hover.active  .ft_iconShow_hide{
    background-position: -10px -30px;
}

.bg-gray-dark{
    position: relative;
    padding:50px 0 30px 0;
}

.footer-list>li.vp-li-qr{
        padding-right:0;
}
.footer-brandGroup{
    padding:15px 0;
}
.footer-brandGroup ._left{
    float: left;
    padding-right: 23px;
    border-right:1px solid #858585;
}
.footer-brandGroup ._left img{
    width:101px;
}
.footer-blogroll {  padding-top: 15px;  margin-left:0px;background-color: #dcdcdc;}
.footer-blogroll .container{
        padding-bottom: 10px;
        border-bottom: 1px solid #d4d4d4;
}
.footer-brandGroup ._right{
    float: left;
    padding-left: 27px;
}
.footer-brandGroup ._right li{
    float: left;
    margin-right: 30px;
}
.footer-brandGroup ._right li._last{
    margin-right: 0;
}


@media screen and (max-width:990px){
    .vp-container .footer-list{
        width:95%;
    }
    .vp-container .footer-list>li{
        width:24%;
        margin-left:0;
        padding-left: 0;
    }
    .footer .container{
        width:95%;
    }
    .footer-list>li{
        padding:0 3%;
    }
    .QR_IOS {margin-right: 40px;}
    .owl-carousel .owl-wrapper-outer{
        height:300px;
    }
    #owl-home .item{
        height:300px;
        background-size: cover !important;
    }
    #owl-home .item div{
        height:300px !important;
        background-size: cover !important;
    }
    /*courseStructure*/
        .vp-courseStructure.vp-formBanner .form-wrap{
            right:20%;
        }
}

@media screen and (max-width:870px){
    .footer-list>li{
        padding:0 2%;
    }
    .QR_IOS {margin-right: 20px;}
}
@media screen and (max-width:1250px){
    .navbar-nav{
        margin-left:0;
    }
}
@media screen and (max-width: 600px){
    .vp-advWrap .col-md-3{
        width:50%;
    }
}
.vp-aboutVideo-wrap{
    width:1000px !important;
}
.vp-aboutVideo{
    height:600px !important;
}
.vp-aboutVideo-wrap .video-close-btn{
    left: 23px;
    top: 0;
}
@media screen and (max-width:1200px){
    .vp-img-about-video.img-about-video{
        background-position: 80% center;
    }
    .vp-aboutVideo-wrap{
        width:600px !important;
    }
    .vp-aboutVideo{
        height:450px !important;
    }
}

/*icon*/
.vp-event{
    height:auto;
    position: fixed;
    bottom: 20px;
    right: 15px;
    z-index:9999;
    padding-top:20px;
}
.vp-event .pc-show{
    width:200px;
}
.vp-event a{
    display: block;
    width:100%;
    height:100%;
}
.vp-eventClose{
    background: url("//source.vipabc.com/Ext/images/website/abc/homePage/v3/close.png") no-repeat;
    cursor: pointer;
    height: 16px;
    width: 16px;
    position: absolute;
    top:0;
    right:0;
}
.vp-event img{
    width: 100%;
}
.vp-event .vp-link{
    display: block;
    width:60px;
    height:25px;
    position: absolute;
    bottom:0;
    right:70px;
    background:#fff;
    opacity:0;
    filter:alpha(opacity=0);
}
.vp-event .pad-show{
    display: none;
    width:100px;
}

@media screen and (max-width: 1024px){
    .vp-event .pc-show{
        display: none;
    }
    .vp-event .pad-show{
        display: block;
    }
    .vp-event{
      right:0;
    }
    .vp-event i{
      width:20px;
      height:20px;
      border-radius: 50%;
      background:url("//source.vipabc.com/ext/images/website/abc/homePage/v2/seo/icon_close.png") no-repeat center;
      background-size: 15px 15px;
      background-color:rgba(0,0,0,.5);
      top:2px;
      right:2px;
    }
}

.vp-event.ispad .pc-show{
    display: none;
}
.vp-event.ispad .pad-show{
    display: block;
}
.vp-event.ispad{
    right:0;
}
.vp-event.ispad i{
  width:20px;
  height:20px;
  border-radius: 50%;
  background:url("//source.vipabc.com/ext/images/website/abc/homePage/v2/seo/icon_close.png") no-repeat center;
  background-size: 15px 15px;
  background-color:rgba(0,0,0,.5);
  top:2px;
  right:2px;
}
.red-font{
    color: #e50012;
}

.width100per {
    width: 100%;
}
.buttom-video-container {
    margin-top: 24px;
}

.buttom-video {
    width: 100%;
    height: 480px;
    position: relative;
    overflow: hidden;
}
.buttom-video img {
    width: initial;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    margin: auto;
    display: block;
}
.buttom-video-form {
    margin-left: 3%;
}