/** -------------------------------
 * common
 */

.sp {
  display: none;
}

.section {
  clear: both;
  max-width: 1170px;
  box-sizing: content-box;
  margin: 0 auto;
  margin-top: 4%;
  padding: 0 3.667%;
}
.section > .wrap {
  display: block;
}
.section.articleBasicModule {
  padding-top: 0;
  max-width: 1280px;
  margin-top: 0;
}
.section.articleBasicModule > .wrap {
  max-width: 1170px;
  margin-right: auto;
  margin-left: auto;
}


/** -------------------------------
 * second
 */

.blockModule {
  clear: both;
  max-width: 1170px;
  box-sizing: content-box;
  margin: 0 auto;
  padding: 0 3.667%;
}
.blockModule > .wrap {
  display: block;
}
.blockModule .header {
  position: relative;
  padding-top: 1.6%;
}
.blockModule .header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: calc(50/1170 * 100%);
  height: 4px;
  background-color: #c3002c;
}
.blockModule .header h1 {
  display: table;
}
.blockModule .header span {
  display: table-cell;
  font-size: 2.0em;
  font-weight: bold;
  line-height: 1.1;
  vertical-align: middle;
  letter-spacing: 0.03em;
}
.blockModule .headerWrap .button {
  width: 100%;
  margin-top: calc(25/1170 * 100%);
}
.blockModule .button span {
  padding-right: 18px;
  background-image: url(/SP/SERENA/VLP_2/IMAGES/arrow_next_red_thin.png);
  background-repeat: no-repeat;
  background-position: right;
  background-size: auto 15px;
  font-size: 1.6em;
  font-weight: bold;
  color: #333;
  line-height: 1.5;
  word-break: break-all;
}
.blockModule .button a:hover span {
  color: #c3002f;
}


/** -------------------------------
 * intelligent_mobility 
 */



#intelligent_main {
	width: 100%;
	margin-top: calc(25/1500 * 100%);
	padding-top: calc(960/1500 * 100%);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100%;
	background-image: url(/SP/SERENA/VLP_2/IMAGES/performance_safety/intelligent_mobility_img_1_pc.png);
	position: relative;
}

#intelligent_main .wrap {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

#intelligent_main h1 {
	line-height: 0;
}

#intelligent_main h1 img.pc {
	width: calc(527/1500 * 100%);
	display: block;
	height: auto;
	margin: auto;
}

#intelligent_main .functions {
	width: 100%;
	height: calc(666/960 * 100%);
	position: relative;
	overflow: hidden;
}

#intelligent_main .functions .serena {
	width: calc(112/1500 * 100%);
	height: calc(258/666 * 100%);
	position: absolute;
	top: calc(363/666 * 100%);
	left: 50%;
	transform-origin: center;
	transform: translate(-50%, -50%);
	transition: all .7s cubic-bezier(0, 1, 1, 1) 0s;
	opacity: 1;
}

#intelligent_main .functions .serena.hide {
	opacity: 0;
	top: 65%;
}

#intelligent_main .functions .serena img {
	width: 100%;
}

#intelligent_main .functions .dummy {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	background-color: #ec2626;
	display: none;
}

#intelligent_main .functions .caution {
	font-size: 1.2em;
	text-align: center;
	position: absolute;
	top: 2.5%;
	right: 1%;
	text-align: right;
	width: 100%;
	color: #666;
	opacity: 0;
	transition: all 2s cubic-bezier(0, 1, 1, 1) 0s;
}

#intelligent_main .functions .caution.show {
	opacity: .7;
}

#intelligent_main .functions .background-circle {
	width: calc(450/1500 * 100%);
	height: calc(450/666 * 100%);
	position: absolute;
	top: calc(363/666 * 100%);
	left: 50%;
	transform-origin: center;
	transform: translate(-50%, -50%) scale(1);
	border: 4px solid #fff;
	border-radius: 50%;
	opacity: 0;
	/*transition: all .45s ease-out 0s;*/
	transition: opacity 6s linear 0s;
}

