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


#culture{margin: 0 auto; padding: 150px 0;}

#culture .title{ position: relative; text-align: center; margin: 0 auto;}
#culture .title>h3{ position: relative;z-index: 20; font-size: 4rem; padding:30px 0 20px 0; font-weight: bold; color: #333; text-transform: uppercase;}
#culture .title>h3:after{position: absolute;z-index: 1; left: 50%; bottom: 0;width:50px;height: 4px; background: #c7000c; transform: translateX(-50%); content: '';}
#culture .title>h4{position: absolute;z-index: 1; left: 50%; top: 0; width: 100%; font-size: 6rem; color: #f3f3f3; transform: translateX(-50%); text-transform: uppercase;}

#culture .layout{margin: 0 auto; padding: 100px 0; }
#culture .layout>.content{margin: 0 auto;}
#culture .layout>.content>.item{ position: relative; display: block; float: left; width: 49%; margin-bottom: 2%; overflow: hidden;}
#culture .layout>.content>.item:after{position: absolute;z-index: 1; left: 0; bottom: 0; width: 100%;height: 100%; background: rgba(0,0,0,.5); content: ''; transition: all .35s;}
#culture .layout>.content>.item:nth-child(even){float: right;}
#culture .layout>.content>.item .box{position: absolute;z-index: 20; left: 50%; top: 0; width: 80%; padding: 100px 0; text-align: left; transform: translateX(-50%);}
#culture .layout>.content>.item .box>.ico{display: block; transition: all .35s;}
#culture .layout>.content>.item .box>.ico>img{ width: 80px; height: auto;}
#culture .layout>.content>.item .box>.tit{ padding: 10px 0; font-size: 3rem; font-weight: bold; color: #fff;transition: all .35s;}
#culture .layout>.content>.item .box>.slogan{ font-size: 1.8rem; color: #fff; transition: all .35s;}
#culture .layout>.content>.item .box>.calligraphy{padding-top: 10px; transition: all .35s;}
#culture .layout>.content>.item .box>.intro{ opacity: 0; font-size: 1.4rem; line-height: 1.8rem; color: #fff; transition: all .5s;}
#culture .layout>.content>.item .box>.intro>span{position: relative; padding: 20px;}
#culture .layout>.content>.item .box>.intro>span:after{position: absolute;z-index: 12; left: 0; top: 22px; font-size: 5rem; font-family: Arial; content: '“';}
#culture .layout>.content>.item .box>.intro>span:before{ position: absolute;z-index: 12; right: 0;bottom: 0; font-size: 5rem; font-family: Arial; content: "”";}
#culture .layout>.content>.item .bg>img{width: 100%;height: auto;}
#culture .layout>.content>.item:hover:after{background: rgba(199,0,12,.6);}
#culture .layout>.content>.item:hover .ico{opacity: 0; transform: translateY(-40px);}
#culture .layout>.content>.item:hover .tit{ font-size: 2.6rem; transform: translateY(-100px);}
#culture .layout>.content>.item:hover .slogan{opacity: 0; font-size: 1.4rem; transform: translateY(-100px);}
#culture .layout>.content>.item:hover .calligraphy{opacity: 0; height: 0; transform: translateY(-100px);}
#culture .layout>.content>.item:hover .intro{ opacity: 1; transform: translateY(-100px);}

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

    #culture .layout>.content>.item .box>.ico>img{ width: 70px;}
    #culture .layout>.content>.item .box>.tit{ font-size: 2.6rem;}
    #culture .layout>.content>.item .box>.intro{ font-size: 1.4rem; line-height: 2rem;}
    #culture .layout>.content>.item .box>.intro>span:after{font-size: 4.2rem; }
    #culture .layout>.content>.item .box>.intro>span:before{  font-size: 4.2rem;}
}


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

    #culture .layout>.content>.item .box{padding: 50px 0;}
    #culture .layout>.content>.item .box>.tit{ font-size: 2.2rem;}

}


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

    #culture .title>h3{ font-size: 3.2rem;}
    #culture .title>h4{font-size: 4.5rem;}



    #culture .layout>.content>.item{ float: none; width: 100%;}
    #culture .layout>.content>.item:nth-child(even){ float: none;}
    #culture .layout>.content>.item .box{padding: 100px 0;}


}


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

    #culture .title>h3{ font-size: 2.8rem;}
    #culture .title>h4{font-size: 4rem;}


}

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

    #culture .layout{ padding: 50px 0; }
    #culture .layout>.content>.item .box{padding: 50px 0;}
    #culture .layout>.content>.item .box>.ico>img{ width: 60px;}
    #culture .layout>.content>.item .box>.tit{ font-size: 2rem;}
    #culture .layout>.content>.item .box>.slogan{ font-size: 1.4rem;}



}


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

    #culture{padding: 60px 0; }
    #culture .title>h3{ font-size: 2.4rem; padding: 15px 0;}
    #culture .title>h4{font-size: 2.4rem;}

}