#connecting{
background: url("../image/contact_bgImg.webp") , no-repeat center center;
background-size: cover;
padding: 60px 0 60px 0;
color: #333333;
}

#connecting .content{
overflow: hidden;
width: 90%;
max-width: 90%;
margin: 0 auto;

}

#connecting h3.headline{
text-align: center;
font-weight:700;
font-size: 26px;
color: #333333;
}

#connecting .flexBox {
	display: flex;
    width: 80%;
    justify-content: center;
    margin: 0 auto;
}

#connecting .contentA{
	width: 50%;
	/*float: left;
	display: grid;*/
	display: flex;
	padding: 30px 0;
	max-width: 440px;
}


#connecting .contentA_inner{
background: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
/*height: 190px; */
/*width: 360px;*/
border-radius: 6px;
max-width: 90%;
margin: 12% auto;
padding: 8% 8% 8% 8%;
text-align: center;
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-direction: normal;
	-webkit-box-orient: vertical;
	-ms-flex-direction: column;
	flex-direction: column;
}


#connecting .connecting_btnA a {
	text-decoration: none;
    background: #E3993C;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 250px;
    padding: 10px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 700;
	font-size: 20px
	  
}

#connecting .connecting_btnA a:hover {
    background: #eee;
    color: #313131;
}

#connecting .connecting_btnA a:hover:after {
    border-color: #ccc;
}

#connecting .connecting_text {
	 padding: 10px;
	border-color: #262933;
	 font-size: 16px;
	 font-weight: 600;
}


#connecting .connecting_linkA {
	margin-top: auto;
}

#connecting .connecting_linkA a{
	color: #E3993C;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
}


#connecting .contentB{
	width: 50%;
	/*float: right;*/
	padding: 30px 0;
	display: flex;
	max-width: 440px;
}

#connecting .contentB_inner{
background: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
/*height: 190px;  
width: 360px;*/
border-radius: 6px;
max-width: 90%;
margin: 12% auto;
padding: 8% 8% 8% 8%;
text-align: center; 
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-direction: normal;
	-webkit-box-orient: vertical;
	-ms-flex-direction: column;
	flex-direction: column;
}

#connecting .connecting_btnB a {
	text-decoration: none;
    background: #3371AF;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 250px;
    padding: 10px 25px;
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: 700;
	font-size: 20px
}

#connecting .connecting_btnB a:hover {
    background: #eee;
    color: #313131;
}

#connecting .connecting_btnB a:hover:after {
    border-color: #ccc;
}

#connecting .connecting_linkB {
	margin-top: auto;
}

#connecting .connecting_linkB a{
	color: #3371AF;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
}

.pcBR {
	display: block;
}
	
.smpBR {
	display: none;
}

@media screen and (max-width: 640px) {
#connecting .content{
width: 100%;
margin: 0 auto;
}
	
#connecting .contentA{
width: 100%;
float: left;
margin: 0 auto;
font-size: 14px;
}
	
#connecting .contentA_inner{
background: #ffffff;
border-radius: 6px;
max-width: 90%;
margin: 0 auto;
text-align: center;
}
	
#connecting .contentB{
width: 100%;
float: left;
margin: 0 auto;
font-size: 14px;
}
	
#connecting .contentB_inner{
background: #ffffff;
border-radius: 6px;
/*max-width: 80%;*/
margin: 0 auto;
text-align: center;
}
	
	#connecting .flexBox {
		display: block;
		width: 100%;
	}
	
	#connecting .contentB_inner {
		width: 90%;
	}

	#connecting .contentA,
	#connecting .contentB {
		padding-bottom: 0;
	}
	
	
	.pcBR {
		display: none;
	}
	
	.smpBR {
		display: block;
	}
	
	
	
}