@charset "UTF-8";

.new--highlight--wrap{
    width:100%;
    max-width:100%;
    overflow-x: hidden;
}

.visual--header{
    position: relative;
}
.visual--header:after{
    content:'';
    display: block;
    width:100%;
    height:200px;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
    position: absolute;
    bottom:0px;
    left:0px;
}
.visual--header .header--title{
    position: absolute;
    bottom:40px;
    left:0px;
    z-index: 9;
    margin: 0px 4%;
    max-width: 1440px;
    pointer-events: none;
    width: 92%;
    z-index: 4;
}

.visual--header .header--title > h2{
    color: rgb(255, 255, 255);
    font-family: AudiType, sans-serif;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-optical-sizing: auto;
    font-size: 44px;
    font-size-adjust: none;
    font-stretch: 130%;
    font-weight: 700;
    letter-spacing: -0.66px;
    line-height: 68px;
    pointer-events: all;
    vertical-align: baseline;
}
.visual--header .header--title > p{
    color: rgb(242, 242, 242);
    font-family: AudiType, sans-serif;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-optical-sizing: auto;
    font-size: 12px;
    font-size-adjust: none;
    font-stretch: 105%;

    font-weight: 400;
    line-height: 20px;

    pointer-events: all;
    vertical-align: baseline;
    margin-top:45px;
}


.visual--header picture{
    max-width:100%;
}
.visual--header picture img{
    max-width:100%;
    width:100%;
}

.nm-intro__list{
    opacity: 1!important;
}

@media (min-width: 1566px){
    .visual--header .header--title {
        margin: 0px calc(50% - 720px);
    }
}




.title--detail--info {
    padding-top: 66px;
}

.title--detail--info h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 66px;
    font-weight: 700;
    line-height: 96px;

    margin-bottom: 18px;
    margin-top: 0px;
    opacity: 1;

    vertical-align: baseline;

}


/** parallax sections **/
.parallax--scrolling--wrap{
    width:100%;
    height:150vh;
    overflow: hidden;
    position: relative;
}
.parallax--scrolling--wrap > img{
    max-width:100%;
    width:100%;
    position: absolute;
    top:-115px;
}

.itmes--wrapper{
    position: absolute;
    backface-visibility: hidden;
    width: 100%;
    top: 147.219px;
    left: 4%;
    z-index: 1;
    will-change: transform;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    transform: translate3d(0px, 215.25px, 0px);
}

.itmes--wrap{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    flex-basis: 44%;
    background: #fff;
    padding:68px;
}
.itmes--wrap > h2{
    color: rgb(51, 51, 51);
    font-size: 36px;
    font-stretch: 130%;
    font-weight: 700;
    letter-spacing: -0.54px;
    line-height: 52px;
    margin-bottom: 24px
}

.itmes--wrap > p{
    color: rgb(51, 51, 51);
    font-size: 16px;
    font-stretch: 105%;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 44px
}

.swiper--side--slider{
    width:100%;
    display: grid;
    grid-template-columns: 30% 70%;
    /*height:100vh;*/
}


.swiper--side--slider.ty2{
    display: flex;
    flex-direction:column;
    overflow: hidden;
    height:auto;
}

.swiper--side--slider .swiper--contents{
    grid-column-end: auto;
    grid-column-start: 2;
    grid-row-end: auto;
    grid-row-start: 1;
}

.swiper--side--slider .swiper--nav--wrapper{
    background:#000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    width:100%;
    line-height: 12px;
    max-width: 100%;
    padding-left: 44px;
    padding-right: 44px;
    box-sizing: border-box;
}


.swiper--side--slider .swiper--nav--wrapper .pager--wrapper{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 44px;
    padding-top: 24px;
}
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next99,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev99,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next13,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev13,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next12,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev12,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next11,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev11,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next10,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev10,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next8,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev8,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next4,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev4,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next3,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev3,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next2,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev2,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev{
    width:27px;
    height:27px;
    position: static;
    padding:0px;
	cursor: pointer;
    margin:0px;
    color:#fff;
}

