@charset "utf-8";
/* 어벤저스 CSS - avengers.css */

/* 웹폰트 */
@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Single+Day&display=swap');

/* 
    font-family: 'Monoton', cursive;
    font-family: 'Single Day', cursive;
*/

/* #아이디 a요소 이동시 부드럽게끔 스크롤 애니 작동됨 */
html{
    scroll-behavior: smooth;
}

/* 초기화 */
html, body, h1, h2, ul, ol{
    margin: 0;
    padding: 0;
}
/* 초기셋팅 */
a{
    color: #fff;
    text-decoration: none;
}
body{
    /* 배경이미지 채우기 */
    background: url(../ab_img/space.jpg) no-repeat fixed center/cover;
    /* 전체 body 스크롤바 숨기기 */
    /* overflow: hidden; */
}
/* 바디의 높이값을 보이는 화면에 맞추기 */
html,body{
    height: 100%;
    /* 바디는 html을 기준으로 잡기 때문에, 반드시 html에다가도 100% 줘야 한다 */
    /* 즉,
        body 100%는 html을 기준하며
        html 100%는 window(보이는 화면)을 기준한다!
        ★★★ % 셋팅시 html과 body 모두 셋팅해야 적용된다!! ★★★
        _______________________________________________________________________

        가끔 width:100%를 잡는 경우가 있다
        아무것도 안 주면 width:auto 임. 둘 간의 차이는?
        width:100%는 컨텐트 영역 크기를 채우도록 채우도록 셋팅함
        따라서 보더나 패딩을 줄 경우, 박스가 커지고 스크롤바가 생김
        그래서 특별한 경우가 아니라면 auto 상태(오토는 기본값임)로 놔두면 보더와 패딩이 내부에 포함된다

    */
}

/* 0.전체 타이틀 */
.tit{
    /* 고정 포지션 - 픽스드포지션+너비값100퍼센트 */
    position: fixed;
    width: 100%;
    z-index: 999;
    /* 가장 위에 위치하게 만들기 */
    
    font-family: 'Monoton', cursive;
    color: lightsalmon;
    font-size: 70px;
    /* 글자 두께 보통 */
    font-weight: normal;
    /* 글자 가운데 정렬 (블록박스니까) */
    text-align: center;
    /* 위,아래 여백 주기 */
    padding: 50px 0;
}

/* 1.페이지 박스 공통 */
.page{
    height: 100%;
    /* 한 페이지당 html, body 보이는 화면 100%와 같이,
    보이는 화면만큼 크기 확장 설정해준것임 */
}

/* 2.메인 캐릭터 박스 */
.abx{
    /* 부모자격주기 - .cbx의 부모 */
    position: relative;
    top: 210px;
    width: 300px;
    height: 400px;
    /* 배경이미지 */
    background: url(../ab_img/ab0.jpg) no-repeat center/cover;
    /* 둥근 모서리 -> 원형은 50% */
    border-radius: 50%;
    /* 블록 박스 무대 중앙으로! -> 마영오 */
    margin: 0 auto;
    /* 양쪽 오토라는 것은 자동으로 양쪽의 마진을 딱 반띵해주는 것을 말함 (이건 포지션:앱솔루트(날아다니는것들) 주면 안 먹힘 */
    /* 글로우 효과 : 박스그림자 응용(밝은 색으로 주면 됨)
    -형식 = box-shadow: x y blur spread 색
    -inset은 내부 그림자
    -그림자효과는 여러 개 줄 수 있음 */
    box-shadow:
    0 0 50px 10px cyan,
    inset 0 0 20px lightgreen;
}

