@charset "utf-8";

@media screen and (max-width: 1200px){
    #header{
        padding: 14px 20px;
    }
}

@media screen and (max-height: 800px){
    .mv .flex .box .text.en-text{
        font-size: 14px;
    }
}

@media screen and (max-height: 650px){
    .mv .flex .box .text.en-text{
        font-size: 13px;
    }
}


@media screen and (max-width: 1100px) and (min-height: 800px){
    .mv .flex .box{
        width: 380px;
        height: 380px;
    }
}

@media screen and (max-width: 991px){
    body{
        padding-top: 59px;
    }
    .wrap{
        padding: 0 25px;
    }

    /* HEADER */
    #header{
        padding: 15px 20px;
        transition: .4s;
    }
    #header .header-menu,
    #header .header-r .contact-btn,
    #header .header-r .lang-select{
        display: none;
    }
    #header .header-logo img{
        width: 74px;
    }
    .nav-toggle{
        position: relative;
        display: block;
        width: 30px;
        height: 17px;
        z-index: 1;
    }
    .nav-toggle span{
        position: absolute;
        background-color: #0056AA;
        height: 3px;
        transition: .4s;
        right: 0;
    }
    .nav-toggle span:nth-of-type(1){
        top: 0;
        width: 100%;
        animation: menu-trigger 4s infinite;
    }
    .nav-toggle span:nth-of-type(2){
        top: 7px;
        width: 73%;
        animation: menu-trigger 4s infinite .1s;
    }
    .nav-toggle span:nth-of-type(3){
        top: 14px;
        width: 40%;
        animation: menu-trigger 4s infinite .2s;
    }
    .open .nav-toggle span{
        width: 100% !important;
        animation: initial;
        background-color: #fff;
    }
    .open .nav-toggle span:nth-of-type(1){
        transform: translateY(7px) rotate(45deg);
    }
    .open .nav-toggle span:nth-of-type(2){
        opacity: 0;
    }
    .open .nav-toggle span:nth-of-type(3){
        transform: translateY(-7px) rotate(-45deg);
    }
    @keyframes menu-trigger {
        0% {
            -webkit-transform-origin: top left;
            transform-origin: top left;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
        }
        10% {
            -webkit-transform-origin: top left;
            transform-origin: top left;
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
        }
        85% {
            -webkit-transform-origin: top right;
            transform-origin: top right;
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
        }
        95% {
            -webkit-transform-origin: top right;
            transform-origin: top right;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
        }
        100% {
            -webkit-transform-origin: top left;
            transform-origin: top left;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
        }
    }
    #header.open .lang-select ul li a.current{
        color: #fff;
    }
    #header .header-logo img,
    #header .lang-select .icon-img img{
        transition: .4s;
    }
    #header.open .header-logo img,
    #header.open .lang-select .icon-img img {
        -webkit-filter: brightness(0) grayscale(100%) invert(1);
        -moz-filter: brightness(0) grayscale(100%) invert(1);
        -o-filter: brightness(0) grayscale(100%) invert(1);
        -ms-filter: brightness(0) grayscale(100%) invert(1);
        filter: brightness(0) grayscale(100%) invert(1);
    }
    #header .header-logo,
    #header .lang-select{
        position: relative;
        z-index: 1;
    }
    #header.open .lang-select ul li.wpml-ls-current-language a{
        color: #fff;
    }


    /* DRAWER */
    #drawer{
        display: block;
        transition: .4s;
        transform: translateX(100%);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100lvh;
        background-color: rgba(0,0,0,.8);
        text-align: center;
        overflow-y: scroll;
        padding: 120px 20px 40px;
    }
    .open #drawer{
        transform: translateX(0);
    }
    #drawer nav ul li a{
        color: #fff;
        font-size: 20px;
        font-weight: bold;
    }
    #drawer nav ul li:not(:last-child){
        margin-bottom: 30px;
    }
    #drawer .contact-btn{
        margin-top: 60px;
    }
    #drawer .contact-btn a{
        margin: 0 auto;
    }
    #drawer .lang-select .icon-img img{
        bottom: 2px;
        position: relative;
    }
    #drawer .lang-select ul li{
        line-height: 1;
    }
    #drawer .lang-select ul li a{
        display: block;
    }
    #drawer .lang-select{
        margin-right: 0;
        margin-top: 30px;
        justify-content: center;
    }


    /* FOOTER */
    #footer .footer-top{
        padding: 35px 0;
    }


    /* TOP */
    .mv{
        height: calc(100vh - 59px);
        display: block;
        padding: 30px;
        overflow: hidden;
    }
    .mv .mv-bg .sp-video{
        display: block;
    }
    .mv .mv-bg .pc-video{
        display: none;
    }
    .mv .mv-bg img.ps-ab{
        display: none;
    }
    .mv .mv-content{
        height: 100%;
    }
    .mv .flex .box{
        width: 100%;
        height: calc(50% - 8px);
    }
    .mv .flex .box.n1{
        margin-right: 0;
        margin-bottom: 16px;
    }
    .mv .flex{
        display: block;
        height: calc(100% - 64px);
    }
    .mv .flex .box.n1 .item .logo-img,
    .mv .flex .box.n2 .item .logo-img{
        width: 100%;
    }
    .mv .flex .box.n1 .item .logo-img img{
        width: 230px;
    }
    .mv .flex .box.n2 .item .logo-img img{
        width: 166px;
    }
    .mv .flex .box .item .logo-img{
        margin-bottom: 27px;
    }
    .mv .flex .box .arrow-img{
        bottom: 20px;
    }
    .mv .mv-news-box .text.top{
        font-size: 12px;
    }
    .mv .mv-news-box .text:not(.top){
        font-size: 12px;
        max-width: 500px;
    }
    .mv .mv-news-box{
        height: 44px;
    }
    .mv .mv-news-box a{
        padding: 0 20px;
        height: 100%;
    }
    .home-sec01{
        padding: 60px 0;
        text-align: left;
    }
    .home-sec01 .text.top{
        font-size: 28px;
        margin-bottom: 30px;
    }
    .home-sec02 .tab-list ul li.n1 img{
        width: 124px;
    }
    .home-sec02 .tab-list ul li.n2 img{
        width: 94px;
    }
    .home-sec02 .tab-content .text-box .text.top{
        font-size: 28px;
    }
    .home-sec02 .tab-content .text-box .text:not(.top) br{
        display: none;
    }
    .home-sec02 .tab-content .text-box .text:not(.top) br.s-up{
        display: block;
    }
    .home-sec02 .tab-content .text-box{
        text-align: left;
    }
    .home-sec02 .tab-list.fixed ul li.n1 img{
        width: 81px;
    }
    .home-sec02 .tab-list.fixed ul li.n2 img{
        width: 57px;
    }
    .home-sec02 .tab-list.fixed ul li{
        height: 44px;
    }
    .home-sec02 .tab-content .box:not(:last-child){
        margin-bottom: 60px;
    }
    .home-sec03{
        overflow: hidden;
    }
    


    /* PAGE */
    .page-mv{
        height: 190px;
    }
}


