#LoginPage							{width:100%; height:100%; min-height:100%;}

/* Backgrund Video Play (Video Type) */
.bg_videoWRAP						{overflow:hidden; position:relative; height:100vh;}
.bg_video							{position:relative; left:0; right:0; top:0; bottom:0; width:100%; height:100%; z-index:0;}
.bg_video video						{min-width:100%; min-height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%);}

/* If Backgrund Animation (Image Slide Type) */
.cb-slideshow,
.cb-slideshow:after					{content:''; position:fixed; width:100%; height:100%; top:0px; left:0px; padding:0; margin:0; z-index:0;}
.cb-slideshow li span				{width:100%; height:100%; position:absolute; top:0px; left:0px; color:transparent; background-size:cover; background-position:50% 50%; background-repeat:none; opacity:0; z-index:0;
									animation: imageAnimation 18s linear infinite 0s; -webkit-animation: imageAnimation 18s infinite 0s; -moz-animation: imageAnimation 18s infinite 0s; -o-animation: imageAnimation 18s infinite 0s;}
.cb-slideshow li:nth-child(2) div	{animation-delay:6s;}
.cb-slideshow li:nth-child(3) div	{animation-delay:12s;}
.cb-slideshow li:nth-child(4) div	{animation-delay:18s;}
.cb-slideshow li:nth-child(5) div	{animation-delay:24s;}
@keyframes imageAnimation			{0% {opacity:0; animation-timing-function: ease-in;} 16% {opacity:1; animation-timing-function: ease-out;} 34% {opacity:1;} 100% {opacity:0;}}


#Login								{position:absolute; left:50%; top:0px; transform:translateX(-50%); width:90%; min-width:350px; max-width:500px; min-height:100%; padding:40px 60px; text-align:center; background-color:#FFF; box-shadow:0 10px 20px rgb(0 0 0 / 39%), 0 6px 6px rgb(0 0 0 / 43%);}
#Login H1							{display:flex; flex-direction:column; align-items:center; position:relative; width:100%; padding:1.2rem 0 1rem 0;}
#Login H1 .sub_txt					{display:block; margin-top:1.0rem; font-family:var(--FFH); font-weight:var(--FW700); font-size:var(--FS14); color:#666; letter-spacing:-0.2px}
#Login H1 .sub_txt em				{color:#000;}
#Login H1 .kor_txt					{display:block; font-weight:var(--FW900); font-size:var(--FS20); color:var(--black); letter-spacing:var(--LS12);}

