body{
	margin:0;
	color:#e2e2e2;
	background:#c8c8c8;
	 -webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
	font:600 16px/18px 'Open Sans',sans-serif;
}

body::after { 
  position:absolute; 
  width:0; 
  height:0; 
  overflow:hidden; 
  z-index:-1; 
  content:
url(/resources/images/bg_01.jpg)              
url(/resources/images/bg_02.jpg)           
url(/resources/images/bg_03.jpg) 
url(/resources/images/bg_04.jpg) 
url(/resources/images/bg_05.jpg)
url(/resources/images/bg_06.jpg)
url(/resources/images/bg_07.jpg)
url(/resources/images/bg_08.jpg)
url(/resources/images/bg_09.jpg)
url(/resources/images/bg_10.jpg)
url(/resources/images/bg_11.jpg)
url(/resources/images/bg_12.jpg)
url(/resources/images/bg_13.jpg)
url(/resources/images/bg_14.jpg)
}



#animated-bg {
	/* background:url(/resources/images/bg_14.png) center center / cover no-repeat; */
	transition: background 2s;
	min-height:100vh;
/* 	position:relative; */
}

*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}
.top-menu{
	height:30px;
	padding:0 20px;	
	line-height: 30px;
	background:#0A174E;
	border-bottom: 1px solid black;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-wrap{
	width:100%;
	margin:auto;
	max-width:450px;
	min-height:540px;
	border-radius:20px;
	position:relative;	
	/* background:url(https://ecc.kerolplay.com/resources/main_banner/img/img_visual03.png) no-repeat center; */ 	
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
	left      : 80%;
	top       : 48%;
	position  : absolute;
	transform : translate(-50%, -50%);
}
.login-html{
	width:100%;
	min-height:100%;
	border-radius:20px;
	position:absolute;
	padding:15px 70px 20px 70px;
	background: #0A174E;
    opacity: 0.85;
}
#fsk-logo-wrapper{
	background:rgb(255 255 255 / 70%);;
}
#fsk-logo{
	width:100px;
}
#logo{	
	width:220px;
	margin:0 auto;	
	display: block;

}
.contents{
	min-height: calc(100vh - 60px);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	transform:rotateY(180deg);
	backface-visibility:hidden;
	transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
	display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
	text-transform:uppercase;
}
.login-html .tab{
	font-size:20px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
	color:#fff;
	border-color:#1161ee;
}
.login-form{
	min-height:345px;
	position:relative;
	perspective:1000px;
	transform-style:preserve-3d;
}
.login-form .group{
	margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
	width:100%;
	color:#fff;
	display:block;
}
.login-form .group .input,
.login-form .group .button{
	border:none;
	padding:15px 20px;
	border-radius:5px;
	background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
	text-security:circle;
	-webkit-text-security:circle;
}
.login-form .group .label{
	color:#eee;
	font-size:12px;
	letter-spacing: 0.7px;
}
.login-form .group .button{
	background:#1161ee;
}
.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(211, 185, 185, 0.418);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
	color:#fff;
}
.login-form .group .check:checked + label .icon{
	background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
	transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
	transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
	transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
	transform:rotate(0);
}

.hr{
	height:2px;
	margin:30px 0 30px 0;
	background:rgba(255,255,255,.2);
}
.foot-lnk{
	text-align:center;
}
.footer-menu{
	background:#0A174E;
	margin:30px 0;
	padding:0 20px;
	line-height: 30px;
	height:30px;
	position:absolute;
	width: 100%;
}
.footer-menu .domain{
	float:right;
	font-size: 15px;
}
.footer-menu .policy{
	width:auto;
	text-align: center;
	margin:0 auto;
	font-size: 10px;
} 

#bgVideo {
  position: fixed;
  right: 0;
  min-width: 100%;
  min-height:100%;
  -webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
  filter: grayscale(80%);
}

/* 2021.08	源��쁽�닔 �옉�뾽 */
.body-wrapper {
	width: 100%;
/* 	height: 1280px; */
	position: absolute;
}
.main-contents-area {
/* 	width: 1600px; */
	margin: 0 auto;
/* 	background: #ffb6c1; */
	width: 1280px;
}
.fsk-ci-wrapper {
	width: 100%;
/* 	height: 188px; */
/* 	background: #4b0082; */
/* 	margin-top: 35px; */
	margin-top: 28px;
	height: 215px;
}
.fsk-ci-area {
	position:absolute;
/* 	width: 260px; */
/* 	height: 50px; */
	background: url('../images/common/img_fsk_ci.png') no-repeat 0 0px / contain;
	height: 40px;
	width: 208px;
	display: none;
}


