@charset "utf-8";
/* ---------- 2017-12-22 Modified (Made By C.G.W) ---------- */

/********************************************************
	■ 타일 스타일 공용
********************************************************/

.tiles {  }
.tiles::before, .tiles::after { content:""; clear:both; display:block; }
.tiles .tile { float:left; margin-bottom:10px; text-align:center; }
.tiles .tile a { position:relative; width:100%; padding:0; display:block; }
.tiles .tile a::after { content:""; position:absolute; left:0; right:0; top:0; bottom:0; z-index:1; transition:all .3s ease !important; }

.tiles .image { position:relative; overflow:hidden; }
.tiles .image::after { content:""; position:absolute; left:0; right:0; top:0; bottom:0; z-index:1; transition:all .3s ease !important; }

.tiles .img { background-repeat:no-repeat; background-size:cover; background-position:center; transition:all .3s ease !important; }
.tiles .content { height:100%; text-align:left; }
.tiles .head { font-size:16px; }
.tiles .desc {  }
@media (max-width:1199px) {
	.tiles { margin:0 -5px; }
	.tiles .tile { padding:0 5px; }
}
@media (max-width:991px) {  }
@media (max-width:767px) {  }
@media (max-width:480px) {  }

/********************************************************
	■ 왼쪽에 아이콘이미지 / 오른쪽에 head, desc
********************************************************/

.ts-lefticon1 { margin:0 -10px; }
.ts-lefticon1 .tile { padding:0 10px; }
.ts-lefticon1 .tile a { display:table; border:1px solid rgb(210,210,210); height:130px; padding:0 15px 0 20px; }
.ts-lefticon1 .image { display:table-cell; width:100px; }
.ts-lefticon1 .img { width:100%; height:100%; background-size:contain; }
.ts-lefticon1 .content { display:table-cell; padding-left:30px; height:100%; vertical-align:middle; }
.ts-lefticon1 .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 .desc { display:none; }
}
@media (max-width:991px) {
	.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; }
}
@media (max-width:480px) {  }

/********************************************************
	■ 위에 정사각 이미지 / 아래에 head, desc
********************************************************/

.ts-squareimg-top-1 { margin:0 -15px; }
.ts-squareimg-top-1 .tile { padding:0 15px; margin-bottom:50px; }
.ts-squareimg-top-1 .tile a {  }
.ts-squareimg-top-1 .img { position:relative; padding-bottom:100%; }		/* 이미지 직사각 비율로 표현하려면 padding-bottom(%)을 재정의한다. */
.ts-squareimg-top-1 .content { margin-top:20px; height:100%; }
.ts-squareimg-top-1 .desc { margin-top:10px; color:#666; font-weight:300; }
@media (max-width:1199px) {
	.ts-squareimg-top-1 { margin:0 -5px; }
	.ts-squareimg-top-1 .tile { padding: 0 5px; }
}
@media (max-width:991px) {  }
@media (max-width:767px) {  }
@media (max-width:480px) {  }

/********************************************************
	■ 위에 정사각 이미지 / 아래에 head, desc
********************************************************/

.ts-squareimg-full { margin:0; }
.ts-squareimg-full .tile { padding:0; margin:0; }
.ts-squareimg-full .tile a { position:relative; }
.ts-squareimg-full .img { position:relative; padding-bottom:100%; }
.ts-squareimg-full .tile-h-2x .img { padding-bottom:50%; }
.ts-squareimg-full .content { position:absolute; left:0; top:0; right:0; bottom:0; width:auto; height:auto; }
@media (max-width:1199px) {  }
@media (max-width:991px) {  }
@media (max-width:767px) {  }
@media (max-width:480px) {  }