@charset "utf-8";
/* 全局样式
----------------------------------------------*/
html,body{ height:100%; font-size:10px;  }
body,h1,h2,h3,p,dl,dd,ol,ul,th,td,form,fieldset,input,button,textarea,img{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:"Microsoft Yahei"; background:#f5f5f5; }
ol,ul{ list-style:none; }
.arrow{ position:absolute; display:block; left:50%; bottom:5px; margin-left:-10px; width:25px; height:18px; background:url("../images/arrow.png") center center no-repeat; background-size:contain; z-index:999; animation:start 1.5s infinite ease-in-out; -webkit-animation:start 1.5s infinite ease-in-out; }
.swiper-container{ width:100%; height:100%; }
.bg-1{ background:#ebebeb; }
.bg-2{ background:#fafafa; }
.bg-3{ background:#67217a; }
.bg-4{ background:#8dd503; }
.bg-5{ background:#3799e0; }
.bg-6{ background:#19a155; }
.bg-7{ background:#d04639; }
.title{ position:absolute; top:8%; left:0; right:0; text-align:center; }
	.title h1{ margin-bottom:.2rem; color:#333; font-size:1.2rem; font-weight:normal; }
	.title p{ color:#999; font-size:.6rem; }
	.title.white h1{ color:#fff; }
	.title.white p{ color:#f0f0f0; }
	.title.bottom{ top:auto; bottom:10%; }
.img-1{ position:absolute; top:5rem; left:0; right:0; bottom:0; display:flex; justify-content:center; align-items:center; }
	.img-1 img{ display:block; max-width:88%; max-height:88%; }
.img-2{ position:absolute; top:6rem; left:5%; right:5%; bottom:8%; }
	.img-2 .img-box-1{ position:absolute; top:15%; bottom:15%; left:25%; right:25%; display:flex; justify-content:center; align-items:center; }
	.img-2 .img-box-2{ position:absolute; top:0; bottom:0; left:0; right:60%; display:flex; justify-content:center; align-items:center; }
	.img-2 .img-box-3{ position:absolute; top:0; bottom:0; left:60%; right:0; display:flex; justify-content:center; align-items:center; }
	.img-2 .img-box-1>img,
	.img-2 .img-box-2>img,
	.img-2 .img-box-3>img{ display:block; max-width:100%; max-height:100%; }
.img-3{ position:absolute; top:6rem; left:2%; right:2%; bottom:8%; }
	.img-3 .img-box-1{ position:absolute; top:55%; bottom:0; left:0; right:0; display:flex; justify-content:center; align-items:center; }
	.img-3 .img-box-2{ position:absolute; top:-15%; bottom:15%; left:0; right:0; display:flex; justify-content:center; align-items:center; }
	.img-3 .img-box-3{ position:absolute; top:5%; bottom:66%; left:10%; right:10%; display:flex; justify-content:center; align-items:center; }
	.img-3 .img-box-1>img,
	.img-3 .img-box-2>img,
	.img-3 .img-box-3>img{ display:block; max-width:100%; max-height:100%; }
.img-5{ position:absolute; top:0; left:0; right:0; bottom:0; display:flex; justify-content:center; align-items:center; }
	.img-5 .img-box{ position:absolute; top:8%; left:10%; right:10%; bottom:22%; display:flex; justify-content:center; align-items:center; }
	.img-5 .img-box>img{ display:block; max-width:95%; max-height:95%; }
	.img-5>img{ display:block; max-width:90%; max-height:90%; }
.img-6{ position:absolute; top:6rem; left:8%; right:8%; bottom:8%; }
	.img-6 .left{ position:absolute; top:0; left:0; right:55%; bottom:0; display:flex; justify-content:flex-end; align-items:center; }
	.img-6 .left img{ display:block; max-width:100%; max-height:100%; }
	.img-6 .right{ position:absolute; top:0; left:40%; right:0; bottom:0; display:flex; justify-content:flex-start; align-items:center; }
	.img-6 .right img{ display:block; max-width:100%; max-height:100%; }

/*响应式布局
----------------------------------------------*/
@-webkit-keyframes start{ 0%, 30%{ opacity:0; -webkit-transform:translate(0, 10px); }
 60%{ opacity:1; -webkit-transform:translate(0, 0); }
 100%{ opacity:0; -webkit-transform:translate(0, -8px); }
}
@-moz-keyframes start{ 0%, 30%{ opacity:0; -moz-transform:translate(0, 10px); }
 60%{ opacity:1; -moz-transform:translate(0, 0); }
 100%{ opacity:0; -moz-transform:translate(0, -8px); }
}
@keyframes start{ 0%, 30%{ opacity:0; transform:translate(0, 10px); }
 60%{ opacity:1; transform:translate(0, 0); }
 100%{ opacity:0; transform:translate(0, -8px); }
}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}