@charset "utf-8";

/*====================

原css和layout合并。

prototype的样式。

尽量以间隔和大小来到排版达到效果。





模板所有区块,在临时样式中使用黑色背景，白色字，蓝色超链接。

清除所有区块自定义颜色。待设计需要，再自行在区块设置

======================*/







/*======================

设置模式中的临时样式。

实际使用时请删除

======================*/





#topbar .main,

#header .main,

#footer .main,

#container .main

{
    /* border: dashed 1px #ececec69; */
}













/*总体大小，样式重定义*/

*{-webkit-text-size-adjust:none;
    font-family: times new roman;
}/*禁用了这一属性，在chrome下放大网页，会导致其它元素均放大，而文字却依然为原定义的“12px”*/

body{font-size:16px;margin:0;padding:0;overflow-y:scroll; color: #5a5a5a;}

img{border:none;
    width: 100%;
}

/* 设置默认字体,用 ascii 字符表示，使得在任何编码下都无问题  */

body,button, input, select, textarea {
    /* font:12px/1  "microsoft yahei", "\5b8b\4f53", sans-serif; */
    /* line-height: 26px; */
    font-family: times new roman!important;
}





/*清除浮动*/

.clearfloat{clear:both;height:0;font-size:1px;line-height:0;}

.clearright{clear:right;height:0;font-size:1px;line-height:0;}

.clearleftt{clear:right;height:0;font-size:1px;line-height:0;}







/*连接颜色*/

/*20121208更新去掉背景透明，文字颜色设置*/

/*主要用于对抗layui才加body*/

body a           {text-decoration:none;color: #333;}

a:active    {text-decoration:none;}

a:visited   {text-decoration:none;}

a:hover     {text-decoration:none;}







 















/*

主要放置一些标题类的样式，字体的样式,例如文章标题，

sidebar标题，content的标题，其他list中的标题

 

h1:详细页面的产品、文章标题,目录名



h2:大板块的标题

h3:小版块标题



h4:sitebar中的版块标题



h5:文章，产品，列表中的标题

h6:文章，产品，列表中的副标题

*/



/*关于标题的样式设置*/

h1{font-size:36px;font-weight:700; line-height:36px}

h2{font-size: 20px;font-weight:700;/* color:#ff9900; */line-height:24px;}

h3{font-size:20px;font-weight:700; line-height:20px}

h4{font-size:18px;font-weight:700; line-height:18px}

h5{font-size:16px;font-weight:700; line-height:16px}

h6{font-size:14px;font-weight:700; line-height:14px}



/*标题通用样式*/

h1,h2,h3,h4,h5,h6{word-wrap:break-word;margin:0;padding:0;}

h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover{text-decoration:none;!important;}







.title-data{font-size:10px;color:#666666;}

.title-notice{font-size:12px;color:#AD3F40;}

.title-alarm{font-size:12px;color:#AD3F40;}

























/*图片悬停给效果*/

/*这是引用的基本结构*/

/*<div class="media">*/

/*<div class="overlay"></div>*/

/*<img src="" />*/

/*<div class="image-details"></div>*/

/*</div>*/





.media {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    overflow: hidden;
    position: relative;
}



.media:hover {

    cursor: pointer;

}



.overlay {

    background: rgba(0, 0, 0, 0.4);

    position: absolute;

    height: 100%;

    width: 100%;

    z-index: 3;

    opacity: 0;

    transition: all ease-in-out 0.2s;

}



.media:hover .overlay {

    opacity: 1;

}



.media img {

    width: 100%;

    z-index: -1;

    margin: auto;

    transform: scale(1);

    transition: all ease-in-out 0.2s;

}



.media:hover img {

    transform: scale(1.1);

    filter: blur(1px);

}



.image-details {

    text-align: center;

    color: white;

    font-size: 20px;

    z-index: 4;

    position: absolute;

    top: 100%;

    opacity: 0;

    transition: all ease-in-out 0.2s;

}



.media:hover .image-details {

    top: 40%;

    opacity: 1;

}



@media only screen and (max-width: 900px) {

    .media {

        width: 70%;

        height: 70%;

    }

}



/*图片悬停给效果*/