/* GCMS Logo*/
i.gcms_logo							{display:block; width:45px; height:45px; cursor:pointer; color:#000}
i.gcms_logo svg						{vertical-align:initial !important;}


.greetingGuide						{font-family:var(--FFH); font-weight:700; display:block; font-size:var(--FS14); margin:0px auto 20px; color:var(--IDTcolor)}

.login_area .input-group .form-control			{border-right:0;}
.login_area .input-group .form-control:focus	{box-shadow:none; border-width:2px; -webkit-transition:border-color ease-in-out .45s; -o-transition:border-color ease-in-out .45s; transition:border-color ease-in-out .45s;}
.login_area .input-group .form-control:focus ~ .input-group-append .input-group-text,
.login_area .input-group .form-control:focus ~ .input-group-prepend .input-group-text		{border-color:var(--IDTcolor); border-width:2px; -webkit-transition:border-color ease-in-out .45s; -o-transition:border-color ease-in-out .45s; transition:border-color ease-in-out .45s;}
.login_area .input-group .form-control.is-valid:focus										{box-shadow:none;}
.login_area .input-group .form-control.is-valid ~ .input-group-append .input-group-text,
.login_area .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text	{border-color:#28a745}
.login_area .input-group .form-control.is-invalid:focus										{box-shadow:none}
.login_area .input-group .form-control.is-invalid ~ .input-group-append .input-group-text	{border-color:#dc3545}
.login_area .input-group .input-group-text		{min-width:40px; background-color:transparent; border-bottom-right-radius:0.25rem; border-left:0; border-top-right-radius:0.25rem; color:#777; }

.login_area input							{height:50px; font-weight:700; font-size:16px; border:1px solid #ced4da; background-color:#FFF;}
.login_area input::-webkit-input-placeholder{color:#AAA; font-size:var(--FS12); letter-spacing:-0.5px !important; font-weight:400; position:relative; top:-5px;}
.login_area input::-moz-placeholder			{color:#AAA; font-size:var(--FS12); letter-spacing:-0.5px !important; font-weight:400;}
.login_area input:-moz-placeholder			{color:#AAA; font-size:var(--FS12); letter-spacing:-0.5px !important; font-weight:400;}
.login_area input:-ms-input-placeholder		{color:#AAA; font-size:var(--FS12); letter-spacing:-0.5px !important; font-weight:400; padding-top:5px;}
.login_area input::placeholder				{color:#AAA; font-size:var(--FS12); letter-spacing:-0.5px !important; font-weight:400; position:relative; top:-1px;}
.login_area input:-o-placeholder			{color:#AAA; font-size:var(--FS12); letter-spacing:-0.5px !important; font-weight:400;}

.login_area input:focus						{border-width:2px; border-color:var(--IDTcolor) var(--IDTcolor) var(--IDTcolor) var(--IDTcolor); border-style:solid; background-color:#FFF;}

.login_area input[type="checkbox"]			{border:0 !important}

.login_area a.loginBtn						{display:block; cursor:hand; margin:0 auto; width:100%; font-size:var(--FS-medium); line-height:40px; color:#FFF; font-weight:500; letter-spacing:0px; text-align:center; background-color:#303242;
											border-radius:3px; -webkit-box-sizing:border-box; box-sizing:border-box; border-width:1px; border-style:solid; border-color:#303242;}
.login_area a.loginBtn:hover				{text-decoration:none; opacity:0.75; filter:alpha(opacity=75); -moz-opacity:0.75; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; transition:opacity.3s;}

.login_area .input-group .input-group-text	{background-color:#FFF;}
.login_description						{text-align:center; margin:20px 0; width:100%; padding:15px 0; border-top:1px solid rgba(136, 136, 136, 0.3); border-bottom:1px solid rgba(136, 136, 136, 0.3); font-size:var(--FS12); letter-spacing:var(--LS05); font-weight:var(--FW600); line-height:1.5; color:#757575;}
.login_description em					{color:black}
.login_description a					{font-weight:var(--FW700);}
.agree_description						{width:100%; padding:15px 0;}


.joinArea a								{font-size:var(--FS16); letter-spacing:var(--LS12); font-weight:var(--FW700F);}

#loginFooter							{display:block; font-size:var(--FS-mm-small); color:#666;}
#loginFooter .copyright					{font-family:var(--FFH); color:var(--mygray); font-weight:var(--FW700F); font-size:var(--FS11); text-align:center; text-transform:uppercase; background-color:transparent; letter-spacing:var(--LS00); padding:0px; border:none;}
#loginFooter .copyright a				{color:#000; font-weight:700;}

@media screen and (max-width:500px) {
	#Login								{width:100%; padding:10px 40px; background-color:transparent !important; box-shadow:none;}
	#Login H1							{padding:2rem 0 2rem 0;}
	#Login H1 a							{font-size:34px; letter-spacing:-2.2px;}
	#Login H1 a img						{filter:invert(100%) sepia(0%) saturate(7445%) hue-rotate(327deg) brightness(116%) contrast(100%);}
	#Login.darkBG H1 .sub_txt			{color:rgba(255, 255, 255, 0.6);}
	#Login.darkBG H1 .kor_txt			{color:#FFF;}

	#Login i.gcms_logo					{width:35px; height:35px;}
	#Login.darkBG i.gcms_logo			{color:#FFF}

	#Login.darkBG .login_area input[type="checkbox"] + label {color:#FFF;}
	#Login.darkBG .login_area input[type="checkbox"]:checked + label {color:#FFF;}
	

	.login_area .btnAREA a				{font-size:14px; font-weight:500;}

	#Login.darkBG .login_description	{color:rgba(255, 255, 255, 0.8);}
	#Login.darkBG .login_description em	{color:white}
	#Login.darkBG .login_description a	{color:white}

	#Login.darkBG .joinArea a			{color:#FFF}
	#Login.darkBG .joinArea a:hover		{color:var(--IDTcolor);}

	#Login.darkBG #loginFooter .copyright				{color:rgba(255,255,255,0.9);}

}

/* 추가 페이지 이동 : 2024.04.16*/
.btn_movingPage				{color:var(--mygray); font-size:var(--FS14); font-weight:600; border-radius:4px; background-color:transparent; border:1px solid rgba(121, 121, 121, 0.5); border-radius:4px;}
.btn_movingPage:hover		{color:#000; border:1px solid rgba(121, 121, 121, 0.9); }

@media screen and (max-width:500px) {
	.btn_movingPage			{color:#FFF; border:1px solid rgba(255, 255, 255, 0.5);}
	.btn_movingPage:hover	{color:#FFF; border:1px solid rgba(255, 255, 255, 1);}
}


/*******************************************************************************************************************************************
*	약관 (페이지내 모든 약관 컨트롤)
*******************************************************************************************************************************************/
.policy_WRAP					{display:inline-block; margin:0px 0; font-size:var(--FS11); line-height:17px; background:#FFF; color:#777; padding:15px;}
.policy_WRAP.no_padding			{padding:5px;}
.policy_WRAP H8					{display:block; text-align:left; font-size:14px; line-height:40px; letter-spacing:-1px; color:#222; font-weight:600}
.policy_WRAP H9					{display:block; font-size:13px; margin-top:14px; line-height:25px; letter-spacing:0px; color:#333; border:0px;}
.policy_WRAP p					{margin-bottom:14px; font-size:var(--FS12); line-height:17px; text-align:left}

.policy_WRAP ol					{list-style-position:outside; padding-left:10px; color:#808080; text-align:justify; margin-bottom:10px;}
.policy_WRAP ol li				{margin-left:10px; list-style-type:Decimal; font-size:var(--FS12); line-height:1.5; letter-spacing:-1px;}
.policy_WRAP ol.depth2			{list-style-position:inside; padding:3px 0; color:#808080; text-align:justify; margin-left:6px}
.policy_WRAP ol.depth2 li		{list-style-type:square;}

table.policyTBL					{width:100%; margin:10px 0; color:#808080; border-top:1px solid #BBB; border-collapse:collapse; padding:0px; border-spacing:0px;}
table.policyTBL thead th		{text-align:center; padding:5px 0; font-size:var(--FS11); line-height:16px; border-right:1px solid #FFF; letter-spacing:-0.1em; color:#FFF; background:#a4a4a4;}
table.policyTBL tbody th		{padding:5px 10px; text-align:center; border-right:1px solid #cdcdcd; background:#FFF;}
table.policyTBL tbody td		{padding:7px 10px 5px 10px; border-bottom:1px solid #cdcdcd; border-left:1px solid #cdcdcd; color:#808080;}
table.policyTBL tbody td.first	{border-left:0px; text-align:center; font-size:var(--FS11); line-height:20px; font-weight:600;}

@media screen and (max-width:500px) {
.policy_WRAP H8					{font-size:var(--FS12); line-height:20px; letter-spacing:-0.01em; margin-bottom:5px;}
}