@charset "utf-8";



/* **************************************************

Name: artificial-intelligence.css

Description: CSS for artificial-intelligence page

Create: 2016.10.01
Update: 2016.12.12

Copyright 2016 Hitachi, Ltd.

***************************************************** */



/* ==================================================

Plain Version

[p] common
[p] section1
[p] section2
[p] section3
[p] section4
[p] section5
[p] know more
[p] for - 994px
[p] for - 767px

Rich Version

[r] common
[r] cubes
[r] panels
[r] buttons

Common

[-] Modal Window for YouTube
[-] for print

===================================================== */



/* [p] common
=========================================================================================== */

.movieSectionText .TextStyle1 {				
    font-size: 110%;				
}
				
.movieSectionText h3 {				
    font-size: 127%;				
}				
				
.movieSection  {				
	padding: 0;			
	position: relative;			
}	
				
.robotics-cont #solutions-box1 .movieSection {				
	margin-bottom: 80px;			
}	
				
.movieSection .playButton .icon-play {				
    height: 4em;				
    width: 4.5em;				
}	
				
.movieSection .playButton .icon-play img {				
    width: 1.4em				
}	
				
.movieSection .movieSectionThumbnail {				
	width: 50%;			
	height: 100%;			
	background-size: cover;			
	background-position: 50%;			
	position: absolute;			
	top: 0;			
	left: 0;			
}		
				
.movieSection .movieSectionText {				
	margin: 0 0 0 50%;			
	padding: 30px 0 30px 30px;			
}	
				
.GraySection {				
	margin: 80px 0;			
	padding: 60px 0;			
    background: #f2f2f2;				
	overflow: hidden;			
}


.SibAiSection {
	position: relative;
	min-width: 965px;
	min-height: 100vh;
	overflow: hidden;
}

.JS .SibAiSection { min-width: 0; }

.SibAiLeftCol {
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
	z-index: 1;
}

.SibAiRightCol {
	position: absolute;
	left: 50%;
	top: 0;
	width: 50%;
	height: 100%;
	z-index: 1;
}

.SibAiImg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	background-attachment: fixed;
	z-index: 0;
}

.SP .SibAiImg { background-attachment: scroll; }

.SibAiImg > img { display: none; }

.SibAiBody {
	position: relative;
	width: 482px;
	max-width: 482px;
	padding: 100px 50px;
	min-height: 100vh;
	z-index: 1;
	color: #fff;
}

.JS .SibAiBody {
	width: auto;
}

.SibAiLeftCol .SibAiBody { margin: 0 0 0 auto; }

.SibAiRightCol .SibAiBody { margin: 0 auto 0 0; }

.SibAiBody h2 {
	margin: 0;
	padding: 0 0 35px;
	background-image: none;
	font-size: 238%;
	line-height: 1.2;
}

.SibAiBody h2:after {
	content: "";
	display: block;
	width: 36px;
	height: 4px;
	margin-top: 25px;
	background-color: rgba(255, 255, 255, .3);
}

.SibAiBody p {
	font-size: 100%;
	line-height: 1.8;
}

.SibAiBody p + p {
	margin-top: 1.8em;
}



/* [p] section1
=========================================================================================== */

#Contents {
	padding-top: 15px;
	background-color: #fff;
}

#SibAiSection1 .SibAiImg {
	background-image: url(../images/img_01.jpg);
	background-attachment: scroll;
}

#SibAiSection1 .ImgOnlyStyle {
	position: relative;
	margin-bottom: calc((100vh - 500px) * .07);
	padding-top: calc((100vh - 500px) * .6);
}

.JS #SibAiSection1 .ImgOnlyStyle {
	animation: anim-fadeIn 3s ease-out 2s both;
	-webkit-animation: anim-fadeIn 3s ease 2s both;
	-ms-transform: translateZ(0);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

#SibAiSection1 h1 {
	position: relative;
	margin-bottom: calc((100vh - 500px) * .07);
	color: #fff;
	font-size: 513%;
	font-weight: normal;
	line-height: 1;
	text-align: center;
}

.JS #SibAiSection1 h1 {
	-webkit-animation: anim-fadeIn 2.5s ease 1.5s both;
	animation: anim-fadeIn 2.5s ease-out 1.5s both;
	-ms-transform: translateZ(0);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

#SibAiSection1 .SibAiHeading {
	position: relative;
	color: #fff;
	font-size: 250%;
	line-height: 1.5;
	text-align: center;
}

