.contact-title h2{
font-size: 1.875rem;
font-weight: bold;
color: #333333;
position: relative;
text-align: center;
padding-bottom: 1.875rem;
margin-bottom: 0;
line-height: 1.75rem;
}
.contact-title h2:after{
content: "";
width: 3.75rem;
border-bottom: 2px solid #063c83;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.contact-us{
background: #FFFFFF;
}
.president-box{
margin: 3.125rem 0;
}
.president-box .president{
border-radius: 5px;
overflow: hidden;
box-shadow: 0 3px 1rem rgb(0 0 0 / 14%);
}
.president-box .president-doc{
padding-left: 1.5rem;
}
.president-box .president-doc h1{
font-size: 2.75rem;
font-weight: bold;
display: inline-block;
padding-right: 1rem;
}
.president-box .president-doc h3{
font-size: 1.625rem;
color: #666666;
display: inline-block;
}
.president-box .president-doc p{
font-size: 1.375rem;
color: #999999;
padding-left: 1.5rem;
position: relative;
margin-bottom:.5rem;
}
.president-box .president-doc p:before{
content: "";
width: .75rem;
height: .75rem;
background: #063c83;
position: absolute;
left: 0;
top: .5rem;
border-radius: 50%;
}
.president-box .president-doc ul{
overflow: hidden;
}
.president-box .president-doc ul li{
float: left;
margin-right: 2.5rem;
}
.president-box .president-doc ul li i{
font-size: 2.75rem;
}
.president-box .president-doc ul li:nth-child(1) i{
color: #0274b3;
}
.president-box .president-doc ul li:nth-child(2) i{
color: #13b4ea;
}
.president-box .president-doc ul li:nth-child(3) i{
color: #297aff;
}
.why-aogrand{
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 1.875rem;
}
.why-aogrand:after{
content: "Why AoGrand";
width: 9rem;
height: 9rem;
background: #FFFFFF;
border: 1px solid #c6c6c6;
font-size: 1.625rem;
color: #333333;
font-weight: bold;
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
padding: 2rem 0;
}
.why-aogrand .item{
padding: 3.125rem 3rem 2rem;
min-height: 310px;
}
.why-aogrand .item.pr{
padding-right: 4.25rem;
}
.why-aogrand .item.pl{
padding-left: 4.25rem;
}
.why-aogrand .item p{
color: #3b3b3b;
margin-top: 1.375rem;
}
.why-aogrand .item img{
margin: 0 auto;
display: block;
}
.why-aogrand .bg-blue{
background: #063c83;
}
.why-aogrand .bg-black{
background: #22272a;
}
.why-aogrand .bg-blue p,.why-aogrand .bg-black p{
color: #FFFFFF;
}
.commitments{
margin-top: 1.75rem;
}
.commitments ul{
overflow: hidden;
max-width: 786px;
margin: 0 auto;
}
.commitments ul li{
width: 20%;
float: left;
}
.commitments ul li p{
text-align: center;
font-size: .875rem;
color: #666666;
margin-top: 1rem;
}
.international{
margin-top: 1.875rem;
}
.international ul{
overflow: hidden;
max-width: 786px;
margin: 0 auto;
}
.international ul li{
overflow: hidden;
margin-bottom: .5rem;
color: #666666;
font-size: 1rem;
line-height: 1.875rem;
text-transform: uppercase;
width: 50%;
float: left;
}
.international ul li span{
color: #333333;
font-size: 1.25rem;
font-weight: bold;
line-height: 0.875rem;
text-transform: uppercase;
}
.international ul li a{
color: #666666;
text-transform: initial;
}
.international .number{
font-weight: bold;
color: #063c83;
font-size: 1.875rem;
}
.max-width-400{
max-width: 400px;
}
.group-address{
margin: 3rem 0;
}
.group-address img{
border-radius: 5px;
}
.group-address ul{
padding-left: 3.5rem;
}
.group-address ul li{
overflow: hidden;
margin-top: 3.75rem;
}
.group-address ul li h3{
color: #063c83;
font-size: 1.375rem;
font-weight: bold;
margin-bottom: 1rem;
}
.group-address ul li dl{
float: left;
max-width: 241px;
font-size: 1rem;
color: #666666;
}
.group-address ul li dl span{
font-weight: bold;
color: #333333;
font-size: 1.25rem;
}
.corp{
margin-bottom: 4rem;
}
.corp ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.corp ul li{
position: relative;
overflow: hidden;
border-radius: 4px;
}
.corp ul li:after{
content:"";
height:100%;
width:100%;
position:absolute;
background: rgba(0, 0, 0, .7);
z-index: 0;
left: 0;
top: 100%;
transition: all .3s ease-out;
}
.corp ul li:hover:after{
top: 0;
}
.corp ul li .bg{
position: absolute;
width: 100%;
height: 100%;
top: 100%;
z-index: 2;
transition: all .3s ease-out;
}
.corp ul li:hover .bg{
top: 22%;
}
.corp ul li h5{
font-weight: bold;
color: #FFFFFF;
font-size: 1.375rem;
text-align: center;
position: relative;
line-height: 2.5rem;
}
.corp ul li h5:after{
content: "";
width: 1.375rem;
border: 1px solid #FFFFFF;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 0;
border-radius: 10px;
}
.corp ul li p{
color: #FFFFFF;
text-align: center;
font-size: 1.125rem;
}
.icon-box .inquiry{
color: #FFFFFF;
background: #f8952c;
padding: 0.5rem 0.5rem;
border-radius: 5px;
font-size: 1rem;
display: inline-block;
}
.icon-box .inquiry i{
padding-right: 5px;
font-size: 1.25rem;
}
@media (max-width: 1199.98px) {
.contact-title h2{
font-size: 1.75rem;
padding-bottom: 1.5rem;
}
.president-box{
margin: 2.75rem 0;
}
.president-box .president-doc{
padding-left: 0;
}
.president-box .president-doc h1{
font-size: 2.5rem;
padding-right:0;
}
.president-box .president-doc h3{
font-size: 1.5rem;
}
.president-box .president-doc p{
font-size: 1.125rem;
}
.why-aogrand .item{
padding: 3.125rem 2rem 4rem;
}
.why-aogrand .item.pr{
padding-right: 2.25rem;;
}
.why-aogrand .item.pl{
padding-left: 2.25rem;
}
.group-address ul{
padding-left: 2rem;
}
.group-address ul li{
margin-top: 1.75rem;
}
.group-address ul li dl{
max-width: 188px;
}
.international ul li{
font-size: .875rem;
}
.international ul li span{
font-size: 1.125rem;
}
.international .number{
font-size: 1.75rem;
}
.corp ul{
justify-content: space-around;
}
.corp ul li{
margin-bottom: 1rem;
}
}
@media (max-width: 991.98px) {
.president-box .president-doc h1{
font-size: 2.25rem;
}
.president-box .president-doc h3{
font-size: 1.25rem;
}
.president-box .president-doc p{
font-size: 1rem;
}
.president-box .president-doc ul{
margin-top: 1rem;
}
.why-aogrand:after{
width: 8rem;
height: 8rem;
padding: 1.5rem 0;
}
.commitments ul li{
width: 33.3333333%;
margin-bottom: 1rem;
}
.group-address ul{
padding-left: 1rem;
}
}
@media (max-width: 767.98px) {
.contact-title h2{
font-size: 1.5rem;
padding-bottom: 1rem;
}
.president-box .president-doc ul li{
margin-right: 2rem;
}
.president-box .president-doc ul li i{
font-size: 2.5rem;
}
.president-box{
margin: 1.75rem 0;
}
.why-aogrand:after{
width: 6rem;
height: 6rem;
font-size: 1.25rem;
padding: 1rem 0;
}
.why-aogrand .item{
padding: 2rem 2rem 2rem;
}
.why-aogrand .item.pl{
padding-left: 2rem;
}
.why-aogrand .item.pr{
padding-right: 2rem;
}
.why-aogrand .item p{
font-size: .875rem;
}
.max-width-400{
max-width: 350px;
}
.international .number{
font-size: 1.5rem;
}
.group-address ul{
padding-left: 0;
}
.group-address ul li{
margin-top: .75rem;
}
.group-address ul li h3{
font-size: 1rem;
margin-bottom: .25rem;
}
.group-address ul li dl{
font-size: .875rem;
}
.group-address ul li dl span{
font-size: 1rem;
}
.group-address{
margin: 2rem 0;
}
.icon-box .inquiry{
padding: 0.25rem 0.5rem;
font-size: .75rem;
}
}
@media (max-width: 575.98px) {
.president-box .president-doc h1{
font-size: 2rem;
}
.president-box .president-doc h3{
font-size: 1rem;
}
.president-box .president-doc p{
font-size: .875rem;
}
.president-box .president-doc ul li{
margin-right:1rem;
}
.president-box .president-doc ul li i{
font-size: 2rem;
}
.president-box{
margin: 1rem 0;
}
.contact-title h2{
font-size: 1.25rem;
padding-bottom: .5rem;
}
.why-aogrand{
display: block;
margin-top: 0;
}
.why-aogrand:after{
display: none;
}
.why-aogrand .item{
min-height: 240px;
padding: 2rem 1rem;
}
.why-aogrand .item.pr{
padding-right: 1rem;
}
.why-aogrand .item.pl{
padding-left: 1rem;
}
.commitments ul li{
width: 50%;
min-height: 126px;
}
.international{
margin-top: .875rem;
}
.international ul li{
font-size: .75rem;
width: 100%;
}
.international ul li span{
font-size: 1rem;
}
.group-address ul li dl{
max-width: 100%;
}
.corp ul li{
width: 30%;
}
.corp ul li h5{
font-size: 1rem;
}
.corp ul li p{
font-size:.875rem;
}
}