.tabs {
  text-align:center;
  position: relative;
  height: 1500px;
}

.tabs__item {
  position: relative;
  display: inline-block;
  z-index: 20;
  line-height: 3;
  width:130px;
  text-align:center;
  border-radius: 0;
  color: white;
  margin-bottom:1px;
  box-shadow: inset 0 50px #aaa;
  background-color: #FA8A71;
  transition: box-shadow 0.35s ease-out, color 0.4s ease-out;
  cursor: pointer;
}

.tabs__item:hover { box-shadow: inset 0 0px #777; }



.tabs__item--active {
  color: #fff;
  border-radius: 0;
  font-family:"NanumGothicBold", "NanumGothic", "돋움", "Tahoma", "Helvetica",  sans-serif;
  box-shadow: inset 0 0 #CC4D31 !important;
}

.tabs__item--active + .tabs__body { z-index: 10; }

.tabs__body {
  position: absolute;
  overflow: hidden;
  left: 0;
  right: 0;
  height: 1400px;
  margin-left: 0;
  margin-top: 50px;
  padding: 0;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  transition: all 0.25s;
}

.tabs__content {
  opacity: 1;
  transition: all 0.15s ease-out;
}

.tabs__content--hidden {
  opacity: 0;
  transform: translate(0, 8px);
}

.tabs--vertical .tabs__item {
  display: block;
  width: 130px;
  margin-left: 0;
  box-shadow: inset 50px 0 0 #9b59b6;
}

.tabs--vertical .tabs__item:hover { box-shadow: inset 150px 0 0 #ac75c2; }

.tabs--vertical .tabs__body {
  top: 0;
  left: 150px;
}

.tabs--vertical .tabs__content--hidden { transform: translate(8px, 0); }


@media screen and ( max-width: 960px ) {
	.tabs {
	  text-align:center;
	  position: relative;
	  height: 1160;
	  overflow: hidden;
	}
	.tabs__item {
	  font-size:11pt;;
	}
}