@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Black+And+White+Picture&display=swap');
 @font-face{
                font-family: 빛의계승자;
                src: url(../../fonts/HeirofLightBold.woff2) format("woff2"),
                url(../../fonts/HeirofLightBold.ttf) format("truetype"),
        
            }
body {
    overflow-x: hidden;
}
/* 전체 배경 */
 /* 이미지를 박스안에 여러개 넣고, 그 박스를 바디전체 넣고싶음
        -> 자바스크립트 배우기 전이라 그냥 css에서 전체 박스를 바디사이즈로
        만들고 라디오버튼만들어서 버튼 누르면 이미지 바뀌게 함...  */
   /* 자바스크립트 하기 전에 임시로 라디오버튼 만들어서 배경 변경하기 */
              .bg-box{
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: -1;
              }
              .bg-box img{
                position: fixed;
                top: 0;
                left: 0;
                z-index: 999;
                width: 100%;
                height: 100%;
                object-fit: cover;
                opacity: 0;
                transition: 0.6s;
              }
              .bg-box img:first-of-type{
                opacity: 1;
              }

              .bg-box input {
                display: none;
              }
              .btn-box{
                position: fixed;
                z-index: 1;
                padding: 20px;
              }
              .btn-box label{
                font-style: italic;
                font-family: Pretandard;
                color: #fff;
                padding: 10px 15px;
                background-color: rgb(188, 212, 185);
                border: 4px solid rgb(204, 247, 222);
                border-radius: 50%;
              }

              .bg-box #chk2:checked ~ img:nth-of-type(2) {
                opacity: 1;
              }

              .bg-box #chk3:checked ~ img:nth-of-type(3) {
                opacity: 1;
              }

              .bg-box #chk4:checked ~ img:nth-of-type(4) {
                opacity: 1;
              }
              .bg-box #chk1:checked ~ img:nth-of-type(2) {
                opacity: 0;
              }
              .bg-box #chk1:checked ~ img:nth-of-type(3) {
                opacity: 0;
              }
              .bg-box #chk1:checked ~ img:nth-of-type(4) {
                opacity: 0;
              }


/* 애니메이션 적용 */


/* 1. 타이틀꾸미기 */
      .title {
        position: absolute;
        top: -150px;
        left: 10px;

        /* 박스세팅 */
        max-width: 800px;
        text-align: center;
        /* background-color: #ffffff6c; */

        
        /* 글자세팅 */
        color: #ffffff;
        font-size: 45px;
        line-height: 100px;
    
        font-family: '빛의계승자';
                font-weight: normal;
                font-size: 40px;
                color: rgb(255, 255, 255);

        /* 글자테두리 */
        text-shadow: 4px 0px rgb(0, 19, 185),
        -4px 0px rgb(10, 102, 155),
        0px 4px rgb(5, 7, 128), 
        0px -4px rgb(0, 153, 255);
      }

      .sub-title{
        /* 위치 */
        position: absolute;
           bottom: -160px;
    left: 645px;
    text-align: center;
    color: rgb(255, 107, 107);
    line-height: 100px;
    font-family: '빛의계승자';
    font-weight: normal;
    font-size: 70px;
                
        text-shadow: 4px 0px rgb(255, 255, 255),
        -4px 0px rgb(255, 255, 255),
        0px 4px rgb(255, 255, 255), 
        0px -4px rgb(255, 255, 255);
      }
      

/* 이디야 박스  */
.house{
    /* 부모자격을 준다 - 하위 앱솔루트 요소들의 부모 */
    position: absolute;
    top: -100%;
    left: 50%;
    translate: -50% 50%;

    /* 가운데 오기 */
    margin: 0 auto;
    
    margin-bottom: 700px;
    /* house.png와 동일한 크기 */
    width: 680px;
    height: 453px;
    /* 배경이미지 */
    background: url(./데못죽/ediya.jpg) no-repeat;

    /* 문(.door)을 원근 입체로 보이게 하기 위해 
    부모 요소인 .house에 원근 설정을 한다
        perspective: 수치값; per 
        - 수치값의 의미는 기준축으로부터 소실점까지의 거리
        - 이 값이 어떤 기준수치값보다 작으면 원근이 커진다 */
    perspective: 480px;
    /* 화면밖튀어나오는거 안보이게 */
    overflow: hidden;
    border: 5px solid #022f91;
}

/* 임시로 숨기기 */
/* .yj ~ * {
    display: none;
} */

/* 1. 문대 */
.mundae{
    position: absolute;
    top: 339px;
    left: 329px;
    width: 84px;
    z-index: 1;
}

/* 2. 문짝 */
.door{
    position: absolute;
    bottom: -2px;
    left: 331px;
    width: 78px; 
}

/* 3. 0%가 처음 위치 100%가 최종위치 여기는 처음위치 */
.ah{
    position: absolute;
    top: -200px;
    left: 10px;
    width: 100px;
    z-index: 1;  
}
.sj{
    position: absolute;
    top: 339px;
    left: 329px;
    width: 84px;
}
.yj{
    position: absolute;
    top: 212px;
    right: 99px;
    width: 30px;
}
.rb{
    position: absolute;
    top: 212px;
    left: 99px;
    width: 30px;  
}
.cw{
    /* position: absolute;
    top: 175px;
    left: -200px;
    width: 320px;   */
    position: absolute;
    top: 500px;
    left: -100px;/* -231px; */
    width: 300px;
    transform-origin: bottom;
    rotate: 0deg;/* -18deg; */
}
.bsj{
    position: absolute;
    top: 300px;
    right: 80px;
    width: 300px;  
    opacity: 0.3;
}