.innovation-ci-area {
	position:absolute;
	background: url('../images/common/img_skon_ci2.png') no-repeat 0 0px / contain;
	height: 60px;
	width: 208px;
	display: none;
}

.nx-ci-area {
	position:absolute;
	background: url('../images/common/img_sknx_ci.png') no-repeat 0 0px / contain;
	height: 60px;
	width: 208px;
	display: none;
}


.login-kerol-area {
	position: relative;
	width: 100%;
/* 	height: 213px; */
/* 	border-radius: 50px; */
/* 	background: rgba(255, 255, 255, 0.6); */
	height: 170px;
	border-radius: 40px;
}
.kerol-logo-area {
	position:absolute;
/* 	width: 236px; */
/* 	height: 78px; */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url('../images/common/img_kerol_logo.png') no-repeat 0 0px / contain;
	width: 189px;
	height: 62px;
	display: none;
}

.sk_logo_area {
	position:absolute;
/* 	width: 236px; */
/* 	height: 78px; */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
    font-size: 65px;
    white-space: nowrap;
/*     font-family: arial; */
}

.sknx_logo_area {
	position:absolute;
/* 	width: 236px; */
/* 	height: 78px; */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
    font-size: 65px;
    white-space: nowrap;
/*     font-family: arial; */
}
.sknx_logo_area:before {
	content: 'SK nexilis Logistics Portal';
	color: #FFFFFF;
}
.sk_logo_area:before {
	content: 'Battery Logistics Portal';
	color: #FFFFFF;
}
.login-contents-wrapper {
	width: 100%;
	height: 600px;
/* 	background: #e0ffff; */
}
.login-contents-area {
/* 	width: 450px; */
	height: 600px;
/* 	padding:287px 711px 394px 710px; */
/* 	position:absolute; */
/* 	margin-top: 237px; */
/* 	margin-right: 711px; */
/* 	margin-bottom: 394px; */
/* 	margin-left: 710px; */
	margin: 0 auto;
/* 	background: #4b0082; */
	width: 360px;
}
.login-input-area {
	width: 100%;
	height: 60px;
	border-radius: 35px;
	font-size: 19px;
	padding: 0px 45px;
	background: #FFFFFF;
	border: 0px solid black;
/*	height: 48px; */
}
.login-input-area:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(82, 14, 16, 0.6);
}
.login-button-area {
	width: 100%;
/* 	height: 60px; */
	border-radius: 35px;
	font-size: 24px;
	color: #FFFFFF;
	font-weight: bold;
/* 	padding: 25px 45px; */
	background: #d1232a;
	border: 0px solid black;
	box-shadow: 0 5px 0 0px rgb(0 0 0 / 16%);
	height: 48px;
}
.login-margin-top-45 {
/* 	margin-top: 45px; */
/* 	�쟾泥댁쟻�쑝濡� 10%瑜� 以꾩씠湲곗쐞�븳 �옉�뾽 */
	margin-top: 36px;
}
.login-margin-top-40 {
/* 	margin-top: 40px; */
	margin-top: 32px;
}
.login-margin-top-20 {
/* 	margin-top: 20px; */
	margin-top: 16px;
}
.login-button-color {
	background: #FF0000;
/*     opacity: 0.85; */
}
input[type="checkbox"] + label {
	cursor: pointer;
	margin-left: 10px;
	display: block;
	width: 60px;
	height: 35px;
	background: url('../images/common/img_sildeCheck_unCheck.png') no-repeat 0 0px / contain;
}
input[type="checkbox"]:checked + label {
	margin-left: 10px;
	background: url('../images/common/img_sildeCheck_check.png') no-repeat 0 0px / contain;
}
input[type="checkbox"]{
	display: none;
}
/* �씠誘몄�瑜� �궗�슜�븯吏� �븡怨� 吏곸젒 �옉�뾽�븳 遺�遺� */
/* �뒳�씪�씠踰� �쇅遺�瑜� 媛먯떥�뒗 �씪踰⑥뿉 ���븳 �뒪���씪 */
.slideCheckBox {
	position: relative;
	display: inline-block;
/* 	width: 58px; */
/* 	height: 35px; */
/* 	margin-left: 10px; */
	width: 46px;
	height: 28px;
	margin-left: 8px;
}
/* HTML 湲곕낯 泥댄겕諛뺤뒪 �닲湲곌린 */
.slideCheckBox input {
	opacity: 0;
	width: 0;
	height: 0;
}
/* �뒳�씪�씠�뜑 - �떎�젣濡� �넗湲��맆 遺�遺� */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
/* 	height: 25px; */
	background-color: #959595;
	-webkit-transition: .4s;
	transition: .4s;
	height: 20px;
}
.slider:before {
	position: absolute;
	content: "";
/* 	height: 28px; */
/* 	width: 28px; */
	left: -1px;
	background-color: #c5c5c5;
	-webkit-transition: .4s;
	transition: .4s;
	-webkit-transform: translateY(-1px);
	-ms-transform: translateY(-1px);
	transform: translateY(-1px);
	height: 22px;
	width: 22px;
}
input:checked + .slider {
	background-color: #ffffff;
}
input:checked + .slider:before {
	background-color: #d1232a;
}

