@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;overflow: hidden; 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: 50px; box-sizing: border-box; background: #f3f3f3;transition: .8s;}
#culture .container>.slide .box>.title{font-size: 1.6rem;transition: all .35s;}
#culture .container>.slide .box>.text{ display: none; 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: 2;}
#culture .container>.slide:hover .box{ background: url("/img/culture_bg.jpg") no-repeat; background-size: cover; box-shadow: 2px 5px 16px rgba(0,0,0,.1);}
#culture .container>.slide:hover .box>.title{color:#fff; font-size: 2rem; font-weight: bold;}
#culture .container>.slide:hover .box>.text{ display: block; color: rgba(255,255,255,.8);}
#culture .container>.slide:hover .box>.ico{ transform: translateX(280px) scale(2); filter: grayscale(1);opacity: 0;}