@charset "UTF-8";
/*!
 *	Base Style v1.0  (2018-02-01)
 */
/********************************************************
	■ Color List :: 색상 목록
********************************************************/
.red,
.i.red {
  color: #e91b23;
}

.red-i,
.i.red-i {
  color: #e91b23 !important;
}

.bg-red {
  background-color: #e91b23;
  color: white;
}

.border-red {
  border-color: #e91b23;
}

.darkred,
.i.darkred {
  color: #aa3c3c;
}

.darkred-i,
.i.darkred-i {
  color: #aa3c3c !important;
}

.bg-darkred {
  background-color: #aa3c3c;
  color: white;
}

.border-darkred {
  border-color: #aa3c3c;
}

.crimson,
.i.crimson {
  color: crimson;
}

.crimson-i,
.i.crimson-i {
  color: crimson !important;
}

.bg-crimson {
  background-color: crimson;
  color: white;
}

.border-crimson {
  border-color: crimson;
}

.darkpink,
.i.darkpink {
  color: #c55;
}

.darkpink-i,
.i.darkpink-i {
  color: #c55 !important;
}

.bg-darkpink {
  background-color: #c55;
  color: white;
}

.border-darkpink {
  border-color: #c55;
}

.pink,
.i.pink {
  color: #f66;
}

.pink-i,
.i.pink-i {
  color: #f66 !important;
}

.bg-pink {
  background-color: #f66;
  color: white;
}

.border-pink {
  border-color: #f66;
}

.orangered,
.i.orangered {
  color: orangered;
}

.orangered-i,
.i.orangered-i {
  color: orangered !important;
}

.bg-orangered {
  background-color: orangered;
  color: white;
}

.border-orangered {
  border-color: orangered;
}

.orange,
.i.orange {
  color: #fa9614;
}

.orange-i,
.i.orange-i {
  color: #fa9614 !important;
}

.bg-orange {
  background-color: #fa9614;
  color: white;
}

.border-orange {
  border-color: #fa9614;
}

.green,
.i.green {
  color: #8cc346;
}

.green-i,
.i.green-i {
  color: #8cc346 !important;
}

.bg-green {
  background-color: #8cc346;
  color: white;
}

.border-green {
  border-color: #8cc346;
}

.lightgreen,
.i.lightgreen {
  color: #a0c850;
}

.lightgreen-i,
.i.lightgreen-i {
  color: #a0c850 !important;
}

.bg-lightgreen {
  background-color: #a0c850;
  color: white;
}

.border-lightgreen {
  border-color: #a0c850;
}

.darkgreen,
.i.darkgreen {
  color: #64963c;
}

.darkgreen-i,
.i.darkgreen-i {
  color: #64963c !important;
}

.bg-darkgreen {
  background-color: #64963c;
  color: white;
}

.border-darkgreen {
  border-color: #64963c;
}

.deepblue,
.i.deepblue {
  color: #007db4;
}

.deepblue-i,
.i.deepblue-i {
  color: #007db4 !important;
}

.bg-deepblue {
  background-color: #007db4;
  color: white;
}

.border-deepblue {
  border-color: #007db4;
}

.skyblue,
.i.skyblue {
  color: #64c3f5;
}

.skyblue-i,
.i.skyblue-i {
  color: #64c3f5 !important;
}

.bg-skyblue {
  background-color: #64c3f5;
  color: white;
}

.border-skyblue {
  border-color: #64c3f5;
}

.blue,
.i.blue {
  color: #3498db;
}

.blue-i,
.i.blue-i {
  color: #3498db !important;
}

.bg-blue {
  background-color: #3498db;
  color: white;
}

.border-blue {
  border-color: #3498db;
}

.greenblue,
.i.greenblue {
  color: #00a0a0;
}

.greenblue-i,
.i.greenblue-i {
  color: #00a0a0 !important;
}

.bg-greenblue {
  background-color: #00a0a0;
  color: white;
}

.border-greenblue {
  border-color: #00a0a0;
}

.darkblue,
.i.darkblue {
  color: #169;
}

.darkblue-i,
.i.darkblue-i {
  color: #169 !important;
}

.bg-darkblue {
  background-color: #169;
  color: white;
}

.border-darkblue {
  border-color: #169;
}

.navy,
.i.navy {
  color: #323c46;
}

