/* 반응형 웹 css*/
/* 
*** 변경된 디자인 *** 
1. 헤더 , 네비, 아이콘
2. 1행 bnr 크기, 폰트, 여백 조절
3. 2행 product 
4. 

*/

/* --------------------------------------------- /*태블릿*/
@media (max-width:1399px) {
    /*태블릿*/

    /* ---------------------------------------- 헤더 시작 */
    #wrap header {}

    #wrap header .top_wrap {
        /* 헤더 큰 묶음 */
        /* background-color: yellow; */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 40px;
        height: 100px;
    }

    /* 로고 */
    #wrap header .top_wrap h1 {}

    #wrap header .top_wrap h1 a {}

    #wrap header .top_wrap h1 a img {
        width: 120px;
    }

    /* nav */
    #wrap header .top_wrap nav {
        display: flex;
        flex-grow: 1;
        justify-content: space-between;
    }

    #wrap header .top_wrap nav .gnb_wrap {
        /* gnb 큰묶음 */
        /* margin: 0 auto; */
        /* background-color: brown; */
        margin: 0 50px;
    }

    #wrap header .top_wrap nav .gnb_wrap .gnb li {}

    /* right_menu (검색창) */
    #wrap header .top_wrap nav .right_wrap .search {
        position: relative;
        padding-top: 40px;
        /* margin-right: 60px; */
    }

    #wrap header .top_wrap nav .right_wrap .search input {
        display: none;
    }

    /* right_wrap (언어변경) */
    #wrap header .top_wrap nav .right_wrap .lang_wrap {
        /* background-color: blueviolet; */
        margin: 0 auto;
        margin-top: 40px;

    }

    #wrap header .top_wrap nav .right_wrap .lang_wrap #lang_btn {
        background-color: transparent;
        width: 74px;
        height: 30px;
        border: 1px solid #fff;
        border-radius: 10px;
        color: #fff;

    }

    #wrap header .top_wrap nav .right_wrap .lang_wrap #lang_btn option {
        text-align: center;
    }

    #wrap header .top_wrap nav .right_wrap .lang_wrap #lang_btn option p {
        font-size: 0.875em;
        font-weight: 900;
        color: #fff;
    }

    /*  ------------------------------  lnb 디자인 시작*/
    #wrap header .top_wrap nav .lnb_wrap {
        display: none;
        position: absolute;
        top: 100px;
        /* header 아래 위치 */
        left: 0;
        width: 100%;
        /* background: #fff; */
        /* background-color: palegreen; */
        padding: 0 180px;
        /*변경*/
        z-index: 9999;
    }

    #wrap header .top_wrap nav .lnb_wrap .lnb {
        /* 공톻 선택자 */
        /* background-color: yellow; */
        /* padding: 40px 0; */
        /* display: flex; */
        /* flex-flow: column nowrap; */
        /* text-align: center; */
    }

    #wrap header .top_wrap nav .lnb_wrap .lnb:hover {
        background-color: rgba(229, 229, 229, 0.4);
    }

    #wrap header .top_wrap nav .lnb_wrap .lnb li a span {
        font-weight: 500;
    }

    #wrap header .top_wrap nav .lnb_wrap .lnb li a {
        font-size: 0.875em;
    }

    /* ---------------------------------------- 헤더 끝 */

    /*===================== 1행 bnr 시작 */
    main section .wrap #bnr .bnr .swiper-slide .bnr_wrap {
        padding: 255px 95px;
        display: flex;
        flex-flow: row nowrap;
        margin: 0 auto;
        justify-content: space-between;
    }

    /*===================== 1행 bnr 끝 */

    /* 2행 product 시작 */
    main section .product_wrap {
        width: 100%;
        /* height: 540px; */
        height: 600px;
        padding: 40px 60px;
    }

    main section .product_wrap .contents .product_img a {
        width: 400px;
        height: 300px;
        border-radius: 20px;
        /* 기본: 라운드 사각형 */
        overflow: hidden;
        position: relative;
        transition: all 0.4s ease;
        text-align: center;
    }

    /* 2행 product 끝 */

    /* 3행. 유트브 영상 시작*/
    main section .promotion_wrap {
        /* 3행 큰묶음 */
        background-color: #f5f5f5;
        padding: 160px 40px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;

    }

    main section .promotion_wrap .contents_wrap {
        /* 3행 내용, a태그 묶음 */
        margin-right: 100px;
    }

    main section .promotion_wrap .contents_wrap .contents {
        /* 타이틀 묶음 */
        /* margin: left; */

    }

    main section .promotion_wrap .contents_wrap .contents h1 {
        margin-bottom: 20px;
        font-size: 2em;
        font-weight: 500;
    }

    main section .promotion_wrap .contents_wrap .contents p {
        margin-bottom: 10px;
        font-size: 1.125em;

    }

    main section .promotion_wrap .contents_wrap .contents .promotion_btn {
        margin-top: 60px;
        width: 200px;
        height: 48px;
        background-color: #000;
        border-radius: 30px;
    }


    main section .promotion_wrap .promotion_video a iframe {
        /* 유투브 영상 */
        /* width: 820px; height: 440px; */
        width: 600px;
        height: 400px;
        border-radius: 10px;
    }

    /* 3행. 유트브 영상  끝*/


    /* 4행 ir 시작 */
    /* ir 그리드 형식 */
    main section .ir_wrap {
        /* 4행 큰묶음 */
        /* background-color: yellow; */

    }

    main section .ir_wrap .ir_gird_wrap {
        /* background-color: rebeccapurple; */
        display: grid;
        grid-template-columns: repeat(3, 422px);
        /*grid-auto-rows: 360px;  기본 높이는 가로형 기준 */
        gap: 20px;
        margin-top: 70px;
        padding-bottom: 60px;
        /* justify-content: center; */
        /* 가운데 정렬 */
    }

    /* 그리드 공통 효과 */
    /* 4행 ir 영역 이미지 hover 효과 */

    .ir_gird_wrap img {
        transition: transform 0.8s ease;
        /* 부드럽게 */
    }

    .ir_gird_wrap a:hover img {
        transform: scale(1.02);
        /* 살짝 확대 */
    }

    .ir_gird_wrap ul li a {
        display: block;
        overflow: hidden;
        /* 틀 유지 + 넘치는 부분 잘라내기 */
        border-radius: 20px;
    }

    .ir_gird_wrap ul li a img {
        transition: transform 0.5s ease;
        /* 부드럽게 */
        display: block;
        width: 100%;
    }

    /* -------------------------------------------------------- 1번째 그리드 */
    main section .ir_wrap .ir_gird_wrap .item1 {
        /* background-color: red; */
        /* position: relative; */
    }

    main section .ir_wrap .ir_gird_wrap .item1 ul {}

    main section .ir_wrap .ir_gird_wrap .item1 ul li {}

    main section .ir_wrap .ir_gird_wrap .item1 ul li a {}

    main section .ir_wrap .ir_gird_wrap .item1 ul li a img {}

    main section .ir_wrap .ir_gird_wrap .item1 ul li a p {
        /*온라인공장투어*/
        position: absolute;
        left: 50px;
        top: 40px;
        /* bottom: 300px; */
        color: #fff;
    }

    /* --------------------------------------------------------------- 2번째 그리드*/
    main section .ir_wrap .ir_gird_wrap .item2 ul li a p {
        position: absolute;
        left: 50px;
        top: 40px;
        /* bottom: 300px; */
        color: #fff;
    }

    /* --------------------------------------------------------------- 3번째 그리드 */
    main section .ir_wrap .ir_gird_wrap .item3 {
        /* background-color: pink; */
        position: relative;
        grid-row: span 2;
        /* 세로로 두 줄 사용 */
        /* height: 740px;     세로형 높이 고정 */
    }

    main section .ir_wrap .ir_gird_wrap .item3 ul li a img {
        border-radius: 20px;
        height: 540px;
    }

    /* 4행 ir 끝 */

    /* 5행  지속가능성 시작 */
    main section .management_wrap {
        /* background-color: pink; */
        width: 100%;
        height: 100%;
        margin: 0 auto;
        padding: 88px 50px;
        /*값 수정*/
    }

    .management_container {
        display: flex;
        height: 680px;
        /*720-600으로 수정 */
        gap: 10px;
    }

    .management_contain {
        flex: 2;
        position: relative;
        overflow: hidden;
        border-radius: 16px;
        transition: flex 0.6s ease;
        cursor: pointer;
    }

    /* 타이틀 */
    .management_bg em {
        color: #fff;
        /* color: red; */
        /* font-size: 1.25rem; */
        font-size: 1.25em;
        font-weight: 500;
        margin-bottom: 12px;
    }

    /* 설명 텍스트 (기본 숨김) */
    .management_bg span {
        color: #fff;
        /* font-size: 1rem; */
        font-weight: 300;
        line-height: 1.6;
        opacity: 0;
        transform: translateY(10px);
        transition: 0.4s ease;
    }

    /* 기본 active (첫 화면) */
    .management_contain.active {
        /* 변경 */

    }

    /* active일 때 텍스트 노출 */
    .management_contain.active em {
        font-size: 1.65em;
    }

    .management_contain.active span {
        color: #fff;
        opacity: 1;
        transform: translateY(0);
    }

    /* hover 시 효과 */
    .management_contain:hover {
        flex: 4;
    }

    .management_contain:hover span {
        opacity: 1;
        transform: translateY(0);
    }

    /* 5행  지속가능성 끝*/

    /* 6행 copy txt 시작 */
    main section .copy_txt {
        padding: 249px 200px;
    }

    /* 6행 copy txt 끝 */
}

/* --------------------------------------------- /*태블릿*/





@media screen and (max-width : 799px) {
    /* 모바일 */

}

/* 모바일 반응형 끝 */