@charset "utf-8";

.overlay { z-index: 2;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
}

/*헤더*/
header { z-index: 2;
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    transition: 0.5s ease-out;
}
/*JS: 배경 하얗게*/
.white  { background-color: white; }
header h1 {
    width: 150px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
}
header h1 img {
    width: 130px;
    height: 100%;
    object-fit: contain;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*모바일_아디다스 버튼*/
.mobile_adidas { z-index: 1;
    width: 80px;
    height: 80px;
    position: fixed;
    top: 0;
    right: 0;
    display: block;
}
.mobile_adidas span { 
    background-color: #adadad;
    width: 35px;
    height: 4px;
    display: block;
    margin: 9px auto;
    transition: all 0.3s ease-in-out;
}
.mobile_adidas.active span {
    background-color: #adadad;
}
.mobile_adidas.active span:nth-child(1) {
    transform: translateY(12.5px) rotate(45deg);
}
.mobile_adidas.active span:nth-child(2) {
    opacity: 0;
}
.mobile_adidas.active span:nth-child(3) {
    transform: translateY(-12.5px) rotate(-45deg);
}
/*PC사용:아디다스 버튼*/
.adidas { z-index: 1;
    width: 150px;
    height: 150px;
    position: fixed;
    top: 0;
    right: 0;
    display: none;
}
.adidas span { 
    background-color: #adadad;
    width: 50px;
    height: 5px;
    display: block;
    margin: 10px auto;
    transition: all 0.3s ease-in-out;
}
.adidas.active span {
    background-color: #adadad;
}
.adidas.active span:nth-child(1) {
    transform: translateY(14.5px) rotate(45deg);
}
.adidas.active span:nth-child(2) {
    opacity: 0;
}
.adidas.active span:nth-child(3) {
    transform: translateY(-14.5px) rotate(-45deg);
}

/*모바일_네비게이션*/
.mobile_nav {
    display: none;
}
.mobile_nav li a {
    display: flex;
    justify-content: center;
    padding: 20px;
/*    transition: 0.5s ease-out;*/ /*왜있지?*/
}
/*모바일_서브*/
.mobile_sub {
    display: none;
}
.mobile_sub li a {
    background-color: #ececec;
/*    transition: 0.8s ease-out;*/
}
/*모바일_네비게이션: 마우스오버*/
.mobile_nav li:hover {
    color: #fb0123;
}
.mobile_nav li:hover .mobile_sub li {
    color: #444444;
}
.mobile_sub li a:hover {
    background-color: #fb0123;
    color: white;
/*    transition: 0s;*/
}
.mobile_nav li a.focus {
    color: #fb0123;
}
.mobile_sub li a.focus {
    background-color: #fb0123;
    color: white;
}

/*PC사용:gnb*/
.gnb { display: none; }

/*PC 초기화*/
.gnb li a { display: none;}

/*PC:111111*/
@media screen and (min-width: 1024px) {

/*모바일 초기화*/
    .movile_nav { display: none; }
    .mobile_nav li a { display: none; }
    .mobile_adidas { display: none; }
    .adidas { display: block; }

/*헤더*/
    header {
        background-color: transparent;
        height: 150px;
        display: flex;
        justify-content: space-between;
    }
    header h1 {
        width: 230px;
        padding-left: 10px;
    }
    header h1 img {
        width: 150px;
    }

/*네비게이션*/
    .gnb {
        width: 0;
        height: 150px;
        margin-right: 150px;
        
        overflow: hidden;
        white-space: nowrap;
        display: none;
    }
    .gnb li {
        width: 100%;
    }
    .gnb li a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    /*JS: ON*/
    .gnb.on { display: flex; }
    /*JS: 슬라이드레프트*/
    .gnb.slideLeft { transition: all 0.3s ease-out; width: 70%;}
/*서브 네비게이션*/
    .lnb {
        width: 100%;
/*        height: 400px;*/
        height: 270px;

        display: none;
        position: absolute;
        top: 150px;
        left: 0;
    }
    .lnb li a {
        align-items: flex-start;
        position: relative;
        overflow: hidden;
        outline: none;
    }
    .lnb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        left: 0;
        top: 0;
/*        left: 50%;*/
/*        top: 50%;*/
/*        transform: translate( -50%, -50%);*/
/*        filter: grayscale();*/
    }

    .lnb span {
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
        padding: 20px;
        text-align: center;
        position: relative;
        top: 0;
        left: 0;
        color: #eeeeee;
        margin: 0 auto;
    }
    /*JS: 마우스오버 ON*/
    .lnb.hoverOn {
        display: flex;
    }
    /*삼각 셀렉터*/
    .triangle { z-index: 1;
        width: 0;
        height: 0;
        border-right: 0px solid transparent;
        border-left: 0px solid transparent;
        border-top: 0px solid white;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        transition: 0.1s ease-out;
    }

/*네비게이션: 마우스오버*/
    .gnb li:hover {
        color: #fb0123;
    }

    .lnb li a:hover .triangle {
        opacity: 1;
        border-right: 15px solid transparent;
        border-left: 15px solid transparent;
        border-top: 15px solid white;
    }
    .lnb li a:focus .triangle {
        opacity: 1;
        border-right: 15px solid transparent;
        border-left: 15px solid transparent;
        border-top: 15px solid white;
    }

/*gnb 이미지 삽입*/
    .lnb li {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
/*        filter: grayscale(1);*/
    }
    .lnb li:hover {
/*        filter: none;*/
    }
    .lnb li.gray {
/*        filter: none;*/
    }
    /*회사소개*/
    .lnb.sub1 li:nth-child(1) { background-image: url(../img/nav1-1.png);}
    .lnb.sub1 li:nth-child(2) { background-image: url(../img/nav1-2.jpg);}
    .lnb.sub1 li:nth-child(3) { background-image: url(../img/nav1-3.jpg);}
    .lnb.sub1 li:nth-child(4) {background-image: url(../img/nav1-4.jpg);}
    /*사업영역*/
    .lnb.sub2 li:nth-child(1) { background-image: url(../img/nav2-1.jpg);}
    .lnb.sub2 li:nth-child(2) { background-image: url(../img/nav2-2.jpg);}
    .lnb.sub2 li:nth-child(3) { background-image: url(../img/nav2-3.jpg);}
    /*인재채용*/
    .lnb.sub3 li:nth-child(1) { background-image: url(../img/nav3-1.png);}
    .lnb.sub3 li:nth-child(2) { background-image: url(../img/nav3-2.jpg);}
    .lnb.sub3 li:nth-child(3) { background-image: url(../img/nav3-3.jpg);}
    .lnb.sub3 li:nth-child(4) { background-image: url(../img/nav3-4.jpg);}
    /*서비스*/
    .lnb.sub4 li:nth-child(1) { background-image: url(../img/nav4-1.jpg);}
    .lnb.sub4 li:nth-child(2) { background-image: url(../img/nav4-2.jpg);}
    .lnb.sub4 li:nth-child(3) { background-image: url(../img/nav4-3.jpg);}
}/*END:미디어쿼리(PC)*/

@media screen and (min-width: 1500px) {
    .lnb {
        height: 400px;
    }
}