.page {

width: 996px;
height:760px;
padding-left: 3px;
margin-right: auto;
margin-left: auto;
position:relative;
}

.pc{
padding: 55px  55px 0px 55px;
height:775px;
background: url("../images/screen.png") no-repeat;
 }

 .box1
 {
 background: url("../images/box1-2.jpg");
 padding-top:10px;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 color:#00FFFF;
 font-size:40px;
 width:330px;
 height:60px;
 border-radius: 10px 0px 10px 0px;
 }
  .box1-2
 {
background: url("../images/box1-2.jpg");
 margin-left:156px;
 padding-top:10px;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 color:#00FFFF;
 font-size:40px;
 width:400px;
 height:60px;
 border-radius: 0px 10px 0px 10px;
 }
 .box1,.box1-2
{
float:left;
}
  .box2
 {
 background: url("../images/box2.jpg");
 padding-top:10px;
 margin-top:86px;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 color:#FF0000;
 font-size:40px;
 border-radius: 10px;
 height:150px;
  font-style: italic;
 }
  .box3-1
 {
 padding-top:10px;
 margin-top:15px;
 height:130px;
 width:285px;
 background: url("../images/box3.jpg");
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 color:#80800;
 font-size:20px;
 border-radius: 10px;
 }
   .box3-2
 {
 padding-top:10px;
 margin:15px;
 height:130px;
 width:285px;
 background: url("../images/box3.jpg");
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 color:#80800;
 font-size:20px;
 border-radius: 10px;
 }
   .box3-3
 {
 padding-top:10px;
 margin-top:15px;
 height:130px;
 width:285px;
 background: url("../images/box3.jpg");
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 color:#80800;
 font-size:20px;
 border-radius: 10px;
 
 }
 .box3-1,.box3-2,.box3-3
{
float:left;
}
.box4
 {
 margin-top:170px;
 padding-top:10px;
 height:62px;
 background: url("../images/box4.jpg");
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 color:#FFFFFF;
 font-size:20px;
 border-radius: 10px;
 }
 .ico1
 {
  margin-top:225px;
  margin-left:320px;
  background-color:#9999FF;
  width:60px;
  height:60px;
  border-radius: 60px;
 }
  .ico1:hover
 {
   -moz-box-shadow: 0 0 10px #ccc; 
  -webkit-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
  background-color:#a0ddfa;
 }
  .ico2
 {
  margin:225px 25px 0px 35px;
  background-color:#9999FF;
  width:60px;
  height:60px;
  border-radius: 60px;
 }
   .ico2:hover
 {
  -moz-box-shadow: 0 0 10px #ccc; 
  -webkit-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
  background-color:#a0ddfa;
 }
  .ico3
 {
  margin-top:225px;
  background-color:#9999FF;
  width:60px;
  height:60px;
  border-radius: 60px;
 }
   .ico3:hover
 {
   -moz-box-shadow: 0 0 10px #ccc; 
  -webkit-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
  background-color:#a0ddfa;
 }
.ico1, .ico2 ,.ico3
{
float:left;
}
.text
{border: 5px solid red;
 text-align: center;
}




@media (max-width: 1919px) 
{
.page {

width: 1080px;
}
.pc{
padding: 60px  166px 0px 165px;
height:680px;
background: url("../images/lscreen.png")no-repeat;
 }
.box1-2
 {
margin-left:15px;
}
 
 .box3-1
 {
 
 width:240px;

 }
   .box3-2
 {
  width:239px;
 }
   .box3-3
 {
  width:240px;
 
 } 
.ico1
 {
  margin-top:130px;
  margin-left:250px;
  }
 .ico2
 {
  margin:130px 25px 0px 35px;
 }
   .ico3
 {
  margin-top:130px;
 }
 }
 
 
 
 
 
@media (max-width: 1080px) 
{

.page {

width: 810px;
}

.pc{
padding: 105px  103px 0px 95px;
height:970px;
background: url("../images/tscreen.png")no-repeat;
 }

.box1
 {
 padding-top:20px;
 font-size:25px;
 height:50px;
 width:230px;
 }
  .box1-2
 {
 padding-top:20px;
 margin-left:80px;
 font-size:25px;
 height:50px;
 width:300px;
 }

.box3-1
 {
 
  width:auto;
  height:126px;
 }
   .box3-2
 { 
  margin:15px 0px;
  width:auto;
  height:126px;
 }
   .box3-3
 {
   width:auto;
   height:126px;
 
 } 
.box3-1,.box3-2,.box3-3
{
float:none;
}
.box4
 {
 margin-top:15px;
 height:60px;
 font-size:16px;
 }
 .ico1
 {
  margin-top:120px;
  margin-left:182px;
  }
 .ico2
 {
  margin:120px 25px 0px 35px;
 }
   .ico3
 {
  margin-top:120px;
 }
}


@media (max-width: 850px) 
{

.page {

width: 680px;
}

.pc{
padding: 140px  60px 0px 65px;
height:860px;
background: url("../images/mscreen.png")no-repeat;
 }

.box1
 {
  padding-top:10px;
 font-size:22px;
 width:200px;
  height:33px;
 }
  .box1-2
 {
  padding-top:10px;
 margin-left:64px;
 font-size:22px;
 width:290px;
 height:33px;
 }
 .box2
 {
 margin-top:58px;
 font-size:30px;
 height:100px;
 }
 .box3-1
 {
  height:98px;
 }
   .box3-2
 { 
  height:98px;
 }
   .box3-3
 {
   height:98px;
 } 
 .box4
 {
 height:63px;
 font-size:18px;
 }
 .ico1
 {
  margin-top:140px;
  margin-left:150px;
  }
 .ico2
 {
  margin:140px 25px 0px 35px;
 }
   .ico3
 {
  margin-top:140px;
 }
 
 
 
 }