@charset "utf-8";

.topic{position:relative;}
.topic dt{position:absolute; top:50%; left:50%; margin-top:-40px; margin-left:-109px;}

.mode-card li{float:left; width:33.33333%;}
.mode-card li a{position:relative;}
.mode-card li a span{display:block; width:100%; height:100%; overflow:hidden;}
.mode-card li a span img{display:block; width:100%; height:auto;}
.mode-card li a .effects{position:absolute; right:0; left:0; top:0; bottom:0; z-index:2;}
.mode-card li a .effects:before{position:absolute; right:0; left:0; top:0; bottom:0; margin:17% 27%; background:rgba(0,0,0,0.15); content:""; z-index:1;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;}
.mode-card li a .effects .table{position:relative; display:table; width:100%; height:100%;}
.mode-card li a .effects .table .inline{position:relative; z-index:2; display:table-cell; vertical-align:middle; width:100%; height:100%; text-align:center;}
.mode-card li a .effects .table .inline .font{color:#fff; font-size:1.25em; line-height:50px;}
.mode-card li a .effects .table .inline h1{}
.mode-card li a .effects .table .inline h2{display:none;}
.mode-card li a:hover .effects:before{margin:0;}
.mode-card li a:hover .effects .table .inline h1{display:none;}
.mode-card li a:hover .effects .table .inline h2{display:block;}

@media (max-width:1440px) {

}

@media (max-width:1360px) {

}

@media (max-width:1199px) {

}

@media (max-width:991px) {
.mode-card li a .effects:before{margin:15% 20%;}
.mode-card li a .effects .table .inline .font{font-size:1.125em;}
}


/* xs mobile*/
@media (max-width: 768px) {

}

@media (max-width:640px) {
.topic dt{position:static; padding:15px 0; margin-top:0; margin-left:0; text-align:center;}
.topic dd{display:none;}
.whjy .topic dt{background-color:#e5b688;}
.sbmz .topic dt{background-color:#86bfe8;}
.jycy .topic dt{background-color:#889ee9;}
.ylws .topic dt{background-color:#e36f6f;}
.hysy .topic dt{background-color:#e1a5be;}
.zffw .topic dt{background-color:#c2c28c;}
.jtcx .topic dt{background-color:#5e88d0;}
.gysy .topic dt{background-color:#647bcb;}
.qykb .topic dt{background-color:#dab89c;}
.jyns .topic dt{background-color:#488be4;}
.snfw .topic dt{background-color:#77a179;}
}

@media (max-width: 480px) {
.mode-card li a .effects:before{margin:10% 15%;}
}

@media (max-width: 400px) {
.mode-card li{width:100%;}
.mode-card li a .effects:before{margin:15% 25%;}
}

@media (max-width: 360px){

}