@charset "UTF-8";

/*
해당 위치에 관한 내용을 클라스이름으로 적으면 안된다.
나중에 개편할때 어떻게 변할지 몰라서...,


background data summary
- 이미지를 배경에 처리해서 사용하는 기능
- 기준 경로는 css문서를 작성하고 있는 곳
- 불러오는 이미지는 무조건 반복 패턴으로 처리됨. 
(하나가 나오는게 아니라 반복된다/ 포토샵/일러스트 패턴과 비슷)
- 기본 불러오는 이미지의 좌표는 부모기준 x축0 y축0 (상대좌표)
- 단 position-attatchment:fixed 에서는 좌표의 기준은 절대좌표 (브라우저기준);

background-color

background-image - 이미지를 불러온느 방법, 그라데이션처리(bgc 컬러X)
background-repeat - 전체반복, x축 반복, y축 반복, 반복하지않음
	repeat, no-repeat, repeat-x, 
background-position - 좌표를 입력, 10px 40px (컴마없음/x y축),
	10% 40% 퍼센트,
	px은  퍼센트랑 다름 (그대로 위에서 나옴.....,)
	가운데: 50% 50%; 오른쪽 하단 100% 100%
		-사진이랑 배경 10%10%하면 둘다같은 쪽에 같은 자리에, 

	top left 가능 (안사용함)
	background-position: right bottom; 오른쪽하단
	bgc-p: center center;
	center 자동)
background-size - cover(짤려도 꽉차게), contain(빈공간 남아도 상관없지만 이미지 다, 그대신 패턴나옴) , 
100% auto (가로 세로순 / 하나만 쓰면 무조건 가로 세로는 auto
 세로를 쓸경우는 가로에 auto써야함 둘다 %할경우.. 비율 X)
background-attatchment - fixed || scroll (선택한 요소 함께 움직임)
*/
.hidden {display: block; width: 0; height: 0;
	overflow: hidden;}


#wrap {width: 100%; min-width: 1200px;
	height: auto; min-height: 600px;
	background-color: #ccc;}

#headBox {width: 100%; height: auto;
	border-bottom: 0.1875rem solid #333;
	margin-bottom: 1rem;}

#contentBox {width: 100%; height: auto;
	padding: 1rem; box-sizing: border-box;
	background-color: #acf;}
 .before_img {width: 400px; height: 300px;
  	border: 2px solid #fff;}
 .img_01 {position: relative; z-index: 0;
 		width: 100%; height: 100%; 
  	background-color: #0cf; overflow: hidden;}
  figcaption{font-size: 2rem; font-weight: bold; color: #fff;}
 .img_01>img {position: absolute; top:0; left: -70px;
 		z-index: -100;
  	width: auto; height: 100%;}

 .css_img {width: 400px; height: 300px;
 		border:2px solid #357;
 		background-image: url("../img/ninja.png");
 		background-size: 40% auto;
 		background-repeat: repeat;
 		background-position: 50%;
 		background-color: #fff;
 		color: #fff;}
 	.css_img2 {width: 50rem; height: 40rem;
 		background-color: #ddd;
 		background-image: url("../img/ninja.png"),
 		url("../img/waterfall(1-v).jpg");
 		background-size: 10% auto, 50% auto;
 		background-repeat: repeat-x, no-repeat;
 		background-position: 0 0, 10% 25%;}
 	.css_img2 p {width: 0; height: 0}

 	ul{width: 100%; height: 200px;}
 	li{float: left; width: 110px; height: 110px;
 		margin: 1rem; border-radius: 0.5rem;
 		background-color: #fff; }
 		/*a태그는 인라인요소라서 / */
 		/*네이버시작페이지| 쥬니어 -> 글자쓴거임 */
 	li>a {display: block; width: 100%; height: 100%;}
 	
.hidden_wrap a>span {display: block;
	position: absolute; width: 0; height: 0;
	overflow: hidden;}

	.css_img3 li>a {background-image: url("../img/icons1.png");
		background-repeat: no-repeat;}
/*내가한거 vw 계산법처럼 240/1100*100 -> 다시 계산해야함..
	.css_img3 li:nth-child(1)>a {background-position: 6px 10px;}
	.css_img3 li:nth-child(2)>a {background-position: 24% 25.5%;}
	.css_img3 li:nth-child(3)>a {background-position: 50% 50%;}
	.css_img3 li:nth-child(4)>a {background-position: 100% 76%;}
	.css_img3 li:nth-child(5)>a {background-position: 49.4% 100%;}
	.css_img3 li:nth-child(5)>a {background-position: 21.81% 44.4%;}*/
	.css_img3 li:nth-child(1)>a {background-position: 6px 10px;}
	.css_img3 li:nth-child(2)>a {background-position: -238px -205px;}
	.css_img3 li:nth-child(3)>a {background-position: -490px -400px;}
	.css_img3 li:nth-child(4)>a {background-position: -990px -600px;}
	.css_img3 li:nth-child(5)>a {background-position: -490px -795px;}
	.css_img3 li:nth-child(6)>a {background-position: -240px -400px;}

	.css_img3 li>a {transition: all 1000ms ease;}
	.css_img3 li:nth-child(1):hover>a {
		background-position: -238px -205px;}
	.css_img3 li:nth-child(2):hover>a {
		background-position: -490px -400px;}
	.css_img3 li:nth-child(3):hover>a {
		background-position: -990px -600px;}
	.css_img3 li:nth-child(4):hover>a {
		background-position: -490px -795px;}
	.css_img3 li:nth-child(5):hover>a {
		background-position: -240px -400px;}
	.css_img3 li:nth-child(6):hover>a {
		background-position: 6px 10px;}