@media screen and (min-width: 1025px){
   
    /* greeting */
    #bottom > video{ display: block; width: 60vw; max-width: 800px; height: auto; margin: 0 auto; border: none; }
    #bottom > .mVideo{ display: none; }
    #bottom > span{ display: block; width: 100%; text-align: center; font-size: .9rem; color: #ccc; margin: 1rem 0 7vh; }
    #bottom > p{ font-size: 1.3rem; text-align: center; line-height: 2.1rem; font-weight: 300; }
    #bottom > .mAbout{ display: none; }



    /* floor */
    #bottom > .floors{ position: relative; width: 70%; height: 90vh; min-width: 980px; background-repeat: no-repeat; margin: 0 auto; background-size: 50%; }
    #bottom > .floors > h2{ position: absolute; top: 0; font-size: 6.5rem; font-weight: 800; color: #d3c89c; transition-delay: 1s; transition: ease-in .5s; opacity: 0; }
    #bottom > .floors > h2.up{ opacity: 1; }
    #bottom > .floors > ul{ width: 100%; height: 100%; padding-top: 8rem; }
    #bottom > .floors > ul > li{ height: 6vh; min-height: 3rem; font-size: 1.2rem; }

    .floor01{ background-image: url(/images/company/floor01.jpg);  background-position: left 50px; }
    .floor01 > h2{ right: 0; }
    .floor01 ul{ padding-right: 8rem; text-align: right; }

    .floor02{ background-image: url(/images/company/floor02.png); background-position: right 50px; }
    .floor02 > h2{ left: 0; }
    .floor02 ul{ padding-left: 8rem; text-align: left; }

    .floor03{ background-image: url(/images/company/floor03.png); background-position: left 50px; }
    .floor03 > h2{ right: 0; }
    .floor03 ul{ padding-right: 8rem; text-align: right;  }

    .floor04{ background-image: url(/images/company/floor04.png); background-position: right 50px; }
    .floor04 > h2{ left: 0; }
    .floor04 ul{ padding-left: 8rem; text-align: left; }

    .floor05{ background-image: url(/images/company/floor05.png); background-position: left 50px; }
    .floor05 > h2{ right: 0; }
    .floor05 ul{ padding-right: 8rem; text-align: right; }




    /* map */
    #map{ width: 70vw; height: 50vh; max-width: 900px; min-height: 350px; margin: 0 auto; background-color: #eee; }
    .way{ width: 70vw; margin: 0 auto; }
    .way > h5{ font-size: 1.6rem; font-weight: 500; margin: 10vh 0 5vh;  }
    .way img{ display: block; width: 60vw; max-width: 700px; margin: 0 auto;  }

    .way .public{ width: 60vw; min-height: 250px; margin: 0 auto;  }
    .way .public > li{ min-height: 100px; }
    .way .public > li:last-child{ min-height: 50px; }
    .way .public > li > ul{ display: table; width: 100%;  }
    .way .public > li > ul >li{ display: table-cell; font-size: 1rem; vertical-align: middle; line-height: 1.6rem; background-repeat: no-repeat; background-position: left center; background-size: 1rem; padding-left: 1.5rem; }
    .way .public > li > ul >li:first-child{ width: 50%; }
    .way .public > li > ul >li:nth-child(2){ width: 25%; background-image: url(/images/company/icon_blue.gif);  }
    .way .public > li > ul >li:last-child{ background-image: url(/images/company/icon_green.gif); }

    .way .car{ width: 60vw; margin: 0 auto; margin-bottom: 5vh; }
    .way .car h6{ font-size: 1.2rem; margin-bottom: 3vh; }
    .way .car > li{ min-height: 40px; font-size: 1rem; background-image: url(/images/company/icon_car.gif); background-repeat: no-repeat; background-size: 1rem; background-position: left top; padding-left: 1.5rem; font-weight: 500; }



    
}



