@charset "utf-8";

/*----------------------------------
mv
----------------------------------*/
body:not(.top) #mv .col-xs-12{
	background-image : url("/en/images/technologies/mv.jpg");
}

/*----------------------------------
main
----------------------------------*/
main h2{
	font-family : "Merriweather";
	font-weight : 700;
	color : #005fb6;
}
main p{
	font-family : "Montserrat";
	font-weight : 300;
	color : #000;
}
main ul h3{
	border-left : solid 7px #00a4e8;
	font-family : "Montserrat";
	font-weight : 500;
	color : #fe9d20;
}
main ul p{
	font-family : "Roboto";
	font-weight : 400;
	color : #000;
}
@media (max-width: 639px){
	main h2{
		font-size : 21px;
	}
	main p{
		font-size : 14px;
	}
	main ul h3{
		font-size : 18px;
		min-width : 22px;
		line-height : 22px;
		border-left : solid 3px #00a4e8;
	}
	main ul p{
		font-size : 13px;
	}
}
@media (min-width: 640px ) and ( max-width: 767px){
	main h2{
		font-size : 42px;
	}
	main p{
		font-size : 28px;
	}
	main ul h3{
		font-size : 36px;
		min-width : 55px;
		line-height : 55px;
		border-left : solid 7px #00a4e8;
	}
	main ul p{
		font-size : 26px;
	}
}
@media (min-width: 768px ) and ( max-width: 991px){
	main h2{
		font-size : 42px;
	}
	main p{
		font-size : 28px;
	}
	main ul h3{
		font-size : 36px;
		min-width : 55px;
		line-height : 55px;
		border-left : solid 7px #00a4e8;
	}
	main ul p{
		font-size : 26px;
	}
}
@media ( max-width: 991px){
	main{
		padding-top : calc( 123 / 640 * 100% );
		padding-bottom : calc( 117 / 640 * 100% );
	}
	main .container > .row > .col-xs-12{
		padding-left : calc( 60 * 100% / 640 ) ;
		padding-right : calc( 60 * 100% / 640 ) ;
	}
	main p{
		margin-top : calc( 90 / 640 * 100% );
	}
	main ul{
		margin-top : calc( 66 / 640 * 100% );
	}
	main ul li:not(:first-child){
		margin-top : calc( 61 / 640 * 100% );
	}
	main ul h3{
		padding-left : calc( 34 * 100% / 610 );
	}
	main ul ul{
		margin-top : calc( 37 / 640 * 100% );
	}
	main ul ul.row{
		padding-right : 0;
		padding-left : 0;
	}
	main ul ul li{
		padding-left : 0;
		padding-right : 0;
	}
	main ul ul li.col-xs-12{
		padding-left : 0;
		padding-right : 0;
	}
	main ul ul li:not(:first-child){
		margin-top : calc( 30 / 640 * 100% );
	}
	main ul ul li img{
		width : 100%;
		height : auto;
	}
	main ul p{
		margin-top : calc( 27 / 640 * 100% );
		line-height : 1.4;
	}
}
@media ( min-width: 992px){
	main{
		padding-bottom : 173px;
	}
	main .container{
		max-width : 1080px;
		width : inherit;
	}
	main h2{
		margin-top : 105px;
		font-size : 34px;
	}
	main p{
		margin-top : 86px;
		font-size : 21px;
	}
	main .col-xs-12 > ul{
		margin-top : 80px;
		max-width : 1080px;
		margin-left : 0;
		margin-right : 0;
	}
	main .col-xs-12 > ul > li:not(:first-child){
		margin-top : 61px;
	}
	main .col-xs-12 > ul h3{
		border-left : solid 7px #00a4e8;
		min-width : 55px;
		line-height : 55px;
		font-size : 31px;
		padding-left : 25px;
	}
	main .col-xs-12 > ul ul{
		margin-top : 37px;
	}
	main .col-xs-12 > ul ul.row{
		padding-right : 0;
		padding-left : 0;
		margin-left : 0;
		margin-right : 0;
		max-width : 1080px;
	}
	main .col-xs-12 > ul ul li:first-child{
		padding-left : 0;
		padding-right : 20px;
	}
	main .col-xs-12 > ul ul li-nth-child(2){
		padding-right : 0;
		padding-left : 20px;
	}
	main .col-xs-12 > ul ul img{
		width : 100%;
		height : auto;
	}
	main .col-xs-12 > ul p{
		margin-top : 16px;
		font-size : 18px;
		font-weight : 400;
		line-height : 22px;
	}
}

