static/watero/css/newapp.css

/*未经授权不可作为商业用途，作者漆寒姣联系QQ：522169706*/
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 { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul{ list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0;width: 100%;height: 100%;text-align: center;}
body div{-webkit-backface-visibility: hidden;-webkit-perspective:1000;}
html{height: 100%;}
body{height: 100%;background: #fff;}
.loading-bg{width: 100%;height: 100%;background-color:rgba(0,0,0,.5);position: fixed;left: 0;top: 0;z-index: 999;color: #ccc;opacity: .7;}
.loading-bg:after{content: 'loading...';position: absolute;left: 50%;top: 55%;-webkit-transform: translateX(-45%);transform: translateX(-45%);s}
.loading {
    width: 3px; height:3px;
    border-radius: 100%;
    box-shadow: 0 -10px 0 1px currentColor,           /* top, 1px expand */
                10px 0px currentColor,                /* right */
                0 10px currentColor,                  /* bottom */
                -10px 0 currentColor,                 /* left */

                -7px -7px 0 .5px currentColor,        /* left-top, 0.5px expand */
                7px -7px 0 1.5px currentColor,        /* right-top, 1.5px expand */
                7px 7px currentColor,                 /* right-bottom */
                -7px 7px currentColor;                /* left-bottom */
	-webkit-animation: loading 1s step-start infinite;
	animation: loading 1s step-start infinite;
	/*center*/
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	margin: auto;
}
.lock-wrap {position: absolute;left: 0;width: 100%;height: 100%;background: #348de0;z-index: 10;display: none;}
.lock-wrap .lock {position: absolute;left: 50%;top: 50%;width: 380px;height: 30px;margin: -15px 0 0 -190px;text-align: center;color: #fff;font-size: 25px;}
.deg {-webkit-animation: music 2s linear 0s infinite;}
.music {position: absolute;top: 15px;right: 15px;width: 35px;height: 35px;background: url(../images/music.png) center center no-repeat;z-index: 98;background-size:35px;}
.music_btn{position: absolute;top:0;right: 1px;width: 50px;height: 50px;background: url(../images/music.gif) center center no-repeat; background-size: 60px 60px;z-index: 98;}
@-webkit-keyframes music {from {-webkit-transform: rotate(360deg);}to {-webkit-transform: rotate(0deg);}}
.one-box{position: relative;margin-top: 50px;}
.one-2{position: absolute;left: 0;top:20%;width: 100%;opacity: .7;}
.one-4{position: fixed;width:100%;left: 0;bottom:55px;color: #fff;text-align: center;font-size: 12px;}
.two-box-3{text-align: center;}
.two-box-3>div{display: inline-block;width: 30%;}
.bg_1,.bg_2,.bg_3,.bg_4,.bg_5,.bg_6,.bg_7,.bg_8{overflow: hidden;height: 100%;width: 100%;position: relative;}
.bg_1{background:url(../images/1-bg.jpg) top center no-repeat;background-size:100% 100%;}
.bg_2{background:#fff;}
.bg_3{background:#fff;}
.bg_4{background:#fff;}
.bg_5{background:#fff;}
.bg_6{background:#fff;}
.bg_7{background:url(../images/7-bg.jpg) top center no-repeat; background-size: 100% 100%;}
.bg_8{background:url(../images/8-bg.jpg) top center no-repeat; background-size: 100% 100%;}
.two-1{font-size:50px;text-align: center;color: #333;width:270px;margin: 20px auto 10px auto;}
.two-2{background: #5bc2da;color: #fff;width:230px;text-align: center;margin:0 auto 30px auto;padding:5px; border-radius:20px;}
.two-3{margin: 10px 0;}
.three-box-5{text-align: center;position: relative;}
.three-box-5 .iteam{width: 30%;display: inline-block;}
.three-box-5 .iteam:first-child{padding:0 10% 5% 5%;}
.three-box-5 .iteam:nth-of-type(2){padding:0 5% 5% 10% ;}
.three-box-5 .iteam:nth-of-type(3){padding:5% 10% 0 5%;}
.three-box-5 .iteam:nth-of-type(4){padding:5% 5% 0 10%;}
.three-box-5 .center{position: absolute;width: 30%;left:35%; top:30%;border-radius: 50%;overflow: hidden;}
.six-1{font-size:38px;text-align: center;color: #333;width:270px;margin: 20px auto 10px auto;}
.six-2{background: #5bc2da;color: #fff;width:280px;text-align: center;margin:0 auto 30px auto;padding:5px; border-radius:20px;}
.my-input-box input{margin:5px 0;border: 0;background: #cbe1e8;border-radius: 1px;padding: 5px;color: #0e5e70;width: 190px;}
.my-input-box {margin: 10px 0;}
.my-input-box input:focus,.btn_yes:focus{ outline: none; }
.my-input-box input::-webkit-input-placeholder{color: #0e5e70;}
.eight-1{margin:50px 0 40px 0;}

.btn_yes{padding: 7px 12px;border: 0;border-radius: 5px;background: #fff;width: 200px;text-align: center;color: #0e5e70;}
.bg_1 img,.bg_2 img,.bg_3 img,.bg_4 img,.bg_5 img,.bg_6 img,.bg_7 img,.bg_8 img{width:100%;}
.move {
	display: block;
	width: 100%;
	height: 2.2em;
	position: absolute;
	bottom: 8px;
	left:0;
	border:0;
	border-radius: 50%;
	background: url(../images/up.png) center center no-repeat;
	background-size:2em;
	z-index: 99;
	opacity: .8;
	-webkit-animation: arrow 1s ease;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-delay: .5s;
	-webkit-animation: arrow 1.5s infinite ease-in-out
}
@-webkit-keyframes arrow {
	0% {
		opacity: 0;
		-webkit-transform: translate(0px, 5px)
	}
	50% {
		opacity: 1;
		-webkit-transform: translate(0px, -5px)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0px, -10px)
	}
}
.leftin{-webkit-animation: left_in 9.2s ease-in 0s;}
@-webkit-keyframes left_in {0% {left: -100%;}70% {left: 4%;}80% {left: -4%;}90% {left: 2%;}100% {left: 0;}}
.rightin{-webkit-animation: right_in 1.2s ease-in 0s;}
@-webkit-keyframes right_in {0% {-webkit-transform: translateX(100%);}70% {-webkit-transform: translateX(-5%);}80% {-webkit-transform: translateX(5%);}90% {-webkit-transform: translateX(-3%);}100% {-webkit-transform: translateX(0);}}
.leftin_1{-webkit-animation: leftin_1 2s linear 0s;}
@-webkit-keyframes leftin_1 {0% {-webkit-transform: translateX(-150%);}50% {-webkit-transform: translateX(8%);}55% {-webkit-transform: translateX(0);}}
.leftin_2{-webkit-animation: leftin_2 2s linear 0s;}
@-webkit-keyframes leftin_2 {0% {-webkit-transform: translateX(-150%);}60% {-webkit-transform: translateX(8%);}65% {-webkit-transform: translateX(0);}}
.leftin_3{-webkit-animation: leftin_3 2s linear 0s;}
@-webkit-keyframes leftin_3 {0% {-webkit-transform: translateX(-150%);}70% {-webkit-transform: translateX(8%);}75% {-webkit-transform: translateX(0);}}
.leftin_4{-webkit-animation: leftin_4 2s linear 0s;}
@-webkit-keyframes leftin_4 {0% {-webkit-transform: translateX(-150%);}80% {-webkit-transform: translateX(8%);}85% {-webkit-transform: translateX(0);}}
.rightin{-webkit-animation: right_in 1.2s linear 0s;}
@-webkit-keyframes right_in {0% {-webkit-transform: translateX(100%);}70% {-webkit-transform: translateX(-8%);}80% {-webkit-transform: translateX(8%);}90% {-webkit-transform: translateX(-5%);}100% {-webkit-transform: translateX(0);}}
.rightin_1{-webkit-animation: rightin_1 2s linear 0s;}
@-webkit-keyframes rightin_1 {0% {-webkit-transform: translateX(150%);}50% {-webkit-transform: translateX(-8%);}60% {-webkit-transform: translateX(0);}}
.rightin_2{-webkit-animation: rightin_2 2.1s linear 0s;}
@-webkit-keyframes rightin_2 {0% {-webkit-transform: translateX(150%);}58% {-webkit-transform: translateX(-8%);}70% {-webkit-transform: translateX(0);}}
.rightin_3{-webkit-animation: rightin_3 2.2s linear 0s;}
@-webkit-keyframes rightin_3 {0% {-webkit-transform: translateX(150%);}66% {-webkit-transform: translateX(-8%);}80% {-webkit-transform: translateX(0);}}
.rightin_4{-webkit-animation: rightin_4 2.3s linear 0s;}
@-webkit-keyframes rightin_4 {0% {-webkit-transform: translateX(150%);}74% {-webkit-transform: translateX(-8%);}90% {-webkit-transform: translateX(0);}}
.rightin_5{-webkit-animation: rightin_5 2.4s linear 0s;}
@-webkit-keyframes rightin_5 {0% {-webkit-transform: translateX(150%);}82% {-webkit-transform: translateX(-8%);}95% {-webkit-transform: translateX(0);}}
.smallbig{-webkit-animation: smallbig 1.8s linear 0s;}
@-webkit-keyframes smallbig {0% {-webkit-transform: scale(0);opacity: 0;}80% {-webkit-transform: scale(0);opacity: 0;}90% {-webkit-transform: scale(1.1);}100% {-webkit-transform:scale(1);}}
/*h=417*2=834 iPhone4*/
@media (device-height:480px) and (min-width:320px) and (-webkit-min-device-pixel-ratio:2){
	.two-1{font-size: 20px;margin: 10px auto 10px auto;}
	.two-2{margin: 0 auto 10px auto;}
	.eight-1{margin:10px 0 10px 0;}
}
/*h=480*2=960 iPhone5,iPhone SE*/
@media (device-height:568px) and (min-width:320px) and (-webkit-min-device-pixel-ratio:2){
	.two-1{font-size: 40px;margin: 15px auto 10px auto;}
	.two-2{margin: 0 auto 20px auto;}
	.eight-1{margin:30px 0 20px 0;}
}
/*h=567*1.5=850 Android*/
@media (device-height:640px) and (min-width:360px){
	
}
/*h=603*2=1206 iPhone6,iPhone7*/
@media (device-height:667px) and (min-width:375px) and (-webkit-min-device-pixel-ratio:2){
	
}
/*h=665*2=1330 iPhone6 plus*/
@media (device-height:736px) and (min-width:414px) and (-webkit-min-device-pixel-ratio:2){
	
}
/*横屏*/
@media screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
.lock-wrap {display: block;}
}