body{color:#222;-webkit-text-size-adjust:none;} body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl, dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,iframe{margin:0; padding:0;} h1,h2,h3,h4,h5,h6{font-size:100%;} body,button,input,select,textarea {font-family:Tahoma,Arial,Roboto,”Droid Sans�?”Helvetica Neue�?”Droid Sans Fallback�?”Heiti SC�?sans-self;font-size:62.5%; line-height:1.5;} ol,ul{list-style:none;} html,body{ width:100%; height:100%; overflow:hidden;} .section-wrap{ width:100%;height:100%;overflow:visible;transition:transform 1s cubic-bezier(0.86,0,0.03,1);-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);} .section-wrap .section{ position:relative; width:100%; height:100%; background-position:center center; background-repeat:no-repeat;} .section-wrap .section .title{width:100%;position:absolute;top:10%;color:#fff;font-size:2.4em;text-align:center;z-index:4;} .section-wrap .section .title p{ padding:0 4%;opacity:0} .section-wrap .section .title.active .tit{ opacity:1;transform:translateY(-25px);-webkit-transform:translateY(-25px);transition:all 2s cubic-bezier(0.86,0,0.8,1);-webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);} .section-wrap .section-1{ background-color:black;} .section-wrap .section-2{ background-color:white;} .section-wrap .section-3{ background-color:black;} .put-section-0{ transform:translateY(0);-webkit-transform:translateY(0);} .put-section-1{ transform:translateY(-100%);-webkit-transform:translateY(-100%);} .put-section-2{ transform:translateY(-200%);-webkit-transform:translateY(-200%);} .put-section-3{ transform:translateY(-300%);-webkit-transform:translateY(-300%);} .section-btn{ width:14px;position:fixed;right:4%;top:50%;z-index:4;} .section-btn li{ width:32px;height:32px;cursor:pointer;text-indent:-9999px;border-radius:50%;-webkit-border-radius:50%;margin-bottom:12px; /*background:#BD362F;*/text-align:center; color:#fff; onsor:pointer;background:url('../img/ico.png') center no-repeat;} .section-btn li.on{ /*background:#fff;*/background:url('../img/ico_on.png') center no-repeat;} .arrow{ opacity:1;animation:arrow 10s cubic-bezier(0.5,0,0.1,1) infinite;-webkit-animation:arrow 10s cubic-bezier(0.5,0,0.1,1) infinite;/*transform:rotate(-90deg);-webkit-transform:rotate(-90deg); */position:absolute;bottom:10px;left:50%;margin-left:-5rem;width:10rem;height:3rem;line-height:60px;text-align:center;font-size:20px;color:#fff;cursor:pointer;overflow:hidden;background:url('.././images/next.png') center no-repeat;z-index:99999999999;} .contract_btn{position:absolute;bottom:10px;left:80%;margin-left:-30px;width:300px;height:50px;line-height:60px;text-align:center;font-size:20px;color:#fff;cursor:pointer;overflow:hidden;} .arrow:hover{ animation-play-state:paused;-webkit-animation-play-state:paused;} @keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} } @-webkit-keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} } .title_logo_text{margin:auto;margin-top:100px;min-width:1200px;height:250px;background:url('../img/logo_text.png') center no-repeat;z-index:2;} .logo_btn_p{margin-top:10px;min-width:1200px;height:65px;text-align:center;} .logo_btn{cursor:pointer;margin:auto;width:408px;height:65px;z-index:2;transition:background 5s;border:1px white solid; -webkit-transition:background 5s; /* Safari */-webkit-transition-timing-function:cubic-bezier(0.25,0.1,0.25,1);transition-timing-function:cubic-bezier(0.25,0.1,0.25,1);} .logo_btn:hover{background:url('../img/bt_color.jpg') center no-repeat;border:none;} .weichat_div{position:absolute;width:200px;height:100px;border:1px red solid;top:-100px;z-index:9;} .mu{position:absolute;bottom:0;right:0.1rem;z-index: 8} .mu img{cursor:pointer;} .balloon{position:absolute;top:100px;right:3rem;z-index: 6} .mouse{position:absolute;bottom:0;left:3rem;z-index: 8} .logo_text{position:absolute;left:6rem;top:1rem;z-index: 8;} .clouds_1{position:absolute;left:14rem;top:10rem;} .clouds_2{position:absolute;right:17rem;top:5rem;z-index:7} .clouds_3{position:absolute;left:11rem;top:18rem;} .dian{display:inline-block;width:3rem;height:3rem;background:url(.././images/dian.png) no-repeat top;background-size:3rem;cursor:pointer;} .dian_active{background:url(.././images/dian_active.png) no-repeat top; background-size:100% 100%} .attention{ position:absolute;top:5rem;right:1rem; animation:attentionGif 8s infinite linear; -moz-animation:attentionGif 8s infinite linear; /* Firefox */ -webkit-animation:attentionGif 8s infinite linear; /* Safari and Chrome */ -o-animation:attentionGif 8s infinite linear; /* Opera */ animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; /*Safari and Chrome*/ z-index: 1000000; } .dowload{ position:absolute;top:5rem;left:1rem; animation:dowloadGif 4s infinite linear; -moz-animation:dowloadGif 4s infinite linear; /* Firefox */ -webkit-animation:dowloadGif 4s infinite linear; /* Safari and Chrome */ -o-animation:dowloadGif 4s infinite linear; /* Opera */ animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; /*Safari and Chrome*/ z-index: 1000000; } #mov_btn{ width:5rem; animation:mov_btnGif 2s infinite linear; -moz-animation:mov_btnGif 2s infinite linear; /* Firefox */ -webkit-animation:mov_btnGif 2s infinite linear; /* Safari and Chrome */ -o-animation:mov_btnGif 2s infinite linear; /* Opera */ animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; /*Safari and Chrome*/ } .bees_gif{ width:4.5rem;height:5rem; position:absolute;left:-1rem;top:-5rem; background:url(.././images/bees/1.png) no-repeat top; background-size:4.5rem; animation:beesGif 0.8s infinite linear; -moz-animation:beesGif 1s infinite linear; /* Firefox */ -webkit-animation:beesGif 1s infinite linear; /* Safari and Chrome */ -o-animation:beesGif 1s infinite linear; /* Opera */ animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; /*Safari and Chrome*/ } .mos_gif{ width:4.5rem;height:5rem; position:absolute;left:1.5rem;top:-5rem; background:url(.././images/mos/1.png) no-repeat top; background-size:4.5rem; animation:mosGif 2s infinite linear; -moz-animation:mosGif 1s infinite linear; /* Firefox */ -webkit-animation:mosGif 1s infinite linear; /* Safari and Chrome */ -o-animation:mosGif 1s infinite linear; /* Opera */ animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; /*Safari and Chrome*/ } @keyframes beesGif { 0% {background:url(.././images/bees/1.png) no-repeat top;background-size:4.5rem;} 8% {background:url(.././images/bees/2.png) no-repeat top;background-size:4.5rem;} 16% {background:url(.././images/bees/3.png) no-repeat top;background-size:4.5rem;} 24% {background:url(.././images/bees/4.png) no-repeat top;background-size:4.5rem;} 32% {background:url(.././images/bees/5.png) no-repeat top;background-size:4.5rem;} 40% {background:url(.././images/bees/6.png) no-repeat top;background-size:4.5rem;} 47% {background:url(.././images/bees/7.png) no-repeat top;background-size:4.5rem;} 55% {background:url(.././images/bees/8.png) no-repeat top;background-size:4.5rem;} 63% {background:url(.././images/bees/9.png) no-repeat top;background-size:4.5rem;} 70% {background:url(.././images/bees/10.png) no-repeat top;background-size:4.5rem;} 77% {background:url(.././images/bees/11.png) no-repeat top;background-size:4.5rem;} 84% {background:url(.././images/bees/12.png) no-repeat top;background-size:4.5rem;} 91% {background:url(.././images/bees/13.png) no-repeat top;background-size:4.5rem;} 96% {background:url(.././images/bees/14.png) no-repeat top;background-size:4.5rem;} 100% {background:url(.././images/bees/15.png) no-repeat top;background-size:4.5rem;} } @-moz-keyframes beesGif /* Firefox */ { 0% {background:url(.././images/bees/1.png) no-repeat top;background-size:4.5rem;} 8% {background:url(.././images/bees/2.png) no-repeat top;background-size:4.5rem;} 16% {background:url(.././images/bees/3.png) no-repeat top;background-size:4.5rem;} 24% {background:url(.././images/bees/4.png) no-repeat top;background-size:4.5rem;} 32% {background:url(.././images/bees/5.png) no-repeat top;background-size:4.5rem;} 40% {background:url(.././images/bees/6.png) no-repeat top;background-size:4.5rem;} 47% {background:url(.././images/bees/7.png) no-repeat top;background-size:4.5rem;} 55% {background:url(.././images/bees/8.png) no-repeat top;background-size:4.5rem;} 63% {background:url(.././images/bees/9.png) no-repeat top;background-size:4.5rem;} 70% {background:url(.././images/bees/10.png) no-repeat top;background-size:4.5rem;} 77% {background:url(.././images/bees/11.png) no-repeat top;background-size:4.5rem;} 84% {background:url(.././images/bees/12.png) no-repeat top;background-size:4.5rem;} 91% {background:url(.././images/bees/13.png) no-repeat top;background-size:4.5rem;} 96% {background:url(.././images/bees/14.png) no-repeat top;background-size:4.5rem;} 100% {background:url(.././images/bees/15.png) no-repeat top;background-size:4.5rem;} } @-webkit-keyframes beesGif /* Safari and Chrome */ { 0% {background:url(.././images/bees/1.png) no-repeat top;background-size:4.5rem;} 8% {background:url(.././images/bees/2.png) no-repeat top;background-size:4.5rem;} 16% {background:url(.././images/bees/3.png) no-repeat top;background-size:4.5rem;} 24% {background:url(.././images/bees/4.png) no-repeat top;background-size:4.5rem;} 32% {background:url(.././images/bees/5.png) no-repeat top;background-size:4.5rem;} 40% {background:url(.././images/bees/6.png) no-repeat top;background-size:4.5rem;} 47% {background:url(.././images/bees/7.png) no-repeat top;background-size:4.5rem;} 55% {background:url(.././images/bees/8.png) no-repeat top;background-size:4.5rem;} 63% {background:url(.././images/bees/9.png) no-repeat top;background-size:4.5rem;} 70% {background:url(.././images/bees/10.png) no-repeat top;background-size:4.5rem;} 77% {background:url(.././images/bees/11.png) no-repeat top;background-size:4.5rem;} 84% {background:url(.././images/bees/12.png) no-repeat top;background-size:4.5rem;} 91% {background:url(.././images/bees/13.png) no-repeat top;background-size:4.5rem;} 96% {background:url(.././images/bees/14.png) no-repeat top;background-size:4.5rem;} 100% {background:url(.././images/bees/15.png) no-repeat top;background-size:4.5rem;} } @-o-keyframes beesGif /* Opera */ { 0% {background:url(.././images/bees/1.png) no-repeat top;background-size:4.5rem;} 8% {background:url(.././images/bees/2.png) no-repeat top;background-size:4.5rem;} 16% {background:url(.././images/bees/3.png) no-repeat top;background-size:4.5rem;} 24% {background:url(.././images/bees/4.png) no-repeat top;background-size:4.5rem;} 32% {background:url(.././images/bees/5.png) no-repeat top;background-size:4.5rem;} 40% {background:url(.././images/bees/6.png) no-repeat top;background-size:4.5rem;} 47% {background:url(.././images/bees/7.png) no-repeat top;background-size:4.5rem;} 55% {background:url(.././images/bees/8.png) no-repeat top;background-size:4.5rem;} 63% {background:url(.././images/bees/9.png) no-repeat top;background-size:4.5rem;} 70% {background:url(.././images/bees/10.png) no-repeat top;background-size:4.5rem;} 77% {background:url(.././images/bees/11.png) no-repeat top;background-size:4.5rem;} 84% {background:url(.././images/bees/12.png) no-repeat top;background-size:4.5rem;} 91% {background:url(.././images/bees/13.png) no-repeat top;background-size:4.5rem;} 96% {background:url(.././images/bees/14.png) no-repeat top;background-size:4.5rem;} 100% {background:url(.././images/bees/15.png) no-repeat top;background-size:4.5rem;} } @keyframes mosGif { 0% {background:url(.././images/mos/1.png) no-repeat top;background-size:4.5rem;} 8% {background:url(.././images/mos/2.png) no-repeat top;background-size:4.5rem;} 16% {background:url(.././images/mos/3.png) no-repeat top;background-size:4.5rem;} 24% {background:url(.././images/mos/4.png) no-repeat top;background-size:4.5rem;} 32% {background:url(.././images/mos/5.png) no-repeat top;background-size:4.5rem;} 40% {background:url(.././images/mos/6.png) no-repeat top;background-size:4.5rem;} 47% {background:url(.././images/mos/7.png) no-repeat top;background-size:4.5rem;} 55% {background:url(.././images/mos/8.png) no-repeat top;background-size:4.5rem;} 63% {background:url(.././images/mos/9.png) no-repeat top;background-size:4.5rem;} 70% {background:url(.././images/mos/10.png) no-repeat top;background-size:4.5rem;} 77% {background:url(.././images/mos/11.png) no-repeat top;background-size:4.5rem;} 84% {background:url(.././images/mos/12.png) no-repeat top;background-size:4.5rem;} 91% {background:url(.././images/mos/13.png) no-repeat top;background-size:4.5rem;} 96% {background:url(.././images/mos/14.png) no-repeat top;background-size:4.5rem;} 100% {background:url(.././images/mos/15.png) no-repeat top;background-size:4.5rem;} } @-moz-keyframes mosGif /* Firefox */ { 0% {background:url(.././images/mos/1.png) no-repeat top;background-size:4.5rem;} 8% {background:url(.././images/mos/2.png) no-repeat top;background-size:4.5rem;} 16% {background:url(.././images/mos/3.png) no-repeat top;background-size:4.5rem;} 24% {background:url(.././images/mos/4.png) no-repeat top;background-size:4.5rem;} 32% {background:url(.././images/mos/5.png) no-repeat top;background-size:4.5rem;} 40% {background:url(.././images/mos/6.png) no-repeat top;background-size:4.5rem;} 47% {background:url(.././images/mos/7.png) no-repeat top;background-size:4.5rem;} 55% {background:url(.././images/mos/8.png) no-repeat top;background-size:4.5rem;} 63% {background:url(.././images/mos/9.png) no-repeat top;background-size:4.5rem;} 70% {background:url(.././images/mos/10.png) no-repeat top;background-size:4.5rem;} 77% {background:url(.././images/mos/11.png) no-repeat top;background-size:4.5rem;} 84% {background:url(.././images/mos/12.png) no-repeat top;background-size:4.5rem;} 91% {background:url(.././images/mos/13.png) no-repeat top;background-size:4.5rem;} 96% {background:url(.././images/mos/14.png) no-repeat top;background-size:4.5rem;} 100% {background:url(.././images/mos/15.png) no-repeat top;background-size:4.5rem;} } @-webkit-keyframes mosGif /* Safari and Chrome */ { 0% {background:url(.././images/mos/1.png) no-repeat top;background-size:4.5rem;} 8% {background:url(.././images/mos/2.png) no-repeat top;background-size:4.5rem;} 16% {background:url(.././images/mos/3.png) no-repeat top;background-size:4.5rem;} 24% {background:url(.././images/mos/4.png) no-repeat top;background-size:4.5rem;} 32% {background:url(.././images/mos/5.png) no-repeat top;background-size:4.5rem;} 40% {background:url(.././images/mos/6.png) no-repeat top;background-size:4.5rem;} 47% {background:url(.././images/mos/7.png) no-repeat top;background-size:4.5rem;} 55% {background:url(.././images/mos/8.png) no-repeat top;background-size:4.5rem;} 63% {background:url(.././images/mos/9.png) no-repeat top;background-size:4.5rem;} 70% {background:url(.././images/mos/10.png) no-repeat top;background-size:4.5rem;} 77% {background:url(.././images/mos/11.png) no-repeat top;background-size:4.5rem;} 84% {background:url(.././images/mos/12.png) no-repeat top;background-size:4.5rem;} 91% {background:url(.././images/mos/13.png) no-repeat top;background-size:4.5rem;} 96% {background:url(.././images/mos/14.png) no-repeat top;background-size:4.5rem;} 100% {background:url(.././images/mos/15.png) no-repeat top;background-size:4.5rem;} } @-o-keyframes mosGif /* Opera */ { 0% {background:url(.././images/mos/1.png) no-repeat top;background-size:4.5rem;} 8% {background:url(.././images/mos/2.png) no-repeat top;background-size:4.5rem;} 16% {background:url(.././images/mos/3.png) no-repeat top;background-size:4.5rem;} 24% {background:url(.././images/mos/4.png) no-repeat top;background-size:4.5rem;} 32% {background:url(.././images/mos/5.png) no-repeat top;background-size:4.5rem;} 40% {background:url(.././images/mos/6.png) no-repeat top;background-size:4.5rem;} 47% {background:url(.././images/mos/7.png) no-repeat top;background-size:4.5rem;} 55% {background:url(.././images/mos/8.png) no-repeat top;background-size:4.5rem;} 63% {background:url(.././images/mos/9.png) no-repeat top;background-size:4.5rem;} 70% {background:url(.././images/mos/10.png) no-repeat top;background-size:4.5rem;} 77% {background:url(.././images/mos/11.png) no-repeat top;background-size:4.5rem;} 84% {background:url(.././images/mos/12.png) no-repeat top;background-size:4.5rem;} 91% {background:url(.././images/mos/13.png) no-repeat top;background-size:4.5rem;} 96% {background:url(.././images/mos/14.png) no-repeat top;background-size:4.5rem;} 100% {background:url(.././images/mos/15.png) no-repeat top;background-size:4.5rem;} } @keyframes attentionGif { 0% {top:5rem;} 10% {top:5.5rem;} 20% {top:6rem;} 30% {top:6.5rem;} 40% {top:7rem;} 50% {top:7.5rem;} 60% {top:7rem;} 70% {top:6.5rem;} 80% {top:6rem;} 90% {top:5.5rem;} 100% {top:5rem;} } @-moz-keyframes attentionGif /* Firefox */ { 0% {top:5rem;} 10% {top:5.5rem;} 20% {top:6rem;} 30% {top:6.5rem;} 40% {top:7rem;} 50% {top:7.5rem;} 60% {top:7rem;} 70% {top:6.5rem;} 80% {top:6rem;} 90% {top:5.5rem;} 100% {top:5rem;} } @-webkit-keyframes attentionGif /* Safari and Chrome */ { 0% {top:5rem;} 10% {top:5.5rem;} 20% {top:6rem;} 30% {top:6.5rem;} 40% {top:7rem;} 50% {top:7.5rem;} 60% {top:7rem;} 70% {top:6.5rem;} 80% {top:6rem;} 90% {top:5.5rem;} 100% {top:5rem;} } @-o-keyframes attentionGif /* Opera */ { 0% {top:5rem;} 10% {top:5.5rem;} 20% {top:6rem;} 30% {top:6.5rem;} 40% {top:7rem;} 50% {top:7.5rem;} 60% {top:7rem;} 70% {top:6.5rem;} 80% {top:6rem;} 90% {top:5.5rem;} 100% {top:5rem;} } @keyframes dowloadGif { 0% {top:5rem;} 10% {top:5.5rem;} 20% {top:6rem;} 30% {top:6.5rem;} 40% {top:7rem;} 50% {top:7.5rem;} 60% {top:7rem;} 70% {top:6.5rem;} 80% {top:6rem;} 90% {top:5.5rem;} 100% {top:5rem;} } @-moz-keyframes dowloadGif /* Firefox */ { 0% {top:5rem;} 10% {top:5.5rem;} 20% {top:6rem;} 30% {top:6.5rem;} 40% {top:7rem;} 50% {top:7.5rem;} 60% {top:7rem;} 70% {top:6.5rem;} 80% {top:6rem;} 90% {top:5.5rem;} 100% {top:5rem;} } @-webkit-keyframes dowloadGif /* Safari and Chrome */ { 0% {top:5rem;} 10% {top:5.5rem;} 20% {top:6rem;} 30% {top:6.5rem;} 40% {top:7rem;} 50% {top:7.5rem;} 60% {top:7rem;} 70% {top:6.5rem;} 80% {top:6rem;} 90% {top:5.5rem;} 100% {top:5rem;} } @-o-keyframes dowloadGif /* Opera */ { 0% {top:5rem;} 10% {top:5.5rem;} 20% {top:6rem;} 30% {top:6.5rem;} 40% {top:7rem;} 50% {top:7.5rem;} 60% {top:7rem;} 70% {top:6.5rem;} 80% {top:6rem;} 90% {top:5.5rem;} 100% {top:5rem;} } @keyframes mov_btnGif { 0% {width:5rem;} 10% {width:5.15rem;} 20% {width:5.30rem;} 30% {width:5.45rem;} 40% {width:5.60rem;} 50% {width:5.75rem;} 60% {width:5.60rem;} 70% {width:5.45rem;} 80% {width:5.30rem;} 90% {width:5.15rem;} 100% {width:5rem;} } @-moz-keyframes mov_btnGif /* Firefox */ { 0% {width:5rem;} 10% {width:5.15rem;} 20% {width:5.30rem;} 30% {width:5.45rem;} 40% {width:5.60rem;} 50% {width:5.75rem;} 60% {width:5.60rem;} 70% {width:5.45rem;} 80% {width:5.30rem;} 90% {width:5.15rem;} 100% {width:5rem;} } @-webkit-keyframes mov_btnGif /* Safari and Chrome */ { 0% {width:5rem;} 10% {width:5.15rem;} 20% {width:5.30rem;} 30% {width:5.45rem;} 40% {width:5.60rem;} 50% {width:5.75rem;} 60% {width:5.60rem;} 70% {width:5.45rem;} 80% {width:5.30rem;} 90% {width:5.15rem;} 100% {width:5rem;} } @-o-keyframes mov_btnGif /* Opera */ { 0% {width:5rem;} 10% {width:5.15rem;} 20% {width:5.30rem;} 30% {width:5.45rem;} 40% {width:5.60rem;} 50% {width:5.75rem;} 60% {width:5.60rem;} 70% {width:5.45rem;} 80% {width:5.30rem;} 90% {width:5.15rem;} 100% {width:5rem;} } @media screen and (min-width:175px) and (max-width:199px) { html {font-size:9px;} } @media screen and (min-width:200px) and (max-width:224px) { html {font-size:10px;} } @media screen and (min-width:225px) and (max-width:249px) { html {font-size:11px;} } @media screen and (min-width:250px) and (max-width:274px) { html {font-size:12px;} } @media screen and (min-width:275px) and (max-width:299px) { html {font-size:13px;} } @media screen and (min-width:300px) and (max-width:324px) { html {font-size:14px;} } @media screen and (min-width:325px) and (max-width:349px) { html {font-size:15px;} } @media screen and (min-width:350px) and (max-width:374px) { html {font-size:16px;} } @media screen and (min-width:375px) and (max-width:399px) { html {font-size:16.6px;} } @media screen and (min-width:400px) and (max-width:424px) { html {font-size:18.4px;} } @media screen and (min-width:425px) and (max-width:449px) { html {font-size:18px;} } @media screen and (min-width:450px) and (max-width:474px) { html {font-size:20px;} } @media screen and (min-width:475px) and (max-width:499px) { html {font-size:20px;} } @media screen and (min-width:500px) and (max-width:524px) { html {font-size:20px;} } @media screen and (min-width:525px) and (max-width:549px) { html {font-size:20px;} } @media screen and (min-width:550px) and (max-width:574px) { html {font-size:20px;} } @media screen and (min-width:575px) and (max-width:599px) { html {font-size:20px;} } @media screen and (min-width:600px) and (max-width:624px) { html {font-size:20px;} } @media screen and (min-width:625px) and (max-width:649px) { html {font-size:20px;} } @media screen and (min-width:650px) and (max-width:675px) { html {font-size:21px;} } @media screen and (min-width:674px) and (max-width:699px) { html {font-size:22px;} } @media screen and (min-width:700px) and (max-width:731px) { html {font-size:22px;} } @media screen and (min-width:730px) and (max-width:767px) { html {font-size:23px;} } @media screen and (min-width:768px) and (max-width:1023px) { html {font-size:24px;} } @media screen and (min-width:1024px) and (max-width:1100px) { html {font-size:25px;} } @media screen and (min-width:1101px) and (max-width:1200px) { html {font-size:26px;} } @media screen and (min-width:1201px) and (max-width:1300px) { html {font-size:27px;} .mu{right:0.1rem;} .balloon{right:0.5rem;} .logo_text{left:1rem;} .clouds_1{position:absolute;left:6rem;top:10rem;} .clouds_2{position:absolute;right:6rem;top:5rem;} .clouds_3{position:absolute;left:2rem;top:18rem;} #left_img img{height:4rem!important;} #left_img{left:0rem!important;} #right_img img{height:4rem!important;} #right_img{right:0rem!important;} .arrow{width:12rem!important;margin-left:-4rem!important;} #maotou{} } ul.scene{ width:31.5rem; height:auto; cursor: pointer; } .layer img{ width:30rem; margin: 0 auto; } .video-btn-div{ top:17.5rem; left:18rem; } @media screen and (max-width:1400px) { .balloon{} #carousel .o_img{ margin-top: 70px; height: 5rem; } ul.scene{ width:20rem; } .layer img{ width:20rem; } .video-btn-div{ top:11rem; left:11rem; } #carousel{ height: 12rem!important; } #carousel img{ height: 7.5rem; } #left_img,#right_img{ top:5rem!important; } } @media screen and (min-width:1301px) and (max-width:1400px) { html {font-size:28px;} .mu{right:0.1rem;} .balloon{right:1rem;} .logo_text{left:2rem;} .clouds_1{position:absolute;left:5rem;top:10rem;} .clouds_2{position:absolute;right:8rem;top:5rem;} .clouds_3{position:absolute;left:2rem;top:18rem;} .mouse{position:absolute;left:2rem;} } @media screen and (min-width:1401px) and (max-width:1500px) { html {font-size:27px;} .mu{right:1rem;} .logo_text{left:4rem;} .clouds_1{position:absolute;left:9rem;top:10rem;} .clouds_2{position:absolute;right:9rem;top:5rem;} .clouds_3{position:absolute;left:4rem;top:18rem;} .mouse{position:absolute;left:2rem;} } @media screen and (min-width:1501px) and (max-width:1600px) { html {font-size:27px;} .mu{right:3rem;} .balloon{right:7rem;} .clouds_1{position:absolute;left:10rem;top:10rem;} .clouds_2{position:absolute;right:8rem;top:5rem;} .clouds_3{position:absolute;left:5rem;top:19rem;} } @media screen and (min-width:1601px) and (max-width:1700px) { html {font-size:27px;} .mu{right:2rem;} .balloon{right:9rem;} .clouds_1{position:absolute;left:10rem;top:10rem;} .clouds_2{position:absolute;right:10rem;top:5rem;} .clouds_3{position:absolute;left:8rem;top:19rem;} } @media screen and (min-width:1701px) and (max-width:1800px) { html {font-size:27px;} .mu{right:2rem;} .balloon{right:10rem;} .clouds_1{position:absolute;left:12rem;top:10rem;} .clouds_2{position:absolute;right:10rem;top:5rem;} .clouds_3{position:absolute;left:8rem;top:19rem;} } @media screen and (min-width:1801px) and (max-width:1900px) { html {font-size:28px;} .mu{right:2rem;} .balloon{right:11rem;} .clouds_1{position:absolute;left:14rem;top:10rem;} .clouds_2{position:absolute;right:12rem;top:4rem;} .clouds_3{position:absolute;left:8rem;top:19rem;} } @media screen and (min-width:1901px) and (max-width:2000px) { html {font-size:29px;} .mu{right:7rem;} .balloon{right:9rem;} .clouds_1{position:absolute;left:14rem;top:10rem;} .clouds_2{position:absolute;right:12rem;top:4rem;} .clouds_3{position:absolute;left:8rem;top:19rem;} } @media screen and (min-width:2001px) and (max-width:2100px) { html { font-size:30px; } } @media screen and (min-width:2101px) and (max-width:2200px) { html { font-size:31px; } } @media screen and (min-width:2201px) and (max-width:2300px) { html { font-size:32px; } } @media screen and (min-width:2301px) and (max-width:2400px) { html { font-size:33px; } } @media screen and (min-width:2401px) and (max-width:2500px) { html { font-size:34px; } } @media screen and (min-width:2501px) and (max-width:2600px) { html { font-size:35px; } } @media screen and (min-width:2601px) and (max-width:2700px) { html { font-size:36px; } }