.navy-i,
.i.navy-i {
  color: #323c46 !important;
}

.bg-navy {
  background-color: #323c46;
  color: white;
}

.border-navy {
  border-color: #323c46;
}

.violet,
.i.violet {
  color: #553c7d;
}

.violet-i,
.i.violet-i {
  color: #553c7d !important;
}

.bg-violet {
  background-color: #553c7d;
  color: white;
}

.border-violet {
  border-color: #553c7d;
}

.yellow,
.i.yellow {
  color: #f1c40f;
}

.yellow-i,
.i.yellow-i {
  color: #f1c40f !important;
}

.bg-yellow {
  background-color: #f1c40f;
  color: white;
}

.border-yellow {
  border-color: #f1c40f;
}

.darkyellow,
.i.darkyellow {
  color: #bea000;
}

.darkyellow-i,
.i.darkyellow-i {
  color: #bea000 !important;
}

.bg-darkyellow {
  background-color: #bea000;
  color: white;
}

.border-darkyellow {
  border-color: #bea000;
}

.gold,
.i.gold {
  color: #c8a046;
}

.gold-i,
.i.gold-i {
  color: #c8a046 !important;
}

.bg-gold {
  background-color: #c8a046;
  color: white;
}

.border-gold {
  border-color: #c8a046;
}

.whiteyellow,
.i.whiteyellow {
  color: #f5f5b4;
}

.whiteyellow-i,
.i.whiteyellow-i {
  color: #f5f5b4 !important;
}

.bg-whiteyellow {
  background-color: #f5f5b4;
  color: white;
}

.border-whiteyellow {
  border-color: #f5f5b4;
}

.darkgray,
.i.darkgray {
  color: #666;
}

.darkgray-i,
.i.darkgray-i {
  color: #666 !important;
}

.bg-darkgray {
  background-color: #666;
  color: white;
}

.border-darkgray {
  border-color: #666;
}

.gray,
.i.gray {
  color: #888;
}

.gray-i,
.i.gray-i {
  color: #888 !important;
}

.bg-gray {
  background-color: #888;
  color: white;
}

.border-gray {
  border-color: #888;
}

.slightgray,
.i.slightgray {
  color: #aaa;
}

.slightgray-i,
.i.slightgray-i {
  color: #aaa !important;
}

.bg-slightgray {
  background-color: #aaa;
  color: white;
}

.border-slightgray {
  border-color: #aaa;
}

.lightgray,
.i.lightgray {
  color: #ddd;
}

.lightgray-i,
.i.lightgray-i {
  color: #ddd !important;
}

.bg-lightgray {
  background-color: #ddd;
  color: #333;
}

.border-lightgray {
  border-color: #ddd;
}

.white,
.i.white {
  color: #fff;
}

.white-i,
.i.white-i {
  color: #fff !important;
}

.bg-white {
  background-color: #fff;
  color: #333;
}

.border-white {
  border-color: #fff;
}

.light,
.i.light {
  color: #f5f5f5;
}

.light-i,
.i.light-i {
  color: #f5f5f5 !important;
}

.bg-light {
  background-color: #f5f5f5;
  color: #333;
}

.border-light {
  border-color: #f5f5f5;
}

.lightblack,
.i.lightblack {
  color: #333;
}

.lightblack-i,
.i.lightblack-i {
  color: #333 !important;
}

.bg-lightblack {
  background-color: #333;
  color: white;
}

.border-lightblack {
  border-color: #333;
}

.darkblack,
.i.darkblack {
  color: #222;
}

.darkblack-i,
.i.darkblack-i {
  color: #222 !important;
}

.bg-darkblack {
  background-color: #222;
  color: white;
}

.border-darkblack {
  border-color: #222;
}

.black,
.i.black {
  color: #000;
}

.black-i,
.i.black-i {
  color: #000 !important;
}

.bg-black {
  background-color: #000;
  color: white;
}

.border-black {
  border-color: #000;
}

/********************************************************
	■ Font Size :: 글꼴 크기 정의
********************************************************/
.font-6 {
  font-size: 6px;
}

.font-7 {
  font-size: 7px;
}

.font-8 {
  font-size: 8px;
}

.font-9 {
  font-size: 9px;
}

.font-10 {
  font-size: 10px;
}

.font-11 {
  font-size: 11px;
}

