@charset "utf-8";

@media screen and (min-width: 1279px) {
    /* contact */
    #sub_main{ background: #000; }
    #sub_main>section{ width: 1200px; margin: 0 auto; border: 1px solid #000; }
    #sub_main>section:nth-child(1)>div{ margin-top: 200px; display: flex; justify-content: space-between; }
    #sub_main>section:nth-child(1)>div>video{ width: 300px; margin-left: 50px; }
    #sub_main>section:nth-child(1)>div>div p{ color: #fff; text-align: center; line-height: 30px; }
    #sub_main>section:nth-child(1)>div>div p:first-child{ margin-top: 100px; }
    #sub_main>section:nth-child(1)>div>div p:nth-child(2){ margin: 30px auto; font-size: 22px; }
    #sub_main>section:nth-child(1)>div>div p:last-child{ margin-top: 30px; }
    #sub_main>section:nth-child(2){ padding-bottom: 150px; }
    #sub_main>section:nth-child(2) h2{ display: block; text-align: center; margin-top: 200px; color: #fff; }
    #sub_main>section:nth-child(2) p{ margin: 20px 0 50px 0; text-align: center; color: #fff; }
    #sub_main>section:nth-child(2) div:nth-of-type(1){ height: 500px; display: flex; justify-content: space-between; flex-wrap: wrap; }
    #sub_main>section:nth-child(2)>div:nth-of-type(2){ height: 500px; display: flex; justify-content: space-between; flex-wrap: wrap; }
    #sub_main>section:nth-child(2) button{ background: none; border: 0; }
    #sub_main>section:nth-child(2)>div:nth-of-type(1) button:nth-child(2) img{ width: 400px; }
    /* #sub_main>section:nth-child(2)>div:nth-of-type(2) button:nth-child(3) img{ width: 272px; } */
    #sub_main>section:nth-child(2) button img{ width: 300px; cursor: pointer; }
    .window{ 
        position:fixed; left:0; top:0; display: none;
        width:100%; height:100%;
        background: rgba(0,0,0,0.8); 
    }
    .window p:nth-of-type(1){
        position: fixed; left: 50%; top: 10%; width: 600px;
    }
    .arrow{ 
        position: fixed; left: 50%; width: 1000px; margin-top: 100px;
        margin-left: -500px;
    }
    .arrow button img{ width: 100px !important; }
    .window small{ display: none; }
    .window small{
        position: fixed; left: 50%; top: 60%; margin-left: -130px;
        text-align: center; color: #fff;
    }
    .window div:nth-of-type(3) small:nth-child(3){  
        position: fixed; left: 50%; top: 60%; margin-left: -145px;
        text-align: center; color: #fff;
    }
    .window p:nth-of-type(1) img{ height: 400px; margin-left: -590px; }
}
@media screen and (min-width: 501px) and (max-width: 1279px){
    /* contact */
    #sub_main{ background: #000; }
    #sub_main>section{ width: 1200px; margin: 0 auto; border: 1px solid #000; }
    #sub_main>section:nth-child(1)>div{ margin-top: 200px; display: flex; justify-content: space-between; }
    #sub_main>section:nth-child(1)>div>video{ width: 300px; margin-left: 50px; }
    #sub_main>section:nth-child(1)>div>div p{ color: #fff; text-align: center; line-height: 30px; }
    #sub_main>section:nth-child(1)>div>div p:first-child{ margin-top: 100px; }
    #sub_main>section:nth-child(1)>div>div p:nth-child(2){ margin: 30px auto; font-size: 22px; }
    #sub_main>section:nth-child(1)>div>div p:last-child{ margin-top: 30px; }
    #sub_main>section:nth-child(2){ padding-bottom: 150px; }
    #sub_main>section:nth-child(2) h2{ display: block; text-align: center; margin-top: 200px; color: #fff; }
    #sub_main>section:nth-child(2) p{ margin: 20px 0 50px 0; text-align: center; color: #fff; }
    #sub_main>section:nth-child(2) div:nth-of-type(1){ height: 500px; display: flex; justify-content: space-between; flex-wrap: wrap; }
    #sub_main>section:nth-child(2)>div:nth-of-type(2){ height: 500px; display: flex; justify-content: space-between; flex-wrap: wrap; }
    #sub_main>section:nth-child(2) button{ background: none; border: 0; }
    #sub_main>section:nth-child(2)>div:nth-of-type(1) button:nth-child(2) img{ width: 400px; }
    /* #sub_main>section:nth-child(2)>div:nth-of-type(2) button:nth-child(3) img{ width: 272px; } */
    #sub_main>section:nth-child(2) button img{ width: 300px; cursor: pointer; }
    .window{ 
        position:fixed; left:0; top:0; display: none;
        width:100%; height:100%;
        background: rgba(0,0,0,0.8); 
    }
    .window p:nth-of-type(1){
        position: fixed; left: 50%; top: 10%; width: 600px;
    }
    .arrow{ 
        position: fixed; left: 50%; width: 1000px; margin-top: 100px;
        margin-left: -500px;
    }
    .arrow button img{ width: 100px !important; }
    .window small{ display: none; }
    .window small{
        position: fixed; left: 50%; top: 60%; margin-left: -130px;
        text-align: center; color: #fff;
    }
    .window div:nth-of-type(3) small:nth-child(3){  
        position: fixed; left: 50%; top: 60%; margin-left: -145px;
        text-align: center; color: #fff;
    }
    .window p:nth-of-type(1) img{ height: 400px; margin-left: -590px; }
}
@media screen and (max-width: 500px){
    /* contact */
    #sub_main{ background: #000; }
    #sub_main>section{ width: 100%; margin: 0 auto; border: 1px solid #000; }
    #sub_main>section:nth-child(1) div{ width: 300px; margin : 200px auto 0 auto; }
    #sub_main>section:nth-child(1) div video{ width: 300px; }
    #sub_main>section:nth-child(1)>div>div p{ color: #fff; text-align: center; line-height: 30px; }
    #sub_main>section:nth-child(1)>div>div p:nth-child(2){ margin : 30px auto; font-size: 22px; }
    #sub_main>section:nth-child(1) div p span{ display: block; }
    #sub_main>section:nth-child(2){ padding-bottom: 200px; }
    #sub_main>section:nth-child(2) h2{ display: block; text-align: center; margin-top: 150px; color: #fff; }
    #sub_main>section:nth-child(2) p:nth-of-type(1), #sub_main>section:nth-child(2) p:nth-of-type(2)
    { margin: 20px 0 50px 0; text-align: center; color: #fff; }
    #sub_main>section:nth-child(2) p:nth-of-type(2) span{ display: block; }
    #sub_main>section:nth-child(2) div:nth-of-type(1){ width: 300px; height: 940px; margin: 0 auto; }
    #sub_main>section:nth-child(2) div:nth-of-type(2){ width: 300px; margin: 0 auto; }
    #sub_main>section:nth-child(2) button{ background: none; border: 0; margin: 20px auto; }
    #sub_main>section:nth-child(2) button img{ width: 300px; cursor: pointer; }
    .window{ 
        position:fixed; left:0; top:0; display: none;
        width:100%; height:100%;
        background: rgba(0,0,0,0.8); }
    .window p:nth-of-type(1){
        position: fixed; left: 50%; top: 15%; width: 300px;
    }
    .window p:nth-of-type(1) img{ height: 200px !important; margin-left: -300px !important; }
    .arrow{ 
        position: fixed; left: 50%; width: 360px !important; display: flex; justify-content: space-between;
        margin-left: -180px !important;
    }
    .arrow button img{ width: 100px !important; }

    .window small{
        position: fixed; left: 50%; top: 55%; margin-left: -150px;
        width: 300px;
        text-align: center; color: #fff;
    }
    .window small span{ display: block; }
    .window p:nth-of-type(1) img{ height: 400px; margin-left: -590px; }
}
    @media screen and (max-width: 1279px) and (max-height: 900px) {
        .window p:nth-of-type(1){
            position: fixed; left: 50%; top: 10%; width: 300px;
        }
        .arrow{ 
            position: fixed; left: 50%; width: 360px !important; display: flex; justify-content: space-between;
            margin: -130px 0 0 -180px !important;
        }
    }
    @media screen and (max-width: 1279px) and (max-height: 770px){
        .arrow{ 
            position: fixed; left: 50%; width: 360px !important; display: flex; justify-content: space-between;
            margin: -130px 0 0 -180px !important;
        }
    }