@charset "utf-8";

/* 탭메뉴 (가로 스크롤 + PC 드래그) */
.tab_rowscr{position: relative; display: inline-block; /* display: flex; width: auto; flex-wrap: nowrap; overflow-x: auto; gap: 10px;*/ margin-bottom: 3rem; font-size: 0; text-align: left; border-radius: 50px; background-color: #f2f2f2;}
.tab_rowscr::-webkit-scrollbar{height: 8px; /*display: none;*/}
.tab_rowscr::-webkit-scrollbar-thumb{border-radius: 10px; background-color: #dcdcdc;}
.tab_rowscr::-webkit-scrollbar-track{border-radius: 10px; background-color: rgba(193,193,193,0.2);}
.tab_rowscr li{display: inline-block; width: 160px; /*flex: 0 0 auto;  margin-bottom: 0.75rem;*/ margin-right: 10px; font-size: 1rem;}
.tab_rowscr li:last-child {margin-right: 0;}
.tab_rowscr li a{display: block; line-height: 46px; padding: 0 1.5rem; border-radius: 50px; text-align: center; user-select: none; color: #7d7d7d; }
.tab_rowscr li a.on{font-weight: 600; background-color: #283e80; color: #fff;}
.rowscr_con_wrap{/*padding: 4rem 0 0;*/ box-sizing: border-box;}
.rowscr_con_wrap .rowscr_con{/*display: none;*/ opacity: 0; visibility: hidden; height: 0; transform: translateY(20px); overflow: hidden;}
.rowscr_con_wrap .rowscr_con.on{/*display: block;*/ opacity: 1; visibility: visible; height: auto; transform: translateY(0); transition: all 0.5s;}
@media (max-width: 1300px){
    .tab_rowscr{display: flex; width: auto; flex-wrap: nowrap; overflow-x: auto; gap: 10px; text-align: center; margin-top: 0; background: none; border-radius: 0; }
    .tab_rowscr li{flex: 0 0 auto; margin-right: 0; width: auto;}
    .tab_rowscr li a {background-color: #f2f2f2;}
}
@media (max-width: 1024px){
    .tab_rowscr li a{line-height: 40px;}
}
@media (max-width: 640px){
    .tab_rowscr{margin-bottom: 2rem;}
    .tab_rowscr li a{font-size: 14px; line-height: 36px; padding: 0 1rem;}
}
@media (max-width: 460px){
    .tab_rowscr{gap: 7px;}
    .tab_rowscr li a{line-height: 34px;}
}
@media (hover: none) {
    /* 터치 디스플레이 (패드, 모바일) 에서 가로메뉴 스크롤바 감추기1 */
    .tab_rowscr::-webkit-scrollbar{display: none;}
}
@media screen and (any-pointer: coarse){
    /* 터치 디스플레이 (패드, 모바일) 에서 가로메뉴 스크롤바 감추기2 */
    .tab_rowscr::-webkit-scrollbar{display: none;}
}

/* dot_list */
.dot_list{}
.dot_list > li{position: relative; padding: 0 0 0 12px;}
.dot_list > li + li{margin-top: 5px;}
.dot_list > li:before{content: ""; position: absolute; top: 10px; left: 0; width: 2px; height: 2px; border-radius: 50%; background-color: #222;}


/* tab_rowscr_type2 */
.tab_rowscr_type2{
    position: relative; display: flex; width: auto; flex-wrap: wrap; overflow-x: auto; gap: 0; background-color: #f2f2f2; border-radius: 46px; margin: 0 0 30px; padding: 0 0;
    &::-webkit-scrollbar{height: 4px; /*display: none;*/}
    &::-webkit-scrollbar-thumb{border-radius: 10px; background-color: #8b8b8b;}
    &::-webkit-scrollbar-track{border-radius: 10px; background-color: rgba(193,193,193,0.2);}

    & > li{flex: 1;}
    & > li button{position: relative; z-index: 1; display: block; width: 100%; font-size: 16px; font-weight: var(--fwsb); letter-spacing: -0.04em; color: #7d7d7d; padding: 0 0; line-height: 46px; border-radius: 46px; text-align: center; transition: 0.1s;}
    & > li button.on{color: #fff; /* background-color: #283e80; */}
    & > li button span{}
    & > li button:disabled{color: #c7c7c7;}
    & > li button:disabled:hover{cursor: no-drop;}
    & > li .bar{position: absolute; z-index: 0; top: 0; left: 0; height: 100%; transition: 0.1s; background-color: #283e80; border-radius: 46px;}

    @media (max-width: 1300px){
        flex-wrap: nowrap;

        & > li{flex: 0 0 auto; width: 120px;}
        & > li button{padding: 0 20px;}
    }
    @media (max-width: 1024px){
        gap: 10px;

        & > li{width: auto;}
        & > li button{line-height: 40px;}
    }
    @media (max-width: 640px){

        & > li button{font-size: 14px; line-height: 36px; padding: 0 1rem;}
    }
    @media (max-width: 460px){

        & > li{width: auto;}
        & > li button{line-height: 34px;}
    }
    @media (hover: none) {
        /* 터치 디스플레이 (패드, 모바일) 에서 가로메뉴 스크롤바 감추기1 */
        .tab_rowscr::-webkit-scrollbar{display: none;}
    }
    @media screen and (any-pointer: coarse){
        /* 터치 디스플레이 (패드, 모바일) 에서 가로메뉴 스크롤바 감추기2 */
        .tab_rowscr::-webkit-scrollbar{display: none;}
    }
}


/* tab_rowscr_type3 */
.tab_rowscr_type3{
    position: relative; display: flex; width: auto; flex-wrap: wrap; overflow-x: auto; gap: 0; border: 1px solid #c5d9f4; border-radius: 5px; margin: 0 0 35px; padding: 0 0;
    &::-webkit-scrollbar{height: 4px; /*display: none;*/}
    &::-webkit-scrollbar-thumb{border-radius: 10px; background-color: #8b8b8b;}
    &::-webkit-scrollbar-track{border-radius: 10px; background-color: rgba(193,193,193,0.2);}

    & > li{flex: 1;}
    & > li button{position: relative; z-index: 1; display: block; width: 100%; font-size: 16px; font-weight: var(--fwr); letter-spacing: -0.03em; color: #000; padding: 0 0; line-height: 40px; text-align: center; transition: 0.1s;}
    & > li button.on{color: #fff; /* background-color: #6b88ff; */}
    & > li button span{}
    & > li .bar{position: absolute; z-index: 0; top: 0; left: 0; height: 100%; transition: 0.1s; background-color: #6b88ff; border-radius: 0;}

    @media (max-width: 1024px){

        & > li button{font-size: 15px;}
    }
    @media (max-width: 640px){
        flex-wrap: nowrap;

        & > li{flex: 0 0 auto; width: 60px;}
        & > li button{font-size: 15px;}
    }
    @media (max-width: 460px){

        & > li{width: 50px;}
        & > li button{font-size: 14px;}
    }
}