html {margin:0; padding: 0; height: 100%; }
body {font-family: "微软雅黑", "Microsoft YaHei UI", "Microsoft YaHei", serif; font-size: 16px; margin: 0; padding: 0; height: 100%; box-sizing: border-box;}
a:link {text-decoration: none; color: inherit; text-decoration-color: inherit;}
/* a:hover {text-decoration: underline;} */

/*Flex布局 - 用于容器，表示方向（row：横向为主轴，column：纵向为主轴）*/
.flex-row {display: flex; flex-direction: row;}
.flex-column {display: flex; flex-direction: column;}

/*Flex布局 - 用于容器，表示（主轴上）是否拆行（默认值：nowrap）*/
.flex-wrap {flex-wrap: wrap;}
.flex-nowrap {flex-wrap: nowrap;}

/*Flex布局 - 用于容器，表示主轴上的对齐方式（默认值：flex-start）*/
.flex-main-start {justify-content: flex-start;}
.flex-main-end {justify-content: flex-end;}
.flex-main-center {justify-content: center;}
.flex-main-between {justify-content: space-between;}
.flex-main-around {justify-content: space-around;}
.flex-main-stretch {justify-content: stretch;}

/*Flex布局 - 用于容器，表示元素在交叉轴上的对齐方式（默认值：stretch）*/
.flex-cross-start {align-items: flex-start;}
.flex-cross-end {align-items: flex-end;}
.flex-cross-center {align-items: center;}
.flex-cross-stretch {align-items: stretch;}
.flex-cross-baseline {align-items: baseline;}

/*Flex布局 - 用于容器，表示多个元素作为一个整体在交叉轴上的对齐方式（默认值：stretch）*/
.flex-content-start {align-content: flex-start;}
.flex-content-end {align-content: flex-end;}
.flex-content-center {align-content: center;}
.flex-content-stretch {align-content: stretch;}
.flex-content-between {align-content: space-between;}
.flex-content-around {align-content: space-around;}

/*Flex布局 - 用于元素，表示单个元素在交叉轴上的对齐方式（默认为auto，表示继承自上一级）*/
.flex-self-start {align-self: flex-start;}
.flex-self-end {align-self: flex-end;}
.flex-self-center {align-self: center;}
.flex-self-stretch {align-self: stretch;}
.flex-self-baseline {align-self: baseline;}

/*Flex布局 - 用于元素，表示单个元素是否允许比例增长，默认：0*/
.flex-grow {flex-grow: 1;}
.flex-no-grow {flex-grow: 0;}

/*Flex布局 - 用于元素，表示单个元素是否允许比例收缩，默认：1*/
.flex-shrink {flex-shrink: 1;}
.flex-no-shrink {flex-shrink: 0;}

/*--Animations -------------------------------------------------------------*/
@keyframes slide-down-return {
    0% {transform: translateY(-200px); opacity: 0;}
    75% {transform: translateY(40px); opacity: 0.8;}
    100% {transform: translateY(0px); opacity: 1;}
}

@keyframes slide-up {
    0% {opacity: 0;transform: translateY(100px);}
    100% {opacity: 1;transform: translateY(0)}
}

.ani-slide-down-return {
    animation: slide-down-return 2000ms cubic-bezier(0, 0.7, 0.6, 1) 0s;
    -webkit-animation: slide-down-return 2000ms cubic-bezier(0, 0.7, 0.6, 1) 0s;
}
.ani-slide-up {animation: slide-up 1000ms ease-out 0s;}

.hide {display: none;}


.main-page {background: url("../imgs/watermark_blue.png") top center no-repeat;}
.main-logo {text-align: center; padding-top: 160px}
.main-logo .logo-img {margin: auto; border-radius: 6px; width: 400px; height: 347px;}

.info-panel {width: 300px; margin-left: auto; margin-right: auto;}
.info-panel .item  {width: 200px; text-align: center;}
.info-panel .item .title  {font-size: 14px; font-weight: 200; color: #333; height: 30px;}
.info-panel .item img {width: 160px; height: 160px;}

.action-panel {text-align: center; padding-top: 40px;}

.action-panel .button {
    background-color: #a8d4ff; border-radius: 5px; border: none; color: #fff; font-weight: lighter;
    display: inline-block; height: 36px; line-height: 34px; width: 160px;
}

/*平板 */
@media screen and (max-width: 1440px) {


}

/*手机屏幕、小平板 */
@media screen and (max-width: 1024px) {

}