.element-icon {
  display: inline-block;
  overflow: hidden;
  font-size: 0;
  white-space: nowrap;
  vertical-align: middle;
}
/* icon example 
.element-icon.className {
    width: Npx;
    height: Npx;
    background: url( 경로를 지정 해 주세요 ) no-repeat;
    background-size: cover;
}
*/
.element-icon.ic-logo-s24 {
  width: 24px;
  height: 24px;
  background: url(../../images/svg/ic-logo-s24.svg) no-repeat;
  background-size: cover;
}
.element-icon.ic-user-s24-c333 {
  width: 24px;
  height: 24px;
  background: url(../../images/svg/ic-user-s24-c333.svg) no-repeat;
  background-size: cover;
}
.element-icon.ic-arrow-left-s24-c333 {
  width: 24px;
  height: 24px;
  background: url(../../images/svg/ic-arrow-left-s24-c333.svg) no-repeat;
  background-size: cover;
}
.element-icon.ic-close-s24-c333 {
  width: 24px;
  height: 24px;
  background: url(../../images/svg/ic-close-s24-c333.svg) no-repeat;
  background-size: cover;
}
.ic-arrow-down-s14-c797979 {
  width: 14px;
  height: 14px;
  background: url(../../images/svg/ic-arrow-down-s14-c797979.svg) no-repeat;
  background-size: cover;
}
.ic-logo-sge {
  width: 123px;
  height: 32px;
  background: url(../../images/logo/logo-sge.png) no-repeat;
  background-size: cover;
}
.ic-logo-sgp {
  width: 123px;
  height: 32px;
  background: url(../../images/logo/logo-sgp.png) no-repeat;
  background-size: cover;
}
.ic-logo-sgr {
  width: 123px;
  height: 32px;
  background: url(../../images/logo/logo-sgr.png) no-repeat;
  background-size: cover;
}
.ic-logo-sgs {
  width: 123px;
  height: 32px;
  background: url(../../images/logo/logo-sgs.png) no-repeat;
  background-size: cover;
}

/*circle icon*/

.element-circle-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-indent: -9999px;
}

.element-circle-icon.ic-s20-community {
  background: url(../../images/svg/circle/ic-s20-community.svg) no-repeat;
  background-size: cover;
}

.element-circle-icon.ic-s20-googleplay {
  background: url(../../images/svg/circle/ic-s20-googleplay.svg) no-repeat;
  background-size: cover;
}

.element-circle-icon.ic-s20-appstore {
  background: url(../../images/svg/circle/ic-s20-appstore.svg) no-repeat;
  background-size: cover;
}

.element-circle-icon.ic-s14-search {
  width: 14px;
  height: 14px;
  background: url(../../images/svg/circle/ic-s14-search.svg) no-repeat;
  background-size: cover;
}

.element-circle-icon.ic-s18-input-close {
  width: 18px;
  height: 18px;
  background: url(../../images/svg/circle/ic-s18-input-close.svg) no-repeat;
  background-size: cover;
}

.ic-s12-input-close {
  width: 12px;
  height: 12px;
  background: url(../../images/svg/circle/ic-s12-input-close.svg) no-repeat;
  background-size: cover;
}

.element-circle-icon.ic-s18-box-arrow {
  width: 18px;
  height: 18px;
  background: url(../../images/svg/circle/ic-s18-box-arrow.svg) no-repeat;
  background-size: cover;
}

.element-circle-icon.ic-s36-play {
  width: 36px;
  height: 36px;
  background: url(../../images/svg/circle/ic-s36-play.svg) no-repeat;
  background-size: cover;
}

.element-circle-icon.ic-s28-community {
  width: 28px;
  height: 28px;
  background: url(../../images/svg/circle/ic-s28-community.svg) no-repeat;
  background-size: cover;
}
.element-circle-icon.ic-s14-fill-notice {
  width: 14px;
  height: 14px;
  background: url(../../images/svg/circle/ic-s14-fill-notice.svg) no-repeat;
  background-size: cover;
}

.element-circle-icon.ic-s18-attach-image {
  width: 18px;
  height: 18px;
  background: url(../../images/svg/circle/ic-s18-attach-image.svg) no-repeat;
  background-size: cover;
}

/*equipment icon*/
.element-equipment-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  text-indent: -99999px;
}

.element-equipment-icon.ic-normal {
  background: url(../../images/svg/equipment/ic-eq-s14-badge-1.svg) no-repeat;
  background-size: cover;
}

.element-equipment-icon.ic-advanced {
  background: url(../../images/svg/equipment/ic-eq-s14-badge-2.svg) no-repeat;
  background-size: cover;
}

.element-equipment-icon.ic-rare {
  background: url(../../images/svg/equipment/ic-eq-s14-badge-3.svg) no-repeat;
  background-size: cover;
}

