@charset "utf-8";

#support{margin: 0 auto;  }

#support>.display{margin: 0 auto;padding: 100px 0;}
#support>.display .list{ margin: 0 auto;}
#support>.display .list>ul{margin: 0 auto;}
#support>.display .list>ul>li{ position: relative; display: block;float: left;width:48.5%; margin-bottom: 3%; background: #fff; transition: all .35s; }
#support>.display .list>ul>li:nth-child(even){float: right;}
#support>.display .list>ul>li>a{display:block;padding: 30px;}
#support>.display .list>ul>li>a:before, #support>.display .list>ul>li>a:after { content: ""; display: table; }
#support>.display .list>ul>li>a:after { clear: both; }
#support>.display .list>ul>li>a { zoom: 1; }
#support>.display .list>ul>li .ico{text-align: left;}
#support>.display .list>ul>li .ico>i{font-size: 6rem; color: #ccc;}
#support>.display .list>ul>li .box{ width: 86%; position: relative;box-sizing: border-box;}
#support>.display .list>ul>li .box>.tit{font-size:2rem; color: #333; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: all .35s;}
#support>.display .list>ul>li .box>.time{ position: relative; font-size: 1.4rem; color: #ccc; padding-top: 5px;}
#support>.display .list>ul>li:hover{box-shadow: 4px 3px 20px rgba(0,0,0,.16);}
#support>.display .list>ul>li:hover .ico>i{color: #154a9a;}
#support>.display .list>ul>li:hover .box>.tit{color: #154a9a;}

#support>.view{ position: relative; margin:0 auto; width: 90%;}
#support>.view>.title{ text-align: left;font-size: 3.6rem; font-weight:700;color: #333; border-bottom: 1px solid #ddd; padding: 30px 30px 10px 0; }
#support>.view>.close{ position: absolute;z-index: 43;right: 0;top: 20px; transition: all .5s;}
#support>.view>.close>i{font-size: 4.2rem; font-weight: 200; color: #154a9a; cursor: pointer;}
#support>.view>.close:hover{transform:rotate(180deg);}
#support>.view>.content{ position: relative; margin:40px auto 0 auto; overflow-y: auto;text-align: left; font-size: 1.6rem; line-height: 2.4rem; color: #666; width: 100%;padding: 5px 0; box-sizing: border-box;}
#support>.view>.content::-webkit-scrollbar {width:5px;height: 1px;}
#support>.view>.content::-webkit-scrollbar-thumb {background:#666;}
#support>.view>.content::-webkit-scrollbar-track { box-shadow: 0 0 0 rgba(255,255,255,1); border-radius: 10px;background: none;}
#support>.view>.content>p{padding: 5px 0;}
#support>.view>.content table{border: 1px solid #ddd;box-sizing: border-box; width: 100%;}
#support>.view>.content table td{padding: 10px; border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;}
#support>.view>.content img{max-width: 100%;height: auto;}


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

    #support>.display .list>ul>li .box{ width: 80%;}
    #support>.display .list>ul>li .box>.tit{font-size:1.8rem;}



}

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

    #support>.view>.title>.tit{font-size: 3rem;}

}


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

    #support>.display .list>ul>li .box{ width: 75%;}

}


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





}

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

    #support>.display .list>ul>li{float: none; width: 100%;}
    #support>.display .list>ul>li:nth-child(even){float: none;}
    #support>.display .list>ul>li .box{width: 86%;}
    #support>.display .list>ul>li .box>.tit{font-size:1.6rem;}

    #support>.view>.title>.tit{font-size: 2.4rem;}
    #support>.view .content{ font-size: 1.4rem; line-height: 2.4rem;}
    #support>.view .content img{ max-width: 100%;}


}


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

    #support>.display{padding: 50px 0;}
    #support>.display .list>ul>li .box{width: 80%;}


    #support>.view>.title>.tit{font-size: 2rem;}
    #support>.view>.close>i{font-size: 3.2rem; }


}


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

    #support>.display .list>ul>li .ico>i{font-size: 5rem;}
    #support>.display .list>ul>li .box>.txt{ font-size: 1.3rem; }


}