.font-12 {
  font-size: 12px;
}

.font-13 {
  font-size: 13px;
}

.font-14 {
  font-size: 14px;
}

.font-15 {
  font-size: 15px;
}

.font-16 {
  font-size: 16px;
}

.font-17 {
  font-size: 17px;
}

.font-18 {
  font-size: 18px;
}

.font-19 {
  font-size: 19px;
}

.font-20 {
  font-size: 20px;
}

.font-21 {
  font-size: 21px;
}

.font-22 {
  font-size: 22px;
}

.font-23 {
  font-size: 23px;
}

.font-24 {
  font-size: 24px;
}

.font-25 {
  font-size: 25px;
}

.font-26 {
  font-size: 26px;
}

.font-27 {
  font-size: 27px;
}

.font-28 {
  font-size: 28px;
}

.font-29 {
  font-size: 29px;
}

.font-30 {
  font-size: 30px;
}

.font-31 {
  font-size: 31px;
}

.font-32 {
  font-size: 32px;
}

.font-33 {
  font-size: 33px;
}

.font-34 {
  font-size: 34px;
}

.font-35 {
  font-size: 35px;
}

.font-36 {
  font-size: 36px;
}

.font-37 {
  font-size: 37px;
}

.font-38 {
  font-size: 38px;
}

.font-39 {
  font-size: 39px;
}

.font-40 {
  font-size: 40px;
}

.font-41 {
  font-size: 41px;
}

.font-42 {
  font-size: 42px;
}

.font-43 {
  font-size: 43px;
}

.font-44 {
  font-size: 44px;
}

.font-45 {
  font-size: 45px;
}

.font-46 {
  font-size: 46px;
}

.font-47 {
  font-size: 47px;
}

.font-48 {
  font-size: 48px;
}

.font-49 {
  font-size: 49px;
}

.font-50 {
  font-size: 50px;
}

.font-51 {
  font-size: 51px;
}

.font-52 {
  font-size: 52px;
}

.font-53 {
  font-size: 53px;
}

.font-54 {
  font-size: 54px;
}

.font-55 {
  font-size: 55px;
}

.font-56 {
  font-size: 56px;
}

.font-57 {
  font-size: 57px;
}

.font-58 {
  font-size: 58px;
}

.font-59 {
  font-size: 59px;
}

.font-60 {
  font-size: 60px;
}

/********************************************************
	■ Font Weight :: 글꼴 두께 정의
********************************************************/
.fw-100 {
  font-weight: 100;
}

/* Noto Sans Korea 기준 - Thin */
.fw-300 {
  font-weight: 300;
}

/* Noto Sans Korea 기준 - Light */
.fw-400 {
  font-weight: 400;
}

/* Noto Sans Korea 기준 - Regular */
.fw-500 {
  font-weight: 600;
}

/* Noto Sans Korea 기준 - Medium */
.fw-700 {
  font-weight: 700;
}

/* Noto Sans Korea 기준 - Bold */
.fw-light {
  font-weight: 300;
}

.fw-medium {
  font-weight: 400;
}

.fw-bold {
  font-weight: 700;
}