.JS #SibAiSection1 .SibAiHeading {
	animation: anim-fadeIn 2.5s ease-out 2.5s both;
	-webkit-animation: anim-fadeIn 2.5s ease 2.5s both;
	-ms-transform: translateZ(0);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.JS #SibAiSection1.SibAiFaded .ImgOnlyStyle,
.JS #SibAiSection1.SibAiFaded h1,
.JS #SibAiSection1.SibAiFaded .SibAiHeading {
	-webkit-animation: none;
	animation: none;
}

@keyframes anim-fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@-webkit-keyframes anim-fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

#SibAiSection1 .SibAiButton {
	position: relative;
	margin: calc((100vh - 500px) * .14) auto 0;
	width: 54px;
	height: 54px;
}

#SibAiSection1 .SibAiButton a {
	display: block;
	width: 54px;
	height: 54px;
	border-radius: 27px;
	background-color: #d40216;
	overflow: hidden;
}

#SibAiSection1 .SibAiButton a:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 66px;
	height: 66px;
	margin: -6px 0 0 -6px;
	background-color: #d40216;
	border-radius: 33px;
	opacity: .3;
	transition: opacity .4s ease;
}

#SibAiSection1 .SibAiButton a:after {
	content: "";
	position: absolute;
	left: 19px;
	top: 15px;
	display: block;
	width: 13px;
	height: 13px;
	border-right: solid 2px #fff;
	border-bottom: solid 2px #fff;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg) translateZ(0);
	transform: rotate(45deg) translateZ(0);
	transition: top .2s ease;
}
#SibAiCubeButton.SibAiRed{display:none!important;}
#SibAiSection1 .btn_{position: absolute;
	left: 50%;
	bottom: 60px;
	margin-left: -33px; z-index:2;}
#SibAiSection1 .btn_ a{display:block; text-align:center; font-size: 0;
	width: 66px;
	height: 102px;
	background: url(../img/brand_center04_more.png) no-repeat center center;
	cursor: pointer;}
#SibAiSection1 .SibAiButton a:hover:before { opacity: .6; }

#SibAiSection1 .SibAiButton a:hover:after { top: 21px; }

#SibAiSection1 .SibAiButton a span {
	position: absolute;
	left: 50%;
	top: 68px;
	width: 6em;
	margin-left: -3em;
	color: #fff;
	font-size: 82%;
	text-align: center;
}



/* [p] section2
=========================================================================================== */

#SibAiSection2 .SibAiRightCol {
	position: static;
	margin-left: 50%;
}

#SibAiSection2 .SibAiImg {
	background-color: #c6a78f;
	background-position: -25vw 50%;
}

.SP #SibAiSection2 .SibAiImg { background-position: 60% 50%; }

#SibAiSection2 .SibAiRightCol {
	background:url(../img/brand_center04_5.jpg) no-repeat center;
	background-size:cover;
	background-attachment: fixed;
}

.SP #SibAiSection2 .SibAiRightCol { background-attachment: scroll; }

#SibAiSection2 sup {
	font-size: 75%;
	vertical-align: 0.5em;
}

#SibAiSection2 .AdditionalNotesStyle2 { margin: 2.5em 0 0; }

#SibAiSection2 .AdditionalNotesStyle2 dt { width: 2em; }

#SibAiSection2 .AdditionalNotesStyle2 dd { margin: -1.6em 0 0 2.1em; }



/* [p] section3
=========================================================================================== */

#SibAiSection3 .SibAiLeftCol { position: static; }

#SibAiSection3 .SibAiImg {
	background-color: #dbdae3;
	background-image: url(../images/img_03.jpg);
	background-position: 35vw 50%;
}

.SP #SibAiSection3 .SibAiImg { background-position: -28vw 50%; }

#SibAiSection3 .SibAiLeftCol { background:url(../img/brand_center04_6.jpg) no-repeat center; background-size:cover; background-attachment: fixed;}

#SibAiSection3 .SibAiBody { color: #000; }

#SibAiSection3 .SibAiBody h2:after {
	background-color: #d40216;
}



/* [p] section4
=========================================================================================== */

#SibAiSection4 .SibAiRightCol {
	position: static;
	margin-left: 50%;
}

#SibAiSection4 .SibAiImg {
	background-color: #333;
	background-image: url(../images/img_04.jpg);
	background-position: -30vw 50%;
}

