@charset "utf-8";
/* copyright(c) WEBsiting.co.kr */
@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);
/* 초기화 */
html {width:100%;height:100%;overflow-y:scroll}
body {width:100%;min-width:300px;height:100%;margin:0;padding:0;font-size:0.75em;font-family:'Noto Sans Korean','Malgun Gothic', dotum, sans-serif;background:#222;
	min-width:280px; position:relative;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Noto Sans Korean','Malgun Gothic', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
button {cursor:pointer; -webkit-appearance: none; -webkit-border-radius: 0;}
a{text-decoration:none;}
header{width:100%;min-width:300px; height:60px;background:#5454f1;overflow:hidden;position:fixed; left:0px;top:0px; right:0px; text-align:center; z-index:3;}
header h1{float:left; color:RGBA(255,255,255,0.2);padding:0px;height:60px; line-height:60px;font-size:16px;position:fixed; left:0px;top:0px; max-width:400px;}
header h1 i{display:inline-block; padding:0;vertical-align:middle;}
header h1 i img{display:block;height:60px;width:auto;}
header h1 a,
header h1 b{display:inline-block; color:#fff; padding:0 20px;}
header nav{height:60px;line-height:60px; text-align:center;}
header nav a{cursor:pointer;display:inline-block;font-size:20px;padding:0; margin:0 0 0 -5px;width:90px; height:60px; line-height:60px; 
	border:1px solid RGBA(255,255,255,0.2); border-top:0px;border-bottom:0px;background:RGBA(0,0,0,0.3); color:#fff;}
header nav a.on{background:#fff;color:#000;}
header nav a b{font-size:12px; display:inline-block; }
header p{min-width:200px;padding:0px; margin:0px; color:#fff;height:60px; font-size:16px;position:fixed; right:15px;top:15px; text-align:right;}
header p a{display:inline-block;border-radius:5px; font-size:12px;padding:0 10px; height:30px; line-height:30px; color:#fff;background:RGBA(0,0,0,0.5)}

header p a.btnBuy{background:RGBA(0,0,0,0.7);color:#fff;}
section{position:absolute; left:0px;top:60px; right:0px; bottom:0px;z-index:2;}
section #viewArea{border:0px;width:100%; height:100%;margin:0px; padding:0px;position:absolute; left:0px;top:0px; right:0px;bottom:0px;
	-webkit-box-shadow:  0 0 10px RGBA(0,0,0,0.5);-moz-box-shadow:  0 0 10px  RGBA(0,0,0,0.5);box-shadow: 0 0 10px  RGBA(0,0,0,0.5);
	opacity: 0;
	background:#fff;
}
footer{display:none;}


#viewArea{-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: ease;transition-duration: 0.2s;transition-timing-function: ease;}
#viewArea.activePcVer{width:100%; height:100%; top:0; right:0;left:0;bottom:0;}
#viewArea.activeTabVer{width:780px; margin-left:-390px; right:auto;left:50%; height:90%; top:5%;  border-radius:20px;}
#viewArea.activeMobVer{width:380px; margin-left:-190px; right:auto;left:50%; height:90%; top:5%; border-radius:20px;}

@media all and (max-width: 980px)
{	
	header h1{font-size:11px;left:10px;}
	header h1 i,
	header nav{display:none;}
	header p{right:10px;}
	header p a{padding:0 5px; font-size:11px;}

	#viewArea,
	#viewArea.activePcVer,
	#viewArea.activeTabVer,
	#viewArea.activeMobVer{width:100%; margin-left:0px; right:0px;left:0px;}
	
	#viewArea.activeTabVer,
	#viewArea.activeMobVer{border-radius:0px;top:0px; height:100%;}
}
.loadingWr{position:relative; width:100%; height:100%; z-index:1;}
.loadingWr > p{position:absolute; left:50%; top:50%; margin-top:-45px; margin-left:-45px;}
.loading {
	display: block;
	margin: auto;
	position: relative;
	width: 90px;
	height: 90px;
}
.loading i {
	display: block;
	position: absolute;
	width: 50%;
	height: 50%;
	border-radius:50%;
	color:#fff;
}
    
.loading i:nth-child(1) {
	top: 0;
	left: 0;
	background-color: rgba(84,84,241,.25 );
	animation: move1 2s linear infinite;
}
.loading i:nth-child(2) {
	top: 0;
	right: 0;
	background-color: rgba(84,84,241,.5 );
	animation: move2 2s linear infinite;
}
.loading i:nth-child(3) {
	bottom: 0;
	left: 0;
	background-color: rgba(84,84,241,.75 );
	animation: move3 2s linear infinite;
}
.loading i:nth-child(4) {
	bottom: 0;
	right: 0;
	background-color: rgba(84,84,241,1 );
	animation: move4 2s linear infinite;
}

@keyframes move1 {
  0%   { transform: translate( 0 ); z-index: 10; }
  25%  { transform: translate( 100%, 0 ); }
  50%  { transform: translate( 100%, 100% ); }
  75%  { transform: translate( 0, 100% ); z-index: 0; }
  100% { transform: translate( 0 ); }
}
@keyframes move2 {
  0%   { transform: translate( 0 ); }
  25%  { transform: translate( 0, 100% ); }
  50%  { transform: translate( -100%, 100% ); z-index: 0; }
  75%  { transform: translate( -100%, 0 ); z-index: 10; }
  100% { transform: translate( 0 ); }
}
@keyframes move3 {
  0%   { transform: translate( 0 ); }
  25%  { transform: translate( 0, -100% ); z-index: 10; }
  50%  { transform: translate( 100%, -100% ); }
  75%  { transform: translate( 100%, 0 ); }
  100% { transform: translate( 0 ); z-index: 0; }
}
@keyframes move4 {
  0%   { transform: translate( 0 ); }
  25%  { transform: translate( -100%, 0 ); z-index: 0; }
  50%  { transform: translate( -100%, -100% ); z-index: 10; }
  75%  { transform: translate( 0, -100% ); }
  100% { transform: translate( 0 ); }
}