.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next10 > span,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev10 > span,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next13 > span,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev13 > span,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next12 > span,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev12 > span{
	color: black!important;
}

.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev99:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next99:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev13:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next13:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev12:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next12:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev11:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next11:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev10:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next10:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev8:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next8:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev4:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next4:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev3:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next3:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev2:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-prev:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next2:after,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-button-next:after{
    display: none;
}


.swp--page08,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination99,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination10,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination11,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination12,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination13,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination8,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination4,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination3,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination2,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination{
    width:auto!important;
    position: static;
    color:#fff;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
}


.swp--page08 span,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination99 span,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination11 span,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination8 span,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination4 span,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination3 span,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination2 span,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination span{
    background: none;
    color: rgb(255, 255, 255);
    cursor: pointer;
    font-family: AudiType, sans-serif;
    font-size: 16px;
    font-stretch: 105%;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    pointer-events: all;
    margin:0 15px!important;
    opacity: 1;
    padding:0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height:23px;
    border-radius: 0px;
    border-bottom-color: rgb(0, 0, 0);
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-radius: 0px;
}
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination10 span,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination11 span,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination13 span,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination12 span{
	background: none;
    color: rgb(51, 51, 51);
    cursor: pointer;
    font-family: AudiType, sans-serif;
    font-size: 16px;
    font-stretch: 105%;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    pointer-events: all;
    margin:0 15px!important;
    opacity: 1;
    padding:0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height:23px;
    border-radius: 0px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-radius: 0px;
}
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination10 span.swiper-pagination-bullet-active,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination11 span.swiper-pagination-bullet-active,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination12 span.swiper-pagination-bullet-active,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination13 span.swiper-pagination-bullet-active{
	border-bottom-color: rgb(0, 0, 0);
    border-bottom-style: solid;
    border-bottom-width: 2px;
}

.swp--page08 span.swiper-pagination-bullet-active,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination99 span.swiper-pagination-bullet-active,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination11 span.swiper-pagination-bullet-active,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination8 span.swiper-pagination-bullet-active,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination4 span.swiper-pagination-bullet-active,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination3 span.swiper-pagination-bullet-active,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination2 span.swiper-pagination-bullet-active,
.swiper--side--slider .swiper--nav--wrapper .pager--wrapper .swiper-pagination span.swiper-pagination-bullet-active{
    border-bottom-color: rgb(255, 255, 255);
}

.swiper--side--slider .swiper--nav--wrapper .swiper--sub--text{
    width:100%;
}
.swiper--side--slider .swiper--nav--wrapper .swiper--sub--text .swiper-slide{
    background: #000;
    width:100%;
}
.swiper--side--slider .swiper--nav--wrapper .swiper--sub--text .sub--text--contents{
    text-align: left;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    color:#fff;
    background: #000;
    width:100%;
}
.swiper--side--slider .swiper--nav--wrapper .swiper--sub--text .sub--text--contents > h2{
    box-sizing: border-box;
    color: rgb(242, 242, 242);
    font-size: 24px;
    font-stretch: 130%;
    font-weight: 700;
    letter-spacing: -0.36px;
    line-height: 36px;
}
.swiper--side--slider .swiper--nav--wrapper .swiper--sub--text .sub--text--contents > p{
    box-sizing: border-box;
    color: rgb(242, 242, 242);
    font-size: 16px;
    font-stretch: 105%;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 16px;
    word-break: break-all;
}

.swiper--main--visual{
    width:100%;
    height:100%;
    background-size:cover!important;
}
.swiper--main--visual img{
    width:100%;
    max-width:100%;
}

.swiper .swiper--main--visual.vs--01{
 /*   background: url(../../img/models/e-tron/vs--01.jpg) no-repeat center;*/
}
.swiper .swiper--main--visual.vs--02{
    /*background: url(../../img/models/e-tron/vs--02.jpg) no-repeat center;*/
}
.swiper .swiper--main--visual.vs--03{}
.swiper .swiper--main--visual.vs--03 video{
    position: absolute;
    width: 100%;
    left:0px;
    min-height: 100%;
    object-fit: cover;
    overflow: hidden;
}