/********************************************************
	■ Text Etc :: 텍스트 관련 기타 정의
********************************************************/
.b {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.underline {
  text-decoration: underline;
}

.no-wrap {
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ta-left {
  text-align: left;
}

.ta-center {
  text-align: center;
}

.ta-right {
  text-align: right;
}

/********************************************************
	■ Box 모델
********************************************************/
.c-700 {
  max-width: 700px;
}

.c-full-700 {
  max-width: 700px;
}

.c-800 {
  max-width: 800px;
}

.c-full-800 {
  max-width: 800px;
}

.c-900 {
  max-width: 900px;
}

.c-full-900 {
  max-width: 900px;
}

.c-1000 {
  max-width: 1000px;
}

.c-full-1000 {
  max-width: 1000px;
}

.c-1100 {
  max-width: 1100px;
}

.c-full-1100 {
  max-width: 1100px;
}

.c-1200 {
  max-width: 1200px;
}

.c-full-1200 {
  max-width: 1200px;
}

.c-1300 {
  max-width: 1300px;
}

.c-full-1300 {
  max-width: 1300px;
}

.c-1400 {
  max-width: 1400px;
}

.c-full-1400 {
  max-width: 1400px;
}

.c-1500 {
  max-width: 1500px;
}

.c-full-1500 {
  max-width: 1500px;
}

.c-1600 {
  max-width: 1600px;
}

.c-full-1600 {
  max-width: 1600px;
}

.c-1700 {
  max-width: 1700px;
}

.c-full-1700 {
  max-width: 1700px;
}

.c-1800 {
  max-width: 1800px;
}

.c-full-1800 {
  max-width: 1800px;
}

.c-1900 {
  max-width: 1900px;
}

.c-full-1900 {
  max-width: 1900px;
}

.c-2000 {
  max-width: 2000px;
}

.c-full-2000 {
  max-width: 2000px;
}

@media (max-width: 767px) {
  .c-900,
  .c-1000,
  .c-1100,
  .c-1200,
  .c-1300,
  .c-1400,
  .c-1500,
  .c-1600,
  .c-1700,
  .c-1800,
  .c-1900,
  .c-2000 {
    padding: 0 10px;
  }
}
.flex {
  display: -ms-flexbox;
  display: flex;
}

/********************************************************
	■ Table 형태로 div 구조를 만들경우
********************************************************/
.table {
  display: table;
  table-layout: fixed;
  width: 100%;
  overflow: hidden;
  margin: 0;
}
.table .cell {
  display: table-cell;
  overflow: hidden;
}
.table .cell.h-left {
  text-align: left;
}
.table .cell.h-center {
  text-align: center;
}
.table .cell.h-right {
  text-align: right;
}
.table .cell.v-top {
  vertical-align: top;
}
.table .cell.v-center {
  vertical-align: middle;
}
.table .cell.v-bottom {
  vertical-align: bottom;
}

/********************************************************
	■ 백그라운드
********************************************************/
.bg-center,
.bg-contain,
.bg-cover {
  background-position: center;
  background-repeat: no-repeat;
}

.bg-contain {
  background-size: contain;
}

.bg-cover {
  background-size: cover;
}

/********************************************************
	■ 타일 스타일 공용
********************************************************/
.tiles {
  visibility: hidden;
  display: flex;
  flex-wrap: wrap;
}

.tiles.loaded {
  visibility: visible;
}

.tiles .tile {
  margin-bottom: 10px;
  text-align: center;
  visibility: hidden;
}

.tiles .tile > .a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  border-radius: 6px;
  z-index: 1;
  border: 1px solid #ddd;
}

.tiles .tile > .a::before,
.tiles .tile > .a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  transition: all 0.3s ease;
}

.tiles .tile > .a > .a2,
.tiles .tile > .a > .a3 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.tiles .tile > .a .a2::before,
.tiles .tile > .a .a2::after,
.tiles .tile > .a .a3::before,
.tiles .tile > .a .a3::after {
  content: "";
  position: absolute;
  transition-timing-function: linear;
  z-index: 3;
}

.tiles .image {
  position: relative;
  display: block;
  overflow: hidden;
}

.tiles .image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  transition: all 0.3s ease;
}

.tiles .more {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: 2;
}

.tiles .image .img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: all 0.3s ease;
}

.tiles .image.no-image .img {
  background-image: url(img/no-img.jpg) !important;
}

.tiles .image .chk {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
}

.tiles .content {
  height: 100%;
  text-align: left;
}

.tiles .data {
  display: none;
}

@media (max-width: 767px) {
  .tiles {
    margin: 0 -5px;
  }
  .tiles .tile {
    padding: 0 5px;
  }
}

/* 트랜지션 (애니메이션 속도) */
.tran-2 .tile > .a::after,
.tran-2 .tile .image::after,
.tran-2 .tile .image .img {
  transition: all 0.2s ease;
}

.tran-3 .tile > .a::after,
.tran-3 .tile .image::after,
.tran-3 .tile .image .img {
  transition: all 0.3s ease;
}

.tran-4 .tile > .a::after,
.tran-4 .tile .image::after,
.tran-4 .tile .image .img {
  transition: all 0.4s ease;
}

.tran-5 .tile > .a::after,
.tran-5 .tile .image::after,
.tran-5 .tile .image .img {
  transition: all 0.5s ease;
}

.tran-6 .tile > .a::after,
.tran-6 .tile .image::after,
.tran-6 .tile .image .img {
  transition: all 0.6s ease;
}

