@charset "utf-8";
/* 도깨비 PJ 공통 미디어 쿼리 CSS - media.css */

/* 큰거에서부터 작은거로 내려가기로 함~ */


/* 1200px 사이즈 이하 미디어쿼리 시작 */
@media screen and (max-width: 1200px) {
    /* 하단 - 브랜드 바로가기 */
    .brand {
        top: 160px;
        right: 10px;
    }
}  /* 1200px 사이즈 이하 미디어쿼리 끝 */


/* 1024px 사이즈 이하 미디어쿼리 시작 */
@media screen and (max-width: 1024px) {
    /* 전체 글자 크기 변경 */
    html{
        /* rem단위 글자 모두 변경 */
        font-size: 8.235px;
        /*
            [ 기준 글자 계산 : GNB 메뉴 기준 ]
        -처음 : 1.7rem * 10px = 17px
        -변경 : 1.7rem * 몇px = 14px
        =>계산 : 몇px = 14px / 1.7rem
        =>결과 : 8.235px
        */
    }

    /* 등장 글자 이미지 없애기 */
    #mvtxt{
        display: none;
    }
    
    /* 메인 속박스 */
    .cont {
        /* 가로 크기에 대한 비율을 만들어 준다! - 스태틱한 애들이 더 많아지면 밀고 나갈 수 있는게 민-하이트...*/
        min-height: 100vw;
    }

    /* 전체 캐릭터 박스 */
    .cbx {
        margin-top: 10vw;
    }
    
    /* 캐릭터 각 박스 공통 */
    .cat {
        position: relative;
        /* 부모자격 - .cd */
        width: 49%;
        margin-bottom: 20px;
    }

    /* .cat에 오버시 .ci박스 마진탑 변경하기 (흔들림이 없어지네) */
    .cat:hover .ci{
        margin-top: 0;
    }

    /* 캐릭터 설명 박스 */
    .cd{
        position: absolute;
        z-index: 1;
    }

}  /* 1024px 사이즈 이하 미디어쿼리 끝 */


/* 780px 사이즈 이하 미디어쿼리 시작 */
@media screen and (max-width: 780px) {
    /* 가로 스크롤 없애기 */
    html, body{
        width: 100vw;
        /* 혹시 가로스크롤이 생길 수 있으니까 (안에 있는 자식 요소에 있는 셋팅이 뭔가 바깥으로 미는 경우가 있을 수 있음)
        그럴 경우가 혹시 생길 수도 있으니까 그냥 가로사이즈를 미리 잡아버리는 것임! */
        overflow-x: hidden;
    }

    /* 디스플레이 없애기 */
    .tmenu,
    .smbx,
    .gnb > ul > li > a::after,
    .gnb{
        display: none;
    }
    /* 탑메뉴도 .top.on일때 나타남! */
    .top.on .tmenu{
        display: block;
    }

    /* gnb메뉴 변경하기 - .top에 .on을 준 경우 적용됨 (햄버거 버튼 눌렀을 때 보이는 까만 배경을 위함) */
    .top.on .gnb{
        display: block;
        position: fixed;
        /* 메뉴를 픽스드로 고정시킴 */
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1;
    }

    /* gnb메뉴의 각 메뉴들 (ul) 방향을 세로로 만들기 + 가운데 정렬 - fxdc */
    nav.gnb ul {
        flex-direction: column;
        /* 플렉스박스를 세로방향으로 바꿈 */
        text-align: center;
        margin-top: 20vh;
    }

    /* li 셋팅 */
    .gnb > ul > li {
        margin: 0;
        height: 10vh;
        /* li가 6개이므로 보이는 높이의 60%를 차지하게 됨 */
    }

    /* gnb 상위 메뉴의 글자(a) 변경하기 */
    .gnb>ul>li>a {
        font-size: 5vh;
        line-height: 10vh;
        color: #fff;
    }

    /* 로고 - 배경보다 위에 올라오게 만들기 */
    h1.logo {
        position: relative;
        z-index: 2;
    }

    /* 햄버거 버튼 보이기 */
    .ham {
        display: block;
        /* 원래 버튼은 인라인요소지만, 앱솔루트 주면 블록이 된다~~ */
    }
    /* 햄버거 버튼 상위.top에 클래스on 줄 경우, x버튼으로 모양이 바뀌기 */
    .top.on .ham {
        z-index: 3;
        color: #fff;
        transform: scale(1.5);
    }
    .top.on .ham::before {
        content: '×';
    }

    /* 탑 메뉴 */
    aside.tmenu {
        position: fixed;
        z-index: 99999;
        width: 100vw;
        top: 85vh;
    }

    .tmenu ul {
        /* 플렉스 진행방향 중앙 */
        justify-content: center;
        /* 플렉스 랩핑설정 */
        flex-wrap: wrap;
    }

    /* 마지막 li 100% 줘서 한줄 차지하게 만듦 */
    .tmenu > ul > li:last-child{
        width: 100%;
    }

    /* sns메뉴 */
    .tmenu ol {
        display: flex;
        justify-content: center;
        margin-top: 2vh;
        transform: scale(1.5);
    }
    
    .tmenu > ul > li > a {
        /* 글자크기, 색 */
        color: #fff;
        font-size: 6vw;
    }

    /********************* 상단영역 *********************/
    .top{
        position: relative;
        /* 부모자격 - 햄버거버튼(.ham)
        -햄버거 버튼에 앱솔루트를 줬는데 부모자격을 안 줬더니, 윈도우(보이는 화면)가 부모자격을 가져가서
        자기 위치를 고집해버림..그래서 가로스크롤이 미세하게 생기는 문제가 발생함!
        ->그래서 부모자격을 준다! */
        height: 80px;
    }

    /* 캐릭터 박스 - 한 줄에 하나 오게 만들기 */
    .cat{
        width: 99%;
    }

    /* 캐릭터 설명박스 - 다시 스태틱하게 만들어주기 */
    .cd{
        /* 자리차지하게 하면서 내려가는게 기본임! */
        position: static;
    }
    
    /* 캐릭터 설명박스 제목 */
    .cd h3{
        font-size: 4.5vw;
    }

    /* 캐릭터 설명박스 문단 */
    .cd p{
        font-size: 4vw;
        padding: 3vw;
    }

    /* 설명박스 문단 첫글자 */
    .cd p:first-child::first-letter{
        font-size: 8vw;
    }

    /* 하단영역 */
    /* 브랜드 바로가기 */
    .brand{
        bottom: 10px;
        top: auto;
    }

    /* 하단링크 일부 숨기기 - li 1번부터 4번까지 */
    .blink li:nth-child(-n+3){
        display: none;
    }

}  /* 780px 사이즈 이하 미디어쿼리 끝 */