#intelligent_main .functions .background-circle.show {
	/*transform: translate(-50%, -50%) scale(1);*/
	opacity: 1;
}

#intelligent_main .functions .animetion-container {
	width: calc(224/1500 * 100%);
	height: calc(224/666 * 100%);
	position: absolute;
	top: calc(363/666 * 100%);
	left: 50%;
}

#intelligent_main .function-icon {
	width: calc(76/224 * 100%);
	padding-top: calc(76/224 * 100%);
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 1;
	transition: opacity 1.2s ease-out 0s;
}

#intelligent_main .function-icon.hide {
	opacity: 0;
}

#intelligent_main .function-icon .icon {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	overflow: hidden;
	pointer-events: auto;
	cursor: pointer;
	background-color: #ffffff;
}

#intelligent_main .function-icon span {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	overflow: hidden;
}

#intelligent_main .function-icon .image,
#intelligent_main .function-icon .inner_shadow,
#intelligent_main .function-icon .gif {
	width: calc(100% - 1px);
	height: calc(100% - 1px);
	left: 1px;
	top: 1px;
}

#intelligent_main .function-icon .gif {
	opacity: 0;
	display: none;
}

#intelligent_main .function-icon .gif.show {
	opacity: 1;
	display: block;
	transition: opacity 1s ease-in-out 0s;
}

#intelligent_main .function-icon .border {
	box-sizing: border-box;
	border: 3px solid #dcdcdc;
	transition: opacity .8s cubic-bezier(0, 1, 1, 1) 0s, border .8s cubic-bezier(0, 1, 1, 1) 0s;
}

#intelligent_main .animetion-container .function-icon .border {
	opacity: 0;
}

#intelligent_main .function-icon a:hover .border {
	border: 3px solid #3eb9ea;
	opacity: 1;
}

#intelligent_main .function-icon .image {
	transition: opacity 3.5s cubic-bezier(0, 1, 1, 1) 0s;
	opacity: 1;
}

#intelligent_main .function-icon .border {
	
}

#intelligent_main .function-icon .image.hide,
#intelligent_main .function-icon .border.hide {
	opacity: 0;
}

#intelligent_main .function-icon span img {
	width: 100%;
	height: auto;
}

/* @group labels */

#intelligent_main .functions .labels {
	width: 100%;
	height: 100%;
	position: relative;
	font-size: 1.15em;
	line-height: 1.2;
	/*font-feature-settings: 'palt';
	letter-spacing: 1px;*/
}

#intelligent_main .functions .labels .function-label {
	position: absolute;
	display: inline-block;
	opacity: 0;
	transition: opacity 2s cubic-bezier(0, 1, 1, 1) 0s;
}

#intelligent_main .functions .labels .function-label.show {
	opacity: 1;
}

#intelligent_main .functions .labels .left {
	text-align: right;
	transform: translate(-100%, 0);
}

#intelligent_main .functions .labels .label-1 {
	top: 10.5%;
	left: 50%;
	transform: translate(-50%, 0);
	line-height: 2;
	text-align: center;
}

#intelligent_main .functions .labels .label-2 {
	top: 23.5%;
	left: 60.8%;
}

#intelligent_main .functions .labels .label-3 {
	top: 34.5%;
	left: 66.5%;
}

#intelligent_main .functions .labels .label-4 {
	top: 52.5%;
	left: 68.3%;
}

#intelligent_main .functions .labels .label-5 {
	top: 69.3%;
	left: 66.5%;
}

#intelligent_main .functions .labels .label-6 {
	top: 86.5%;
	left: 58%;
}

#intelligent_main .functions .labels .label-7 {
	top: 86.5%;
	left: 42%;
}

#intelligent_main .functions .labels .label-8 {
	top: 69.3%;
	left: 33.5%;
}

#intelligent_main .functions .labels .label-9 {
	top: 52.5%;
	left: 31.7%;
}

#intelligent_main .functions .labels .label-10 {
	top: 34.5%;
	left: 33.5%;
}

