*   {transition:all 1s;}
body    {background:#10131A url(./images/introduce/bg3.jpg) no-repeat center top fixed;background-size: auto 100%;width:100%;overflow-x: hidden;}
.Title  {font-style: Century Gothic;text-align: center;}
    .Title img    {margin-bottom: 10px;}

.Computer   {width:514px;height:337px;padding:19px 57px 76px 67px;background: url(./images/introduce/box.png) no-repeat;}
.input  {background: #FFF;border:2px solid #00baf2;border-right-width: 80px;position: absolute;line-height: 50px;font-size: 18px;padding:0px 20px;border-radius: 2px;box-shadow: 5px 5px 10px #000;}
    .input p    {position: absolute;width: 80px;top: 0px;right:-80px;color:#FFF;text-align: center;border-radius: 2px;}

.Layer1 {width: 100%;height: 1000px;border-bottom: 1px solid #333;position: relative;}
    .Layer1 img.logo    {display: block;width: 530px;margin:auto;margin-top: 110px;}
    .Layer1 .Title  {margin-top: 100px;opacity: 1;filter:alpha(opacity:100);}
    .Layer1 .Computer   {position: absolute;left: 85px;top: 475px;}
    .Layer1 .ipad   {position: absolute;left: 620px;top: 610px;box-shadow: 5px 5px 25px #000;border-radius: 17px;}
    .Layer1 .input  {left: 635px;top: 530px;width: 270px;}

    .Layer1.hide .Title {opacity: 0;filter:alpha(opacity:0);}
    .Layer1.hide .Computer   {left: -300%;}
    .Layer1.hide .ipad   {left: 500%;}
    .Layer1.hide .input  {left: 1000%;}
    

.Layer2 {width: 100%;height: 1000px;border-bottom: 1px solid #333;overflow: hidden;position: relative;}
    .Layer2 .Title  {margin-top: 130px;}
    .Layer2 .Computer   {position: absolute;left: 220px;top: 455px;}
    .Layer2 .input  {left: 80px;top: 380px;}
    .lesson1,.lesson2   {box-shadow: 15px 15px 60px #000;position: absolute;}
    .lesson1    {left: 690px;top:590px;}
    .lesson2    {left: 615px;top:745px;}

    .Layer2.hide .Title {opacity: 0;filter:alpha(opacity:0);}
    .Layer2.hide .Computer   {top: 1000px;}
    .Layer2.hide .input  {top: -100px;}
    .Layer2.hide .lesson1,.Layer2.hide .lesson2  {left: 1000%;}


.Layer3 {width: 100%;height: 980px;}
    .Layer3 .Title  {margin-top: 180px;}
    .Layer3 .Computer   {float: left;margin-top: 130px;margin-left: 50px;}
    .Layer3 .font   {float: right;margin-top: 200px;margin-right: 20px;}

    .Layer3.hide .Title {opacity: 0;filter:alpha(opacity:0);}
    .Layer3.hide .Computer   {margin-left: -2000px;}
    .Layer3.hide .font   {margin-right: -2000px;}

.Layer4 {padding:50px 0px;background:#FFF;}
    .Layer4 .Page div   {font-size: 18px;color: #999;padding:15px 0px;padding-left: 135px;width:450px;}
        .Layer4 .Page div h2    {font-size: 24px;color: #333;font-weight: normal;}
    .Layer4 .Page div.icon1 {background: url(./images/introduce/icon_1.png) no-repeat left center;}
    .Layer4 .Page div.icon2 {background: url(./images/introduce/icon_2.png) no-repeat left center;}

.Footer {background: #111;padding:30px 0px;color:#DDD;}
    .Footer a   {color:#DDD;}
    .Footer p.fr   {background-color: #667682;padding:0px 20px;border-radius: 30px;line-height: 45px;margin-left: 20px;font-size: 18px;background-position: 25px center;background-repeat: no-repeat;}
    .Footer p.email  {background-image: url(./images/introduce/icon_4.png);padding-left: 60px;}
    .Footer p.phone  {background-image: url(./images/introduce/icon_3.png);padding-left: 50px;}