@charset "utf-8";

/* 2023.12.07 kang nuri */
/* aboutids.css */


/**************************************************/

#aboutids_01{
	padding: 262px 0 210px 0;
	text-align: center;
	background-position: center;
	background-size: cover;
}

#aboutids_01 h1{
	font-size: 56px;
	color: #fff;
}

#aboutids_02{
	padding: 63px 0 120px 0;
}

#aboutids_02 .layout_container > .title{
	text-align: center;
	margin-bottom: 120px;
}

#aboutids_02 .layout_container > .title h2{
	font-size: 40px;
	margin-bottom: 16px;
}

#aboutids_02 .layout_container > .title .subtitle{
	font-size: 24px;
	font-weight: 500;
	line-height: 30px;
}

.aboutids.bgpolicy{
	background-image: url("../img/aboutids/policy_01.jpg");
}

.aboutids.bgvision{
	background-image: url("../img/aboutids/vision_01.jpg");
}

.aboutids.bgceo{
	background-image: url("../img/aboutids/ceo_01.jpg");
}

.aboutids.bghistory{
	background-image: url("../img/aboutids/history_01.jpg");
}

.aboutids.bgci{
	background-image: url("../img/aboutids/ci_01.jpg");
}

.aboutids.bgnetwork{
	background-image: url("../img/aboutids/network_01.jpg");
}

/**************************************************/

.policy_list > li{
	box-sizing: border-box;
	display: inline-block;
	width: calc(25% - 15px);
	height: 290px;
	padding: 24px 16px;
	border: solid 1px #c4c4c4;
	box-shadow: 6px 12px 12px 0px rgba(0, 0, 0, 0.05);
	margin-right: 20px;
	margin-bottom: 20px;
	float: left;
	font-size: 14px;
}

.policy_list > li:nth-child(4n){
	margin-right: 0;
}

.policy_list > li:nth-child(n+5){
	margin-bottom: 0;
}

.policy_list > li img{
	width: 56px;
}

.policy_list > li .title{
	font-weight: 500;
	font-size: 24px;
	line-height: 1.25;
	margin: 16px 0;
}

/**************************************************/

.vision_list > li{
	box-sizing: border-box;
	display: block;
	width: 100%;
	border: solid 1px #c4c4c4;
	box-shadow: 6px 12px 12px 0px rgba(0, 0, 0, 0.05);
	margin-bottom: 40px;
}

.vision_list > li:last-child{
	margin-bottom: 0;
}

.vision_list > li > div{
	display: table-cell !important;
	height: 320px;
	vertical-align: top;
}

.vision_list > li > div.only_m{
	display: none !important;
}

.vision_list > li .typo{
	padding: 0 16px;
}

.vision_list > li .img{
	width: 895px;
}

.vision_list > li .img > img{
	width: 100%;
}

.vision_list > li .img > img.only_pc{
	display: block !important;
}

.vision_list > li .title{
	font-weight: 500;
	font-size: 24px;
	line-height: 1.25;
	margin: 24px 0;
}

/**************************************************/

#aboutids_02 .layout_container > .title.ceo{
	text-align: left;
	margin-bottom: 0;
}

#aboutids_02 .layout_container > .title.ceo .img img{
	width: 100%;
}

#aboutids_02 .layout_container > .title.ceo .subtitle{
	margin-top: 80px;
	margin-bottom: 53px;
}

#aboutids_02 .layout_container > .title.ceo .font_smbold{
	margin-top: 83px;
}

/**************************************************/

.history_list{
	box-sizing: border-box;
	width: 50%;
	display: inline-block;
	float: left;
}

.history_list.col_01{
	border-right: solid 1px #c4c4c4;
	padding-right: 9px;
	text-align: right;
}

.history_list.col_02{
	padding-left: 10px;
}

.history_list_img > li{
	display: inline-block;
	width: 100%;
	height: 240px;
	margin-bottom: 40px;
}

.history_list_img > li .img img{
	width: 100%;
}

.history_list_typo{
	margin: 0 24px;
}

.history_list_typo > li {
	display: inline-block;
	width: 386px;
	margin-bottom: 40px;
}

