@charset "UTF-8";
.wrapper { width: 100%; height: 500px; }

.wrapper section { width: calc(100% / 3); height: 100%; float: left; -webkit-filter: grayscale(50%); filter: grayscale(50%); transition-duration: 0.5s; position: relative; }

.wrapper section::before { content: ""; position: absolute; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.6), transparent); opacity: 1; transition: 0.3s; }


.wrapper section.sec01, .wrapper section.sec02, .wrapper section.sec03, .wrapper section.sec04, .wrapper section.sec05 { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }

.ban-txt { display: flex; position: absolute; background-color: rgba(0, 0, 0, 0.8); top: 0; left: 0; color: #fff; text-align: center; width: 100%; bottom: 0; height: 100%; opacity: 0; }
.ban-txt .ma { overflow: hidden; position: absolute; top: 50%; left: 50%; margin: auto; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.ban-txt h3 { font-weight: 400; font-size: 1.5rem; }
.ban-txt .line { width: 1.875rem; height: 1px; background: #fff; margin: 0.9375rem auto; }
.ban-txt p { font-size: 0.875rem; }
.ban-txt a { color: #fff; text-decoration: none; font-size: 0.875rem; cursor: pointer; margin-top: 3.125rem; display: inline-block; }

.wrapper:hover section:hover { width: 60%; -webkit-filter: grayscale(0%); filter: grayscale(0%); /* <div class="ban-txt"> <h3>公司愿景</h3> <div class="line"></div> <p>成为世界级的优秀珠宝企业</p> <a href="javascript:;" class="l-more">了解详情 ></a> </div>*/ }
.wrapper:hover section:hover .ban-txt { opacity: 1; transition-duration: 0.3s; }

.wrapper:hover section:hover::before { opacity: 0; }

.wrapper:hover section:not(:hover) { width: 20%; }

.alternative { display: inline-block; top: 50%; left: 50%; position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: "Lato", Arial, sans-serif; letter-spacing: 0.08em; line-height: 1; font-size: 2.4rem; text-align: center; color: rgba(255, 255, 255, 0.6); background: rgba(0, 0, 0, 0.4); padding: 0.6em 1em; }

.alternative a { margin-top: 15px; font-size: 1.2rem; display: block; padding: 0.6em 0; background: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.6); text-decoration: none; transition-duration: 0.3s; }

.alternative a:hover { background: rgba(255, 255, 255, 0.6); color: #333; }

/*# sourceMappingURL=brand_story.css.map */