.SP #SibAiSection4 .SibAiImg { background-position: 60% 50%; }

#SibAiSection4 .SibAiRightCol {
	background:url(../img/brand_center04_7.jpg) no-repeat center; background-size:cover; 
	background-attachment: fixed;
}

.SP #SibAiSection4 .SibAiRightCol { background-attachment: scroll; }

#SibAiSection4 sup {
	font-size: 75%;
	vertical-align: 0.5em;
}

#SibAiSection4 .AdditionalNotesStyle2 { margin: 2.5em 0 0; }

#SibAiSection4 .AdditionalNotesStyle2 dt { width: 2em; }

#SibAiSection4 .AdditionalNotesStyle2 dd { margin: -1.45em 0 0 1.5em; }

#SibAiPlay {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14em;
	height: 8em;
	margin: -5em 0 0 -7em;
}

#SibAiPlay p {
	color: #fff;
	font-size: 82%;
	text-align: center;
}

#SibAiPlay span {
	display: block;
	width: 6.5em;
	height: 6em;
	margin: .8em auto 0;
	padding: 1.5em 1.75em;
	background-color: #e60027;
}

#SibAiPlay img {
	width: 3em;
	height: 3em !important;
}

.JS #SibAiPlay {
	left: 50%;
	top: 50vh;
}

.JS #SibAiPlay.bottom {
	left: 50%;
	top: calc(100% - 50vh);
}

.JS #SibAiPlay.fixed {
	position: fixed;
	left: 25%;
	top: 50%;
}

.SP #SibAiPlay {
	top: 50%;
}



/* [p] section5
=========================================================================================== */
#SibAiSection5{height:100%;}
#SibAiSection5 .SibAiLeftCol { position: relative; }

/* #SibAiSection5 { margin-bottom: 90px; } */

#SibAiSection5 .SibAiImg { background-image: url(../images/img_05.jpg); }

#SibAiSection5 .SibAiBody {
	min-height: calc(100vh - 180px);
	padding-bottom: 0;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}
#SibAiSection5 .content{position:absolute; left:0; top:0; width:100%; height:100%; z-index:1;}
#SibAiSection5 .content .btn_{position: absolute;
	left: 50%;
	bottom: 60px;
	margin-left: -33px; z-index:2;}
#SibAiSection5 .content .btn_ a{display:block; text-align:center; font-size: 0;
	width: 66px;
	height: 102px;
	background: url(../img/brand_center04_more.png) no-repeat center center;
	cursor: pointer;}
#SibAiSection5 .SibAiCase {
	width: 482px;
	max-width: 482px;
	padding: 180px 60px 0 20px;
}

.JS #SibAiSection5 .SibAiCase { width: 100%; }

#SibAiSection5 .SibAiCase h3 {
	margin: 0;
	padding: .7em 0 .6em;
	border-radius: 1.15em;
	background-color: rgba(255, 255, 255, .75);
	color: #565e7a;
	font-size: 106%;
	font-weight: bold;
	line-height: 1;
	text-align: center;
}

#SibAiSection5 .SibAiCase ul {
	display: table;
	margin: 0 auto;
	color: #fff;
}

#SibAiSection5 .SibAiCase li {
	display: table-row;
}

#SibAiSection5 .SibAiCase li > div {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

#SibAiSection5 .SibAiTitle {
	width: 25%;
	padding: 50px 7px 0;
}

#SibAiSection5 .SibAiIcon {
	width: 40%;
	padding: 50px 10px 0;
}

#SibAiSection5 .SibAiNum {
	width: 35%;
	padding: 65px 0 0;
	font-size: 100%;
	line-height: 1;
	white-space: nowrap;
}

#SibAiSection5 .SibAiTitle .Inner {
	position: relative;
	width: auto;
	height: 0;
	padding-bottom: calc(100% - 6px);
	border: 3px solid #fff;
	border-radius: 100%;
}

#SibAiSection5 .SibAiTitle .Inner:after {
	content: "";
	position: absolute;
	left: -10px;
	top: -10px;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	border: 10px solid rgba(255, 255, 255, .2);
	border-radius: 100%;
}

#SibAiSection5 .SibAiTitle .Inner span {
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	-ms-transform: translateY(-48%);
	-webkit-transform: translateY(-48%);
	transform: translateY(-48%);
	font-size: 82%;
	line-height: 1.3;
	text-align: center;
}

