@charset "utf-8";

/* header -------------------------------------------------------------------------------------------------- */
.SubHeaderWrap {background:url(/image/study_data/header_bg.jpg) 0 6% repeat-x;background-size:contain !important;}
.SubHeaderWrap .Anchor {background-color: rgba(255, 255, 255, 0.5);}

/* 탭메뉴 -------------------------------------------------------------------------------------------------- */
.DataIconTabWrap ul {display:flex;column-gap:10px;width:100%;margin-bottom:10px;}
.DataIconTabWrap ul li {position:relative;width:calc(100% / 11);text-align:center;}
.DataIconTabWrap ul li a {padding-bottom:7px;}
.DataIconTabWrap ul li a strong {position:relative;top:-10px;}
.DataIconTabWrap ul li a:first-child {display:block;width:100%;height:100%;background-color:#f4f4fb;border-radius:10px;transition: all 0.3s ease-in-out 0s;}
.DataIconTabWrap ul li a:first-child strong {font-size:14px;font-weight:400;color:#626271;line-height:100%;letter-spacing:-0.5px;}
.DataIconTabWrap ul li .close {
    display:none;width:28px;height:28px;border-radius:100%;position:absolute;top:-5px;right:-5px;background-color:#ff6600;
    text-align:center;color:#fff;
    -webkit-box-shadow:0px 3px 6px rgba(0,0,0,0.3);-moz-box-shadow:0px 3px 6px rgba(0,0,0,0.3);box-shadow:0px 3px 6px rgba(0,0,0,0.3);
}
/* .DataIconTabWrap ul li.on a:first-child {height:calc(100% + 30px);} */
.DataIconTabWrap ul li.on a:first-child, .DataIconTabWrap ul li a:first-child:hover {background-color:#8dc63f;}
.DataIconTabWrap ul li.on a:first-child strong, .DataIconTabWrap ul li a:first-child:hover strong {color:#fff;}
.DataIconTabWrap ul li.on .close {display:block;}
.DataIconTabWrap ul li .close:hover {background-color:#ff1e00;}
.DataIconTabWrap ul li .close .material-symbols-outlined {line-height:28px;font-size: 18px;}
.DataIconTabWrap div {padding:10px;background-color:#8dc63f;border-radius:15px;position:relative;z-index:1;}
.DataIconTabWrap dl {display:flex;column-gap:10px;}
.DataIconTabWrap dl dt a {
    display:block;line-height:38px;width:100%;border-radius:10px;background-color:#b8da89;color:#fff;font-size:16px;font-weight:500;text-align:center;
    transition: all 0.3s ease-in-out 0s;
}
.DataIconTabWrap dl dt {width:calc(100% / 7);}
.DataIconTabWrap dl dt.on a, .DataIconTabWrap dl dt a:hover {
    background-color:#fff;color:#000;-webkit-box-shadow:0px 0px 10px rgb(59 89 18 / 20%);-moz-box-shadow:0px 0px 10px rgb(59 89 18 / 20%);box-shadow:0px 0px 10px rgb(59 89 18 / 20%);
}

/* 모바일 ------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 990px){
    /* 자료탭 */
    .DataIconTabWrap ul {flex-wrap:wrap;gap:10px;}
    .DataIconTabWrap ul li {width: calc(100% / 9 - 9px);}
    .DataIconTabWrap ul li a strong {top: -15px;}
    .DataIconTabWrap ul li a {padding-bottom: 5px;}
}

@media screen and (max-width: 820px){
    /* 자료탭 */
    .DataIconTabWrap ul li {width: calc(100% / 7 - 9px);}
    .DataIconTabWrap ul li a:first-child strong {font-size:13px;}
}

@media screen and (max-width: 768px){
    /* 자료탭 */
    .DataIconTabWrap dl dt a {font-size: 15px;}
}

@media screen and (max-width: 710px){
    /* 자료탭 */
    .DataIconTabWrap dl {flex-wrap:wrap;gap:10px;}
    .DataIconTabWrap dl dt {width: calc(100% / 5 - 8px);}
}

@media screen and (max-width: 640px){
    /* 자료탭 */
    .DataIconTabWrap ul li {width: calc(100% / 6 - 9px);}
    .DataIconTabWrap dl {gap:5px;}
    .DataIconTabWrap dl dt {width: calc(100% / 4 - 4px);}
}

@media screen and (max-width: 560px){
    /* 자료탭 */
    .DataIconTabWrap ul li {width: calc(100% / 5 - 9px);}
    .DataIconTabWrap ul li a {padding-bottom:0;}
    .DataIconTabWrap ul li a strong {top: -20px;}
}

@media screen and (max-width: 480px){
    /* 자료탭 */
    .DataIconTabWrap ul li {width: calc(100% / 4 - 9px);max-height:125px;}
    .DataIconTabWrap ul li a:first-child strong {font-size:12px;}
}

@media screen and (max-width: 400px){
    /* 자료탭 */
    .DataIconTabWrap ul li {width: calc(100% / 3 - 9px);max-height:115px;}
    .DataIconTabWrap ul li img {position:relative;top:-7px;padding:5px;}
    .DataIconTabWrap ul li a strong {top: -30px;}
    .DataIconTabWrap dl dt {width: calc(100% / 3 - 4px);}
    .DataIconTabWrap dl dt a {font-size: 14px;line-height: 34px;}
}

@media screen and (max-width: 320px){
    /* 자료탭 */
    .DataIconTabWrap ul li {max-height: 100px;}
}