.home #banner{width:100%;height:564px;position:relative;overflow:hidden;font-family:'Source Sans Pro';font-style:normal;font-weight:200;position: relative;top: 30px;}
.home #banner.preloading{background:#f2f2f2 url(//images.digi.com/loading.gif) center center no-repeat;background-size:200px 200px}
.home #banner span{display:block;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.home #banner span .floater {
    width: 44%;
    height: 260px;
    margin: 0 4% 0 -20%;
    position: relative;
}
/*スライド4枚時は下記を使用*/
/*.home #banner #banners{width:400%;height:564px;position:relative;left:0}
.home #banner #banners .banner{width:25%;float:left;overflow:hidden}*/
/*↑スライド4枚時*/
/*スライド5枚時は下記を使用*/
.home #banner #banners{width:500%;height:564px;position:relative;left:0}
.home #banner #banners .banner{width:20%;float:left;overflow:hidden}
/*↑スライド5枚時*/
.home #banner .inside{height:576px;position:relative;display: flex;}
.home #banner .inside .content {
    display: flex;
    flex-direction: row;
    z-index: 2;
    position: relative;
    width: 100%;
}
.home #banners .banner.layout-floater .main {
    width: 65%;
    margin: 0 5% 0 0;
      text-decoration: none;
    align-self: center;
    padding: 24px 5% 24px 0;
    width: 70%;
    box-sizing: border-box;
}
.home #banners .banner.layout-floater .heading-floater {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.home #banner img.background{
	position: absolute;
	top: 0;
	right: 0;
	max-width: none;
	background-image: url(images/home/home-banner-xbee3.jpg);
}
/*.home #banner a{display:block;color:#fff;text-decoration:none}*/
.home #banner .main{
	padding: 24px 5% 24px 0;
	width: 70%;
  box-sizing:border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.home #banners .corner.corner-type-floater .corner-image  {
    max-height: none;
    padding: 0;
    height: 70%;
    width: 100%;
}
.home #banners .corner.corner-type-floater .corner-image img  {
    transform: scale(1.5);
}
.floater img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    opacity: 1;
    transition: opacity .5s ease-in;
}
.home2020 #home-banners-2021 .banner .main{text-decoration:none;-ms-flex-item-align:center;align-self:center;padding:24px 5% 24px 0;width:70%;-webkit-box-sizing:border-box;box-sizing:border-box}
.home #banner a.off{display:none}
.home #banner .text{width:70%;position:absolute;left:0;bottom:70px;color:#fff;z-index:2}
.home #banner .text{
  width:70%;
  position: absolute;
  top: 50%;
  -webkit-transform : translateY(-60%);
  transform : translateY(-60%);
}
.home #banner .text .heading{font-size:78px;line-height:67px;text-transform:uppercase;font-weight:700;padding:0 0 30px 0}
.home #banner .text .heading span{display:inline}
.home #banner .text .teaser{padding: 0 20px 0 47px;font-size:20px;line-height:24px;font-weight: 400; width:90%;position: relative;}
.home #banner .text .teaser .link{text-transform:uppercase;text-decoration:underline;margin:15px 0 0 0}
.home #banner a:hover .text .teaser .link{color:#00b7ff}
.home #banner .corner{color:#fff;position:absolute;width:369px;height:369px;right:0;bottom:0;background:#fff}
.home #banner .corner img{
  object-fit: contain;
    height: 100%;
    width: 100%;}

.home #circles{position:relative;top:-40px;left:50%;margin:0 0 0 -100px;width:200px;z-index:4;text-align:center}
.home #circles a{display:inline-block;width:18px;height:18px;margin:0 9px;border-radius:50%;background:rgba(255,255,255,.3);text-decoration:none}
.home #circles a.selected,.home #circles a:hover{background:rgba(255,255,255,.8);text-decoration:none}

.home #banner .banner-button{margin-top: 1rem;font-size:18px;line-height:1.2em;font-weight:600;background:#91d46c;color:#3f4245;display:inline-block;padding:13px 16px;position:relative;-webkit-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}
.home #banner .banner-button span{display:inline}
.home #banner .banner-button:hover{background:#9de476}

