
/** -------------------------------
 * common
 */

.section {
  clear: both;
  margin-top: calc(40/375 * 100vw);
  margin-left: calc(15/375 * 100vw);
  margin-right: calc(15/375 * 100vw);
}
.section > .wrap {
  display: block;
}
.section.articleBasicModule {
  margin-right: 0;
  margin-left: 0;
}
.section.articleBasicModule .inner {
  margin-left: calc(15/375 * 100vw);
  margin-right: calc(15/375 * 100vw);
}


/** -------------------------------
 * second
 */

.blockModule > .wrap {
  padding: 0 0;
}
.blockModule .header {
  position: relative;
  margin-left: calc(15/375 * 100vw);
  margin-right: calc(15/375 * 100vw);
}
.blockModule .header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 18.667%;
  height: 4px;
  border-top: 3.99px solid #c3002c;
}
.blockModule .header h1 {
  display: block;
  width: 100%;
}
.blockModule .header span {
  display: block;
  padding: 4.5% 0 0;
  margin-bottom: calc(17/375 * 100vw);
  font-size: 17px;
  font-size: 4.533vw;
  font-weight: bold;
}
.blockModule .button {
  width: auto;
  padding-top: calc(17/375 * 100vw);
  margin-left: calc(15/375 * 100vw);
  margin-right: calc(15/375 * 100vw);
}
.blockModule .button span {
  padding-right: 3.2vw;
  background-image: url(/SP/SERENA/VLP_2/IMAGES/arrow_next_red_thin.png);
  background-repeat: no-repeat;
  background-position: right;
  background-size: auto 2.666vw;
  font-size: 14px;
  font-size: 3.636vw;
  font-weight: bold;
  color: #000;
  line-height: 1.5;
  word-break: break-all;
}





/** -------------------------------
 * intelligent_mobility 
 */


#nim_front {
	margin-top: calc(40/375 * 100vw);
	margin-right: 0;
	margin-left: 0; 
}

#nim_front .header > h1 > span {
	margin-bottom: 0;
}

#nim_front .headerWrap .button {
	padding-top: 10px;
}



#intelligent_main {
	width: 100%;
	margin-top: calc(15/375 * 100vw);
/* 	padding-top: calc(460/375 * 100vw); */
	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_sp.png);
	position: relative;
	overflow: hidden;
}

#intelligent_main .wrap {
	width: 100%;
	height: 100%;
	position: relative;
	left: 0;
	top: 0;
}

#intelligent_main h1 {
	line-height: 0;
}

#intelligent_main h1 img {
	width: 100%;
	height: auto;
	margin: auto;
}

#intelligent_main .functions {
	width: 100%;
	height: calc(274/375 * 100vw);
	position: relative;
	overflow: hidden;
}

#intelligent_main .functions .serena {
	width: calc(53/375 * 100vw);
	height: calc(120/375 * 100vw);
	position: absolute;
	top: 50%;
	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 {
	display: none;
}

#intelligent_main .functions .background-circle {
	width: calc(214/375 * 100vw);
	height: calc(214/375 * 100vw);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 3px solid #fff;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 4s ease-out 0s;
}

#intelligent_main .functions .background-circle.show {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

#intelligent_main .functions .animetion-container {
	width: calc(106/375 * 100vw);
	height: calc(106/375 * 100vw);
	position: absolute;
	top: 50%;
	left: 50%;
}

#intelligent_main .function-icon {
	width: calc(35/375 * 100vw);
	padding-top: calc(35/375 * 100vw);
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 1;
	transition: opacity 1.5s ease-out 0s;
}

#intelligent_main .slide_functions .function-icon {
	pointer-events: auto;
}

#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;
	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% - 2px);
	height: calc(100% - 2px);
	left: 1px;
	top: 1px;
}

#intelligent_main .function-icon .gif {
	opacity: 0;
	display: none;
	transition: opacity .2s ease-in-out 0s;
}

#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: 2px solid #dcdcdc;
}

#intelligent_main .function-icon .image {
	transition: opacity 3.5s cubic-bezier(0, 1, 1, 1) 0s;
	opacity: 1;
}

#intelligent_main .function-icon .border {
	transition: opacity .8s cubic-bezier(0, 1, 1, 1) 0s, border .8s cubic-bezier(0, 1, 1, 1) 0s;
	opacity: 1;
}

#intelligent_main .animetion-container .function-icon .border {
	/*display: none;*/
	opacity: 0;
}

#intelligent_main .animetion-container .function-icon.current .border {
	border: 2px solid #3eb9ea;
	opacity: 1;
}

#intelligent_main .function-icon .image.hide,
#intelligent_main .function-icon .border.hide {
	opacity: 0;
}

#intelligent_main .function-icon span img {
	width: 100%;
	height: auto;
}

#intelligent_main .functions .labels,
#intelligent_main .functions .infos,
#intelligent_main .pickup_functions {
	display: none;
}


#intelligent_main .slide_functions {
	padding-top: calc(20/375 * 100vw);
	padding-bottom: calc(20/375 * 100vw);
	width: calc(290/375 * 100vw);
	margin: 0 auto;
	position: relative;
}

#intelligent_main .slide_functions ul {
	margin: 0 auto;
}

#intelligent_main .slide_functions li {
	width: calc(290/375 * 100vw);
}

