@charset "utf-8";

@font-face {
    font-family: 'LAB디지털';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/LAB디지털.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Sub Visual */
.sub_visual06_hub { background: url('../jpg/sub_visual_06hub.jpg') center / cover no-repeat;}
.sub_visual06_1_insights { background: url('../jpg/sub_visual_05_1insight.jpg') center / cover no-repeat;}

/* 공통 */
.mb_using{display:none;}

/* hub-main */
.hub-container {margin: 50px 0 150px;}
.hub-container .hun-inner{padding: 0 50px; box-sizing:border-box;}
.hub-container .col {box-sizing: border-box; height: 100%;}
/* .hub-container .col + .col {margin-left: 8px;} */
.hub-container .row + .row {margin-top: 32px;}
.hub-container .section-first { height: 800px;}
.hub-container .section-first .box-artcles{ height: calc(50% - 16px);}
.hub-container .section-first .box-artcles + .box-artcles{margin-top: 32px;}
.hub-container .wrap-customer,
.hub-container .wrap-insights {flex:0 0 65%;}
.hub-container [class*="section"] h5{ color: #a12944; margin-bottom: 8px;}
.hub-container [class*="section"] h5 .date{ color: #999; font-weight: 400; margin-left: 8px;}
.hub-container [class*="box"] { cursor: pointer; height:100%; border-radius: 8px; /* box-shadow: 5px 5px 30px rgba(0,0,0,0.075); */ box-sizing: border-box; overflow: hidden;}


.hub-container .txt{ margin-top:270px; height: 100%; box-sizing: border-box; overflow: hidden; transition: all .3s ease-in-out;}
.up-animation:hover .txt {margin-top: 0;}
.up-animation:hover .txt .content {max-height: 100%; height:100%; position: relative;}
.up-animation:hover .txt .content .content-tit{ max-height: 100%; }
.up-animation:hover .txt .content p {display: block; height: 100%;}
.up-animation:hover .btn-grp{display: block;}
.up-animation .btn-grp {text-align: center; box-shadow: 0 -14px 20px 11px #ffffff; z-index: 6; position: absolute; padding: 16px 0 24px; width: 100%; left: 0; bottom: 0; background: #fff; display: none;}

.hub-container .txt .content { overflow: hidden; background: rgba(255, 255, 255, 0.9); height: 100%;}
.hub-container .txt .content .content-tit {padding: 14px 24px 0; max-height: 92px;overflow: hidden; box-sizing: border-box;}
.hub-container .txt .content .content-tit .date{font-size: 14px;}
/* .hub-container .txt .content .content-tit .tit-wrap */

.hub-container .txt .content p {color: #666; font-size: 18px; line-height: 1.5; padding: 12px 24px; display: none;}
.hub-container h3,
.hub-container h4 {font-weight: 400;}
.hub-container h3 {font-size: 20px; font-weight: 500;}

.hub-container .box-insights {position: relative;}
/* Hub main img change */
.hub-container .box-insights .bg{background:linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, transparent 50%), url(../webp/bg-insight24-ai-analytics.webp) center center / cover no-repeat;}
/* .hub-container .box-insights .bg{background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, transparent 50%), url(/en/asset/images/06_hub/bg_insight6_mobile_access4.jpg) center / cover no-repeat;} */
/* .hub-container .box-insights .bg{background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, transparent 50%), url(/en/asset/images/06_hub/bg_hub_insight_new3.jpg) center / cover no-repeat;} */
.hub-container .box-insights img{width: 100%; height: 100%; transition: all .4s ease-in-out;}
.hub-container .box-insights:hover img{transform: scale(1.05);}
.hub-container .box-insights .txt-grp {position: absolute; padding: 7%; z-index: 1;}
.hub-container .box-insights .txt-grp.txt-wh h3,
.hub-container .box-insights .txt-grp.txt-wh h4{ color: #fff;}
.hub-container .box-insights h3{ font-size: 36px; font-weight: 600; margin-bottom: 8px;}
.hub-container .box-insights h4{ font-size: 20px; margin-bottom: 36px;}

.hub-container .section-second {height: 384px;}

.hub-container .section-third {height: 300px;}
.hub-container .section-third h3{margin-bottom: 12px; font-weight: 600;}
.hub-container .section-third h4{color: #999; line-height: 1.5;}
.hub-container .box-kb .bg{background: #e7e7e7 url(../jpg/bg-hub-kb.jpg) right center / auto 100% no-repeat;}
.hub-container .box-kb h3 {color: #581d53;}
.hub-container .box-support .bg{background: #dfe4ea url(../jpg/bg-hub-support.jpg) right center / auto 100% no-repeat;}
.hub-container .box-support h3 {color: #1b1b49;}

.zoom-ani {position: relative;}
.zoom-ani .bg{ width: 100%; height: 100%; transition: all .4s ease-in-out;}
.zoom-ani:hover .bg{transform: scale(1.15);}
.zoom-ani .txt-grp {position: absolute; z-index: 1; padding:32px; top: 0; left: 0;}


/* insights main*/
.hub-container .new-insights figure,
.hub-container.insights-main [class*="box"] {border-radius: 0; box-shadow: 5px 5px 30px rgba(0,0,0,0.075);}

.hub-container.insights-main h3 {margin-top: 8px;}

.hub-container .new-insights h3 {margin: 16px 0; font-weight: 600; font-size: 28px;}
.hub-container .new-insights h4 {margin-bottom: 30px; font-size: 18px; line-height: 1.5;}
.hub-container .new-insights p {font-size: 1rem;}
.hub-container .new-insights figure {position: relative; overflow: hidden; width: 100%; height: 600px; }
.hub-container .new-insights figure img {transition: all .4s ease-in-out; /* display: inline-block; width: 100%; height: 100%; */}
.hub-container .new-insights figure label {position: absolute; top: 24px; left: 24px; z-index: 1; background: #a12944; width:80px; height: 80px; line-height: 80px; color: #fff; font-weight: 500; text-align: center;}
.hub-container .new-insights .content {padding-left: 24px; padding-top: 24px;}
.hub-container .new-insights .btn-grp {margin-top: 36px;}
.hub-container .new-insights figure:hover img{transform: scale(1.15);}

.hub-container .box-blog .bg{background: url(../jpg/bg-insight-blog1b26.jpg?v2) center /cover no-repeat;}
.hub-container .box-customer .bg{background: url(../jpg/bg-insight-customer.jpg) center /cover no-repeat;}
.hub-container .insights-list .col{-ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; height:380px; margin-bottom: 32px;}
.hub-container .insights-list .more_wrap{ width: 100%; text-align: center;}
.hub-container .insights-list .more_wrap a{ display: inline-block; cursor: pointer;}

.hub-container .sub-link .txt-grp {color: #fff;bottom: 10px; top: unset; right: 0;}
.hub-container .sub-link .txt-grp h3 {text-align: right;}
.hub-container.insights-main .material-icons {margin-left: 16px;}

@media screen and (max-width: 890px) {
    .hub-container .insights-list,
    .hub-container .new-insights figure { height: auto;}
    .hub-container .insights-list .col {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
    .hub-container .new-insights .content {padding-left: 0;}
    .hub-container .sub-link .txt-grp {padding-top: 60%;}
    
}
@media (max-width: 890px) and (min-width:577px){
    .hub-container .insights-list .col {height: 40vw;}
    .hub-container .insights-list .col + .col {margin-bottom: 30px;}       
}

@media screen and (max-width: 576px){
    .hub-container .insights-list .col {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; height: auto; margin-bottom: 0;}
    .hub-container .new-insights figure label {top: 16px; left: 16px; width: 60px; height: 60px; line-height: 60px;}
}

/* insights -Contractless Solutions */
.bg-hub-insights.subject1 {background: url(../jpg/suprema-contactless-solution0.jpg) center / cover no-repeat;}
.bg-hub-insights {width: 100%; height: 640px; padding-top: 450px; background: url('../jpg/sub_visual_05_1insight.jpg') center / cover no-repeat}
.subject-new .bg-hub-insights {height: 400px; padding-top: 200px;}
.bg-hub-insights .tit-insight {background: #fff; padding: 40px; border-radius: 16px; height: auto;}
.tit-insight h5 { color: #a12944; font-size: 18px; margin-bottom: 8px;}
.tit-insight h1 { font-weight:600; font-size: 38px; margin-bottom: 16px;}
.tit-insight h2, 
#wrap .tit-insight .seo-subtit { font-weight:300; font-size: 28px; margin-bottom: 30px; line-height: 1.5;}
.tit-insight .seo-subtit {line-height: normal;color:inherit;}
.wrap-date-share {display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #eee;}
.wrap-date-share .icon-share a{cursor: pointer;}
.insight-container .sub-max-inner{padding: 0 40px;}
.insight-container .inner-section h4,
.insight-container .inner-section .seo-imgtit,
.hub-container.insight-container h2,
.hub-container.insight-container h3{ font-weight: 600; margin-bottom: 24px;} 
.hub-container.insight-container h2,
.hub-container.insight-container h3 {font-size: 24px;}
.insight-container .inner-section h4,
.insight-container .inner-section .seo-imgtit {font-size: 1.375rem;}
.insight-container section:first-child {margin-top: 140px;}
.insight-container section + section {margin-top: 150px;}

.insight-container section h4,
.insight-container section .seo-imgtit { font-weight:600; color: #666; margin-bottom: 12px; font-size: 20px;}
.insight-container section h6 + a {margin-top: 8px;}
.insight-container section figure + p,
.insight-container section figure + h4 {margin-top: 24px;}
.insight-container section p {margin-bottom: 24px;}
.insight-container section .row + p{ margin-top: 30px;}
.insight-container section .center-wrap + p,
.insight-container section p + .row{margin-top: 50px;}
.insight-container section .wrap-video,
.insight-container section:not(.section-third-icon) figure {border-radius: 8px; overflow: hidden;}
.insight-container section .col-txt {flex: 0 0 46%;}
.insight-container section .col-txt-left {padding-right: 30px;}
.insight-container section .col-txt-right {padding-left: 30px;}
.insight-container section .wrap-video {width: 100%; height: 202px; margin-bottom: 32px;}
.insight-container section .btn-grp{text-align: center;}

.insight-container section .wrap-integration {border: 1px solid #ddd; padding: 48px 24px 60px; text-align: center; position: relative; margin-bottom: 50px;}
.insight-container section .wrap-integration img {margin-bottom: 20px;}
.insight-container section .wrap-integration h4{ color: #222; margin-bottom: 50px;}
.insight-container section .wrap-integration h5{font-weight: 400; color: #999;}
.insight-container section .wrap-integration .btn-grp {width: 100%; position: absolute; left:0; bottom: 0; text-align: center;transform: translateY(50%);}


/* insights - Access Control */
.bg-hub-insights.subject2 {background: url(../jpg/suprema-access-control.jpg) center / cover no-repeat;}
.insight-container .section-third-icon figure {height: 100px; line-height: 100px; margin-bottom: 30px;}
.insight-container .section-third-icon figure img { width:auto; height: auto;}

.insight-container .section-six .row + .row,
.insight-container .section-third-icon .row + .row {margin-top: 60px;}

/* insights - Mobile Access */
.bg-hub-insights.subject3 {background: url(../jpg/suprema_mobile_access_1_144c1.jpg?v2_2) center / cover no-repeat;}
.bg-hub-insights.subject4 {background: url(../jpg/suprema_mobile_access_2_1.jpg) center / cover no-repeat;}
.bg-hub-insights.subject5 {background: url(../jpg/suprema_mobile_access_3_1.jpg) center / cover no-repeat;}
.bg-hub-insights.subject6 {background: url(../jpg/suprema_mobile_access_4_11b26.jpg?v2) center / cover no-repeat;}
.bg-hub-insights.subject7 {background: url(../jpg/suprema_mobile_access_5_1.jpg) center / cover no-repeat;}
.bg-hub-insights.subject8 {background: url(../jpg/suprema_mobile_access_6_1.jpg) center / cover no-repeat;}

/* insights - Fingerprints */
.bg-hub-insights.subject9 {background: url(../jpg/suprema_fingerprint1_11b26.jpg?v2) center / cover no-repeat;}
.bg-hub-insights.subject10 {background: url(../jpg/suprema_fingerprint1_new1.jpg) center / cover no-repeat;}
.bg-hub-insights.subject11 {background: url(../jpg/suprema_fingerprint2_11b26.jpg?v2) center / cover no-repeat;}
.bg-hub-insights.subject12 {background: url(../jpg/suprema_fingerprint3_11b26.jpg?v2) center / cover no-repeat;}


/* insights - Fingerprints #2*/
.insight-container .num_tit {color: #a12944;}
.insight-container .num_tit span {border-radius: 45px; background: rgb(161 41 68 / 10%); height: 45px; width: 45px; display: inline-block; line-height: 45px; text-align: center; font-weight: 400; margin-right: 12px;}

.insight-container .txt-summ {position: relative; padding-left: 26px;}
.insight-container .txt-summ .material-icons {position: absolute; top: 5px; left: 0; font-size: 1.25em;}
.insight-container .txt-summ b {text-transform: uppercase; }
.insight-container .txt-summ b::after {content: ''; width: 1px; height: 12px; background: #ccc; display: inline-block; margin: 0 10px;}

.subject12 .insight-container .center-wrap.img-two .img-left h4,
.subject12 .insight-container .center-wrap.img-two .img-left .seo-imgtit {color: #a12944;}
.subject12 .insight-container .center-wrap.img-two .img-right h4,
.subject12 .insight-container .center-wrap.img-two .img-right .seo-imgtit {color: #581d53;}


.insight-container .center-wrap {margin: 0 180px;}
.insight-container .center-wrap.mrg0 {margin: 0;}
.insight-container .center-wrap.img-two { display:flex; justify-content: center; display: -ms-flexbox; display: -webkit-box; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.insight-container .center-wrap.img-two li {text-align: center; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; box-sizing: border-box;}
/* .insight-container .center-wrap.img-two li + li {padding-left: 4px;} */
.insight-container .center-wrap.img-two li b {color: #a42444;}
.insight-container .center-wrap.img-two li p {padding: 12px 0;}
.insight-container .center-wrap.img-two .img-left figure {border-radius: 8px 0 0 8px; padding-right: 2px;}
.insight-container .center-wrap.img-two .img-right figure {border-radius: 0 8px 8px 0; padding-left: 2px;}

.insight-container .list-feature {margin: 80px 0;}
.insight-container .list-feature li {display: flex;}
.insight-container .list-feature li + li {margin-top: 80px;}
.insight-container .list-feature li figure {flex: 0 0 160px;}
.insight-container .list-feature li figure img {width: auto; height: auto;}

.insight-container .two-video-wrap {border-radius: 8px; overflow: hidden; height: 278px;}
.insight-container .center-wrap .video-wrap {border-radius: 8px; overflow: hidden; height: 430px;}
.subject-new .insight-container .center-wrap {text-align: center;}
.insight-container .section-video .tit {text-align: center; margin-top: 16px;}
.insight-container .inner-section {margin-top: 80px;}
.insight-container .inner-section h4,
.insight-container .inner-section .seo-imgtit {margin-bottom: 24px;}

.insight-container .list-figure h5 { text-align: center; padding: 24px 0; font-weight: 500; font-size: 1.2rem; color: #666;}
.insight-container .list-check li {font-size: 1rem; font-size: 18px; margin-bottom: 16px; color: #222; font-weight: 500;}
/* .insight-container .list-check li::before { content:'task_alt'; font-family: 'Material Icons'; display: inline-block; color: #a42444; font-size: 28px; margin-right: 12px; vertical-align: middle;} */
.insight-container .list-check li .material-icons { color: #a42444; font-size: 28px; margin-right: 12px; vertical-align: middle;}

.hub-container .tit-icon {color: #a42444; text-align: center; padding-top: 80px; background: url(../png/suprema_mobile_access_icon8.png) center 0 no-repeat; margin-bottom: 30px;}
.insight-container .color-list {margin: 0 160px;}
.hub-container .color-list dl {font-size: 1.275rem; padding: 20px 0 20px 80px; background: #f6e9ec; border-radius: 60px; margin-bottom: 16px; position: relative;}
.hub-container .color-list dl dt { color:#a42444; background: #f4f4f4; width: 65px; height: 100%; border-radius: 65px; text-align: center; line-height: 65px; position: absolute; top: -3px; z-index: 10; border: 3px solid #fff; left: 0;}
.hub-container .color-list dl:nth-child(even) { background: #eee8ed;}
.hub-container .color-list dl:nth-child(even) dt {color: #581d53;}

.hub-container .num-tit .num {background: #a42444; border-radius: 0 24px 24px 0; color: #fff; padding: 8px 14px 8px 12px; font-weight: 300; margin-right: 12px; letter-spacing: 0;}
.hub-container .num-tit{background: rgba(164, 36, 68, 0.1);padding: 8px 32px 8px 0; border-radius: 24px; display: inline-block;}

/* Mobile Access Series 6 */
.new-container.subject8 .insight-container h3 small,
.new-container.subject8 .insight-container h3 {font-family: 'LAB디지털'!important; color: #a12944; font-weight: 400;}
.new-container.subject8 .insight-container h3 {font-size: 40px; }
.new-container.subject8 .insight-container .col-img {flex:0 0 60%; max-width: 60%;}
.timeline {position: relative;margin-top: 20px;}
.timeline .line {display: inline-block; width: 70px; height: 1px; background-color: #a12944; position: absolute; top: 50%; left: -85px; z-index: 10;}
.col-txt-left .timeline .line { left: auto; right: -85px;}
.col-txt-left .timeline .line::before {right: 0;}
.timeline .line::before {content: ''; display: inline-block; width: 10px; height: 10px; background-color: #a12944; border-radius: 50%; border: 4px solid #fff; position: absolute; top: -7px;}
.timeline-v {text-align: center; margin: 30px 0;} 
.timeline-v::before {content: ''; display: inline-block; width: 1px; height: 120px; background: #ccc;}


/* insights - T&A */
.bg-hub-insights.subject13 {background: url(../jpg/suprema_time_attendance1_1.jpg) center / cover no-repeat;}
.bg-hub-insights.subject14 {background: url(../jpg/suprema_time_attendance2_1.jpg) center / cover no-repeat;}

/* insights - T&A #1 */
.solutions_sub_module .platform_app_list > li a {display: inline-block;}
.solutions_sub_module .platform_app_list > li p {margin-bottom: 0;}
.subject13 .insight-container .num_tit {display: flex; align-items: center;}
.subject13 .insight-container .num_tit span {flex: 0 0 45px; max-width: 45px;}
.subject13 .img-section4 figure {text-align: center;}
.subject13 .img-section4 figure img {width: auto;}

/* insights - T&A #2 */
.solutions_sub_module .platform_app_list > li a {display: inline-block;}
.solutions_sub_module .platform_app_list > li p {margin-bottom: 0;}
.subject13 .insight-container .num_tit {display: flex; align-items: center;}
.subject13 .insight-container .num_tit span {flex: 0 0 45px; max-width: 45px;}
.subject13 .img-section4 figure {text-align: center;}
.subject13 .img-section4 figure img {width: auto;}

/* insights15 - AI #1 */
.bg-hub-insights.subject15 {background: url(../jpg/suprema_ai_security0.jpg) center / cover no-repeat;}

/* insights16 - Enterprise #1 */
.bg-hub-insights.subject16 {background: url(../jpg/suprema_enterprise_access_control0.jpg) center / cover no-repeat;}

/* insights17 - AI game chagner #1 */
.bg-hub-insights.subject17 {background: url(../jpg/suprema_ai_game_changer0.jpg) center / cover no-repeat;}
.subject17 .section2 figure {width: 102px; margin-bottom: 24px;}

/* insights18 - Template on Mobile */
.bg-hub-insights.subject18 {background: url(../jpg/suprema_template_on_mobile0.jpg) center / cover no-repeat;}

.subject18 .ico-list li {display: flex;}
.subject18 .ico-list li + li {margin-top: 50px;}
.subject18 .ico-list li figure {flex: 0 0 110px; margin-right: 40px;}
.subject18 .center-wrap p {text-align: center; margin-top: 16px;}

/* insights19 - Unleash the Full Potential of AI at the Edge */
.bg-hub-insights.subject19 {background: url(../jpg/suprema_edge_ai_device01b26.jpg?v2) center / cover no-repeat;}


.subject20 .trend-ico {width: 54px;margin-right: 16px; vertical-align: middle;}
.subject20 .section2 h2 {color: #c0274d;}
.subject20 .section3 h2 {color: #7e2ed9;}
.subject20 .section4 h2 {color: #3a0ca3;}

.subject20 .wrap-point-txt {flex: 0 0 60%;}
.subject20 .wrap-point-txt p {padding: 40px; background: rgb(161 41 68 / 10%); margin-bottom: 0; }
.subject20 .wrap-point-txt p .icon {font-size: 2.25em;}
#wrap .subject20 .wrap-point-txt p {color: #a12944;} 
.subject20 .wrap-download {height: auto;}
.subject20 .wrap-download .banner {height: 100%;}
.subject20 .wrap-download .banner a {background: url(../jpg/suprema_2024_tech_trend41b26.jpg?v2) center / cover no-repeat; padding: 40px 36px; height: 100%; box-sizing: border-box; display: inline-block;}
.subject20 .wrap-download .banner h2 {color: #fff; font-size: 1.675rem; font-weight: 700; margin-bottom: 32px;}
.subject20 .wrap-download .banner .btn-primary {padding: 12px 24px;}

.insight-container .solutions_sub_module .platform_app_list > li { background: #eee; box-sizing: border-box;}
.insight-container .solutions_sub_module .platform_app_list > li a {text-align: center;}
.insight-container .solutions_sub_module .platform_app_list .list-bs2a img {width: 60%; max-width: 60%;}

.insight-container .number-list {padding-left: 20px; color: #666;font-size: 18px;}
.insight-container .number-list li {list-style: decimal; padding-left: 40px;}


@media screen and (min-width: 891px){
.solutions_sub_module .platform_app_list > li {width: 32%; margin-right: 2%; height: 250px;}

}


@media screen and (min-width:1204px){
    #sub-visual-container.sub_visual06_hub .sub-visual-title {transform: translateY(-50%);}
    #sub-visual-container.sub_visual06_hub .sub-visual-title dd {font-size: 20px;}

    
}

@media screen and (max-width:1024px){
    #sub-visual-container.sub_visual06_hub .sub-visual-title dt {font-size: 6vw;}
}

@media screen and (min-width: 891px){
    .subject14 .insight-container section:first-child,
    .subject13 .insight-container section:first-child,
    .subject12 .insight-container section:first-child,
    .subject11 .insight-container section:first-child,
    .subject10 .insight-container section:first-child,
    .subject8 .insight-container section:first-child,
    .subject7 .insight-container section:first-child,
    .subject6 .insight-container section:first-child {margin-top: 220px;}    
    .new-container.subject8 .insight-container section .col-txt-right {padding-left: 60px;}
    .new-container.subject8 .insight-container section .col-txt-left {padding-right: 60px;}
    .new-container.subject8 .insight-container section .col-txt-left h3 {text-align: right;}

    /* product list */
    .insight-container .solutions_product_list > li {width: 22%; margin-right: 4%;}
    .insight-container .solutions_sub_module h3 {font-size: 32px; font-weight: 700;}
    .bg-hub-insights .tit-insight {padding: 40px;}
    .subject-new .bg-hub-insights .tit-insight {padding: 60px;}
    .subject-new .sub-max-inner {max-width: 1140px;}
    .subject-new .insight-container .sub-max-inner {padding: 0 60px;}
    .subject-new .insight-container section .col-txt {flex: 0 0 50%;}
    #wrap .subject-new.new-container p {line-height: 2.05;}

    .subject12 .insight-container .center-wrap.img-two .img-left {flex: 0 0 58%; max-width: 58%;}
    .subject12 .insight-container .center-wrap.img-two .img-right {flex: 0 0 42%; max-width: 42%;}

    .subject-new .insight-container .center-wrap {margin: 0 80px;}
    .subject-new .insight-container .center-wrap .video-wrap {height: 484px;}
}

@media screen and (max-width: 890px){
    .hub-container {margin: 8.33vw 0 20.83vw; /* font-size:3.88vw; */}
    .hub-container .row + .row{margin-top: 3.5vw;}
    .hub-container .sub-max-inner {padding: 0 5.56vw;}
    .hub-container .section-first {height: auto;}
    .hub-container .wrap-insights {flex: 0 0 100%; height: 80vw;}
    .hub-container .wrap-article {display: flex; height: auto; margin-top: 2.5vw;}
    .hub-container .section-first .box-artcles { height: 40vw; flex: 0 0 calc(50% - 12px);}
    .hub-container .section-first .box-artcles + .box-artcles {margin-top: 0; margin-left: 24px;}
    .hub-container .col + .col {margin-left: 0;}
    .hub-container .txt {margin-top: 24vw;}

    .hub-container .section-second {height: auto;}
    .hub-container .section-second .col{flex: 0 0 50%; height: 40vw;}

    .hub-container .section-third {height: 36vw;}
    .hub-container .box-support .bg,
    .hub-container .box-kb .bg {background-position: left bottom; background-size: contain;}

    .tit-insight h5,
    .hub-container [class*="section"] h5 {font-size: 2vw; margin-bottom: 1vw;}
    .hub-container .section-third h4,
    .hub-container h3 {font-size: 2.5vw;}
    .hub-container .box-insights h3 { font-size: 6vw;}
    .hub-container .box-insights h4{font-size: 4vw; margin-bottom: 4vw; display: none;}
    .hub-container.insights-main h3 {margin-top: 0; }
    .hub-container .new-insights h3 {font-size: 6.39vw;}

    .hub-container .box-insights .bg{background-position: right top;}  

    .hub-container .txt .content .content-tit {max-height: 12vw;}

    /* insights */
    .bg-hub-insights {height: 83vw; padding-top: 50vw;}
    .bg-hub-insights.subject1 {background-size: 250% auto; background-position: top right;}

    .insight-container section:first-child {margin-top: 50vw;}           
    .subject19 .insight-container section:first-child {margin-top: 20vw;}     

    .subject-new .insight-container section:first-child {margin-top: 65vw;}

      
    
    
    .bg-hub-insights .tit-insight {padding: 5.5vw;}

    .insight-container .ico-link,
    .insight-container .list-figure h5,
    .hub-container.insight-container h2,
    .hub-container.insight-container h3,
    .insight-container section h4,
    .insight-container section .seo-imgtit {font-size: 3.88vw;}
    .tit-insight h1 {font-size: 5vw; margin-bottom: 1.5vw;}
    .tit-insight h2,
    .tit-insight .seo-subtit { font-size: 4.44vw; margin-bottom: 5vw;}
    .wrap-date-share {padding-bottom: 3vw;}
    .insight-container section p + .row {margin-top: 5vw;}
    .insight-container section + section {margin-top: 15vw;}
    .hub-container.insight-container section h2,
    .hub-container.insight-container section h3:not(.seo-imgtit),
    .insight-container section p {margin-bottom: 3vw;}   
    .hub-container .new-insights h4 {display: none;} 
    
    .insight-container section .col-txt-left {padding-right: 12px;}
    .insight-container section .col-txt-right {padding-left: 12px; margin-top: 24px;}
    .insight-container.hub-container .col + .col {margin-top: 7vw;}

    .insight-container .center-wrap .video-wrap,
    .insight-container section .wrap-video {height: 50vw;}
    .insight-container .center-wrap .video-wrap.shorts {height: 160vw;}

    .hub-container .box-insights .bg{background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 30%, transparent 80%), url(../jpg/bg_insight23_biostar2v2_9_5.jpg) center /cover no-repeat;}

    .insight-container .color-list,
    .insight-container .center-wrap {margin: 0;}
    .insight-container section .col-txt {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }

    .hub-container .num-tit {text-align: center; background: none; padding: 0; display: block;}
    .hub-container .num-tit .num {margin-right: 0; border-radius: 50%; width: 10vw; height: 10vw; padding: 0; display: inline-block; line-height: 10vw;}
    .hub-container .num-tit .mb_bk {background: rgba(164, 36, 68, 0.1); padding: 8px 16px; border-radius: 24px; margin-top: 16px; display: inline-block;}

    .hub-container .txt .content .content-tit .date {font-size: 3.88vw;}
    
    .timeline .line{display: none;}

    .insight-container .solutions_product_list { white-space: normal;}

    .bg-hub-insights.subject10 {background-position: left -20vw;}
    .bg-hub-insights.subject15 {background-position: left -150px top;}

    .subject15 .insight-container section:first-child {margin-top: 70px;}  
    .subject15 .insight-container .section2 .row2 {flex-direction: column-reverse;}


    .subject20 .section3 .row {flex-direction: column-reverse;}
    .subject20 .section5 .wrap-download {min-height: 380px;}

    .fixed-icon {width: 150px; margin-bottom: 24px;}

}

@media screen and (max-width: 576px){

    .hub-container [class*="section"] h5 {font-size: 3.88vw; margin-bottom: 1vw;}
    #wrap .new-container .hub-container p {font-size: 3.88vw;}

    .tit-insight h5,
    .hub-container .section-third h4,
    .hub-container h3 {font-size: 4.44vw;}
    .hub-container .row + .row{margin-top: 7vw;}

    
    .insight-container section .col-txt,
    .hub-container .section-second .col,
    .hub-container .col {flex: 0 0 100%;}

    .hub-container .insights-list .more_wrap,
    .hub-container .section-first .box-artcles + .box-artcles,
    .hub-container .col + .col {margin-top: 7vw;}
    .hub-container .wrap-article{display: block;}
    .hub-container .wrap-insights .box-insights {height: 80vw;}
    .hub-container .section-first .box-artcles + .box-artcles {margin-left: 0; background-position: left center !important;}    
    .hub-container .section-third {height: auto;}
    .hub-container .section-first .box-artcles,
    .hub-container .section-second .col,    
    .hub-container [class*="box"] {height: 70vw;}
    .hub-container .txt{margin-top: 47vw;}
    .hub-container .txt .content .content-tit{padding: 2.5vw 5vw; max-height: 18.5vw;}
    .hub-container.insight-container h2,
    .hub-container.insight-container h3,
    .insight-container section h4 {font-size: 4.44vw;}

    .subject12 .insight-container section:first-child,
    .subject10 .insight-container section:first-child,
    .subject7 .insight-container section:first-child {margin-top: 64vw;}
    

    .zoom-ani .txt-grp { padding: 5vw;}

    .tit-insight h1 {font-size: 6.61vw;}   
    .tit-insight h2,
    #wrap .tit-insight .seo-subtit {font-size: 4.8vw; line-height: 1.5; margin-top: 10px;} 

    .insight-container .list-feature li {display: block;}
    .insight-container .list-feature li figure {margin-bottom: 30px; margin-bottom: 30px; text-align: center;}
    .insight-container .list-feature li h4 {text-align: center;}

    .insight-container .color-list {margin: 18vw 0 0 0;}
    .hub-container .color-list dl {font-size: 3.88vw;padding: 20px; text-align: center; margin-bottom: 16vw;}
    .hub-container .color-list dl dt {height: 65px; left: calc(50% - 32px); top: -55px;}

    .insight-container .center-wrap.img-two li { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
    .insight-container .center-wrap.img-two li + li {margin-top: 4px;}
    .subject12 .insight-container .center-wrap.img-two li {margin-top: 30px;}
    .insight-container .center-wrap.img-two .img-left figure {border-radius: 8px 8px 0 0; padding: 0;}
    .insight-container .center-wrap.img-two .img-right figure {border-radius: 0 0 8px 8px; padding: 0;}

    .subject15 .insight-container section:first-child {margin-top: 30vw;}

    .subject18 .ico-list li {display: block;}
    .subject18 .ico-list li .icon {margin: 0 auto 50px; width: 120px;}

    
    .subject20 .wrap-download .banner a,
    .subject20 .wrap-point-txt p {padding: 5.56vw;}

    .subject-new .bg-hub-insights {height: 50vw;}
}