/* sub_tab02 */
.sub_tab02{max-width: 1200px;width: 100%;margin: 0 auto 60px;display: table;table-layout: fixed;}
.sub_tab02 li{background: #fff; border: 1px solid #D3D3D3; border-left: 0; display: table-cell; vertical-align: middle; position: relative; text-align: center}
.sub_tab02 li:first-child{border-left: 1px solid #d3d3d3}
.sub_tab02 li a, .sub_tab02 li span{padding: 10px 5px; display: block; color: #4c4c4c; font-size: 15px; letter-spacing: -1px}
.sub_tab02 .on{color:#ffffff; border-color: #4c4c4c; background: #4c4c4c}
.sub_tab02 .on:after{content: ''; position: absolute; left: 50%; bottom: -10px; border-top: 5px solid #4c4c4c; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid transparent; transform: translate(-50%, 0)}
.sub_tab02 .on a, .sub_tab02 .on span{color: #ffffff}
.tab_wrap ul.tab_container{width: 100%; overflow: hidden;}
.tab_wrap ul.tab_container > li{overflow:hidden; display: none;}
.tab_wrap ul.tab_container > li.on{display: block;}

@media screen and (max-width:768px) {
    .sub_tab02 li a {
        font-size: 13px;
    }
}
.mosa_box{margin-bottom: 20px; background: #f3f3f3}
.mosa_box img{text-align: center;}
.mosa_box p{font-size: 15px;line-height: 25px;}
.mosa_box .tit{color: #2578BB; font-size: 18px; font-weight: 700; letter-spacing: -1px}
.mosa_box .tit02{color: #F38034; font-weight: 700; letter-spacing: -1px}

/* ////////////////// 학습지원센터 /////////////////// */
/* 자주하는질문 */
.faq_box{ margin: 0 auto 20px}
.faq_box .faq_list .faq_con{width: 100%;color: #000;padding: 10px;margin-top: 15px;border-radius: 6px;border: 1px solid #e0e0e0;}
.faq_box .faq_list .faq_con:hover{    border-color: #78a3fe;    box-shadow: 0 2px 10px 0 rgba(31, 90, 252, .16);}
.faq_box .faq_list .faq_con:first-child{padding: 12px;}
.faq_box .faq_list .faq_con .faq_q{padding: 16px 51px 15px 50px;position: relative;font-size: 17px;word-break: keep-all;cursor: pointer;border: 1px solid #ffffff;text-align: left;/* padding: 10px; */margin: 9px;}
.faq_box .faq_list .faq_con .faq_q:before{content: ''; width: 3px; height: 15px; margin-top: -7.5px; position: absolute; top: 50%; right: 21px; background: #000;}
.faq_box .faq_list .faq_con .faq_q:after{content: ''; width: 15px; height: 3px; margin-top: -1.5px; position: absolute; top: 50%; right: 15px; background: #000;}
.faq_box .faq_list .faq_con .faq_q .q{position: absolute; left: 15px; font-size: 20px; color:#ffc500 !important}
.faq_box .faq_list .faq_con .faq_a{text-align: left;padding: 20px 15px 20px 50px; border-top: 1px solid #000; display: none; position: relative; font-size: 14px; font-family: 'NotoSansKR','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum' !important; background: #F5F5F5}
.faq_box .faq_list .faq_con .faq_a .a{content: 'A'; position: absolute; left: 15px; color: #e71515; font-size: 20px; font-weight: 700}
.faq_box .faq_list .faq_con .faq_q.on,
.faq_box .faq_list .faq_con .faq_q.on .a{color: #000}
.faq_box .faq_list .faq_con .faq_q.on:before{content: ''; width: 100%; height: 0; margin: 0; position: absolute; top: -1px; left: 0; background: none}
.faq_box .faq_list .faq_con .faq_q.on:after{background: #000}



/* sub_tab02 */
.faq_tab{width: 100%; margin: 0 auto 60px; display: table; table-layout: fixed}
.faq_tab li{background: #fff; border: 1px solid #D3D3D3; border-left: 0; display: table-cell; vertical-align: middle; position: relative; text-align: center}
.faq_tab li:first-child{border-left: 1px solid #d3d3d3}
.faq_tab li a, .faq_tab li span{padding: 10px 5px; display: block; color: #4c4c4c; font-size: 14px; letter-spacing: -1px}
.faq_tab .on{color:#ffffff; border-color: #4c4c4c; background: #4c4c4c}
.faq_tab .on:after{content: ''; position: absolute; left: 50%; bottom: -10px; border-top: 5px solid #4c4c4c; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid transparent; transform: translate(-50%, 0)}
.faq_tab .on a, .faq_tab .on span{color: #ffffff}
.tab_wrap ul.tab_container{width: 100%; overflow: hidden;}
.tab_wrap ul.tab_container > li{overflow:hidden; display: none;}
.tab_wrap ul.tab_container > li.on{display: block;}

@media screen and (max-width:768px) {
    .faq_tab{display: flex; flex-flow: wrap}
    .faq_tab li{width: 50%; border-top: 0; display: block}
    .faq_tab li:nth-child(1),
    .faq_tab li:nth-child(2){border-top: 1px solid #d3d3d3}
    .faq_tab li:nth-child(1).on,
    .faq_tab li:nth-child(2).on{border-color: #464646}
    .faq_tab li:nth-child(odd){border-left: 1px solid #d3d3d3}
    .faq_tab li.on:after{display: none}
}