@import url('sub.css'); 
/* 탭 스타일 */
.page_lnb.is-fixed .page_lnb_tabs {flex: 0 1 1030px; max-width: 1030px;}

/* 솔루션 개요 (영상 추가) */
.overview_box:has(.imgbox.videobox) {padding: 50px; padding-right: 560px;}
.overview_box .imgbox.videobox {aspect-ratio: 16 / 9; width: 50%; max-width: 500px; right: 30px; border-radius: 20px; overflow: hidden;} 
.overview_box .imgbox.videobox iframe {width: 100%; height: 100%;}


/* HSM 사용시 보안 효과 */
.security_effect_box {display: flex; padding-top: 77px;}

.security_effect_box .securiti_effect_center {width: 205px; flex-shrink: 0;}
.security_effect_box .securiti_effect_item:not(.securiti_effect_center) {flex: 1;}

.security_effect_box .securiti_effect_item {position: relative;}
.security_effect_box .securiti_effect_item .badge_txt {padding: 15px 10px; width: 100%; border-radius: 9999px;}
.security_effect_box .securiti_effect_item .badge_txt.whiteBg {background: var(--white);} 
.security_effect_box .securiti_effect_item .badge_txt.mainBg {background: var(--main);}

.security_effect_box .securiti_effect_item ul li {padding: 15px 10px; border-bottom: 1px solid var(--border);}
.security_effect_box .securiti_effect_item ul li:last-child {border-bottom: 0;}

.security_effect_box .securiti_effect_item .iconbox {position: absolute; left: 50%; top: -77px; transform: translateX(-50%);}
.security_effect_box .securiti_effect_item.securiti_effect_left .iconbox {top: -107px;}

.security_effect_box .securiti_effect_item.securiti_effect_left {padding: 50px; background: var(--grayBg); margin: 30px 0; border-radius: var(--borderR30) 0 0 var(--borderR30);}
.security_effect_box .securiti_effect_item.securiti_effect_center {padding: 50px 30px; background: var(--grayBg); border-left: 2px solid var(--white); margin: 30px 0;}
.security_effect_box .securiti_effect_item.securiti_effect_right {padding: 74px 50px; background: var(--white); border: 6px solid var(--main); border-radius: var(--borderR30);}

/* Luna */
.overview_box_body .btn_wrap {padding-top: 20px;}
.morebtn.morebtn_download {padding: 15px 25px; width: auto; gap: 20px;}
.morebtn.morebtn.morebtn_download i::before {content: '\f090';}



/*******************************************************************************
    @media 1770px
*******************************************************************************/
@media all and (max-width:1770px){
}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){
/* 솔루션 개요 */
.overview_box:has(.imgbox.videobox) {padding: 50px;}
.overview_box .imgbox.videobox {width: 100% !important; max-width: 100%; position: static; margin: 0 auto 50px;}
}
/*******************************************************************************
    @media 1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* 솔루션 개요 */


/* HSM 사용시 보안 효과 */
.security_effect_box {padding-top: 60px;}
.security_effect_box .securiti_effect_item.securiti_effect_left {padding: 30px;}
.security_effect_box .securiti_effect_item.securiti_effect_center {padding: 30px 20px; width: 150px;}
.security_effect_box .securiti_effect_item.securiti_effect_right {padding: 54px 30px;}

.security_effect_box .securiti_effect_item .badge_txt {padding: 10px 8px;}


.security_effect_box .securiti_effect_item .iconbox {top: -67px;}
.security_effect_box .securiti_effect_item .iconbox img {width: 120px;}
.security_effect_box .securiti_effect_item.securiti_effect_left .iconbox {top: -70px;}

.security_effect_box .securiti_effect_item ul li {padding: 10px 8px;}

/* Luna */
.luna_cont .sub_table_wrap .responsive-dim.show {display: block;}
.luna_cont .sub_table {width: 900px;}

}
/*******************************************************************************
    @media 980px
*******************************************************************************/
@media all and (max-width:980px){
/* 솔루션 개요 */
.overview_box .imgbox.videobox {border-radius: 10px;}
    
/* HSM 사용시 보안 효과 */
.security_effect_box .securiti_effect_item.securiti_effect_left {padding: 30px 20px 20px; margin: 20px 0;}
.security_effect_box .securiti_effect_item.securiti_effect_center {padding: 30px 15px; margin: 20px 0;}
.security_effect_box .securiti_effect_item.securiti_effect_right {padding: 46px 20px 30px; border-width: 4px;}

.security_effect_box .securiti_effect_item .badge_txt {padding: 8px 5px; margin-bottom: 10px;}

.security_effect_box .securiti_effect_item ul li {padding: 8px 5px;}

/* Luna */
.overview_box_body .btn_wrap {padding-top: 10px;}
.morebtn.morebtn_download {padding: 12px 18px; gap: 15px;}
}
/*******************************************************************************
    @media 680px
*******************************************************************************/
@media all and (max-width:680px){
/* HSM 사용시 보안 효과 */
.security_effect_box {padding-top: 51px;}
.security_effect_box .securiti_effect_item.securiti_effect_center {width: 110px; padding: 20px 15px;}
.security_effect_box .securiti_effect_item.securiti_effect_right {border-width: 3px; padding: 37px 15px;}
.security_effect_box .securiti_effect_item.securiti_effect_left {padding: 20px 15px;}

.security_effect_box .securiti_effect_item .iconbox {top: -55px;}
.security_effect_box .securiti_effect_item.securiti_effect_left .iconbox {top: -60px;}
.security_effect_box .securiti_effect_item .iconbox img {width: 100px;}

.security_effect_box .securiti_effect_item .badge_txt .fs25 {font-size: 1.15rem;}
.security_effect_box .securiti_effect_item .badge_txt .fs20 {font-size: 1.05rem;}

/* Luna */
.morebtn.morebtn_download {padding: 10px 15px; gap: 10px;}
.luna_cont .sub_table {width: 800px;}

/* Thales KMS */
.thales_kms_cont .sub_table_wrap .responsive-dim.show {display: block;}
.thales_kms_cont .sub_table {width: 680px;}
}

/*******************************************************************************
    @media 480px
*******************************************************************************/
@media all and (max-width:480px){
    .security_effect_box_wrap {overflow-x: auto; position: relative;}
    .security_effect_box_wrap .responsive-dim {display: block;}
    .security_effect_box {width: 500px;}
    
    /* .security_effect_box {flex-direction: column; gap: 5px;}   
    .security_effect_box .securiti_effect_item {width: 100% !important}
    .security_effect_box .securiti_effect_item.securiti_effect_left {padding: 20px 15px; margin: 0; border-radius: var(--borderR30);}
    .security_effect_box .securiti_effect_item.securiti_effect_center {margin: 0; border-radius: var(--borderR30);}
    .security_effect_box .securiti_effect_item.securiti_effect_right {margin-top: 58px; padding-bottom: 20px; border-radius: var(--borderR30);} */
}