#intelligent_main .functions .labels .label-11 {
	top: 23.5%;
	left: 39.2%;
}

/* @end labels */



/* @group infos */

#intelligent_main .functions .infos {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	font-size: 1.3em;
	line-height: 1.2;
	/*font-feature-settings: 'palt';
	letter-spacing: 1px;*/
}

#intelligent_main .function-info {
	position: absolute;
	display: inline-block;
	opacity: 0;
	transition: opacity .9s cubic-bezier(0, 1, 1, 1) 0s, margin .5s cubic-bezier(0, 1, 1, 1) 0s;
	background-color: rgba(255, 255, 255, 0.9);
	border: .18em solid #3eb9ea;
	padding: 1em 2.5em .8em;
	box-sizing: border-box;
	min-width: calc(250/1170 * 100%);
	text-align: center;
	transform: translate(0, -50%);
	pointer-events: none;
}

#intelligent_main .function-info.show {
	opacity: 1 !important;
	margin: 0 !important;
	transition: opacity .4s cubic-bezier(0, 1, 1, 1) 0s, margin .2s cubic-bezier(0, 1, 1, 1) 0s;
}

#intelligent_main .function-info.left {
	transform: translate(-100%, -50%);
}

#intelligent_main .function-info::before {
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
}

#intelligent_main .function-info::after {
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
}


#intelligent_main .function-info.f-t::before {
	left: 50%;
	top: -.9em;
	transform: translate(-50%, 0);
	border-bottom: 0.8em solid #3eb9ea;
	border-right: 0.6em solid transparent;
	border-left: 0.6em solid transparent;
}

#intelligent_main .function-info.f-t::after {
	left: 50%;
	top: -.6em;
	transform: translate(-50%, 0);
	border-bottom: 0.8em solid #fff;
	border-right: 0.6em solid transparent;
	border-left: 0.6em solid transparent;
}

#intelligent_main .function-info.f-b::before {
	left: 50%;
	bottom: -.9em;
	transform: translate(-50%, 0);
	border-top: 0.8em solid #3eb9ea;
	border-right: 0.6em solid transparent;
	border-left: 0.6em solid transparent;
}

#intelligent_main .function-info.f-b::after {
	left: 50%;
	bottom: -.6em;
	transform: translate(-50%, 0);
	border-top: 0.8em solid #fff;
	border-right: 0.6em solid transparent;
	border-left: 0.6em solid transparent;
}

#intelligent_main .function-info.f-r::before {
	top: 50%;
	right: -.9em;
	transform: translate(0, -50%);
	border-left: 0.8em solid #3eb9ea;
	border-top: 0.6em solid transparent;
	border-bottom: 0.6em solid transparent;
}

#intelligent_main .function-info.f-r::after {
	top: 50%;
	right: -.6em;
	transform: translate(0, -50%);
	border-left: 0.8em solid #fff;
	border-top: 0.6em solid transparent;
	border-bottom: 0.6em solid transparent;
}

#intelligent_main .function-info.f-l::before {
	top: 50%;
	left: -.9em;
	transform: translate(0, -50%);
	border-right: 0.8em solid #3eb9ea;
	border-top: 0.6em solid transparent;
	border-bottom: 0.6em solid transparent;
}

#intelligent_main .function-info.f-l::after {
	top: 50%;
	left: -.6em;
	transform: translate(0, -50%);
	border-right: 0.8em solid #fff;
	border-top: 0.6em solid transparent;
	border-bottom: 0.6em solid transparent;
}


#intelligent_main .infos .info-1 {
	top: 6.8%;
	left: 50%;
	transform: translate(-50%, 0);
	margin-top: -.8em;
}

#intelligent_main .infos .info-2 {
	top: 24.8%;
	left: 60.8%;
	margin-left: .8em;
}

#intelligent_main .infos .info-3 {
	top: 37.4%;
	left: 66.25%;
	margin-left: .8em;
}

#intelligent_main .infos .info-4 {
	top: 54.35%;
	left: 68.25%;
	margin-left: .8em;
}