#SibAiSection5 .SibAiIcon img {
	width: 100%;
	max-width: 144px;
}

#SibAiSection5 .SibAiNum span:first-child {
	font-size: 500%;
	line-height: 0;
	letter-spacing: -.05em;
}

#SibAiSection5 .SibAiNum span:nth-child(2) {
	font-size: 280%;
	line-height: 1.1;
}

#SibAiSection5 .SibAiNum span:last-child { font-size: 93%; }

#SibAiSection5 .SibAiButton {
	clear: both;
	position: relative;
	margin: 34px auto 0;
	padding-bottom: 76px;
	width: 54px;
	height: 130px;
	z-index: 2;
}

#SibAiSection5 .SibAiButton a {
	display: block;
	width: 54px;
	height: 54px;
	border-radius: 27px;
	background-color: #d40216;
	overflow: hidden;
}

#SibAiSection5 .SibAiButton a:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 66px;
	height: 66px;
	margin: -6px 0 0 -6px;
	background-color: #d40216;
	border-radius: 33px;
	opacity: .3;
	transition: opacity .4s ease;
}

#SibAiSection5 .SibAiButton a:after {
	content: "";
	position: absolute;
	left: 19px;
	top: 22px;
	display: block;
	width: 13px;
	height: 13px;
	border-left: solid 2px #fff;
	border-top: solid 2px #fff;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg) translateZ(0);
	transform: rotate(45deg) translateZ(0);
	transition: top .2s ease;
}

#SibAiSection5 .SibAiButton a:hover:before { opacity: .6; }

#SibAiSection5 .SibAiButton a:hover:after { top: 16px; }

#SibAiSection5 .SibAiButton a span {
	position: absolute;
	left: 50%;
	top: 68px;
	width: 8em;
	margin-left: -4em;
	color: #fff;
	font-size: 82%;
	text-align: center;
}



/* [p] know more
=========================================================================================== */

.SibAiHr { margin-top: 54px; }

h2.CSStyle {
	font-weight: bold;
}

.SibAiPlayImg {
	display: block;
	position: relative;
}

.SibAiPlayImg .ModalYouTubeLink {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.SibAiPlayImg .ModalYouTubeLink span {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 3.2em;
	height: 3em;
	margin: -1.5em 0 0 -1.6em;
	padding: .75em .85em;
	background-color: #e60027;
}

.SibAiPlayImg .ModalYouTubeLink img {
	width: 1.5em !important;
	height: 1.5em !important;
}



/* [p] for - 994px
=========================================================================================== */

@media screen and (max-width: 994px) {


/* --- common --- */

.JS .SibAiBody h2 {
	font-size: 170%;
}


/* --- section1 --- */

.JS #SibAiSection1 .SibAiHeading {
	font-size: 200%;
}


/* --- section5 --- */

.JS #SibAiSection5 .SibAiNum span:first-child { font-size: 400%; }
.JS #SibAiSection5 .SibAiNum span:nth-child(2) { font-size: 224%; }
.JS #SibAiSection5 .SibAiNum span:last-child { font-size: 88%; }


}



/* [p] for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {


/* --- Modal Window for YouTube --- */

.JS #ModalYouTube { padding: 50px 0; }

.JS #ModalYouTube .Title p { font-size: 83%; }

.JS #ModalYouTube .l,
.JS #ModalYouTube .r,
.JS #ModalYouTube .lt,
.JS #ModalYouTube .rt,
.JS #ModalYouTube .lb,
.JS #ModalYouTube .rb { display: none; }


/* --- common --- */

.JS .SibAiSection { min-height: 0; }

.JS .SibAiLeftCol {
	position: static;
	width: auto;
	height: auto;
}

.JS .SibAiRightCol {
	position: static;
	width: auto;
	height: auto;
}

.JS .SibAiImg {
	position: relative;
	height: 56vw;
	overflow: hidden;
}

.JS .SibAiImg img {
	display: block;
	position: absolute;
	max-width: none !important;
}

.JS .SibAiBody {
	max-width: none;
	min-height: 0;
	padding: 30px 15px;
}

.SibAiLeftCol .SibAiBody { margin: 0; }

.SibAiRightCol .SibAiBody { margin: 0; }

.JS .SibAiBody h2 {
	padding: 0 0 25px;
	font-size: 131%;
	line-height: 1.3;
}