.tran-7 .tile > .a::after,
.tran-7 .tile .image::after,
.tran-7 .tile .image .img {
  transition: all 0.7s ease;
}

.tran-8 .tile > .a::after,
.tran-8 .tile .image::after,
.tran-8 .tile .image .img {
  transition: all 0.8s ease;
}

.tran-9 .tile > .a::after,
.tran-9 .tile .image::after,
.tran-9 .tile .image .img {
  transition: all 0.9s ease;
}

.tran-10 .tile > .a::after,
.tran-10 .tile .image::after,
.tran-10 .tile .image .img {
  transition: all 1s ease;
}

.tran-12 .tile > .a::after,
.tran-12 .tile .image::after,
.tran-12 .tile .image .img {
  transition: all 1.2s ease;
}

.tran-15 .tile > .a::after,
.tran-15 .tile .image::after,
.tran-15 .tile .image .img {
  transition: all 1.5s ease;
}

.tran-20 .tile > .a::after,
.tran-20 .tile .image::after,
.tran-20 .tile .image .img {
  transition: all 2s ease;
}

/********************************************************
	■ 왼쪽에 아이콘이미지 / 오른쪽에 head, desc
********************************************************/
.ts-lefticon1 {
  margin: 0 -10px;
}

.ts-lefticon1 .tile {
  padding: 0 10px;
}

.ts-lefticon1 .tile > .a {
  display: table;
  border: 1px solid #d2d2d2;
  height: 130px;
  padding: 0 15px 0 20px;
}

.ts-lefticon1 .image {
  display: table-cell;
  width: 100px;
}

.ts-lefticon1 .image .img {
  width: 100%;
  height: 100%;
  background-size: contain;
}

.ts-lefticon1 .content {
  display: table-cell;
  padding-left: 30px;
  height: 100%;
  vertical-align: middle;
}

.ts-lefticon1 .content .desc {
  margin-top: 10px;
  color: #666;
  font-weight: 300;
}

@media (max-width: 1199px) {
  .ts-lefticon1 {
    margin: 0 -5px;
  }
  .ts-lefticon1 .tile {
    padding: 0 5px;
  }
  .ts-lefticon1 .content {
    padding-left: 10px;
  }
  .ts-lefticon1 .content .desc {
    display: none;
  }
}
@media (max-width: 1023px) {
  .ts-lefticon1 .tile > a {
    height: 90px;
    padding: 0 5px;
  }
  .ts-lefticon1 .image {
    width: 70px;
  }
}
@media (max-width: 767px) {
  .ts-lefticon1 .tile > a {
    height: 75px;
  }
  .ts-lefticon1 .image {
    height: 60px;
  }
}
/********************************************************
	■ 왼쪽에 이미지 / 오른쪽에 head, desc
********************************************************/
.ts-rectimg-left-1 {
  margin: 0 -10px;
}

.ts-rectimg-left-1 .tile {
  position: relative;
  padding: 0 10px;
}

.ts-rectimg-left-1 .tile > .a {
  position: relative;
}

.ts-rectimg-left-1 .image {
  position: relative;
  width: 60%;
}

.ts-rectimg-left-1 .image .img {
  width: 100%;
  height: 100%;
}

.ts-rectimg-left-1 .content {
  position: absolute;
  z-index: 2;
  left: 60%;
  right: 0;
  top: 0;
  bottom: 0;
  height: auto;
}

.ts-rectimg-left-1 .content .desc {
  margin-top: 10px;
  color: #666;
  font-weight: 300;
}

@media (max-width: 1199px) {
  .ts-rectimg-left-1 {
    margin: 0 -5px;
  }
  .ts-rectimg-left-1 .tile {
    padding: 0 5px;
  }
}
/********************************************************
	■ 위에 정사각 이미지 / 아래에 head, desc
********************************************************/
.ts-squareimg-top-1 .tile {
  margin-bottom: 50px;
}

.ts-squareimg-top-1 .image .img {
  position: relative;
  padding-bottom: 100%;
}

/* 이미지 직사각 비율로 표현하려면 padding-bottom(%)을 재정의한다. */
.ts-squareimg-top-1 .content {
  margin-top: 20px;
  height: 100%;
}