/* 캐릭터 박스 */
.cbx{
    /*
    [ 앱솔루트 포지션 ]
    위치값 주기 전 상태: 모두 겹침, 자신을 싸고 있는 박스 안에 그대로 있음(젠틀), 크기는 내용만큼 자동으로 착 달라붙음, 나중에 쓴 것이 기본적으로 위에 옴
    */
    position: absolute;
    top: calc(50% - 75px);
    left: calc(50% - 75px);
    /* 부모는? .abx가 부모자격 있는 박스가 됨 */

    /* 
        [앱솔루트 자식 박스
        부모박스의 정중앙 위치하기]
        top : calc(50% - 자기 height의 절반)
        left : calc(50% - 자기 width의 절반)
        ->원리 : 50%밀고 자신 크기의 절반을 빼서 정중앙으로 위치를 이동하는 것
        ->계산은 calc() css함수를 사용한다^^
        (+,- 연산시 기호 앞뒤를 꼭 띄어쓴다!)
    */

    /* 박스 테두리 (박스 외곽선 임시로 표시하는 것이라서 brad 적용 안됨(모서리 둥글게 안됨)
    outline: 3px dotted yellow; */

    /* 
    박스 크기 설정 (이미지보다 박스가 작아질 수도 있음 -> 이미지를 박스 크기에 맞게 조절하고 싶음 -> (박스에 맞추기 위해) w100% h100%하면 찌그러짐 ㅠ -> 그래서 css에서 설정 하나 만들어줌 ('오브젝트-핏' 속성) -> object-fit: cover; 는 배경이미지:커버 처럼 자동으로 비율을 맞추면서 박스 안을 다 채워줌!
    */
    width: 150px;
    height: 150px;

    /* 처음에 투명하게 만들어두기 - opa */
    opacity: 0;

    /* 트랜지션: 속시이지 */
    transition: .8s ease-in-out;
}

/* 캐릭터 이미지 (이미지 요소를 얘 하나만 줄 것이면 러프하게 크게 잡아도 됨) */
.cbx img{
    /* 크기를 박스에 맞춤 -> 이미지가 왜곡된다는 단점이 있음 -> object-fit:cover를 쓴다 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*
        [object-fit 속성]
        -이미지나 동영상을 박스에 맞출 때 옵션을 설정해주는 속성
        1.fill : 설정값에 강제 적용함 (기본값) (가로 세로 왜곡 가능성 있음)
        2.contain : 박스에 모두 보이게 만듦
        3.cover : 박스를 비율에 맞게 채움
            -> 빈틈 없이 채우기 때문에 '배경:cover'와 유사한 효과를 준다! (박스 밖으로 나간 부분은 안보이게 해줌)
    */

    /* 이미지 둥글게 */
    border-radius: 50%;

    /* 글로우 효과 */
    box-shadow: 0 0 30px 10px lightgreen;
    /* 가운데 오게 하기 가로세로크기 정해서 모양 다 똑같이 만들면 이미지가 찌그러드러ㅠ */
}

/* 바디에 오버시 전체 오퍼시티 보이게 하기 */
body:hover .cbx{
    opacity: 1;
}

/* 2-1. 안중근 */
body:hover .cbx:nth-child(1){
    top: -9%;
    left: -81%;
}

/* 2-2.설희 */
body:hover .cbx:nth-child(2){
    top: -9%;
    left: 121%;
}

/* 3-2.조마리아 */
body:hover .cbx:nth-child(3){
    top: 82%;
    left: -81%;
}

/* 4-2.조도선 */
body:hover .cbx:nth-child(4){
    top: 82%;
    left: 121%;
}

/* 5-2.마진주 */
body:hover .cbx:nth-child(5){
    top: 120%;
    /* left는 중앙위치이므로 셋팅하지 않음*/
}

/* 캐릭터 설명 박스 공통 */
.cd{
    position: absolute;
    top: 50%;
    /* 부모는? .cbx */
    /* 처음에는 살짝 내려가 있고, 마우스오버하면 탑값0으로 올라오게끔 만들기 */
    
    /* 박스 셋팅 */
    width: 300px;
    
    /* 처음에 height값 0으로 줘서 박스 숨기기
    ->이유: 투명상태로 오버되는 경우를 없애기 위해 */
    height: 0;
    /* 넘치는 자식 요소 숨기기까지 해줘야 됨 */
    overflow: hidden;
    

    /* 글자 셋팅 */
    font-family: 'Single Day', cursive;
    color: darkblue;
    text-shadow: 1px 1px #000;

    /* 처음에 투명하게 만들기 */
    opacity: 0;

    /* 트랜지션: 속시이지 - trs */
    transition: .4s ease-out;
}