@media screen and (max-width: 767px){
    .contact-btn a{
        font-size: 14px;
    }
    .icon-arrow::after{
        width: 14px;
        height: 14px;
    }

    /* HEADER */
    #header .lang-select {
        margin-right: 15px;
    }
    #header .lang-select ul li a{
        font-size: 13px;
    }
    #header .lang-select .icon-img img{
        width: 16px;
    }
    #header .lang-select .icon-img{
        margin-right: 10px;
    }
    #header .header-logo{
        margin-right: 0;
    }


    /* TOP */
    .mv .flex .box .arrow-img img{
        width: 20px;
    }
    .mv .flex .box .item .logo-img{
        margin-bottom: 17px;
    }
    .mv .mv-news-box .text.top{
        margin-right: 10px;
    }
    .mv .mv-news-box a{
        padding: 0 15px;
    }
    .mv .mv-news-box .text:not(.top){
        max-width: 63%;
    }
    .mv .mv-news-box a:hover .arrow-img,
    .mv .mv-news-box .arrow-img{
        right: 15px;
    }
    .home-sec01 .text.top{
        letter-spacing: 0;
        margin-bottom: 25px;
    }
    .home-sec01 .text:not(.top){
        letter-spacing: 0;
        line-height: 1.8;
    }
    .home-sec02 .tab-content .text-box .text.top{
        letter-spacing: 0;
        margin-bottom: 20px;
    }
    .home-sec02 .tab-content .img-box .img-box-item{
        width: 100%;
        margin-bottom: 30px;
    }
    .home-sec02 .tab-content .img-box .img-box-item:last-child{
        margin-bottom: 0;
    }
    .home-sec02 .tab-content{
        padding: 26px 0 48px;
    }
    .home-sec02 .tab-content.c-02 .box:first-child .text-box{
        margin-bottom: 110px;
    }
    .home-sec02 .tab-content.c-02 img.ps-ab{
        width: 200px;
    }
    .home-sec02 .tab-content.c-02 .img-box-item .caption{
        margin-bottom: 5px;
    }
    .home-sec02 .tab-content .img-box .img-box-item .caption{
        margin-top: 10px;
    }
    .home-sec03 .text.top{
        font-size: 24px;
        letter-spacing: 0;
    }
    .home-sec03{
        padding: 60px 0 120px;
    }
    .home-sec03 .img{
        width: 100%;
        text-align: center;
        padding-right: 0;
    }
    .home-sec03 .img img{
        width: 250px;
    }
    .home-sec03 .text-box{
        width: 100%;
    }
}

@media screen and (max-width: 500px){
    .mv .flex .box .text.en-text{
        font-size: 12px;
    }
}


@media screen and (max-width: 374px){
    .mv .flex .box .text{
        font-size: 12px;
        height: 43px;
    }
    .mv .flex .box.n1 .item .logo-img img{
        width: 180px;
    }
    .mv .flex .box.n2 .item .logo-img img{
        width: 136px;
    }
    .mv .flex .box .text.en-text{
        font-size: 11px;
    }
}

@media screen and (max-height: 580px){
    .mv{
        padding: 10px;
    }
    .mv .flex .box .text{
        text-align: left;
        width: 100%;
        justify-content: flex-start;
        padding-left: 35px;
    }
    .mv .flex .box .arrow-img{
        transform: translateX(0);
        left: auto;
        right: 25px;
    }
    .mv .flex .box.n1 .item .logo-img img{
        width: 160px;
    }
    .mv .flex .box.n2 .item .logo-img img{
        width: 128px;
    }
    .mv .flex .box.n1{
        margin-bottom: 10px;
    }
    .mv .mv-news-box{
        margin-top: 10px;
    }
    .mv .flex {
        height: calc(100% - 54px);
    }
    .mv .flex .box {
        height: calc(50% - 5px);
    }
    .mv .flex .box .item .logo-img{
        margin-bottom: 10px;
    }
}