.JS .SibAiBody h2:after {
	height: 3px;
	margin-top: 20px;
}

.JS .SibAiBody p {
	font-size: 82%;
	line-height: 1.6;
}


/* --- section1 --- */

.JS #SibAiSection1 .SibAiImg { background-image: none; }

.JS #SibAiSection1 .SibAiImg img {
	left: -30%;
	top: 0;
	width: 160%;
}

.JS #SibAiSection1 .ImgOnlyStyle {
	position: absolute;
	left: 50%;
	top: 10vw;
	width: 18%;
	margin-bottom: 0;
	padding-top: 0;
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-animation: none;
	animation: none;
}

.JS #SibAiSection1 h1 {
	position: absolute;
	left: 50%;
	top: 32vw;
	margin-bottom: 0;
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	font-size: 280%;
	-webkit-animation: none;
	animation: none;
}

.JS #SibAiSection1 .SibAiHeading {
	padding: 25px 10px;
	background-color: #262626;
	font-size: 106%;
	line-height: 1.6;
}

.JS #SibAiSection1 .SibAiHeading {
	-webkit-animation: none;
	animation: none;
}

.JS #SibAiSection1 .SibAiButton {
	display: none;
}


/* --- section2 --- */

.JS #SibAiSection2 .SibAiRightCol {
	margin-left: 0;
	/* background-image: none; */
}

/* .JS #SibAiSection2 .SibAiImg { background-image: none; } */

.JS #SibAiSection2 .SibAiImg img {
	left: -17%;
	top: -40%;
	width: 120%;
}

/* .JS #SibAiSection2 .SibAiBody {
	background-image: -webkit-linear-gradient(45deg, #8cb380 0%, #005b5a 90%);
	background-image: linear-gradient(-135deg, #8cb380 0%, #005b5a 90%);
} */


/* --- section3 --- */

/* .JS #SibAiSection3 .SibAiImg { background-image: none; } */

.JS #SibAiSection3 .SibAiImg img {
	left: 0;
	top: -20%;
	width: 138%;
}

.JS #SibAiSection3 .SibAiBody { margin: 0; }


/* --- section4 --- */

.JS #SibAiSection4 .SibAiRightCol {
	margin-left: 0;
	/* background-image: none; */
}

.JS #SibAiSection4 .SibAiImg {
	display: block;
	/* background-image: none; */
}

.JS #SibAiSection4 .SibAiImg > img {
	left: -30%;
	top: -60%;
	width: 130%;
}

/* .JS #SibAiSection4 .SibAiBody {
	background-image: -webkit-linear-gradient(-155deg, #db643a 0%, #c51632 75%);
	background-image: linear-gradient(-155deg, #db643a 0%, #c51632 75%);
} */

.JS #SibAiSection4 .AdditionalNotesStyle2 {
	margin: 1.8em 0 0;
	font-size: 75%;
}

.JS #SibAiPlay {
	height: 5em;
	margin: -3.2em 0 0 -7em;
}

.JS #SibAiPlay img {
	width: 1.5em;
	height: 1.5em !important;
}

.JS #SibAiPlay span {
	width: 3.2em;
	height: 3em;
	margin: .6em auto 0;
	padding: .75em .85em;
}

.JS #SibAiPlay {
	left: 50%;
	top: 50%;
}

.JS #SibAiPlay.bottom {
	left: 50%;
	top: 50%;
}

.JS #SibAiPlay.fixed {
	position: absolute;
	left: 50%;
	top: 50%;
}


/* --- section5 --- */

.JS #SibAiSection5 {
	background-color: #534c6d;
	background-image: -webkit-linear-gradient(45deg, #835774 10%, #354669 70%);
	background-image: linear-gradient(-135deg, #835774 10%, #354669 70%);
}

.JS #SibAiSection5 .SibAiImg img {
	left: -33%;
	top: 0;
	width: 170%;
}

.JS #SibAiSection5 .SibAiBody {
	margin: 0;
	min-height: 0;
	padding-bottom: 30px;
}

.JS #SibAiSection5 .SibAiCase {
	position: static;
	width: auto;
	max-width: none;
	padding: 0 15px 50px;
}

.JS #SibAiSection5 .SibAiCase h3 {
	color: #544d6d;
	font-size: 82%;
}

.JS #SibAiSection5 .SibAiTitle {
	padding: 30px 7px 0;
}

