@charset "utf-8";

/***************************************************************************************************
*	Main Visual 
***************************************************************************************************/
.sdWrap						{position:relative; z-index:1; width:100%; margin:0px auto; padding:40px 20px; box-sizing:border-box; background-color:#dff1f9;}
.sdChart					{position:relative; width:100%; max-width:800px; margin:0 auto; aspect-ratio:1 / 1;}

.sdRing						{position:absolute; left:50%; top:50%; border-radius:50%; transform:translate(-50%, -50%); background:rgba(245,247,252,0.9);}
.sdRing-outer				{width:100%; height:100%;}
.sdRing-inner				{width:80%; height:80%;}

.sdCenter					{position:absolute; left:50%; top:50%; width:38%; height:38%; transform:translate(-50%, -50%); border-radius:50%; background:#ffffff; box-shadow:0 16px 40px rgba(0,0,0,0.10); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; z-index:2; padding:14px 18px; box-sizing:border-box;}
.sdCenterTitle				{margin:0 0 8px; font-size:var(--FS20, 1.25rem); font-weight:500; color:#444;}
.sdCenterSubtitle			{margin:0; font-family:celmonHG; font-size:var(--FS30, 1.5rem); font-weight:700; color:#222; line-height:1.1;}

.sdSectors					{position:absolute; left:50%; top:50%; width:85%; height:85%; transform:translate(-50%, -50%); margin:0; padding:0; list-style:none; z-index:3;}
.sdSector					{position:absolute; left:0; top:0; width:100%; height:100%;}
.sdSectorShape				{position:absolute; left:0; top:0; width:100%; height:100%; border-radius:50%; background:var(--sdColor, #999999); box-shadow:0 16px 32px rgba(0,0,0,0.22); clip-path:polygon(50% 50%, 100% 0, 100% 100%, 50% 50%);}
.sdSectorContent			{position:absolute; transform:translate(-50%, -50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:0; box-sizing:border-box; z-index:4;}

.sdIcon						{display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,0.22); backdrop-filter:blur(2px);}
.sdIcon i					{font-size:var(--FS24, 1.5rem); color:#ffffff; line-height:1;}

.sdLabel					{display:inline-block; font-size:var(--FS18, 1.125rem); font-weight:600; color:#ffffff; text-align:center; white-space:nowrap; background-color:#000000; padding:8px 18px; border-radius:999px;}

/* 반응형 */@media (max-width:768px) {
	.sdWrap					{margin:20px auto; padding:20px 10px;}
	.sdChart				{max-width:520px;}
		.sdSectors			{width:95%; height:95%;}
	.sdCenter				{width:46%; height:46%;}

	.sdCenterTitle			{font-size:var(--FS14, 0.875rem);}
	.sdCenterSubtitle		{font-size:var(--FS18, 1.125rem);}
	.sdIcon					{width:42px; height:42px;}
	.sdIcon i				{font-size:var(--FS16, 1rem);}
	.sdLabel				{font-size:var(--FS13, 0.813rem); padding:6px 12px;}
}

@media (max-width:480px) {
	.sdChart				{max-width:360px;}
	.sdCenter				{width:40%; height:40%;}
	.sdLabel				{white-space:normal; line-height:1.3;}

	.sdIcon					{width:30px; height:30px;}
}


/***************************************************************************************************
*	Main Section
***************************************************************************************************/
.main_section					{width:100%; box-sizing:border-box; overflow:hidden; position:relative; z-index:1;}
.main_section:after				{display:block; content:""; clear:both;}

.main_section.srvMent			{padding:0px 0px; background-color:#FFFFFF;}
.main_section.noticeArea		{padding:80px 0; background-color:#EEE; /*background-color:var(--IDTcolor)*/ /*background:linear-gradient(160deg,#5264f0 10%, #044cad 28%, #0662e0 38%, #5bb0f1 50%, var(--IDTcolor) 100%);*/}

.main_section.noticeArea::after {animation: bgMove 6s linear infinite alternate;}
.main_section.noticeArea::after {content:""; position:absolute; top:0; left:0px; background: url(/web/img/main/noticeAreaBG.png) no-repeat; background-size:cover; max-width:1920px; width:100%; height:560px; z-index:-1;}

@keyframes bgMove{
	0%{transform:translateY(-50px);}
	100%{transform:translateY(50px);}
}

@media screen and (max-width:997px) {
	.main_section.noticeArea		{padding:20px 0; background:#FFF;}
	.main_section.noticeArea::after	{display:none;}
}


/***************************************************************************************************
*	Service Ment : 2022.11.10
***************************************************************************************************/
.srvMent_Area H2					{display:block; margin-bottom:20px; font-family:celmonHG; font-size:44px; line-height:110%; font-weight:800; letter-spacing: -1px; color:#222; text-align:center; /*text-transform:uppercase;*/}
.srvMent_Area H2:after				{display:block; content:""; clear:both;} 

.srvMent_Area > .cnt				{width:100%; padding:90px 0px 60px 0px; margin-top:20px; font-size:18px; line-height:26px; text-align:center; font-weight:700; color:#555; word-break:keep-all;}
.srvMent_Area > .cnt .bar			{width:50px; height:2px; background-color:var(--IDTcolor); display:inline-block; vertical-align:top;}


@media screen and (max-width:997px){
	.main_section H2				{font-size:26px;}
	.srvMent_Area > .cnt			{padding:30px; font-size:16px;}
}


/***************************************************************************************************
*	Notice Area : 2021.11.22
***************************************************************************************************/
.ntc_Area > .cnt					{width:100%; padding:0px; text-align:center; word-break:keep-all;}
.ntc_Area > .cnt > .cnt_title1		{font-family:GongGothic; font-size:24px; line-height:30px;  font-weight:200; color:#111;}
.ntc_Area > .cnt > .cnt_title2		{margin:20px auto; font-size:18px; line-height:25px;  font-weight:700; color:#444;}

.ntc_Area > .cnt > .btnStart		{position:relative; width:100%; height:80px; max-width:400px; margin:30px auto; background-color:var(--IDTcolor); border-radius:4px; border-width:1px; border-style:solid; border-color:rgba(255,255,255,0.3) var(--IDTcolor) var(--IDTcolor) rgba(255,255,255,0.3);}
.ntc_Area > .cnt > .btnStart a		{display:block; height:100%; overflow:hidden; color:#FFF;}
.ntc_Area > .cnt > .btnStart:hover	{background-color:var(--IDTcolor-darker); }

.ntc_Area > .cnt > .btnStart a .thmb					{opacity:1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.ntc_Area > .cnt > .btnStart a .tit						{position:absolute; width:100%; height:auto; text-align:center; font-family:GongGothic; font-size:26px; font-weight:400; color:#fff; overflow:hidden; left:calc(50% + 20px); top:50%; -ms-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); z-index:3; -webkit-transition:all .5s ease; transition:all .5s ease;}

.ntc_Area > .cnt > .btnStart a .thmb .circleBox			{position:absolute; width:60px; height:60px; background:#FFF; border-radius:50%; margin-bottom:14px; transition:.5s; left:5%; top:50%; -ms-transform:translate(-5%, -50%); -webkit-transform:translate(-5%, -50%); transform:translate(-5%, -50%);}
.ntc_Area > .cnt > .btnStart a .thmb .circleBox img		{position:relative; width:80%; left:40%; top:50%; -ms-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}


.ntc_Area > .cnt > .btnStart a:hover .thmb .img			{transform:scale(1.2); opacity:1;}
.ntc_Area > .cnt > .btnStart a:hover .thmb .circleBox	{left:5%; top:50%; -ms-transform:translate(-5%, -50%) scale(1.25); -webkit-transform:translate(-5%, -50%) scale(1.25); transform:translate(-5%, -50%) scale(1.25); transition:.5s;}

@media screen and (max-width:997px){
	.ntc_Area > .cnt > .cnt_title1		{font-size:16px; line-height:26px;}
	.ntc_Area > .cnt > .cnt_title2		{font-size:14px; }
}