.element-equipment-icon.ic-hero {
  background: url(../../images/svg/equipment/ic-eq-s14-badge-4.svg) no-repeat;
  background-size: cover;
}

.element-equipment-icon.ic-legend {
  background: url(../../images/svg/equipment/ic-eq-s14-badge-5.svg) no-repeat;
  background-size: cover;
}

.element-equipment-icon.ic-relics {
  background: url(../../images/svg/equipment/ic-eq-s14-badge-6.svg) no-repeat;
  background-size: cover;
}

.element-equipment-icon.ic-polishing {
  width: 12px;
  height: 12px;
  background: url(../../images/equipment/ic-s12-polishing.png) no-repeat;
  background-size: cover;
}

/*tryport icon*/
.element-tryport-icon {
  display: inline-block;
  text-indent: -9999px;
}

.element-tryport-icon.ic-s26-sk-tier-1-on {
  width: 26px;
  height: 26px;
  background: url(../../images/svg/tryport/ic-s26-sk-tier-1-on.svg) no-repeat;
  background-size: cover;
}

.element-tryport-icon.ic-s26-sk-tier-1-off {
  width: 26px;
  height: 26px;
  background: url(../../images/svg/tryport/ic-s26-sk-tier-1-off.svg) no-repeat;
  background-size: cover;
}

.element-tryport-icon.ic-s26-sk-tier-2-on {
  width: 26px;
  height: 26px;
  background: url(../../images/svg/tryport/ic-s26-sk-tier-2-on.svg) no-repeat;
  background-size: cover;
}

.element-tryport-icon.ic-s26-sk-tier-2-off {
  width: 26px;
  height: 26px;
  background: url(../../images/svg/tryport/ic-s26-sk-tier-2-off.svg) no-repeat;
  background-size: cover;
}

.element-tryport-icon.ic-s26-sk-tier-3-on {
  width: 26px;
  height: 26px;
  background: url(../../images/svg/tryport/ic-s26-sk-tier-3-on.svg) no-repeat;
  background-size: cover;
}

.element-tryport-icon.ic-s26-sk-tier-3-off {
  width: 26px;
  height: 26px;
  background: url(../../images/svg/tryport/ic-s26-sk-tier-3-off.svg) no-repeat;
  background-size: cover;
}

.element-tryport-icon.ic-s22-sk-1-1-on {
  width: 22px;
  height: 22px;
  background: url(../../images/svg/tryport/ic-s22-sk-1-1-on.svg) no-repeat;
  background-size: cover;
}

.element-tryport-icon.ic-s22-sk-1-2-on {
  width: 22px;
  height: 22px;
  background: url(../../images/svg/tryport/ic-s22-sk-1-2-on.svg) no-repeat;
  background-size: cover;
}

.element-tryport-icon.ic-s22-sk-1-3-on {
  width: 22px;
  height: 22px;
  background: url(../../images/svg/tryport/ic-s22-sk-1-3-on.svg) no-repeat;
  background-size: cover;
}

.element-tryport-icon.ic-s22-sk-2-1-on {
  width: 22px;
  height: 22px;
  background: url(../../images/svg/tryport/ic-s22-sk-2-1-on.svg) no-repeat;
  background-size: cover;
}

.element-tryport-icon.ic-s22-sk-2-2-on {
  width: 22px;
  height: 22px;
  background: url(../../images/svg/tryport/ic-s22-sk-2-2-on.svg) no-repeat;
  background-size: cover;
}

.element-tryport-icon.ic-s22-sk-2-3-on {
  width: 22px;
  height: 22px;
  background: url(../../images/svg/tryport/ic-s22-sk-2-3-on.svg) no-repeat;
  background-size: cover;
}

.element-tryport-icon.ic-s22-sk-3-1-on {
  width: 22px;
  height: 22px;
  background: url(../../images/svg/tryport/ic-s22-sk-3-1-on.svg) no-repeat;
  background-size: cover;
}

.element-tryport-icon.ic-s22-sk-3-2-on {
  width: 22px;
  height: 22px;
  background: url(../../images/svg/tryport/ic-s22-sk-3-2-on.svg) no-repeat;
  background-size: cover;
}

.element-tryport-icon.ic-s22-sk-0-1-off {
  width: 22px;
  height: 22px;
  background: url(../../images/svg/tryport/ic-s22-sk-0-1-off.svg) no-repeat;
  background-size: cover;
}

.element-tryport-icon.ic-s22-sk-0-2-off {
  width: 22px;
  height: 22px;
  background: url(../../images/svg/tryport/ic-s22-sk-0-2-off.svg) no-repeat;
  background-size: cover;
}

.element-tryport-icon.ic-s22-sk-0-3-off {
  width: 22px;
  height: 22px;
  background: url(../../images/svg/tryport/ic-s22-sk-0-3-off.svg) no-repeat;
  background-size: cover;
}