#intelligent_main .infos .info-5 {
	top: 71.6%;
	left: 66.26%;
	margin-left: .8em;
}

#intelligent_main .infos .info-6 {
	top: 87.3%;
	left: 58.15%;
	margin-left: .8em;
}

#intelligent_main .infos .info-7 {
	top: 87.3%;
	left: 41.8%;
	margin-left: -.8em;
}

#intelligent_main .infos .info-8 {
	top: 71.6%;
	left: 33.79%;
	margin-left: -.8em;
}

#intelligent_main .infos .info-9 {
	top: 54.35%;
	left: 31.75%;
	margin-left: -.8em;
}

#intelligent_main .infos .info-10 {
	top: 37.4%;
	left: 33.8%;
	margin-left: -.8em;
}

#intelligent_main .infos .info-11 {
	top: 24.8%;
	left: 39.2%;
	margin-left: -.8em;
}

/* @end infos */



#intelligent_main .pickup_functions {
	height: calc(295/1058 * 100%);
}

#intelligent_main .pickup_functions h2 {
	font-size: 2em;
	text-align: center;
	padding-top: calc(40/1500 * 100%);
	margin-bottom: 0.8em;
}

#intelligent_main .pickup_functions .pickup-list {
	width: calc(560/1500 * 100%);
	margin: 0 auto;
	position: relative;
	display: flex;
	justify-content: space-between;
}

#intelligent_main .pickup_functions .pickup-list li {
	width: calc(170/560 * 100%);
	position: relative;
	padding-bottom: 3em;
}

#intelligent_main .pickup_functions .pickup-list li .function-icon {
	position: relative;
	width: calc(76/170 * 100%);
	padding-top: calc(76/170 * 100%);
	margin: 0 auto;
	margin-bottom: 0.7em;
}

#intelligent_main .pickup_functions .pickup-list li .function-icon .icon {
	transform: translate(0, 0);
}

#intelligent_main .pickup_functions .pickup-list li .label {
	font-size: 1.1em;
	line-height: 1.3;
	text-align: center;
}


#intelligent_main .pickup_functions .caution {
	font-size: 1.2em;
	text-align: center;
	margin-top: calc(25/1500 * 100%);
	color: #666;
}


#intelligent_main .slide_functions {
	display: none;
}

#adaptiveLedHeadLight .inner .note,
#pedalMisapplicationt .inner .note{
    font-size: 1.6em;
    margin-top: calc(30/1170 * 100%);
}


.pickup-list .option-label {
	font-size: 1.1em !important;
	width: 86%;
	border: 1px solid #000;
	line-height: 1;
	text-align: center;
	margin: 0 auto;
	padding: 0.3em 0.2em;
	position: absolute;
	left: 7%;
	bottom: 0;
}

#intelligent_main .pickup-list .function-info {
	font-size: 1.3em;
	min-width: calc(250/170 * 100%);
	left: 50%;
	top: 57%;
	transform: translate(-50%, 0);
	z-index: 80;
	white-space: nowrap;
	margin-top: .8em;
}


@media screen and (min-width: 581px) and (max-width: 1100px) {
	#intelligent_main .pickup_functions .pickup-list {
		width: calc(920/1100 * 100%) !important;
	}
	
	#intelligent_main .pickup_functions .pickup-list li {
		width: calc(220/920 * 100%) !important;
	}
	
	#intelligent_main .pickup_functions .pickup-list li .function-icon {
		position: relative;
		width: calc(55/220 * 100%) !important;
		padding-top: calc(55/220 * 100%) !important;
		margin: 0 auto;
		margin-bottom: 0.7em;
	}
	
	.pickup-list .option-label {
		width: 94%;
		left: 3%;
	}
}



.label-1 .option-label {
	font-size: 1em;
	padding: 0.3em 0.55em;
	display: inline-block;
	position: static;
	width: auto;
	margin-left: 0.15em;
}

.label-1 .option-label:first-of-type {
	margin-right: 0.6em;
}

