@charset "utf-8";
/* 보그 메인 미디어 쿼리 - media.css */

/*/////////////////// 1024px 이하 ///////////////////*/
@media only screen and (max-width:1024px) {

    /* 컨텐츠 박스 타이틀 h2요소 */
    .cbx h2 {
        font-size: 3vw;
        /* 보이는 화면의 가로의 3% */
        padding: 5vw;
        /* 
            보이는 화면기준 뷰포트 단위사용! vw  
            : 보이는 화면의 가로! -> vw
              왜 패딩도 뷰포트로 줬냐면
              폰트사이즈가 줄어들면서 같이 비율이 안유지되니 이미지영역을 위로 덮고해서
              똑같은 위치 비율을 유지하려고 씀
        */
    }
}

/*/////////////////// 1024px 이하 ///////////////////*/




/*/////////////////// 500px 이하 ///////////////////*/
@media only screen and (max-width:500px) {

    /* 1. 상단영역 고정 */
    #top {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        /* 보이는 화면의 가로 100% */

        overflow-y: scroll;
        z-index: 9999;
    }

    /* #top에 높이값 100vh 적용 클래스 (햄버거 메뉴 클릭시) 여기서 미리 클래스 생성(html 안함) -> common.js 켜줌 */
    #top.hv {
        height: 100vh;
        /* 보이는 화면의 높이 100% */
    }


    /* 2. 상단메뉴, GNB 메뉴 숨기기 */
    .tmenu,
    .gnb {
        display: none;
    }

    /* 3. 로고박스 + 로고이미지 */
    .logo {
        padding: 10px;
    }

    .logo img {
        width: 130px;
    }

    /* 4. 상단영역 - 최소높이 없앰 */
    .top {
        position: relative;
        /********** 모바일 햄버거 메뉴 버튼의 부모자격! *********/
        min-height: auto;
        /* 
            없앰이 auto : 최소설정(내용 만큼들어나) 
            0은 최소설정(내용만큼 늘어나) (의미가 없다)
            auto는 초기설정 하는것(기본설정) 아무값도 안준상태
        */
        height: 55px;
        /* 정확하게 밀려고 55px줌 */

        background-color: #fff;
        /* 상단메뉴 배경흰색! */
    }

    /* 5. 모바일 전용버튼 보이기 */
    .mobtn {
        display: block;
        /* 
            앱솔루트, fixed, span태그, 인라인태그도 블록으로 설정하면 보인다. 
        */
    }

    /* 6. 컨텐츠박스 상단 밀기(상단메뉴에 덮이므로) */
    .cont {
        margin-top: 55px;
        /* 상단메뉴 높이값 만큼 밀었음 : 마진이니까 위쪽으로 바깥으로 밀림 */
    }

    /* 7. 컨텐츠박스 3번째 안보이게 처리 */
    /*    방법 : "flex : 1" 이었던걸 "0"으로 바꿔준다. (그러면 3개가 있던게 맨마지막 0을 주니까 나머지 2개가 알아서 화면의 반반 차지함) */
    .pt2 .cbx:last-child {
        flex: 0;
    }

    /* 8. 비율박스 비율변경 */
    .pt1.rbx::before {
        padding-top: 150%;
    }

    .pt2.rbx::before {
        padding-top: 75%;
    }

    /* 
        padding-top: 75%; 거나 150%가 어떻게 나온 수치냐면?

        해당 수치는 기본설정이 cover 중간에 맞춰서 채우기인데
        %로 비율을 늘이다 보면은 다 보이는 크기가 나타남(위아래만 자르다가)
        다 보이는 그 한계를 찾았음 
        어떤 수치를 넘으면 양쪽을 자르기 시작

        ▶ 이미지가 모가지가 잘라서 보이니, 그래서 이미지를 키우는건데
           계속 키우다가, 갑자기 이미지가 확 커지는 그 단계가 있다. 
           그 직전을 잡아서 수치 따서 작성한거임
    */


    /* 9. 컨텐츠 배경이미지 모바일용 변경 (메인+서브페이지) */
    /* 메인 1번 컨텐츠 */
    .bg1 {
        background-image: url(../images/cont1b.jpg); 
    }

    /* 메인 3번 컨텐츠 */
    .bg5 {
        background-image: url(../images/cont3b.jpg);
    }

    /* 메인 5번 컨텐츠 */
    .bg9 {
        background-image: url(../images/cont5b.jpg);
    }

    /* 서브페이지 모바일용 이미지 변경 */
    /* fashion 서브페이지 */
    .fashion .bg1-1 {
        background-image: url(../images/fashion/cont1-1b.jpg); /* 1a/2a/3a 였던사항을 ctrl+h 로 드래그 해서 1b/2b/3b로 모두바꿈(모바일이미지가 b라서) */
    }

    .fashion .bg1-2 {
        background-image: url(../images/fashion/cont1-2b.jpg);
    }

    .fashion .bg1-3 {
        background-image: url(../images/fashion/cont1-3b.jpg);
    }

    .fashion .bg2-1 {
        background-image: url(../images/fashion/cont2-1b.jpg);
    }

    .fashion .bg2-2 {
        background-image: url(../images/fashion/cont2-2b.jpg);
    }

    .fashion .bg2-3 {
        background-image: url(../images/fashion/cont2-3b.jpg);
    }

    /* beauty 서브페이지 */
    .beauty .bg1-1 {
        background-image: url(../images/beauty/cont1-1b.jpg);
    }

    .beauty .bg1-2 {
        background-image: url(../images/beauty/cont1-2b.jpg);
    }

    .beauty .bg1-3 {
        background-image: url(../images/beauty/cont1-3b.jpg);
    }

    .beauty .bg2-1 {
        background-image: url(../images/beauty/cont2-1b.jpg);
    }

    .beauty .bg2-2 {
        background-image: url(../images/beauty/cont2-2b.jpg);
    }

    .beauty .bg2-3 {
        background-image: url(../images/beauty/cont2-3b.jpg);
    }

    /* living 서브페이지 */
    .living .bg1-1 {
        background-image: url(../images/living/cont1-1b.jpg);
    }

    .living .bg1-2 {
        background-image: url(../images/living/cont1-2b.jpg);
    }

    .living .bg1-3 {
        background-image: url(../images/living/cont1-3b.jpg);
    }

    .living .bg2-1 {
        background-image: url(../images/living/cont2-1b.jpg);
    }

    .living .bg2-2 {
        background-image: url(../images/living/cont2-2b.jpg);
    }

    .living .bg2-3 {
        background-image: url(../images/living/cont2-3b.jpg);
    }

    /* people 서브페이지 */
    .people .bg1-1 {
        background-image: url(../images/people/cont1-1b.jpg);
    }

    .people .bg1-2 {
        background-image: url(../images/people/cont1-2b.jpg);
    }

    .people .bg1-3 {
        background-image: url(../images/people/cont1-3b.jpg);
    }

    .people .bg2-1 {
        background-image: url(../images/people/cont2-1b.jpg);
    }

    .people .bg2-2 {
        background-image: url(../images/people/cont2-2b.jpg);
    }

    .people .bg2-3 {
        background-image: url(../images/people/cont2-3b.jpg);
    }

    /* video 서브페이지 */
    .video .bg1-1 {
        background-image: url(../images/video/cont1-1b.jpg);
    }

    .video .bg1-2 {
        background-image: url(../images/video/cont1-2b.jpg);
    }

    .video .bg1-3 {
        background-image: url(../images/video/cont1-3b.jpg);
    }

    .video .bg2-1 {
        background-image: url(../images/video/cont2-1b.jpg);
    }

    .video .bg2-2 {
        background-image: url(../images/video/cont2-2b.jpg);
    }

    .video .bg2-3 {
        background-image: url(../images/video/cont2-3b.jpg);
    }

    /* runway 서브페이지 */
    .runway .bg1-1 {
        background-image: url(../images/runway/cont1-1b.jpg);
    }

    .runway .bg1-2 {
        background-image: url(../images/runway/cont1-2b.jpg);
    }

    .runway .bg1-3 {
        background-image: url(../images/runway/cont1-3b.jpg);
    }

    .runway .bg2-1 {
        background-image: url(../images/runway/cont2-1b.jpg);
    }

    .runway .bg2-2 {
        background-image: url(../images/runway/cont2-2b.jpg);
    }

    .runway .bg2-3 {
        background-image: url(../images/runway/cont2-3b.jpg);
    }

    /* shopping 서브페이지 */
    .shopping .bg1-1 {
        background-image: url(../images/shopping/cont1-1b.jpg);
    }

    .shopping .bg1-2 {
        background-image: url(../images/shopping/cont1-2b.jpg);
    }

    .shopping .bg1-3 {
        background-image: url(../images/shopping/cont1-3b.jpg);
    }

    .shopping .bg2-1 {
        background-image: url(../images/shopping/cont2-1b.jpg);
    }

    .shopping .bg2-2 {
        background-image: url(../images/shopping/cont2-2b.jpg);
    }

    .shopping .bg2-3 {
        background-image: url(../images/shopping/cont2-3b.jpg);
    }






    /* 10. 컨텐츠 타이틀 변경 */
    .cbx h2 {
        font-size: 5vw;
        padding: 5vw;
    }

    /* 11. 하단 박스 */
    .info {
        min-height: auto;
        padding: 40px;
    }

    /* 12. 하단 로고 */
    .blogo img {
        width: 200px;
        /* 보이는 화면의 가로 50%유지하고 싶으면 50vw */
    }

    /* 13. 위로 이동버튼 */
    .tbtn {
        right: 15px;
        bottom: 100px;
    }

    /* 14. 컨텐츠박스 마우스 오버시 가상요소 보더 */
    /*     모바일에서는 마우스 오버가 탭(포커스) 상태임  */
    .cbx:hover::after {
        border-width: 10px;
        /* 보더 두께만 변경 (초기에 설정한 값에서 달라지는게 두께만 달라지면 되니까 두께만 설정해준거임) */
    }

    /* 15. 서브페이지 서브 타이틀 */
    .stit{
        font-size: 9vw;
        padding: 4vh 0 2vh;
    }

    /* 16. 서브페이지 lnb 메뉴 */
    .lnb {
        padding: 1vh 0 4vh;
    }
    .lnb a{
        font-size: 4vw;
    }

    /* 17. 상단이동 탑버튼 오버시 원상으로 복귀 */
    /*     모바일은 오버시 빨간색 색상이 필요없으므로, 필요시 기존 셋팅을 원래 셋팅으로 덮었는 방법밖에 없음! 
           그래서 똑같이 호버시 하고 해야하는 색상으로 덮어써준다.
    */
    .tbtn:hover {
        background-color: #333;
    }

}





/*/////////////////// 500px 이하 ///////////////////*/