body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,h1,h2,h3,h4,h5,h6,fieldset,img,input {margin:0;padding:0;}
body,html {width:100%;}
img {display:block;}
a {margin:0;text-decoration:none;}
li {list-style:none;}
body {height:100%;background-color:#fff;margin-top:20px;font-family:'RobotoMedium';}
.button {background-color:#ede6dc;color:#cc4e46;width:12%;flex-shrink:0;line-height:1.7em;margin:0;font-size:2em;text-align:center;float:left;border:1px solid #8e352e;box-shadow:0 0 3px #333;}
.button:hover {background-color:#cc4e46;color:#ede6dc;cursor:pointer;}
h1 {text-transform:uppercase;text-align:center;}
.wrapper {width:90%;max-width:1200px;margin:0 auto;background-image:url("../images/background.jpg");background-size:cover;}
.display {position:relative;left:0px;height:600px;}
.url {width:80%;margin:20px auto 10px;display:flex;align-items:center;justify-content:center;}
div {background-repeat:no-repeat;background-size:100%;overflow:hidden;}
iframe {transform:scale(0.219);-webkit-transform:scale(0.219);-o-transform:scale(0.219);-ms-transform:scale(0.219);-moz-transform:scale(0.219);transform-origin:top left;-webkit-transform-origin:top left;-o-transform-origin:top left;-ms-transform-origin:top left;-moz-transform-origin:top left;margin:0;padding:0;position:relative;background-color:#fff;border-color:#000;}
.mobile {background-image:url("../images/iphone-optimised.png");position:absolute;width:95px;height:196px;top:375px;left:300px;z-index:5;}
.mobile iframe {width:320px;height:480px;top:32px;left:11px;overflow-y:hidden;}
.tablet {background-image:url("../images/ipad-optimised.png");width:246px;height:400px;z-index:3;position:absolute;left:120px;top:230px;}
.tablet iframe {width:768px;height:1024px;top:35px;left:38px;overflow-y:hidden;}
.laptop {background-image:url("../images/laptop-screen-optimised.png");width:477px;height:307px;top:264px;left:560px;position:absolute;z-index:2;}
.laptop iframe {width:1280px;height:802px;top:26px;left:60px;transform:scale(0.277);-webkit-transform:scale(0.277);-o-transform:scale(0.277);-ms-transform:scale(0.277);-moz-transform:scale(0.277);transform-origin:top left;-webkit-transform-origin:top left;-o-transform-origin:top left;-ms-transform-origin:top left;-moz-transform-origin:top left;}
.desktop {position:absolute;width:566px;height:538px;background-image:url("../images/large-screen-optimised.png");top:0px;left:220px;z-index:1;}
.desktop iframe {left:28px;top:38px;width:1600px;height:992px;transform:scale(0.3181);-webkit-transform:scale(0.3181);-o-transform:scale(0.3181);-ms-transform:scale(0.3181);-moz-transform:scale(0.3181);transform-origin:top left;-webkit-transform-origin:top left;-o-transform-origin:top left;-ms-transform-origin:top left;-moz-transform-origin:top left;}
.about-tool {font-size:1.2em;max-width:64em;width:80%;margin:1em auto;}
.about-tool li {margin-bottom:0.5em;line-height:1.2;}
@media (max-width:1160px) {.display {width:95%;height:550px;transform:scale(0.81);-webkit-transform:scale(0.81);-o-transform:scale(0.81);-ms-transform:scale(0.81);-moz-transform:scale(0.81);}
.desktop {left:180px;}
.laptop {left:520px;}
.tablet {left:80px;}
.mobile {left:260px;}
input {width:88%;}
}
@media (max-width:1070px) {.display {left:-50px;}
}
@media (max-width:1000px) {.display {height:500px;transform:scale(0.71);-webkit-transform:scale(0.71);-o-transform:scale(0.71);-ms-transform:scale(0.71);-moz-transform:scale(0.71);top:-40px;}
.desktop {left:140px;}
.laptop {left:480px;}
.tablet {left:40px;}
.mobile {left:220px;}
}
@media (max-width:850px) {.display {height:500px;transform:scale(0.65);-webkit-transform:scale(0.65);-o-transform:scale(0.65);-ms-transform:scale(0.65);-moz-transform:scale(0.65);}
.desktop {left:100px;}
.laptop {left:440px;}
.tablet {left:0px;}
.mobile {left:180px;}
}
@media (max-width:768px) {.display {height:450px;transform:scale(0.55);-webkit-transform:scale(0.55);-o-transform:scale(0.55);-ms-transform:scale(0.55);-moz-transform:scale(0.55);}
.button {font-size:1.6em;width:20%;}
input {height:1.2em;width:100%;}
}
@media (max-width:670px) {.display {height:400px;left:-70px;transform:scale(0.45);-webkit-transform:scale(0.45);-o-transform:scale(0.45);-ms-transform:scale(0.45);-moz-transform:scale(0.45);}
}
@media (max-width:580px) {input {font-size:1.4em;width:100%;}
.button {float:left;font-size:1.4em;}
}
@media (max-width:560px) {.display {height:270px;top:-65px;transform:scale(0.37);-webkit-transform:scale(0.37);-o-transform:scale(0.37);-ms-transform:scale(0.37);-moz-transform:scale(0.37);}
}
@media (max-width:440px) {.display {left:-17px;top:-65px;width:70px;transform:scale(0.35);-webkit-transform:scale(0.35);-o-transform:scale(0.35);-ms-transform:scale(0.35);-moz-transform:scale(0.35);}
}
@media (max-width:380px) {.display {height:235px;left:-17px;top:-65px;transform:scale(0.27);-webkit-transform:scale(0.27);-o-transform:scale(0.27);-ms-transform:scale(0.27);-moz-transform:scale(0.27);}
.desktop {left:100px;}
.laptop {left:515px;}
.tablet {left:0px;}
.mobile {left:180px;}
}
.button1 {background-color:#ede6dc;border:1px solid #8e352e;box-shadow:0 0 3px #333;color:#cc4e46;float:left;font-size:2em;line-height:1.7em;margin:0;text-align:center;width:80%;}
/*鹏仔先生*/
/*2020-5-28*/