:root { --hexagon-tech-width: 300px; } 

.section_tech_top { color: #FFF; background: url(../../../assets/img/tech/bg_tech_top.jpg) no-repeat top center #071631 fixed; background-size: cover; } 
.section_tech_top .page_inner { display: flex; flex-direction: column; justify-content: space-between; height: 500px; padding: var(--common-section-big-padding) 30px; text-shadow: var(--common-title-shadow); } 
.section_tech_ai_cro { padding: var(--common-section-padding) 0; text-align: center; background: url(../../../assets/img/tech/bg_tech_ai_cro.jpg) no-repeat bottom center #f4f7fd; } 
.section_tech_benefit { padding: var(--common-section-padding) 0; text-align: center; background: #ffffff; } 
.section_tech_benefit .benefit_list { display: flex; justify-content: space-between; align-items: center; margin-top: 4em; font-size: 18px; } 
.section_tech_benefit .benefit_item { flex: 0 0 32%; padding: 3em 2.8%; background-color: #f6fafd; color:#596F83 } 
.section_tech_benefit .benefit_item.active { padding: 7.5em 2.8% 5em 2.8%; background: url(../../img/tech/bg_tech_benefit_center.jpg) no-repeat top center #014786; background-size: 100% auto; color: #fff; } 
.section_tech_benefit .benefit_title { font-size: 30px; font-weight: bold; text-align: center; } 
.section_tech_benefit .benefit_desc_list { margin-top: 2em; text-align: left; line-height: 1.5em; } 
.section_tech_benefit .benefit_desc_item { position: relative; padding-left: 1em; } 
.section_tech_benefit .benefit_desc_item + .benefit_desc_item { margin-top: 0.6em; } 
.section_tech_benefit .benefit_desc_item::before { content: ''; position: absolute; left: 0; top: 0.75em; display: block; width: 0.25em; height: 0.25em; border-radius: 50%; background: #596F83; transform: translate3d(0, -50%, 0);} 
.section_tech_benefit .benefit_item.active .benefit_desc_item::before { background: #ffffff; } 

.section_tech_ai_cro .model_info { position: relative; margin: var(--common-section-padding) 0 var(--common-section-padding) 0; height: calc(var(--hexagon-tech-width)*3); } 
.section_tech_ai_cro .center_title_wrap { position: absolute; left: 50%; width: calc(var(--hexagon-tech-width) * 1.4); height: calc(2.4rem + var(--hexagon-tech-width) * 1.945); display: flex; flex-direction: column; align-items: center; color: #596F83; background: url('../../img/tech/ai_cro_line_center.svg') no-repeat top 0.8em center; transform: translate3d(calc(-50%),0,0); font-size: 24px; line-height: 1.6; background-size: contain; z-index: 5; } 
.section_tech_ai_cro .center_title_wrap .center_title { font-weight: bold; color: #014686; } 
.section_tech_ai_cro .center_title_wrap .center_desc { font-size: 14px; } 
.section_tech_ai_cro .line_wrap { position: absolute; left: 0; top: -2em; width: 100%; display: flex; flex-direction: column; } .section_tech_ai_cro .line { position: absolute; display: flex; align-items: center; top: 0; width: calc(var(--hexagon-tech-width)*2); height: calc(var(--hexagon-tech-width) * 1); padding: 0 calc(var(--hexagon-tech-width) * 0.075); background-size: auto 100%; background-repeat: no-repeat; background-position: top left; } 
.section_tech_ai_cro .line.top { top: calc(var(--hexagon-tech-width) * 0.04); background-image: url(../../img/tech/ai_cro_line_top.svg); } 
.section_tech_ai_cro .line.middle { top: calc(var(--hexagon-tech-width) * 1.015); background-image: url(../../img/tech/ai_cro_line_middle.svg); } 
.section_tech_ai_cro .line.bottom { top: calc(var(--hexagon-tech-width) * 2); background-image: url(../../img/tech/ai_cro_line_bottom.svg); } 
.section_tech_ai_cro .line.left { left: 50%; transform: translate3d(calc(-50% - var(--hexagon-tech-width) * 1.138), 0, 0); } 
.section_tech_ai_cro .line.right { right: 50%; justify-content: flex-end; background-position: right; transform: translate3d(calc(var(--hexagon-tech-width) * 2.135), 0, 0); } 
.section_tech_ai_cro .line.right.top { background-image: url(../../img/tech/ai_cro_line_top_right.svg); } 
.section_tech_ai_cro .line.right.bottom { right: 50%; width: calc(var(--hexagon-tech-width)*2.25); background-image: url(../../img/tech/ai_cro_line_bottom_right.svg); transform: translate3d(calc(var(--hexagon-tech-width) * 2.15), 0, 0); } 
.section_tech_ai_cro .hex-row-wrap { position: relative; display: flex; flex-direction: column; gap: calc(var(--hexagon-tech-width) * 0.115); } 
.section_tech_ai_cro .hex-row { position: relative; display: flex; justify-content: center; gap: calc(var(--hexagon-tech-width) * 2.11); } 
.section_tech_ai_cro .hex { position: relative; display: flex; justify-content: center; justify-content: flex-end; flex-direction: column; text-align: center; width: var(--hexagon-tech-width); height: calc(var(--hexagon-tech-width)*0.866); background: #efefef; font-size: 18px; color: #003366; font-weight: 600; background-position: center center; background-size: cover; clip-path: polygon( 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50% ); z-index: 1; }
.section_tech_ai_cro .hex .icn_box { display: block; width: 80px; height: 80px; background-repeat: no-repeat; background-position: center center; background-size: contain; margin: 0 auto 40px auto; }
.section_tech_ai_cro .hex.data .icn_box { background-image: url('../../img/tech/icn_ai_cro_data.svg'); } 
.section_tech_ai_cro .hex.simulation .icn_box { background-image: url('../../img/tech/icn_ai_cro_simulation.svg'); } 
.section_tech_ai_cro .hex.embed .icn_box { background-image: url('../../img/tech/icn_ai_cro_embed.svg'); } 
.section_tech_ai_cro .hex.mllm .icn_box { background-image: url('../../img/tech/icn_ai_cro_mllm.svg'); } 
.section_tech_ai_cro .hex.diff .icn_box { background-image: url('../../img/tech/icn_ai_cro_diff.svg'); } 

.section_tech_ai_cro .hex .subtitle { display: block; width: 100%; height: 1.4em; font-size: 12px; text-align: center; line-height: 1.4; color: rgba(255, 255, 255, 0.7); margin-bottom: 0.6em; }
.section_tech_ai_cro .hex .title { display: flex; justify-content: center; align-items: center; width: 100%; height: 2.8em; font-size: 14px; text-align: center; line-height: 1.4; color: #ffffff; background-color: #014686; }
.section_tech_ai_cro .hex.data { background-image: url('../../img/tech/bg_ai_cro_data.jpg'); } 
.section_tech_ai_cro .hex.simulation { background-image: url('../../img/tech/bg_ai_cro_simulation.jpg'); } 
.section_tech_ai_cro .hex.embed { background-image: url('../../img/tech/bg_ai_cro_embed.jpg'); } 
.section_tech_ai_cro .hex.mllm { background-image: url('../../img/tech/bg_ai_cro_mllm.jpg'); } 
.section_tech_ai_cro .hex.diff { background-image: url('../../img/tech/bg_ai_cro_diff.jpg'); } 
.section_tech_ai_cro .hex.transparent { visibility: hidden; } 
.section_tech_ai_cro .hex-center { background: url('/assets/img/ai_cro/bg_ai_tile.jpg') no-repeat center/cover #efefef; color: white; font-size: 40px; font-weight: bold; } 
.section_tech_ai_cro .base_center { width: calc(var(--hexagon-tech-width) * 0.833); flex: 0 0 calc(var(--hexagon-tech-width) * 1.666); margin-top: 2.4em; background: url(../../img/tech/ai_cro_base.jpg) no-repeat; background-size: contain; z-index: 3; } 
.section_tech_ai_cro .connector { position: absolute; width: 200px; height: 80px; background: url(../../img/ai_cro/ai_cro_line.svg) no-repeat; background-size: contain; } 
.section_tech_ai_cro .text_wrap { margin-top: 80px; font-size: 30px; } 
.section_tech_ai_cro .text_wrap .bottom_title { font-weight: bold; color: #014686; } 
.section_tech_ai_cro .text_wrap .bottom_desc { color: #729BCD; } 


@media (max-width: 1600px) {
    :root { --hexagon-tech-width: 260px; } 
    .section_tech_top .page_inner { height: 360px; padding: var(--common-section-big-padding) 30px; }
    .section_tech_benefit .benefit_title { font-size: 24px; }
    .section_tech_benefit .benefit_list { font-size: 14px; }
    .section_tech_ai_cro .text_wrap { margin-top: 58px; font-size: 24px; }
    .section_tech_ai_cro .hex .icn_box { width: 3.4em; height: 3.4em; margin: 0 auto 1em auto; }
}
@media (max-width: 1280px) {
    :root { --hexagon-tech-width: 220px; } 
    .section_tech_ai_cro .center_title_wrap { font-size: 20px; }
    .section_tech_ai_cro .center_title_wrap .center_desc { font-size: 12px; }
    .section_tech_ai_cro .text_wrap { margin-top: 42px; font-size: 20px; }
}
@media (max-width: 1024px) {
    .section_tech_top .page_inner { height: 260px; padding: var(--common-section-big-padding) 22px; }
    .section_tech_benefit .benefit_title { font-size: 20px; }
    .section_tech_benefit .benefit_list { flex-direction: column; row-gap: 1em; margin-top: 1.5em; font-size: 13px; }
    .section_tech_benefit .benefit_item.active { padding: 7.5em 5% 3em 5%; }
    .section_tech_benefit .benefit_item { flex: 0 0 auto; padding: 1.5em 5%; }

    .section_tech_ai_cro .model_info { display: flex; flex-direction: column; align-items: center; height: auto; row-gap: 3em; }
    .section_tech_ai_cro .center_wrap,
    .section_tech_ai_cro .base_center,
    .section_tech_ai_cro .center_title_wrap,
    .section_tech_ai_cro .line_wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
    .section_tech_ai_cro .line.left
    .section_tech_ai_cro .line_wrap { max-width: calc(var(--hexagon-tech-width)*2); margin: 0 auto; }
    
    .section_tech_ai_cro .line_wrap { top: auto; }
    .section_tech_ai_cro .line,
    .section_tech_ai_cro .line.top, 
    .section_tech_ai_cro .line.middle, 
    .section_tech_ai_cro .line.bottom, 
    .section_tech_ai_cro .line.left, 
    .section_tech_ai_cro .line.right, 
    .section_tech_ai_cro .line.right.top, 
    .section_tech_ai_cro .line.right.bottom { position: relative; left: auto; right: auto; top: auto; width: calc(var(--hexagon-tech-width)*2); transform: none; }
    .section_tech_ai_cro .line.right.top { background-image: url(../../img/tech/m_ai_cro_line_top_right.svg); }
    .section_tech_ai_cro .line.right.bottom { background-image: url(../../img/tech/m_ai_cro_line_bottom_right.svg); }
    
    .section_tech_ai_cro .line.left { transform: translate3d(calc(var(--hexagon-tech-width) * 0.425), 0, 0)}
    .section_tech_ai_cro .line.right,
    .section_tech_ai_cro .line.right.top, 
    .section_tech_ai_cro .line.right.bottom { transform: translate3d(calc(var(--hexagon-tech-width) * -0.425), 0, 0)}
}
@media (max-width: 768px) {
    .section_tech_top .page_inner { height: auto; } 
    .section_tech_top .section_desc { margin-top: 1em; } 
}