@charset "utf-8";

/******************************************************************************/
/* sub-visual */
/******************************************************************************/
.sub-visual {
	position:relative;
	height: 360px;
	padding-top: 7.2rem;
	overflow: hidden;
}
.sub-visual::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url('/images/uimc/eng/content/sub-visual.jpg') no-repeat center center/cover;
	animation: sub-visual 4s forwards;
	z-index:-1;
}
@keyframes sub-visual{
	0%{transform:scale(1.2); filter: blur(8px);}	
 	100%{transform:scale(1); filter: blur(0px);}
}
.sub-visual .layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  text-align: center;
}
.sub-visual-title {
  font-family:'Red Hat Display';
  font-size: clamp(2.4rem, 1.8rem + 1.6vw, 4rem);
  font-weight: 700;
  color: #fff;
}
/* position */
#position{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.2rem;
}	
#position li{
	position: relative;	
	padding-right: 1.2rem;
	font-size: clamp(1.3rem, 1.2rem + 0.2vw, 1.5rem);
	color: #fff;
	opacity: 0.8;
}
#position li:last-child {
	margin-right: 0;
	opacity: 1;
}
#position li::before {
	position:absolute;
	content: '';display:block;
	right: 0;top: 50%;
	transform: translateY(-50%);
	width: 4px;height: 4px;
	background-color: #c5c5c5;
	border-radius: 99rem;
	-webkit-border-radius: 99rem;
}	
#position li:last-child::before {display: none;}
#position li img {width: 2.4rem;}

@media (max-width: 1024px) {
	.sub-visual {
		height: 320px;
		padding-top: 5.2rem;
	}
}
@media (max-width: 576px) {
	.sub-visual {
		height: 200px;
		padding-top: 4rem;
	}
	#position{display: none;}
}	

/******************************************************************************/
/* content */
/******************************************************************************/
div#content {
	position:relative;
	padding:6rem 0 8rem;
}
div#content .inner {
	max-width: 1400px;
	height:100%;
	margin:0 auto;
}
div#content :where(.h4){
	position:relative;
	margin:clamp(0.8rem, 0.65rem + 0.4vw, 1.2rem) 0 clamp(1.6rem, 1.3rem + 0.8vw, 2rem);
	display:inline-flex;
	align-items:center;
	font-family:'Red Hat Display';
	font-size:clamp(1.8rem, 1.4rem + 1vw, 2.8rem);
	font-weight:900;
	color:#111;
}
div#content :where(.h4)::before{
	position:absolute;
	content: '';display:block;
	right:-3.6rem;top:50%;
	width:32px;height:20px;
	background-image: url('/images/uimc/eng/content/icon-h4.svg');
	background-position:left center;
	background-repeat:no-repeat;
	background-size:contain;
	transform:translateY(-50%);
}

@media (max-width: 1440px) {
	div#content .inner{
		max-width: calc(100% - 8%);
	}
}
@media (max-width: 1024px) {
	div#content {padding:3.2rem 0 6rem;}
	div#content :where(.h4)::before{
		right: -2.8rem;
		width:24px;height:16px;
	}
	
}
/* ==========================================
   TAB
========================================== */
.tab-wrap{
	position:relative;
	margin-bottom:5.2rem;
}
.tab-btn{display:none;}
.tab-wrap ul{
	margin:0;
	padding:0.8rem 1.2rem;
    display:flex;
    gap:0.8rem;
	background:#F5F6F9;
	border-radius:99rem;
}
.tab-wrap li{
    flex:1;
	min-width:0;
}
.tab-wrap li a{
    display:flex;
	align-items:center;
	justify-content:center;
	min-height:6rem;
	padding:0 1.2rem;
	text-align:center;
    font-size:1.6rem;
    font-weight:600;
    color:#111;
    background:#fff;
    border-radius:99rem;
    transition:.3s;
	word-break:keep-all;
}
.tab-wrap li.active a{
    background:#101010/*#203c92*/;
    color:#fff;
    font-weight:600;
}
.tab-wrap li a:hover,
.tab-wrap li a:focus{
    color:#111;
}
@media (max-width:1024px){
	.tab-wrap{margin-bottom:3.2rem;}
	.tab-btn{
		width:100%;
		min-height:5.2rem;
		padding:0 2rem;
		display:flex;
		align-items:center;
		justify-content:space-between;
		font-size:1.5rem;
		font-weight:600;
		color:#fff;
		background:#101010;
		border:0;
		border-radius:1.2rem;
		-webkit-border-radius:1.2rem;
		cursor:pointer;
	}
	.tab-btn::after{
		content:'';	
		width:2rem;height:2rem;	
		background:url("/images/uimc/eng/content/icon-arrow.svg") no-repeat center;
		transition:.3s;	
	}
	.tab-btn[aria-expanded="true"] {
		border-radius:1.2rem 1.2rem 0 0;
		-webkit-border-radius:1.2rem 1.2rem 0 0;
	}
	.tab-btn[aria-expanded="true"]::after{transform:rotate(180deg);}
	.tab-wrap ul{	
		position:absolute;	
		top:100%;	
		left:0;	
		width:100%;	
		display:block;	
		background:#fff;	
		border-width:0 1px 1px;
		border-style:solid;
		border-color:#E6E8EA;
		border-radius:0 0 1.2rem 1.2rem;
		-webkit-border-radius:0 0 1.2rem 1.2rem;
		box-shadow:0 0.8rem 2rem rgba(0,0,0,.1);	
		opacity:0;	
		visibility:hidden;	
		transform:translateY(-10px);	
		transition:.3s;	
		z-index:100;	
	}
	.tab-wrap.open ul{	
		opacity:1;
		visibility:visible;
		transform:none;	
	}	
	.tab-wrap li{display:block;}	
	.tab-wrap li+li{margin-top:.3rem;}	
	.tab-wrap li a{
		justify-content:flex-start;	
		padding:0 2rem;	
		min-height:4.8rem;
		font-size:1.4rem;
		text-align:left;
		background:#fff;
		border-radius:1rem;	
	}	
	.tab-wrap li.active a{
	    background:none;
	    color:#0B3082;
	}


}