.swiper .swiper--main--visual.vs--04{
    /*background: url(../../img/models/e-tron/vs--04.jpg) no-repeat center;*/
}



.trim--elect--eng ul{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:96px 0px;
    margin-top:45px;
}
.trim--elect--eng ul li{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width:calc(100% / 3);
    padding:45px 0px;
}
.trim--elect--eng ul li:nth-of-type(2){
    border-left:1px solid #000;
    border-right:1px solid #000;
}

.trim--elect--eng ul li > h2{
    font-family: AudiType, sans-serif;
    font-size: 16px;
    font-stretch: 100%;
    font-weight: 700;
    line-height: 24px;
}
.trim--elect--eng ul li > div{
    padding:45px 0px;
}
.trim--elect--eng ul li > div span{
    font-size: 66px;
    font-weight: 700;
    font-stretch: 100%;
    font-family: AudiType, sans-serif;
}

.trim--elect--eng--sub--text{
    color: rgb(51, 51, 51);
    font-family: AudiType, sans-serif;
    font-size: 16px;
    font-stretch: 105%;
    font-weight: 400;
    line-height: 24px;
    max-width: 1248px;
    margin:0 auto;
    text-align: start;
    width: 1026px;
    margin-top:50px;
}


.text--type--column--2 > h2{
    color: rgb(0, 0, 0);
    font-family: AudiType, sans-serif;
    font-size: 60px;
    font-stretch: 130%;
    font-weight: 700;
    letter-spacing: -0.9px;
    line-height: 84px;
    overflow-wrap: break-word;
    pointer-events: all;
    text-align: start;
    vertical-align: baseline;
}
.text--type--column--2 p{
    color: rgb(51, 51, 51);
    font-family: AudiType, sans-serif;
    font-size: 16px;
    font-stretch: 105%;
    font-weight: 400;
    line-height: 24px;
    max-width: 1248px;
    pointer-events: all;
    text-align: start;
    vertical-align: baseline;
    width: 1026px;
}


.text--type--column--2{
    display: flex;
    max-width:1400px;
    margin:0 auto;
    padding-top:300px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-bottom:150px;
}


.black--type{
    background:#000;
}


.text--type--column--2.ty2{
    background:#000;
}
.text--type--column--2.ty2 >h2,
.text--type--column--2.ty2 >p{
    color:#fff;
}


.text--type--column--2 > button{
    background:transparent;
    white-space:nowrap;
    color:#000;
}

.visual--thumb--wrapper{
    display: flex;
    max-width:1400px;
    margin:0 auto;
    margin-top:260px;
}

.visual--thumb--wrapper.ty2{
    flex-direction: row-reverse;
}

.visual--thumb--wrapper .thumb{
    align-self: flex-start;
    flex: 0 0 50%;
    -moz-box-flex: 0;
}
.visual--thumb--wrapper.ty2 .thumb{
    margin-left:68px;
}
.visual--thumb--wrapper .thumb img{
    width:100%;
    max-width:100%;
}
.visual--thumb--wrapper .text > ul{
    margin-top:35px;
}
.visual--thumb--wrapper .text > ul > li{
    position:relative;
    padding-left:20px;
    font-size: 12px!important;
    line-height: 20px;
}
.visual--thumb--wrapper .text > ul > li:before{
    content:'>';
    display: block;
    position:absolute;
    top:0px;
    left:0px;
}
.visual--thumb--wrapper .text{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    margin-left:68px;
}
.visual--thumb--wrapper.ty2 .text{
    margin-left:0px;
}
.visual--thumb--wrapper .text .s--text{
    font-size:11px;
    margin-top:35px;
    font-size: 12px!important;
    line-height: 20px;
}
.visual--thumb--wrapper .text h2{
    color: rgb(0, 0, 0);
    font-family: AudiType, sans-serif;
    font-size: 44px;
    font-stretch: 130%;
    font-weight: 700;
    letter-spacing: -0.66px;
    line-height: 68px;
    margin-block-end: 16px;
    margin-bottom: 16px;
    text-align: left;
}

