body {background: #222; margin: 0rem; min-height: 100vh; font-family: Pretendard, sans-serif;}

#canvas{ position: absolute;  display: block; top: 0; left: 0; z-index: -1; opacity: 0.75; }
#wrap{position: absolute; display: block; top: 0; left: 0; z-index: 1;}
#header {display: flex;  width: 100%; height: 100px; align-items: center;}
#header h1 {color:#fff; font-size:24px; font-weight: 600; padding: 0 40px;} 

#mainContent {min-height: calc(100vh - 250px); width: 100vw; z-index: 1; color: #fff; text-transform: uppercase; font-size: 76px; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column;}
#mainContent h2 {opacity: 0.75; font-size: 60px; font-weight: 600; line-height: 1;}
#mainContent h3 {opacity: 0.75; font-size: 22px; font-weight: 600; line-height: 1.4;}
#mainContent h4 {opacity: 0.75; font-size: 16px; font-weight: 400; line-height: 1.4;}
#mainContent hr {width: 2px; height:15px; background: #fff;  margin: 30px 0;}
#footer {width: 100%; height: 150px; color: #fff; display: flex;  align-items: center;}
#footer > div {display: flex; flex-direction: row; align-items: center; gap: 30px; color: #fff;  padding:0 40px; opacity: 0.75;}
#footer address {font-size:14px;}
#footer tel {font-size:14px; }
#footer a {font-size:14px;} 
#footer a:hover{text-decoration: underline;}


/* ******************  메인 왼쪽 퀵메뉴 ********************** */
#quickBar{/*position:relative; bottom: 100px; left: 40px; z-index:99;*/ margin-top:40px; }
#quickBar a{padding: 0 11px; width: 48px; height: 48px; border-radius: 48px; background-color: #ff6600; display: flex; align-items: center; justify-content: flex-start; color: rgba(255,255,255,0.8); box-sizing: border-box;  overflow: hidden; transition: all 0.3s;}
#quickBar a span{position: absolute; visibility: hidden; opacity: 0; display: block; width: 120px; font-size: 16px; transition: position 0.3s, visibility 0.3s, opacity 0s;}
#quickBar a i{background: url(../images/ic_download.png) no-repeat center center; display: inline-block ; width: 24px; height: 24px;}


@media all and ( min-width: 801px ){
	#quickBar a:hover{padding: 0 11px 0 11px; width:150px; color: #fff; justify-content: space-between; transition: width 0.3s, background-color 0.3s;}
	#quickBar a:hover span{position: absolute; margin-left:15px; visibility: visible; opacity: 1; transition: all 0.3s;}
}



@media all and ( max-width:768px ){
	#canvas {opacity: 0.075;}
	#header h1 {padding: 0 30px;} 
	#footer > div {opacity: .5;}
	#mainContent { align-items: flex-start; text-align: left;}
	#mainContent h2 {padding: 0 30px; font-size: 2.25rem}
	#mainContent h3 {padding: 0 30px; font-size:16px;}
	#mainContent h4 {padding: 0 30px; font-size:14px;}
	#mainContent hr {margin: 15px 30px; opacity: 0.85;}

	#quickBar {padding: 0 30px; margin-top:20px;}
	#quickBar a{padding: 0 11px 0 11px; width:150px; color: #fff; justify-content: space-between; transition: width 0.3s, background-color 0.3s;}
	#quickBar a span{position: absolute; margin-left:40px; width:80px; visibility: visible; opacity: 1; transition: all 0.3s;}
	#footer {align-items: flex-start;}
	#footer >div {flex-direction: column; align-items: flex-start; gap: 3px; padding: 0 30px;}

}