body{margin: 0; padding: 0; }
.head{background-color:#72A6CB; height: 450px; text-align: center; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6); }
.head h1{font-size: 50px; color: white; margin:0; padding:0;}
#headImg{margin: 40px auto 20px;}
.head h2{font-size: 20px; color: white; max-width: 900px; padding:0;font-weight: normal; margin:30px auto 0; line-height: 1.5em;}
.head .headIntro{ height: 100px;}
.head .headIntro h1{text-align: center;}
#headLine{ margin:250px auto 0; height: 2px; background: #EEE; width: 200px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6); }
.headIntro h2{font-size: 20px; color: white; max-width: 900px; padding:0;font-weight: normal; margin:30px auto 0; line-height: 1.5em;}
.hideText{text-shadow:none; color: rgb(114,166,203)}
.headIntro .hideText{text-shadow:none; color: rgb(114,166,203); visibility: hidden;}
#headH2{border-bottom: 1px solid #FFF;}
/*#headBtn{padding:10px; background:#E04E5E; border-radius: 10px; text-decoration: none; font-family: "arial"; color: white; position: relative; top:20px; font-style: 20px;}*/
/*--------------------------------*/
#adventage{width: 90%; margin:20px auto; list-style-type:none; overflow: hidden;}
#adventage li{float: left; width: 33%; text-align: center;}
#adventage li h3{color: #004666}
#adventage li p{padding-right: 20px; color: #A32121; font-size: 16px;}
#adventage p strong{font-size: 14px; color: #2B98B9}
/*--------------------------------*/
pre{ background:#FF7676 ; color: white; padding:20px; border-radius: 10px; font-family: 'Comic Sans MS'; font-size:14px;}
pre strong { color: #00FFF6; font-weight: normal;}
#part1{background:#ECFCFF; min-height: 400px; position: relative;}
.part h2{color:#555; font-size: 30px; padding:30px 30px 0; text-align: center;}
.part h3{color:#004666; margin: 30px; text-align: center;}
#part1 .example1{width: 300px;height: 300px;background:powderblue; position: relative; left:20%; top:0px; text-align: center;}
#part1 .example1 .intro1{background:firebrick;}
#part1 .example1 .intro1 h2{color:white;}
#p1pre1{position: absolute; top:145px; right:20%; padding:14px 40px;}
#p1pre2{width: 300px; margin:10px auto; position: relative; border-radius:10px 10px 0 0; margin-bottom: 50px;}
#p1pre2 button{width:340px; height:61px; position:absolute; right:-100px; top:61px; border: none; left: 0; border-radius:0 0 10px 10px; background: powderblue;  font-size: 20px; font-weight: bold; color:firebrick; font-family: 'arial'; border-bottom: 10px solid #8FDBE6 ;}
#p1pre2 button:hover{background:#9FEDEB;}
#part1arrow{display:none;position:absolute; top:460px; left: 400px;}
#p1h3{padding: 30px;}
/*--------------------------------*/
#part2{}

.example2wrap{width: 420px; margin:-10px auto;}
.example2{margin-left: 20px; float: left; width: 200px; height: 100px; background:#CCC;}
.example2 .intro2{background:#F08787;}
.example2prev{ margin-left:0; float: left; width: 200px; height: 100px; background:#CCC;}
.intro2prev{background:#F08787;}
/*--------------------------------*/
#part3{background:#ECFCFF; min-height: 400px;}
/*--------------------------------*/
.sHoverItem{ float: left;}
.sIntro{background-color: rgb(235,137,112); text-align: center; font-family: "arial";}
.sIntro h2{font-family: "arial"; font-size:36px; text-align: center; color: #FFF; border-bottom: 1px dashed #fff;margin:0px 20px; padding:10px;}
.sIntro p{font-size:14px; text-align: center; color: #FFF; margin:0px 10px; padding: 10px; color: #438199;}
.sIntro button{font-family: "arial"; font-size:16px; color: white;  background-color: #0AB5DA; border:none; border-radius: 10px; padding:4px 10px; }
/*---------------------------------*/
.downloadBtn button{padding:8px; font-size: 18px; color:#26677B; font-weight: bold; font-family: "Arial"; background:powderblue; border:none; border-radius: 10px; border-bottom:4px solid #62CBD8}
.downloadBtn button:hover{background:#99E1FF;}
.downloadBtn a{font-weight: bold; font-family: "Arial"; font-size: 18px; text-decoration: none; color:#26677B;}