@import url("./reset.css");
@import url("./layout.css");
@import url("./main.css");
@import url("./breadcrumb.css");
@import url("./sub.css");

/* ===================================
   Common Styles
   =================================== */

/* -- Layout -- */
section .inner {
  padding: 0 9.1%;
  margin: 0 auto;
}

/* -- Utility Classes -- */
.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

/* -- Icon Circle -- */
.ico-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.2s;
  position: relative;
}

.ico-circle::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 19px;
  height: 19px;
  background-image: url(../img/common/btn_view_more.png);
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease;
}

.btn-more:hover .ico-circle{
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
}

.btn-more:hover .ico-circle::after{
  transform: translate(-50%, -50%) rotate(-90deg);
}


.ico-circle--sm {
  width: 24px;
  height: 24px;
}

.ico-circle--md {
  width: 36px;
  height: 36px;
}

.ico-circle--lg {
  width: 44px;
  height: 44px;
}