/* ---------------------------
  Resets CSS
------------------------------*/
/*html,body,div,blockquote,p,span,cite,audio,video,textarea,input,img,a,button,
table,caption,tbody,tfoot,thead,tr,th,td,dl,dt,dd,ol,ul,li,
iframe,form,label,legend,fieldset,object,pre,code,address,var,abbr,dfn,kbd,samp,
h1,h2,h3,h4,h5,h6,big,small,del,ins,em,strong,b,i,q,s,center,sub,sup,
article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,section,summary,time,mark,
:before,:after,
container,screen,content,popup,btn*/
*{
	/*박스 크기 계산법 설정 [content-box(보더값 포함), border-box(내부크기만)]*/
	-khtml-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	
	margin:0px;
	padding:0px;
	border:none;
	
	vertical-align:top;
	/*transfrom 사용시 뒤 배경 상태 설정하기*/
	-webkit-backface-visibility:hidden;
	
	/*배경 설정*/
	background-repeat:no-repeat;
	background-size:100% 100%;
	
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	color:inherit;
    line-height:inherit;
    text-align:inherit;
    text-rendering: auto;
    letter-spacing: inherit;
    
    /*-webkit-backface-visibility: hidden;*/
}

:before,:after{
	/*박스 크기 계산법 설정 [content-box(보더값 포함), border-box(내부크기만)]*/
	-khtml-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	/*배경 설정*/
	display:inline-block;
	background-repeat:no-repeat;
	background-size:100% 100%;
	
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	color:inherit;
    line-height:inherit;
    text-align:inherit;
    text-rendering: auto;
    letter-spacing: inherit;
}
/*---------------------
	시멘틱
-----------------------*/
/*추가된 테그*/
article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,section,summary,time,mark{ 
	display:block;
}
/*---------------------
	리스트
-----------------------*/
/*속성 정의*/
ul,ol,li{list-style:none;}
li:before,li:after{content:none;}

/*테이블*/
table,thead,tbody,tr,th,td{position:relative;}
table{border-spacing:0;border-collapse:collapse;}
/*테이블이나 사진, 삽화 등에 붙는 설명*/
caption{text-align:center; display:none;}
th{
	font-weight:bold;
	display: table-cell;
    vertical-align: middle;
    text-align: center;
}
td{
	display: table-cell;
    vertical-align: middle;
    padding:0px 20px;
}


/*---------------------
	용어설명
-----------------------*/
/*dl,dt,dd{}*/

/*---------------------
	미디어
-----------------------*/
/*이미지 초기화*/
video,img{
	mask-image:radial-gradient(white, black);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
	/*마우스 선택 안되게*/
	-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none;
	/*마우스 드레그 안되게*/
	-ms-user-drag:none;-moz-user-drag:-moz-none;-khtml-user-drag:none;-webkit-user-drag:none;user-drag:none;
}
video{opacity:0;}
img{
	image-rendering:-moz-crisp-edges;
	image-rendering:-o-crisp-edges;
	image-rendering:-webkit-optimize-contrast;
	image-rendering:crisp-edges;
}
/*---------------------
	버튼
-----------------------*/
button{
	cursor:pointer;
	
	display:inline-block;
	position:relative;
	overflow:visible;
	background:none;
	box-shadow:none;
	border-radius:0;
	background-size:200% 100%; 
	
	padding-block:0px;
    padding-inline:0px;
    
    word-spacing:normal;
    text-transform:none;
    text-shadow:none;
    
	/*브라우저별 기본 스타일링 제거 */
	-ms-appearance:none;-moz-appearance:none;-khtml-ppearance:none;-webkit-appearance:none;appearance:none;
}
	button:hover{ 
		background-position-x:100%;
	}
	button.on{
		cursor:default; 
		background-position-x:100%;
	}
	button.disabled{
		cursor:default !important; 
		background-position-x:0%;
	}
