@charset "utf-8";
/* CSS Document */
* { margin: 0; padding: 0; }
html { font-size: 100% }
body, button, input, select, textarea { font: 14px/1.5 Microsoft Yahei, tahoma, Srial, helvetica, sans-serif; outline: none; }
ul, ol, li { list-style: none; margin: 0; padding: 0 }
a { text-decoration: none; color: #FFF; font-family: "微软雅黑" ; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; transition-duration: 0.5s;}
img { border: 0px; }
.clear { clear: both; }
p, div, strong, a, h1, h2, h3, h4, h5, h6 { font-family: "微软雅黑" }
html, body { overflow-x: hidden; }
.animate { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; transition-duration: 0.5s; }
.animate1 { -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; transition-duration: 1s; }
table { border-spacing: 0px; border-collapse: collapse; }
tr { cursor: pointer; }
input { border: 0; }
textarea{resize: none;}




.container1100{ width: 1100px; margin: auto; position: relative; height: auto;}
header{ width: 100%; height: 180px; background-color: #fbfbf4; position: relative; border-top: 15px solid #243487; z-index: 1000; position: fixed; top: 0; left: 0; z-index: 10000;}
header .logo{ width: 468px; height: 120px; font-size: 0px; display: inline-block; position: absolute; left: 0px; top: 0px;}
header .logo2{ max-width: 197px; height:83px; font-size: 0px; display: inline-block; position: absolute; left: 8%; top: 13px; display: none;}
header .container1100{ height: 100%;}
header .yun1{position: absolute; background: url(/skin/huiben/img/yun1.jpg); max-width: 40px;width: 40px; max-height: 32px;height: 32px; right: 305px; top: 5px;}
header .yun2{position: absolute; background: url(/skin/huiben/img/yun2.jpg); max-width: 100px;width: 100px; max-height: 60px;height: 60px; right: -43px; top: 0px;}
header .wx{ max-width: 44px;width: 44px; max-height: 44px;height: 44px; background: url(/skin/huiben/img/hotLine.png); position: absolute; right: 239px; top: 38px;}
header .phone{ max-width: 222px;width: 222px; max-height: 44px;height: 44px; background: url(/skin/huiben/img/hotLine.png) right no-repeat; position: absolute; right: 0px; top: 38px;}
header .bg{ width: 100%; height: 52px; position: absolute; bottom: 5px; background-color: #FFFFFF; border-top: 1px solid #f6f7f2;}
header .bg2{ width: 100%; height: 2px; background-color: #FFFFFF; bottom: 59px; position: absolute;}
header nav{ width: 100%; height: 58px; position: absolute; bottom: 0px; z-index: 10;}
header nav ul{ width: 100%; height: 58px;}
header nav ul>li{ max-width: 157px;width: 157px; max-height: 58px;height: 58px; float: left; bottom: 0px; box-sizing: border-box; -webkit-box-sizing: border-box; border-right: 1px solid #f2f3ed; position: relative; cursor: pointer;}
header nav ul>li:first-child{border-left: 1px solid #f2f3ed;}
header nav ul>li.cur2 a{ background-position: -157px 0;}
header nav ul>li.cur3 a{ background-position: -314px 0;}
header nav ul>li.cur4 a{ background-position: -471px 0;}
header nav ul>li.cur5 a{ background-position: -628px 0;}
header nav ul>li.cur6 a{ background-position: -785px 0;}
header nav ul>li.cur7 a{ background-position: -942px 0;}
header nav ul>li>a{ display:block; width: 100%; height: 100%;background: url(/skin/huiben/img/navText.png) no-repeat; position: relative; z-index: 10;}
header nav ul>li:after{ height: 0; content: ""; width: 100%; background: url(/skin/huiben/img/navBg.png); position: absolute; bottom: 0; left: 0; transition-duration: .5s; -webkit-transition-duration: .5s;} 
header nav ul>li:hover:after{ height: 100%;}
header nav ul>li.cur:after{ height: 100%;}
header nav ul>li>ol{position:relative; top: 0; left: 0; background-color: #fff;background-image: url(/skin/huiben/img/navBg.png); display: none;}
header nav ul>li>ol>li{ width: 157px; height: 58px;text-align: center; line-height: 58px;transition:all .5s;-webkit-transition:all .5s;}
header nav ul>li>ol>li a{display: block; height: 100%; width: 100%;color: #3e3e3e;}
header nav ul>.cur2>ol>li:hover{ background:#69BDE9;}
header nav ul>.cur2>ol>li{ border-top: 1px solid #69BDE9;}
header nav ul>.cur3>ol>li:hover{ background:#EB4605;}
header nav ul>.cur3>ol>li{ border-top: 1px solid #EB4605;}
header nav ul>.cur4>ol>li:hover{ background:#009B00;}
header nav ul>.cur4>ol>li{ border-top: 1px solid #009B00;}
header nav ul>.cur6>ol>li:hover{ background:#0240E8;}
header nav ul>.cur6>ol>li{ border-top: 1px solid #0240E8;}
header nav ul>li>ol>li:hover a{ color: #fff;}
header nav ul>li:hover ol{display:block;}

header .nav{ width: 131px; height: 40px; position: absolute; right: 2%; top: 11px; z-index: 100; display: none;}
header .nav li{position: relative;  width: 40px; height: 40px; background: url(/skin/huiben/img/navIcons.png) no-repeat; background-size: auto 100%; float: left; margin-right: 5px; perspective: 900; -webkit-perspective: 900;}
header .nav li:first-child{ background: url(/skin/huiben/img/qqIcon.png) no-repeat; background-size: 100%;}
header .nav li a{ display: block; width: 100%; height: 100%; }
header .nav li:last-child{margin-right: 0 ; background-position: -91px 0; width: 41px;transition-duration: .5s; -webkit-transition-duration: .5s;}
header .nav li:last-child:after{ content: ""; position: absolute; top: 0; left: 0; display: block; width: 40px; height: 40px; background: url(/skin/huiben/img/closeNav.png); background-size: 100%; transition-duration: .5s; -webkit-transition-duration: .5s;  opacity: 0;}
header .nav li:last-child.cur{ transform: rotateY(180deg); -webkit-transform: rotateY(180deg);}
header .nav li:last-child.cur:after{  opacity: 1;}
header .nav li:nth-child(2){background-position: -46px 0; }
header .navList{ width: 80%; position: fixed; right: 0; top: 65px; background: url(/skin/huiben/img/navBg.png); height: 100%; z-index: 1000; background-color: #FFFFFF; max-width: 600px; perspective: 900; -webkit-perspective: 900; transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transition-duration: .5s; -webkit-transition-duration: .5s; opacity: 0;}
header .navList.cur{ transform: rotateY(0deg); -webkit-transform: rotateY(0deg);  opacity: 1;}
header .navList li{ width: 100%; height: 14%; box-sizing: border-box; -webkit-box-sizing: border-box; border-bottom: 4px solid #ffb533; position: relative;  }
header .navList li:first-child{ height: 15%; border-color:#ffb533;}
header .navList li:nth-child(2){ border-color: #51aede;}
header .navList li:nth-child(3){ border-color: #ff7975;}
header .navList li:nth-child(4){ border-color: #5fdc5f;}
header .navList li:nth-child(5){ border-color: #e701d0;}
header .navList li:nth-child(6){ border-color: #0b47e7; }
header .navList li:last-child{ height: 15%; border-color:#fbb928 ; }
.bh{ overflow: hidden;}
header .navList li a{ display: block; width: 100%; height: 100%; }
header.cur{ height: 59px;}
header .navList li .text{ width:163px; height: 40px; font-size: 0px; position: absolute; left: 20%;position: absolute; top: 50%; margin-top: -20px;}
header.cur .wx,header.cur .phone,header.cur .logo,header.cur .yun1,header.cur .yun2{ display: none;}
.pgy{ background: url(/skin/huiben/img/pgy.png); width: 205px; height: 191px; position: absolute; }
#banner{ width: 100%; height: auto; font-size: 0px; position: relative; min-height: 120px;}
footer{ width: 100%; height: 296px; background-color: #00357e; margin-top: -10px; overflow: hidden; position: relative; z-index: 1; text-transform: uppercase;}
footer .container1100{ background: url(/skin/huiben/img/footerBg.jpg) center no-repeat; height: 100%;}
footer .wx{ width: 100px; height: 100px; font-size: 0px; position: absolute; bottom: 16px; right: 92px;}
footer .links{ width: 100%; text-align: center; width: 684px;position: absolute; bottom: 75px; left: 50%; margin-left: -342px;}
footer .links li{ display: inline-block; margin-right: 38px; }
footer .links li:last-child{margin-right: 0px; }
footer .links li a{ display: block; opacity: .5; width: 100%; height: 100%;font-size: 12px; color: #FFFFFF;}
footer .links li a:hover{ opacity: 1;}
footer #copy{ font-size: 12px; color: #ffffff; text-align: center; position: absolute; bottom: 10px; width: 100%; line-height: 20px; opacity: .3;}
footer #copy a:hover{ text-decoration: underline;}
footer .hide{display: none; font-size: 12px; color: #ffffff; text-align: center; ; width: 100%; line-height: 20px; opacity: .3;}
.mf{ background: url(/skin/huiben/img/mf.png) no-repeat; width: 94px; height: 168px; position: fixed; right: 5%; top: 70%; margin-top: -84px; z-index: 1000; display: block; background-size: 100%;}
.bigBg{ width: 100%; height: 100%; position: fixed; z-index: 999; top: 65px; left: 0; display: none;}
#service { width: 100%; height:auto; position: relative;}

#service .iconList{ width: 76px; height: auto; overflow:hidden; position: fixed; top: 22%; perspective: 1000; -webkit-perspective: 1000; margin-right: 11px; right: 5%;z-index: 1000;}
#service .iconList li{ width: 71px; height: 71px; border: 2px solid #ffb83b; border-radius: 50%; text-align: center; position: relative; margin-bottom: 20px; cursor: pointer; transition-duration: .5s; -webkit-transition-duration: .5s;perspective: 1000; -webkit-perspective: 1000;}
#service .iconList li:hover{ transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg);}
#service .iconList li:hover .icons{ opacity: 0;}
#service .iconList li:hover .text{ opacity: 1;}
#service .iconList li.cur{ transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg);}
#service .iconList li.cur .icons{ opacity: 0;}
#service .iconList li.cur .text{ opacity: 1;}
#service .iconList li .icons{ width: 100%;  height: 100%; position: absolute; top: 0px; left: 0px; background: url(/skin/huiben/img/keIcon.png) no-repeat; transition-duration: .5s; -webkit-transition-duration: .5s;}
#service .iconList li .text{ width: 100%; height: 100%; box-sizing: border-box; -webkit-box-sizing: border-box;  font-size: 14px; color: #ffb533; position: absolute; top: 0; left: 0; z-index: 10; padding-top: 20%; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transition-duration: .5s; -webkit-transition-duration: .5s; opacity: 0;}
#service .iconList li:nth-child(1) .icons{ background-position: center 2px;}
#service .iconList li:nth-child(2) .icons{ background-position: center -80px;}
#service .iconList li:nth-child(3) .icons{ background-position: center -160px;}
#service .iconList li:nth-child(4) .icons{ background-position: center -240px;}


#Story .iconList{ width: 76px; height: auto; overflow:hidden; position: fixed; top: 22%; perspective: 1000; -webkit-perspective: 1000; margin-right: 11px; right: 5%;z-index: 1000;}
#Story .iconList li{ width: 71px; height: 71px; border: 2px solid #ffb83b; border-radius: 50%; text-align: center; position: relative; margin-bottom: 20px; cursor: pointer; transition-duration: .5s; -webkit-transition-duration: .5s;perspective: 1000; -webkit-perspective: 1000;}
#Story .iconList li:hover{ transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg);}
#Story .iconList li:hover .icons{ opacity: 0;}
#Story .iconList li:hover .text{ opacity: 1;}
#Story .iconList li.cur{ transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg);}
#Story .iconList li.cur .icons{ opacity: 0;}
#Story .iconList li.cur .text{ opacity: 1;}
#Story .iconList li .icons{ width: 100%;  height: 100%; position: absolute; top: 0px; left: 0px; background: url(/skin/huiben/img/storyIcons.png) no-repeat; transition-duration: .5s; -webkit-transition-duration: .5s;}
#Story .iconList li .text{ width: 100%; height: 100%; box-sizing: border-box; -webkit-box-sizing: border-box;  font-size: 14px; color: #ffb533; position: absolute; top: 0; left: 0; z-index: 10; padding-top: 20%; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transition-duration: .5s; -webkit-transition-duration: .5s; opacity: 0;}
#Story .iconList li:nth-child(1) .icons{ background-position: center 2px;}
#Story .iconList li:nth-child(2) .icons{ background-position: center -80px;}
#Story .iconList li:nth-child(3) .icons{ background-position: center -160px;}
#Story .iconList li:nth-child(4) .icons{ background-position: center -240px;}



#service #banner {z-index: 30;}
#service #banner .pgy{left: 15%; bottom: -150px; z-index: 100; }
#service .courses{ width: 100%; height: auto; padding-bottom: 3%; margin-top: -8px; background-color: #f5f0e2; position: relative; z-index:12;}
#service .courses .title{ width: 301px; height: 55px; padding-top: 70px; margin: auto;}
#service .courses .text{ width: 100%; height: auto; text-align: center; margin-top: 55px;   color: #333333; line-height: 26px;}
#service .courses .coursesList{ width: 100%; overflow: hidden; margin-top: 55px;} 
#service .courses .coursesList li{ font-size: 0px; float: left; width: 30%; margin-right: 5%; border-radius: 10px; overflow: hidden; }
#service .courses .coursesList li:last-child{ margin-right: 0px;}
#service .courses .bg{ width: 100%; height: 19px; background: url(/skin/huiben/img/coureseBg.png); position: absolute; bottom: -9px;left: 0; }
#service .hosting{ width: 100%; height: auto; padding-bottom: 140px; position: relative; background-image: url(/skin/huiben/img/hostingBg.png); background-repeat: no-repeat; background-position: bottom; z-index: 11;}
#service .hosting .container1100>.title{ width: 233px; font-size: 0px; height: 55px; padding-top: 81px; margin: auto;}
#service .hosting .hostingList{ width: 90%; height: 278px; margin: 65px auto 0;}
#service .hosting .hostingList li{ width: 30%; margin-right: 5%; float: left; text-align: center; background: #FFFFFF;border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; height: auto; padding-bottom: 40px; position: relative; cursor: pointer;}
#service .hosting .hostingList li:last-child{ margin-right: 0;}
#service .hosting .hostingList .imgBox{ width: 100%; font-size: 0px; height: 101px; overflow: hidden; border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0;}
#service .hosting .hostingList .tit{ width: 100%; text-align: center; margin: 15px 0;}
#service .hosting .hostingList .text{ width: 80%; margin: auto; font-size: 12px; color: #888888; opacity: .8; text-align: justify; height: 100px; overflow: hidden; transition-duration: .5s; -webkit-transition-duration: .5s;}
#service .hosting .hostingList  .more{ width: 90px; height: 24px; border-radius: 20px; color: #FFFFFF; font-size: 12px; background-color: #ee5c1b; overflow: hi; line-height: 24px; position: absolute; bottom: -12px; left: 50%; margin-left: -45px;transition-duration: .5s; -webkit-transition-duration: .5s;}
#service .hosting .hostingList li:hover .text{ transform: translateY(-5px); -webkit-transform: translateY(-5px); opacity: 1; color: #000;}
#service .hosting .hostingList li:hover .more{transform: translateY(-24px); -webkit-transform: translateY(-24px); }
#service .hosting .pgy{ right: -170px; top: 27px;}
#service .space{ width: 100%; height: 640px; background: url(/skin/huiben/img/spaceBg_01.jpg) bottom no-repeat; margin-top: -10px; position: relative; z-index: 10;}
#service .bgg{ width: 100%; height: 8px; background: url(/skin/huiben/img/spaceBg_02.png) no-repeat center; position: relative; z-index: 10;}
#service .space .title{ width: 100%; text-align: center; height: auto; padding-top: 80px;}
.spaceList{ width: 100%; height:320px; margin-top: 90px; }
.spaceList li{ width: 20%; height: 316px; float: left; position: relative;}
.spaceList a{ display: block; width: 100%; height: 100%; color: #000000;text-align: center;}
.spaceList .bgBox{ width: 126px; height: 126px; overflow: hidden; position: relative; margin: auto; z-index: 10;perspective: 900; transition-duration: 1s; -webkit-transition-duration: 1s;border-radius: 50%;}
.spaceList .bgBox .bg{ position: absolute; background-image: url(/skin/huiben/img/spaceIcons.png); background-repeat: no-repeat;}
.spaceList .bgBox .bg1{ width: 100%; height: 100%; top: 0; left: 0;transition-duration: 1s; -webkit-transition-duration: 1s;border-radius: 50%; opacity: 0; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); z-index: 10;}
.spaceList .bgBox .bg2{ width: 108px; height: 108px; top: 50%; margin-top: -54px; left: 50%; margin-left: -54px;border-radius: 50%; background-position: 0px center;}
.spaceList .more{ width: 107px; height: 22px; border-radius: 20px; background-color: #44a2da; position: absolute; bottom: 17px; left: 50%; margin-left: -53px; font-size: 12px; color: #ffffff; text-transform: uppercase; line-height: 22px;}
.spaceList .bgBox1 .bg{ background-color: #44a2da;}
.spaceList .bgBox1 .bg1{background-position: 45px center; }
.spaceList .bgBox1 .bg2{ background-position: 35px center;}
.spaceList .more4{ background-color: #44a2da;}
.spaceList .bgBox2 .bg{ background-color: #3ac686;}
.spaceList .bgBox2 .bg1{background-position: -59px center; }
.spaceList .bgBox2 .bg2{ background-position: -69px center;}
.spaceList .more2{ background-color: #3ac686;}
.spaceList .bgBox3 .bg{ background-color: #f89741;}
.spaceList .bgBox3 .bg1{background-position: -168px center; }
.spaceList .bgBox3 .bg2{ background-position: -178px center;}
.spaceList .more3{ background-color: #f89741;}
.spaceList .bgBox4 .bg{ background-color: #da51b8;}
.spaceList .bgBox4 .bg1{background-position: -278px center; }
.spaceList .bgBox4 .bg2{ background-position: -288px center;}
.spaceList .more4{ background-color: #da51b8;}
.spaceList .bgBox5 .bg{ background-color: #bb9a61;}
.spaceList .bgBox5 .bg1{background-position: -390px center; }
.spaceList .bgBox5 .bg2{ background-position: -400px center;}
.spaceList .more5{ background-color: #bb9a61;}
.spaceList .tit1{ font-size: 17px; color: #000000; margin-top: 10px;transition-duration: 1s; -webkit-transition-duration: 1s;}
.spaceList .hide{ width: 100%; height: 175px; position: absolute; padding-top: 77px;  top: 64px; box-shadow: 0px 3px 5px #888888; background: #FFFFFF; perspective: 900; transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg);transition-duration: 1s; -webkit-transition-duration: 1s; opacity: 0;}
.spaceList .tit2{ font-size: 17px; line-height: 24px; color: #303030;}
.spaceList .enTIt{ font-size: 12px; line-height: 24px; color: #000000; opacity: .8; text-transform: uppercase;}
.spaceList .border{ width: 27px; height: 2px; background-color: #757575; margin:0 auto 10px;}
.spaceList .text{ font-size: 12px; line-height: 18px; color: #000000; opacity: .7; width: 96%; margin: auto;}
.spaceList a:hover .bgBox{ transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg);}
.spaceList a:hover .bg1{ opacity: 1;}
.spaceList a:hover .hide{ opacity: 1; transform: rotateY(0deg); -webkit-transform: rotateY(0deg);}
.spaceList a:hover .tit1{ opacity: 0;}
#service .space .pgy{ right: 65px; top: 0;}
#service .service_title{ height: 398px; background: #f5f0e2;}
#service .service_title ul{ width: 1100px; margin: 0 auto; height: 100%; }
#service .service_title ul li{ float: left; height: 202px; width: 202px;  border-radius:50%; margin-left: 97px; margin-top: 49px; position: relative;}
#service .service_title ul li a{cursor: pointer;}
#service .service_title ul li .Bigpic{position: relative;height: 202px;width: 202px;z-index: 15;}

#service .service_title ul li .pic{overflow: hidden; height: 202px; width: 202px; border-radius: 50%;}
#service .service_title ul li.fast{ margin-left: 0;}
#service .service_title ul li .HulaHoop1{ height: 220px; width: 220px; border: 1px solid #dbd5c6; position: absolute; left: 50%; top: 50%;margin: -120px 0 0 -120px;border-radius: 50%;animation:HulaHoop1 1s infinite cubic-bezier(.46,.03,.52,.96);-webkit-animation:HulaHoop1 1s infinite cubic-bezier(.46,.03,.52,.96);transform-origin: 45% 45%;-webkit-transform-origin: 45% 45%;transition:all .5s;-webkit-transition:all .5s; opacity:0;filter:alpha(opacity=0);z-index: -1;}
#service .service_title ul li .HulaHoop2{ height: 220px; width: 220px; border: 1px solid #dbd5c6; position: absolute; left: 50%; top: 50%;margin: -100px 0 0 -100px;border-radius: 50%;animation:HulaHoop1 1s infinite cubic-bezier(.46,.03,.52,.96);-webkit-animation:HulaHoop1 1s infinite cubic-bezier(.46,.03,.52,.96);transform-origin: 55% 55%;-webkit-transform-origin: 55% 55%;transition:all .5s;-webkit-transition:all .5s; opacity:0;filter:alpha(opacity=0);z-index: -1;}
@keyframes HulaHoop1{
    0%{transform:rotate(0);}
	100%{transform:rotate(360deg);}
}
@-webkit-keyframes HulaHoop1{
    0%{-webkit-transform:rotate(0);}
	100%{-webkit-transform:rotate(360deg);}
}
#service .service_title ul li .names{text-align: center; font-size: 20px; width: 180px; height: 33px; border-radius: 15px; margin: 0 auto; position: relative; margin-top: 25px; line-height: 33px;;}
#service .service_title ul li .names span{font-size: 12px; display: block;text-align: center;text-transform: uppercase;}
#service .service_title ul li .name1{ color: #dfa01a;}
#service .service_title ul li .name1 { color: #dfa01a;}
#service .service_title ul li .name2 { color: #e51a8a;}
#service .service_title ul li .name3 { color: #00a0e9;}
#service .service_title ul li .name4 { color: #7fab00;}
#service .service_title ul li .name1 span{ color: #dfa01a;}
#service .service_title ul li .name2 span{ color: #e51a8a;}
#service .service_title ul li .name3 span{ color: #00a0e9;}
#service .service_title ul li .name4 span{ color: #7fab00;}

#service .service_title ul li.addclass .name1{color: #fff;
background: -ms-linear-gradient(left, #ffcb38,  #ffa227);    /*IE 10*/ 
background:-moz-linear-gradient(left,#ffcb38,#ffa227); /*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ffcb38), top(#ffa227)); /*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffcb38), top(#ffa227));/*Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(left, #ffcb38, #ffa227);/*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(left, #ffcb38, #ffa227);/*Opera 11.10+*/}
#service .service_title ul li.addclass .name2{color: #fff;
background: -ms-linear-gradient(left, #d91ae5,  #e51a8a);    /*IE 10*/ 
background:-moz-linear-gradient(left,#d91ae5,#e51a8a); /*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#d91ae5), top(#e51a8a)); /*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d91ae5), top(#e51a8a));/*Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(left, #d91ae5, #e51a8a);/*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(left, #fa89c7, #e51a8a);/*Opera 11.10+*/}
#service .service_title ul li.addclass .name3{color: #fff;
background: -ms-linear-gradient(left, #00e9e1,  #00a0e9);    /*IE 10*/ 
background:-moz-linear-gradient(left,#00e9e1,#00a0e9); /*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#00e9e1), top(#00a0e9)); /*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00e9e1), top(#00a0e9));/*Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(left, #00e9e1, #00a0e9);/*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(left, #00e9e1, #00a0e9);/*Opera 11.10+*/}
#service .service_title ul li.addclass .name4{color: #fff;
background: -ms-linear-gradient(left, #c0f132,  #7fab00);    /*IE 10*/ 
background:-moz-linear-gradient(left,#c0f132,#7fab00); /*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#c0f132), top(#7fab00)); /*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c0f132), top(#7fab00));/*Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(left, #c0f132, #7fab00);/*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(left, #c0f132, #7fab00);/*Opera 11.10+*/}

#service .service_title ul li .name1:hover{color: #fff;
background: -ms-linear-gradient(left, #ffcb38,  #ffa227);    /*IE 10*/ 
background:-moz-linear-gradient(left,#ffcb38,#ffa227); /*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ffcb38), top(#ffa227)); /*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffcb38), top(#ffa227));/*Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(left, #ffcb38, #ffa227);/*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(left, #ffcb38, #ffa227);/*Opera 11.10+*/}
#service .service_title ul li .name2:hover{color: #fff;
background: -ms-linear-gradient(left, #d91ae5,  #e51a8a);    /*IE 10*/ 
background:-moz-linear-gradient(left,#d91ae5,#e51a8a); /*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#d91ae5), top(#e51a8a)); /*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d91ae5), top(#e51a8a));/*Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(left, #d91ae5, #e51a8a);/*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(left, #fa89c7, #e51a8a);/*Opera 11.10+*/}
#service .service_title ul li .name3:hover{color: #fff;
background: -ms-linear-gradient(left, #00e9e1,  #00a0e9);    /*IE 10*/ 
background:-moz-linear-gradient(left,#00e9e1,#00a0e9); /*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#00e9e1), top(#00a0e9)); /*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00e9e1), top(#00a0e9));/*Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(left, #00e9e1, #00a0e9);/*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(left, #00e9e1, #00a0e9);/*Opera 11.10+*/}
#service .service_title ul li .name4:hover{color: #fff;
background: -ms-linear-gradient(left, #c0f132,  #7fab00);    /*IE 10*/ 
background:-moz-linear-gradient(left,#c0f132,#7fab00); /*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#c0f132), top(#7fab00)); /*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c0f132), top(#7fab00));/*Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(left, #c0f132, #7fab00);/*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(left, #c0f132, #7fab00);/*Opera 11.10+*/}
#service .service_title ul li .ckmore{height: 202px;width: 202px;position: absolute; top: 0; left: 0; border-radius: 50%;  border: 4px solid #ffa227;z-index: 15;left: 50%; top: 50%; margin: -105px 0 0 -105px;text-align: center;transition:all .5s;-webkit-transition:all .5s;opacity:0;filter:alpha(opacity=0)}
#service .service_title ul li .ckmore img{display: block; margin: 65px auto 0;}
#service .service_title ul li.servic1 .ckmore{ background:rgba(255, 162, 39, 0.4); border: 4px solid #ffa227;}
#service .service_title ul li.servic2 .ckmore{ background:rgba(229, 26, 138, 0.4); border: 4px solid #e51a8a;}
#service .service_title ul li.servic3 .ckmore{ background:rgba(0, 160, 233, 0.4); border: 4px solid #00a0e9;}
#service .service_title ul li.servic4 .ckmore{ background:rgba(127, 171, 0, 0.4); border: 4px solid #7fab00;}
#service .service_title ul li .Bigpic:hover .ckmore{opacity:1;filter:alpha(opacity=100)}
#service .service_title ul li .Bigpic:hover .HulaHoop1{opacity:1;filter:alpha(opacity=100)}
#service .service_title ul li .Bigpic:hover .HulaHoop2{opacity:1;filter:alpha(opacity=100)}
#service .pxkcInformation{ background: #ffeebf; padding: 100px 0; position: relative;}
#service .pxkcInformation .seviceInformation{ border-radius: 15px; overflow: hidden; border: 6px solid #9fe8f4; width: 978px; height: auto; margin: 0 auto; padding:55px; background: #fff8e6; overflow: hidden;}
#service .pxkcInformation .seviceInformation .pic{ width: 329px; height: 384px; float: left;border-radius: 28px;overflow: hidden;}
#service .pxkcInformation .seviceInformation .summary{ width: 580px; float: right; color: #4e2f10; line-height: 28px;}
#service .pxkcInformation .seviceInformation .summary img{display: block; margin-bottom: 15px;}
#service .pxkcInformation .title{text-align: center; margin-bottom: 60px;}
#service .pxkcInformation .seviceInformation .summary .moresINfor{ width: 150px; height: 40px; border-radius: 10px; overflow: hidden;text-align: center; line-height: 40px;color: #fff; background: #4e2f10; margin-top: 131px;}
#service .pxkcInformation .seviceInformation .summary .moresINfor a{display: block;height: 100%;}
#service .pxkcInformation:after{position: absolute; left: 0; bottom: 0; background: url(/skin/huiben/img/yuandian1.png); content: ''; height: 20px; width: 100%;z-index: 15;}
#service .pxkcInformation .seviceInformation .summary .moresINfor:hover{animation: 1s linear 0s normal none 1 running work-btn;-webkit-animation: 1s linear 0s normal none 1 running work-btn;transition: all 0.6s ease-out 0s;-webkit-transition: all 0.6s ease-out 0s;}
#service .pxkcInformation .girl{background: url(/skin/huiben/img/girl.png) no-repeat;width: 142px;height: 184px;position: absolute;right: 2%;bottom: 70px;z-index: 5;}
#service .pxkcInformation .cloud_R{background: url(/skin/huiben/img/cloud_r.png) no-repeat;width: 1141px;height: 319px;position: absolute;bottom: 0px;right: -10%;}

@keyframes work-btn {
 0% {transform: scale(1.2, .8);}
 1% {transform: scale(1.18, .82);}
 2% {transform: scale(1.16, .84);}
 3% {transform: scale(1.13, .87);}
 4% {transform: scale(1.1, .9);}
 5% {transform: scale(1.07, .93);}
 6% {transform: scale(1.04, .96);}
 7% {transform: scale(1.01, .99);}
 8% {transform: scale(.99, 1.01);}
 9% {transform: scale(.97, 1.03);}
 10% {transform: scale(.95, 1.05);}
 11% {transform: scale(.94, 1.06);}
 12% {transform: scale(.93, 1.07);}
 13% {transform: scale(.93, 1.07);}
 14% {transform: scale(.93, 1.07);}
 15% {transform: scale(.93, 1.07);}
 16% {transform: scale(.94, 1.06);}
 17% {transform: scale(.94, 1.06);}
 18% {transform: scale(.95, 1.05);}
 19% {transform: scale(.96, 1.04);}
 20% {transform: scale(.98, 1.02);}
 21% {transform: scale(.99, 1.01);}
 22% {transform: scale(1, 1);}
 23% {transform: scale(1, 1);}
 24% {transform: scale(1.01, .99);}
 25% {transform: scale(1.02, .98);}
 26% {transform: scale(1.02, .98);}
 27% {transform: scale(1.02, .98);}
 28% {transform: scale(1.03, .97);}
 29% {transform: scale(1.03, .97);}
 30% {transform: scale(1.02, .98);}
 31% {transform: scale(1.02, .98);}
 32% {transform: scale(1.02, .98);}
 33% {transform: scale(1.02, .98);}
 34% {transform: scale(1.01, .99)}
 35% {transform: scale(1.01, .99);}
 36% {transform: scale(1.01, .99);}
 37% {transform: scale(1, 1);}
 38% {transform: scale(1, 1);}
 39% {transform: scale(1, 1);}
 40% {transform: scale(.99, 1.01);}
 41% {transform: scale(.99, 1.01);}
 42% {transform: scale(.99, 1.01);}
 43% {transform: scale(.99, 1.01);}
 44% {transform: scale(.99, 1.01);}
 45% {transform: scale(.99, 1.01);}
 46% {transform: scale(.99, 1.01);}
 47% {transform: scale(.99, 1.01);}
 48% {transform: scale(.99, 1.01);}
 49% {transform: scale(1, 1);}
}
@-webkit-keyframes work-btn {
 0% {-webkit-transform: scale(1.2, .8);}
 1% {-webkit-transform: scale(1.18, .82);}
 2% {-webkit-transform: scale(1.16, .84);}
 3% {-webkit-transform: scale(1.13, .87);}
 4% {-webkit-transform: scale(1.1, .9);}
 5% {-webkit-transform: scale(1.07, .93);}
 6% {-webkit-transform: scale(1.04, .96);}
 7% {-webkit-transform: scale(1.01, .99);}
 8% {-webkit-transform: scale(.99, 1.01);}
 9% {-webkit-transform: scale(.97, 1.03);}
 10% {-webkit-transform: scale(.95, 1.05);}
 11% {-webkit-transform: scale(.94, 1.06);}
 12% {-webkit-transform: scale(.93, 1.07);}
 13% {-webkit-transform: scale(.93, 1.07);}
 14% {-webkit-transform: scale(.93, 1.07);}
 15% {-webkit-transform: scale(.93, 1.07);}
 16% {-webkit-transform: scale(.94, 1.06);}
 17% {-webkit-transform: scale(.94, 1.06);}
 18% {-webkit-transform: scale(.95, 1.05);}
 19% {-webkit-transform: scale(.96, 1.04);}

 20% {-webkit-transform: scale(.98, 1.02);}
 21% {-webkit-transform: scale(.99, 1.01);}
 22% {-webkit-transform: scale(1, 1);}
 23% {-webkit-transform: scale(1, 1);}
 24% {-webkit-transform: scale(1.01, .99);}
 25% {-webkit-transform: scale(1.02, .98);}
 26% {-webkit-transform: scale(1.02, .98);}
 27% {-webkit-transform: scale(1.02, .98);}
 28% {-webkit-transform: scale(1.03, .97);}
 29% {-webkit-transform: scale(1.03, .97);}
 30% {-webkit-transform: scale(1.02, .98);}
 31% {-webkit-transform: scale(1.02, .98);}
 32% {-webkit-transform: scale(1.02, .98);}
 33% {-webkit-transform: scale(1.02, .98);}
 34% {-webkit-transform: scale(1.01, .99)}
 35% {-webkit-transform: scale(1.01, .99);}
 36% {-webkit-transform: scale(1.01, .99);}
 37% {-webkit-transform: scale(1, 1);}
 38% {-webkit-transform: scale(1, 1);}
 39% {-webkit-transform: scale(1, 1);}
 40% {-webkit-transform: scale(.99, 1.01);}
 41% {-webkit-transform: scale(.99, 1.01);}
 42% {-webkit-transform: scale(.99, 1.01);}
 43% {-webkit-transform: scale(.99, 1.01);}
 44% {-webkit-transform: scale(.99, 1.01);}
 45% {-webkit-transform: scale(.99, 1.01);}
 46% {-webkit-transform: scale(.99, 1.01);}
 47% {-webkit-transform: scale(.99, 1.01);}
 48% {-webkit-transform: scale(.99, 1.01);}
 49% {-webkit-transform: scale(1, 1);}
}


#index{width: 100%; height: auto; position:relative ; padding-top: 195px;}
#index,#Story,#team,#service,#childCourse,#space,#contact{  padding-top: 195px;}
	
#index .banner{ width: 100%; height: auto; overflow: hidden; position: relative; min-height: 200px;}
#index .banner .bannerList{ width: 100%; height: auto; font-size: 0px; position: relative; overflow: hidden;}
#index .banner .bannerList li{  width: 0; float: left; height: auto; min-height: 200px; position: relative; overflow: hidden;}
#index .banner .bannerList li>img{ min-height: 200px;}
#index .banner .bannerList li:first-child{ width: 100%; height: auto;}
#index .banner .btnList{ width:375px; height: 42px; position: absolute; bottom: 0; left:50%; margin-left: -187px; text-align: center; z-index: 20;}
#index .banner .btnList li{ width: 90px; height: 32px;border-radius: 60px 60px  0 0; background-color: #fff8e8; display: inline-block; text-align: center; line-height: 50px; cursor: pointer; font-size: 0px; vertical-align: bottom;}
#index .banner .btnList li:first-child{ width: 90px; background-position:left bottom;}
#index .banner .btnList .hide{ display: none;}
#index .banner .btnList li.cur{ height:42px; line-height: 70px;}
#index .banner .btnList li.cur>img{display: none;}
#index .banner .btnList li.cur .hide{display: inline-block;}
#index .banner .bg{ width: 100%; height: 13px; background: url(/skin/huiben/img/indexNewsBg.png); position: absolute; bottom: 0px;} 
#index .banner .btns{ width: 52px; height: 52px; position: absolute; top: 50%; margin-top: -26px; background: url(/skin/huiben/img/bannerBtns.png) no-repeat; cursor: pointer; transition-duration: .5s; -webkit-transition-duration: .5s; opacity: .3;} 
#index .banner .btns.cur{ opacity: .5}
#index .banner .btns.btnL{ left: 8%;}
#index .banner .btns.btnR{ right: 8%; background-position: right;}
#index .banner .btns:hover{ opacity: .5;}
#index .banner .btns.btnL:hover{ transform: translateX(-5px); -webkit-transform: translateX(-5px);}
#index .banner .btns.btnR:hover{-webkit-transform: translateX(5px);transform: translateX(5px);}
#index .banner ul li .Banimate{ position: absolute; width: 1100px; height: 100%; left: 50%; margin-left: -550px; top: 0;}

.img1{opacity:0;filter:alpha(opacity=100);transition:all .8s;-webkit-transition:all .8s; position: absolute; left: 0; bottom: 35%;max-width: 552px;transition-delay: 1s;-webkit-transition-delay: 1s;}
/**banner1**/
.huadongText{ width: 550px; height: 546px; height:34px; border: 2px solid #ee7657; border-radius: 15px; position: absolute; left: 0; bottom: 20%;transition:all .8s;-webkit-transition:all .8s;transition-delay: .5s;-webkit-transition-delay: .5s;opacity:0;filter:alpha(opacity=0)}
.huadongText .mintext{ width: 190px;display: block; position: absolute; right: 0; height: 34px; background: #ee7657; border-radius: 11px; top: 0;opacity:0;filter:alpha(opacity=0);transition:all .8s;-webkit-transition:all .8s;transition-delay: 1s;-webkit-transition-delay: 1s;}
.huadongText .mintext img{margin: 8px 0 8px 25px;}
.img2{ position: absolute; top: 6px; right: 40px;opacity:0;filter:alpha(opacity=0);transition:all 1.3s;-webkit-transition:all 1.3s;transition-delay: 1.8s;-webkit-transition-delay: 1.8s;}
/**banner2**/
.dinosaur_pic{ width: 282px; height: 335px; position: absolute; right: -10px; bottom: -30px; background: url(/skin/huiben/img/dinosaur_pic.png);}
.dinosaur_pic .hand{ background: url(/skin/huiben/img/hand.png) ; width: 118px; height: 136px; position: absolute;top: 50px;transform-origin:bottom right;-webkit-transform-origin:bottom right;animation:hand 2s infinite cubic-bezier(.19,1,.22,1) ;-webkit-animation:hand 2s infinite cubic-bezier(.19,1,.22,1) ;}
.teshuBanimate{text-align: center;}
.img3{ margin-top: 10%;opacity:0;filter:alpha(opacity=100);transition:all .4s;-webkit-transition:all .4s;}
@keyframes hand{
    0%,100%{transform: rotateZ(0deg);}
    50%{transform: rotateZ(9deg);}
}
@-webkit-keyframes hand{
    0%,100%{-webkit-transform: rotateZ(0deg);}
    50%{-webkit-transform: rotateZ(9deg);}
}
/**banner3**/
.round_cloud1{animation:round_cloud 5.5s cubic-bezier(.68,-0.55,.27,1.55) infinite;}
.round_cloud2{animation:round_cloud 4s cubic-bezier(.6,-0.28,.74,.05) infinite;}
.round_cloud3{animation:round_cloud 5s cubic-bezier(.18,.89,.32,1.28) infinite;}
@keyframes round_cloud{
    0%,100%{transform: rotate(0);}
    50%{transform: rotate(45deg);}
}
.round_cloud1,.round_cloud2,.round_cloud3{  width: 254px; height: 162px; position: absolute;}
.round_cloud1 {top: -50px; left: 25%;}
.round_cloud2 { top: 45%; left: 5%;}
.round_cloud3 {top: 35%; right: -20px;}
.round_cloud1 .cloud_freehand{width: 254px; height: 162px;background: url(/skin/huiben/img/cloud_freehand1.png) no-repeat;transform: scale(.1);-webkit-transform: scale(.1);transition-delay: 3.5s;-webkit-transition-delay: 3.5s;transition:cubic-bezier(1,-0.48,0,1.55) 2s;-webkit-transition:cubic-bezier(1,-0.48,0,1.55) 2s;}
.round_cloud2 .cloud_freehand{width: 254px; height: 162px;background: url(/skin/huiben/img/cloud_freehand1.png) no-repeat;transform: scale(.1);-webkit-transform: scale(.1);transition-delay: 2s;-webkit-transition-delay: 2s;transition:cubic-bezier(1,-0.48,0,1.55) 2s;-webkit-transition:cubic-bezier(1,-0.48,0,1.55) 2s;}
.round_cloud3 .cloud_freehand{width: 254px; height: 162px;background: url(/skin/huiben/img/cloud_freehand1.png) no-repeat;transform: scale(.1);-webkit-transform: scale(.1);transition-delay: 4.5s;-webkit-transition-delay: 4.5s;transition:cubic-bezier(1,-0.48,0,1.55) 2s;-webkit-transition:cubic-bezier(1,-0.48,0,1.55) 2s;}


/**banner4**/


#index .banner ul li.addclass .img1{opacity:1;filter:alpha(opacity=100)}
#index .banner ul li.addclass .huadongText{opacity:1;filter:alpha(opacity=100);}
#index .banner ul li.addclass .mintext{transform: translateX(-361px);-webkit-transform: translateX(-361px);opacity:1;filter:alpha(opacity=100)}
#index .banner ul li.addclass .img2{opacity:1;filter:alpha(opacity=100)}
#index .banner ul li.addclass .img3{opacity:1;filter:alpha(opacity=100);}
#index .banner ul li.addclass .round_cloud1 .cloud_freehand{transform: scale(1);-webkit-transform: scale(1);}
#index .banner ul li.addclass .round_cloud2 .cloud_freehand{transform: scale(.6);-webkit-transform: scale(.6);}
#index .banner ul li.addclass .round_cloud3 .cloud_freehand{transform: scale(.4);-webkit-transform: scale(.4);}


#index .news{ width: 100%; height:auto; position: relative; z-index: 10; background:url(/skin/huiben/img/mazi_bg.jpg); padding-bottom: 73px; padding-top: 23px;}
#index .news .container1100{ z-index: 15;}

#index .news2{ width: 100%; height:auto; position: relative; z-index: 10; background:url(/skin/huiben/img/mazi_bg.jpg); padding-bottom: 13px; padding-top: 23px;}
#index .news2 .container1100{ z-index: 15;}
#index .news2 .newsBox{ width: 96%; background-color: #fff4db; height: 45px; line-height: 45px; margin: auto; border-radius: 10px; position: relative; overflow: hidden;}
#index .news2 .newsBox .left{ width: 194px; height: 100%; background: url(/skin/huiben/img/news1.jpg) center no-repeat; background-color: #223286; border-radius: 10px 0 0 10px; float: left;}
#index .news2 .newsBox .left .hide{display: none;}
#index .news2 .newsBox .newList{ width: 715px; height: 10000px; float: left; margin-left: 40px; }
#index .news2 .newsBox .newList li{ width: 100%; height: 45px; text-align: left;}
#index .news2 .newsBox .newList li a{ display: block; width: 100%; height: 100%; font-size: 12px; color: #484848;}
#index .news2 .newsBox .btns{ width: 19px; height:19px; position: absolute; top:50%; margin-top: -10px;background: url(/skin/huiben/img/indexNewsBtn.png) no-repeat;cursor: pointer; transition-duration: .5s; -webkit-transition-duration: .5s;}
#index .news2 .newsBox .btns.btnL{right: 45px;}
#index .news2 .newsBox .btns.btnL:hover{ transform: translateX(-5px); -webkit-transform: translateX(-5px);}
#index .news2 .newsBox .btns.btnR{ right: 13px; background-position: right; }
#index .news2 .newsBox .btns.btnR:hover{-webkit-transform: translateX(5px);transform: translateX(5px);}
#index .news2 .pgy2_pic{position: absolute; left: 2%; height: 100%; bottom: 0;max-height: 444px;}
#index .news2 .pgy2_pic img{ height: 100%;}
#index .news2 .pgy3_pic{position: absolute; right: 2%; height: 100%; bottom: 0;max-height: 235px;}
#index .news2 .pgy3_pic img{ height: 100%;}

#index .news .pgy2_pic{position: absolute; left: 2%; height: 100%; bottom: 0;max-height: 444px;}
#index .news .pgy2_pic img{ height: 100%;}
#index .news .pgy3_pic{position: absolute; right: 2%; height: 100%; bottom: 0;max-height: 235px;}
#index .news .pgy3_pic img{ height: 100%;}

#index .environment{ width: 100%; height: auto; padding: 55px 0 110px 0; background: url(/skin/huiben/img/environmentBg.jpg); position: relative;}
#index .environment .title{ width: 70%; max-width: 339px; margin: auto; font-size: 0px; margin-bottom: 52px;}
#index .environment .imgList{ width: 642px; height: 412px; position: relative;  border-radius: 10px; overflow: hidden; float: left; z-index: 10;}
#index .environment li{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: pointer; border-radius: 10px; overflow: hidden;}
#index .environment li .border{ width: 28px; height: 100%; position: absolute;  font-size: 16px; text-align: center; color: #FFFFFF; box-sizing: border-box; -webkit-box-sizing: border-box; padding-top: 20px; z-index: 10;}
#index .environment li.cur4 .border{ background-color: #333333; }
#index .environment li.cur3 .border{ background-color: #656565;}
#index .environment li.cur2 .border{ background-color: #999999;}
#index .environment li.cur1 .border{background-color: #c0bfbf;}
#index .environment li:nth-child(4) .border{ left: 0;border-radius: 10px 0 0 10px;}
#index .environment li:nth-child(3) .border{ left: 28px; border-radius: 0 ; }
#index .environment li:nth-child(2) .border{ left: 56px;border-radius: 0;}
#index .environment li:nth-child(1) .border{ left: 84px;border-radius: 0;}
#index .environment li:nth-child(1){z-index: 10;}
#index .environment li .lable{ width: 28px; height: 100%; background-color: #656565;font-size: 16px; text-align: center; color: #FFFFFF; position: absolute; right: -4%; top: -23%; transform: rotate(-42deg);-webkit-transform: rotate(-42deg); box-sizing: border-box; -webkit-box-sizing: border-box; padding-top: 70px;}
#index .environment li:nth-child(1) .lable{ z-index: 10;}
#index .environment .text{ float: right; display: block; position: relative; z-index: 20;}
#index .environment .text .texts{ width: 100%; height: auto; margin-top: 28px;}
#index .environment .text .more{ margin-top: 30px; transition-duration: .5s; -webkit-transition-duration: .5s;}
#index .environment .text .more:hover{ margin-top:20px; }
#index .environment li img{ float: right;}
#index .environment .pgy2{ background: url(/skin/huiben/img/pgy2.png); width: 228px; height: 444px; position: absolute; left: 0; bottom: 10px; z-index: 0 ; opacity: .5;}
#index .environment .pgy3{ background: url(/skin/huiben/img/pgy3.png); width: 120px; height: 236px; position: absolute; right: 0px; bottom: 10px; z-index: 10;}


.system{ width: 100%; height: auto; background-color: #a5e2e3; position: relative; overflow: hidden;}
.system .container1100 .title{ width: 50%; max-width: 374px; margin: auto; padding-top: 20px; margin-bottom:1px;}
.system .cont{ width: 100%; height: auto; position: relative; font-size: 0px; position: relative;}
.system .text{ position: absolute; display: block; width: 120px; height: auto;}
.system .text .en{ font-size: 12px; color: #000000; opacity: .6;}
.system .text .ch{ font-size: 16px; color: #4e2f10;}
.system .text1{ left: 10%; top: 27%; }
.system .text2{ left: 35%; top: -11%; }
.system .text3{ left: 59%; top: -2%; }
.system .text4{ left: 90%; top: 27%; }
.system .text5{ left: 44%; top: 73%;  text-align: center;}
.system .text5 .ch{ font-size: 21px; color: #ff9b43;}
.system .text5 .en{color: #ffb472; font-size: 12px; opacity: .6; }
.system .text:hover{ transform: translateY(-10px); -webkit-transform: translateY(-10px);}
.system .bg{ background: url(/skin/huiben/img/systemBg1.jpg) no-repeat; width: 1920px; height: 1800px; position: absolute; z-index: 0; top: 50%; margin-top: -800px; left: 50%; margin-left: -960px;animation:zhuan 100s ease-out infinite; -webkit-animation:zhuan 100s ease-out infinite;}
.system .container1100{ z-index: 10;}


.system .contBox{ width: 1100px; height: auto; padding-top: 10px; padding-bottom: 45px; margin: auto;}
.system .contBox .title{ width:90%; max-width: 205px; margin: auto; height: auto; font-size: 0px; }
.system .contBox .list{ margin-top: 10px; width: 100%; height: auto; overflow: hidden;}
.system .contBox .list .page{ width: 100%; height: 100%; overflow: hidden; display: none; }
.system .contBox .list .page:first-child{ display: block;}
.system .contBox .list .item{ width: 32%; float: left; height: auto; margin-bottom: 50px; }
.system .contBox .list .item:nth-child(3n-1){ margin: 0 2% 50px;}
.system .contBox .list .imgs{ width: 100%; height: auto; border-radius: 10px; overflow: hidden; font-size: 0px;}
.system .contBox .list .textBox{ width:96%; margin: auto; height: 140px; margin-top: 10px; overflow: hidden;position: relative;}
.system .contBox .list .tit{ width: 100%; height: auto;font-size: 16px; color: #0f76c4; margin-bottom: 10px;}
.system .contBox .list .texts{ width: 100%; height: auto; font-size: 14px; color: #727475; line-height: 22px;transition-duration: .5s; -webkit-transition-duration: .5s; overflow: hidden;}
.system .contBox .list .more{ background: url(/skin/huiben/img/contMore.png) no-repeat; transition-duration: .5s; -webkit-transition-duration: .5s; width: 105px; height: 21px; position: absolute; bottom: 0px; left: 0px;}
.system .contBox .list .item:hover .texts{ color: #000000; transform: translateY(-5px); -webkit-transform: translateY(-5px); }
.system .contBox .list .item:hover .more{ transform: translateY(-10px); -webkit-transform: translateY(-10px);}
.system .contBox .pageBtn{ width: 100%; height:16px; text-align: center; overflow: hidden; position: relative;}
.system .contBox .pageBtn li{ width: 8px; height: 8px; position: relative; top: -5px; display: inline-block; text-align: center; margin-right: 24px; border-radius:50%; background-color: #7880ae;transition-duration: .5s; -webkit- transition-duration: .5s; cursor: pointer;}
.system .contBox .pageBtn li:last-child{ margin-right: 0px;}
.system .contBox .pageBtn li:after{content: ""; position: absolute; width: 14px; height: 14px; box-sizing: border-box; -webkit-box-sizing: border-box; border:1px solid #223286; border-radius: 50%; top: 50%; margin-top: -7px; left: 50%; margin-left: -7px; transform: scale(0); -webkit-transform: scale(0); transition-duration: .5s; -webkit- transition-duration: .5s;}
.system .contBox .pageBtn li.cur{  background-color: #223286;}
.system .contBox .pageBtn li.cur:after{ transform: scale(1); -webkit-transform: scale(1);}
.system .contBox .pageBtn li:hover:after{ transform: scale(1); -webkit-transform: scale(1);}
.system .contBox .pageBtn li:hover{ background-color: #223286;}







#index .content{ width: 100%; height: auto; position: relative; background-color: #fef4e3; padding-top: 70px; padding-bottom: 30px ; z-index: 10;}
#index .content .title{ width: 100%; height: auto; position: relative; overflow: hidden; z-index: 10;}
#index .content .title .contTit{ width: 235px; height: 29px; float: left;}
#index .content .title .more{ display: block; font-size: 0px; position: absolute; width: 105px; height: 22px; top: 50%; margin-top: -11px; right: 0px; transition-duration: .5s; -webkit-transition-duration: .5s;}
#index .content .title .more:hover{ transform: translateX(10px); -webkit-transform: translateX(10px);}
#index .content .title .border{ width:730px; left: 260px; position: absolute; top: 50%; background-color: #d3d1d4; background-color: #d3d1d4; height: 1px;}
#index .content .contList{ width: 1100px; height: 300px; margin: 60px auto 0;}
#index .content .contList li{ width: 200px; height: 100%; position: relative;  float: left; text-align: center;}
#index .content .contList li a{ display: block; width: 100%; height: 100%; }
#index .content .contList li .bg{ transition-duration: 1s; -webkit-transition-duration: 1s;}
#index .content .contList li:nth-child(2){ margin:0 100px ;}
#index .content .contList li:nth-child(4){ margin-left: 100px;}
#index .content .contList .imgBox{ width: 200px; height: 200px; border-radius: 50%; font-size: 0px; position: relative;}
#index .content .contList .imgBox>img{ border-radius: 50%; position: relative; z-index: 10; border: 1px solid #ddd4bc;}
#index .content .contList li:nth-child(1) .bg{width: 247px; height: 249px; background: url(/skin/huiben/img/contentBg.png) no-repeat; position: absolute;  top: -12px; left: -30px; background-position: top left;  }
#index .content .contList li:nth-child(2) .bg{width: 248px; height: 249px; background: url(/skin/huiben/img/contentBg.png) no-repeat; position: absolute;  top: -19px; left: -12px; background-position: -247px top;  }
#index .content .contList li:nth-child(3) .bg{width: 235px; height: 249px; background: url(/skin/huiben/img/contentBg.png) no-repeat; position: absolute;  top: -12px; left: -17px; background-position: -495px top;  }
#index .content .contList li:nth-child(4) .bg{width: 249px; height: 249px; background: url(/skin/huiben/img/contentBg.png) no-repeat; position: absolute;  top: -12px; left: -17px; background-position: right top;  }
#index .content .contList li:nth-child(1) .textBox{ color: #f8b62b;}
#index .content .contList li:nth-child(2) .textBox{color: #e51a8a;}
#index .content .contList li:nth-child(3) .textBox{color: #00a0e9;}
#index .content .contList li:nth-child(4) .textBox{color: #7fab00;}
#index .content .contList .textBox{ margin-top: 27px;text-transform: uppercase;transition-duration: .5s; -webkit-transition-duration: .5s; }
#index .content .contList .textBox .ch{ font-size: 20px;}
#index .content .contList .textBox .en{ font-size: 12px; font-family: arial;}
#index .content .contList li:hover .bg{ transform: rotate(360deg); -webkit-transform: rotate(360deg);}
#index .content .contList li:hover .textBox{ transform: translateY(-5px); -webkit-transform: translateY(-5px);}
#index .content .yun1{ width: 114px; height: 69px; position: absolute; background: url(/skin/huiben/img/yun1.png) no-repeat; right: -66px; top: 64px;}
#index .content .yun2{ width: 171px; height: 103px; position: absolute;background: url(/skin/huiben/img/yun2.png) no-repeat; left: -101px; top: -38px;} 
#index .content .bg1{ width: 113px; height: 119px; position: absolute;background: url(/skin/huiben/img/contentRen.png) no-repeat; bottom: -32px; right: 8%;}
#index .content .bg2{ width: 704px; height: auto; position:absolute; bottom: 20px; left: 0; opacity: .3;}
#index .content .container1100{ z-index: 9;}

#index .activity{ width: 100%; height: auto; background-image: url(/skin/huiben/img/environmentBg.jpg); padding-top: 40px; position: relative; padding-bottom: 85px;}
#index .activity .bg{ width: 100%; height: 7px; background: url(/skin/huiben/img/contBg.png); position: absolute; top: 0px; left: 0px;}
#index .activity .more{ width: 105px; height: 22px; position: absolute; right: 0; top: 50%; margin-top: -3px; transition-duration: .5s; -webkit-transition-duration: .5s;}
#index .activity .more:hover{ transform: translateX(10px); -webkit-transform: translateX(10px);}
#index .activity .title{ width: 100%; height: auto; position: relative; margin-bottom: 40px;}
#index .activity .tit{ font-size: 0px;}
#index .activity .bg3{ width: 100%; height:21px; background: url(/skin/huiben/img/appointmentBg.png); position: absolute; bottom: -10px; z-index: 10;}
#index .activity .bg4{background: url(/skin/huiben/img/activeBg.png); width: 158px; height: 139px; position: absolute; bottom: 0px; right: 10%;}
#index .active{ width: 632px; float: left;height: auto;}
#index .active .tit{ width: 224px; height: 32px;}
#index .active .border{ width: 276px; position: absolute; background-color: #eb4605; opacity: .2; height: 1px; left: 240px; top: 70%;} 
#index .active .bigBox{ width: 498px;  box-sizing: border-box; -webkit-box-sizing: border-box; height: 402px; float: left; border: 3px solid #FFFFFF; border-radius: 10px; position: relative; overflow: hidden;}
#index .active .bigBox:after{ width: 100%; height:20%; background-color: #ffffff; opacity: .9; content: ""; position: absolute; bottom: 0; right: 0;}
#index .active .bigBox ul{ width:9999px; height: 100%;}
#index .active .bigBox li{position: relative; width: auto; float: left; height: 100%; font-size: 0px; }
#index .active .bigBox li .text{ width: 70%; position: absolute; right: 8%; bottom: 3%; z-index: 10; height: 15%; font-size: 12px; color: #434343; opacity: .9; overflow: hidden;}
#index .active .bigBox .page{ color: #000000; font-size: 20px; position: absolute; width: 30%; text-align: center; height: 40px; line-height: 40px; bottom: 5%; z-index: 10;} 
#index .active .bigBox .page span{ font-size: 30px; color: #e80000; font-weight: bold;}
#index .active .bigBox img{ border-radius: 10px;}
#index .active .bigBox .btns{ width: 41px; height: 46px; position: absolute; top: 50%; margin-top: -23px; cursor: pointer;transition-duration: .5s; -webkit-transition-duration: .5s; }
#index .active .bigBox .btns:after{content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #f8eedd;}
#index .active .bigBox .btns:before{content: "";  position: absolute; top: 50%; margin-top: -11px; left: 50%; margin-left: -6px; background: url(/skin/huiben/img/activeBtn.png) no-repeat; width: 12px; height: 22px; z-index: 10;}
#index .active .bigBox .btns.btnL{ left: 8px;}
#index .active .bigBox .btns.btnR{ right: 8px;}
#index .active .bigBox .btns.btnR:before{ background-position: right;}
#index .active .bigBox .btns.btnL:hover{transform: translateX(-5px); -webkit-transform: translateX(-5px); }
#index .active .bigBox .btns.btnR:hover{transform: translateX(5px); -webkit-transform: translateX(5px); }

#index .active .smallBox{ width: 124px; float: right; height: 402px; box-sizing: border-box; -webkit-box-sizing: border-box;}
#index .active .smallBox li{ font-size: 0px; border-radius: 5px; border: 3px solid #FFFFFF; position: relative; cursor: pointer;transition-duration: .5s; -webkit-transition-duration: .5s; box-sizing: border-box; -webkit-box-sizing: border-box;} 
#index .active .smallBox li:after{ transition-duration: .5s; -webkit-transition-duration: .5s;content: ""; width:0px; height: 0px; border-style: solid; border-color: transparent #ed4405 transparent transparent; border-width: 15px; position: absolute; left: 0px; top: 50%; margin-top: -15px; opacity: 0;}
#index .active .smallBox li.cur{ border-color: #ed4405;}
#index .active .smallBox li.cur:after{ left: -30px; opacity: 1;} 
#index .active .smallBox li:hover{ border-color: #ed4405;}
#index .active .smallBox li:hover:after{ left: -30px; opacity: 1;} 
#index .active .smallBox li img{position: relative; z-index: 10; }
#index .story{ width:438px; float: right; position: relative; z-index: 10;}
#index .story .tit{ width: 219px; height: 32px;}
#index .story .border{ width: 103px; position: absolute; background-color: #eb4605; opacity: .2; height: 1px; left: 224px; top: 70%;} 
#index .story .imgList{ overflow: hidden; width: 100%; height: auto;}
#index .story .imgBox{ width: 100%; height: auto; overflow: hidden;}
#index .story .imgBox li{ width: 33%; float: left; font-size: 0px;  margin-bottom: .5%; position: relative; border-radius: 5px; box-sizing: border-box; -webkit-box-sizing: border-box; border: 2px solid #FFFFFF; cursor: pointer;}
#index .story .imgBox li:nth-child(3n-1){margin: 0 .5% .5%;}
#index .story .imgBox li .hide{ position: absolute; top: 0; left: 0; width: 140%; height: auto; border:3px solid #ed4405; border-radius: 5px; overflow: hidden; display: none; height: 140%;}

#index .story .imgBox li:hover .hide{ display: block; z-index: 10; left: -20%; top: -20%;}
#index .story .imgBox li.cur .hide{ display: block; z-index: 10; left: -20%; top: -20%;}
#index .story .imgBox li:nth-child(3n-2) .hide{ left: 0;}
#index .story .imgBox li:nth-child(3n) .hide{ left: auto; right: 0;}
#index .story .imgBox li:nth-child(1) .hide,#index .story .imgBox li:nth-child(2) .hide,#index .story .imgBox li:nth-child(3) .hide{ top: 0;}
#index .story .imgBox li:nth-last-child(3) .hide,#index .story .imgBox li:nth-last-child(2) .hide,#index .story .imgBox li:nth-last-child(1) .hide{ top: auto; bottom: 0;}
#index .story .imgBox li .hide:before{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 34px; background-color: #000000; opacity: .5;}
#index .story .imgBox li .hide .text{ position: absolute; bottom: 0; width: 100%; text-align: center; height: 34px; line-height: 34px; color: #ffffff; font-size: 24px;}
#index .appointment{ width: 100%; height: auto; position: relative; background-color: #69bde9; padding-top: 32px; padding-bottom: 50px; z-index: 10;}
#index .appointment .container1100{ z-index: 23;}
#index .appointment .title{ width: 100%; height:auto; padding-bottom: 23px; font-size: 0px; border-bottom: 1px solid #96d1f0; }
#index .appointment .bg1{ position: absolute; top: -42px; left: -101px; background: url(/skin/huiben/img/appointmentBg2.png); width: 39px; height: 82px; z-index: 10;  }
#index .appointment .inputBox{ width: 80%; height: auto; margin: auto; overflow: hidden; margin-top: 23px;}
#index .appointment .inputBox .ins{ width: 48%; float: left; margin-right: 4%; height: 44px; background-color: #ffffff; line-height: 44px; margin-bottom: 25px; border-radius: 10px; overflow: hidden;}
#index .appointment .inputBox .ins:nth-child(2n){margin-right: 0px;}
#index .appointment .inputBox .ins .text{ float: left; width: 20%; margin-left: 5%;  color: #86807f; font-size: 14px; text-transform: uppercase;}
#index .appointment .inputBox .ins input[type='text']{ width: 70%; float: left; margin-left: 5%; height: 100%;}
#index .appointment .inputBox .ins .yuan{ width:auto; float: left; position: relative; margin-left:24px ; cursor: pointer;}
#index .appointment .inputBox .ins .yuan:before{ content: ""; width: 22px; height: 22px; background-color: #f2e1bd; display: inline-block; position: relative; border-radius: 50%; top: 5px; margin-right: 12px;}
#index .appointment .inputBox .ins .yuan:after{ content: ""; width: 10px; height: 10px; border-radius: 50%; background-color: #ff6b09; position: absolute; left:6px; top: 50%; margin-top: -5px; display: none;}
#index .appointment .inputBox .ins .yuan.cur:after{display: block; }
#index .appointment .inputBox .ins .year{ float: left;width: 30%;}
#index .appointment .inputBox .ins .year input{ width: 40%; float: none; }
#index .appointment .inputBox .sub{ width: 211px; height: 55px; border-radius: 10px; margin: 35px auto 0;  font-size: 18px; text-align: center; color: #FFFFFF; background-color: #f8a900; display: block;}
#index .appointment .bg3{ width: 100%; height: 21px; background: url(/skin/huiben/img/appointmentBg.png); position: absolute; bottom: -10px; left: 0px; z-index: 10;}
#index .appointment .bg4{ width:707px ; height: 139px; position: absolute; bottom:11px;  right: 10px; background: url(/skin/huiben/img/appointmentBg3.jpg); }
/******3-17*******/
#index .Parenting{ background: #bde557;padding-bottom: 40px;position: relative;}
#index .Parenting:after{ position: absolute; content: ''; height: 21px; background: url(/skin/huiben/img/yuandian2.png) repeat-x; left: 0; bottom: -10px; width: 100%;z-index: 15;}
#index .BIGcontainer96{ width: 96%; margin: 0 auto; position: relative; height:100%;}
#index .Parenting .title{width: 50%;max-width:276px;margin: auto;padding-top: 60px;margin-bottom:27px;}
#index .Parenting .Parenting_pic{ position: relative;overflow: hidden; border-radius: 58px; border: 8px solid #7da92d;}
#index .Parenting .Parenting_pic ul{ }
#index .Parenting .Parenting_pic ul li{ position: relative;}
#index .Parenting .Parenting_pic ul li img{ width: 100%;display: block;}
#index .Parenting .Parenting_pic ol{ position: absolute; bottom: 0; width: 100%;}
#index .Parenting .Parenting_pic ol li{ width: 20%; float: left; background: #352411;transition:all .5s;-webkit-transition:all .5s;cursor: pointer;position: relative;}
#index .Parenting .Parenting_pic ol li img{ width: 100%; display: block; opacity:.5;filter:alpha(opacity=50)}
#index .Parenting .Parenting_pic ol li .texat{position: absolute; width: 100%;text-align: center;color: #fff;font-size: 22px; z-index: 15; top: 25%;}
#index .Parenting .Parenting_pic ol li:hover{background:#365400;}
#index .Parenting .Parenting_pic ol li.addclass{background:#365400;}
#index .Parenting .cloud_pic{ background: url(/skin/huiben/img/cloud_pic.png) no-repeat; width: 93px;height: 56px; position: absolute; top: 5%; left: -50px;animation:cloud_pic 6s infinite cubic-bezier(.17,.84,.44,1);-webkit-animation:cloud_pic 6s infinite cubic-bezier(.17,.84,.44,1);}
#index .Parenting .cloud_pic2{ background: url(/skin/huiben/img/cloud_pic2.png) no-repeat; width: 79px;height: 48px; position: absolute;top:-20px; left: 45%;animation:cloud_pic2 15s infinite cubic-bezier(.77,0,.18,1);-webkit-animation:cloud_pic2 15s infinite cubic-bezier(.77,0,.18,1);}
#index .Parenting .umbrella_pic{ background: url(/skin/huiben/img/umbrella_pic.png) no-repeat; width: 113px; height: 119px; position: absolute; top: 2%; right: 2%;animation:umbrella_pic 15s infinite linear;}

@keyframes cloud_pic{
    0%,100%{transform:translateX(-93px);}
    50%{transform:translateX(0);}
}
@-webkit-keyframes cloud_pic{
    0%,100%{-webkit-transform:translateX(-93px);}
    50%{-webkit-transform:translateX(0);}
}
@keyframes cloud_pic2{
    0%,100%{transform:translateX(-293px);}
    50%{transform:translateX(0);}
}
@-webkit-keyframes cloud_pic2{
    0%,100%{-webkit-transform:translateX(-293px);}
    50%{-webkit-transform:translateX(0);}
}
@keyframes umbrella_pic{
    0%{opacity: 1;transform: translateX(0) translateY(0) rotate(0deg);}
    15%{opacity: 1;transform: translateX(-288px) translateY(147px) rotate(30deg);}
    30%{opacity: 1;transform: translateX(-576px) translateY(294px) rotate(0deg);}
    45%{opacity: 1;transform: translateX(-864px) translateY(441px) rotate(30deg);}
    65%{opacity: 1;transform: translateX(-1248px) translateY(637px) rotate(0deg);}
    80%{opacity: 1;}
    100%{opacity: 0;transform: translateX(-1920px) translateY(980px);}
}


#index .KnowHow{ background:url(/skin/huiben/img/mazi_bg.jpg); padding-bottom: 74px;position: relative;}
#index .KnowHow:after{ position: absolute; content: ''; height: 21px; background: url(/skin/huiben/img/yuandian1.png) repeat-x; left: 0; bottom: 0; width: 100%;z-index: 15;}
#index .KnowHow .container1100{ z-index: 15;}
#index .KnowHow .title{width: 50%;max-width:343px;margin: auto;padding-top: 60px;margin-bottom:27px;}
#index .KnowHow article{ color: #352411; font-size: 14px; width: 85%; float: left;}
#index .KnowHow .wem{width: 13%; float: right;text-align: right;}
#index .KnowHow .wem span{display: block;text-align: center;}
#index .KnowHow .KnowHow_btn{ width: 137px; height: 41px; background: #ffa400; border-radius:10px; overflow: hidden; margin: 0 auto; background:url(/skin/huiben/img/KnowHow_btn.png); cursor: pointer;}
#index .KnowHow .activeBg2{max-height: 158px;position: absolute; left: 5%; bottom:15%;}
#index .KnowHow .activeBg2 img{ height: 100%;}
#index .KnowHow .toumingdi{max-height: 105px; position: absolute; bottom: 1%; right: 1%;}
#index .KnowHow .toumingdi img{ height: 100%;}


#contact{ width: 100%; height: auto; position: relative; background-color: #e0eeea; padding-bottom: 115px; z-index: 10;}
#contact .bg{  width: 100%; height: 7px; background: url(/skin/huiben/img/contactBg.png); position: absolute; bottom: -7px; left: 0;}
#contact .box{ width: 100%; height: auto; overflow: hidden; margin-top: 95px;}
#contact .box .address{ width: auto; float: left; height: 61px; border-left: 1px solid #b3bebb; padding: 0 40px 0 10px; font-size: 17px; color: #333333; line-height: 30px;}
#contact .box .address span{ font-size: 12px; opacity: .7; text-transform: uppercase;color: #333333; }
#map{ width: 100%; height: 412px; box-sizing: border-box; -webkit-box-sizing: border-box; border: 6px solid #78cdff; margin-top: 20px;}
#contact .pgy1{top:18%; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); left:10%; }
#contact #banner{ z-index: 10;}
#contact .pgy2{ bottom: 2%; right: 10%;}
#team{width: 100%; height: auto; position: relative; z-index: 10;}
#team #banner{ z-index: 20;}
#team .cont{ width: 100%; height: auto; background: url(/skin/huiben/img/teamBg.jpg) no-repeat; background-size: cover; position: relative; padding-bottom: 80px; padding-top: 60px; margin-top: -10px; z-index: 10;}

#team .cont{ height: auto; width: 100%;}
#team .cont .container1100{ background: url(/skin/huiben/img/teamBg.png) no-repeat bottom; padding-bottom: 40px; background-size: cover; position: relative;}
#team .cont .ulBox{ width: 94%; margin: auto; padding-bottom: 26px; padding-top: 35px; border-bottom: 1px dashed #C0BFBF;}
#team .cont .ulBox:last-child{ border: none;}
#team .cont .tit{ font-size: 0px; height: 25px; margin-bottom: 27px;}
#team .cont .list{  width: 90%; margin: auto; height: auto; overflow: hidden;}
#team .cont .list a{ display: block; width: 100%; height: 100%; text-align: center; position: relative;}
#team .cont .list li
{ float: left; width:23%; margin-right:2%; margin-bottom: 10px; padding-bottom: 60px; position: relative; overflow: hidden;
height:280px;}

#team .cont .list li:before{ width: 7px; content: ''; display: block; height: 100%; background-color: #ff733d; position: absolute; top: 0; left: 0; z-index: 10; opacity: 0; transition-duration: .5s; -webkit-transition-duration: .5s;}
#team .cont .list li a:after{ width: 100%; height: 7px; content: ''; display: block;  background-color: #ff733d; position: absolute; top: 0; left: 0; z-index: 10; opacity: 0;transition-duration: .5s; -webkit-transition-duration: .5s;}
#team .cont .list li:after{ width: 7px; content: ''; display: block; height: 100%; background-color: #ff733d; position: absolute; top: 0; right: 0; z-index: 10; opacity: 0;transition-duration: .5s; -webkit-transition-duration: .5s;}
#team .cont .list li:hover:after{ opacity: 1;}
#team .cont .list li:hover:before{ opacity: 1;}
#team .cont .list li:hover a:after{ opacity: 1;}
#team .cont .list li:hover .textBox{background-color: #ff733d; transform: translateY(-34px); -webkit-transform: translateY(-34px);}
#team .cont .list li:hover .textBox .text{ font-size: 14px; color: #FFFFFF;}
#team .cont .list li .imgs{ font-size: 0px; width: 100%; height: auto;}
 #team .cont .list li .textBox{ position: absolute;height: 96px; text-align: center; width: 100%;transition-duration: .5s; -webkit-transition-duration: .5s;}
#team .cont .list li .text{ color: #000000; font-family: arial; font-size: 12px; line-height: 30px; width: 100%; }
#team .cont .list li .more{ width: 70px; height: 20px;font-size: 12px; line-height: 18px; text-transform: uppercase; border-radius: 10px; margin: auto; border: 1px solid #FFFFFF;}

#space{ width: 100%; height: auto; background-color: #f5f0e2; padding-bottom: 62px; position: relative; z-index: 10;}
#space .spaceBox{ width: 100%; height: 300px;}
#space #banner{ z-index: 20;}
#space .spaceList2{ width: 100%; height: 300px;}
#space .spaceList2 li{ width: 20%; height: 100%; float: left; text-align: center;  font-size: 17px; position: relative;}
#space .spaceList2 a{ display: block; width: 100%; height: 100%;color: #000000; position: relative; z-index: 10;}
#space .spaceList2 .icon{ width: 108px; height: 108px; background: url(/skin/huiben/img/spaceIcons.png) no-repeat; border-radius: 50%; margin:85px auto 15px; }
#space .spaceList2 .icon1{background-color: #44a2da;background-position: 35px center;}
#space .spaceList2 .icon2{background-position: -69px center;background-color: #3ac686;}
#space .spaceList2 .icon3{ background-color: #f89741;background-position: -178px center;}
#space .spaceList2 .icon4{background-color: #da51b8;background-position: -288px center;}
#space .spaceList2 .icon5{background-color: #bb9a61;background-position: -400px center;}
#space .spaceList2 li .bg{height: 0; width: 100%;  position: absolute; top: -7px; left: 0; background-repeat: repeat-x; transition-duration: .5s; -webkit-transition-duration: .5s;}
#space .spaceList2 li:first-child .bg{background: url(/skin/huiben/img/sbg1.png) bottom;}
#space .spaceList2 li:nth-child(2) .bg{background: url(/skin/huiben/img/sbg2.png) bottom;}
#space .spaceList2 li:nth-child(3) .bg{background: url(/skin/huiben/img/sbg3.png) bottom;}
#space .spaceList2 li:nth-child(4) .bg{background: url(/skin/huiben/img/sbg4.png) bottom;}
#space .spaceList2 li:nth-child(5) .bg{background: url(/skin/huiben/img/sbg5.png) bottom;}
#space .spaceList2 li.cur a{ color: #FFFFFF;}
#space .spaceList2 li:hover a{ color: #FFFFFF;}
#space .spaceList2 li.cur .icon{ background-color: #FFFFFF; background-image: url(/skin/huiben/img/spaceIcons2.png);}
#space .spaceList2 li.cur .bg{ height: 322px;}
#space .spaceList2 li:hover .icon{ background-color: #FFFFFF; background-image: url(/skin/huiben/img/spaceIcons2.png);}
#space .spaceList2 li:hover .bg{ height: 322px;}
#space .spaceList2 li.cur .icon1{ background-position: 35px center;}
#space .spaceList2 li.cur .icon2{ background-position: -115px center;}
#space .spaceList2 li.cur .icon3{ background-position: -265px center;}
#space .spaceList2 li.cur .icon4{ background-position: -414px center;}
#space .spaceList2 li.cur .icon5{ background-position: -564px center;}
#space .spaceList2 li:hover .icon1{ background-position: 35px center;}
#space .spaceList2 li:hover .icon2{ background-position: -115px center;}
#space .spaceList2 li:hover .icon3{ background-position: -265px center;}
#space .spaceList2 li:hover .icon4{ background-position: -414px center;}
#space .spaceList2 li:hover .icon5{ background-position: -564px center;}


#space .leture{ width: 100%; height: auto; padding-bottom: 44px; background-color: #fbfaf5; padding-top: 40px;}
#space .leture .pgy{ right: -150px; top: 30%;}
#space .leture .title{ width: 40%; max-width: 224px; margin: auto; font-size: 0px; margin-bottom: 50px;}
#space .leture .text{  font-size: 14px; color: #010101; text-indent: 20px; line-height: 26px;}
#space .leture .imgList{ width: 100%; height: auto; overflow: hidden; margin-top: 80px;}
#space .leture .imgList li{ width: 31.3%; margin-right: 3%; font-size: 0px; float: left; border-radius: 10px; overflow: hidden;}
#space .leture .imgList li:last-child{ margin-right: 0px;}
#space .box{ width: 100%; height: auto; padding-top: 65px; padding-bottom: 62px; position: relative;}
#space .box .pgy{ left: 10%; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); top: 25%;}
#space .box .list{ width: 100%; height: auto;}
#space .box .list li{ width: 100%; height: auto; background-color: #FFFFFF; border-radius: 10px; cursor: pointer; margin-bottom: 40px; position: relative;}
#space .box .list .text{ float: left; width: 510px; margin-left: 30px; padding-top: 35px;  }
#space .box .list .number{ width: 44px; height: 44px; line-height: 44px; border-radius: 50%; background-color: #6cbde9; position: absolute; top: -22px; left: -22px; text-align: center; font-size: 18px; color: #ffffff; font-family: aarial;}
#space .box .list .tit{ font-size: 16px; color: #43a3d9; margin-bottom: 25px;}
#space .box .list .texts{font-size: 12px; color: #888888;}
#space .box .list .img{ float:right ; font-size: 0px; border-radius: 0 10px 10px 0; overflow: hidden;}
#space .bg{ width: 100%; height:19px; background: url(/skin/huiben/img/coureseBg.png); position: absolute; bottom: -9px;}
#space .box .list li:nth-child(2n){ border-radius:10px}
#space .box .list li:nth-child(2n) .img{ float: left; border-radius: 10px 0 0 10px;}
#space .box .list li:nth-child(2n) .text{ float: right; margin-left: 0; margin-right: 30px;}
#space .box .list li:nth-child(2n) .number{ left: auto; right: -22px;}
#space .box .pageBtn{ width: 100%; height: auto; text-align: center;}
#space .box .pageBtn li{ width: 30px; height: 30px; margin-right:3px; box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid #bbbbbb; text-align: center; line-height: 29px; display: inline-block;}
#space .box .pageBtn li a{ display: block; width: 100%; height:100%; color: #676767; font-size: 18px; font-family: arial;}
#space .box .pageBtn li.cur{ background-color: #fbb34c; border-color:#fbb34c ;}
#space .box .pageBtn li.cur a{ color: #FFFFFF; font-weight: bold;}
#space .box .pageBtn li:hover{ background-color: #fbb34c; border-color:#fbb34c ;}
#space .box .pageBtn li:hover a{ color: #FFFFFF; font-weight: bold;}
#index .environment .text .texts .hide{ display: none;}
#space .cImg{ margin-top: 80px;}


/*****childCourse ly↓**************/
.black_bg{ background:url(/skin/huiben/img/black_bg.png) ;position: fixed; height: 100%; width: 100%; left: 0; top: 0; z-index: 1000; opacity: .5;}
/*****/

#childCourse{width: 100%;height: auto;position: relative;background-color: #E0EEEA;z-index: 10;}
#childCourse #banner{ z-index: 5;}
#childCourse .phone_banner{ display: none;}
#childCourse .box1 { position: relative; margin-top: -5px; height: 690px;}/*********@@@@@********************/
#childCourse .box1 .container1100{ height: 100%;}
#childCourse .box1 .text_childCourse{ margin: 0 auto;position: relative; padding-top: 42px; width: 201px; height: 49px;}
#childCourse .box1 .CourseList{ margin-top: 35px;}
#childCourse .box1 .CourseList ul { overflow:hidden; text-align: center; width: 100%; margin-bottom: 120px;}
#childCourse .box1 .CourseList ul li{ height: 28px; width: 136px; text-align: center; line-height: 28px; background: #8bba33; display: inline-block; border-radius: 10px; color: #fff; cursor: pointer; margin: 0 23px;}
.click_box1{ position: fixed; top: 15%; left: 0; width: 100%; height: 100%; display: none; z-index: 1001;}
.click_box1 .click_box1_over{width: 963px; height:406px; position: absolute; left: 50%; margin-left:-481px;top: 50%; margin-top: -203px;z-index: 1001;}
.click_box1 .click_box1_over .btn_off{background: url(/skin/huiben/img/btn_off.png) no-repeat; width: 48px; height: 52px; position: absolute;right: 0;top: -20px; cursor: pointer;}
.click_box1 ul{ width: 100%; height: 100%;}
.click_box1 ul li{ width: 957px; margin: 0 auto; border: 3px solid #8bba33; background: #fcf9f3; border-radius: 15px; height: 403px;}
.click_box1 ul li .title{ width: 188px; height: 38px; line-height: 38px; text-align:center; color: #fff; font-size: 18px; position: absolute; left: 50%;margin-left: -94px; top: -19px;background: #8bba33;border-radius: 15px;}
.click_box1 ul li .pic_person{ width: 195px; height: 195px; border-radius: 50%; border: 2px solid #8bba33; overflow: hidden; margin: 45px auto 0;}
.click_box1 ul li .pic_person img{ width: 100%; height: 100%; overflow: hidden; border-radius: 50%;}
.click_box1 ul li .summary{  width: 786px;max-height: 370px; margin:20px auto 0;}
.click_box1 ul li .summary .text_title{ color: #323232; font-size: 14px; text-align: center; margin-bottom: 22px;}
.click_box1 ul li .summary p{ color: #747474; font-size: 12px; line-height: 24px; }
#childCourse .box2{ height: auto; background:#d7ede7; padding: 52px 0 130px;position: relative;}
#childCourse .box2 .text_childCourse{ width: 115px; height: 58px;margin: 0 auto 30px;position: relative;}
#childCourse .box2 .bg_T{ height: 13px; width: 100%;position: absolute; background: url(/skin/huiben/img/bl_dls.png) 0 0; top: -13px; z-index: 10;}
#childCourse .box2 .bg_B{ height: 13px; width: 100%;position: absolute; background: url(/skin/huiben/img/bl_dls.png) 0 -13px;bottom: -13px;}
#childCourse .box2 .ladder {overflow: hidden;}
#childCourse .box2 .ladder ul{ float: left; margin-left: 60px; position: relative; z-index: 5;}
#childCourse .box2 .ladder ul li{ width: 145px; height: 43px; margin-bottom: 8px; text-align: center; line-height: 43px; color: #fff; font-size: 14px; border-radius:10px;}
#childCourse .box2 .ladder ul li.Grade{ color:#7f4c1f;}
#childCourse .box2 .fense{ background: #ffa0a0;}
#childCourse .box2 .lanse{ background: #3cb1dc;}
#childCourse .box2 .lvse{ background: #89b901;}
#childCourse .box2 .zise{ background: #d967d9;}
#childCourse .box2 .huangse{ background: #eacc01;}
#childCourse .box2 .hese{ background: #978888;}
#childCourse .box2 .xfense{ background: #ff6969;}
#childCourse .box2 .xzise{ background: #9d78f1;}
#childCourse .box2 .ladder_clouds{ background: url(/skin/huiben/img/ladder_clouds.png) no-repeat; width: 212px; height: 234px; position: absolute; top: 127px; left:185px;}
#childCourse .box2 .ladder_clouds2{ background: url(/skin/huiben/img/ladder_clouds.png) no-repeat; width: 212px; height: 234px; position: absolute; top: 180px; right:-112px;}
#childCourse .box2 .ladder_florer{ background: url(/skin/huiben/img/ladder_florer.png) no-repeat; width: 205px; height: 191px; top: 191px; position: absolute; left: -61px;top: -51px;}
#childCourse .box2 .ladder_person{ background: url(/skin/huiben/img/ladder_person.png) no-repeat; width: 128px; height:213px; top: 191px; position: absolute; left: 85px;top: 317px;}


#Story{ background: #f5f0e2;width: 100%;height: auto;position: relative;z-index: 10;}
#Story .box1{ height: 843px; width: 100%; position: relative;}
#Story .box1 .container1100{ height: 100%;}
#Story .box1 .Founder{ background: url(/skin/huiben/img/datou.png) no-repeat; width: 220px; height: 206px; top: 32px; left:50%; margin-left: -110px; position: absolute;}
#Story .box1 .position{ width: 918px; left: 50%; margin-left: -459px; overflow: hidden; position: absolute; top: 273px;}
#Story .box1 .position ul{ float: left; margin-left: 16px;}
#Story .box1 .position ul li{ height: 36px; line-height: 36px; border: 1px solid #ffb513; background:#faf8f1; text-align: center; margin-bottom: 15px;}
#Story .box1 .position ul.nidaye1{ width: 298px; margin-left: 0;}
#Story .box1 .position ul.nidaye2{ width: 250px;}
#Story .box1 .position ul.nidaye3{ width:160px;}
#Story .box1 .position ul.nidaye4{ width:160px;}
#Story .box1 .cloud_L{ background: url(/skin/huiben/img/cloud_l.png) no-repeat; width: 1134px; height:318px; position: absolute; bottom:0px; left:-10%;}
#Story .box1 .cloud_R{ background: url(/skin/huiben/img/cloud_r.png) no-repeat; width: 1141px; height:319px; position: absolute; bottom:0px; right:-10%;}
#Story .box1 .girl{ background: url(/skin/huiben/img/girl.png) no-repeat; width: 142px; height: 184px; position: absolute; right: -142px; bottom: 20px; z-index: 5;}
#Story .box1 .bg_B{ background: url(/skin/huiben/img/bl_dls2.png); height: 11px; width: 100%; position: absolute; bottom: -11px;}
#Story .box1 .resume{ height:413px; position:absolute; width: 1100px; top: 415px;left: 0; z-index: 10; overflow: hidden;}
#Story .box1 .resume .resume_over_btn_L{ background:#223286 ; height: 67px; width: 67px; border-radius: 50%; border: 2px solid #ffb533; left: 0; top: 50%; margin-top: -33.5px; position: absolute; color: #f5f0e2; line-height: 67px; text-align: center; cursor: pointer; z-index: 5;}
#Story .box1 .resume .resume_over_btn_R{ background: #223286;height: 35px; width: 35px; border-radius: 50%; border: 2px solid #ffb533; right: 0; top: 50%; margin-top: -17.5px; position: absolute; cursor: pointer; z-index: 5;}
#Story .box1 .resume .resume_over_btn_R img{ display: block; margin:11px auto 0;}
#Story .box1 .resume .resume_over{ height:300px; overflow: hidden; position: relative; width: 989px; margin-left: 71px; padding-top: 87px; }
#Story .box1 .resume .resume_over ul{ height: 100%; width: 20000px;}
#Story .box1 .resume .resume_over ul li{ float: left; width: 1px; height: 20px; background: #8b91b4; position: relative; margin-left: 143px;}
#Story .box1 .resume .resume_over ul li .year{ width: 210px; text-align: center; height: 30px; line-height: 30px; left: 50%; margin-left: -105px;position: absolute; font-size: 24px; font-family: "Arial"; color:#223286;}
#Story .box1 .resume .resume_over ul li .title{ width: 210px; height:52px; font-size: 12px; color: #223286; line-height: 24px; position: absolute; left: 50%; margin-left: -105px; text-align: center;}
#Story .box1 .resume .line_lan{ height: 1px; width: 100%; background: #223286;position: absolute; left: 0; top: 50%;}
#Story .box1 .resume .resume_over ul li .round{ height: 15px; width: 15px; border-radius: 50%; background: #97a1d3;position: absolute; left: 50%; margin-left: -7.5px;}
#Story .box1 .resume .resume_over ul li .round:after{ height: 7px; width: 7px; border-radius: 50%; background: #223286; content: ''; left: 50%; margin-left: -3.5px; top: 50%; margin-top:-3.5px; position: absolute;}
#Story .box1 .resume .resume_over ul li .more{ width:85px; height: 20px; line-height: 20px; color: #223286; border-radius: 10px; border: 1px solid #223286; text-align: center; position: absolute; left: 50%; margin-left: -42.5px; cursor: pointer;}
#Story .box1 .resume .resume_over ul li .ycwz{ display: none;}
#Story .box1 .resume2{ height:486px; display: none; width: 100%; position: relative;}
#Story .box1 .resume2 .resume2_btn_T{ height: 46px; width: 46px; border-radius: 50%; background:#223286; border: 2px solid #ffb533; position: absolute; top: 0; left: 0; cursor: pointer; color: #f5f0e2; line-height: 46px; text-align: center; font-size: 14px;}
#Story .box1 .resume2 .resume2_btn_B{ height: 36px; width: 36px;border-radius: 50%; background:#223286; border: 2px solid #ffb533; position: absolute; bottom: 0; left: 5px; cursor: pointer;text-align: center; line-height: 36px;}
#Story .box1 .resume2 .resume2_btn_B img{ display: inline-block; }
#Story .box1 .resume2 .resume2_over{ position: relative; height: 400px; position: absolute; top: 48px; width: 100%; overflow: hidden;}
#Story .box1 .resume2 .line_s{ width: 1px; height: 100%; background:#223286 ; position: absolute;left: 25px;}
#Story .box1 .resume2 .resume2_over ul{ height: 20000px; width: 100%;}
#Story .box1 .resume2 .resume2_over ul li{width: 77%;float: right; position: relative; margin-bottom: 25px;}
#Story .box1 .resume2 .resume2_over ul li:after{ width:11%; height: 1px; background:#97a1d3; position: absolute; content: '';top: 17px;left: -20%;}
#Story .box1 .resume2 .resume2_over ul li .year{ width: 210px; height: 30px; line-height: 30px; font-size: 24px; font-family: "Arial"; color:#223286;}
#Story .box1 .resume2 .resume2_over ul li .title{ width: 210px; height:auto; font-size: 12px; color: #223286; line-height: 24px; }
#Story .box1 .resume2 .resume2_over ul li .round{ height: 15px; width: 15px; border-radius: 50%; background: #97a1d3;position: absolute; left: -11%;top: 11px;}
#Story .box1 .resume2 .resume2_over ul li .round:after{ height: 7px; width: 7px; border-radius: 50%; background: #223286; content: ''; left: 50%; margin-left: -3.5px; top: 50%; margin-top:-3.5px; position: absolute; z-index: 10;}
#Story .box2{ background: url(/skin/huiben/img/story_box2bg.jpg); height: 406px; width: 100%; padding-top: 42px;}
#Story .box2 .container1100{ height: 100%;}
#Story .box2 .text_story2{ width: 190px; height: 55px; margin: 0 auto;}
#Story .box2 .tuAndw{ height: 260px; overflow: hidden; margin-top: 35px;}
#Story .box2 .tuAndw .tu_l{ width: 457px; height: 260px; float: left; position: relative;}
#Story .box2 .tuAndw .tu_l ul li{width: 457px; height: 260px; position: absolute; left: 0; top:0; display: none;}
#Story .box2 .tuAndw .tu_l ul li img{ display: block;}
#Story .box2 .tuAndw .wenz{ width: 605px; height: 260px; float: right;}
#Story .box2 .tuAndw .wenz .title{ margin-top: 30px;}
#Story .box2 .tuAndw .wenz p{ font-size: 14px; line-height: 28px;}
#Story .box2 .tuAndw .tu_l_min{ margin-top: 23px;}
#Story .box2 .tuAndw .tu_l_min ol{ overflow: hidden;}
#Story .box2 .tuAndw .tu_l_min ol li{ float: left; width: 102px; height: 58px; margin-right: 25px; position: relative; cursor: pointer;}
#Story .box2 .tuAndw .tu_l_min ol li:after{position: absolute;content:'';  width:96px; height:50px; left: 0px; top:0px;}
#Story .box2 .tuAndw .tu_l_min ol li:hover:after{border: 4px solid #ffae00 !important;}
#Story .box2 .tuAndw .tu_l_min ol li.addTuAndW:after{border: 4px solid #ffae00 !important;}
#Story .box2 .tuAndw .tu_l_min ol li img{ width: 100%; height: 100%; display: block;}

#Story .box3{ height: 788px; width:1920px; background: url(/skin/huiben/img/Idea.jpg) no-repeat center; left: 50%; margin-left: -960px; position: relative;}
#Story .box3 .title{ height: 60px; background: rgba(255,255,255,.6);position:absolute; width: 100%; text-align: center; top: 0;}
#Story .box3 .title img{display:inline-block; margin-top: 20px; width: 80%; max-width: 318px;}
#Story .box3 .container1100{ height: 100%;}
#Story .box3 .text_idea{ width: 212px; height: 55px; position: absolute; left: 50%; margin-left: -106px; top: 137px;}
#Story .box3 .thought{ position:absolute; top: 250px;}
#Story .box3 .thought ul{ overflow: hidden;}
#Story .box3 .thought ul li{ width: 194px; float: left; margin-left: 64px;}
#Story .box3 .thought ul li .round{ height:121px; width: 121px; border-radius: 50%; margin: 0 auto; color: #f5f0e2; font-size: 24px; font-family: "黑体"; line-height: 121px; text-align: center;}
#Story .box3 .thought ul li .round.gree{ background:rgba(69,163,0,.3); border: 7px solid #45a300;}
#Story .box3 .thought ul li .round.yello{ background:rgba(255,174,0,.3); border: 7px solid #ffae00;}
#Story .box3 .thought ul li .round.red{ background:rgba(205,39,0,.3); border: 7px solid #cd2700;}
#Story .box3 .thought ul li .round.zi{ background:rgba(169,3,194,.3); border: 7px solid #a903c2;}
#Story .box3 .thought ul li .summary{ padding: 30px 20px; border-radius: 15px; margin-top: 49px; position: relative;transform: translateY(-50px); -webkit-transform: translateY(-50px); opacity: 0; transition-duration: .8s; -webkit-transition-duration: .8s;}
#Story .box3 .thought ul li .summary.gree{ background:#45a300; color: #f5f0e2; }
#Story .box3 .thought ul li.cur .summary{ transform: translateY(0px); -webkit-transform: translateY(0px); opacity: 1;}
#Story .box3 .thought ul li:hover .summary{ transform: translateY(0px); -webkit-transform: translateY(0px); opacity: 1;}
#Story .box3 .thought ul li .summary.yello{ background:#ffae00; color: #f5f0e2;}
#Story .box3 .thought ul li .summary.red{ background:#cd2700; color: #f5f0e2;}
#Story .box3 .thought ul li .summary.zi{ background:#a903c2; color: #f5f0e2;}
#Story .box3 .thought ul li .summary p{ color: #f5f0e2;opacity:.7;filter:alpha(opacity=70)}
#Story .box3 .thought ul li .summary .title_in{ font-size: 18px; margin-bottom: 15px;}
#Story .box3 .thought ul li .summary.gree:after{ position: absolute; content: ''; width: 0;height: 0;border-left:12px solid transparent;border-bottom: 12px solid #45a300;border-right: 12px solid transparent; top:-12px; margin-left: -12px; left: 50%;}
#Story .box3 .thought ul li .summary.yello:after{ position: absolute; content: ''; width: 0;height: 0;border-left:12px solid transparent;border-bottom: 12px solid #ffae00;border-right: 12px solid transparent; top:-12px; margin-left: -12px; left: 50%;}
#Story .box3 .thought ul li .summary.red:after{ position: absolute; content: ''; width: 0;height: 0;border-left:12px solid transparent;border-bottom: 12px solid #cd2700;border-right: 12px solid transparent; top:-12px; margin-left: -12px; left: 50%;}
#Story .box3 .thought ul li .summary.zi:after{ position: absolute; content: ''; width: 0;height: 0;border-left:12px solid transparent;border-bottom: 12px solid #a903c2;border-right: 12px solid transparent; top:-12px; margin-left: -12px; left: 50%;}
#Story .box4{ background: #f5f0e2; padding: 67px 0 50px;}
#Story .box4 .text_choose{ width: 396px; height: 112px; margin: 0 auto;}
#Story .box4 .cImg{ font-size: 0px; margin-top: 24px;}
#Story .box4 .sever{ height: 140px; width: 100%; background: #fff; position: relative; margin-top: 43px;}
#Story .box4 .sever:after{ width: 100%; background: url(/skin/huiben/img/bg_kao_t.png); height: 9px; content: ''; position: absolute; left: 0; top: 0; z-index: 4;}
#Story .box4 .sever:before{ width: 100%; background: url(/skin/huiben/img/bg_kao_b.png); height: 9px; content: ''; position: absolute; left: 0; bottom: 0; z-index: 5;}
#Story .box4 .sever ul{ width: 1100px; margin: 0 auto; height: 100%; position: relative; text-align: center;}
#Story .box4 .sever ul li{display: inline-block; width: 193px; height: 100%; margin: 0 10px; cursor: pointer;transition:all .5s;-webkit-transition:all .5s;}
#Story .box4 .sever ul li .min_pic{ width: 43px; height: 42px; margin: 28px auto 0;transition:cubic-bezier(1,-0.76,.14,1.93) .5s;-webkit-transition:cubic-bezier(1,-0.76,.14,1.93) .5s;}
#Story .box4 .sever ul li .min_pic.choose1{ background: url(/skin/huiben/img/min_choose_pic1.png) 0 0;}
#Story .box4 .sever ul li .min_pic.choose2{ background: url(/skin/huiben/img/min_choose_pic2.png) 0 0;}
#Story .box4 .sever ul li .min_pic.choose3{ background: url(/skin/huiben/img/min_choose_pic3.png) 0 0;}
#Story .box4 .sever ul li .min_pic.choose4{ background: url(/skin/huiben/img/min_choose_pic4.png) 0 0;}
#Story .box4 .sever ul li .min_pic.choose5{ background: url(/skin/huiben/img/min_choose_pic5.png) 0 0;}
#Story .box4 .sever ul li .Explain{ text-align: center; color: #003783; font-size: 14px; margin-top: 27px;transition:all .5s;-webkit-transition:all .5s;}
#Story .box4 .sever ul li:hover{ background:#d75938;}
#Story .box4 .sever ul li:hover .min_pic.choose1{ background: url(/skin/huiben/img/min_choose_pic1.png) 0 -42px;}
#Story .box4 .sever ul li:hover .min_pic.choose2{ background: url(/skin/huiben/img/min_choose_pic2.png) 0 -42px;}
#Story .box4 .sever ul li:hover .min_pic.choose3{ background: url(/skin/huiben/img/min_choose_pic3.png) 0 -42px;}
#Story .box4 .sever ul li:hover .min_pic.choose4{ background: url(/skin/huiben/img/min_choose_pic4.png) 0 -42px;}
#Story .box4 .sever ul li:hover .min_pic.choose5{ background: url(/skin/huiben/img/min_choose_pic5.png) 0 -42px;}
#Story .box4 .sever ul li:hover .Explain{ color: #fff;}
#Story .box4 .sever ul li.addhover{background:#d75938;}
#Story .box4 .sever ul li.addhover .min_pic.choose1{ background: url(/skin/huiben/img/min_choose_pic1.png) 0 -42px;}
#Story .box4 .sever ul li.addhover .min_pic.choose2{ background: url(/skin/huiben/img/min_choose_pic2.png) 0 -42px;}
#Story .box4 .sever ul li.addhover .min_pic.choose3{ background: url(/skin/huiben/img/min_choose_pic3.png) 0 -42px;}
#Story .box4 .sever ul li.addhover .min_pic.choose4{ background: url(/skin/huiben/img/min_choose_pic4.png) 0 -42px;}
#Story .box4 .sever ul li.addhover .min_pic.choose5{ background: url(/skin/huiben/img/min_choose_pic5.png) 0 -42px;}
#Story .box4 .sever ul li.addhover .Explain{ color: #fff;}

#Story .box4 .text_yljy{ width: 980px; text-align: center; height: 24px; line-height: 24px; margin: 47px auto 0; position: relative; font-size: 20px; color: #d75938; display: none;}
#Story .box4 .text_yljy:after{ background: #ecc2af; content: '' ; position: absolute; left: 0px; width: 350px; top: 50%; height: 1px;}
#Story .box4 .text_yljy:before{ background: #ecc2af; content: '' ; position: absolute; right: 0px;width: 350px; top: 50%; height: 1px;}
#Story .box4 .environment{ width: 980px; margin:42px auto 0; position:relative;/**/ height: 171px;}
#Story .box4 .environment ul{ overflow: hidden; display: none;/**/ position: absolute; top: 0;}
#Story .box4 .environment ul li{ float:left; width:322px; height: 171px; overflow: hidden; margin-left: 7px;}
#Story .box4 .environment ul li img{ display: block;}
#Story .box4 .bg_b{ background: url(/skin/huiben/img/bl_dls2.png); height: 11px; position: absolute; bottom:-10px; left: 0; width: 100%;}
.h_list>li{ display: none;}


#Story .phWhy{ font-size: 0px; width: 100%; height: auto; display: none;}
#Story .phWhy .tit{ width: 70%; max-width: 435px; font-size: 0px;margin: auto; margin-bottom: 4%; margin-top: 8%;}
#Story .phWhy li{ width: 100%; height: auto;}
#Story .phWhy li a{ display: block; width: 100%; height: auto; position: relative; background-color: #000000;}
#Story .phWhy .iconTit{ position: absolute; width: 70%; left: 15%; top: 50%; }
#Story .phWhy li a>img{ opacity: .5;}

#new{ width: 100%; height: auto; overflow: hidden; background-color: #fff8e8; padding-top: 40px;}
#new .box{ width: 950px; margin: auto; padding-top: 80px; padding-bottom: 20px; background-color: #FFFFFF; min-height: 400px; position: relative;}
#new .title{ text-align: center;  font-size: 24px; color: #223287;}
#new .info{ width: 100%; text-align: center; color: #a9a7a4; font-size: 12px; margin-bottom: 30px;}
#new .text{ padding: 0 40px; text-indent: 20px;}  
#new .text img{ display: block; margin: auto;}
#new .box .bc{ width: 27px; background: url(/skin/huiben/img/NewBack.jpg); height: 92px; transition-duration: .5s; -webkit-transition-duration: .5s; position: absolute; right: -27px; top: 0; display: block;}
#new .box .bc:hover{ background-position: 0 -5px;}
#new .bg{ width: 100%; height: 11px; background: url(/skin/huiben/img/bl_dls2.png); position: relative; z-index: 10; }
.alr{ width: 284px; height: 181px; position: fixed; top: 50%; margin-top: -90px; left: 50%; margin-left: -142px; display: none; z-index: 100000;}
.alr .text{ width: 100%; height: auto; position: absolute; top: 96px; font-size: 12px; left: 0; text-align: center;}
.alr .tc{ width: 95px; height: 30px; position: absolute; top: 132px; left: 96px; cursor: pointer;}
.alr1{ background: url(/skin/huiben/img/TJ1.png) no-repeat;}
.alr1 .text{ color: #394f2e;}
.alr2{ background: url(/skin/huiben/img/TJ2.png) no-repeat;}
.alr2 .text{ color: #db1616;}
.alr3{ background: url(/skin/huiben/img/TJ3.png) no-repeat;}
.alr3 .text{ color: #db1616;}
.bga{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index:99999 ; display:none ;}
.backTop{ background: url(/skin/huiben/img/backTop.png); width: 67px; height: 88px; position: fixed; z-index: 9999; right: 5%; bottom: 5%; transform: translateY(20px); -webkit-transform: translateY(20px); transition-duration: .5s; -webkit-transition-duration: .5s; opacity: 0; cursor: pointer;}
.backTop.cur{transform: translateY(0px); -webkit-transform: translateY(0px); opacity: 1; }

.pxkc{ width: 100%; height: auto; position: relative; background-color: #ffeebf; margin-top: -10px;z-index: 10;}
.pxkc .girl{ background: url(/skin/huiben/img/girl.png) no-repeat; width: 142px; height: 184px; position: absolute; right: 2%; bottom: 70px; z-index: 5;}
.pxkc .bgbt_L{ background: url(/skin/huiben/img/bgbt_L.png) no-repeat; width: 607px; height:175px; position: absolute; bottom:0px; left:-1%;}
.pxkc .cloud_R{ background: url(/skin/huiben/img/cloud_r.png) no-repeat; width: 1141px; height:319px; position: absolute; bottom:0px; right:-10%;}
.pxkc .bg_B{ height: 11px; width: 100%;position: absolute; background: url(/skin/huiben/img/bl_dls2.png) 0 -11px;bottom: -11px; }
.pxkc .contBox{ width: 1100px; height: auto; padding-top: 70px; padding-bottom: 45px; margin: auto;}
.pxkc .contBox .title{ width:90%; max-width: 205px; margin: auto; height: auto; font-size: 0px; }
.pxkc .contBox .list{ margin-top: 60px; width: 100%; height: auto; overflow: hidden;}
.pxkc .contBox .list .page{ width: 100%; height: 100%; overflow: hidden; display: none; }
.pxkc .contBox .list .page:first-child{ display: block;}
.pxkc .contBox .list .item{ width: 32%; float: left; height:500px; margin-bottom: 50px; }
.pxkc .contBox .list .item:nth-child(3n-1){ margin: 0 2% 50px;}
.pxkc .contBox .list .imgs{ width: 100%; height: auto; border-radius: 10px; overflow: hidden; font-size: 0px;}
.pxkc .contBox .list .textBox{ width:96%; margin: auto; height: 140px; margin-top: 10px; overflow: hidden;position: relative;}
.pxkc .contBox .list .tit{ width: 100%; height: auto;font-size: 16px; color: #0f76c4; margin-bottom: 10px;}
.pxkc .contBox .list .texts{ width: 100%; height: auto; font-size: 14px; color: #727475; line-height: 22px;transition-duration: .5s; -webkit-transition-duration: .5s; overflow: hidden;}
.pxkc .contBox .list .more{ background: url(/skin/huiben/img/contMore.png) no-repeat; transition-duration: .5s; -webkit-transition-duration: .5s; width: 105px; height: 21px; position: absolute; bottom: 0px; left: 0px;}
.pxkc .contBox .list .item:hover .texts{ color: #000000; transform: translateY(-5px); -webkit-transform: translateY(-5px); }
.pxkc .contBox .list .item:hover .more{ transform: translateY(-10px); -webkit-transform: translateY(-10px);}
.pxkc .contBox .pageBtn{ width: 100%; height:26px; text-align: center; overflow: hidden; position: relative;}
.pxkc .contBox .pageBtn li{ width: 8px; height: 8px; position: relative; top: -5px; display: inline-block; text-align: center; margin-right: 24px; border-radius:50%; background-color: #7880ae;transition-duration: .5s; -webkit- transition-duration: .5s; cursor: pointer;}
.pxkc .contBox .pageBtn li:last-child{ margin-right: 0px;}
.pxkc .contBox .pageBtn li:after{content: ""; position: absolute; width: 14px; height: 14px; box-sizing: border-box; -webkit-box-sizing: border-box; border:1px solid #223286; border-radius: 50%; top: 50%; margin-top: -7px; left: 50%; margin-left: -7px; transform: scale(0); -webkit-transform: scale(0); transition-duration: .5s; -webkit- transition-duration: .5s;}
.pxkc .contBox .pageBtn li.cur{  background-color: #223286;}
.pxkc .contBox .pageBtn li.cur:after{ transform: scale(1); -webkit-transform: scale(1);}
.pxkc .contBox .pageBtn li:hover:after{ transform: scale(1); -webkit-transform: scale(1);}
.pxkc .contBox .pageBtn li:hover{ background-color: #223286;}
/*2016-3-16*/
#index .news .register{ width: 96%;margin: 26px auto 0; overflow: hidden;}
#index .news .register .left{ float: left; width: 182px;}
#index .news .register .left img{ height: 100%; display: block;}
#index .news .register .Center{ float: left;width: 442px; background: #69bde9; height: 114px; margin: 20px 6px 0; border-radius: 25px; padding: 18px 25px; overflow: hidden;}
#index .news .register .Center .Center_text{ float: left;}
#index .news .register .Center .Center_phone{ float: left; margin-left: 33px; color: #fff; font-size: 18px; line-height: 30px;}



#index .news .register .right{ float: left; width: 370px;margin-top: 20px;}
#index .news .register .right ul{ float: left;}
#index .news .register .right ul li{ width: 314px; height: 44px; background: #ffe100; border-radius: 15px; line-height: 44px;text-indent: 20px;position: relative;}
#index .news .register .right ul li .input{ background:#ffe100; height: 44px; margin-left: 13px; position:relative;}
#index .news .register .right ul li .input:after{position: absolute; height: 14px; width: 1px; background: #76716d; top: 50%; margin-top: -7px; left: 0;}
#index .news .register .right ul li.CenterC{ margin:9px auto;}
#index .news .register .right .registerFree{ width: 48px; height: 146px; background:url(/skin/huiben/img/registerFree.png); font-size: 16px;text-align: center; color: #fff; line-height: 18px; border-radius: 10px;float: right; cursor: pointer;}
.onShow {  vertical-align: middle; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; -ms-transition-duration: 0.5s; }
.onFocus { vertical-align: middle; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; -ms-transition-duration: 0.5s; }
.onError { vertical-align: middle; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; -ms-transition-duration: 0.5s; background:url(/skin/huiben/img/but_off.png);}
.onCorrect { vertical-align: middle; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; -ms-transition-duration: 0.5s; background:url(/skin/huiben/img/but_no.png)}
.onLoad { vertical-align: middle; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; -ms-transition-duration: 0.5s; }
#kongTip,#phoneTip,#yyNumberTip,#yymz2Tip{width:20px;height:20px;float: left;font-size: 12px;opacity: 0.8; position:absolute;bottom:11px;right: 10px;line-height:46px; z-index:1; overflow:hidden; text-indent:100%}


.radio-btn { width: 20px; height: 20px; display: inline-block; margin: 3px 7px 0 0; cursor: pointer; position: relative; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 1px solid #ccc; box-shadow: 0 0 1px #ccc; background: rgb(255, 255, 255); background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1))); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%); background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%); background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0); top: 6px;}
.checkedRadio { -moz-box-shadow: inset 0 0 5px 1px #ccc; -webkit-box-shadow: inset 0 0 5px 1px #ccc; box-shadow: inset 0 0 5px 1px #ccc; }
.radio-btn i { border: 1px solid #E1E2E4; width: 10px; height: 10px; position: absolute; left: 4px; top: 4px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; }
.checkedRadio i { background-color: #ff6b09; }
.radio-btn input{display: none; }
.registerFree2{display: none;}

.phone_banners{display: none;}
.phone_Parenting{display: none;}
#service #banner img{display: block;}









/*2016-04-13*/
.newService{ width: 100%; height: 40px; padding: 50px 0px; border-bottom: 4px solid #0093de; background: #f5f0e2;}
.newService .newSerivceTitle{ width: 422px; height: 40px; margin: auto;}
.newService .newSerivceTitle img{ width: 100%;}
.newServiceFull{ width: 100%; height: auto; background: #ffc938; padding: 25px 0px;}
.newServiceBox{ max-width: 1000px; height: auto; margin: auto;}
.newServiceTitle{ width: 100%; height: auto; line-height: 28px; text-align: center; color: #4b4b4b; margin-bottom: 50px;}
.newServiceTitle2{ width: 100%; height: auto;  border-bottom: 1px solid #e5b532; padding: 10px 0px;}
.newServiceTitle2 img{ width: 360px; margin: auto; display: block;}
.newServiceTitle2.t2{ border-bottom: none;}
.newServiceTitle2.t2 img{ width: 300px;}
.newServiceList{ width: 100%; height: auto; overflow: hidden;}
.newServiceList ul { margin-top: 35px;}
.newServiceList ul li{ width: 180px; height: 220px; float: left; margin-right: 25px; position: relative;}
.newServiceList ul li .newServiceThum{ width: 120px; height: 120px; margin: auto;}
.newServiceList ul li .newServiceName{ width: 100%; height: auto; line-height: 24px; margin-top: 20px; text-align: center; color: #d73f03; font-weight: bold;}
.newServiceList ul li .newServiceDes{ width: 100%; height: auto; line-height: 20px; color: #54490a; text-align: center; font-size: 12px;}
.newServiceList ul li span{ display: block; width: 1px; height: 30px; position: absolute; right: -15px; background: #cca12d; top: 50px;}
.newServiceList ul li.five{ margin-right: 0px;}
.newServiceContent{ width: 100%; height: auto; background: url(/skin/huiben/img/bg2.jpg) center top no-repeat; padding: 100px 0px; background-size: cover;}
.newServiceContentBox{ max-width: 1000px; height: auto; margin: auto;}
.newServiceContentBox img{ width: 100%; height: 100%;}

.fullWidth{width: 100%; height: auto; position: relative; z-index: 10; background: #0093de; padding: 35px 0px;}
.fullWidthTop{ width: 100%; height: 10px; background: url(/skin/huiben/img/borderTop.png) repeat-x; top: -10px; position: absolute;}
.fullWidthBottom{ width: 100%; height: 10px; background: url(/skin/huiben/img/borderBottom.png) repeat-x; position: absolute; bottom: -10px;}
.lists{ width: 840px; height: auto; margin: auto; overflow: hidden; margin-top: 25px;}
.lists li{ width: 190px; height: 120px; float: left; border: 3px solid #00c2ee; border-radius: 30px; overflow: hidden; margin-right: 15px; margin-bottom: 15px;}
.lists li.four{ margin-right: 0px;}
.ht{ width: 238px; height: 200px; position: absolute; bottom: 0px; left: 50%; margin-left: 450px;}


@keyframes zhuan{
    to{transform: rotate(360deg);}
}

@-webkit-keyframes zhuan{
    to{-webkit-transform: rotate(360deg);}
}
@media only screen and (max-width:1440px ) {
	.mf{ right: 1%;}
	.backTop{right: 2%;}
	#index .content .bg1{ right: 4%;}
	.pxkc .girl{ display: none;}
}
@media only screen and (max-width:1000px ) {
	.newServiceTitle{ width: 94%; padding: 0px 3%; margin-bottom: 25px;}
	.newServiceList ul li{ margin-right: 0px; width: 150px;}
	.newServiceList ul{ max-width: 768px; margin: auto; margin-top: 35px;}
	.newServiceContent{ padding: 50px 0px;}
	.lists{ max-width: 430px;}
	.newServiceList ul li span{ display: none;}
	
	.iconList{ display: none;}
	#Story .iconList{ display: none;}
	#Story .box4 .text_yljy{ width: 100%;}
	#Story .box4 .text_yljy:before{ width: 30%;}
	#Story .box4 .text_yljy:after{ width: 30%;}
	header .nav{ display: block;}
	header nav,header .wx,header .phone,header .logo,header .bg,#team .cont .box .btns,#team .cont .box .imgList li .more,#team .cont .box .imgList li.hide,#team .cont .bg,#team .cont .box2 .imgList .imgs.hide,.pgy,#space>.bg,#index .news .newsBox .btns,#index .activity .bg4{ display: none;}
	header .logo2{ display: block; width: 50px; height: auto; top: 7px;}
	header .yun1{width:20px; height: 15px; background-size: 100%; background-repeat: no-repeat; left: 40%; bottom: 10px; top: auto;}
	header .yun2{ width: 50px; height: 30px; left: 50%;background-size: 100%; background-repeat: no-repeat; bottom: 0;}
	header .container1100{ width: 100%;}
	header{ height: 60px; border-width: 5px;}
    .container1100{ width: 96%;}
    #team .cont .box2 .imgList .imgs{ border: none; margin-bottom: 2%;}
    #service .hosting .hostingList{ height: auto; overflow: hidden; padding-bottom: 0px;}
    #service .hosting{ background-color: #adeffe; background-image: none;  }
    #banner { height: 120px;}
    #banner img{ height: 100%; width: auto;}
    #team .cont .box1,#team .cont .box2{background: url(/skin/huiben/img/pageBg.png); background-size: 100% 100%; height: auto;}
   	#team .cont .box .imgList{ width: 100%; overflow: hidden;}
    #team .cont .box .imgList li{ width: 48%; margin-right: 4%; border: none; margin-bottom: 2%; }
    #team .cont .box2 .imgList .imgs{ width: 100%;}
    #team .cont{ padding-top: 20px; padding-bottom: 10px;}
    #team .cont .box .imgList li .text{ height: 30px;}
    #team .cont .box .imgBox{ height: auto; width: 96%; margin: auto; padding-bottom: 40px;}
    #team .cont .box .tit{ margin-left: 2%; margin-bottom: 15px;}
    #team .cont .box .imgList li:nth-child(2n){ margin-right: 0;}
    #team .cont .box .imgList li.cur,#team .cont .box2 .imgList .imgs.cur{ background-color: transparent; border: none;}
    #team .cont .box2 .imgList li{ height: auto;}
    #team .cont .box .imgList li.cur .text,#team .cont .box2 .imgList .imgs.cur .text{ color: #000000; font-size: 12px;}
    #team .btnList{ display: block;}
    #space .spaceBox .container1100{ width: 100%;}
    #space .spaceList2 a{ font-size: 12px;}
    #space .spaceList2 .icon{background-size: auto 34px;width: 54px; height: 54px; margin-top: 15px; margin-bottom: 5px;}
    #space .spaceList2 li.cur .bg,#space .spaceList2 li:hover .bg{ height: 110px; background-size: auto 100%;}
    
    #space .leture{ padding-top: 20px;}
    #space .leture .title{ margin-bottom: 10px;}
	#space .spaceList2 .icon1{ background-position: 19px center;}
	#space .spaceList2 .icon2{ background-position: -35px center;}
	#space .spaceList2 .icon3{ background-position: -89px center;}
	#space .spaceList2 .icon4{ background-position: -144px center;}
	#space .spaceList2 .icon5{ background-position: -200px center;}
	#space .spaceList2 li.cur .icon1{ background-position: 19px center;}
	#space .spaceList2 li.cur .icon2{ background-position: -69px center;}
	#space .spaceList2 li.cur .icon3{ background-position: -151px center;}
	#space .spaceList2 li.cur .icon4{ background-position: -235px center;}
	#space .spaceList2 li:hover .icon5{ background-position: -318px center;}
	#space .spaceList2 li:hover .icon1{ background-position: 19px center;}
	#space .spaceList2 li:hover .icon2{ background-position: -69px center;}
	#space .spaceList2 li:hover .icon3{ background-position: -151px center;}
	#space .spaceList2 li:hover .icon4{ background-position: -235px center;}
	#space .spaceList2 li:hover .icon5{ background-position: -318px center;}
	#space .spaceBox,#space .spaceList2{ height: 100px;}
	#space .leture .imgList li{ width: 48% ; margin-right: 4%;}
	#space .leture .imgList{ margin-top: 20px;}
	#space .leture .imgList li:nth-child(2){ margin-right: 0;}
	#space .leture .imgList li:last-child{ display: none;}
	#space .box .list .text,#space .box .list li:nth-child(2n) .text{ width: 90%; float: none; margin: auto; border-radius:0; padding-top: 10px; padding-bottom: 3%; border-radius: 0 0 10px 10px;}
	#space .box .list .img,#space .box .list li:nth-child(2n) .img{ width: 100%; float: none; margin: auto; border-radius:10px 10px 0 0;}
	#space .box .list li,#space .box .list li:nth-child(2n){ width: 90%; margin: auto; border-radius: 10px; margin-bottom: 10%;}
	#space .box .list li:nth-child(2n) .number{ left: -22px; right: auto;}
	#space .box .list .tit{ margin-bottom: 5px;}
	#space,#space .box{ padding-bottom: 20px;}
	#space .box .list .img>img{ width: 100%;}
	#index .banner .bannerList li img{ width: auto  !important; height: 200px; position: absolute; left: 50%;}
	#index .banner .btnList{ width: 40%; left: auto; margin-left: 0; right: 10%; bottom: -5px;}
	#index .banner .btnList li{ width: 32% !important;}
	#index .banner .btnList li.cur .hide{ height: 22px;}
	#index .banner .btnList li.cur .hide img{ height: 100%;}
	#index .banner .btnList li.cur{ height: 35px; line-height: 60px;}
	#index .news .newsBox,#index .news .newsBox .newList li{ height: 32px; line-height: 32px; background-color: #ffefca; overflow: hidden;}
	#index .news .newsBox .left{ width: 35%;background: none;}
	#index .news .newsBox .newList{ width:63%; margin-left: 0px; margin-right: 2%;}
	#index .news .newsBox .newList li{ text-indent: 5px;}
    #index .news .newsBox .left .hide{ font-size: 12px; background: #223286; color: #ffd200; text-transform: uppercase; text-indent: 15px; display: block;}
    #index .news .newsBox .left .hide span{ font-family: arial; color: #FFFFFF; opacity: .3;}
    #index .news .newsBox .left .hide:after{ width: 0px; height: 0px; position: absolute; border-color: transparent #ffd200 transparent transparent; border-style: solid; border-width: 5px; content: ""; left:2px; top: 50%; margin-top: -5px;  } 
    #index .banner .btns{ display: none;}
    #index .environment{ padding-top: 20px; padding-bottom: 15px;}
    #index .environment .title{ margin-bottom: 20px;}
   .ht{ display: none;} 
    /**ly↓**/
   #childCourse .box2 .ladder ul{ margin-left: 37px;}
   
}
@media (max-width:1024px ) and (min-width:641px ){
.banner{display: none;}
.phone_banners{display:block;}
.swiper-slide{ overflow: hidden;}
.swiper-slide img{ width:1024px; position: relative; left: 50%; margin-left:-512px;display: block;}
.phone_Parenting{display: block; overflow: hidden; border-radius: 15px; border: 4px solid #7da92d;}
.Parenting_pic{ display: none;}
#index .KnowHow .container1100{ width: 100%;}
#index .KnowHow article{ width: 86%;float: none; margin: 0 auto;}
#index .KnowHow .wem{float: none; margin: 15px auto; width: 100%;text-align: center;}
#service .service_title{ height: auto;}
#service .service_title ul{ width: 96%; margin: 0 auto;text-align: center;}
#service .service_title ul li{display: inline-block;float:none;margin: 25px 10% !important;}
#service .service_title{ padding: 25px 0;}
#service .pxkcInformation .seviceInformation{ width: 80%;}
#service .pxkcInformation .seviceInformation .pic{ float: none; margin: 15px auto;text-align: center;}

#service .pxkcInformation .seviceInformation .summary{ width: 100%;}
#service .pxkcInformation .girl,#service .pxkcInformation .cloud_R{display: none;}
}
@media screen and (max-width:640px ){
	.registerFree2{display: block; width: 100%; height: 48px; background:#f8a900; color: #fff;text-align: center; line-height: 48px; border-radius: 21px;margin-top: 25px;}
	#service .pxkcInformation .girl,#service .pxkcInformation .cloud_R{display: none;}
	#service .pxkcInformation .seviceInformation{ width: 80%;padding: 25px 5%;}
	#service .pxkcInformation .title img{ width: 137px;}
#service .pxkcInformation .seviceInformation .pic{ float: none; margin: 15px auto;text-align: center; width: 100%; height: auto;}
#service .pxkcInformation .seviceInformation .pic img{ width: 100%;}
#service .pxkcInformation .seviceInformation .summary{ width: 100%;}
#service .pxkcInformation .seviceInformation .summary img{ width: 100%;}
#service .pxkcInformation{ padding: 50px 0;}
#service .pxkcInformation .seviceInformation .summary .moresINfor{ margin-top: 50px;}
	.banner{display: none;}
	.phone_banners{display:block;}
	.swiper-slide{ overflow: hidden;}
	.swiper-slide img{ width:600px; position: relative; left: 50%; margin-left:-300px; display: block;}
	#index .news .register .left{display: none;}
	#index .news .register .Center{ margin: auto; padding: 18px 2%; width: 96%; height: auto;}
	#index .news .register .Center .Center_text{display: none;}
	#index .news .register .Center .Center_phone{ margin-left: 0;}
	#index .news .register .right{ width: 100%;}
	#index .news .register .right ul{float: none; width: 100%;}
	#index .news .register .right ul li{ width: 100%;}
	#index .news{ padding-bottom: 25px;}
	#index .news .register .right .registerFree{display: none;}
	.phone_Parenting{display: block;}
	.Parenting_pic{ display: none;}
	.phone_Parenting{display: block; overflow: hidden; border-radius: 15px; border: 4px solid #7da92d;}
	#index .KnowHow .container1100{ width: 100%;}
	#index .KnowHow article{ width: 86%;float: none; margin: 0 auto;}
	#index .KnowHow .wem{float: none; margin: 15px auto; width: 100%;text-align: center;}
	
	
	#space .cImg{ margin-top: 5%;}
	.pxkc .contBox .list .item{ width: 46%;}
	.pxkc .contBox .list .item:nth-child(3n-1){ margin:0px 0 10% ;}
	.pxkc .contBox .list .item:nth-child(2n){ margin-left: 4%;}
	.pxkc .contBox .list .item{ margin-bottom:10% ;}
	.pxkc .contBox .list .texts{ height: 85px;}
	.pxkc .contBox .list .textBox{ padding-bottom: 20px;}
	.pxkc .contBox .list .more{ position: ;}
	.pxkc .contBox{ width: 96%; padding-top: 30px;}
	.pxkc .contBox .list{ margin-top: 30px;}
	.mf{ width: 50px; height: 90px;}
	header.cur .yun1,header.cur .yun2{ display: block;}
	.bgg,.pxkc .girl,.pxkc .cloud_R,.pxkc .cloud_L,.pxkc .bg_B{display:none;}
	#index,#Story,#team,#service,#childCourse,#space,#contact{ padding-top: 65px;}
	#Story .phWhy{ display: block;}
	#childCourse .box1{ height: auto;}
	#childCourse .box1 .CourseList ul{ margin-bottom: 60px;}
	#contact .box .address span{ display: block; line-height: 20px;}
	#index .active .bigBox .btns{ display: none;}
	#index .active .bigBox{ height: auto;}
	#index .active .smallBox li{ width: 25%;}
	#index .content .bg1{ right: 0;}
	#index .appointment .inputBox .ins{ width: 100%; margin-right: 0;}
	#index .appointment .inputBox .ins .text{ width: 30%;}
	#index .appointment .inputBox .ins input[type='text']{ width: 60%;}
	.system .cont>img{display: block !important;}
	.system .container1100{ width: 100%;}
	#index .environment li .lable{ right: 4%; padding-top: 9%; font-size: 14px; width: 15px;}
	#index .environment li .border{ font-size: 14px; width: 15px;}
	#index .environment li:nth-child(4) .border{ left: 0;background-color: #333333;}
	#index .environment li:nth-child(3) .border{ left: 15px; background-color: #656565;}
	#index .environment li:nth-child(2) .border{ left: 30px; background-color: #999999;}
	#index .environment li:nth-child(1) .border{ left: 45px;}
    #index .environment .imgList{ width: 100%;}
    #index .environment li img{ height: auto !important;}
    .system .text{font-size: 12px; width: auto;}
    .system .text1{left: 3%; top: 7%;}
    .system .text2{left: 27%; top: -19%;}
    .system .text3{left: 56%; top: -8%;}
    .system .text4{right: 5%; top: 2%; left: auto;}
    .system .text5{ left: 0; top: 64%; width: 100%; text-align: center; }
    .system .text5 .ch{ font-size: 16px; }
    .system .title{ margin-bottom: 60px;}
	#index .environment .text>img{ width: 100%}
	#service .courses .coursesList li:last-child,#contact .bg,footer .container1100,#index .environment .pgy2,#index .environment .pgy3,#index .environment .text .texts>img,.system .cont>img.hide,.system .text .en,#index .appointment .bg4,#index .appointment .bg3,#index .content .title .border,#index .content .yun1,#index .content .yun2{ display: none !important;}
	#index .content .contList li,#index .content .contList li:nth-child(2),#index .content .contList li:nth-child(4){ float: none; margin: auto;}
	#index .content .contList .textBox{ margin-top: 20px; margin-bottom: 30px;}
	#index .content .bg1{ transform: scale(.8); -webkit-transform: scale(.8);}
	#index .content .bg2{ width: 90%; background-size: 100% auto; }
	#index .content .contList{ height: auto; width: 100%;}
	#index .appointment .inputBox .sub{width: 150px; height: 30px; line-height: 30px; margin-top: 0;}
	#index .environment .text .texts .hide{ display: block; width: 100%; text-indent: 20px; color: #2c2c2c;}
	#index .environment .text .texts{ margin-top: 0px;}
    .system .text5 .en,footer .hide{display: block !important; }
	footer{ width: 100%; height: auto; margin:0; padding: 10px 0;} 
	#service .hosting{ padding-bottom: 20px;}
    #service .hosting .hostingList li{ width: 100%; margin-bottom: 30px;}
    #service .hosting .hostingList .tit{ margin: 5px 0;}
    #service .hosting .hostingList .imgBox{ height: auto;}
	#service .space{ height: auto; padding-bottom: 80px; margin-bottom: -10px; z-index: 0;}
	#service .courses  .title{ width: 80%; padding-top: 30px; height: auto; }
	#service .hosting .container1100>.title{ width: 70%; padding-top: 30px; height: auto;}
	#service .courses .text{ margin-top: 20px; text-align: left;}
	.spaceList{ height: 120px; margin-top: 15px;}
	#service .courses .coursesList li{ width: 48%; margin-right: 4%;}
	#service .courses .coursesList li:nth-child(2n){margin-right: 0;}
	#service .courses .coursesList{ margin-top: 20px;}
	.spaceList .hide{ display: none;}
	.spaceList li{ height: 100%;}
	#service .space .title{ padding-top: 30px;}
	#service .hosting .hostingList{ margin-top: 30px;}
	#service .space .container1100{ width: 100%;}
	.spaceList .bgBox{ width: 54px; height: 54px; margin-top: 27px;}
	.spaceList .bgBox .bg{ background-size: auto 34px; }
	.spaceList .bgBox .bg1{  transform: rotateY(0deg); -webkit-transform: rotateY(0deg); opacity: 1;}
	.spaceList .bgBox .bg2{ display: none;}
	.spaceList a:hover .bgBox{ transform: rotateY(0deg); -webkit-transform: rotateY(0deg);}
	.spaceList a:hover .tit1{ opacity: 1;}
	.spaceList .bgBox1 .bg1{ background-position: 19px center;}
	.spaceList .bgBox2 .bg1{ background-position: -35px center;}
	.spaceList .bgBox3 .bg1{ background-position: -89px center;}
	.spaceList .bgBox4 .bg1{ background-position: -144px center;}
	.spaceList .bgBox5 .bg1{ background-position: -200px center;}
	.spaceList .tit1{ font-size: 12px; margin-top: 5px;}
	.spaceList li.cur{  background-size:auto 100%;}
	.spaceList li.cur .bg1{ background-color: #FFFFFF }
	.spaceList li.cur .bgBox .bg{ background-image: url(/skin/huiben/img/spaceIcons2.png);}
	.spaceList li.cur .tit1{ color: #FFFFFF;}
	.spaceList li:nth-child(1).cur .bgBox1 .bg1{ background-position: 19px center;}
	.spaceList li:nth-child(2).cur .bgBox2 .bg1{ background-position: -69px center;}
	.spaceList li:nth-child(3).cur .bgBox3 .bg1{ background-position: -151px center;}
	.spaceList li:nth-child(4).cur .bgBox4 .bg1{ background-position: -235px center;}
	.spaceList li:nth-child(5).cur .bgBox5 .bg1{ background-position: -318px center;}
	.spaceList li:nth-child(1).cur{ background-image: url(/skin/huiben/img/spaceBgs1.png);}
	.spaceList li:nth-child(2).cur{ background-image: url(/skin/huiben/img/spaceBgs2.png);}
	.spaceList li:nth-child(3).cur{ background-image: url(/skin/huiben/img/spaceBgs3.png);}
	.spaceList li:nth-child(4).cur{ background-image: url(/skin/huiben/img/spaceBgs4.png);}
	.spaceList li:nth-child(5).cur{ background-image: url(/skin/huiben/img/spaceBgs5.png);}
	
	#contact{ background-color: #FFF; padding-bottom: 6px;}
	#contact .box .address{ width: 100%; margin-bottom: 15px;line-height: 26px;padding: 0 0 0 10px; box-sizing: border-box; -webkit-box-sizing: border-box; height: auto; }
	#map{ border-radius: 5px; height: 240px; border-width: 3px;}
	#contact .box{ width: 95%; margin:20px auto;}
	#index .environment .text{ margin-top: 10px;} 
	#index .story .imgBox li .hide{width: 100%; height: 100%;}
	#index .story .imgBox li.cur .hide{  z-index: 10; left: 0% !important; top: 0% !important;}
	#index .story .imgBox li:hover .hide{  z-index: 10; left: 0% !important; top: 0% !important;}
	#index .story .imgBox li{ width: 48%; margin-right: 4%; margin-bottom: 5px;}
	#index .story,#index .active .bigBox,#index .active,#index .active .smallBox{ width: 100%;}
	#index .active .smallBox li{ float: left;}
	#index .active .smallBox li:after{ border-color: transparent transparent #ed4405 transparent; left: 50% !important; margin-left: -10px; top: -5px; border-width: 10px; }
	#index .content .title .contTit{ width: 50%; height: auto;}
	#index .active .smallBox{ height: auto; margin-top: 25px;}
	#index .active .bigBox .page{ width: 20%;}
	#index .active .tit{ width: 50% !important; height: auto;}
	#index .active .tit img{width: 100%;}
	#index .active .border{ display: none;}
	#index .story .tit{ width: 50% !important; height: auto;}
	#index .story .tit img{width: 100%;}
	#index .story .border{ display: none;}
	#index .story{ padding-top: 10px; border-top:1px solid #f6cdb3 ; margin-top: 15px;}
	#index .story .imgBox li:nth-child(3n-1){margin: 0 4% 0 0;}
	#index .story .imgBox li:nth-child(2n){margin-right: 0;}
	#index .activity{ padding-bottom: 30px;}
	#index .appointment{ padding-bottom: 20px;}
	
	#Story .box1{ height: auto; padding-bottom: 20px;}
	#Story .box1 .cloud_R,#Story .box1 .cloud_L,#Story .box1 .girl{ display: none;}
	#Story .box1 .bg_B{ display: none;}
	#Story .box1 .position{ width: 300px; margin-left: -150px; margin-top: 64px; top: 0; position: relative;}
	#Story .box1 .position ul{ float: none; margin-left: 0; width: 100% !important;}
	#Story .box1 .position ul li{ width: 258px; margin: 0 auto 15px;}
	#Story .box1 .resume{ display: none;}
	#Story .box1 .Founder{ position: relative;}
	#Story .box1 .resume2{ display: block; margin-top: 20px;}	
	#Story .box2{ height: 600px;}
	#Story .box2 .tuAndw .tu_l{ width:300px; float: none; margin: 0 auto; height: 171px;}
	#Story .box2 .tuAndw .tu_l ul li{ width: 100%; height: 171px;}
	#Story .box2 .tuAndw .tu_l ul li img{ width: 100%;}
	#Story .box2 .tuAndw .wenz{ width: 300px; float: none;margin: 0 auto; height:309px;}
	#Story .box2 .tuAndw{ height: 509px;}
	#Story .box2 .tuAndw .tu_l_min ol li{width: 91px; height: 52px; overflow: hidden; margin-right:13px;}
	#Story .box2 .tuAndw .tu_l_min ol li:after{ width:83px;height:44px;}
	#Story .box2 .tuAndw .tu_l_min ol li:nth-child(3){ margin-right: 0;}
	#Story .box2 .tuAndw .tu_l_min{position: absolute; top: 269px; margin-top: 0;}
	#Story .box2 .tuAndw .wenz .title{position: absolute; width: 100%; top: 311px;}
	#Story .box2 .tuAndw .wenz .title img{ margin: 0 auto; display: block; width: 90%;}
	#Story .box2 .tuAndw .wenz p{ position: absolute; top: 377px;}
	#Story .box3 .text_idea{display: none;}
	#Story .box3{ width: 100%; left: 0; margin-left: 0;}
	#Story .box3 .thought{ width: 100%; top: 80px;}
	#Story .box3 .thought ul{ width: 100%; height: auto;}
	#Story .box3 .thought ul li{ margin-left: 0; float: none; width: 100%; overflow: hidden; margin-bottom: 16px;}
	#Story .box3 .thought ul li .round{ float: left; width: 80px; height: 80px; line-height: 80px; font-size: 16px;}
	#Story .box3 .thought ul li .summary .title_in{ font-size: 15px;}
	#Story .box3 .thought ul li .summary{ padding: 10px;width: 59%;float: right; margin-top: 0;}	
	#Story .box3 .thought ul li .round.gree{ background:rgba(69,163,0,.3); border: 2px solid #45a300;}
	#Story .box3 .thought ul li .round.yello{ background:rgba(255,174,0,.3); border:2px solid #ffae00;}
	#Story .box3 .thought ul li .round.red{ background:rgba(205,39,0,.3); border: 2px solid #cd2700;}
	#Story .box3 .thought ul li .round.zi{ background:rgba(169,3,194,.3); border: 2px solid #a903c2;}
	#Story .box3 .thought ul li .summary.gree:after{ position: absolute; content: ''; width: 0;height: 0;border-top:12px solid transparent;border-right: 12px solid #45a300;border-bottom: 12px solid transparent; top:30px; left: -12px;  }
	#Story .box3 .thought ul li .summary.yello:after{ position: absolute; content: ''; width: 0;height: 0;border-top:12px solid transparent;border-right: 12px solid #ffae00;border-bottom: 12px solid transparent; top:30px; left: -12px;}
	#Story .box3 .thought ul li .summary.red:after{ position: absolute; content: ''; width: 0;height: 0;border-top:12px solid transparent;border-right: 12px solid #cd2700;border-bottom: 12px solid transparent; top:30px; left: -12px;}
	#Story .box3 .thought ul li .summary.zi:after{ position: absolute; content: ''; width: 0;height: 0;border-top:12px solid transparent;border-right: 12px solid #a903c2;border-bottom: 12px solid transparent; top:30px; left: -12px;}
	/*#Story .box4 .pc{ display: none;}*/
	#Story .box4 .pc{ padding-bottom: 5%;}
	#Story .box4 .text_choose{ width: 100%; height: auto; text-align: center; padding-top: 20px;}
	#Story .box4 .text_choose img{ }
	#childCourse .box1 .CourseList ul li{ width: 89px; font-size: 12px; width: 73px; overflow: hidden; margin: 0 0;}
	.click_box1 .click_box1_over{ width:300px; left:50%; margin-left: -150px; height:358px; margin-top: -142px;}
	.click_box1 ul li{width:296px; height: 354px; }
	.click_box1 ul li .pic_person{ width:100px; height: 100px;}
	.click_box1 ul li .summary{ width:280px; max-height: 320px;}
	.click_box1 ul li .summary .text_title{ margin-bottom: 5px;}
	#childCourse .box2 .ladder_clouds,#childCourse .box2 .ladder_clouds2,#childCourse .box2 .ladder_florer,#childCourse .box2 .ladder_person,#childCourse .box2 .bg_B{ display: none;}
	#childCourse .box2 .ladder ul{ margin-left: 0; overflow: hidden;position: relative; padding: 36px 0 15px;border-top: 1px dotted #b1b3a5; width: 100%;}
	#childCourse .box2 .ladder ul li{ float: left; width:25%; height: 30px; line-height: 30px; margin-left: 12%;}
	#childCourse .box2 .ladder ul li.Grade{ position: absolute; line-height: 16px; height: 16px; top: 11px;}
	#childCourse .box2{ padding-bottom: 30px; padding-top: 30px;}
	#Story .box4{ padding-bottom: 0; padding-top: 0px;}
	#new .box{ width: 90%; padding-top: 20px;}
	#new .info{ width: 90%; margin: auto; margin-bottom: 20px;}
	#new .box .bc{ display: none;}
	#Story .box3 .thought ul li .summary{ transform: translateY(0px); -webkit-transform: translateY(0px); opacity: 1;}
	.backTop{ width: 40px; height: 40px; background-size: 100%;}
	#service .service_title{ height: auto; padding: 15px 0;}
	#service .service_title ul{ width: 96%; margin: 0 auto;}
	#service .service_title ul li{ margin: 15px auto 95px !important; float: none;}
}



@media only screen and (max-width:767px ) {
	.newServiceList ul{ max-width: 300px;}
	.newService .newSerivceTitle{ width: 300px; height: 28px;}
	.newServiceTitle2 img{ width: 300px;}
}
@media only screen and (max-width:414px ) {
	.lists{ width: 196px;}
	.lists li{ margin-right: 0px;}
}

@media only screen and (max-width:320px ) {
	.lists{ max-width: 300px;}
	
}