.ts-squareimg-top-1 .content .desc {
  margin-top: 10px;
  color: #666;
  font-weight: 300;
}

@media (max-width: 767px) {
  .ts-squareimg-top-1 {
    margin: 0 -5px;
  }
  .ts-squareimg-top-1 .tile {
    padding: 0 5px;
  }
}
/********************************************************
	■ 아래에 정사각 이미지 / 아래에 head, desc
********************************************************/
.ts-squareimg-bottom-1 .image .img {
  position: relative;
  padding-bottom: 100%;
}

.ts-squareimg-bottom-1 .content {
  margin-bottom: 20px;
}
.ts-squareimg-bottom-1 .content .desc {
  margin-top: 10px;
  color: #666;
  font-weight: 300;
}
/********************************************************
	■ 정사각 이미지 / 내부에 head, desc
********************************************************/
.ts-squareimg-full .tile {
  margin: 0;
}

.ts-squareimg-full .tile > .a {
  position: relative;
}

.ts-squareimg-full .image .img {
  position: relative;
  padding-bottom: 100%;
}

.ts-squareimg-full .tile-h-2x .image .img {
  padding-bottom: 50%;
}

.ts-squareimg-full .content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/********************************************************
	■ 롤오버효과 (Hover Effects)
********************************************************/
/* 일반적으로 타일(tile) 요소에 적용 */
/* 타일(tile) 요소가 아닌 경우에 적용하려면 hover-effect 클래스를 활용한다. */
/* hover-effect 클래스는 효과를 적용할 a 또는 .image 요소에 추가한다. */
a.hover-effect {
  position: relative;
  display: block;
}

.image.hover-effect {
  position: relative;
  overflow: hidden;
}

a.hover-effect::after,
.image.hover-effect::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  transition: all 0.3s ease;
}

/* 실제 효과 */
/* 다음의 롤오버효과 클래스는 효과를 적용할 a / .image / .img 의 상위 요소에 추가해야한다. */
/* ----- a 요소 - 테두리 내부 그림자 :: a-shadow-inset ----- */
.hover-a-shadow-inset .a::after {
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.2);
  opacity: 0;
}

.hover-a-shadow-inset .a:hover::after {
  opacity: 1;
}

/* ----- 이미지 - 테두리 내부 그림자 :: img-shadow-inset ----- */
.hover-img-shadow-inset .a .image::after {
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
}

.hover-img-shadow-inset .a:hover .image::after {
  opacity: 1;
}

/* ----- a 요소 - 테두리 7px :: a-border7 ----- */
.hover-a-border7 .a::after {
  border: 2px solid rgba(100, 100, 100, 0);
}

.hover-a-border7 .a:hover::after {
  border-width: 7px;
  border-color: #646464;
}

/* ----- 이미지 - 테두리 7px :: img-border7 ----- */
.hover-img-border7 .a .image::after {
  border: 2px solid rgba(100, 100, 100, 0);
}

.hover-img-border7 .a:hover .image::after {
  border-width: 7px;
  border-color: #646464;
}

/* ----- 이미지 - 배경마스크 알파 x% :: img-alphaXX ----- */
.hover-img-alpha30 .a:hover .image::after {
  background-color: rgba(0, 0, 0, 0.3) !important;
}

.hover-img-alpha40 .a:hover .image::after {
  background-color: rgba(0, 0, 0, 0.4) !important;
}

