/* 서브 공통 탭 typeA */
.tabTypeA > a.select { display: none; } 
.tabTypeA { position: relative; outline: 4px solid #0099ff; margin: 0 auto; margin-block: 4px; height: 3.1rem; border-radius: 1.65rem; }
.tabTypeA .oval { position: absolute; top: -4px; height: calc(100% + 8px); background: #0099ff; border-radius: 1.65rem; z-index: -1; transition: 0.4s left; width: 230px; }
.tabTypeA ul { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.tabTypeA ul > li { font-size: 1rem; height: 100%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; transition: 0.4s color; color: #333333; overflow: hidden; width: 230px; }
.tabTypeA ul > li > a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 0.25rem; overflow: hidden; white-space: nowrap; }
.tabTypeA.bmcmTab { width: 77%; }
.tabTypeA.bmcmTab ul > li { width: 17%; }
.tabTypeA.bmcmTab .oval { width: 17%; }
/* 서브 공통 탭 typeA : active */
.tabTypeA ul > li.on > a { color: #fff; font-weight: bold; }

/* 서브 공통 탭 typeB */
.tabTypeB {margin: 2.5rem 0;width: calc(100% - 2rem);overflow: hidden;overflow-x: auto;margin-left: 1rem;} 
.tabTypeB > ul { display: flex; align-items: center; justify-content: center; gap: calc(5rem / 6); width: 100%;  min-width: max-content;}
.tabTypeB > ul li { width: 10rem; overflow: hidden; }
.tabTypeB > ul li > a { display: flex; align-items: center; justify-content: center; height: 2.5rem; font-size: 0.85rem; background: #e3f6ff; color: #333; border-radius: 0.25rem; overflow: hidden; text-align: center; }
.tabTypeB > ul li.current > a { background: #4156a7; color: #fff; }

/* 서브 공통 탭 typeC */
.tabTypeC ul { display: flex; flex-wrap: wrap; gap: 0.15rem; }
.tabTypeC ul li { flex: 1; overflow: hidden; }
.tabTypeC ul li a { display: flex; align-items: center; justify-content: center; padding: 0.85rem 0.25rem; font-size: 0.9rem; width: 100%; background: #eceef6; }
/* 서브 공통 탭 typeC : active */
.tabTypeC ul li a { transition: 0.2s; }
.tabTypeC ul li a.current { font-weight: bold; color: #fff; background: #4156a7; }

/* 타이틀 */
.com_bmcm_title { margin-top: 5rem; text-align: center; }
.com_bmcm_title h1 { font-size: 2rem; display: inline-block; position: relative; font-weight: 700; word-break: keep-all; }
.com_bmcm_title h1 > span { box-shadow: inset #e3f6ff 0 -22px 0; color: #070707; display: initial; }

/* 텍스트 색상 */
.txt_blue { color: #4156a7; }
.txt_blue2 { color: #006aee; }
.col_red { color: #e5354c; }
.col_bl { color: #006aee; }
.col_grn { color: #6ba101; }
.col_yel { color: #c89b01; }

/* 버튼 */
.com_btn_wrap {  margin-top: 2.5rem; display: inline-flex; align-items: center; justify-content: center; width: 100%; }
.com_btn.shadow.new_red { box-shadow: 0 10px 20px rgba(229,53,76,0.3); color: #fff; background: #e5354c; }
.com_btn.oval { width: 13rem; min-height: 3.25rem; border-radius: 1.65rem; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: space-between; padding: 0 2rem; font-weight: bold; }
.com_btn.oval > i { font-weight: 400; font-size: 1.2rem; margin-left: 0.5rem; }

/* 블릿 */
.bu_st1, .bu_st2, .bu_st3, .bu_st4, .list_st1 > li, .list_st2 > li, .list_st3 > li, .list_st4 > li{ position:relative; padding-left:15px; color:#111;}
/*.bu_st1,*/ .list_st1 > li {margin-top:0.5rem;}
/* .bu_st1:before, .list_st1 > li:before {content:''; position:absolute; top:0.4rem; left:0; width:10px; height:10px; border:3px solid #012c5f; border-radius:50%; background: #fff; } */
.bu_st2, .list_st2 > li{ font-size:0.75rem; margin-left:0.25rem; margin-top:0.35rem;}
.list_st2 > li{ margin-left:0;}
.bu_st2:before, .list_st2 > li:before { content:''; position:absolute; top:0.6rem; left:0; width:6px; height:2px; background:#4b4b4b; }
.bu_st3, .list_st3 > li{ font-size:0.75rem; margin-left:0.6rem; padding-left:12px; margin-top:0.25rem;}
.list_st3 > li{ margin-left:0;}
.bu_st3:before, .list_st3 > li:before { content:''; position:absolute; top:0.55rem; left:0; width:3px; height:3px; background:#4b4b4b; border-radius:50%; }
.bu_st4, .list_st4 > li { font-size:0.75rem; margin-left:1rem; padding-left:11px; margin-top:0.25rem;}
.list_st4 > li { margin-left:0;}
.bu_st4:before, .list_st4 > li:before { content:''; position:absolute; top:0.55rem; left:0; width:2px; height:2px; background:#888; }

/* 리스트 :블릿 타입 */
.list_st2 > li { font-size:0.75rem; }
.list_st3 > li { font-size:0.75rem; color:#444; }
.list_st4 > li { font-size:0.75rem; color:#555; }

li.bu_none:before { display:none !important; }

/* 리스트 : 텍스트 타입 */
.list_stT1 > li { font-size:0.75rem; margin-top:0.25rem;}
.list_stT1 ol li,
.list_stT1 ul li{ padding-left:10px;}
.list_stT1 li ul[class^="list_st"]{ margin-left:10px; }
.list_stT2 > li { font-size:0.75rem; margin-top:0.15rem; color:#444; }
.list_stT2 ol li,
.list_stT2 ul li{ padding-left:10px;}
.list_stT2 li ul[class^="list_st"]{ margin-left:10px; }

/* 리스트 :순차적 리스트 타입 */
.list_ol1 > li { position:relative; padding-left:1.6rem; margin-top:0.5rem; font-size:0.75rem; color:#222; line-height:1.2rem; }
.list_ol1 > li > span.num { position:absolute; left:0; top:0; width:1.2rem; height:1.2rem; line-height:1.1rem; font-size:0.65rem; border-radius:0.3rem; border:1px solid #ccc; color:#333; text-align:center; font-weight:700; letter-spacing: -1px;}
.list_ol2.inline > li {display:inline-block; margin-right:0.4rem;}
.list_ol2 > li { position:relative; padding-left:1.1rem; margin-top:0.3rem; font-size:0.7rem; color:#222; line-height:1rem; }
.list_ol2 > li > span.num { position:absolute; left:0; top:0; width:1rem; height:1rem; line-height:1rem; font-size:0.55rem; border-radius:50%; background:#eaeaea; color:#4b4b4b; text-align:center; font-weight:600; letter-spacing: -1px; padding-right:0.05rem;} 

/* 리스트 : 타이틀+텍스트 타입 */
.list_stTit { font-size:0.75rem; margin-top:0.25rem; }
.list_stTit > li { position:relative; padding-left:3.7rem; margin-top:0.25rem; }
.list_stTit > li span.tag { position:absolute; left:0; top:0; width:3rem; text-align:center; overflow:hidden; }

/* 리스트 :가로 나열 */
ul[class*='li_w']{ overflow:hidden; }
.li_w50 > li { width:50%; float:left; }
.li_w30 > li { width:32%; float:left; }
.li_w25 > li { width:23%; float:left; }
.li_w20 > li { width:18%; float:left; }

/**** 반응형 ****/

@media screen and (max-width: 1440px) {
    /* 서브 공통 탭 typeA */
    .tabTypeA.bmcmTab { width: 92.5%; }
}

@media screen and (max-width: 1240px) {
    /* reactTab */
    .tabTypeA.bmcmTab { width: 100%; }
    .tabTypeA {outline: none;height: auto;border-radius: 0;z-index: 5;width: calc(100% - 2rem) !important;}
    .tabTypeA > a.select { display: flex; justify-content: space-between; align-items: center; background: rgba(0,153,255); color: #fff; border-radius: 1rem 1rem 0 0; padding-inline: 1.5rem; font-size: 1rem; line-height: 2.5rem; height: 2.5rem; position: relative; font-weight: bold; }
    .tabTypeA > a.select::after { content: ""; background: url('/images/web/bmcm/con_com/tabArrow.png')no-repeat center center; width: 0.65rem; height: 2.5rem; background-size: contain; }
    .tabTypeA > ul { display: none; flex-direction: column; background: #fff; border: 4px solid rgba(0,153,255); border-radius: 0 0 1rem 1rem; overflow: hidden; position: absolute; left: 0; top: calc(100% - 4px); height: auto; border-top: none; }
    .tabTypeA ul > li { width: 100% !important; height: 2.5rem; line-height: 2.5rem; text-align: left; justify-content: flex-start; padding-inline: 1.3rem; border-top: 4px solid rgba(0,153,255); background: #fff; font-size: 0.95rem; }
    .tabTypeA ul > li > a { position: relative; font-weight: 600; color: #333333; justify-content: start; padding: 0; z-index: 1; overflow: visible; }
    .tabTypeA ul > li.on, 
    .tabTypeA .oval { display: none; }
    /* reactTab : acitve */
    .tabTypeA ul > li > a,
    .tabTypeA ul > li > a::before { transition: 0.2s; }
    .tabTypeA ul > li:hover,
    .tabTypeA ul > li:focus { background: rgba(0,153,255); }
    .tabTypeA ul > li:hover > a,
    .tabTypeA ul > li:focus > a { color: #fff; }

    /* 타이틀 */
    .com_bmcm_title {  margin-top: 2.5rem; } 
    .com_bmcm_title h1 { font-size: 1.2rem; }

    /* 리스트 :가로 나열 */
    .li_w20 > li { width:25%; }
}

@media screen and (max-width: 1024px) {
    /* 리스트 :가로 나열 */
    .li_w30 > li { width:32%; }
    .li_w25 > li { width:32%; }
    .li_w20 > li { width:31%; }
}

@media screen and (max-width: 968px) {
    /* 서브 공통 탭 typeC */
    .tabTypeC ul li a { padding: 0.75rem 0.25rem; font-size: 0.85rem; }
}

@media screen and (max-width: 860px) {
    /* 리스트 :가로 나열 */
    .li_w30 > li { width:48%; }
    .li_w25 > li { width:47%; }
    .li_w20 > li { width:45%; }
}

@media screen and (max-width: 768px) {
    /* 서브 공통 탭 typeB */
    .tabTypeB { margin: 2rem 0; }
    .tabTypeB > ul li > a { font-size: 0.8rem; }
}

@media screen and (max-width: 480px) {
    /* 타이틀 */
    .com_bmcm_title h1 > span { box-shadow: inset #e3f6ff 0 -10px 0; }
    .com_bmcm_title {  margin-top: 1.5rem; } 
    .com_bmcm_title h1 { font-size: 1.1rem; }

    /* reactTab */
    .tabTypeA > a.select,
    .tabTypeA ul > li { font-size: 0.85rem; }
    .tabTypeA > a.select { padding: 0 1rem; }
    .tabTypeA ul > li { padding: 0 0.8rem; }

    /* 버튼 */
    .com_btn_wrap { margin-top: 1.5rem; }
    .com_btn.oval { width: auto; padding: 0 1rem; min-height: 2.25rem; font-size: 0.75rem; }

    /* 서브 공통 탭 typeB */
    .tabTypeB { margin: 1.5rem 0; }
    .tabTypeB > ul li > a { height: 2.25rem; }

    /* 탭 :개수 지정 */
    .Tab_w50 li { width:100%; }
    .Tab_w30 li { width:100%; }
    .Tab_w20 li { width:100%; }
    /* 리스트 :가로 나열 */
    .li_w50 > li { width:100%; }
    .li_w30 > li { width:100%; }
    .li_w25 > li { width:100%; }
    .li_w20 > li { width:100%; }

    /* 서브 공통 탭 typeC */
    .tabTypeC ul li a { padding: 0.65rem 0.25rem; font-size: 0.75rem; }
}

@media screen and (max-width: 380px) {
    /* 타이틀 */
    .com_bmcm_title {  margin-top: 1.25rem; } 
    .com_bmcm_title h1 { font-size: 1rem; }
    
    /* reactTab */
    .tabTypeA {width: calc(100% - 1.5rem) !important;}
    .tabTypeA > ul { border-radius: 0 0 0.5rem 0.5rem; border: 2px solid rgba(0,153,255); top: calc(100% - 2px); }
    .tabTypeA > a.select { font-size: 0.8rem; padding: 0 0.75rem; border-radius: 0.5rem 0.5rem 0 0; }
    .tabTypeA ul > li { font-size: 0.75rem; padding: 0 0.55rem; border-top: 2px solid rgba(0,153,255); }
    .tabTypeA > a.select,
    .tabTypeA ul > li { height: 2.25rem; line-height: 2.25rem; }
    .tabTypeA > a.select::after { width: 0.5rem; }

}