@charset "utf-8";



/* Laptop small S */

@media all and (min-width:1024px) and (max-width:1440px){

    #gnb{

        width: auto;

        max-width: 1140px;

        padding: 0px 25px;

        box-sizing: content-box;

    }

    #gnb>ul>li{

        transition: 0.3s;

        margin-right: 12px;

        /* margin-right: var(--white_space_pc1); */

    }

}

/* Laptop E */



/* Tablet and Mobile S */

@media all and (max-width:1023px){

    html.on{

        overflow: hidden;

        height: 100vh;

    }

    #gnb{

        width: 100%;

        align-items: center;

    }

    #gnb>.logo

    {

        height: 100%;

    }

    

    #gnb>.logo, #gnb>.logo>a{

        padding-bottom: 0px;

    }

    .mt_on .logo-img-wrap .bk__img{

        display: block;

    }

    .mt_on .logo-img-wrap .wh__img{

        display: none;

    }





    @keyframes koUpDown {

        0%{

            top:152%;

        }

        45%{

            top:152%;

        }

        50%{

            top:52%;

        }

        90%{

            top:52%;

        }

        95%{

            top:152%;

        }

        100%{

            top:152%;

        }

    }

    @keyframes enUpDown {

        0%{

            top:52%;

        }

        40%{

            top:52%;

        }

        45%{

            top:152%;

        }

        95%{

            top:152%;

        }

        100%{

            top:52%;

        }

    }



    #gnb>ul{

        overflow: scroll;

        position: absolute;

        top: 0px;

        left: 0px;

        display: none;

        width: 100%;

        background: #fff;

    }

    #gnb>ul>li{

        margin-right: 0px;

    }

    #gnb>ul>li>a{

        display: flex;

        justify-content: space-between;

        border-bottom: 1px solid var(--gray_light);

        padding: 0px;

        margin: 0px 23px;

        color: #000;

    }

    #hd.on>#gnb>ul>li:nth-of-type(n)>a, #hd.mt_on>#gnb>ul>li:nth-of-type(n)>a{

        border-bottom: 1px solid var(--gray_light);

    }

    #hd.on>#gnb>ul>li:last-of-type>a, #hd.mt_on>#gnb>ul>li:last-of-type>a{

        border-bottom: 0px none;

    }

    

    #gnb>ul>li>a>img:first-of-type{

        display: none;

    }

    #gnb>ul>li>a>img:last-of-type{

        display: block;

    }

    #gnb>ul>li>a>img{

        margin-left: 0px;

    }



    #gnb>ul>li>a>img.on{

        animation : rotate_ani 0.4s 0s forwards ease;

    }

    #gnb>ul>li>a>img.off{

        animation : rotate_ani_off 0.4s 0s forwards ease;

    }



    #gnb>ul>li>.dep2{

        position: static;

        transform: translateX(0px);

        border: 0px none;

        padding: 0px;

        background: #fff;

    }

    #gnb>ul>li>.dep2>li{

        width: 100%;

    }

    #gnb>ul>li>.dep2>li>a{

        height: 55px;

        line-height: 55px;

        padding-left: calc(23px + 20px);

        background: var(--gray_shine);

    }

    #gnb>ul>li>ul>li>a:hover, #gnb>ul>li>ul>li>a:focus{

        background: #fff;

    }



    .gnb_btn_white{

        display: none;

    }



    .gnb_btn_open, .gnb_btn_close{

        display: flex;

        align-items: center;

        margin-right: -10px;

    }

    .gnb_btn_open>img{

        display: none;

        padding: 10px;

    }

    .gnb_btn_close>img{

        padding: 10px;

    }

    .gnb_btn_open>img.on{

        display: block;

    }



    .gnb_btn_close{

        display: none;

    }

    

    #gnb .lang{

        height: auto;

        padding-top: 0px;

        margin-top: var(--white_space_mt2);

        margin-bottom: var(--white_space_mt2);

    }

    #gnb .pc-lang

    {

        display: none;

    }

    #gnb .mobile-lang

    {

        display: block;

    }

    #gnb .lang>a{

        height: auto;

        background-image: none;

    }

    #gnb .lang>a>img{

        display: none !important;

    }

    #gnb .lang>ul{

        display: flex;

        position: static;

        top: 0px;

        transform: translate(0px);

        border: 0px none;

        margin-left: -15px;

        color: #000;

        background: transparent;

    }

    #gnb .lang>ul>li>a{

        width: auto;

        height: 1.2em;

        line-height: 1.2em;

        padding: 0px 15px;

        border-right: 1px solid var(--gray_light);

        color: var(--gray);

    }

    #gnb .lang>ul>li:last-of-type>a{

        border-right: 0px none;

    }

    #gnb .lang>ul>li>a.on{

        font-weight: 500;

        color: var(--blue_ip);

    }

    

}