/* .cd '직계' 하위 div로 박스 디자인 이전하기
-만든 이유: height값을 0으로 숨기려는데 패딩과 보더때문에 숨겨지지 않음!
따라서 이것을 직계 하위 div로 이전하기 (바로 밑의 놈에게 준다고 강조하는 것! 이렇게 해두면 혹시 또 div 만들어도 직계에만 적용되므로 안전한 코드가 됨)*/
.cd > div{
    border: 2px dashed #fff;
    padding: 15px;
    border-radius: 15px;
    /* background-color: hsla(0, 0%, 100%, 0.388); */
    background: url(../ab_img/space.jpg) no-repeat -300px -322px;
    /* 배경 이미지를 반투명하게는 어떻게 하지........ㅠㅠ?  오퍼시티? -> 되는데 전부다 반투명해짐...->그럼 정확하게 어떻게 하지...*/
}

/* .cbx에 오버시 글자박스 보이기 */
.cbx:hover .cd{
    top: 0;
    opacity: 1;
    height: auto;
    /* 전체적으로 트랜지션 설정되어 있으나, height값이 특정값(픽셀이나 퍼센트)으로 설정되어있지 않고, auto일 경우 애니메이션되지 않는다
    애니메이션 되지 않게 하는 게 목적이었는데 잘 됐다^^ㅎㅎㅎ
    만약 적용되는 것을 안되게 하려면 transition에서 개별 셋팅해야 한다! */
}

.cd > div h2{
    color: limegreen;
    text-shadow:
    1px 0 #000,
    -1px 0 #000,
    0 1px #000,
    0 -1px #000;
}

/* 왼쪽 진영 글자 박스 클래스 */
.ltxt{
    left: -230%;
}
/* 왼쪽 진영 제목 오른쪽 정렬 */
.ltxt h2{
    text-align: right;
}

/* 오른쪽 진영 글자 박스 클래스 */
.rtxt{
    right: -230%;
}

/* 예고편 페이지 */

/* 서브 타이틀 */
.subtit{
    position: sticky;
    top: 110px;

    padding: 50px 0;
    text-align: center;
    color: #222;
}

/* 동영상 박스 */
.mvbx{
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    margin-top: 100px;
}
/* 아이프레임 */
.mvbx iframe{
    /* 아이프레임을 부모박스(.mvbx)에 맞추기 */
    width: 100%;
    height: 100%;
    /* 경계선 없애기 (아이프레임에 기본 보더가 있기 때문에 그거 없애주는 것임) */
    border: none;
}

.page{
    position: relative;
    /* 부모자격주기!! : .gobtn의 부모로 만들어 주기 (저 위에 올라가서 작업하기 귀찮아서 아래쪽에 그냥 만듦 ㅎㅎㅎㅎ) */
}

/* 이동버튼 공통 디자인 */
.gobtn{
    position: absolute;
    /* 부모가 누구? => 페이지에 부모자격 줘야함 (.page에 주기) */
    right: 3%;
    font-size: 30px;
    /* 제일 위에 위치하기 */
    z-index: 9999;
}

/* 가상클래스로 화살표모양 넣기 */
#pg1 .gobtn::after{
    content: '👇';
}
#pg1 .gobtn::before{
    content: '🎬';
}

#pg2 .gobtn::after{
    content: '👆';
}
#pg2 .gobtn::before{
    content: '🎬';
}

/* 개별 위치 정해주기 */
#pg1 .gobtn{
    bottom: 5%;
}

#pg2 .gobtn{
    top: 5%;
}

/* 오버시 a변경하기 */
.gobtn:hover{
    color: lightsalmon;
    font-style: italic;
}