.home #banner .corner a{text-decoration:none;position:absolute;width:100%;height:100%;top:0;left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
.home #banner .corner a:hover .corner-link{color:#1f7fa5}
.home #banner .corner a:hover .corner-link span{color:#1f7fa5}
.home #banner .corner a:hover .corner-link span:after{border:2px solid #1f7fa5;background:url("../images/arrow-wcircle-grey-blue.png") -2px center no-repeat;background-size:48px 24px}
.home #banner .corner.bggreen{background:-o-linear-gradient(315deg,#91d46c 0%,#91d46c 50%,#fff 50%,#fff 100%);background:linear-gradient(135deg,#91d46c 0%,#91d46c 50%,#fff 50%,#fff 100%)}
.home #banner .corner.bgblue{background:-o-linear-gradient(315deg,#00b7ff 0%,#91d46c 50%,#fff 50%,#fff 100%);background:linear-gradient(135deg,#00b7ff 0%,#00b7ff 50%,#fff 50%,#fff 100%)}
.home #banner .corner .corner-heading{display:block;text-align:left;width:84%;margin:0 8% 0 5%;font-size:25px;line-height:1.1em;padding:14px 0 8px 0;color:#fff}
.home #banner .corner .corner-heading em{font-family:'Source Sans Pro';font-weight: 400;}
.home #banner .corner .corner-image{display:block;padding:0 5%;max-height:60%}
.home #banner .corner .corner-link{display:inline-block;text-align:center;width:92%;margin:0 4%;font-size:18px;line-height:1.2em;text-decoration:underline;color:#3f4245;font-weight:600;padding:8px 0}
.home #banner .corner .corner-link span{display:inline-block;text-decoration:underline;}
.home #banner .corner .corner-link span:after{content:'';white-space:nowrap;display:inline-block;vertical-align:middle;width:24px;height:24px;border-radius:50%;border:2px solid #91d46c;margin:0 0 0 5px;-webkit-transition:all .2s ease-in;-o-transition:all .2s ease-in;transition:all .2s ease-in;background:url("../images/arrow-wcircle-grey-blue.png") -26px center no-repeat;background-size:48px 24px}
.teaser.slash-green:before{position:absolute;left:5px;top:0;display:inline-block;content:"";width:55px;height:1px;background-color:#91d46c;background-image:none;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
.teaser.slash-white:before{position:absolute;left:5px;top:0;display:inline-block;content:"";width:55px;height:1px;background-color:#fff;background-image:none;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}



.home2020 #home-banners-2021{min-height:576px;width:100%;overflow-x:hidden;-webkit-transition:all .3s ease-in;-o-transition:all .3s ease-in;transition:all .3s ease-in;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.home2020 #home-banners-2021.touch{overflow-x:scroll}.home2020 #home-banners-2021.initial{opacity:0}.home2020 #home-banners-2021.preloading{background:#f2f2f2 url("//www.digi.com/images/loading.gif") center center no-repeat;background-size:200px 200px}.home2020 #home-banners-2021 #banner-container{min-height:576px;width:500%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-transition:all .4s ease-out;-o-transition:all .4s ease-out;transition:all .4s ease-out}.home2020 #home-banners-2021 .banner{min-height:576px;display:-webkit-box;display:-ms-flexbox;display:flex;width:20%;overflow:hidden;scroll-snap-align:start}.home2020 #home-banners-2021 .banner .inside{position:relative;min-height:576px;display:-webkit-box;display:-ms-flexbox;display:flex}.home2020 #home-banners-2021 .banner .background{position:absolute;top:0;right:0;z-index:1;max-width:none;height:100%}.home2020 #home-banners-2021 .banner .content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;z-index:2;position:relative;width:100%}.home2020 #home-banners-2021 .banner .main{text-decoration:none;-ms-flex-item-align:center;align-self:center;padding:24px 5% 24px 0;width:70%;-webkit-box-sizing:border-box;box-sizing:border-box}.home2020 #home-banners-2021 .banner .main .text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.home2020 #home-banners-2021 .banner .main .heading{color:#fff;font-size:78px;font-weight:800;line-height:.9em}.home2020 #home-banners-2021 .banner .main .heading span.green{color:#91d46c}.home2020 #home-banners-2021 .banner .main .teaser{font-size:20px;color:#fff;padding:0 20px 0 47px;margin:30px 0 0 0;position:relative}.home2020 #home-banners-2021 .banner .main .teaser:before{position:absolute;left:5px;top:-15px;display:inline-block;content:"";width:37px;height:37px;background:url("/digi/media/home/text-wedge.png") center center no-repeat;background-size:37px 37px}.home2020 #home-banners-2021 .banner .main .teaser.slash-green:before{position:absolute;left:5px;top:0;display:inline-block;content:"";width:55px;height:1px;background-color:#91d46c;background-image:none;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.home2020 #home-banners-2021 .banner .main .banner-button{font-size:18px;line-height:1.2em;font-weight:600;background:#91d46c;color:#3f4245;display:inline-block;padding:13px 16px;position:relative;-webkit-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.home2020 #home-banners-2021 .banner .main .banner-button span{display:inline}.home2020 #home-banners-2021 .banner .main .banner-button:hover{background:#9de476}.home2020 #home-banners-2021 .banner .corner{-ms-flex-item-align:end;align-self:flex-end;width:30%;min-width:30%;height:0;padding-bottom:30%;-webkit-box-sizing:border-box;box-sizing:border-box;background:-o-linear-gradient(315deg,#00b7ff 0%,#00b7ff 50%,#fff 50%,#fff 100%);background:linear-gradient(135deg,#00b7ff 0%,#00b7ff 50%,#fff 50%,#fff 100%);position:relative}.home2020 #home-banners-2021 .banner .corner.bggreen{background:-o-linear-gradient(315deg,#91d46c 0%,#91d46c 50%,#fff 50%,#fff 100%);background:linear-gradient(135deg,#91d46c 0%,#91d46c 50%,#fff 50%,#fff 100%)}.home2020 #home-banners-2021 .banner .corner a{text-decoration:none;position:absolute;width:100%;height:100%;top:0;left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.home2020 #home-banners-2021 .banner .corner a:hover .corner-link{color:#1f7fa5}.home2020 #home-banners-2021 .banner .corner a:hover .corner-link span{color:#1f7fa5}.home2020 #home-banners-2021 .banner .corner a:hover .corner-link span:after{border:2px solid #1f7fa5;background:url("//www.digi.com/images/arrow-wcircle-grey-blue.png") -2px center no-repeat;background-size:48px 24px}.home2020 #home-banners-2021 .banner .corner .corner-heading{display:block;text-align:left;width:84%;margin:0 8% 0 5%;font-size:25px;line-height:1.1em;padding:14px 0 8px 0;color:#fff}.home2020 #home-banners-2021 .banner .corner .corner-image{display:block;padding:0 5%;max-height:60%}.home2020 #home-banners-2021 .banner .corner .corner-image img{-o-object-fit:contain;object-fit:contain;height:100%;width:100%}.home2020 #home-banners-2021 .banner .corner .corner-link{display:inline-block;text-align:center;width:92%;margin:0 4%;font-size:18px;line-height:1.2em;text-decoration:underline;color:#3f4245;font-weight:600;padding:8px 0}.home2020 #home-banners-2021 .banner .corner .corner-link span{display:inline-block;text-decoration:underline}.home2020 #home-banners-2021 .banner .corner .corner-link span:after{content:'';white-space:nowrap;display:inline-block;vertical-align:middle;width:24px;height:24px;border-radius:50%;border:2px solid #91d46c;margin:0 0 0 5px;-webkit-transition:all .2s ease-in;-o-transition:all .2s ease-in;transition:all .2s ease-in;background:url("//www.digi.com/images/arrow-wcircle-grey-blue.png") -26px center no-repeat;background-size:48px 24px}.home2020 #home-banners-2021 .banner.customer{background-repeat:no-repeat;background-size:cover;position:relative}.home2020 #home-banners-2021 .banner.customer .cover{width:50%;height:100%;position:absolute;left:0;top:0;opacity:.6;background:-o-linear-gradient(225deg,transparent 120px,#000 120px);background:linear-gradient(225deg,transparent 120px,#000 120px);padding-right:120px;-webkit-box-sizing:content-box;box-sizing:content-box}.home2020 #home-banners-2021 .banner.customer .customer-logo{position:absolute;right:20px;bottom:20px;max-width:300px;z-index:2}.home2020 #home-banners-2021 .banner.customer .customer-content{width:60%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.home2020 #home-banners-2021 .banner.customer .customer-content a.main{margin:0;width:100%}.home2020 #home-banners-2021 .banner.customer .customer-content a.main .text{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.home2020 #home-banners-2021 .banner.customer .customer-content a.main .customer-company{font-weight:800;font-size:18px;padding:16px 0;color:#00b7ff}.home2020 #home-banners-2021 .banner.customer .customer-content a.main .customer-title{color:#fff;padding:0 0 16px 0;font-style:italic;line-height:1.2em}.home2020 #home-banners-2021 .banner.customer .customer-content a.main .teaser{padding:0;margin:0 0 16px 0;font-size:20px;line-height:1.2em;font-weight:600}.home2020 #home-banners-2021 .banner.customer .customer-content a.main .teaser:before{display:none}
