@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'feathericons';
	src:url('../fonts/feathericons/feathericons.eot?-8is7zf');
	src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),
		url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),
		url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),
		url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg');
}

.grid {position: relative; margin:0 auto; padding:0; max-width:100%; list-style: none; text-align: center;}

/* Common style */
.grid figure {position: relative; float: left; overflow: hidden; margin:0; min-width: 320px;
max-width: 480px;
max-height: 430px;
width:100%;
/*background:#3085a3;*/
text-align: center;
cursor: pointer;
}

.grid figure img {position: relative; display: block; min-height: 100%; max-width:100%; opacity: 0.8;}
.grid figure figcaption {padding:0; color: #fff; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.grid figure figcaption::before, .grid figure figcaption::after {pointer-events: none;}
.grid figure figcaption, .grid figure figcaption > a {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0;}
.grid figure h2 {word-spacing: -0.15em; font-weight: 300;}
.grid figure h2 span {font-weight: 800;}
.grid figure h2, .grid figure p {margin: 0;}
.grid figure p {letter-spacing: 1px; font-size: 68.5%;}


figure.effect-bubba {background:#000;}
figure.effect-bubba img {opacity: 0.9; -webkit-transition: opacity 0.35s; transition: opacity 0.35s;}
figure.effect-bubba:hover img {opacity: 0.4;}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;}
figure.effect-bubba figcaption::before {border-top: 10px solid #009c84; border-bottom: 10px solid #009c84; -webkit-transform: scale(0,1); transform: scale(0,1);}
figure.effect-bubba figcaption::after {border-right: 10px solid #009c84; border-left: 10px solid #009c84; -webkit-transform: scale(1,0); transform: scale(1,0);}


figure.effect-bubba h2 {
padding-top: 20%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,100px,0);
transform: translate3d(0,100px,0);
font-size:34px; font-family:'Noto Sans KR','Malgun Gothic',dotum,sans-serif; font-weight:500; letter-spacing:-0.05em; line-height:34px;
}

figure.effect-bubba p {padding:20px 0 0 0; opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
font-size:14px; font-family:'Noto Sans KR','Malgun Gothic',dotum,sans-serif; font-weight:400; letter-spacing:-0.025em; line-height:20px;
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}


.go_btn {display:inline-block; width:56px; height:56px; border:5px solid #009c84; border-radius:28px; text-align:center; line-height:56px; box-sizing:border-box;}