.history_list_typo > li:last-child{
	margin-bottom: 0;
}

.history_list_typo > li .title{
	font-weight: 500;
	font-size: 24px;
	line-height: 1.25;
	margin-bottom: 24px;
}

.history_list.col_01 .history_list_img, .history_list.col_02 .history_list_typo{
	margin-bottom: 40px;
}

/**************************************************/

#aboutids_02 .layout_container > .title.ci{
	margin-bottom: 80px;
}

#aboutids_02 .layout_container > .title.ci > h2{
	margin-bottom: 24px;
}

.ci_grid_list{
	margin-bottom: 82px;
}

.ci_grid_list > li{
	display: inline-block;
	width: calc(50% - 10px);
	float: left;
	margin-right: 20px;
}

.ci_grid_list > li:last-child{
	margin-right: 0;
}

.ci_grid_list > li .img img{
	width: 100%;
	box-shadow: 6px 12px 12px 0px rgba(0, 0, 0, 0.05);
}

.ci_grid_list > li > .title{
	margin-top: 16px;
}

.ci_list{
	display: inline-block;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.ci_list > li{
	display: inline-block;
	width: 285px;
	float: left;
	margin-right: 20px;
}

.ci_list > li:last-child{
	margin-right: 0;
}

.ci_list > li .img img{
	width: 100%;
	box-shadow: 6px 12px 12px 0px rgba(0, 0, 0, 0.05);
}

.ci_list > li > .title{
	margin-top: 16px;
}

/**************************************************/

#aboutids_02 .layout_container > .title.network{
	margin-bottom: 62px;
}

.network_list.tab > li{
	box-sizing: border-box;
	display: inline-block;
	width: calc(50% - 10px);
	float: left;
	border: solid 1px #c4c4c4;
	color: #c4c4c4;
	border-bottom: 0;
	text-align: center;
	padding: 17px 0;
	font-weight: 500;
	font-size: 24px;
	line-height: 1.25;
	margin-right: 20px;
	cursor: pointer;
	box-shadow: 6px 12px 12px 0px rgba(0, 0, 0, 0.05);
}

.network_list.tab > li:last-child{
	margin-right: 0;
}

.network_list.tab > li.active{
	border-color: #222222;
	color: #222222;
}

.network_list.inner{
	margin-bottom: 22px;
	box-shadow: 6px 12px 12px 0px rgba(0, 0, 0, 0.05);
}

.network_list.inner > li{
	box-sizing: border-box;
	display: none;
	width: 100%;
	height: 420px;
	border: solid 1px #222222;
}

.network_list.inner > li.active{
	display: block;
}

.network_list.inner > li > iframe{
	width: 100%;
	height: 100%;
	border: 0;
}

.network > p{
	margin-bottom: 8px;
}