/*----------------------------------
history
----------------------------------*/
article{
	background-color : #f3f3f3;
}
article .col-xs-12 > h2{
	font-family : "Merriweather";
	font-weight : 700;
	color : #1969ba;
}
article .col-xs-12 > p{
	font-family : "Roboto";
	font-weight : 400;
	color : #000;
}
article ol{
	list-style-type : none;
}
article ol strong{
	color : #f00;
}
article ol li{
	position : relative;
}
article ol h4{
	background-color : #010b38;
	font-family : "Montserrat";
	font-weight : 700;
	color : #fff;
	position : relative;
	z-index : 2;
}
article ol h4:after{
	content : "";
	background : url("/en/images/technologies/history/next.png");
	display : block;
	position : absolute;
}
article ol div{
	border-style : solid;
	border-width : 1px;
	border-color : #010b38;
	background-color : rgba(255, 255, 255, .7);
	position : relative;
	z-index : 1;
}
article ol div ul li{
	font-family : "Montserrat";
	font-weight : 400;
	color : #323232;
}
article ol div p{
	font-family : "Montserrat";
	color : #323232;
	font-weight : 400;
}
@media (max-width: 639px){
	article .col-xs-12 > h2{
		font-size : 21px;
	}
	article .col-xs-12 > p{
		font-size : 13px;
	}
	article ol > li:not(:first-child){
		margin-top : 86px;
	}
	article ol > li:not(:first-child):after{
		width : 16px;
		height : 93px;
		top : -107px;
		margin-left : -8px;
		left : 50%;
	}
	article ol h4{
		font-size : 18px;
		height : 77px;
		line-height : 77px;
	}
	article ol div{
		top : -21px;
	}
	article ol div:before{
		width : 50px;
		height : 25px;
		margin-left : -25px;
	}
	article ol div img{
		margin : 41px auto 0;
	}
	article ol div p{
		font-size : 12px;
	}
	article ol div ul li{
		font-size : 12px;
	}
}
@media (min-width: 640px ) and ( max-width: 767px){
	article .col-xs-12 > h2{
		font-size : 42px;
	}
	article .col-xs-12 > p{
		font-size : 26px;
	}
	article ol > li:not(:first-child){
		margin-top : 172px;
	}
	article ol > li:not(:first-child):after{
		width : 32px;
		height : 187px;
		top : -214px;
		margin-left : -16px;
		left : 50%;
	}
	article ol h4{
		font-size : 36px;
		height : 155px;
		line-height : 155px;
	}
	article ol div{
		top : -42px;
	}
	article ol div:before{
		width : 100px;
		height : 50px;
		margin-left : -50px;
	}
	article ol div img{
		margin : 82px auto 0;
	}
	article ol div p{
		font-size : 24px;
	}
	article ol div ul li{
		font-size : 24px;
	}
}
@media (min-width: 768px ) and ( max-width: 991px){
	article .col-xs-12 > h2{
		font-size : 42px;
	}
	article .col-xs-12 > p{
		font-size : 26px;
	}
	article ol > li:not(:first-child){
		margin-top : 172px;
	}
	article ol > li:not(:first-child):after{
		width : 32px;
		height : 187px;
		top : -214px;
		margin-left : -16px;
		left : 50%;
	}
	article ol h4{
		font-size : 36px;
		height : 155px;
		line-height : 155px;
	}
	article ol div{
		top : -42px;
	}
	article ol div:before{
		width : 100px;
		height : 50px;
		margin-left : -50px;
	}
	article ol div img{
		margin : 82px auto 0;
	}
	article ol div p{
		font-size : 24px;
	}
	article ol div ul li{
		font-size : 24px;
	}
}
@media ( max-width: 991px){
	article{
		padding-top : calc( 101 / 640 * 100% );
		padding-bottom : calc( 107 / 640 * 100% );
	}
	article .col-xs-12 > h2{
		line-height : 1.2;
	}
	article .col-xs-12 > ul{
		margin-top : calc( 94 / 640 * 100% );
		margin-left : 0;
		margin-right : 0;
	}
	article .col-xs-12 > ul li{
		padding-left : 0;
		padding-right : 0;
	}
	article .col-xs-12 > ul li:not(:first-child){
		margin-top : 63px;
	}
	article .col-xs-12 > ul li img{
		width : 100%;
		height : auto;
	}
	article .col-xs-12 > p{
		margin : calc( 60 / 640 * 100% ) auto 0;
		padding-left : calc( 30 * 100% / 580 );
		padding-right : calc( 30 * 100% / 580 );
		line-height : 1.5;
	}
	article ol{
		padding-left : calc( 30 * 100% / 580 )!important;
		padding-right : calc( 30 * 100% / 580 )!important;
		margin : calc( 88 / 640 * 100% ) auto 0;
	}
	article ol li{
		position : relative;
	}
	article ol li.col-xs-12{
		padding-left : 0;
		padding-right : 0;
	}
	article ol li img{
		width : calc( 300 * 100% / 550 );
		height : auto;
		display : block;
	}
	article ol > li:not(:first-child):after{
		content : "";
		display : block;
		position : absolute;
		background : url("/en/images/technologies/history/allow.png") no-repeat center top;
		background-size : contain;
	}
	article ol h4{
		border-radius : 3px;
		position : relative;
		z-index : 2;
		width : calc(220 * 100% / 610);
		margin : 0 auto;
	}
	article ol div{
		position : relative;
		z-index : 1;
		padding-left : calc( 15 * 100% / 580 );
		padding-right : calc( 15 * 100% / 580 );
		padding-bottom : calc( 31 / 640 * 100% );
	}
	article ol div:before{
		content : "";
		display : block;
		position : absolute;
		left : 50%;
		background : url("/en/images/technologies/history/triangle.png") no-repeat left top;
		background-size : contain;
		top : 0;
	}
	article ol div ul{
		margin-top : calc( 31 / 640 * 100% );
	}
	article ol div ul li{
		line-height : 1.3;
	}
	article ol div ul li strong{
		display : -webkit-inline-box;
		display : inline-flex;
	}
	article ol div ul li:not(:first-child){
		margin-top : 1em;
	}
	article ol div p{
		margin-top : calc( 31 / 640 * 100% );
		line-height : 1.3;
	}
}
@media ( min-width: 992px){
	article{
		padding-top : 105px;
		padding-bottom : 163px;
	}
	article .container{
		width : inherit;
	}
	article .col-xs-12 > h2{
		font-size : 34px;
		font-weight : 700;
		line-height : 47px;
	}
	article .col-xs-12 > ul{
		margin-top : 68px;
		max-width : 1180px;
		display : -webkit-box;
		display : flex;
	}
	article .col-xs-12 > ul li:nth-child(1){
		padding-left : 0;
		padding-right : calc( 65 / 3 * 2 *100% / 1180 );
	}
	article .col-xs-12 > ul li:nth-child(2){
		padding-right : calc( 65 / 3 * 1 *100% / 1180 );
		padding-left : calc( 65 / 3 * 1 *100% / 1180 );
	}
	article .col-xs-12 > ul li:nth-child(3){
		padding-right : 0;
		padding-left : calc( 65 / 3 * 2 *100% / 1180 );
	}
	article .col-xs-12 > ul li img{
		width : 100%;
		height : auto;
	}
	article .col-xs-12 > p{
		margin : 49px auto 0;
		font-size : 19px;
		line-height : 25px;
		max-width : 1080px;
	}
	article ol{
		max-width : 1080px;
		margin : 106px auto 0;
		margin-left : auto!important;
		margin-right : auto!important;
		padding-left : 0;
	}
	article ol li{
		position : relative;
		padding-left : 0 !important;
		padding-right : 0 !important;
	}
	article ol li img{
		height : 100%;
		width : auto;
	}
	article ol h4{
		border-radius : 5px;
		width : calc( 220 * 100% / 1080 );
		height : 155px;
		font-size : 30px;
		line-height : 155px;
		position : relative;
		z-index : 2;
	}
	article ol h4:after{
		width : 100px;
		height : 233px;
		display : block;
		position : absolute;
		top : 117px;
		left : 50%;
		margin-left : -50px;
	}
	article ol li:nth-child(odd) div{
		-webkit-box-orient : horizontal;
		-webkit-box-direction : reverse;
		flex-direction : row-reverse;
	}
	article ol li:nth-child(odd) div > img{
		margin-left : calc( 23 * 100% / 886 );
	}
	article ol li:nth-child(even) div p{
		margin-left : calc( 23 * 100% / 886 );
	}
	article ol li:not(:first-child){
		margin-top : -52px;
	}
	article ol div{
		width : calc( 886 * 100% / 1080 );
		height : 254px;
		padding : 20px calc(18 * 100% / 886 ) 20px calc(36 * 100% / 886 );
		position : relative;
		left : calc( 193 * 100% / 1080 );
		top : -110px;
		z-index : 1;
		display : -webkit-box;
		display : flex;
		-webkit-box-align : center;
		align-items : center;
		-webkit-box-pack : justify;
		justify-content : space-between;
	}
	article ol div p{
		font-size : 20px;
		line-height : 25px;
	}
	article ol li:nth-child(3) ul{
		display : -webkit-box;
		display : flex;
		-webkit-box-pack : justify;
		justify-content : space-between;
		width : calc( 532 * 100% / 832 );
		-webkit-box-align : baseline;
		align-items : baseline;
	}
	article ol li:nth-child(3) ul li{
		width : calc( 260 * 100% / 532 );
	}
	article ol li:nth-child(3) ul li img{
		width : 100%;
		height : auto;
	}
	article ol li:nth-child(3) p{
		width : calc( 281 * 100% / 832 );
	}
	article ol li:nth-child(4) ul{
		margin-left : calc( 23 * 100% / 886 );
	}
	article ol li:nth-child(4) ul li{
		font-family : "Montserrat";
		font-weight : 400;
		color : #323232;
		font-size : 20px;
		line-height : 25px;
	}
	article ol li:nth-child(4) ul li:not(:first-child){
		margin-top : 34px;
	}
}
@media (min-width: 1200px){
	article .container{
		width : 1180px;
		padding-right : 0;
		padding-left : 0;
	}
}