@charset "UTF-8";



#contentBox{width: 800px; height: auto;margin: auto;
  border: 2px solid #333; box-sizing: border-box;}
#contentBox>div{width: 100%; height: 500px;
  background-repeat: no-repeat; 
  background-position: 50% 50%;}
.box_01{background-image:url(../img/waterfall1-v.jpg);
  background-attachment: local;}
.box_02{background-image:url(../img/waterfall2.jpg);
  background-attachment: fixed;}
.box_03{background-image:url(../img/waterfall1-v.jpg);
  background-attachment: scroll;}

  /*background-attachment: 배경이미지 고정처리의 유무 판단
  local (기본형) / fixed / scroll
  scroll: 고정
  local: 기본형
  fixed: 요소내부에 스크롤시 고정;
  *주의사항: fixed 처리시: bgc-position: 위치값이 브라우저기준으로 -> 그래서 자바스크립트로 함

parallax 
  ; */

 #contentBox>div {overflow: hidden; overflow-y:auto;}
#contentBox>div>h3 {width: 100%; height: 70px;
  background-color: rgba(255,100,0,0.3);}
#contentBox>div>ul {width: 100%; padding-left: 1rem;
  box-sizing: border-box;}
#contentBox>div>ul>li {height: 50px; margin-bottom: 20px;
  list-style: decimal; background-color: rgba(255,255,255,0.3);}


#gradientBox{width: 800px; height: auto;
  margin: auto; margin-top: 2rem;
  border: 3px solid #333;}
#gradientBox>div{width: 100%; height: 500px;
  margin-bottom: 1rem;}
#gradientBox>div:last-of-type{margin-bottom: 0;}
.gr_01{background-color: #34f;
  background-image: linear-gradient(#fa0, #0af);}
.gr_02{background-color: #f4f;
  background-image: linear-gradient(-45deg,#fa0, #f4f);}
  /*각도는 색상 앞에 적어서 deg 를 적으면 됩니댜@*/
.gr_03{background-color: #3af;
  background-image: linear-gradient(130deg,#0af 10%,#fac 40%);}
  /*색깔뒤에 스페이스 %넣어서 색깔 위치,안쓰면 100%*/
.gr_04{background-color: #f14;
  background-image: linear-gradient(-45deg, #fac 30%, #86f 30% 70%, #171717 70%) }

  /*2개 이상 그라데이션 가능*/

.gr_05{position: relative; z-index: 0;
  background-color: #acc;
  background-image: linear-gradient(-45deg, #fac, #acf);}
/*.gr_05:hover{background-image: linear-gradient(-45deg, #0ac,#acf);}*/
.gr_05:after{content:" "; display: block;
  position: absolute; top:0; left: 0; z-index: -10;
  width: 100%; height: 100%; opacity:0;
  transition: all 300ms ease;
  background-image: linear-gradient(-45deg,#0ac,#a0f);}
.gr_05:hover:after{opacity: 1;}
/*그라이언트 잘 안먹어서 임의로 만드는것.*/

.gr_06{background-image:radial-gradient(circle,#fa0 50%,#acf 70%);}
/*circle 지우면 정확히 원이 안나옴->ellipse나옴*/
.gr_07{background-image:radial-gradient(ellipse,#fa0 50%,#acf 70%);}
.gr_08{background-image:radial-gradient(circle at 10% 10%,#fa0 50px, #acf 70%);}
/*at : 좌표 */
/*background-image
url | linear-gradient() | radial graident()

url() 이미지삽입
linear-gradient() => 직선형의 그라데이션 효과(각도(deg), 색 위치(%), 색 위치(%).....)
linear-gradient() => 원형의 그라데이션 효과 (원형모양[circle, ellispe] 및 위치[at x좌표 , y좌표], 색상1위치(%), 색상2위치(%)...)

url()제외한 gradient는 벤더 프리픽스를 사용해야함...
background-image:-webkit-radial-gradient();
background-image:-moz-radial-gradient();
background-image:-ms-radial-gradient();
background-image:-o-radial-gradient();
background-image:-radial-gradient();
모양 지워도 위치값 먹음..
*/