/* MOBILE ------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media (max-width:1024px){

	/**************************************************/

	#aboutids_01{
		padding: 280px 0 220px 0;
	}

	#aboutids_01 h1{
		font-size: 40px;
	}

	#aboutids_02{
		padding: 64px 0;
	}

	#aboutids_02 .layout_container > .title{
		text-align: left;
		margin-bottom: 64px;
	}

	#aboutids_02 .layout_container > .title h2{
		line-height: 40px;
	}

	#aboutids_02 .layout_container > .title p{
		font-size: 16px;
	}

	#aboutids_02 .layout_container > .title .subtitle{
		font-size: 24px;
		font-weight: 500;
		line-height: 30px;
	}

	.aboutids.bgpolicy{
		background-image: url("../img/aboutids/m_policy_01.jpg");
	}

	.aboutids.bgvision{
		background-image: url("../img/aboutids/m_vision_01.jpg");
	}

	.aboutids.bgceo{
		background-image: url("../img/aboutids/m_ceo_01.jpg");
	}

	.aboutids.bghistory{
		background-image: url("../img/aboutids/m_history_01.jpg");
	}

	.aboutids.bgci{
		background-image: url("../img/aboutids/m_ci_01.jpg");
	}

	.aboutids.bgnetwork{
		background-image: url("../img/aboutids/m_network_01.jpg");
	}

	/**************************************************/

	.policy_list{
		display: flex;
		flex-wrap: wrap;
		list-style: none;
	}

	.policy_list > li{
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		width: calc(50% - 4px);
		height: auto;
		padding-bottom: 50px;
		margin-right: 8px;
		margin-bottom: 16px;
	}

	.policy_list > li:nth-child(2n){
		margin-right: 0;
	}

	.policy_list > li:nth-child(n+5){
		margin-bottom: 16px;
	}

	.policy_list > li img{
		width: 56px;
		height: 56px;
	}

	.policy_list > li .title{
		word-wrap: break-word;
		white-space: pre-wrap;
		width: 100%;
		margin: 14px 0 18px 0;
	}

	/**************************************************/

	.vision_list > li{
		display: inline-block;
		margin-bottom: 32px;
	}

	.vision_list > li:last-child{
		margin-bottom: 0;
	}

	.vision_list > li > div{
		box-sizing: border-box;
		display: inline-block !important;
		width: 100%;
		height: auto;
	}

	.vision_list > li > div.only_m{
		display: inline-block !important;
	}

	.vision_list > li > div.only_pc{
		display: none !important;
	}

	.vision_list > li .typo{
		padding: 0 24px;
	}

	.vision_list > li .img{
		width: 100%;
		overflow: hidden;
	}

	.vision_list > li .img > img.only_pc{
		display: none !important;
	}

	.vision_list > li .img > img.only_m{
		display: block !important;
	}

	.vision_list > li .typo > p{
		font-size: 16px;
		margin-bottom: 32px;
	}

	.vision_list > li .title{
		font-size: 24px !important;
		margin: 32px 0 16px 0 !important;
	}

	/**************************************************/

	#aboutids_02 .layout_container > .title.ceo .subtitle{
		margin-bottom: 64px;
	}

	#aboutids_02 .layout_container > .title.ceo .font_smbold{
		margin-top: 64px;
	}

	/**************************************************/

	#aboutids_02 .layout_container > .title h2.history{
		font-size: 32px;
	}

	.history_list {
	    width: 100%;
	    float: none;
	    border-left: solid 1px #c4c4c4;
	    padding: 0 24px;
	}

	.history.only_m .history_list > li{
		display: inline-block;
		width: 100%;
		margin-bottom: 80px;
		font-size: 16px;
	}

	.history.only_m .history_list > li:last-child{
		margin-bottom: 0;
	}

	.history.only_m .history_list > li .title{
		font-size: 24px;
		font-weight: 500;
		line-height: 30px;
		margin-bottom: 24px;
	}

	/**************************************************/

	#aboutids_02 .layout_container > .title.ci{
		margin-bottom: 24px;
	}

	#aboutids_02 .layout_container > .title.ci > h2{
		font-size: 32px;
		margin-bottom: 64px;
	}

	.ci_grid_list{
		margin-bottom: 64px;
	}

	.ci_grid_list > li{
		width: 100%;
		float: none;
		margin-right: 0;
		margin-bottom: 24px;
	}

	.ci_grid_list > li:last-child{
		margin-bottom: 0;
	}

	.ci_grid_list > li .title{
		font-size: 16px;
	}

	.ci_list{
		left: 0;
		transform: translateX(0);
	}

	.ci_list > li{
		width: 100%;
		float: none;
		margin-right: 0;
		margin-bottom: 32px;
	}

	.ci_list > li:last-child{
		margin-bottom: 0;
	}

	.ci_list > li > .title{
		font-size: 16px;
	}

	/**************************************************/

	#aboutids_02 .layout_container > .title.network{
		margin-bottom: 64px;
	}

	#aboutids_02 .layout_container > .title.network h2{
		font-size: 32px;
	}

	.network_list.tab > li{
		width: calc(50% - 4px);
		margin-right: 8px;
	}

	.network_list.tab > li:last-child{
		margin-right: 0;
	}

	.network_list.inner{
		margin-bottom: 32px;
	}

	.network > p{
		font-size: 16px;
		margin-bottom: 24px;
	}

	.network > p:last-child{
		margin-bottom: 0;
	}

}