@charset "utf-8";

#case{margin: 0 auto;  }

#case>.display{margin: 0 auto;padding: 100px 0;}
#case>.display .select{ position: relative;z-index: 90; text-align: left;margin: 0 auto;}
#case>.display .select>.current{ display: none; position: relative; font-size: 1.6rem; color: #154a9a; background: #fff;padding: 10px 40px 10px 20px;  cursor: pointer;  border: 1px solid #ddd; text-align:left;transition: all .35s;}
#case>.display .select>.current:after{position: absolute;z-index: 1; right: 10px;top: 50%; width: 20px;height: 20px; line-height: 20px; text-align: center; font-size: 2rem;font-weight: bold; color: #00a687; transform: translateY(-50%); content: '+'; transition: all .35s;}
#case>.display .select>.dropdown{margin: 0 auto;text-align: center;}
#case>.display .select>.dropdown>ul>li{display: inline-block;vertical-align: middle; padding:0 20px;}
#case>.display .select>.dropdown>ul>li>a{display: block;}
#case>.display .select>.dropdown>ul>li>a .ico{ position: relative; text-align:center; border: 1px solid #ddd;padding: 30px; background: #fff;  border-radius: 100%;}
#case>.display .select>.dropdown>ul>li>a .ico>span{ position: relative; display: block; width: 60px;height: 60px;overflow: hidden;}
#case>.display .select>.dropdown>ul>li>a .ico>span img{ position: absolute;z-index: 1; left: 0;top: 0;width: 100%;  filter: grayscale(100%);opacity: .5; transition: all .35s;}
#case>.display .select>.dropdown>ul>li>a .tit{ padding-top: 10px; font-size: 1.6rem; color: #666;transition: all .35s;}
#case>.display .select>.dropdown>ul>li>a:hover .ico>span img{filter: grayscale(0);opacity: 1;}
#case>.display .select>.dropdown>ul>li.active .ico{background: #154a9a;}
#case>.display .select>.dropdown>ul>li.active .ico>span img{top: -60px;opacity: 1;}
#case>.display .select>.dropdown>ul>li.active .tit{color: #154a9a; font-weight: bold;}


#case>.display .list{ margin: 0 auto; padding: 50px 0;}
#case>.display .list>ul{margin: 0 auto;}
#case>.display .list>ul>li{ position: relative; display: block;float: left;width:22.75%; margin-right: 3%; margin-bottom: 3%; overflow: hidden;  background: #fff; transition: all .35s; }
#case>.display .list>ul>li:nth-child(4n){margin-right: 0;}
#case>.display .list>ul>li .img{ position: relative; width: 100%;background:#fff; overflow: hidden;  text-align:center; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center; overflow: hidden;}
#case>.display .list>ul>li .img>img{ width:auto; max-width: 100%; max-height:100%; transition: all .8s;}
#case>.display .list>ul>li .tit{ position: absolute; left: 0;bottom: 0; font-size:1.6rem; color: #fff; text-align: center; background: rgba(0,0,0,.6); width: 100%; padding: 20px 0;  text-overflow:ellipsis; white-space: nowrap; overflow: hidden; transition: all .35s;}
#case>.display .list>ul>li:hover{box-shadow: 4px 3px 20px rgba(0,0,0,.16);}
#case>.display .list>ul>li:hover .img>img{transform: scale(1.05);}
#case>.display .list>ul>li:hover .tit{transform: scale(1.1); background: rgba(0,165,135,.8) }



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

    #case>.display .select>.dropdown>ul>li{padding:0 16px;}
    #case>.display .select>.dropdown>ul>li>a .ico{ padding: 25px;}
    #case>.display .select>.dropdown>ul>li>a .ico>span{ width: 50px;height: 50px;}
    #case>.display .select>.dropdown>ul>li.active .ico>span img{top: -50px;}






    #case>.display .list>ul>li{width:31.33%; }
    #case>.display .list>ul>li:nth-child(4n){margin-right: 3%;}
    #case>.display .list>ul>li:nth-child(3n){margin-right: 0;}
    #case>.display .list>ul>li .tit{font-size:1.6rem;}



}


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

    #case>.display .select{display: inline-block;}
    #case>.display .select>.current{display: inline-block;}
    #case>.display .select>.current.active{border-bottom: 0;}
    #case>.display .select>.dropdown{display: none; position: absolute;z-index: 10;  left: 0; text-align: left; width: 100%; background: #fff; border: 1px solid #ddd; border-top: 1px solid #eee; box-sizing: border-box;  padding: 10px;}
    #case>.display .select>.dropdown>ul>li{display: block;vertical-align: middle; padding:5px 10px!important;}
    #case>.display .select>.dropdown>ul>li>a{display: block;}
    #case>.display .select>.dropdown>ul>li>a .ico{display: none;}
    #case>.display .select>.dropdown>ul>li>a .tit{padding-top: 0; font-size: 1.6rem; color: #666;transition: all .35s;}


}



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


    #case>.display .select>.dropdown>ul>li{padding:0 10px;}
    #case>.display .select>.dropdown>ul>li>a .ico{ padding: 20px;}
    #case>.display .select>.dropdown>ul>li>a .ico>span{ width: 42px;height: 42px;}
    #case>.display .select>.dropdown>ul>li.active .ico>span img{top: -42px;}


    #case>.display .list>ul>li{width:48%; margin-right: 0; }
    #case>.display .list>ul>li:nth-child(4n){margin-right: 0;}
    #case>.display .list>ul>li:nth-child(3n){margin-right: 0;}

    #case>.display .list>ul>li:nth-child(even){float: right;}


}


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

    #case>.display .select>.dropdown>ul>li{padding:0 5px;}
    #case>.display .select>.dropdown>ul>li>a .ico{ padding: 15px;}
    #case>.display .select>.dropdown>ul>li>a .ico>span{ width: 36px;height: 36px;}
    #case>.display .select>.dropdown>ul>li.active .ico>span img{top: -36px;}
    #case>.display .select>.dropdown>ul>li>a .tit{font-size: 1.4rem; }

    #case>.display .list>ul>li .tit{font-size:1.2rem;}

}

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


}

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

    #case>.display .select{display: block;}
    #case>.display .select>.current{display: block;}

    #case>.display{padding: 50px 0;}



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

    #case>.display .list>ul>li{display: block;float: none!important;width:100%; margin-right: 0;  height: auto; padding-bottom: 30px; }


}