.hover-img-alpha50 .a:hover .image::after {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.hover-img-alpha60 .a:hover .image::after {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

.hover-img-alpha70 .a:hover .image::after {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

.hover-img-alpha80 .a:hover .image::after {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

.hover-img-alpha90 .a:hover .image::after {
  background-color: rgba(0, 0, 0, 0.9) !important;
}

.hover-img-alpha100 .a:hover .image::after {
  background-color: black !important;
}

/* ----- 이미지 - 확대 x% :: img-zoomXXX ----- */
.hover-img-zoom110 .a:hover .img {
  transform: scale(1.1);
}

.hover-img-zoom115 .a:hover .img {
  transform: scale(1.15);
}

.hover-img-zoom120 .a:hover .img {
  transform: scale(1.2);
}

.hover-img-zoom130 .a:hover .img {
  transform: scale(1.3);
}

/* ----- a 요소 - more 클래스 객체 보이기 :: a-more ----- */
.hover-a-more .a:hover .more {
  display: block;
}

.hover-a-more-flex .a:hover .more {
  display: flex;
}

.hover-a-height1 .a::before {
  background: white;
  transition: all 0.8s;
}

.hover-a-height1 .a::after {
  top: 100% !important;
  transition: all 0.8s;
}

.hover-a-height1 .a:hover::before {
  top: -20px;
  bottom: -20px;
}

.hover-a-height1 .a:hover::after {
  top: -20px !important;
  bottom: -20px;
}

/* ----- a 요소 - a2, a3 클래스 테두리 2px 애니매이션1 :: a-border2-ani1 ----- */
.hover-a-border2-ani1 .a .a2::before,
.hover-a-border2-ani1 .a .a2::after,
.hover-a-border2-ani1 .a .a3::before,
.hover-a-border2-ani1 .a .a3::after {
  transition-duration: 100ms;
  transition-delay: 0ms;
  opacity: 0;
}

.hover-a-border2-ani1 .a:hover .a2::before,
.hover-a-border2-ani1 .a:hover .a2::after,
.hover-a-border2-ani1 .a:hover .a3::before,
.hover-a-border2-ani1 .a:hover .a3::after {
  opacity: 1;
}

.hover-a-border2-ani1 .a .a2::before {
  left: 0;
  right: 100%;
  top: 0;
  height: 2px;
  background: #333;
}

.hover-a-border2-ani1 .a:hover .a2::before {
  right: 0;
}

.hover-a-border2-ani1 .a .a2::after {
  right: 0;
  top: 0;
  bottom: 100%;
  width: 2px;
  background: #333;
}

.hover-a-border2-ani1 .a:hover .a2::after {
  bottom: 0;
  transition-delay: 100ms;
}

.hover-a-border2-ani1 .a .a3::before {
  left: 100%;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #333;
}

.hover-a-border2-ani1 .a:hover .a3::before {
  left: 0;
  transition-delay: 200ms;
}

.hover-a-border2-ani1 .a .a3::after {
  left: 0;
  top: 100%;
  bottom: 0;
  width: 2px;
  background: #333;
}

.hover-a-border2-ani1 .a:hover .a3::after {
  top: 0;
  transition-delay: 300ms;
}

/* ----- a 요소 - 볼록 효과 - 위로 5px/10px 이동 및 적절한 그림자효과 :: a-top5shadow , a-top10shadow ----- */
.hover-a-top5shadow .a:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px) !important;
}

.hover-a-top10shadow .a:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-10px) !important;
}