.visual--thumb--wrapper button{
    align-items: center;
    appearance: none;
    background-color: rgb(0, 0, 0);
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: flex;
    font-family: AudiType, sans-serif;
    font-size: 16px;
    font-stretch: 105%;
    font-weight: 400;
    justify-content: center;
    line-height: 24px;
    min-width: 144px;
    pointer-events: all;
    text-align: center;
    transition-duration: 0.25s;
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
    user-select: auto;
    vertical-align: middle;
    -moz-box-align: center;
    -moz-box-pack: center;
    height:55px;
    margin-top:45px;
    white-space:nowrap;
    padding:0 15px;
}

.visual--thumb--wrapper button.reverse--btn{
    border:1px solid #000;
    color:#000;
    background:#fff;
}

.swiper3,
.swiper2{
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.swiper2 .swiper--main--visual{
    background-size: cover!important;
}
.swiper2 .vs2--01{
    background: url(../../img/models/e-tron/vs2-01.jpg) no-repeat center;
}
.swiper2 .vs2--02{
    background: url(../../img/models/e-tron/vs2-02.jpg) no-repeat center;
}
.swiper2 .vs2--03{
    background: url(../../img/models/e-tron/vs2-03.jpg) no-repeat center;
}


.swiper--side--slider .swiper--nav--wrapper.ty2{}
.swiper--side--slider .swiper--nav--wrapper.ty2 .swiper--nav--inner--wrap{
    max-width:1400px;
    margin:0 auto;
    display: flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:15px;
    padding-bottom:24px;
}

.swiper--side--slider .swiper--nav--wrapper.ty2 .swiper--nav--inner--wrap .swiper--sub--text{
    max-width:1000px;
}

.swiper--side--slider .swiper--nav--wrapper.ty2 .pager--wrapper{
    padding-top:0px;
    margin-left:45px;
}
.swp3 .sub--text--contents,
.swp5 .sub--text--contents{
    opacity: 0;
    margin-top:45px;
    transition:all .7s cubic-bezier(.26,.27,1,.99);
}
.swp3 .sub--text--contents.actv,
.swp5 .sub--text--contents.actv{
    opacity: 1;
    margin-top:0px;
    transition:all .7s cubic-bezier(.26,.27,1,.99);
}

.swp4 .swiper--main--visual{
    background-size: cover!important;
}
.swp4 .vs3--01{
    background: url(../../img/models/e-tron/vs3-01.jpg) no-repeat center;
}
.swp4 .vs3--02{
    background: url(../../img/models/e-tron/vs3-02.jpg) no-repeat center;
}


.column--box--3{
    display: flex;
    align-items: center;
    justify-content:center;
    overflow:hidden;
    padding: 0px 90px;
}
.column--box--3 > div{
    width:calc(100% / 3);
    position:relative;
    margin:0 5px;
}
.column--box--3 > div img{
    width:100%;
    height:100%;
}

.column--box--3 > div .desc{
    position:absolute;
    top:0px;
    left:0px;
    z-index: 2;
    width:100%;
    height:100%;
    display: flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
}

.column--box--3 > div .desc > h2{
    color: rgb(255, 255, 255);
    cursor: pointer;
    font-family: AudiType, sans-serif;
    font-size: 44px;
    font-stretch: 130%;
    font-weight: 700;
    letter-spacing: -0.66px;
    line-height: 68px;
    pointer-events: all;
    text-align: center;
}
.column--box--3 > div .desc > a{
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-flex;
    font-family: AudiType, sans-serif;
    font-size: 16px;
    font-stretch: 105%;
    font-weight: 400;
    line-height: 24px;
    position: relative;
    text-align: center;
}
.column--box--3 > div:after{
    content:'';
    display: block;
    width:100%;
    height:100%;
    position:absolute;
    bottom:0px;
    left:0px;

    background: rgba(0, 0, 0, 0) linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0)) repeat scroll 0% 0%;
    pointer-events: none;
    opacity: 1;
}

