@charset "utf-8";
/* CSS Document */

#culture{margin: 0 auto; transition: all .35s; }
#culture.active {transform: translateX(-220px);}

#culture .container{ position: relative; margin:0 auto 80px auto;overflow:hidden;}
#culture .container>.item{ position: relative; width: 31%; height: 100%; margin-right: 2%; margin-bottom: 2%; float: left;overflow: hidden; box-sizing: border-box;}
#culture .container>.item:after{position: absolute;z-index: 1; left: 0;top: 0; background: rgba(53,59,73,.9); width: 100%;height: 100%;opacity: 0; content: '';transform: all .5s;}
#culture .container>.item:nth-child(3n){margin-right: 0;}
#culture .container>.item>.con{position: absolute;z-index: 3; left: 50px; top: 50px; width: 260px; box-sizing: border-box;padding: 30px; text-align: left; background: rgba(255,255,255,.8); transition: all .35s; }
#culture .container>.item>.con>.ico>i{font-size: 6rem; color: rgb(219 38 29);}
#culture .container>.item>.con>.tit{ position: relative; font-size: 2.2rem; color: #333;padding: 10px 0; }
#culture .container>.item>.con>.tit:after{position: absolute;z-index: 2;left: 0; bottom: 0; width: 40px;height: 2px;background: rgb(219 38 29); content: '';}
#culture .container>.item>.con>.txt{ padding: 15px 0; font-size: 1.6rem; line-height: 2.4rem; color: #333;}
#culture .container>.item>.img{text-align: left;overflow: hidden;}
#culture .container>.item>.img>img{ width: 100%;height: auto; transition: all 1s;}
#culture .container>.item:hover:after{opacity: 1;}
#culture .container>.item:hover .con{background: none;}
#culture .container>.item:hover .con>.ico>i{color: rgba(255,255,255,1);}
#culture .container>.item:hover .con>.tit:after{;background: rgba(255,255,255,.6);}
#culture .container>.item:hover .con>.tit{color: rgba(255,255,255,1);}
#culture .container>.item:hover .con>.txt{color: rgba(255,255,255,.6);}
#culture .container>.item:hover .img>img{ transform: scale(1.2);}

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


    #culture .container>.item>.con{left: 30px; top: 30px; width: 260px; padding: 30px;}
    #culture .container>.item>.con>.ico>i{font-size: 5.2rem; }
    #culture .container>.item>.con>.tit{ font-size: 2rem; }
    #culture .container>.item>.con>.txt{ padding: 12px 0; font-size: 1.4rem; line-height: 2rem;}



}

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


    #culture .container>.item>.con{ width: 240px; padding: 20px;}
    #culture .container>.item>.con>.ico>i{font-size: 4.2rem; }
    #culture .container>.item>.con>.tit{ font-size: 1.8rem; }
    #culture .container>.item>.con>.txt{ padding: 10px 0;}



}

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

    #culture .container>.item{  width: 49%; margin-right: 0;}
    #culture .container>.item:nth-child(3n){margin-right: 0;}
    #culture .container>.item:nth-child(even){float: right;}
    #culture .container>.item>.con{left: 50px; top: 50px; padding: 30px; }
    #culture .container>.item>.con>.ico>i{font-size: 6rem; }
    #culture .container>.item>.con>.tit{ font-size: 2.2rem;  }
    #culture .container>.item>.con>.txt{ padding: 15px 0; font-size: 1.6rem; line-height: 2.4rem; }



}

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

    #culture .container>.item>.con{ width: 240px; padding: 20px;}
    #culture .container>.item>.con>.ico>i{font-size: 4.2rem; }
    #culture .container>.item>.con>.tit{ font-size: 1.8rem; }
    #culture .container>.item>.con>.txt{ padding: 10px 0;}


}

@media only screen and (max-width: 780px){
    #culture .container>.item>.con{ left: 20px;top: 20px; width: 70%; background: none;}

}



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

    #culture .container>.item{float: none; width: 100%;}



}