.JS #SibAiSection5 .SibAiIcon {
	padding: 30px 10px 0 20px;
}

.JS #SibAiSection5 .SibAiNum { padding: 45px 0 0; }

.JS #SibAiSection5 .SibAiNum span:first-child { font-size: 400%; }
.JS #SibAiSection5 .SibAiNum span:nth-child(2) { font-size: 224%; }
.JS #SibAiSection5 .SibAiNum span:last-child { font-size: 82%; }

.JS #SibAiSection5 .SibAiTitle .Inner {
	padding-bottom: calc(100% - 4px);
	border: 2px solid #fff;
}

.JS #SibAiSection5 .SibAiTitle .Inner:after {
	left: -8px;
	top: -8px;
	border: 8px solid rgba(255, 255, 255, .2);
}

.JS #SibAiSection5 .SibAiTitle .Inner span {
	font-size: 69%;
}

.JS #SibAiSection5 .SibAiButton {
	display: none;
}


/* --- know more --- */

.JS .SibAiHr { margin-top: 30px; }

.JS .CaseStudy { margin-bottom: 3em; }

.JS .CaseStudy .Column2 { margin-bottom: 15px !important; }


}



/* [r] common
=========================================================================================== */

.SibAiRich #Contents {
	position: relative;
}

.SibAiRich #SibAiPlainContents {
	visibility: hidden;
}

#SibAiBody {
	width: 100%;
	height: auto;
	overflow: auto;
}

#SibAiBody.SibAiLock {
	/* height: 100vh; */
	overflow: hidden;
}



/* [r] cubes
=========================================================================================== */

#SibAiCubeContainer {
	display: none;
	position: absolute;
	left: 0;
	top: 15px;
	width: 100%;
	height: 100vh;
	background-color: #333;
	overflow: hidden;
	z-index: 10;
}

.SibAiCube {
	position: absolute;
	width: 50%;
	height: 100%;
	-webkit-perspective: 800px;
	perspective: 800px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

#SibAiCubeLeft {
	left: 0;
	top: 0;
	-webkit-perspective-origin: right;
	perspective-origin: right;
}

#SibAiCubeRight {
	right: 0;
	top: 0;
	-webkit-perspective-origin: left;
	perspective-origin: left;
}

#SibAiCubeWide {
	display: none;
	left: 0;
	top: 0;
	width: 100%;
}



/* [r] panels
=========================================================================================== */

.SibAiPanel {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	transition-property: transform;
	transition-duration: 1s;
	will-change: transform;
}

.SibAiPanel.hide {
	display: none;
	transition-property: none;
}

#SibAiCubeLeft .SibAiPanel .SibAiLeftCol,
#SibAiCubeRight .SibAiPanel .SibAiLeftCol {
	width: 100%;
	background-attachment: scroll !important;
}

#SibAiCubeLeft .SibAiPanel .SibAiRightCol,
#SibAiCubeRight .SibAiPanel .SibAiRightCol {
	left: 0;
	width: 100%;
	margin-left: 0 !important;
	background-attachment: scroll !important;
}

.SibAiPanel .SibAiImg {
	background-position: 50% 50% !important;
	background-attachment: scroll !important;
}

#SibAiPanel0 > div {
	position: relative;
	width: 200%;
	height: 100%;
}

#SibAiPanel1 > div {
	position: relative;
	width: 200%;
	height: 100%;
	margin-left: -100%;
}

#SibAiPanel3 > div,
#SibAiPanel3 > div > div,
#SibAiPanel4 > div,
#SibAiPanel4 > div > div,
#SibAiPanel6 > div,
#SibAiPanel6 > div > div,
#SibAiPanel7 > div,
#SibAiPanel7 > div > div,
#SibAiPanel9 > div,
#SibAiPanel9 > div > div,
#SibAiPanel10 > div,
#SibAiPanel10 > div > div,
#SibAiPanel11 > div,
#SibAiPanel11 > div > div { height: 100%; }

#SibAiPanel3 .SibAiBody,
#SibAiPanel4 .SibAiBody,
#SibAiPanel6 .SibAiBody,
#SibAiPanel7 .SibAiBody,
#SibAiPanel9 .SibAiBody,
#SibAiPanel10 .SibAiBody,
#SibAiPanel11 .SibAiBody {
	top: 40%;
	min-height: 0;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}

#SibAiPanel12 .SibAiImg { background-attachment: fixed !important; }



