pg_flow.css
.flow-content__wrap {
background-color: #f1f1f1;
}
.flow-content__span {
background-color: #d30e1e;
}
@media screen and (max-width: 767px) {
.flow-content__span {
background: none;
color: #d30e1e;
}
}
.flow-content__h2 {
color: #111;
}
.flow-content__h3 {
font-size: 1.6em;
font-weight: bold;
color: #fff;
margin: 0 auto 2%;
padding: 2%;
background: #000f36;
@media screen and (max-width: 767px) {
padding: 4% 2%;
font-size: 2rem;
}
}
.flow-content__txt {
color: #111;
}
.flow__anchor {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.flow__anchor--item {
width: 49%;
@media screen and (max-width: 767px) {
width: 100%;
}
&:not(:nth-of-type(2n)) {
margin-right: 2%;
@media screen and (max-width: 767px) {
margin-right: 0;
}
}
&:nth-of-type(n+3) {
margin-top: 2%;
@media screen and (max-width: 767px) {
margin-top: 0;
}
}
&:not(:nth-of-type(1)) {
@media screen and (max-width: 767px) {
margin-top: 4%;
}
}
}
.flow__anchor--item a {
display: block;
padding: 15px 0;
border: 2px solid #d30f1e;
text-align: center;
position: relative;
color: #333;
font-size: 2rem;
@media screen and (max-width: 767px) {
padding: 4% 2%;
font-size: 1.6rem;
}
}
.flow__anchor--item a i {
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
color: #d30f1e;
z-index: 2;
font-family: "FontAwesome";
font-weight: 900;
}
#flow div[id^="sec"] {
padding-top: 20px;
margin-top: -20px;
@media screen and (max-width: 767px) {
padding-top: 10px;
margin-top: -10px;
}
}
#flow {
box-sizing: border-box;
.flow {
&.container {
margin: 0 auto 120px;
@media screen and (max-width: 1024px) {
padding: 0 4%;
}
@media screen and (max-width: 767px) {
padding: 0 4%;
margin: 0 auto 12%;
}
}
}
.anchor {
margin-bottom: 60px;
@media screen and (max-width: 767px) {
margin-bottom: 6%;
}
}
}