@charset "utf-8";


/**************************
 * 로그인
**************************/
/* LaBelleAurore */
@font-face { 
	font-family: 'LaBelleAurore';
	font-style: normal;
	font-weight: normal;
	src: url(../../etc/font/LaBelleAurore/LaBelleAurore.eot);
	src: url(../../etc/font/LaBelleAurore/LaBelleAurore.eot?#iefix) format('embedded-opentype'),
	url(../../etc/font/LaBelleAurore/LaBelleAurore.woff2) format('woff2'),
	url(../../etc/font/LaBelleAurore/LaBelleAurore.woff) format('woff'),
	url(../../etc/font/LaBelleAurore/LaBelleAurore.otf) format('otf');
}
/* 나눔명조 */
@font-face { 
	font-family: 'nanummyeongjo';
	font-style: normal;
	font-weight: 400;
	src: url(../../etc/font/NanumMyeongjo/NanumMyeongjo-Regular.eot);
	src: url(../../etc/font/NanumMyeongjo/NanumMyeongjo-Regular.eot?#iefix) format('embedded-opentype'),
	url(../../etc/font/NanumMyeongjo/NanumMyeongjo-Regular.woff2) format('woff2'),
	url(../../etc/font/NanumMyeongjo/NanumMyeongjo-Regular.woff) format('woff'),
	url(../../etc/font/NanumMyeongjo/NanumMyeongjo-Regular.otf) format('otf');
}
@font-face { 
	font-family: 'nanummyeongjo';
	font-style: normal;
	font-weight: 700;
	src: url(../../etc/font/NanumMyeongjo/NanumMyeongjo-Bold.eot);
	src: url(../../etc/font/NanumMyeongjo/NanumMyeongjo-Bold.eot?#iefix) format('embedded-opentype'),
	url(../../etc/font/NanumMyeongjo/NanumMyeongjo-Bold.woff2) format('woff2'),
	url(../../etc/font/NanumMyeongjo/NanumMyeongjo-Bold.woff) format('woff'),
	url(../../etc/font/NanumMyeongjo/NanumMyeongjo-Bold.otf) format('otf');
}
/**********
 * common
***********/
.login{position:relative;height:100%;min-height:650px;padding-right:450px;background:#FFF;box-sizing:border-box;-moz-box-sizing:border-box;}
.login .cell{display:table-cell;vertical-align:top;}
.login .login_area{position:absolute;top:0;right:0;bottom:0;width:450px;background:#fff; transition:all 0.2s; -webkit-transition:all 0.2s; -ms-transition:all 0.2s; -moz-transition:all 0.2s; -o-transition:all 0.2s;}
.login .login_area .pd_top{display:block;height:12%;}
.login .login_area .pd_bottom{display:block;height:13%;}
.login .login_area .logo{width:200px; height:34px; font-size:0; background:url(img/csekp_logo.png)no-repeat center center; margin:0 auto; text-indent:-99999px;}
.login .login_area .logo img{display:inline-block;}
.login .login_area .form{display:block;padding:0 85px;}
.login .login_area .form legend{padding-bottom:16px;color:#0a0f32;font-size:32px;font-family:'roboto',sans-serif;font-weight:700;}
.login .login_area .form .input_area{position:relative;padding-top:23px;padding-bottom:5px;border-bottom:1px solid #eef1f2;}
.login .login_area .form .input_area label{display:block;color:#7c8a96;font-size:14px;font-family:'roboto',sans-serif;font-weight:700;}
.login .login_area .form .input_area input{position:relative;display:block;width:100%;height:38px;border:none;color:#111;font-size:14px;font-family:'roboto',sans-serif;font-weight:400;outline-style:none;box-sizing:border-box;-moz-box-sizing:border-box;}
.login .login_area .form .input_area input::-ms-clear{display:none;}
.login .login_area .form .input_area input::placeholder{color:#b4bbc7;}
.login .login_area .form .input_area input::-webkit-input-placeholder{color:#b4bbc7;}
.login .login_area .form .input_area input:-ms-input-placeholder{color:#b4bbc7;}
.login .login_area .form .input_area .fade-up{position:absolute;bottom:-1px;left:0;display:block;width:0px;height:1px;background:#2e45e6;transition:width .15s ease-out;}
.login .login_area .form .input_area input:focus + .fade-up{width:100%;}
.login .login_area .form .remember_loc{padding-top:24px;}
.login .login_area .form .findAccount{padding-left:90px; display: inline-block;}
.login .login_area .form .findAccount a{color: #7c8a96; font-size: 13px; font-family: 'roboto',sans-serif; font-weight: 400;}
.login .login_area .form .check{position:relative;float:left;}
.login .login_area .form .check_input{position:absolute;display:none;}
.login .login_area .form .check_label{position:relative;cursor:pointer;display:inline-block;padding-left:15px;}
.login .login_area .form .check_label:after{content:'';display:block;clear:both;}
.login .login_area .form .check_label .check_icon{position:absolute;top:0;left:0;display:block;width:15px;height:15px;}
.login .login_area .form .check_label .check_icon .circle{position:relative;display:block;width:100%;height:100%;}
.login .login_area .form .check_label .check_icon .circle::before{position:absolute;top:0;left:0;z-index:2;content:'';display:block;width:100%;height:100%;border-radius:50%;border:solid 1px rgba(0, 0, 0, 0.2);box-sizing:border-box;-moz-box-sizing:border-box;}
.login .login_area .form .check_label .check_icon .circle .color{position:absolute;top:0;left:0;display:block;width:100%;height:100%;}
.login .login_area .form .check_label .check_icon .circle .color::before{position:absolute;top:-1px;left:-1px;z-index:1;content:'';display:block;width:17px;height:17px;border-radius:50%;background:#FFF;
	transition:all .15s ease-out;-moz-transition:all .15s ease-out;-webkit-transition:all .15s ease-out;-ms-transition:all .15s ease-out;-o-transition:all .15s ease-out;}
.login .login_area .form .check_label .check_icon .circle .color::after{position:absolute;top:0;left:0;content:'';display:block;width:15px;height:15px;border-radius:50%;background:#2c39ec;}
.login .login_area .form .check_label .check_icon .chk{position:absolute;top:0;left:0;display:block;width:15px;height:15px;}
.login .login_area .form .check_label .check_icon .chk svg{display:block;width:100%;height:100%;fill:#FFF;transform:scale(0);-webkit-transform:scale(0);
	transition:all .4s ease-out;-moz-transition:all .4s ease-out;-webkit-transition:all .4s ease-out;-ms-transition:all .4s ease-out;-o-transition:all .4s ease-out;}
.login .login_area .form .check_label .text{padding-left:8px;color:#7c8a96;font-size:13px;font-family:'roboto',sans-serif;font-weight:400;}
.login .login_area .form .check_input:checked + .check_label .check_icon .circle .color::before{transform:scale(0);-webkit-transform:scale(0);}
.login .login_area .form .check_input:checked + .check_label .check_icon .circle::before{border:none;}
.login .login_area .form .check_input:checked + .check_label .check_icon .chk svg{transform:scale(1);-webkit-transform:scale(1);}
.login .login_area .form .btn_login{display:block;height:54px;margin-top:25px;border-radius:27px 0 27px 27px;background:#2c39ec;	
	transition:background .15s ease-out;-moz-transition:background .15s ease-out;-webkit-transition:background .15s ease-out;-ms-transition:background .15s ease-out;-o-transition:background .15s ease-out;}
.login .login_area .form .btn_login:hover{background:#4d59ff;}
.login .login_area .form .btn_login .text{display:block;padding-top:18px;color:#FFF;font-size:15px;font-family:'roboto',sans-serif;font-weight:400;text-align:center;}
.login .login_area .footer{position:absolute;bottom:55px;left:0;right:0;}
.login .login_area .footer .copyright{color:#b4bbc7;font-size:14px;font-family:'roboto',sans-serif;font-weight:400;text-align:center;}
.login .login_visual{position:relative;display:table;width:100%;height:100%;overflow:hidden;}
.login .login_visual .visual_img{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;}
.login .login_visual .visual_img .filter{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;background:rgba(0,0,0,0.3);}
.login .login_visual .visual_img .bg{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center center;background-size:cover;background-repeat:no-repeat;}
.login .login_visual .visual_contents{position:relative;z-index:10;display:table-cell;height:100%;}
.login .fade-up{
	display:block;
	animation-name:fade-up;-webkit-animation-name:fade-up;-moz-animation-name:fade-up;-o-animation-name:fade-up;
	/*animation-delay:4600ms;*/
	animation-duration:1200ms;-webkit-animation-duration:1200ms;-moz-animation-duration:1200ms;-o-animation-duration:1200ms;
	animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-moz-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-o-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
	animation-fill-mode:both;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;
}
.login .fade-in{
	animation-name:fade-in;-webkit-animation-name:fade-in;-moz-animation-name:fade-in;-o-animation-name:fade-in;
	animation-duration:1200ms;-webkit-animation-duration:1200ms;-moz-animation-duration:1200ms;-o-animation-duration:1200ms;
	animation-timing-function:ease-in;-webkit-animation-timing-function:ease-in;-moz-animation-timing-function:ease-in;-o-animation-timing-function:ease-in;
}
.login .scale-up-down{
	animation-name:scale-up-down;-webkit-animation-name:scale-up-down;-moz-animation-name:scale-up-down;-o-animation-name:scale-up-down;
	animation-duration:20s;-webkit-animation-duration:20s;-moz-animation-duration:20s;-o-animation-duration:20s;
	animation-timing-function:linear;-webkit-animation-timing-function:linear;-moz-animation-timing-function:linear;-o-animation-timing-function:linear;
	animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;
}
.login .login_area .form .remember_loc:after{content:''; display:block; clear:both;}
.login .login_area .form .pw_find{float:right;}
.login .login_area .form .pw_find .txt{font-family:'NotoSans',sans-serif;color:#111;}
.login .login_area .footer .help_wrap{padding:0 65px;margin-bottom:16px;}
.login .login_area .footer .help_wrap:after{content:''; display:block; clear:both;}
.login .login_area .footer .help_wrap p{float:left; width:33.3333%; cursor:pointer; font-family:'NotoSans',sans-serif; font-size:14px; color:#111; text-align:center;}
.login .login_area .footer .help_wrap p:first-child{margin-left:0px !important;}

@keyframes fade-up{
	 0% {
	 	transform:translate3d(0, 100%, 0);
        -webkit-transform:translate3d(0, 100%, 0);
        -moz-transform:translate3d(0, 100%, 0);
    }
    100% {
         transform:translate3d(0, 0%, 0);
        -webkit-transform:translate3d(0, 0%, 0);
        -moz-transform:translate3d(0, 0%, 0);
    }
}
@keyframes fade-in{
	 0% {
	 	opacity:0;
    }
    100% {
    	opacity:1;
    }
}
@keyframes scale-up-down{
	 0% {
	 	transform:scale(1.1);
    }
    50% {
        transform:scale(1);
    }
    100% {
        transform:scale(1.1);
    }
}


/*****************모바일화면*****************/
@media screen and (max-width:950px){
	.login .login_visual .visual_contents{display:none;}
	.login .login_visual .visual_img .filter{background:rgba(0,0,0,0.5);}
	.login{min-width:320px; min-height:650px; padding-right:0; }
	.login .login_area{width:100%; background:none; z-index:100;}
	.login .login_area .logo{width:179px; height:24px; background:url(img/csekp_logo_mobile.png)no-repeat center center; background-size:179px 24px; margin:0; margin-left:-82.5px; position:relative; left:50%;}
	.login .login_area .logo img{display:none;}
	.login .login_area .pd_bottom{height:2%;}
	.login .login_area .form{padding:0 50px;}
	.login .login_area .form legend{display:none !important; color:#fff;}
	.login .login_area .form .input_area{padding-top:44px; border-bottom:1px solid rgba(255,255,255,0.7);}
	.login .login_area .form .input_area label{ color:#fff;}
	.login .login_area .form .input_area input{background:none; color:#fff;}
	.login .login_area .form .input_area input::placeholder{color:#fafafa; opacity:0.5;}
	.login .login_area .form .input_area input::-webkit-input-placeholder{color:#fafafa; opacity:0.5;}
	.login .login_area .form .input_area input:-ms-input-placeholder{color:#fafafa; opacity:0.5;}
	.login .login_area .form .input_area .fade-up{background:#fff;}
	.login .login_area .form .remember_loc{padding-top:32px;}
	.login .login_area .form .btn_login{margin-top:45px; overflow:hidden; width:100%; background:#fff;}
	.login .login_area .form .btn_login:hover{background:rgba(255,255,255,0.8);}
	.login .login_area .form .btn_login .text{color:#2c39ec}
	.login .login_area .form .check_label .text{color:#fff;}
	.login .login_area .footer{bottom:35px;}
	.login .login_area .footer .copyright{color:#fff; opacity:0.7;}
	.login .login_area .form .pw_find .txt{color:rgba(255,255,255,0.8);}
	.login .login_area .footer .help_wrap{padding:0;}
	.login .login_area .footer .help_wrap a{color:#D9D9D9; white-space:nowrap;}
	.login .login_area .footer .help_wrap p{color:#D9D9D9; white-space:nowrap;}
	
}

/**********
 * 타입1(아포리즘)
***********/
.login.type1{}
.login.type1 .content_table_area{height:100%;padding:90px 50px 90px 90px;box-sizing:border-box;-moz-box-sizing:border-box;}
.login.type1 .content_table{display:table;table-layout:fixed;width:100%;height:100%;}
.login.type1 .content_table .row{display:table-row;}
.login.type1 .visual_header{height:150px;}
.login.type1 .visual_header .text{text-shadow:10px 10px 10px rgba(0,0,0,0.06);color:#FFF;font-size:30px;font-family:'NotoSans',sans-serif;font-weight:300;line-height:40px;}
.login.type1 .visual_header img{display:block;padding:48px 0 0 4px;}
.login.type1 .visual_text{vertical-align:bottom;}
.login.type1 .visual_text .type{}
.login.type1 .visual_text .text_tbl{display:table;}
.login.type1 .visual_text .text_tbl .text_cell{}
.login.type1 .visual_text .text_tbl .by_cell{vertical-align:bottom;}
.login.type1 .visual_text .text_tbl .text{text-shadow:10px 10px 10px rgba(0,0,0,0.06);color:#FFF;font-family:'NotoSans',sans-serif;font-size:3vw;font-weight:400;letter-spacing:-0.05em;white-space:nowrap;transition:all .1s linear;overflow:hidden;}
.login.type1 .visual_text .text_tbl .line{display:block;height:2px;margin-top:55px;margin-bottom:25px;background:#FFF;}
.login.type1 .visual_text .text_tbl .by{text-shadow:10px 10px 10px rgba(0,0,0,0.06);display:inline-block;padding-left:40px;margin-bottom:10px;color:#FFF;font-size:1.5vw;font-family:'LaBelleAurore','NotoSans',sans-serif;line-height:120%;}
.login.type1 .visual_footer{height:55px;vertical-align:bottom;}
.login.type1 .visual_footer .inner{}
.login.type1 .visual_footer .text{text-shadow:10px 10px 10px rgba(0,0,0,0.06);color:#FFF;font-size:15px;font-family:'NotoSans',sans-serif;font-weight:300;}
@media screen and (max-width: 1000px){
	.login.type1 .visual_text .text_tbl .text{font-size:3.5vw;}
	.login.type1 .visual_text .text_tbl .by{font-size:2vw;}
}
/**********
 * 타입2(명화)
***********/
.login.type2{}
.login.type2 .mp_info{padding:80px 80px 0 80px;color:#FFF;}
.login.type2 .mp_info p{overflow:hidden;}
.login.type2 .mp_info .title{margin-bottom:1px;font-size:30px;font-family:'NotoSans',sans-serif;font-weight:300;}
.login.type2 .mp_info .title .year{padding-left:12px;}
.login.type2 .mp_info .info{margin-bottom:13px;font-size:15px;font-family:'NotoSans',sans-serif;font-weight:300;}
.login.type2 .mp_info .info .fade-up{animation-delay:500ms;}
.login.type2 .mp_info .by{color:#FFF;font-size:30px;font-family:'LaBelleAurore','NotoSans',sans-serif;}
.login.type2 .mp_info .by .fade-up{animation-delay:300ms;}
.login.type2 .message{position:absolute;bottom:62px;right:80px;text-align:right;}
.login.type2 .message .text{color:#FFF;font-size:30px;font-family:'nanummyeongjo',sans-serif;line-height:70px;letter-spacing:-2.4px;opacity:0.6;overflow:hidden;}