/*.column--box--3 > div:nth-of-type(2){background:#000;}
.column--box--3 > div:nth-of-type(2) img{
    opacity:0;
}*/

.text--cautions--wrap{
    max-width: 1400px;
    width:100%;
    margin:0 auto;
    padding-top:100px;
    padding-bottom:50px;
}


@media (max-width: 1020px){
    .swiper--side--slider{
        display: flex;
        flex-direction: column-reverse;
    }

    .parallax--scrolling--wrap{
        padding-bottom:100%;
        height:auto;
    }
    .itmes--wrapper{
        top:0px;
        transform: translate3d(0px, 35.25px, 0px);
    }
    .itmes--wrap{
        flex-basis: calc(100% - 100px);
        padding:28px;
    }
    .itmes--wrap > h2{
        font-size:24px;
    }

    .trim--elect--eng ul{
        flex-direction:column;
    }
    .trim--elect--eng ul li{
        width:calc(100% - 50px);
        margin:0 25px;
    }
    .trim--elect--eng ul li:nth-of-type(2){
        border-right:0px;
        border-left:0px;
        border-top:1px solid #ddd;
        border-bottom:1px solid #ddd;
    }

    .trim--elect--eng ul li > div {
        padding: 10px 0px;
    }
    .trim--elect--eng ul li > div span{
        font-size:27px;
    }

    .title--detail--info{
        padding-top:35px;
    }
    .title--detail--info h2{
        font-size:27px;
        line-height:37px;
    }

    .parallax--scrolling--wrap > img{
        top:50%;
        transform: translateY(-50%);
    }


    .visual--thumb--wrapper{
        flex-direction: column;
        padding:25px;
        margin-top:45px;
    }
    .visual--thumb--wrapper .text{
        margin-left:0px;
    }
    .visual--thumb--wrapper .text h2{
        font-size:28px;
    }
    .visual--thumb--wrapper button{
        margin-top:15px;
    }

    .text--type--column--2{
        padding:75px 25px 45px;
        box-sizing: border-box;
        width: 100%;
    }
    .text--type--column--2 p{
        width:100%;
    }

    .trim--elect--eng--sub--text{
        width:100%;
        padding:0 25px;
        box-sizing: border-box;
    }

    .column--box--3{
        padding:25px;
        flex-direction: column;
    }
    .column--box--3 > div{
        width:100%;
        margin-bottom:25px;
    }

    .visual--thumb--wrapper.ty2{
        flex-direction:column;
    }
    .visual--thumb--wrapper.ty2 .thumb{
        margin-left:0px;
    }

    .text--cautions--wrap{
        padding:45px 25px;
        box-sizing: border-box
    }

    .swiper--side--slider .swiper--nav--wrapper.ty2 .pager--wrapper{
        margin-left:0px;
    }

    .swiper--side--slider .swiper--nav--wrapper.ty2 .swiper--nav--inner--wrap{
        flex-direction:column-reverse;
        max-width:100%;
    }

}
.swiper--contents > div{width: 100%;}
p{font-size: 12px; line-height: 20px;}
.slide--wrapper--black--type.slide--wrapper{
    background: #000;
}
.slide--wrapper--black--type.slide--wrapper .swiper-button-next svg,
.slide--wrapper--black--type.slide--wrapper .swiper-button-prev svg,
.slide--wrapper--black--type.slide--wrapper .desc--wrapper h2,
.slide--wrapper--black--type.slide--wrapper .desc--wrapper > div{
    color:#fff!important;
}

.slide--wrapper .swiper-pagination span{
    color:#fff!important;
    opacity: .5!important;
}

.slide--wrapper--black--type.slide--wrapper .swiper-pagination span.swiper-pagination-bullet-active{
    border-bottom-color: #fff!important;
    color:#fff!important;
    opacity: 1!important;
}