@charset "UTF-8";.carSpinIntro{color:#fff;position:relative;overflow:hidden}
.carSpinIntro .hidden{display:none;visibility:hidden}
.carSpinIntro .page3d{height:100vh;position:relative;isolation:isolate;backface-visibility:hidden;font-family:"audi-zh-bold"}
.carSpinIntro .page3d--1440.page3d .carlist{margin-top:-6.8vw}
@media screen and (min-width:1920px),screen and (orientation:portrait) and (min-width:1920px){.carSpinIntro .page3d--1440.page3d .carlist{margin-top:-9.6vw}
}
@media screen and (min-width:2100px),screen and (orientation:portrait) and (min-width:2100px){.carSpinIntro .page3d--1440.page3d .carlist{margin-top:-8.2vw}
}
@media screen and (min-width:3840px),screen and (orientation:portrait) and (min-width:3840px){.carSpinIntro .page3d--1440.page3d .carlist{margin-top:-9.2vw}
}
@media(min-width:1600px) and (max-width:1799px){.carSpinIntro .page3d--1440.page3d .carlist{margin-top:-8.4vw}
}
@media(min-width:1800px) and (max-width:1919px){.carSpinIntro .page3d--1440.page3d .carlist{margin-top:-9.2vw}
}
@media screen and (min-width:744px) and (max-width:1279px){.carSpinIntro .page3d--1440.page3d .carlist{width:95vw;margin-top:-8vh}
}
@media screen and (orientation:portrait) and (min-width:744px) and (max-width:1279px){.carSpinIntro .page3d--1440.page3d .carlist{width:114vw;margin-top:-5.6vh}
}
@media screen and (orientation:landscape) and (max-width:1023px) and (max-height:723px),screen and (max-height:1003px) and (max-width:743px){.carSpinIntro .page3d--1440.page3d .carlist{width:133.3333333333vw;height:75.2vw;margin-top:-1vh}
}
.carSpinIntro .page3d .page3d-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background-size:contain;background-position:center 60%;background-repeat:no-repeat;pointer-events:none;background-image:url(clientlibs/resources/bg.png)}
@media screen and (min-width:744px) and (max-width:1279px){.carSpinIntro .page3d .page3d-bg{background-image:url(clientlibs/resources/bg_pl.png)}
}
@media screen and (orientation:portrait) and (min-width:744px) and (max-width:1279px){.carSpinIntro .page3d .page3d-bg{background-image:url(clientlibs/resources/bg_pp.png)}
}
@media screen and (orientation:landscape) and (max-width:1023px) and (max-height:723px),screen and (max-height:1003px) and (max-width:743px){.carSpinIntro .page3d .page3d-bg{background-image:url(clientlibs/resources/bg_m.png);background-size:100% auto}
}
.carSpinIntro .page3d .carlist{width:95vw;aspect-ratio:16/9;position:absolute;left:50%;top:50%;margin-top:1.8vw;z-index:8;pointer-events:none}
@media screen and (min-width:1920px),screen and (orientation:portrait) and (min-width:1920px){.carSpinIntro .page3d .carlist{margin-top:-1.2vw}
}
@media screen and (min-width:3840px),screen and (orientation:portrait) and (min-width:3840px){.carSpinIntro .page3d .carlist{margin-top:1vw}
}
@media(min-width:1600px) and (max-width:1799px){.carSpinIntro .page3d .carlist{margin-top:.6vw}
}
@media(min-width:1800px) and (max-width:1919px){.carSpinIntro .page3d .carlist{margin-top:-1.2vw}
}
@media screen and (min-width:744px) and (max-width:1279px){.carSpinIntro .page3d .carlist{width:95vw;margin-top:2vh}
}
@media screen and (orientation:portrait) and (min-width:744px) and (max-width:1279px){.carSpinIntro .page3d .carlist{width:114vw;margin-top:0vh}
}
@media screen and (orientation:landscape) and (max-width:1023px) and (max-height:723px),screen and (max-height:1003px) and (max-width:743px){.carSpinIntro .page3d .carlist{width:144.8vw;height:81.6vw;margin-top:5vh}
}
.carSpinIntro .page3d .carlist .car{position:absolute;left:0;top:0;width:100%;display:none}
.carSpinIntro .page3d .carlist .car.active{display:block}
.carSpinIntro .page3d .carlist .car .showpc{display:block}
@media screen and (orientation:landscape) and (max-width:1023px) and (max-height:723px),screen and (max-height:1003px) and (max-width:743px){.carSpinIntro .page3d .carlist .car .showpc{display:none}
}
.carSpinIntro .page3d .carlist .car .showm{display:none}
@media screen and (orientation:landscape) and (max-width:1023px) and (max-height:723px),screen and (max-height:1003px) and (max-width:743px){.carSpinIntro .page3d .carlist .car .showm{display:block}
}
.carSpinIntro .page3d .carlist .car .che{width:100%;position:relative;height:auto;display:block;z-index:5}
.carSpinIntro .page3d .carlist .car .lungu{width:100%;position:absolute;left:0;top:0;height:auto;display:block;z-index:10}
.carSpinIntro .page3d .carlist .car .shadow{width:100%;position:absolute;left:0;top:0;height:auto;display:block;z-index:6}
.carSpinIntro .page3d .drag-zone{position:absolute;left:0;top:50%;transform:translate(0,-50%);width:100%;height:55%;z-index:9}
@media screen and (orientation:portrait) and (min-width:744px) and (max-width:1279px){.carSpinIntro .page3d .drag-zone{height:50%}
}
@media screen and (orientation:landscape) and (max-width:1023px) and (max-height:723px),screen and (max-height:1003px) and (max-width:743px){.carSpinIntro .page3d .drag-zone{height:40%;top:55%}
}
.carSpinIntro .page3d .indicator-360{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);z-index:10;height:25px;width:508px;background-image:url(clientlibs/resources/360.png);background-size:auto 100%;background-position:center;background-repeat:no-repeat;pointer-events:none}
@media screen and (min-width:744px) and (max-width:1279px){.carSpinIntro .page3d .indicator-360{height:28px;width:391px;background-image:url(clientlibs/resources/360_pad.png);bottom:16%}
}
@media screen and (orientation:portrait) and (min-width:744px) and (max-width:1279px){.carSpinIntro .page3d .indicator-360{height:28px;width:391px;background-image:url(clientlibs/resources/360_pad.png);bottom:30%}
}
@media screen and (orientation:landscape) and (max-width:1023px) and (max-height:723px),screen and (max-height:1003px) and (max-width:743px){.carSpinIntro .page3d .indicator-360{height:10px;width:204px;background-image:url(clientlibs/resources/360_m.png);bottom:auto;top:50%;margin-top:46vw}
}
.carSpinIntro .page3d .car-big-text{position:absolute;left:50%;top:0;transform:translate(-50%,0);z-index:5;width:100vw;height:100vh}
@media screen and (orientation:portrait) and (min-width:744px) and (max-width:1279px){.carSpinIntro .page3d .car-big-text{height:100vh}
}
@media screen and (orientation:landscape) and (max-width:1023px) and (max-height:723px),screen and (max-height:1003px) and (max-width:743px){.carSpinIntro .page3d .car-big-text{height:100vh}
}
.carSpinIntro .page3d .car-big-text .big-textlist{display:flex;flex-direction:row;position:absolute;top:50%;left:50%;margin-top:-10vw;transform:translate(-50%,-50%);height:auto}
@media screen and (min-width:1920px),screen and (orientation:portrait) and (min-width:1920px){.carSpinIntro .page3d .car-big-text .big-textlist{margin-top:-12.4vw}
}
@media screen and (min-width:3840px),screen and (orientation:portrait) and (min-width:3840px){.carSpinIntro .page3d .car-big-text .big-textlist{margin-top:-11.4vw}
}
@media(min-width:1600px) and (max-width:1799px){.carSpinIntro .page3d .car-big-text .big-textlist{margin-top:-11.4vw}
}
@media(min-width:1800px) and (max-width:1919px){.carSpinIntro .page3d .car-big-text .big-textlist{margin-top:-12vw}
}
@media screen and (min-width:744px) and (max-width:1279px){.carSpinIntro .page3d .car-big-text .big-textlist{margin-top:-15vh}
}
@media screen and (orientation:portrait) and (min-width:744px) and (max-width:1279px){.carSpinIntro .page3d .car-big-text .big-textlist{margin-top:-10vh}
}
@media screen and (orientation:landscape) and (max-width:1023px) and (max-height:723px),screen and (max-height:1003px) and (max-width:743px){.carSpinIntro .page3d .car-big-text .big-textlist{margin-top:-4vh;white-space:normal;word-wrap:break-word}
}
.carSpinIntro .page3d .car-big-text .big-textlist .big-name{font-family:"audi_extended_normal_4.03";color:rgba(255,255,255,0.2);font-size:15.625vw;line-height:1;white-space:nowrap;display:flex;align-items:flex-start;letter-spacing:30px}
@media screen and (min-width:744px) and (max-width:1279px){.carSpinIntro .page3d .car-big-text .big-textlist .big-name{font-size:20.1680672269vw;letter-spacing:clamp(2px,1.6806722689vw,20px)}
}
@media screen and (orientation:portrait) and (min-width:744px) and (max-width:1279px){.carSpinIntro .page3d .car-big-text .big-textlist .big-name{font-size:24.78vw;letter-spacing:clamp(2px,2.4096385542vw,20px)}
}
@media screen and (orientation:landscape) and (max-width:1023px) and (max-height:723px),screen and (max-height:1003px) and (max-width:743px){.carSpinIntro .page3d .car-big-text .big-textlist .big-name{font-weight:400;font-size:19.7333333333vw;line-height:100%;letter-spacing:clamp(2px,2.6666666667vw,10px)}
}
.carSpinIntro .page3d .car-big-text .big-textlist .big-name .small{font-weight:400;font-size:clamp(22px,2.0833333333vw,65px);letter-spacing:0;top:clamp(90px,9.0625vw,270px);line-height:1;margin-top:1.6vw;white-space:normal;word-wrap:break-word}
@media screen and (min-width:1920px),screen and (orientation:portrait) and (min-width:1920px){.carSpinIntro .page3d .car-big-text .big-textlist .big-name .small{margin-top:1.7vw}
}
@media screen and (min-width:2100px),screen and (orientation:portrait) and (min-width:2100px){.carSpinIntro .page3d .car-big-text .big-textlist .big-name .small{margin-top:1.7vw}
}
@media screen and (min-width:3840px),screen and (orientation:portrait) and (min-width:3840px){.carSpinIntro .page3d .car-big-text .big-textlist .big-name .small{margin-top:1.65vw}
}
@media(min-width:1600px) and (max-width:1799px){.carSpinIntro .page3d .car-big-text .big-textlist .big-name .small{margin-top:1.5vw}
}
@media(min-width:1800px) and (max-width:1919px){.carSpinIntro .page3d .car-big-text .big-textlist .big-name .small{margin-top:1.5vw}
}
@media screen and (min-width:744px) and (max-width:1279px){.carSpinIntro .page3d .car-big-text .big-textlist .big-name .small{margin-top:2.2vw}
}
@media screen and (orientation:portrait) and (min-width:744px) and (max-width:1279px){.carSpinIntro .page3d .car-big-text .big-textlist .big-name .small{margin-top:2.6vw}
}
@media screen and (orientation:landscape) and (max-width:1023px) and (max-height:723px),screen and (max-height:1003px) and (max-width:743px){.carSpinIntro .page3d .car-big-text .big-textlist .big-name .small{display:block;font-weight:400;font-size:3.8666666667vw;line-height:100%;letter-spacing:0;margin-top:1.8vw}
}
.carSpinIntro .page3d .car-big-text .big-textlist .big-name .small.small-q6l{margin-left:-4.1666666667vw}
@media screen and (orientation:landscape) and (max-width:1023px) and (max-height:723px),screen and (max-height:1003px) and (max-width:743px){.carSpinIntro .page3d .car-big-text .big-textlist .big-name .small.small-q6l{margin-left:2.6666666667vw}
}