#introContainer { 
	height : calc(100svh - 191px)
}

#introContainer > .row,
#introContainer > .row > .col { 
	height : 100%; 
}

/*
#introContainer > .row > .col > .col-inner,
#introContainer > .row > .col > .col-inner > .col-box {  
	  
}
*/

#introContainer .col-inner-01 { background: url(../img/intro/bg_intro_01.jpg) no-repeat center center / cover; }		
#introContainer .col-inner-02 {  background: url(../img/intro/bg_intro_02.jpg) no-repeat center center / cover; }
#introContainer .col-inner-03 { background: url(../img/intro/bg_intro_03.jpg) no-repeat center center / cover; }
#introContainer .col-inner-04 { background: url(../img/intro/bg_intro_04.jpg) no-repeat center center / cover; }
#introContainer .col-inner-05 { background: url(../img/intro/bg_intro_05.jpg) no-repeat center center / cover; }

#introContainer .col-inner  { 
	padding-left : 3.75rem; 
	padding-right : 1.25rem; 
	position: relative; 
	word-break: break-word;
}

#introContainer .col-inner:before{
	content: '';
	display: block;	
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;	
	left: 0; 
	transition: all 0.5s;
}

#introContainer .col-inner-01:hover:before { background:  rgba(48, 160, 78, 0.8) }
#introContainer .col-inner-02:hover:before { background:  rgba(74, 167, 232, 0.8) }
#introContainer .col-inner-03:hover:before { background:  rgba(255, 169, 68, 0.8) }
#introContainer .col-inner-04:hover:before { background:  rgba(45, 179, 178, 0.8) }
#introContainer .col-inner-05:hover:before { background:  rgba(201, 123, 227, 0.8) }

#introContainer .col-inner > .col-box { 
	position: relative; 
	z-index: 10;
}

#introContainer .col-inner > .col-box > .top > *,
#introContainer .col-inner > .col-box > .btm > * { 
	color: #fff; 
	letter-spacing: -0.5px;
}

#introContainer .col-inner > .col-box > .top> b { 
	font-size: 1.375rem; 
	font-weight: 700; 
	line-height: 1; 
}

#introContainer .col-inner > .col-box > .top > h2 { 
	font-size: 2.25rem; 
	font-weight: 700; 
	line-height: 1.305; 
	margin-top: 1.5625rem; 
	margin-bottom: 1.25rem; 
	word-break: auto-phrase;
}

#introContainer .col-inner > .col-box > .top > span { 
	display: block; 
	color: rgba(255, 255, 255, 0.58); 
	font-size: 1.25rem; 
	font-weight: 300; 
	line-height: 1.3; 
	min-height : 52px;
}

#introContainer .col-inner > .col-box > .btm > .btn { 
	display: block; 
	margin-top: 0.9375rem; 
	width: 10.3125rem; 
	height: 3.0625rem; 
	line-height: 3.0625rem; 
	border-radius: 30px; 
	border: 1px solid #fff; 
	text-align: center;
	font-size: 1.125rem; 
	font-weight: 300;  
}

#introContainer .col-inner > .col-box > .btm > .btn span { 
	padding-right: 2.8125rem; 
	background: url(../img/intro/ico_view_more.png) no-repeat right center / 8px; 
}


@media screen and (max-width:1920px) {
	#introContainer .col-inner  { 
		padding-left : 1.25rem;
		padding-right : 1.25rem; 
	}
}

@media screen and (max-width:1720px) {
	#introContainer { 
		height : 100svh;
	}

	#introContainer > .row > .col {	
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
		max-height: 33.333%;
		-ms-flex-pack: center !important;
		justify-content: center !important;
	}

	#introContainer > .row > .col:last-child {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	#introContainer .col-inner > .col-box { 
		width: 100%;
        max-width: 530px;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: space-between !important;
		justify-content: space-between !important;
		-ms-flex-align: center !important;
		align-items: center !important;
	}

	#introContainer .col-inner > .col-box > .top {
		-ms-flex: 0 0 60%;
		 flex: 0 0 60%;
		 max-width: 60%;
	}

	#introContainer .col-inner > .col-box > .btm {
		-ms-flex: 0 0 35%;
		 flex: 0 0  35%;
		 max-width:  35%;
	}

	#introContainer .col-inner > .col-box > .top > span { 		
		min-height : auto;
	}

	#introContainer .col-inner > .col-box > .btm > .btn { 		
		margin-top: 0;
		max-width: 100%;
	}

	#introContainer .col-inner > .col-box > .btm > .btn span {
		padding-right: 20%;
	}
}


@media screen and (max-width:845px) {
	#introContainer .col-inner > .col-box > .top> b { 
		font-size: 1rem; 
	}

	#introContainer .col-inner > .col-box > .top > h2 { 
		font-size: 2rem;  
		margin-top: 10px; 
		margin-bottom: 10px; 
	}

	#introContainer .col-inner > .col-box > .top > span { 
		font-size: 1rem; 
	}

	#introContainer .col-inner > .col-box > .btm > .btn { 	
		width: 10.3125rem; 
		height: 3.0625rem; 
		line-height: 3.0625rem; 
		border-radius: 30px; 		
		font-size: 1rem; 
	}
}

@media screen and (max-width:767px) {
	#introContainer > .row {
		-ms-flex-direction: column !important;
		flex-direction: column !important;		
	}

	#introContainer > .row > .col {
		 -ms-flex: 0 0 20%;
		 flex: 0 0 20%;
		 max-height: 20%;
		 max-width: 100%;
		 -ms-flex-pack: center !important;
		justify-content: center !important;
	}

	#introContainer .col-inner > .col-box > .top > h2 { 
		font-size: 1.5rem;  
	}

	#introContainer .col-inner > .col-box > .top > h2 br {
		display: none;
	}
}