/* Tablet and Mobile E */



/* Tablet S */

@media all and (min-width:768px) and (max-width:1023px){

    #hd{

        height: 70px;

    }

    #gnb{

        width: 100%;

        padding: 0px 25px;

    }

    #gnb>ul{

        top: 70px;

        left: 0px;

        height: calc(100vh - 70px);

        padding-top: 90px;

    }

    /* #gnb>ul>li{

        padding-left: 25px;

        padding-right: 25px;

    } */

    #gnb>ul>li>a{

        padding: 0px;

        margin: 0px 25px;

    }



    .gnb_btn_open>img{

        display: none;

        width: 47px;

        padding: 10px;

    }

    .gnb_btn_close>img{

        width: 47px;

        padding: 10px;

    }

}

/* Tablet E */



/* Mobile S */

@media all and (max-width:767px){

    /* hd S */

    #hd{

        height: 55px;

        padding: 0px 23px;

    }

    #gnb{

        width: 100%;

        align-items: center;

    }

    #gnb>.logo

    {

        width :80px;

    }

    #gnb>.logo, #gnb>.logo>a{

        padding: 0px;

    }

    #gnb>.logo>a{

        display: flex;

        justify-content: center;

        align-items: center;

    }

    #gnb>ul{

        top: 55px;

        height: calc(100vh - 55px);

        padding-top: 70px;



        /* display: none; */

    }

    /* #gnb>ul>li>a{

        display: flex;

        justify-content: space-between;

        margin: 0px 23px;

        color: #000;

    } */



    /* #gnb>ul>li>.dep2{

        position: static;

        transform: translateX(0px);

        border: 0px none;

        padding: 0px;

        background: #fff;

    } */

    /* #gnb>ul>li>.dep2>li{

        width: 100%;

    }

    #gnb>ul>li>.dep2>li>a{

        height: 55px;

        line-height: 55px;

        padding-left: calc(23px + 20px);

        background: var(--bg_gray_02);

    }

    #gnb>ul>li>ul>li>a:hover, #gnb>ul>li>ul>li>a:focus{

        background: #fff;

    } */



    .gnb_btn_open>img{

        display: none;

        width: 38px;

        padding: 10px;

    }

    .gnb_btn_close>img{

        width: 39px;

        padding: 10px;

    }



    /* hd S */



    /* ft S */

    #ft{

        height: auto;

    }

    #ft .container{

        display: block;

        padding: 24px;

        padding-bottom: 48px;

        height: auto;

    }

    #ft .container .footer_logo{

        height: auto;

        width: auto;



    }

    #ft .container .footer_logo img{

        transform: translateY(0);

    }

    #ft .container .footer_address{

        width: auto;

        height: auto;



        font-size: var(--font_size_mt_body1);

        letter-spacing: var(--letter_spacing_mt_body1);

        line-height: var(--line_height_mt_body1);

    }

    #ft .container .footer_address address:nth-child(1){

        margin-top: 24px;

        font-size: 12px;

        line-height: 22px;

    }

    #ft .container .footer_address address:nth-child(2){

        margin-top: 24px;

        font-size: 12px;

        line-height: 22px;

    }

    #ft .container .footer_sns{

        padding-top: 35px;

        text-align: center;

    }

    #ft .container .footer_sns p{

        text-align: left;

        font-size: var(--font_size_mt_body1);

        line-height: var(--line_height_mt_body1);

        letter-spacing: var(--letter_spacing_mt_body1);

    }

    #ft .container .footer_sns ul{

        justify-content: start;

        margin-top: 10px;

    }

    

    /* ft E */

}

/* Mobile E */