input:focus + .slider {
	box-shadow: 0 0 1px #ffffff;
}
input:checked + .slider:before {
	-webkit-transform: translateX(33px) translateY(-1px);
	-ms-transform: translateX(33px) translateY(-1px);
	transform: translateX(33px) translateY(-1px);
}
/* �뒳�씪�씠�뜑瑜� �룞洹몃옑寃� 蹂댁뿬二쇨린 �쐞�븳 遺�遺� */
.slider.round {
	border-radius: 34px;
}
.slider.round:before {
	border-radius: 50%;
}
#idSavePasswdArea{margin:auto}
#rememberUserArea{float: left;width:50%}
#passwdReqeustArea{
       float: right;
    width: 36%;
        margin-top: -18px;
    margin-left: 12px;

}
/* �룷�넗�꺏 �뙆�씪�뿉 �젙�쓽 �맂 ��濡� �븯硫� 濡쒓렇�씤 硫붾돱瑜� 媛�由ш쾶 �맖 */
.login-footer {
/* 	height: 125px; */
	height: 75px;
	position: fixed;
	bottom: 0px;
    left: 0px;
    right: 0px;
}
#copyright{text-align: center}
@media screen and (max-width: 767px) {
	
	

	.login-contents-wrapper {
	    width: 100%;
	    min-height:300px;
	    /* background: #e0ffff; */
	}
	.fsk-ci-area{
		left:20px;
	}
	.fsk-ci-wrapper{
	    height: 100px;
	    width: 360px;
	    margin: auto;
	    margin-top: 28px;
	    padding: 0 20px;
	}
	.sk_logo_area {
	    position: absolute;
	    width: 362px;
	    /* height: 78px; */
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    display: none;
	    font-size: 65px;
	    white-space: break-spaces;
	    /* font-family: arial; */
	    font-size: 51px;
	    line-height: 53px;
	    text-align: center;
	}
	.sknx_logo_area{
	    position: absolute;
	    width: 362px;
	    /* height: 78px; */
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    display: none;
	    font-size: 65px;
	    white-space: break-spaces;
	    /* font-family: arial; */
	    font-size: 51px;
	    line-height: 53px;
	    text-align: center;
	}
	
	.main-contents-area{
		width:100%
	}
	.login-contents-area {
	    /* width: 450px; */
	    min-height: 300px;
	    /* padding: 287px 711px 394px 710px; */
	    /* position: absolute; */
	    /* margin-top: 237px; */
	    /* margin-right: 711px; */
	    /* margin-bottom: 394px; */
	    /* margin-left: 710px; */
	    margin: 0 auto;
	    /* background: #4b0082; */
	    /* width: 360px; */
	    padding: 0 20px;
	}
	.login-footer {
	    /* height: 125px; */
	    
	    height: 30px;
	    position: static;
	    bottom: 0px;
	    left: 0px;
	    right: 0px;
	}
	.slideCheckBox {
		position: relative;
		display: inline-block;
		width: 46px;
		height: 28px;
		margin-top: 9px;
   		margin-left: 37px;

	}
	#idSavePasswdArea{margin:auto}
	#rememberUserArea{float: left;width:50%;;clear:right;margin-top:10px;}
	#passwdReqeustArea{
	    /* float: left; */
	    /* width: 50%; */    
	    margin-top: 10px;
	    /* margin-left: 12px; */
	    text-align: center;
	    width: 100%;
	}	
}