@charset "utf-8";
/* CSS Document */
body { background: none !important;}
.top-bar { background: #fff;}
.ind_A { position: relative; display: flex; flex-flow: wrap; justify-content: center; min-height: 32vh; padding: 95px 0 0 0; overflow: hidden; z-index: 1;}
.ind_A h1 { font-weight: 300; text-align: center; letter-spacing: 0.2px; padding: 30px 0; line-height: 1.7;}
.ind_A h1 span { font-size: 180%; padding: 0 8px; font-weight: 700;}
.ind_B { display: flex; flex-flow: wrap; padding: 2% 0 2% 0;}
.ind_B > div { position: relative; width: 25%; max-width: 263px; margin: 0 auto 10px auto; padding: 0 10px; text-align: center; z-index: 1; transition: all 0.25s ease 0s;}
.ind_B > div::before { content: ''; position: absolute; top: 0; left: 0; background: #ff0000; width: 1px; height: 0%; z-index: 2; transition: all 0.5s ease 0s;}
.ind_B > div::after { content: ''; position: absolute; bottom: 0; right: 0; background: #ff0000; width: 1px; height: 0%; z-index: 2; transition: all 0.5s ease 0s;}
.ind_B > div a::before { content: ''; position: absolute; top: 0; left: 0; background: #ff0000; height: 1px; width: 0%; z-index: 2; transition: all 0.5s ease 0s;}
.ind_B > div a::after { content: ''; position: absolute; bottom: 0; right: 0; background: #ff0000; height: 1px; width: 0%; z-index: 2; transition: all 0.5s ease 0s;}
.ind_B > div h2 { position: relative; font-weight: 700; margin: 0 0 10px 0; padding: 20px 0 0 0; transition: all 0.25s ease 0s;}
.ind_B > div .pic { position: relative; height: 0; padding-bottom: 100%; overflow: hidden; margin: 0 0 20px 0;}
.ind_B > div .pic img { transition: all 0.5s ease 0s;}
.ind_B > div:hover::before { height: 100%;}
.ind_B > div:hover::after { height: 100%;}
.ind_B > div:hover a::before { width: 100%;}
.ind_B > div:hover a::after { width: 100%;}
.ind_B > div:hover h2 { color: #ff0000;}
.ind_B > div:hover .pic img { transform: scale(0.9);}