@media screen and ( min-width: 768px) and (max-width: 1024px){
    
    /* t- greeting */
    #bottom > video{ display: block; width: 60vw; max-width: 500px; height: auto; margin: 0 auto; border: none; margin-bottom: 5vh; }
    #bottom > .mVideo{ display: none; }
    #bottom > span{ display: none; }  
    #bottom > p{ font-size: 1.2rem; text-align: center; line-height: 2rem; font-weight: 300; }
    #bottom > .mAbout{ display: none; }



    /* t-floor */
    #bottom > .floors{ position: relative; width: 90vw; height: 50vh; min-height: 50vh; background-repeat: no-repeat; margin: 0 auto; background-size: 55%; min-width: 700px; }
    #bottom > .floors > h2{ position: absolute; top: 0; font-size: 6rem; font-weight: 800; color: #d3c89c; transition-delay: .7s; transition: ease-in .5s; opacity: 0; }
    #bottom > .floors > h2.up{ opacity: 1; }
    #bottom > .floors > ul{ width: 100%; padding-top: 8rem; }
    #bottom > .floors > ul > li{ height: 3rem; font-size: 1.2rem; }

    .floor01{ background-image: url(/images/company/floor01.jpg);  background-position: left 50px; }
    .floor01 > h2{ right: 3vw; }
    .floor01 ul{ padding-right: 8rem; text-align: right; }

    .floor02{ background-image: url(/images/company/floor02.png); background-position: right 50px; }
    .floor02 > h2{ left: 3vw; }
    .floor02 ul{ padding-left: 8rem; text-align: left; }

    .floor03{ background-image: url(/images/company/floor03.png); background-position: left 50px; }
    .floor03 > h2{ right: 3vw; }
    .floor03 ul{ padding-right: 8rem; text-align: right;  }

    .floor04{ background-image: url(/images/company/floor04.png); background-position: right 50px; }
    .floor04 > h2{ left: 3vw; }
    .floor04 ul{ padding-left: 8rem; text-align: left; }

    .floor05{ background-image: url(/images/company/floor05.png); background-position: left 50px; }
    .floor05 > h2{ right: 3vw; }
    .floor05 ul{ padding-right: 8rem; text-align: right; }




    /* t-map */
    #map{ width: 65vw; height: 32vh; max-width: 480px; min-height: 300px; margin: 0 auto; background-color: #eee; }
    .way{ width: 80vw; height: auto; margin: 0 auto;  }
    .way > h5{ font-size: 1.5rem; font-weight: 500; margin: 7vh 0 3vh; }
    .way > img{ display: block; width: 60vw; max-width: 500px; margin: 0 auto; }

    .way > .public{ width: 60vw; margin: 0 auto;  }
    .way > .public > li{ min-height: 70px; }
    .way > .public > li:last-child{ min-height: 50px; }
    .way > .public > li > ul{ display: table; width: 100%; height: 100%;  }
    .way > .public > li > ul >li{ display: table-cell; font-size: 1rem; vertical-align: middle; line-height: 1.5rem; background-repeat: no-repeat; background-position: left center; background-size: 1rem; padding-left: 1.5rem; }
    .way > .public > li > ul >li:first-child{ width: 40%; }
    .way > .public > li > ul >li:nth-child(2){ width: 25%; background-image: url(/images/company/icon_blue.gif);  }
    .way > .public > li > ul >li:last-child{ background-image: url(/images/company/icon_green.gif); }

    .way > .car{ width: 60vw; height: auto; margin: 0 auto; margin-bottom: 2vh; }
    .way > .car h6{ font-size: 1.2rem; margin-bottom: 2vh; }
    .way > .car > li{ min-height: 40px; font-size: 1rem; background-image: url(/images/company/icon_car.gif); background-repeat: no-repeat; background-size: 1rem; background-position: left top; padding-left: 1.5rem; font-weight: 500; }
    
        
}



