@charset "utf-8";
/* font */
@import url('/css/default/font.css');
@font-face {
    font-family: 'ROKAFSansBold';
    src: url('/font/ROKAFSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,p,iframe,em { margin:0; padding:0;font-size:inherit; }
body { font-family:'맑은 고딕','Malgun Gothic','돋움',Dotum,Arial,Helvetica,sans-serif; font-size:14px; color:#333; line-height:1.4;-webkit-text-size-adjust:none;-webkit-appearance:none; }
.lang-cn {font-family:'돋움',Dotum,Arial,Helvetica,sans-serif; }
header, hgroup, footer, section, article, aside, nav, canvas, figure, figcaption { display:block; }
table { font-size:inherit; border-collapse:separate; *border-collapse:collapse; border-spacing:0; table-layout:fixed; }
th, td { word-wrap:break-word; word-break:break-all; }
fieldset, iframe { border:0; vertical-align:top; }
small { font-size:11px; }
img { border:0; line-height:0; font-size:0; vertical-align:top; }
address,cite,code,dfn,em,var,th { font-style:normal; font-weight:normal; }
li, dd { list-style:none; word-break:keep-all; word-break:break-word; }
q:before,q:after { content:''; }
hr { display:none; }
caption { overflow:hidden;width:100%;height:1px;font-size:0;line-height:0;text-indent:-9999px; letter-spacing:-100px; *text-indent:0; *color:transparent; *letter-spacing:-100px; *line-height:0; margin-top:-1px; }
legend { display:block; position:absolute; left:-9999px; text-indent:9999px; width:0; height:0; overflow:hidden; font-size:0; line-height:0; white-space:nowrap; color:#333; }
button { padding:0; border:0; cursor:pointer; background:none; vertical-align:middle; font-family:'맑은 고딕','Malgun Gothic','돋움',Dotum,Arial,Helvetica,sans-serif; font-size:14px; color:#333; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; }
a, a code { color:inherit; *color:#333; text-decoration:none; }
sup,sub { font-size:0.9em; color:#2460ce; }
select { font-family:'맑은 고딕','Malgun Gothic','돋움',Dotum,Arial,Helvetica,sans-serif; font-size:14px; line-height:27px; padding:3px 2px 3px 3px; vertical-align:middle; border:solid 1px #ddd; }
html.ie.v8 select { padding:2px 2px 2px 3px; }
html.safari select { line-height:22px; }
a:hover { color:#2460ce; text-decoration:underline; }
input { font-family:'맑은 고딕','Malgun Gothic','돋움',Dotum,Arial,Helvetica,sans-serif; font-size:14px; margin:0; padding:0; font-size:inherit; color:#333; vertical-align:middle; }
input[type="text"], input[type="password"] { width:284px; height:45px; padding:0 6px 0 16px; line-height:40px; border:1px solid #ddd; background:#f0f0f0; font-size:14px !important; border-radius: 10px;}
input[type="password"] { font-size:9px; line-height:26px; }
input[type="radio"] { width:16px; height:16px; vertical-align:middle; }
input[type="checkbox"] { width:16px; height:16px; vertical-align:middle; margin-top:-1px; border-radius: 2px;}
input[type="checkbox"]:focus {outline: none;}
input[type="text"][disabled="disabled"], input[type="password"][disabled="disabled"]{ background-color:#f4f4f4 !important; color:#666; }
select[disabled="disabled"],select.disabled,select[disabled] { background-color:#f4f4f4 !important; color:#666; }
input[readOnly="readOnly"],input.readOnly,input[readOnly] { /* - */ }
input.trance { border:0; background:transparent !important; padding:0; margin-top:-1px; margin-bottom:-1px; height:19px; line-height:19px; font-size:1em; vertical-align:middle; } /* 일반 텍스트처럼 보이나 개발에서 뿌려주는 값일 경우 */
.tranceTxt { display:inline-block; padding:0; margin-top:-1px; margin-bottom:-1px; height:19px; line-height:19px; font-size:1em; vertical-align:middle; }
input[type=text]::-ms-clear {display: none; }
div,input[type="text"] { /*outline:none;*/ }


/* ���ټ� */
.blind { display:block; position:absolute; left:-9999px; text-indent:9999px; width:0; height:0; border:0; overflow:hidden; font-size:1px; line-height:0; white-space:nowrap; color:#fff; }
html.ie.v8 .ir, html.ie.v8 .ico, html.ie.v7 .ir, html.ie.v7 .ico { *display:inline; zoom:0; line-height:0; text-indent:0; font-size:0; letter-spacing:-100px; }

span.placehold { position:relative; display:inline-block; } /* placehold js 구현을 위함. */
span.placehold label { position:absolute; line-height:45px; left:16px; top:0; padding:1px; color:#999; font-size:14px; font-weight: 300;}
span.placehold.txt label { font-size:inherit; }

html,body { height:100%; }
body { background:#dae1f0;}
#wrap { position:absolute; top:60%; left:50%; -webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%); width:678px; height:377px; }
/*#wrap:before {content: ''; display: inline-block; width: 671px; height: 560px; background: url(/images/default/login/character.png) 50% 50% no-repeat; z-index: 999; position: absolute; left: -90%; bottom: -50%; -webkit-animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;*/
/*	animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }*/
/* @media all and (min-width:3000px) {
	#wrap:before {left:-134%;}
}
@media all and (min-width:2200px) {
	#wrap:before {left:-102%;}
}
@media all and (max-width:1920px) {
	#wrap:before {left:-92%;}
} */
#header { width:100%; height: 90px; background-color: #f26b21; border-radius: 10px 10px 0 0; overflow: hidden; color: #fff;}
#header h1 {width: 206px; height: 64px; background: url('/images/default/login/logo.png') no-repeat 0 0; text-indent: -99999px; margin: 12px 0 0 33px;}
#header div {position: absolute; top: 23px; right: 38px;font-family: 'Gmarket Sans';}
#header div >span {display: inline-block; font-size: 18px;}
#header .tit {width: 168px; height: 50px; background: url('/images/default/login/tit_login.png') no-repeat 50% 50%; text-indent: -9999px; }
#header >* {float: left;}
#contbg { background:#6e675f; width:100%; height:377px; border-radius:10px; padding: 0; -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.17); -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.17); box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.17);}
#contbg * {font-family: 'Gmarket Sans';}
#contbg2 {text-align: center; margin-top: 60px;}
.cont {margin: 47px 0 0 151px; width: 400px;}
.cont h2 {width: 337px; height: 32px;background: url('/images/default/login/txt_login.png') no-repeat 0 0; text-indent: -99999px;}
div.login { position:relative; }
.idBox { margin-top:20px; }
.pwBox { margin-top:7px; }
.checkId { margin-top:20px; font-size:14px; color: #fff;}
.checkId label {font-weight: 300 !important; font-size: 14px;}
.loginBtn { position:absolute; top:0; right:0; }
.loginBtn button{ display:block; width:100px; height:97px; background:#f26b21; border-radius: 10px; color: #fff; font-size: 19px;font-weight: 500;}
.loginBtn button:hover { background-position:0 -88px }
.modifyBtn { margin-top:15px; }
.modifyBtn a{ display:block; width:155px; height:25px; font-size:12px; color:#888; text-decoration:none; text-align:center; line-height:22px; background:url('/images/default/login/modify_btn.gif') no-repeat; }
.modifyBtn a:hover { background-position:0 -25px }

.lodingZone {
	width:489px;
	height:289px;
	z-index:99;
	position:absolute;
	background: url(/images/default/login/bg_lodingZone.png) no-repeat left bottom;
    margin-left: 95px;
}
.lodingBox {
	text-align: center;
}
.lodingTit {
	margin:100px 0 20px 0;
	color:#eee;
	font-size:23px;
	font-family:'NanumGothicWeb';
}
.lodingBox span {
	color:#eee;
	font-size:16px;
	font-family:'NanumGothicWeb';
}
.play_login{
	  border-radius: 10em;
	  width: 343px;
	  height: 20px;
	  overflow: hidden;
	  margin: 0 auto 20px auto;
}

/* 배경추가 */
#box {position:relative; height:100vh;}
#box {padding:0 20px; z-index:5;}
#box .movie {position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; background:#000; z-index:-1;}
#box .movie .swiper {position:absolute; top:0; left:0; right:0; bottom:0;}
#box .movie .swiper-wrapper,
#box .movie .swiper-slide {height:100%;}
#box .movie .vis-bak {position:absolute; top:0; left:0; right:0; bottom:0; background:no-repeat 50% 50%; background-size:cover; -webkit-transition:7s all;-o-transition:7s all;transition:7s all; -webkit-transition:7s all; -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); -webkit-transform-origin: center; -ms-transform-origin: center;transform-origin: center;}
#box .movie .swiper-slide-active .vis-bak {-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center;}

#box .inner {position: relative; max-width: 76%; margin: 0 auto; height: 100vh;}
#box .vis-txt {position:absolute; left:0; top:32%; -webkit-transform:translateY(-35%); -ms-transform:translateY(-35%); transform:translateY(-35%); opacity:0; transition:1.4s all; -webkit-transition:1.4s all; transition-delay:1.4s; -webkit-transition-delay:1.4s; font-family: 'Gmarket Sans';}                                                      
#box .vis-txt p { color:#fff; font-size:70px; line-height:1.2; letter-spacing:-0.03em; -webkit-transition:.3s all;-o-transition:.3s all;transition:.3s all; word-break:keep-all;}
#box .vis-txt p span {display: block; margin-bottom: 15px; font-family: ROKAFSansBold;}
/* #box .vis-txt p span.txt-1 {animation: text-focus-in 10s forwards;}
#box .vis-txt p span.txt-2 {animation: text-focus-in 10s forwards; animation-delay: 1s; opacity: 0;}
#box .vis-txt p span.txt-3 {animation: text-focus-in 10s forwards; animation-delay: 2s; opacity: 0;} */
#box .vis-txt p span.txt-4 {animation: text-focus-in 5s forwards; color: #685846;}
#box .vis-txt p span.txt-5 {animation: text-focus-in 5s forwards; animation-delay: 1s; opacity: 0; color: #f26b21;}
#box .vis-txt p span.txt-6 {animation: text-focus-in 5s forwards; animation-delay: 2s; opacity: 0; color: #f26b21;}
#box .vis-txt .btn {display:inline-block; margin-top:60px; border:1px solid #fff; color:#fff; border-radius:9em; height:48px; line-height:48px; width:158px; text-align:center; font-size:18px; font-family:'SDGothicNeo'; -webkit-transition:.3s all;-o-transition:.3s all; transition:.3s all;}
#box .vis-txt .btn:after {content:""; display:inline-block; vertical-align:middle; width:18px; height:18px; margin-left:4px;}
#box .vis-txt .btn:hover {background:rgba(255,255,255,.3);}
.page-active #box .vis-txt {opacity:1; -webkit-transform:translateY(-75%); -ms-transform:translateY(-75%); transform:translateY(-75%);}

@-webkit-keyframes text-focus-in {
	0% {
	  -webkit-filter: blur(12px);
			  filter: blur(12px);
	  opacity: 0;
	}
	50% {
		-webkit-filter: blur(0px);
				filter: blur(0px);
		opacity: 1;
	  }
	100% {
	  -webkit-filter: blur(0px);
			  filter: blur(0px);
	  opacity: 1;
	}
  }
@keyframes text-focus-in {
	0% {
	  -webkit-filter: blur(12px);
			  filter: blur(12px);
	  opacity: 0;
	}
	50% {
		-webkit-filter: blur(0px);
				filter: blur(0px);
		opacity: 1;
	  }
	100% {
	  -webkit-filter: blur(0px);
			  filter: blur(0px);
	  opacity: 1;
	}
  }

  @-webkit-keyframes slide-right {
	0% {
	  -webkit-transform: translateX(0);
			  transform: translateX(0);
			  -webkit-filter: blur(12px);
			  filter: blur(12px);
	  		opacity: 0;
	}
	100% {
	  -webkit-transform: translateX(7%);
			  transform: translateX(7%);
			  -webkit-filter: blur(0px);
				filter: blur(0px);
				opacity: 1;
	}
  }
  @keyframes slide-right {
	0% {
	  -webkit-transform: translateX(0);
			  transform: translateX(0);
			  -webkit-filter: blur(12px);
			  filter: blur(12px);
	  		opacity: 0;
	}
	100% {
	  -webkit-transform: translateX(7%);
			  transform: translateX(7%);
			  -webkit-filter: blur(0px);
				filter: blur(0px);
		opacity: 1;
	}
  }

@media all and (min-width:3000px) {
	#box .inner {max-width: 90%; }
	#box .vis-txt {top: 38%;}
	#box .vis-txt p {font-size: 80px; }
}