.button .option-label {
	width: auto;
	position: static;
	margin-top: -.3em;
}


.section.customModule .button .label {
	font-size: 1.6em;
	font-weight: bold;
	color: #c3002c;
	margin-bottom: .5em;
}


#adaptiveLedHeadLight .button .label,
#intelligentLiBsi .button .label,
#pedalMisapplicationt .button .label {
	font-size: 2.4em;
	margin-bottom: 0;
}

#adaptiveLedHeadLight .button a > span,
#intelligentLiBsi .button a > span,
#pedalMisapplicationt .button a > span {
	font-size: 2.4em;
	background: none;
	padding-right: 0;
}

#adaptiveLedHeadLight .button a > span:after,
#intelligentLiBsi .button a > span:after,
#pedalMisapplicationt .button a > span:after {
    font-size: .8em;
    content: "";
    color: #c3002c;
    vertical-align: middle;
    position: relative;
	top: -.1em;
    padding-left: .3em;
    margin-top: 0px;
    display: inline-block;
	font-family: icon-Nissan-Global;
}

.section.customModule .content > .subtitle {
	margin-top: calc(20/1170 * 100%);
	margin-bottom: calc(5/1170 * 100% * -1);
}


.articleGroup .articleGroupColumn:nth-of-type(1) {
	width: 65%;
}

.articleGroup .articleGroupColumn:nth-of-type(2) {
	width: 35%;
}

.articleGroup .section .header:before {
	width: calc(50/746 * 100%);
	height: 4px;
}

#ASV {
	margin-top: calc(60/1170 * 100%);
	margin-bottom: calc(60/1170 * 100%);
}

#ASV .inner {
	position: relative;
}

#ASV .moreBtn {
	position: absolute;
	top: 40%;
	left: 52.5%;
	transform: translate(30%, -50%);
	text-align: center;
}

#ASV .moreBtn a {
	position: relative;
	padding: 1.2em 45px 1.2em 20px;
	font-size: 1.4em;
	color: #fff;
	background-color: #c3002f;
	display: inline-block;
}

#ASV .moreBtn a::after {
	font-size: 0.8rem;
	color: #fff;
	line-height: 1;
	position: absolute;
	top: 50%;
	right: 20px;
	overflow: hidden;
	speak: none;
  margin-top: -0.6em;
  width: 1.1em;
  height: 1.1em;
  background: url(/SP/SERENA/VLP_2/IMAGES/arrow_next_white_thin.png) no-repeat center center;
  background-size: contain;
  content: "";
}

#ASV .moreBtn a:hover {
	background-color: #920023;
}



.section.customModule .simple-player {
    position: relative;
	margin-top: calc(25/1170 * 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.section.customModule .simple-player .movie {
	line-height: 0;
	padding-top: 0;
	margin-top: 0;
}

.section.customModule .simple-player video {
	width: 100%;
	height: auto;
	background-color: #000;
	cursor: pointer;
	/*object-fit: cover;*/
}

.section.customModule .simple-player .imageWrap {
	position: relative;
	display: block;
	margin-top: calc(25/1170 * 100%);
	padding-top: calc(480/1170 * 100%);
}

.section.customModule .simple-player .imageWrap .image,
.section.customModule .simple-player .imageWrap .image_nim {
	margin-top: 0;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}


.section.customModule .simple-player + .inner,
.section.customModule .simple-player .imageWrap + .inner {
	margin-top: calc(25/1170 * 100%);
}

.section.customModule .simple-player .image {
	margin-top: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgb(255, 255, 255);
	display: flex;
	align-items: center;
	cursor: pointer;
}

.section.customModule .simple-player .image img {
	width: 100%;
	height: auto;
}


/** -------------------------------
 * customize
 */

#intelligent_wrap {
  margin: 0 auto;
  max-width: 1500px;
  font-size: 10px;
}

@media screen and (min-width: 581px) and (max-width: 1100px) {
  #intelligent_wrap {
    font-size: 0.781861vw;
  }
}