@media screen and (max-width: 767px){ /* mobile */
    
    /* m-greeting */
    #bottom > video{ display: none; }
    #bottom > .mVideo{ display: block; width: 80vw; max-width: 300px; height: auto; margin: 0 auto; border: 1px solid #666; margin-bottom: 5vh;  }
    #bottom > p, #bottom > span{ display: none; }
    #bottom > .mAbout{ display: block; width: 80vw; margin: 0 auto; font-size: 1.1rem; text-align: center; line-height: 1.7rem; }
    


    /* m-floor */
    #bottom > .floors{ position: relative; width: 90vw; height: 45vh; min-height: 45vh; background-repeat: no-repeat; margin: 0 auto; background-size: 50%; min-width: 350px; }
    #bottom > .floors > h2{ position: absolute; top: 0; font-size: 4rem; font-weight: 800; color: #d3c89c; transition-delay: .3s; transition: ease-in .3s; opacity: 0; }
    #bottom > .floors > h2.up{ opacity: 1; }
    #bottom > .floors > ul{ width: 100%; height: 100%; padding-top: 5rem; }
    #bottom > .floors > ul > li{ height: 2rem; font-size: 1rem; }

    .floor01{ background-image: url(/images/company/floor01.jpg);  background-position: left 3rem; }
    .floor01 > h2{ right: 0; }
    .floor01 ul{ padding-right: 4rem; text-align: right; }

    .floor02{ background-image: url(/images/company/floor02.png); background-position: right 3rem; }
    .floor02 > h2{ left: 0; }
    .floor02 ul{ padding-left: 4rem; text-align: left; }

    .floor03{ background-image: url(/images/company/floor03.png); background-position: left 3rem; }
    .floor03 > h2{ right: 0; }
    .floor03 ul{ padding-right: 4rem; text-align: right;  }

    .floor04{ background-image: url(/images/company/floor04.png); background-position: right 3rem; }
    .floor04 > h2{ left: 0; }
    .floor04 ul{ padding-left: 4rem; text-align: left; }

    .floor05{ background-image: url(/images/company/floor05.png); background-position: left 3rem; }
    .floor05 > h2{ right: 0; }
    .floor05 ul{ padding-right: 4rem; text-align: right; }




    /* m-map */
    #map{ width: 80vw; height: 35vh; max-width: 350px; min-height: 230px; margin: 0 auto; background-color: #eee; }
    .way{ width: 90vw; margin: 0 auto; }
    .way h5{ font-size: 1.3rem; font-weight: 500; margin: 7vh 0 3vh; }
    .way img{ display: block; width: 70vw; margin: 0 auto; }

    .way > .public{ width: 80vw; margin: 0 auto;   }
    .way > .public > li{ min-height: 60px; }
    .way > .public > li:last-child{ min-height: 40px; line-height: 1.4rem; }
    .way > .public > li > ul{ display: table; width: 100%; }
    .way > .public > li > ul >li{ display: table-cell; font-size: 1rem; vertical-align: middle; line-height: 1.4rem; background-repeat: no-repeat; background-position: left center; background-size: 1rem; padding-left: 1.5rem; }
    .way > .public > li > ul >li:first-child{ width: 40%; padding-left: 0; }
    .way > .public > li > ul >li:nth-child(2){ width: 25%; background-image: url(/images/company/icon_blue.gif);  }
    .way > .public > li > ul >li:last-child{ background-image: url(/images/company/icon_green.gif); }

    .way > .car{ width: 80vw; height: auto; margin: 0 auto; margin-bottom: 4vh; }
    .way > .car h6{ font-size: 1.2rem; margin-bottom: 3vh;  }
    .way > .car > li{ min-height: 50px; font-size: 1rem; background-image: url(/images/company/icon_car.gif); background-repeat: no-repeat; background-size: 1rem; background-position: left top; padding-left: 1.5rem; font-weight: 500; line-height: 1.5rem; }
    
    
    
}