/********************************************************
	■ Animate.css 확장 애니메이션 // CSS3 애니메이션 관련
********************************************************/
@keyframes fadeInDown50 {
  from {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fadeInDown50 {
  animation-name: fadeInDown50;
}

@keyframes fadeInUp50 {
  from {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp50 {
  animation-name: fadeInUp50;
}

@keyframes fadeInLeft50 {
  from {
    opacity: 0;
    transform: translate3d(-50%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fadeInLeft50 {
  animation-name: fadeInLeft50;
}

@keyframes fadeInRight50 {
  from {
    opacity: 0;
    transform: translate3d(50%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fadeInRight50 {
  animation-name: fadeInRight50;
}

/* WOW.js Animation Blink Bug Fix */
.wow {
  visibility: hidden;
}

.wow.wow-completed {
  animation-name: none !important;
}

/* Trainsition */
.tran-2 {
  transition: all 0.2s ease !important;
}

.tran-3 {
  transition: all 0.3s ease !important;
}

.tran-4 {
  transition: all 0.4s ease !important;
}

.tran-5 {
  transition: all 0.5s ease !important;
}

/* Animation Delay */
.ani-d-01 {
  animation-delay: 0.1s;
}

.ani-d-02 {
  animation-delay: 0.2s;
}

.ani-d-03 {
  animation-delay: 0.3s;
}

.ani-d-04 {
  animation-delay: 0.4s;
}

.ani-d-05 {
  animation-delay: 0.5s;
}

.ani-d-06 {
  animation-delay: 0.6s;
}

.ani-d-07 {
  animation-delay: 0.7s;
}

.ani-d-08 {
  animation-delay: 0.8s;
}

.ani-d-09 {
  animation-delay: 0.9s;
}

.ani-d-10 {
  animation-delay: 1s;
}

.ani-d-15 {
  animation-delay: 1.5s;
}

.ani-d-20 {
  animation-delay: 2s;
}

/********************************************************
	■ 반응형 코어
********************************************************/
/* ----- Desktops ----- */
@media (min-width: 768px) {
  .m-ele {
    display: none !important;
  }
}
/* ----- Mobile ----- */
@media (max-width: 767px) {
  .d-ele {
    display: none !important;
  }
}

/********************************************************
	■ HTML 기본 초기화
********************************************************/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  word-break: keep-all;
  word-wrap: break-word;
}

body {
  position: relative;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

a,
a:link,
a:visited,
a:active,
a:hover {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
}

button {
  border: 0;
  background: none;
}

fieldset legend {
  display: none;
}

label {
  font-weight: inherit;
}

label.checkbox,
label.radio {
  line-height: 12px;
  font-size: 12px;
  font-weight: normal;
  cursor: pointer;
}

hr {
  display: block;
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eee;
}

blockquote {
  font-size: 12px;
  margin: 0 0 20px;
}

*[role="button"] {
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: bold;
  line-height: 150%;
}

.h0n,
.h1n,
.h2n,
.h3n,
.h4n,
.h5n,
.h6n {
  font-weight: 400;
  line-height: 150%;
}

.h0,
h1,
h2,
h3,
.h0n,
.h1n,
.h2n,
.h3n {
  margin-top: 10px;
  margin-bottom: 10px;
}

h4,
h5,
h6,
.h4,
.h5,
.h6,
.h4n,
.h5n,
.h6n {
  margin: 0;
}

.h0 {
  font-weight: bold;
  font-size: 4rem;
}

h1,
.h1,
.h1n {
  font-size: 2.7rem;
}

h2,
.h2,
.h2n {
  font-size: 2.4rem;
}

h3,
.h3,
.h3n {
  font-size: 2.1rem;
}

h4,
.h4,
.h4n {
  font-size: 1.8rem;
}

h5,
.h5,
.h5n {
  font-size: 1.5rem;
}

h6,
.h6,
.h6n {
  font-size: 1.2rem;
}

@media (max-width: 767px) {
  .h0 {
    font-size: 3rem;
  }
  h1,
  .h1,
  .h1n {
    font-size: 2.1rem;
  }
  h2,
  .h2,
  .h2n {
    font-size: 1.9rem;
  }
  h3,
  .h3,
  .h3n {
    font-size: 1.7rem;
  }
  h4,
  .h4,
  .h4n {
    font-size: 1.5rem;
  }
  h5,
  .h5,
  .h5n {
    font-size: 1.3rem;
  }
  h6,
  .h6,
  .h6n {
    font-size: 1.1rem;
  }
}
@media (max-width: 480px) {
  .h0 {
    font-size: 2.5rem;
  }
  h1,
  .h1,
  .h1n {
    font-size: 2.1rem;
  }
  h2,
  .h2,
  .h2n {
    font-size: 1.9rem;
  }
  h3,
  .h3,
  .h3n {
    font-size: 1.7rem;
  }
  h4,
  .h4,
  .h4n {
    font-size: 1.5rem;
  }
  h5,
  .h5,
  .h5n {
    font-size: 1.3rem;
  }
  h6,
  .h6,
  .h6n {
    font-size: 1.1rem;
  }
}

dl {
  margin-bottom: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a:focus {
  outline: none;
}

p,
ol li {
  margin: 0;
  word-break: keep-all;
}

img {
  max-width: 100%;
}

/********************************************************
	■ 반응형 스타일 - 주요 분기점
********************************************************/
/* ----- Extra Large Devices (Desktops) ----- */
/* ----- Large Devices (Desktops) ----- */
/* ----- Medium Devices (Tablets) ----- */
/* ----- Small Devices (Landscape phones) ----- */
/* ----- Extra Small Devices (Portrait phones) ----- */
/* 참고 분기점 - 1200 */
/* 핵심 분기점 - <1024 / <768 / <=480 */
/* ----- Midium Devices (Tablets) ----- */
/* ----- Small Devices (Landscape phones) ----- */
/* ----- Extra Small Devices (Portrait phones) ----- */
/* 핵심 분기점 4개 (템플릿) */

/*# sourceMappingURL=base.css.map */