/* [r] buttons
=========================================================================================== */

#SibAiCubeButton {
	position: absolute;
	left: 50%;
	bottom: 60px;
	margin-left: -33px;
	width: 66px;
	height: 66px;
	z-index: 2;
}

#SibAiCubeButton a {
	position: relative;
	display: block;
	width: 66px;
	height: 66px;
	border-radius: 33px;
	background-color: rgba(255, 255, 255, .3);
	transition: background-color .4s ease;
}

#SibAiCubeButton a:before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 54px;
	height: 54px;
	margin: 6px 0 0 6px;
	background-color: #fff;
	border-radius: 27px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

#SibAiCubeButton a:after {
	content: "";
	display: block;
	position: absolute;
	left: 25px;
	top: 21px;
	width: 13px;
	height: 13px;
	border-right: solid 2px #333;
	border-bottom: solid 2px #333;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg) translateZ(0);
	transform: rotate(45deg) translateZ(0);
	transition: top .2s ease;
}

#SibAiCubeButton a:hover { background-color: rgba(255, 255, 255, .6); }

#SibAiCubeButton a:hover:after { top: 27px; }

#SibAiCubeButton a span {
	position: absolute;
	left: 50%;
	top: 74px;
	width: 6em;
	margin-left: -3em;
	color: #fff;
	font-size: 82%;
	text-align: center;
}

#SibAiCubeButton.SibAiRed a { background-color: rgba(212, 2, 22, .3); }
#SibAiCubeButton.SibAiRed a:hover { background-color: rgba(212, 2, 22, .6); }

#SibAiCubeButton.SibAiRed a:before { background-color: #d40216; }

#SibAiCubeButton.SibAiRed a:after {
	border-right: solid 2px #fff;
	border-bottom: solid 2px #fff;
}

#SibAiCubeButton.SibAiDark a { background-color: rgba(200, 198, 219, .3); }
#SibAiCubeButton.SibAiDark a:hover { background-color: rgba(200, 198, 219, .6); }

#SibAiCubeButton.SibAiDark a span { color: #000; }



/* [-] Modal Window for YouTube
=========================================================================================== */

#ModalYouTubeCover {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 100;
}

#ModalYouTube {
	display: none;
	position: absolute;
	padding: 50px;
	z-index: 102;
}

#ModalYouTube .Inner {
	position: relative;
	background-color: #000;
	box-shadow: 0 0 35px rgba(0, 0, 0, .4);
}
* html #ModalYouTube .Inner {background-color: #f2f2f2;}
*:first-child+html #ModalYouTube .Inner {background-color: #f2f2f2;}

#ModalYouTube iframe {
	display: block;
	width: 100%;
}

#ModalYouTube .Title {
	height: 50px;
	background-color: #f2f2f2;
	overflow: hidden;
}

#ModalYouTube .Title p {
	display: table-cell;
	height: 50px;
	padding: 0 80px 0 20px;
	vertical-align: middle;
	font-size: 90%;
	font-weight: bold;
	line-height: 130%;
	color: #575757;
}
* html #ModalYouTube .Title p {
	display: block;
	height: 35px;
	padding-top: 15px;
}
*:first-child+html #ModalYouTube .Title p {
	display: block;
	height: 35px;
	padding-top: 15px;
}

#ModalYouTube .BtnClose {
	position: absolute;
	right: 0;
	bottom: 0;
	line-height: 130%;
}
* html #ModalYouTube .BtnClose {right: -1px;}

#ModalYouTube .BtnClose a {
	display: table-cell;
	min-width: 50px;
	height: 30px;
	padding: 20px 5px 0;
	font-size: 76%;
	text-align: center;
	background-image: url(../images/icon_close.gif);
	background-position: center 7px;
	background-repeat: no-repeat;
	vertical-align: middle;
}
* html #ModalYouTube .BtnClose a {
	float: left;
	display: block;
	width: 50px;
	height: 25px;
	padding: 25px 5px 0;
}
*:first-child+html #ModalYouTube .BtnClose a {
	display: block;
	height: 25px;
	padding: 25px 5px 0;
}

#ModalYouTube .BtnClose a:link,
#ModalYouTube .BtnClose a:visited {
	color: #fff;
	background-color: #e60027;
	text-decoration: none;
}
#ModalYouTube .BtnClose a:hover,
#ModalYouTube .BtnClose a:active {
	color: #fff;
	background-color: #b1000e;
	text-decoration: none;
}

