@charset "utf-8";

#mainCrcl{position:relative;height:590px;padding:65px 0;margin-bottom:80px;background:url(/sh_img/include/curriculum/noise.jpg) repeat}

#mainCrcl .tit{margin-bottom:40px;font-size:15px;font-weight:500;color:#fff;text-align:center}
#mainCrcl .tit p{margin-bottom:35px;font-size:40px;font-weight:300;text-align:center;letter-spacing:0;font-family:'Lato'}
#mainCrcl .tit p b{font-weight:900}

#mainCrcl ul li{position:relative;width:340px;transition:width 1s, margin 1s!important}
#mainCrcl ul li a{display:flex;align-items:center;overflow:hidden}
#mainCrcl ul li .img{filter:grayscale(1);opacity:.5;width:180px;height:180px;margin-top:30px;transition:all .6s}
#mainCrcl ul li .cont{position:absolute;left:320px;width:300px;opacity:0;color:rgba(255,255,255,.5);line-height:1.8;transition:all .4s}
#mainCrcl ul li .cont p{position:relative;font-size:26px;font-weight:400;color:#fff;font-family:'Lato'}
#mainCrcl ul li .cont p:before{display:block;content:"";position:absolute;left:-110px;top:23px;width:0;height:1px;background-color:rgba(255,255,255,.3) ;transition:all 1s .3s}
#mainCrcl ul li .cont span{display:block;margin:10px 0;font-size:15px;font-weight:400;color:#fff}
#mainCrcl ul li.active{width:520px;margin-right:150px}
#mainCrcl ul li.active .img{filter:grayscale(0);opacity:1;width:210px;height:210px;margin-top:0}
#mainCrcl ul li.active .cont{opacity:1;transform:translateX(0);transition:all 1s}
#mainCrcl ul li.active .cont p:before{width:90px}

#mainCrcl .pager_wrap{position:absolute;left:50%;bottom:55px;transform:translateX(-50%);width:100%;font-size:19px;color:#fff;text-align:center;font-family:'Lato'}
#mainCrcl .pager_wrap:before{display:block;content:"";position:absolute;left:0;top:5px;width:100%;height:1px;background-color:rgba(255,255,255,.15)}
#mainCrcl .pager{display:inline-block}
#mainCrcl .pager span{position:relative;width:auto;height:auto;margin:0 40px;padding-top:30px;opacity:1;background:none}
#mainCrcl .pager span:before, #mainCrcl .pager span:after{opacity:.25;display:block;content:"";position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;transition:all .3s; }
#mainCrcl .pager span:before{top:0;width:11px;height:11px;background-color:#fff} 
#mainCrcl .pager span:after{top:-8px;width:27px;height:27px;border:1px solid #fff}
#mainCrcl .pager span:hover:before , #mainCrcl .pager span:hover:after{opacity:.6}
#mainCrcl .pager span.on:before, #mainCrcl .pager span.on:after{opacity:1;box-shadow:0 0 20px rgba(255,255,255,.4)}
#mainCrcl .arr_btn{opacity:.3;cursor:pointer;display:inline-block;vertical-align:bottom;margin:0 30px;font-size:28px;line-height:1.2;transition:all .3s}
#mainCrcl .arr_btn:hover{opacity:1}