/*---------------------
	입력
-----------------------*/
input,textarea{
	-ms-user-select:auto;-moz-user-select:-moz-auto;-khtml-user-select:auto;-webkit-user-select:auto;user-select:auto;
}
textarea{
	resize:none; overflow-x:hidden; overflow-y:auto;
}

/*입력 지우기 버튼 생성 막기*/
input::-moz-clear{display:none;}
input::-webkit-clear{display:none;}
input::-ms-clear{display:none;}
input:-ms-clear{display:none;}
input::clear{display:none;}

/*placeholder 스타일 지정*/
::-moz-input-placeholder{color:#bbb!important; opacity:1; font-style: italic;}
::-webkit-input-placeholder{color:#bbb!important; opacity:1; font-style: italic;}
/* Microsoft Edge */
::-ms-input-placeholder{color:#bbb!important; opacity:1; font-style: italic;}
/* Internet Explorer 10-11 */
:-ms-input-placeholder{color:#bbb!important; opacity:1; font-style: italic;}
/*파이어폭스에서 css*/
::placeholder{color:#bbb!important; opacity:1; font-style: italic;}

/*---------------------
	포커스
-----------------------*/
/*입력 창 스타일 제거*/
button,input,textarea,select,video,img,a{
	/*스타일 제거*/
	outline:none;outline-style:none;background-color:transparent;
	/*브라우저별 기본 스타일링 제거 */
	-ms-appearance:none;-moz-appearance:none;-khtml-ppearance:none;-webkit-appearance:none;appearance:none;
}
:focus{
	outline:none;
}
:focus-visible{
	position:relative;
	outline:solid; outline-color:#0cf; outline-width:0.4rem;
	z-index:999;
}
input:focus-visible,textarea:focus-visible{
	outline:none;
}
/*---------------------
	기타 태그
-----------------------*/

/*링크 테그*/
a{cursor:pointer;display:inline-block;text-decoration:none;}
/*인라인 인용문 요소*/
q:after,q:before {content:"";}
/*강조체*/
b,strong{
	font-weight:900;
}
/*글 작게*/
small{
	font-size:0.6em; 
	font-weight:normal;
	letter-spacing:-1px;
}
/*밑줄*/
ins{
	text-decoration:none;
	border-bottom:0.2rem solid #000;
	position:relative;
	bottom:0px;
}
/*삭제줄
del{cursor:pointer; text-decoration:none;}*/
/*
cite:창작물의 제목
dfn:용어(term)의 정의
em:강조된 텍스트
mark:하이라이트된(highlighted) 텍스트
strong:긴급하거나 중요한 텍스트
*/

/* ---------------------------
  html, body 전체 채우고 마우스 선택 안되게
------------------------------*/
html{
	overflow:hidden;
	width:100%;height:100%;
	font-size:10px;
}
body{
	overflow:hidden;
	width:100%;height:100%;
	/*텍스트 자동 스케일 안되게*/
	-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;-o-text-size-adjust:none;
	/* 마우스 선택 안되게
	-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select: none; user-select: none;
	*/
	/*터치 조작 이벤트 막기*/
	touch-action:none;
	-webkit-touch-callout: none;
	opacity:0;
}



/*---------------------
 화면 설정
-----------------------*/
/**
 * 화면 크기 설정
 */
container{
	display:block;
	position:absolute; left:0; top:0;
	width:192.0rem; height:108.0rem;
}
/**
 * 컨텐츠 화면 크기 설정
 */
container>iframe{
	position:absolute;
	width:232.0rem; height:108.0rem;
	left:-20.0rem; top:0;
}

/*---------------------
 화면 설정
-----------------------*/
/**
 * 	스크린 화면
 */
screen{
	display:block;
	position:absolute; left:0; top:0;
	width:232.0rem; height:108.0rem;
	overflow:hidden;
}
/**
 * 	컨텐츠 화면
 */
content{
	display:block;
	position:absolute; left:20.0rem; top:0;
	width:192.0rem; height:108.0rem;
	overflow:hidden;
}