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

#culture{margin: 0 auto; padding-bottom: 100px;}

#culture .container{ margin: 0 auto; display: flex; padding: 50px 0;}
#culture .container>.slide {flex: 1;position: relative;margin-right: 1px; height: 400px; transition: .6s;}
#culture .container>.slide:last-child {margin-right: 0;}
#culture .container>.slide .img {width: 100%;}
#culture .container>.slide .img>img {width: 100%; height: 530px;}
#culture .container>.slide .box {position: absolute;top: 0;left: 0;width: 100%;height: 100%; padding: 60px; box-sizing: border-box; background: #f3f3f3;transition: .8s;}
#culture .container>.slide .box>.title{font-size: 2.4rem; font-weight: bold;}
#culture .container>.slide .box>.text{ padding-top: 20px; width: 90%; font-size: 1.8rem; line-height: 3rem; color: #666;transition: all .35s;}
#culture .container>.slide .box>.ico{ position: absolute;z-index: 12; left: 60px;bottom: 60px; width: 80px;height: 80px;overflow: hidden; transition: all .35s; }
#culture .container>.slide .box>.ico>img{position: absolute;z-index: 12; top: 0;left: 0;width: 100%;}
#culture .container>.slide:hover {flex: 1.48;}
#culture .container>.slide:hover .box{ background: #fff; box-shadow: 2px 5px 16px rgba(0,0,0,.1);}
#culture .container>.slide:hover .box>.title{color:#001386;}
#culture .container>.slide:hover .box>.text{color: rgba(0,0,0,.6);}
#culture .container>.slide:hover .box>.ico{ transform: translateX(280px) scale(2); filter: grayscale(1);opacity: .06;}