@charset "utf-8";

body {padding-top:0;}
#ChartWrap {width:100%;padding:0 30px 40px;max-width:1600px;}
#ChartWrap .scrollX {width:1517px;}

/* bookmap -------------------------------------------------------------------------------------------------- */
.PopHeaderWrap {text-align:center;padding:23px 0 20px;}
.PopHeaderWrap h1 {font-size:24px;display:inline-block;margin:auto;color:#33336e;font-weight:800;font-family: sbfont;}
.PopHeaderWrap h1 img {margin-right:8px;vertical-align:bottom;}
.PopHeaderWrap h1 strong {white-space:nowrap;}


/* table */
.TableChart, .TableChart td {overflow:visible;}
.TableChart th, .TableChart td {word-wrap: break-word;word-break:keep-all;overflow-wrap:break-word;}
.TableChart {width:100%;border-collapse: separate;min-width:1200px;table-layout:fixed;}
.TableChart thead {position:sticky;top:0;z-index:100;background-color:#fff;}
.TableChart thead::after {background-color:#33336e;}
.TableChart thead::after, .TableChart tbody::after {
    content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index: -1;border-radius:20px;
}
.TableChart thead th {color:#fff;text-align:center;border-bottom:1px solid #7979b1;border-left:1px solid #7979b1;font-weight:300;}
.TableChart thead tr th:first-child {border-left:0;}
.TableChart thead th, .TableChart tbody td {padding:10px 15px;font-size:14px;vertical-align:middle;line-height:130%;}
.TableChart tbody td {border-bottom:1px solid #d8d8e6;border-left:1px solid #d8d8e6;color:#000;position:relative;}
.TableChart tbody tr:last-child td {border-bottom:0;}
.TableChart .Title {writing-mode: vertical-rl;text-align:center;color:#fff;font-weight:800;vertical-align:middle;}
.TableChart tbody {position:relative;}
.TableChart tbody::after {background-color:#fff;border:1px solid #d8d8e6;}

/* option */
.TableChart .StrongTxt {font-weight:800;}
.TableChart .Divide td, .TableChart .Divide {border-bottom-color:#afafc6;}
.TableChart .DivideL {border-left-color:#afafc6;}
.TableChart .DivideB {border-bottom-color:#afafc6 !important;}
.TableChart .TL {border-top-left-radius:20px;}
.TableChart .TR {border-top-right-radius:20px;}
.TableChart .BL {border-bottom-left-radius:20px;}
.TableChart .BR {border-bottom-right-radius:20px;}
.TableChart .Lline {border-left:1px solid #7979b1 !important;}
.TableChart .NoLline {border-left:0;}
.TableChart .BlineNo th, .TableChart .BlineNo td, .TableChart .BlineNo {border-bottom:0;}
.TableChart .DashedB {border-bottom-style:dashed;}
.TableChart .LineBg {background-color:#444486;}
.TableChart .ColorBgA {background-color:#8dc63f;}
.TableChart .ColorBgB {background-color:#15c4ca;}
.TableChart .CategoryBgA {background-color:#ed6969;}
.TableChart .CategoryBgB {background-color:#fcc227;}
.TableChart .CategoryBgC {background-color:#bbd447;}
.TableChart .CategoryBgD {background-color:#4ec7d9;}
.TableChart .CategoryBgE {background-color:#5b83df;}
.TableChart .CategoryBgF {background-color:#6c6cdf;}

.TableChart .Tab01 {background-color:#fff2f2;}
.TableChart .Tab01_0 {background-color:#ffdfdf;}
.TableChart .Tab01 span {background-color:#ed6969;}
.TableChart .Tab02 {background-color:#fff9ea;}
.TableChart .Tab02_0 {background-color:#fff0c7;}
.TableChart .Tab02 span {background-color:#fcc227;}
.TableChart .Tab03 {background-color:#f9fff0;}
.TableChart .Tab03_0 {background-color:#e8f3ba;}
.TableChart .Tab03 span {background-color:#bbd447;}
.TableChart .Tab04 {background-color:#f2fdff;}
.TableChart .Tab04_0 {background-color:#d7f0f3;}
.TableChart .Tab04 span {background-color:#4ec7d9;}
.TableChart .Tab05 {background-color:#f6f9ff;}
.TableChart .Tab05_0 {background-color:#e2e6f7;}
.TableChart .Tab05 span {background-color:#5b83df;}
.TableChart .Tab06 {background-color:#e8e8f9;}
.TableChart .Tab06_0 {background-color:#e8e8f9;}
.TableChart .Tab06 span {background-color:#6c6cdf;}
.TableChart .Tab01 span, .TableChart .Tab02 span, .TableChart .Tab03 span, .TableChart .Tab04 span, .TableChart .Tab05 span, .TableChart .Tab06 span {
    display:inline-block;line-height:21px;padding:0 10px;border-radius:50px;vertical-align:middle;color:#fff;margin-left:5px;
}

/* .TableChart .Cell a {
    position:absolute;background-color:#f4f4fb;height:100%;left:0;top:0;display:flex;padding:0 7px;text-align:center;
    align-items:center;justify-content:center;z-index:10;color:#808080;transition: all 0.3s ease-in-out 0s;
} */
.TableChart td a {
    background-color:#f4f4fb;display:flex;padding:15px 7px;
    align-items:center;justify-content:center;color:#808080;transition: all 0.3s ease-in-out 0s;
}
.TableChart td a:hover {background-color:#f0f0fb;color:#33336e;}
.TableChart .Cell02, .TableChart .Cell03, .TableChart .Cell04, .TableChart .Cell05 {padding:0;}
/* .TableChart .Cell02 a {width: calc(100% * 2 + 1px);}
.TableChart .Cell03 a {width: calc(100% * 3 + 2px);}
.TableChart .Cell03.first a {left:-100%;width:300%;}
.TableChart .Cell04 a {width: calc(100% * 4 + 3px);} */
.TableChart .end a {border-right:1px solid #d8d8e6;}
.TableChart .last a {border-bottom:1px solid #d8d8e6;}

#ChartWrap .scroll {max-height: calc(100vh - 130px);}

.TableChart.Curriculum tbody td {text-align:center;border-bottom-color:#cfcfdd;}
.Curriculum {min-width: 1070px;}
.Curriculum tbody tr td {border-bottom-style:dashed;}
.Curriculum .CategoryBgA, .Curriculum .CategoryBgB, .Curriculum .CategoryBgC, .Curriculum .CategoryBgD, .Curriculum .CategoryBgE {color:#fff;font-weight:600;}
.Curriculum td a {display:inline-block;padding-bottom:3px;background-color:transparent;padding-top:0;}
.Curriculum .Tab01 a {border-bottom:1px dashed #ed6969;}
.Curriculum .Tab02 a {border-bottom:1px dashed #f7a200;}
.Curriculum .Tab03 a {border-bottom:1px dashed #a4c31c;}
.Curriculum .Tab04 a {border-bottom:1px dashed #26b1c7;}
.Curriculum .Tab05 a {border-bottom:1px dashed #5b83df;}

.BookMapWrap td a span {text-align:center;}


/* 모바일 ------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 640px){
    .TableChart thead th, .TableChart tbody td {font-size:13px;}
    #ChartWrap {padding: 0 15px 20px;}

    .Curriculum {min-width: 890px;}
    .Curriculum colgroup col:nth-child(2) {width:101px;}

    .BookMapWrap .TableChart {min-width: 1060px;}
    .BookMapWrap .TableChart colgroup col:nth-child(2) {width:324px;}
    
}

@media screen and (max-width: 510px){
    .CurriculumWrap h1 img {margin-right:0;margin-bottom:10px;display:block;}
    
}