@media all {
    /* intro */
    #intro .container_row_content { padding-top:var(--spacing-3L); padding-bottom:var(--spacing-1L); text-align:center; }
    #intro h2 { font-size:calc(var(--font-size-5L) * 1.2); font-weight:var(--font-weight-bold); letter-spacing:calc(var(--spacing-5S)/5); }

    /* hero */
    #hero { background-color:var(--color-gray); }
    #hero .hero_box { display:flex; justify-content:flex-end; }
    #hero .hero_box .body { width:50%; text-align:left; }
    #hero .hero_box .body .title { display:inline-block; margin-bottom:var(--spacing-1S); padding:var(--spacing-1S) var(--spacing-0); color:var(--color-white); font-size:var(--font-size-0); background-color:var(--color-yellow); line-height:1; }
    #hero .hero_box .body .title:after { background-image:none;} 

    #hero .hero_box .body .sub_title { font-size:var(--font-size-3L); font-weight:var(--font-weight-bold); line-height:1.2; }

    /* services */
    #services { overflow-x:hidden;}

    #services .container_row_content { padding-top:calc(var(--spacing-5L) * 1.4); padding-bottom:calc(var(--spacing-5L) * 1.4);}

    #services .ring_yellow_100 { position:absolute; bottom:15%; left:-10%; height:var(--spacing-4L); }
    #services .loops_green_101 { position:absolute; bottom:10%; left:1%; height:var(--spacing-5L); transform:rotate(30deg); }
    #services .circle_blue_102 { position:absolute; bottom:5%; left:-1%; height:var(--spacing-1S); }
        
    #services .circle_green_200 { position:absolute; top:15%; right:3%; height:var(--spacing-0); }
    #services .circle_blue_201 { position:absolute; top:40%; right:-5%; height:var(--spacing-1S); }
    #services .swirl_red_202 { position:absolute; top:50%; right:-10%; height:var(--spacing-4L); }
    #services .zigzag_yellow_203 { position:absolute; top:15%; right:-12%; height:var(--spacing-5L); }

}

@media (max-width:1400px) {

}

@media (max-width:1200px) {

}

@media (max-width:1100px) {

}

@media (max-width:1000px) {
    #intro h2 { font-size:var(--font-size-5L); }
}

@media (max-width:800px) {

}

@media (max-width:700px) {
    #hero .hero_box .body { width:100%;  text-align:center; }

    #services .loops_green_101 { display:none; }
}

@media (max-width:600px) {

}