header #cis/* banner */
#banner {width: 100%;z-index: 3;}
#banner .item {height: 115vh;}
#banner .paroller {left: -170px;bottom: 25%;}
@keyframes aboutImgAnimation{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(30px);transform:translateY(30px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}
@keyframes bannerimg{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(-30px);transform:translateY(-30px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}
#banner .paroller.one{left: 23%;bottom: 42%;}
#banner .paroller img{animation: bannerimg 10s ease-in-out infinite;}
#banner .paroller .one img{animation: bannerimg 20s ease-in-out infinite;}
#banner .three  {right: 40%;top: -60px;animation: aboutImgAnimation 10s ease-in-out infinite;}
#banner .two  {right: 26.5%;bottom: 5%;animation: aboutImgAnimation 10s ease-in-out infinite;}
#banner .four {right: 0;top: 7%;animation: aboutImgAnimation 20s ease-in-out infinite;}
#banner .item .clip >* { min-width: 100%; width: 100%; }
#banner .item .clip .bgBox {  }
#banner .item .clip iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item .clip video { overflow: hidden; position: absolute; width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
#banner .item .info >div {margin: 20% auto 0;width: calc(80% - 10px);}
#banner .item .info >div .txt { -webkit-transition-delay: .2s; transition-delay: .2s; transform: scaleX(0); -webkit-transform: scaleX(0); transform-origin: 0 0; -webkit-transform-origin: 0 0; }
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt >* { padding: 10px 15px; max-width: calc(100% - 30px); font-size: 18px; }
#banner .item .info >div .txt .h3 {margin-bottom: 15px;line-height: 150%;font-size: 35px;writing-mode: vertical-rl;word-spacing: 100vw;font-family: "Zen Maru Gothic", sans-serif;font-weight: bold;letter-spacing: 10px;}

#banner .item.slick-current .clip .bgBox {-webkit-animation: scale_banner 6s linear infinite;}
#banner .item.slick-current .info >div .txt {transform: scaleX(1);-webkit-transform: scaleX(1);}

@media screen and (max-width: 1440px){
    #banner .four{width: 460px;}
    #banner .paroller{width: 250px;}
    #banner .two{width: 170px;}
    #banner .paroller.one{width: 140px;}
}
@media screen and (max-width: 1024px){
	#banner .item { height: 100vh; }
}
@media screen and (max-width: 980px){
    #banner .two{display:none;}
    #banner .three{right:50%}
    #banner .paroller.one{width: 140px;bottom: unset;top: 53%;}
    #banner .paroller{width: 250px;left: -70px;bottom: unset;top: 20%;}
    #banner .item .info >div .txt .h3{height: 280px;margin: 0;}
    #banner .item .info >div{display:flex;justify-content: flex-end;margin: auto auto 0;align-items: flex-end;align-content: flex-end;}
	#banner .item {height: 90vh;}
    #banner .item .clip .bgBox{background-position: 30% 50%;}
    #banner .four{top:unset;bottom: -20%;}
}
@media screen and (max-width: 640px){
    #banner .item .info >div .txt{overflow: unset;}
    #banner .slick-list{overflow: unset;}
    #banner .info{display: block;width: auto;height: auto;top: unset;bottom: -45px;right: 20px;left: unset;}
    #banner .item .info >div{width:90%;display: block;}
    #banner .item .info >div .txt .h3{font-size: 20px;height: 210px;padding: 0;width: 100px;}
    #banner .four{width: 250px;}
    #banner .three{display:none;}
    #banner .paroller.one{width: 120px;top: 55%;}
    #banner{padding-top: 110px;}
    #banner .item {height: 70vh;}
    #banner .paroller{width: 200px;top: 23%;}
}