@charset "utf-8"; 


/* ******************** component ******************** */

/* input */ 
@import "../../component/input-style";

/* 컨텐츠 공용 타이틀 */
@import "../../component/title-style";

/* btn-style */ 
@import "../../component/button-style.scss";

/* paging-style */ 
@import "../../component/paging";

/* ******************** sub-common ******************** */ 

/* sub-banner */ 
@import "../common/_sub-banner";

/* sub-tab */ 
@import "../common/_sub-tab";

/* sub-cont */ 
@import "../common/_sub-cont";

/* banner */ 
@import "./_banner";


.ci-wrap {
	.ci-group {
		display: flex; padding: 20px 0 50px; border-bottom: 1px dashed #ddd;
		.title-area {
			width: 280px; font-size: 2.5rem; font-weight: 600;
		}
		.cont-area {
			width: calc(100% - 280px);
		}
	}
	.concept {
		.logo-img {
			text-align: center; border: 1px solid var(--line-color); padding: 70px 20px;
			> img {
				width: 45%;
			}
		}
		.description {
			.text-area {
				padding: 30px 20px; background: #f2f2f2; border: 1px solid var(--line-color); border-top: 0;
				.tit {
					font-weight: 600; font-size: 1.6rem; padding-bottom: 15px;
				}
				.txt {
					font-size: 1.5rem; line-height: 1.7; font-weight: 400;
				}
			}
			.download-area {
				display: flex; gap: 15px; padding-top: 20px;
				.a-down {
					display: flex; flex: 1; justify-content: space-between; align-items: center; padding: 15px; width: 30%; text-align: center; border: 1px solid var(--line-color); box-shadow: 3px 3px 0px #dfdfdf; margin-right: 5px; font-weight: 600;
					&:hover {
						border-color: #aaa;
						.down {
							color: #7b7b7b;
						}
					}
					.tt {
						font-size: 1.3rem; font-weight: 900;
						.material-icons {
							margin-right: 7px;
						}
					}
					.down {
						font-weight: 900; color: #ccc;
					}
				}
			}
		}
	}
	.color {
		.color-row {
			display: flex; flex-wrap: wrap; gap: 15px 0;
			&:not(:last-child) {
				padding-bottom: 30px;
			}
			.box {
				flex: 1 1 50%;
				.detail {
					display: flex; gap: 20px; align-items: center;
					.colr {
						width: 150px; height: 80px; 
						&.color1 {
							background: #0D57A7;
						}
						&.color2 {
							background: #008FD3;
						}
						&.color3 {
							background: #00B3CD;
						}
						&.color4 {
							background: #88ABDA;
						}
						&.color5 {
							background: #6EC3EE;
						}
						&.color6 {
							background: #91D2E5;
						}
					}
					.code {
						font-size: 1.3rem; display: flex; flex-direction: column; gap: 10px 0;
						dl {
							display: flex;
							dt {
								font-weight: 600; width: 80px;
							}
						}
					}
				}
			}
		}
	}
	.signature {
		.cont-area {
			display: flex; gap: 20px;
			.logo-box {
				flex: 1;
				.tit  {
					font-size: 1.4rem; font-weight: 500; padding-top: 10px; text-align: center;
				}
				.logo {
					width: 100%; height: 200px; border: 1px solid var(--line-color); text-align: center; padding: 30px 50px;
					> img {
						width: 100%; height: 100%; object-fit: contain;
					}
				}
			}
		}
	}
}

@media (max-width: 1024px) {
	.ci-wrap {
		.ci-group {
			flex-wrap: wrap;
			.title-area {
				font-size: 2rem; width: 100%; padding-bottom: 20px;
			}
			.cont-area {
				width: 100%;
			}
		}
	}
}

@media (max-width: 768px) {
	.ci-wrap {
		.concept {
			.logo-img {
				position: relative; padding: 30px; height: 200px;
				img {
					height: 100%; width: 80%; object-fit: contain;
				}
			}
			.description {
				.download-area {
					gap: 5px;
					.a-down {
						padding: 10px 15px;
						.tt {
							font-size: 1.2rem;
						}
						.down {
							font-size: 1.2rem;
						}
					}
				}
			}
		}
	}
}

@media (max-width: 500px) {
	.ci-wrap {
		.ci-group {
			padding: 30px 0;
			&:first-child {
				padding-top: 0;
			}
			.title-area {
				font-size: 1.7rem; padding-bottom: 15px;
			}
		}
		.concept {
			.logo-img {
				img {
					width: 100%;
				}
			}
			.description {
				.text-area {
					padding: 20px;
					.tit {
						font-size: 1.5rem; padding-bottom: 10px;
					}
					.txt {
						font-size: 1.3rem;
					}
				}
				.download-area {
					gap: 10px 0; flex-direction: column;
					.a-down {
						width: 100%;
					}
				}
			}
		}
		.color {
			.color-row {
				.box {
					.detail {
						gap: 15px;
						.colr {
							width: 80px; height: 80px;
						}
						.code {
							font-size: 1.2rem;
							dl {
								dt {
									width: 60px;
								}
							}
						}
					}
				}
			}
		}
		.signature {
			.cont-area {
				.logo-box {
					.logo {
						padding: 20px;
					}
					.tit {
						font-size: 1.3rem;
					}
				}
			}
		}
	}
}