html, body, * { font-family: "Roboto", sans-serif; font-weight: 400; font-size: 14px; color: #393939; margin: 0 auto; } .wrapper { max-width: 1320px; height: 10000px; } /* -------------------------------------------------------------HEADER-TOP--------------------------------------------------------------------- */ .header_top { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; margin-right: 60px; margin-left: 60px; margin-bottom: 30px; } .header_top_inner { margin: 20px 0; margin: 0 auto; width: 100%; } .header_top_wrapper { display: flex; } .header_top_list { display: flex; } .logo_link { margin: 0; margin-left: 10px; transition: all .3s; } .logo_link:hover { transform: scale(1.05); } .logo_img { } .header_nav_top { display: flex; white-space: nowrap; background-color: #F4F4F4; border-radius: 16px; } .header_top_item { padding: 10px 16px; position: relative; border-radius: 16px; } .header_top_item:hover { background-color: #0C47A0; color: #fff; cursor: pointer; } .header_top_item.active { background-color: #0C47A0; color: #fff; padding-left: 28px; } .header_top_item.active::before { position: absolute; content: ""; display: block; background-color: #fff; width: 9px; height: 9px; border-radius: 50%; top: 12px; left: 14px; } .header_top_link { } .header_call { display: flex; margin: 0; white-space: nowrap; gap: 20px; } .header_call_tel { display: flex; align-items: center; justify-content: center; gap: 5px; transition: all .3s; } .header_call_tel:hover { transform: scale(1.07); color: #0C47A0; } .header_call_tel svg{ display: block; width: 18px; height: 18px; } .header_tel_link { } .header_call_btn { display: flex; align-items: center; padding: 10px 16px; border-radius: 16px; background-color: #0C47A0; gap: 5px; transition: all .3s; } .header_call_btn:hover { transform: scale(1.07); } .header_call_btn svg { display: block; width: 16px; height: 16px; } .header_call_text { color: #fff; } .header_top_list { margin: 20px 0; } .header_nav { display: flex; justify-content: space-between; background-color: #F4F4F4; border-radius: 16px; width: 100%; } .header_nav_item { display: block; justify-content: space-between; align-items: center; white-space: nowrap; padding: 10px 16px; } .header_nav_link { transition: all .1s; } .header_nav_link:hover { color: #0C47A0; transform: scale(1.01); } /* ------------------------------------------------HEADER-BODY------------------------------------------------------ */ .header_body { } .header_body_inner { } .header_body_top { display: flex; justify-content: space-between; margin-bottom: 30px; } .header_body_heading { font-size: 55px; font-weight: 500; margin-right: 150px; } .header_body_heading svg { text-align: center; vertical-align: middle; } .header_header_img { text-align: center; vertical-align: middle; height: 32px; width: 90px; background: linear-gradient(to right, #0C47A0, #8FECFC); border-radius: 30px; } .header_body_about { max-width: 20%; display: flex; flex-direction: column; justify-content: center; margin-bottom: 40px; } .header_about_text { font-weight: 500; margin-top: 5px; } .header_body_about span { color: #939393; } .header_about_img { display: block; width: 19px; height: 19px; margin: 0; } .header_slider { display: flex; height: 350px; gap: 10px } .slide { } .main { flex: 50%; background: url("/images/header_body/seo_top_01.png") 100% / cover; border-radius: 30px; padding: 20px 20px; display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 10px; } .tags { display: flex; margin: 0; flex-direction: column; } .row_first { display: flex; flex-direction: row; margin: 0; margin-bottom: 8px; } .row_second { display: flex; flex-direction: row; margin: 0; } .tags span { color: #fff; padding: 8px; background-color: #0C47A0; border-radius: 16px; border: 1px solid #fff; margin: 0; } .tags svg { margin: auto 0; display: block; width: 10px; height: 10px; } .content { margin: 0; display: flex; justify-content: space-between; align-items: center; } .subtitle { margin: 0; color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; } .subtitle svg { display: block; width: 24px; height: 24px; } .index { display: flex; margin: 0; height: 40px; width: 40px; background-color: #fff; border-radius: 50%; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; } .index span { } .slide_small { background-color: #0C47A0; border-radius: 30px; display: flex; align-items: center; justify-content: center; position: relative; width: 5%; height: 100%; } .slide_small_index { position: absolute; bottom: 0; display: flex; height: 40px; width: 40px; margin: 0; background-color: #fff; border-radius: 50%; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; margin-bottom: 10px; } .slide_small_title { color: #fff; transform: rotate(270deg); font-weight: 500; white-space: nowrap; text-align: center; vertical-align: middle; } .second { background-color: #A5C6F6; } .slide_small_light { } .slide_card { background: url("/images/header_body/seo_top_04.png") 100% / cover; border-radius: 30px; padding: 20px; width: 17%; } .card-content { background-color: oklch(45.034% 0.18646 260.482 / 0.259); height: 100%; border-radius: 30px; padding: 15px; } .card-number { display: flex; height: 40px; width: 40px; margin: 0; background-color: #fff; border-radius: 50%; align-items: center; justify-content: center; font-weight: 600; font-size: 18px; } .btn { }