@charset "UTF-8";
@import url("base.css");

#wrapper {position:relative;margin:0 auto;min-width:1400px;max-width:1920px;overflow:hidden;}
#wrapper > div {position:relative;overflow:hidden;}
#wrapper img {display:block;width:100%;}

.visual {height:100vh;max-height:990px;background:url(../images/bg1.jpg) center no-repeat;}
.visual div.logo {position:absolute;top:40px;left:50px;z-index:10;}
.visual div.sns {position:absolute;top:40px;right:50px;z-index:10;}
.visual h1 {position:absolute;top:50%;left:50%;margin:-210px 0 0 -327px;width:655px;z-index:10;}
.visual div.bg-video {position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:1;}
.visual div.bg-video div {position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:2;}
.visual div.bg-video div video {position:relative;width:100%;height:100%;object-fit:cover;}
.visual div.bg-video div.pc {z-index:1;display:block;}
.visual div.bg-video div.mo {z-index:1;display:none;}

.ourwork {height:960px;background:url(../images/bg4.jpg) center repeat-y;}
.ourwork .tx {position:absolute;top:123px;left:50%;margin-left:-294px;}
.ourwork .cont {position:absolute;top:290px;left:0;width:100%;}
.ourwork .cont .swiper-container .swiper-slide a {display:block;position:relative;height:100%;overflow:hidden;}
.ourwork .cont .swiper-container .swiper-slide a img {position:absolute;top:0;left:0;width:100%;height:200%;}
.ourwork .cont .swiper-container .swiper-slide a:hover img {top:-100%;}
.ourwork .cont .swiper-container .swiper-button-prev {margin-top:-25px;left:20px;width:50px;height:50px;background:url(../images/img4_slider_prev.png) no-repeat;}
.ourwork .cont .swiper-container .swiper-button-next {margin-top:-25px;right:20px;width:50px;height:50px;background:url(../images/img4_slider_next.png) no-repeat;}
.ourwork .cont .swiper-container .swiper-button-prev:after {display:none;}
.ourwork .cont .swiper-container .swiper-button-next:after {display:none;}
.ourwork .cont .swiper-caption {margin:30px auto 0;width:580px;font-size:26px;color:#ffeaeb;line-height:32px;text-align:center;display:none;}

.ourfilm {height:960px;background:#212121;}
.ourfilm .tx {position:absolute;top:123px;left:50%;margin-left:-198px;}
.ourfilm .cont {position:absolute;top:290px;left:0;width:100%;}
.ourfilm .cont .swiper-container .swiper-slide a {display:block;position:relative;height:100%;overflow:hidden;}
.ourfilm .cont .swiper-container .swiper-slide a img {position:absolute;top:0;left:0;width:100%;height:200%;}
.ourfilm .cont .swiper-container .swiper-slide a:hover img {top:-100%;}
.ourfilm .cont .swiper-container .swiper-button-prev {margin-top:-25px;left:20px;width:50px;height:50px;background:url(../images/img4_slider_prev.png) no-repeat;}
.ourfilm .cont .swiper-container .swiper-button-next {margin-top:-25px;right:20px;width:50px;height:50px;background:url(../images/img4_slider_next.png) no-repeat;}
.ourfilm .cont .swiper-container .swiper-button-prev:after {display:none;}
.ourfilm .cont .swiper-container .swiper-button-next:after {display:none;}
.ourfilm .cont .swiper-caption {margin:30px auto 0;width:580px;font-size:26px;color:#ffeaeb;line-height:32px;text-align:center;display:none;}

.whyus {height:853px;background:url(../images/bg3.jpg) #f5f5f5 center top no-repeat;}
.whyus .tx {position:absolute;top:133px;left:50%;margin-left:-404px;}
.whyus .tx .pc {display:block;}
.whyus .tx .mo {display:none;}
.whyus .cont {position:absolute;top:305px;left:50%;margin-left:-612px;width:1224px;overflow:hidden;}
.whyus .cont div {float:left;width:50%;}

.ourteam {height:853px;background:url(../images/bg5.jpg) center no-repeat;}
.ourteam .tx {position:absolute;top:140px;left:50%;margin-left:-480px;}
.ourteam .tx .pc {display:block;}
.ourteam .tx .mo {display:none;}
.ourteam .cont {position:absolute;top:445px;left:50%;margin-left:-556px;}
.ourteam .cont .pc {display:block;}
.ourteam .cont .mo {display:none;}

.studio {height:1000px;background:url(../images/bg8.jpg) #000 top center no-repeat;background-size:100% auto;}
.studio .tx {position:absolute;top:41px;left:50%;margin-left:-168px;}
.studio .studio_cont {position:relative;height:100%;background:url(../images/img8_cont.png) center no-repeat;background-size:auto 94%;}
.studio .studio_logo {position:absolute;left:0;bottom:0;width:100%;height:100%;background:url(../images/img8_logo.png) center no-repeat;background-size:auto 94%;}

.client {height:1030px;background:#fff;}
.client .tx {position:absolute;top:137px;left:50%;margin-left:-239px;}
.client .cont {position:absolute;top:253px;left:50%;margin-left:-586px;}

.services {height:952px;background:url(../images/bg6.jpg) #eaeaea top center no-repeat;}
.services .cont {position:absolute;top:50px;left:0;width:100%;}
.services .cont .swiper-container .swiper-slide div {margin:0 auto;width:1215px;}
.services .cont .swiper-container .swiper-slide div.pc {display:block;}
.services .cont .swiper-container .swiper-slide div.mo {display:none;}
.services .cont .swiper-container .swiper-button-prev {margin-top:-25px;left:20px;width:50px;height:50px;background:url(../images/img6_slider_prev.png) no-repeat;}
.services .cont .swiper-container .swiper-button-next {margin-top:-25px;right:20px;width:50px;height:50px;background:url(../images/img6_slider_next.png) no-repeat;}
.services .cont .swiper-container .swiper-button-prev:after {display:none;}
.services .cont .swiper-container .swiper-button-next:after {display:none;}

.contactus {height:456px;background:url(../images/bg7.jpg) center repeat-y;}
.contactus .cont {position:absolute;top:84px;left:50%;margin-left:-405px;width:810px;}
.contactus .cont .pc {display:block;}
.contactus .cont .mo {display:none;}
.contactus .btn_sendmail {position:absolute;top:214px;left:50%;margin-left:-410px;width:250px;height:54px;overflow:hidden;}
.contactus .btn_company {position:absolute;bottom:90px;left:50%;margin-left:-140px;}
.contactus .copyright {position:absolute;bottom:22px;left:50%;margin-left:-214px;}

@media screen and (max-width: 1599px){
    .ourwork {height:860px;}
    .ourfilm {height:860px;}
}
@media screen and (max-width: 1399px){
    .ourwork {height:780px;}
    .ourfilm {height:780px;}
}

@media screen and (max-width: 640px){
    #wrapper {min-width:640px;}

    .visual h1 {position:absolute;top:50%;left:50%;margin:-210px 0 0 -292px;width:585px;}

    .ourwork {height:860px;}
    .ourwork .cont .swiper-container .swiper-slide a:hover img {top:0;}
    .ourwork .cont .swiper-caption {display:block;}

    .ourfilm {height:860px;}
    .ourfilm .cont .swiper-container .swiper-slide a:hover img {top:0;}
    .ourfilm .cont .swiper-caption {display:block;}

    .whyus {height:1373px;background-size:auto 100%;}
    .whyus .tx {margin-left:-223px;width:447px;}
    .whyus .tx .pc {display:none;}
    .whyus .tx .mo {display:block;}
    .whyus .cont {top:365px;margin-left:-306px;width:612px;}
    .whyus .cont div {width:100%;padding-bottom:20px;}

    .ourteam {height:1473px;background-size:auto 100%;}
    .ourteam .tx {margin-left:-299px;width:599px;}
    .ourteam .tx .pc {display:none;}
    .ourteam .tx .mo {display:block;}
    .ourteam .cont {top:580px;margin-left:-225px;}
    .ourteam .cont .pc {display:none;}
    .ourteam .cont .mo {display:block;}

    .studio {height:auto;}
    .studio .studio_cont {margin-top:120px;height:436px;background:url(../images/m_img8_cont.jpg) #000 center no-repeat;background-size:100% auto;}
    .studio .studio_logo {margin-top:120px;height:436px;background:url(../images/m_img8_logo.png) center no-repeat;background-size:100% auto;}

    .client {height:730px;}
    .client .cont {position:absolute;top:253px;left:5%;margin-left:0;width:90%;}

    .services {height:auto;}
    .services .cont {position:relative;top:0;margin-top:80px;}
    .services .cont .swiper-container {padding-bottom:104px;}
    .services .cont .swiper-container .swiper-slide div {margin:0 auto;width:580px;}
    .services .cont .swiper-container .swiper-slide div.pc {display:none;}
    .services .cont .swiper-container .swiper-slide div.mo {display:block;}
    .services .cont .swiper-container .swiper-button-prev {top:auto;bottom:30px;left:260px;}
    .services .cont .swiper-container .swiper-button-next {top:auto;bottom:30px;right:260px;}

    .contactus {height:606px;}
    .contactus .cont {margin-left:-290px;width:580px;}
    .contactus .cont .pc {display:none;}
    .contactus .cont .mo {display:block;}
    .contactus .btn_sendmail {top:296px;margin-left:-262px;}
}