.myl_box { position: relative; overflow: hidden; margin-top: 50px; }
.myl_box li, .myl_box p { font-size: 22px; line-height: 30px; }
.myl_box .myl_hdr { background: #2ba37d; position: relative; }
.myl-detail { position: relative; padding: 55px 0; }
.myl-detail:before { position: absolute; content: ""; left: -15%; top: 0; background: url(../img/myl/hdr_before.png) no-repeat center; background-size: 90%; padding: 20%; }
.myl-detail:after { position: absolute; content: ""; right: -7%; top: -7%; background: #259974; padding: 10%; border-radius: 50%; }
.top_myl_banner { position: relative; z-index: 1; }
.top_myl_banner:before { position: absolute; content: ""; left: 47%; top: -27%; background: url(../img/myl/circle_bg.png) no-repeat center; background-size: contain; padding: 33%; z-index: -1; }
.myl_btm { margin-top: -37%; }
.myl_logo figure img { max-width: 50%; }
.myl_brief { background: url(../img/myl/disrcription_bg.png) no-repeat center; background-size: cover; padding: 50px 0; }
.myl_brief p { color: #fff; }
.myl_box h2 { font-size: 2.3rem; font-weight: 700; padding-bottom: 10px; }
.myl_brief h3 { padding-top: 40px; padding-bottom: 20px; font-weight: 800; }
.myl_projects .myl_det p { color: #fff; }
.myl_projects .myl_det { padding: 110px; background: #2ba37d; border-radius: 50%; width: 540px; height: 540px; z-index: 1; }
.myl_projects .myl_det:before { position: absolute; content: ""; padding: 12%; background: rgba(254, 227, 202, 0.58); border-radius: 50%; z-index: -2; right: 0; top: 0; }
.myl_key_feature { background: #fbb068; padding: 60px 0; position: relative; overflow: hidden; }
.myl_key_feature:before { position: absolute; content: ""; left: -15%; top: -5%; padding: 12%; background: #ffa54e; border-radius: 50%; }
.myl_key_feature li { position: relative; padding-left: 32px; padding-bottom: 25px; color: var(--white); }
.myl_key_feature li:before { position: absolute; content: ""; background: url(../img/myl/li_before.png) no-repeat center; background-size: contain; padding: 10px; left: 0; top: 5px; }
.myl_key_feature .myl_title h2 { display: inline-block; position: relative; margin-bottom: 30px; }
.myl_key_feature .myl_title h2:before { position: absolute; content: ""; background: #fff; height: 4px; width: 100%; bottom: 0; }
.myl_ui_feature h2 { color: #000; text-align: center; position: relative; display: inline-block; }
.myl_ui_feature .myl_title h2:before { position: absolute; content: ""; background: #000; height: 4px; width: 100%; bottom: 0; }
.myl_ui_feature .myl_title { text-align: center; padding-bottom: 50px; }
.myl_ui_feature { padding: 50px 0; }
.myl_ui_feature .ui-feature { margin-top: 100px; }
.tech_list_feature { background: #2ba27d; padding: 20px 0; }
.tech_list_feature h2 { font-size: 2rem; margin-bottom: 70px!important; }
.excel_detail p { color: #fff; padding: 50px 25px; }
.ui-feature, .ui-features, .ux-feature { position: relative; }
.ui-feature:before {transform: rotate(180deg); background: url(../img/myl/ux_feature.png) no-repeat center; background-size: contain; left: 0; padding: 12%; position: absolute; content: ""; top: -18%; right: 0; z-index: -1; }
.ux-features:before { background: #f0f9f0; padding: 12%; position: absolute; content: ""; bottom: 0; right: 20%; border-radius: 50%; z-index: -1; }
.ux-features:after { background: #f0f9f0; padding: 7%; position: absolute; content: ""; bottom: 30%; right: -15%; border-radius: 50%; }
.myl_projects { padding: 60px 0; }
.myl_box .web_wrap { padding: 0 80px; }
.tech_list_feature:before { display: none; }
.key_rgt { position: relative; z-index: 1; }
.key_rgt:before { position: absolute; left: 0; content: ""; background: url(../img/myl/circle_bg.png) no-repeat center; background-size: contain; padding: 15%; bottom: 0; z-index: -1; opacity: .3; }

@media (max-width: 1200px){
    .myl_projects .myl_det { padding: 20px; background: #2ba37d; border-radius: 15px; width: 100%; height: 100%; z-index: 1; }
    .myl_projects .myl_det:before { top: -20px; }
}
@media (max-width: 1024px){
    .myl_box li, .myl_box p { font-size: 20px; }
    .myl_key_feature li { padding-bottom: 15px; }
    .myl_box h2 { font-size: 2.4rem; }
}
@media (max-width: 991.98px){
    .myl_box .web_wrap { padding: 0 40px; }
}
@media (max-width: 767.98px){
    .myl_box h2 { font-size: 2rem; }
    .myl_projects .myl_det { margin-bottom: 30px; }
    .tech_list_feature h2 { margin-bottom: 20px!important; }
    .myl_box li, .myl_box p { font-size: 18px; }
    .myl_box .web_wrap { padding: 0 25px; }
    .myl_logo figure img { max-width: 35%; }
    .myl_ui_feature { text-align: center; }
    .myl_ui_feature .ui-feature { margin-top: 0; }
    .tech_list_feature img.d-md-block.m-auto { display: none; }
    .top_myl_banner:before { top: 0; }
    .myl_hdr .app_stores { margin-top: 20px; }
    .img_mobl img { padding: 10px; }
    .excel_detail p { padding-bottom: 10px; padding-top: 10px; }
}
@media (max-width: 575px){
    .myl_logo figure img { max-width: 55%; }
    .myl_projects { padding-bottom: 30px; }
    .myl_box h2 { font-size: 1.8rem; }
    .myl_key_feature li:before { padding: 9px; }
    .myl_ui_feature .myl_title { padding-bottom: 20px; }
}