@charset "utf-8";

/* CSS Document */





#culture{margin: 0 auto; padding: 75px 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;}

#culture .title>h3:after{position: absolute;z-index: 1; left: 50%; bottom: 0;width:50px;height: 4px; background: #005d8a; 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.6rem; line-height: 2.4rem; 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(10,15,155,.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;}



}