/*----------------------------------vi
-------------------------------------*/
body {
    background-color: #787980 !important;
}

.section-vi{
    background-image: url(../img/index/bg-stroke.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left -20%;
    background-color: var(--bs-primary);
  
position: relative;
z-index: 0;
}
.vi-car{
    width:100%;
    text-align: center;
    position: relative;
    z-index: 2;
    margin-top: -15%;
}

.vi-car-mask{
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 40%;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom,  rgba(120,121,128,0) 50%,rgba(120,121,128,1) 100%);
}
.vi-car img{
    position: relative;
    z-index: 1;
    width: 155%;
    margin-left: -35%;
}
.vi-title{
    position: relative;
    --width:80%;
    z-index: 4;
    width: var(--width);
    margin-left: auto;
    margin-right: auto;
    padding-top:130px;
}
.w-speed,.w-10year{
    flex:0 0 auto;
    width: 12%;
}
.w-slogan{
    flex:0 0 auto;
    width:70%;
    color: #ffffff;
}
.vi-logo{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.box-slogan_VW span{
    writing-mode: vertical-rl;
    font-weight: bold;
    font-size: 1.1rem;
    letter-spacing: 0.2rem;
    padding: 0.2rem;
    border: 1px solid #ffffff; 
    white-space: nowrap; display: block;
    width: 30px;
    text-align: center;
}
.box-slogan_VW--2{margin-top:20px;}
.w-logo{
    width: 100%;
    margin-bottom: 10px;
  }
.w-title{
    width: 30%;
    margin-left: auto;
    margin-right: auto;
}
.vi-slogan__w{
    margin-top: 50px;
}
@media screen and (min-width:576px) {
        .vi-title{
        padding-top:150px;
    }

}
@media screen and (min-width:768px) {
   .vi-slogan__logo{
    flex:0 0 auto;
    width: 25%;
}
}
@media screen and (min-width:1200px) {
    .vi-car{
        margin-top: 0%;
    }
    .vi-car img{
        width: 155%;
        margin-left: -48.2%;
    }
    .vi-slogan__logo{
        flex:0 0 auto;
        width: 55%;
    }
    .w-logo{
        margin-bottom: 50px;
      }
    .w-slogan{
        width:35%;
    }
    .w-speed,.w-10year{
        width: 20%;
    }  
    .vi-slogan__w{
        margin-top: 80%;
    }
    .box-slogan_VW--2{margin-top:90px;}
    .vi-title{
        --width:768px;
        margin-bottom: -20%;
        padding-top:6%;
    }
}
/*
*section-ad
*/
.section-ad{
    max-width: 100%;
    margin-left: auto;
    position: relative;
    margin-top: -40%;
    z-index: 2;
    padding:0% 5%;    
}
.slide-item{
    margin:1rem;   
}
.slide-item img{
    width: 100%;
}
/*
*section-word
*/
.section-word{
    margin-top: -10%;
}
.index-slogan{
    transform: skewX(-15deg);
    margin-left: 0%;
    margin-top: 30px;
}
.index-slogan span{ 
    position: relative;
}
.index-slogan span b{
    font-size: 1.5rem;
    background-color: #ffffff;
    padding:0rem 1rem;
    color: #000;
    font-family: 'NotoSansTCBold'; 
    word-break: break-word; 
    overflow-wrap: break-word;  
    line-height: normal; 
    position: relative;
}
.index-slogan span b:after{
    position: absolute;
    content:'';
    width: 10px;
    height:40px;
    margin-top: 0.3rem;
    background-color: #000000; 
     margin-top: 0rem;
    margin-left:20px;
}
.article-1{
    max-width: 100%;
}
.bg-circledot{
    width: 160%;
}
@media screen and (min-width: 768px) {
    .site-title{margin-top: -5%;}
    .section-ad{
        max-width: 75%;  
    }
    .index-slogan{
        margin-left: 10%;}
    .index-slogan span b{
    font-size:2.6rem;
}
.index-slogan span b:after{
    width: 20px;
    height:60px;
    margin-top: 0.3rem;
   }
}
@media screen and (min-width: 1024px){
    .index-slogan span b{
		font-size:3.6rem;
	}
    .index-slogan span b:after{
        width: 30px;
        height:100%;
        margin-top:-0.05rem;
       }
}

.smoke-wrap{
    position: absolute;
    z-index: 1;
    top:-10%;
    left: 0;
    width: 100%;
	height: 100%;
}
.home-video {
	visibility: hidden;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	position: absolute;
	mix-blend-mode: lighten;
    transform: scaleX(-1);
		}

.home-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;		
	mix-blend-mode: lighten;
    opacity: 0.2;
    transform: scaleX(-1);
	}