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

#culture{ position: relative;z-index: 5; background: #fff; margin: 0 auto;}


#culture{ margin: 0 auto;}
#culture>.container{ margin: 0 auto; padding-bottom: 100px;}
#culture>.container .img{ position: relative; width: 50%; text-align: left;}
#culture>.container .img:after{position: absolute;z-index: 4; left: 30px; bottom: -20px; font-size: 4rem; color: rgba(255,255,255,1); text-transform: uppercase;padding: 20px 50px; background: rgba(1,64,153,.9); content: 'culture';}
#culture>.container .img>img{ position: relative;z-index: 2; width: 100%;height: auto;}
#culture>.container .box{width: 50%; text-align:left; box-sizing: border-box; padding-left: 80px;}
#culture>.container .box>.item{ margin-bottom: 20px;}
#culture>.container .box>.item>.tit{ position:relative;font-size: 1.4rem;color: rgba(1,64,153,1); padding-bottom: 5px; }
#culture>.container .box>.item>.tit:after{position: absolute;z-index: 2; left: 0;bottom: 0;width: 20px;height: 1px; background: rgba(1,64,153,1); content: '';}
#culture>.container .box>.item>.txt{ padding: 8px 0; font-size: 2.2rem; color: #333; line-height: 2.8rem;}






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

    #culture>.container .box>.item>.txt{ font-size: 2rem;}


}

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

    #culture>.container .img{float: none;width: 100%; }
    #culture>.container .box{float: none;width: 100%; padding-top: 80px;padding-left: 0;}

}



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

    #culture>.container .img:after{font-size: 2.8rem;}


    #culture>.container .box>.item>.txt{ font-size: 1.8rem;line-height: 2.4rem;}



}

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

    #culture>.container .img:after{font-size: 2.4rem; padding: 10px 30px;}
    #culture>.container .box>.item>.tit{ font-size: 1.2rem;}
    #culture>.container .box>.item>.txt{ font-size: 1.6rem;line-height: 2rem;}


}