#intelligent_main .slide_functions li .function-icon {
	width: calc(72/375 * 100vw);
	padding-top: calc(72/375 * 100vw);
	position: relative;
	margin: 0 auto;
}

#intelligent_main .slide_functions li .function-icon .icon {
	transform: translate(0, 0);
}

#intelligent_main .slide_functions li .function-icon .border {
	border-color: #3eb9ea;
}

#intelligent_main .slide_functions li .label,
#intelligent_main .slide_functions li .info {
	text-align: center;
	line-height: 1.3;
	font-feature-settings: 'palt';
	letter-spacing: 1px;
}

#intelligent_main .slide_functions li .label {
	margin-top: 1.2em;
	font-size: 11px;
	font-size: 2.93vw;
	font-weight: bold;
}

#intelligent_main .slide_functions li .info {
	margin-top: 1.4em;
	font-size: 13px;
	font-size: 3.467vw;
}

#intelligent_main .slide_functions .swiper-button-prev {
	left: -9vw;
	background-image: url(/SP/SERENA/VLP_2/IMAGES/arrow_prev_red.png);
	background-size: 40%;
}

#intelligent_main .slide_functions .swiper-button-next {
	right: -9vw;
	background-image: url(/SP/SERENA/VLP_2/IMAGES/arrow_next_red.png);
	background-size: 40%;
}


#intelligent_main .slide_functions + .caution {
	font-size: 11px;
	font-size: 2.933vw;
	text-align: center;
	margin-bottom: calc(10/375 * 100vw);
	color: #666;
	margin-left: calc(25/375 * 100vw);
	margin-right: calc(25/375 * 100vw);
	border-top: 1px solid #c2c2c2;
	padding-top: calc(15/375 * 100vw);
}


#adaptiveLedHeadLight .inner .note,
#pedalMisapplicationt .inner .note {
    /*font-size: 11px;
    font-size: 2.933vw;*/
    font-size: 14px;
    font-size: 3.733vw;
    margin-top: calc(30/375 * 100vw);
}

.button .option-label {
	margin-right: 0.7em;
	margin-top: -.4em;
}

.section.customModule .button .label {
	font-size: 14px;
	font-size: 3.636vw;
	font-weight: bold;
	color: #c3002c;
	margin-bottom: .5em;
}

.section.customModule .content > .subtitle {
	margin-top: calc(12/375 * 100vw);
	margin-bottom: calc(7/375 * 100vw * -1);
}

.articleGroup > .wrap {
	display: flex;
	width: 100%;
	padding-right: calc(15/375 * 100vw);
	padding-left: calc(15/375 * 100vw);
}

.articleGroup .articleGroupColumn {
	display: block;
	width: 50%;
	vertical-align: top;
}

.articleGroup .articleGroupColumn:first-child {
	padding-right: calc(5/375 * 100vw);
}

.articleGroup .articleGroupColumn:last-child {
	padding-left: calc(5/375 * 100vw);
}

.articleGroup .articleGroupColumn .inner, .articleGroup .articleGroupColumn .button {
	margin-left: 0;
	margin-right: 0;
}

.articleGroup .articleGroupColumn .inner + .content {
	margin-top: 0;
}

.articleGroup .articleGroupColumn:nth-of-type(2) .section.articleBasicModule.noBorder .wrap .image:first-child {
	margin-top: 0;
}



#ASV {
	margin-top: calc(45/375 * 100vw);
	margin-bottom: calc(30/375 * 100vw);
}

#ASV .moreBtn {
	margin-top: calc(20/375 * 100vw);
	text-align: center;
}

#ASV .moreBtn a {
	width: 100%;
	position: relative;
	display: inline-block;
	padding: 1em 45px 1em 20px;
	font-size: 1.4em;
	text-align: left;
	color: #fff;
	background-color: #c3002f;
  box-sizing: border-box;
}

#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;
	width: 100vw;
	margin-top: calc(25/375 * 100vw);
	margin-left: calc(15/375 * 100vw * -1);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
	width: 100vw;
}

.section.customModule .simple-player .movie {
	line-height: 0;
	padding: 0 !important;
	margin: 0 !important;
	width: 100vw !important;
}

.section.customModule .simple-player video {
	width: 100%;
	height: auto;
	background-color: #000;
	/*object-fit: cover;*/
}

.section.customModule .simple-player .imageWrap {
	position: relative;
	display: block;
	margin-top: calc(25/375 * 100vw);
	padding-top: calc(500/750 * 100vw);
}

.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/375 * 100vw);
}


.section.customModule .simple-player .image {
	margin: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgb(255, 255, 255);
	display: flex;
	align-items: center;
	cursor: pointer;
	overflow: hidden;
}

.section.customModule .simple-player .image img {
	width: 100%;
	height: auto;
}


/** -------------------------------
 * customize
 */

#intelligent_wrap {
  font-size: 10px;
}

#intelligent_main .wrap {
  height: auto;
}
#intelligent_main .swiper-wrapper,
#intelligent_main .swiper-slide {
  height: auto;
}
#intelligent_main .swiper-button-next,
#intelligent_main .swiper-button-prev {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  -moz-background-size: 27px 44px;
  -webkit-background-size: 27px 44px;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}
#intelligent_main .swiper-button-next.swiper-button-disabled,
#intelligent_main .swiper-button-prev.swiper-button-disabled {
  opacity: .35;
  cursor: auto;
  pointer-events: none;
}