#ModalYouTube .l {
	position: absolute;
	width: 35px;
	height: 100%;
	top: 0;
	left: -35px;
	background: url(../images/bg_modal_l.png) repeat-y;
}
#ModalYouTube .r {
	position: absolute;
	width: 35px;
	height: 100%;
	top: 0;
	right: -35px;
	background: url(../images/bg_modal_r.png) repeat-y;
}
#ModalYouTube .t {
	position: absolute;
	width: 100%;
	height: 35px;
	top: -35px;
	left: 0;
	background: url(../images/bg_modal_t.png) repeat-x;
}
#ModalYouTube .b {
	position: absolute;
	width: 100%;
	height: 35px;
	bottom: -35px;
	left: 0;
	background: url(../images/bg_modal_b.png) repeat-x;
}
#ModalYouTube .lt {
	position: absolute;
	width: 35px;
	height: 35px;
	top: -35px;
	left: -35px;
	background: url(../images/bg_modal_corner.png) no-repeat left top;
}
#ModalYouTube .lb {
	position: absolute;
	width: 35px;
	height: 35px;
	bottom: -35px;
	left: -35px;
	background: url(../images/bg_modal_corner.png) no-repeat left bottom;
}
#ModalYouTube .rt {
	position: absolute;
	width: 35px;
	height: 35px;
	top: -35px;
	right: -35px;
	background: url(../images/bg_modal_corner.png) no-repeat right top;
}
#ModalYouTube .rb {
	position: absolute;
	width: 35px;
	height: 35px;
	bottom: -35px;
	right: -35px;
	background: url(../images/bg_modal_corner.png) no-repeat right bottom;
}



/* [-] for print
=========================================================================================== */

@media print {


/* --- common --- */

.SibAiSection { background-attachment: scroll !important; }


}


/* [-] Addition
=========================================================================================== */
.footer-link-box{
	width: 241px;
    padding: 0 0 0 15px;
	margin-left: 0;
    float: left;
	box-sizing: border-box;
}

.FMLinkListStyle li ul:after {
	content: "";
	display: block;
	width: 80px;
	margin-top: 5px;
    border-bottom: #ccc solid 1px;
}

.FMLinkListStyle li ul:last-child:after {
	margin-top: 0;
	display: none;
}

.FMLinkListStyle li ul .sub-menu a {
    background-image: none !important;
    display: block;
    padding: 5px 0 0;
}

.FMLinkListStyle li ul .sub-menu{
    padding: 0;
}

.FMLinkListStyle li a:hover, .FMLinkListStyle li a:active, .FMLinkListStyle li a:focus {
}

.FMLinkListStyle li.social-links img {
	width: 30px;
	height: auto;
}

.FMLinkListStyle li.social-links {
    overflow: hidden;
	width: 200px;
}.FMLinkListStyle li.social-links a {
    display: block;
    float: left;
    margin-left: 10px;
    padding: 0 !important;
    background: none !important;
}

.FMLinkListStyle li.social-links a:first-child {
    margin-left: 0;
}

.FMLinkListStyle li.social-links a:hover {
    opacity: 0.8;
}

/* for - 767px									
=========================================================================================== */									
									
@media screen and (max-width : 767px){									
	.movieSectionText h3 {								
    font-size: 110%;									
}									
									
.movieSectionText .TextStyle1 {									
    font-size: 90%;									
}									
									
}									
									
/* for - 579px									
=========================================================================================== */									
.show-max-w579 {									
	display: none;								
}									
@media screen and (max-width : 579px){									
	.movieSection .movieSectionThumbnail {								
		width: 100%;							
		height: 200px;							
	}								
									
		.movieSection .movieSectionText {							
		margin: 160px 0 0;							
		padding: 30px 0;							
	}								
									
									
}									
								
/* for - 320px									
=========================================================================================== */									
									
@media screen and (max-width : 320px){									
									
		.movieSectionText h3 {							
    font-size: 80%;									
}									
									
}									

.SibAiBody .infor .t2{margin-bottom:30px;}
/* #SibAiSection5 {background: url(../img/brand_center_bg1.jpg) no-repeat fixed!important;} */
#SibAiSection2 a{color:#fff;}
#SibAiSection2 a:hover{color:#fff; color:rgba(255,255,255,0.8)}