@charset "utf-8";


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

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

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

/* title-style */ 
@import "../../component/title-style.scss";

/* board */
@import "../../component/vertical-table";

/* search */
@import "../../component/board";


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

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

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

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

/* agreement */ 
@import "./_agreement";

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

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



/* ******************** ICC ******************** */

.icc-state-wrap {
	display: flex; flex-wrap: wrap; gap: 50px 20px;
	.icc-item {
		--img-width: 170px;
		--gap: 20px;
		display: flex; gap: var(--gap); width: calc(50% - 10px);
		.img-area {
			width: var(--img-width); height: calc(var(--img-width) * 1.4);
			img {
				width: 100%; height: 100%; object-fit: contain;
			}
		}
		.info-area {
			width: calc(100% - var(--img-width) - var(--gap)); padding-top: 10px;
			.tit {
				font-size: 1.8rem; font-weight: 600; padding-bottom: 15px;
			}
			.detail-info {
				.t-label {
					font-size: 1.3rem; color: #7283bb; font-weight: 600; margin-bottom: 10px;
				}
				.state-info {
					padding: 10px; background: #eaf0f1; border-radius: 5px; margin-bottom: 15px;
					span {
						display: inline-block; font-size: 1.3rem; padding-right: 10px;
						b {
							color: var(--main-color);
						}
					}
				}
				.state-label {
					display: flex; flex-direction: column; gap: 10px;
					dl {
						display: flex; flex-wrap: wrap; font-size: 1.3rem; line-height: 1.3;
						dt {
							width: 75px; font-weight: 500;
						}
						dd {
							width: calc(100% - 75px);
						}
					}
				}
				.more-link {
					margin-top: 20px;
					.more-btn {
						font-size: 1.3rem; font-weight: 500; padding: 10px 20px; background: var(--main-color); color: #fff; border-radius: 5px; display: inline-block;
					}
				}
			}
		}
	}
}


.icc-container {
	.form-wrap .vertic-table table {
		.file-input {
			>.label {
				font-size: 1.3rem; color: #333; white-space: nowrap; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; margin-left: 0; top: 0; padding: 0 55px 0 0;
			}
			>.label.empty {
				color: #888; opacity: .5;
			}
		}
	}
	
	.file-input {
		display: inline-block; text-align: left; width: 700px; max-width: 100%; position: relative; padding-left: 10px; font-size: 1.2rem; line-height: 40px; vertical-align: middle; background-color: #fff; cursor: pointer; border: 1px solid var(--line-color); font-weight: 400; border-radius: 5px; margin-top: 7px;
		>input[type='file'] {
			position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 301; cursor: pointer; margin-top: 0 !important;
		}
		>.button {
			display: inline-block; padding: 0; font-size: 1.2rem; vertical-align: top; background-color: #1f1f1f; cursor: pointer; border: 1px solid #1f1f1f; border-bottom-color: #1f1f1f; border-radius: 4px; font-weight: 400; color: #fff; height: 42px; border-top-left-radius: 0; border-bottom-left-radius: 0; position: absolute; z-index: 2; top: -1px; right: -1px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; width: 70px; text-align: center; line-height: 40px;
		}
		&:hover {
			>.button {
				background: #000; color: #fff; border-color: #000;
			}
		}
	}
	.file-row {
		&:not(:first-child) {
			margin: 5px 0 0;
		}
	}
	.down-file-wrap {
		margin-top: 20px;
		a.file {
			height: 40px; display: inline-block; margin: 2.5px 2.5px 2.5px 0; height: 100%; border: 1px solid #d1dae6; border-radius: 50px; padding: 5px 20px 5px 40px; font-size: 1.4rem; position: relative; background: #f7f7f7; line-height: 20px;
		}
		a {
			&:hover {
				background: #F0F0F0;
			}
			&:before {
				position: absolute; content: ''; width: 16px; height: 16px; background: url('../../../../../img/sub/linc/common/down_icon.svg'); background-size: 16px 16px; left: 16px; top: 7px; opacity: .6;
			}
		}
	}
}


@media (max-width: 768px) {
	.icc-state-wrap {
		.icc-item {
			--img-width: 140px; 
			--gap: 15px;
			width: 100%;
			.info-area {
				padding-top: 0;
				.tit {
					font-size: 1.6rem; padding-bottom: 12px;
				}
				.detail-info {
					.t-label {
						font-size: 1.2rem; margin-bottom: 8px;
					}
					.state-info {
						padding: 8px; margin-bottom: 12px;
						span {
							font-size: 1.2rem; padding-right: 8px;
						}
					}
					.state-label {
						gap: 8px;
						dl {
							font-size: 1.2rem;
							dt {
								width: 70px;
							}
							dd {
								width: calc(100% - 70px);
							}
						}
					}
					.more-link {
						margin-top: 15px;
						.more-btn {
							font-size: 1.2rem; padding: 8px 16px;
						}
					}
				}
			}
		}
	}
}

@media (max-width: 500px) {
	.icc-state-wrap {
		.icc-item {
			--img-width: 100px;
			.info-area {
				.tit {
					font-size: 1.5rem; padding-bottom: 10px;
				}
				.detail-info {
					.state-info {
						span {
							padding: 3px 0; width: 48%;
						}
					}
					.more-link {
						.more-btn {
							width: 100%; text-align: center; font-size: 1.2rem; padding: 7px 0;
						}
					}
				}
			}
		}
	}
	.icc-container {
		.vertic-table {
			table {
				tr {
					td {
						line-height: 1.2; font-size: 1.2rem; 
						.file-input {
							width: 100%;
						}
					}
					th {
						padding: 10px 3px; line-height: 1.2; font-size: 1.2rem; word-break: auto-phrase;
					}
				}
			}
		}
	}
}