@charset "utf-8";


/** main content **/
.main {width: 100%;}
.main h3 {font-size: 16px; color: #000; font-weight: 700;}
.visual {width: 100%;height: 400px; background: #fafafa; font-size: 0; overflow: hidden;}
.visual ul {position: relative;width:1100px;height: 400px;margin: 0 auto; overflow: hidden;}
.visual li {display: inline-block;width:1100px;height: 400px;float: left;}
#Class_dummy {display:block;}
#mainvisual {display: block;}
#mainvisual1{display: none;}
.floatMenu {display:block;}
.bannerBox_Img {display:none;}
.bannerBox {width: 1100px; margin: 0 auto; text-align: center; margin-top: 20px;display:inline-block;}
.bannerBox li {display: inline-block; width:180px; height: 60px; margin:0 5px;}
.bannerBox li a {display: block;line-height:48px;border:solid 1px #eee;font-size: 18px;border: solid 2px #116dd4; color: #116dd4;}
.bannerBox li a:hover {background:#3160c2;color:#ffffff}
.contBox {clear: both; background: #fff; padding: 20px 0; height: 290px;}
.contBox h3 {margin-bottom: 15px;}
.contBox ul {position: relative; width: 1063px; margin: 0 auto;font-size: 0;}
.contBox ul li {position: relative;display: inline-block;height: 280px; width: 350px; padding: 10px; border:solid 1px #ccc;}
.contBox ul li:nth-child(2){margin: 0 ;}
.contBox ul li h3 > a {position: absolute; right:10px;}
.contBox .program div {margin:0; height: auto;overflow: hidden;/*border:solid 1px #eee;*/}
.contBox .program div img {width: 100%; /*height: 100%;*/}
.contBox .guide {font-size: 0;}
.contBox .guide dl {display: inline-block;width: calc(50% - 10px); margin: 5px;}
.contBox .guide dt {display: block;/*border:solid 1px #eee;*/overflow: hidden; height: 100px;}
.contBox .guide dt img {width:140px;height:105px;}
.contBox .guide dd {display: block;font-size: 14px; color: #777; text-align: center; padding-top: 10px;line-height: 160%;}
.contBox .notice, .CSWrap .notice {border-top:solid 1px #ddd; padding-top: 5px;}
.contBox .notice a, .CSWrap .notice a {font-size: 14px; color: #555; line-height:28px; display: block; width: 320px; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden;}
.contBox .notice a:hover, .CSWrap .notice a:hover {text-decoration: underline;}
.contBox .briefing, .CSWrap .briefing {border-top:solid 1px #ddd; padding-top: 5px;}
.contBox .briefing a, .CSWrap .briefing a {font-size: 14px; color: #555; line-height:28px; display: inline-block; width: 240px; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden;}
.contBox .briefing a:hover, .CSWrap .briefing a:hover {text-decoration: underline;}

.contBox .banner {margin-top: 15px;}

.CSWrap {clear: both;width:100%; height:300px;}
.CSWrap ul li h3 > a {position: absolute; right:10px;}
.CSWrap ul {position: relative; width: 1100px; margin:0 auto;font-size: 0;}
.CSWrap li {position: relative; display:inline-block; width: 350px; height:250px;vertical-align: top; padding: 10px; border:solid 1px #ccc;}
.CSWrap li:nth-child(2){margin: 0 25px;}
.CSWrap li div.main_map {margin-top:10px;background: #fff}
.CSWrap li div.main_calenda, .CSWrap li div.main_map {width:100%;height: 196px;overflow: hidden;border:solid 1px #ddd;}
.main_faq {width: 100%; border-bottom: solid 1px #ddd;height:114px; padding: 0 15px;}
.main_faq h3 {text-align: center; margin-bottom: 10px;}
.main_faq p {font-size: 12px; margin-bottom: 10px;}
.main_qna {width: 100%;padding: 0 15px;}
.main_qna h3 {text-align: center; margin: 10px 0;}
.main_qna p {font-size: 12px; margin-bottom: 10px;}
a.go {border:solid 1px #116dd4; display: block; width: 120px; height: 35px; line-height: 33px; font-size: 12px;padding: 0 10px;background: url(../images/common/icon_plus.png) right 10px center no-repeat #fff;}
.map_li_span {display:block;}
#floatMenu {position: absolute;width: 50px;height: 50px;left: 85%;top: 1%;z-index:100;}
#floatMenu img {padding:10px;}

@media only screen and (max-width:1024px) {
    .contBox {clear: both; background: #fff; padding: 20px 0; height: 290px;}
    .contBox h3 {margin-bottom: 15px;}
    .contBox ul {position: relative; width: 990px; margin: 0 auto;font-size: 0;}
    .contBox ul li {position: relative;display: inline-block;height: 280px; width: 330px; padding: 10px; border:solid 1px #ccc;}
    .contBox ul li:nth-child(2){margin: 0 ;}
    .contBox ul li h3 > a {position: absolute; right:10px;}
    .contBox .program div {margin:0; height: auto;overflow: hidden;/*border:solid 1px #eee;*/}
    .contBox .program div img {width: 100%; height: 100%;}
    .contBox .guide {font-size: 0;}
    .contBox .guide dl {display: inline-block;width: calc(50% - 10px); margin: 5px;}
    .contBox .guide dt {display: block;/*border:solid 1px #eee;*/overflow: hidden; height: 100%;}
    .contBox .guide dt img {width:100%;height:100%;}
    .contBox .guide dd {display: block;font-size: 14px; color: #777; text-align: center; padding-top: 10px;line-height: 160%;}
    .contBox .notice, .CSWrap .notice {border-top:solid 1px #ddd; padding-top: 5px;}
    .contBox .notice a, .CSWrap .notice a {font-size: 14px; color: #555; line-height:28px; display: block; width: 320px; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden;}
    .contBox .notice a:hover, .CSWrap .notice a:hover {text-decoration: underline;}
    .contBox .briefing, .CSWrap .briefing {border-top:solid 1px #ddd; padding-top: 5px;}
    .contBox .briefing a, .CSWrap .briefing a {font-size: 14px; color: #555; line-height:28px; display: inline-block; width: 240px; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden;}
    .contBox .briefing a:hover, .CSWrap .briefing a:hover {text-decoration: underline;}
}

@media only screen and (max-width:768px) {
    .Class_dummy {display:none;}
    #mainvisual {display: none;}
    #mainvisual1{display: block;}
    .floatMenu {display:none;}
    .bannerBox_Img {width: 100%;display:block;margin-top: 20px;}
    .bannerBox_Img li{display:inline-block;margin:0 3px;}
    .bannerBox_Img li img{width:70px;}
    .bxSlider {height:450px;}
    .bannerBox {width: 100%;}
    .bannerBox li {width:160px; height: 60px;}
    .bannerBox li a {display: block;line-height:60px;font-size: 12px;}
    
    .testWrap {position: relative; width: 100%; margin: 0 auto;height: auto; padding: 10px;}
    .testWrap dl {width: 100%; float: none; margin:5px 0; }
    .contBox {padding: 10px; height: auto; }
    .contBox ul {position: relative; width: 100%; }
    .contBox ul li {position: relative; float: none; height: auto; width: 100%; margin: 5px 0;padding-bottom: 10px;}
    .contBox ul li:nth-child(2){margin: 0;}
    .contBox .notice a {width: 100%;}
    .contBox .briefing a {width: 75%;}
    .contBox .banner img {width: 100%;}
    .CSWrap {width: 100%; height: auto; padding: 10px;}
    .CSWrap ul {position: relative; width: 100%;}
    .CSWrap li {float: none; width: 100%;padding: 10px; margin: 5px 0;}
    .CSWrap li:nth-child(2){margin: 0;}
    .CSWrap .notice a {width: 100%;text-align: left;}
    
}

/** 달력 **/
.calenda {margin-top: 0 !important;}
.calenda > p {font-size: 20px; font-weight: 700; text-align: center; color:#116dd4; padding-bottom: 5px;}
.calenda table {width: 100%; table-layout: fixed;background: #fff;}
.calenda th, .calenda td {border:solid 1px #ddd;font-size: 12px; text-align: center;}
.calenda th {background: #eee; color: #555;line-height: 24px;}
.calenda th.SAT {background:#e3eaff; color: #2c7bff;}
.calenda th.SUN {background:#ffe3e3; color: red;}
.calenda td {text-align: left;position: relative;height: 28px;}
.calenda td.event_cal {background-color:#ccc;}

.calenda td span {display: block; position: absolute;left: 1px; top:0;color: #aaa;}
.calenda td span.day {color: #777;}
.calenda td span.sat {color: #2c7bff;}
.calenda td span.sun {color: red;}
.tab_list .calenda td {width: 100%;text-align: center;height: 50px;}


/**월말평가**/
.monthTest {font-size: 0;border:solid 1px #ddd;padding: 0;margin-top: 20px;}
.monthTest dt, .monthTest dd {display: inline-block;vertical-align: middle;}
.monthTest dt {background: #eee;width: 20%;line-height: 100px; font-size: 14px;color: #000;text-align: center;}
.monthTest dd {width: 80%;font-size: 12px;padding: 5px;}

/** 스케줄 **/
.schedule {margin-top: 10px;}
.schedule table {width: 100%; table-layout: fixed;background: #fff;}
.schedule th, .schedule td {border:solid 1px #ddd;font-size: 14px; text-align: center;}
.schedule th {background: #aaa; color: #fff;height: 30px;font-weight: 700;font-size: 16px;}
.schedule td {text-align:center;height: 100px;}
.schedule td p {display: block;margin:5px;border:solid 1px #ddd;background:#fff;line-height: 200%;}
.schedule td.time {background: #fafafa;}
.schedule td.time p {border:0;background: transparent;font-size: 16px;font-weight: 700;}
.schedule td.focus {background: #dbedff;}
.schedule td.disable {background: #fafafa;}
.stu_detail {font-size: 16px; color: #000;}
.stu_detail img {vertical-align: middle;}


.lnb {position: relative;top:5px; width:100%;border-bottom: solid 1px #ddd;}
.lnb > ul {position: relative; width: 1100px;margin:0 auto;border-left:solid 1px #ddd;}
.lnb > ul > li {display: inline-block;vertical-align: middle;color: #999; font-size: 12px; padding: 10px 10px 10px 20px;background: url(../images/common/icon_next.gif) left 5px center no-repeat; border-right:solid 1px #ddd;}
.lnb > ul > li:first-child {color: #000;background: none; padding: 10px;}
.lnb > ul > li:last-child {color: #000;}
.contents {position: relative; width: 1100px; max-width:100%;margin:0 auto;min-height: 700px; padding: 30px 0 50px 0;}

.h2 > p {font-size: 36px; margin: 20px 0; color: #000;display: inline-block; position: relative;}
.h2 > p:before {content:""; display: block;background-color: #116dd4;width: 32px;height: 3px;}
.h3 {padding:10px 0;color: #000;font-size: 18px;}
.h3::before {content:""; display: inline-block;width: 3px;height: 15px;background-color: #116dd4; margin-right: 4px;}
.h3 > span {font-size: 14px; color: #999;}
h4 {font-size: 16px; color:#116dd4; font-weight: 700; margin-bottom: 5px;}


/**login**/
.loginWrap {text-align: center; border: solid 1px #ddd; height: 380px; }
.login_title {background: url(../images/common/icon_biglock.png) center 20px no-repeat; padding-top: 130px; font-size: 15px;}
.find_title {background: url(../images/common/icon_bigsearch.png) center 20px no-repeat; padding-top: 80px; background-size: 48px; font-size: 15px;}
.login_input {width: 433px; margin: 20px auto; position: relative;}
.login_input p {margin: 5px 0;}
.login_input input[type="text"], .login_input input[type="password"] {width: 100%; height: 44px; font-size: 15px; text-align: center; line-height: 42px;}
.loginWrap a.login {display: block; line-height: 44px;background:#116dd4; border:solid 1px #116dd4; color: #fff; font-size: 15px;}

/*** button ***/ 
.btn_set {text-align: center; width: 100%;font-size: 0; margin: 10px 0;}
.btn_set > span {display: inline-block; vertical-align:middle; font-size: 14px; padding: 0 0 0 5px; text-align: center;}
.btn_set a {color: #116dd4;display: block; border:solid 1px #116dd4; border-radius: 2px; line-height: 33px; padding: 0 15px; min-width: 80px; height: 35px;}
.btn_set a:hover {background:#edf3ff;}
.btn_set a.filled { background:#116dd4; color: #fff;}
.btn_set a.filled:hover {background:#3160c2;color: #fff;}
.btn_sml {display: inline-block; margin-left: 5px;}
.btn_sml a { background: #fff; color: #116dd4; border: 1px solid #116dd4; border-radius: 2px; display: inline-block;vertical-align:middle;line-height: 24px; padding: 0 10px; font-size: 12px;}
.btn_sml a.search {background: url(../images/common/icon_search.png) 5px center no-repeat #116dd4; color: #fff; padding: 0 10px 0 30px;}


/**인사말**/
.greeting {/*border:solid 1px #ddd;*/ padding:10px;overflow-x:hidden;}

/**오시는길**/
.map_cont .map_area{width:100%;display:block}
.map_cont .map_area .root_daum_roughmap{width:100%; }
.map_cont .map_area .root_daum_roughmap .wrap_map{height:500px}
.map_cont .map_area .root_daum_roughmap .wrap_controllers{display:none}
.map_cont .map_info {font-size: 0; margin: 30px 0;}
.map_cont .map_info li {position: relative; display: inline-block; width: calc(50% - 20px); font-size: 16px; margin-right: 30px; border:solid 1px #ccc; padding: 20px 60px; text-align:center; }
.map_cont .map_info li:nth-child(2) {margin-right: 0;}
.map_cont .map_info li span{position: absolute; top:5px;left:10px;}

@media only screen and (max-width:768px) {
    .map_li_span {display:none;}
}
/**셔틀버스 버튼**/
.bustime {font-size: 0; margin-bottom:10px;}
.bustime li {display: inline-block;width: 25%; padding: 5px;}
.bustime li button {border:solid 1px #ddd;background: #fff;width: 100%;height: 50px; text-align: center;font-size: 15px;}
.bustime li button:hover, .bustime li button.focus {border:solid 2px #116dd4;}

.bustime li a {border:solid 1px #ddd;background: #fff;width: 100%;height: 50px; text-align: center;font-size: 15px;}
.bustime li a:hover, .bustime li a.focus {border:solid 2px #116dd4;}

/** 학원전경 **/
.big-photo {position: relative;border:solid 1px #ddd; margin-bottom: 20px; padding: 20px;}
.big-photo img {width: 100%;}
.big-photo a {position: absolute;z-index: 1;right:20px; bottom: 20px;}
.sum-photo {width: 100%; position: relative;font-size: 0;}
.sum-photo span.back {position: absolute;left: 0;top:63px;width: 32px;height: 32px;}
.sum-photo span.next {position: absolute;right: 0;top:63px;width: 32px;height: 32px;}
.sum-photo ul {width: 100%;height:158px;padding: 0 50px;overflow: hidden;}
.sum-photo li {display:inline-block;vertical-align: top;width: 25%;height:158px;padding: 5px;}
.sum-photo li img {width: 100%;border:solid 1px #ddd;}

.total_reception { position: relative; width: 500px; border:2px solid #ddd; text-align: center; padding: 10px; font-size: 14px; color: #000; margin: 20px auto;}
.total_reception strong {font-size: 18px; color: #fe4e00;}

.cnt_msg {background:#f5f5f5;padding:20px;border:1px solid #aaa; margin-bottom: 20px;} 
.cnt_msg p {font-size:18px; color:#000; text-align: center;}

.passwrap {position: relative; width: 520px; margin: 20px auto; text-align: center;}
.pass_box {margin: 20px 0;background:#f5f5f5; color: #000; padding:20px;border:1px solid #ddd; text-align: center;}
.pass_box > span { display: inline-block;padding:10px 0; font-size: 14px; line-height: 20px;}

.int {font-size: 16px; padding: 0 20px; line-height: 20px; margin-bottom: 20px;}

.rule {font-size: 14px; line-height: 18px; padding: 15px 20px; border:solid 1px #eee;}
.rule h3 {font-size: 19px; font-weight: 400; margin-top: 20px;}
.rule h3:first-child {margin: 0;}
.rule h3:before {content: ""; display: inline-block; vertical-align: middle; width: 4px; height: 4px; background: #116dd4; margin-right: 5px;}
.rule h4 {color: #000; margin: 0 0 5px 15px; font-weight: 400;}
.rule p {padding-left: 20px; color: #777;}
.rule ul {margin-left: 30px;}

.bullet {border:solid 1px #eee; padding:10px; margin-bottom: 20px; font-size: 0;}
.bullet li {line-height: 24px; display: inline-block; width: 50%; font-size: 14px;}
.bullet li:before {content: ""; display: inline-block; vertical-align: middle; width: 3px; height: 3px; background: #000; margin-right: 5px;}

.step_guide {font-size: 0; margin-top: 10px;}
.step_guide li {position: relative; display: inline-block; vertical-align: top; width: calc(33% - 40px); border:solid 1px #ccc; border-radius: 4px; color: #000; text-align: center; padding: 15px 10px; font-size: 16px; margin:0 40px 20px 0;}
.step_guide li span {display: block; border-top:solid 1px #eee; padding-top: 10px; margin-top: 10px; font-size: 12px; text-align: left; color: #999;}
.step_guide li:after {content:""; position:absolute; top:0; margin-right:-40px; right:0; width:40px; height: 40px; background: url(../images/common/step_arrow.png) center 0 no-repeat; }
.step_guide li:last-child:after {display: none;}

.login_join {font-size: 0;border-top:1px solid #ddd;border-left:1px solid #ddd; margin-top: 20px;}
.login_join li { display: inline-block; width: 33.333%; height: 170px; border-right:1px solid #ddd; border-bottom:1px solid #ddd; padding-top: 50px; text-align: center;}
.login_join li:nth-child(1) {background: url(../images/common/icon_join_search.png) center 10px no-repeat #fafafa; background-size:auto 40px;}
.login_join li:nth-child(2) {background: url(../images/common/icon_join_personal.png) center 10px no-repeat #fafafa; background-size:auto 40px;}
.login_join li:nth-child(3) {background: url(../images/common/icon_join_group.png) center 10px no-repeat #fafafa; background-size:auto 40px;}
.login_join li > h3 {font-size: 16px; color: #000; padding: 10px 0;}
.login_join li > p {font-size: 12px; padding-bottom:10px; }


/**find_IDPW**/
.find_idpw {text-align: center; font-size: 0;}
.find_idpw li {display: inline-block; vertical-align: top; width: 50%; padding:0 20px;}
.find_idpw li dl {font-size: 0; border-right: 1px solid #eee;border-bottom: 1px solid #eee;}
.find_idpw li dt {
    display: inline-block;
    width: 30%;
    line-height: 49px;
    border-left: 1px solid #eee;
    border-top: 1px solid #eee;
    background-color: #fafafa;
    color: #333;
    padding-left: 20px;
    vertical-align: top;
    text-align: left;
    font-size:14px;}
.find_idpw li dd {
    display: inline-block;
    width: 70%;
    border-left: 1px solid #eee;
    border-top: 1px solid #eee;    
    padding: 10px;
    vertical-align: top;
    text-align: left;
    font-size:14px;
    color: #666;    
}

/**agreement**/
.join-terms_items {margin: 10px 0 20px 0;}
.join-terms {border: 1px solid #e0e0e0;border-top: 1px solid #b8b8b8; width: 100%;}
.join-terms_title {
    position: relative;
    width: 100%;
    font-size: 16px;
    color: #000;
    font-weight: 500;
    display: block;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    padding: 13px 0;
}
.join-terms_titleCheck {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 14px;
}
.checkbox2 {
    display: inline-block;
    cursor: pointer;
    color: #116dd4;
    vertical-align: middle;
}
.join-terms_description {
    font-size: 14px;
    color: #999;
    padding: 20px;
    height: 150px;
    line-height: 22px;
    overflow-y: scroll;
}
.join-terms_description h3 {font-size: 18px; color: #000; margin:20px 0 5px;}
.join-terms_description h4 {color: #666; margin-top:20px;}
.join-terms_description ul {padding-left: 15px;}


@media only screen and (max-width:768px) {
    .contents {position: relative; max-width: 100%; min-height: 450px; padding: 10px;}
    .sub_vsl {background: none;}
    .lnb {display: none;}
    .h2 {text-align: center;}
    .h2 > p {font-size: 24px;}
    .h2 > p:before {content:"";width: 100%;}
    .total_reception {width: 100%;}
    .passwrap {width: 100%;}
    .pass_box {padding:15px;}
    .pass_box > span {font-size: 14px; text-align: left;}
    .loginWrap {padding: 0 10px; font-size: 12px;}
    .login_title {font-size: 12px;}
    .login_input {width: 100%;}
    .login_join {}
    .login_join li { display: block; width: 100%; }
    .join-terms_titleCheck {position:relative; top: 5px; font-size: 12px; text-align: right;}
    .find_idpw li {display: block; width: 100%;} 
    .find_idpw li dl {display: block;border: 1px solid #ddd; padding: 10px 0;}
    .find_idpw li dd {display: block; width:100%; border:0; padding:5px 10px; font-size: 12px;}
    .find_idpw li dt {display: block;background:#fff; line-height: 24px; font-size:12px; padding-left:10px; width:100%; height: auto; border:0; color: #5971a3; font-weight:bold;}
    .bullet li {display: block; width: 100%;}
    .step_guide li {width:100%; display: block;margin:0 0 40px 0;}
    .step_guide li:after {content:""; position:absolute; top:auto; bottom:0; right:auto; left:50%; margin:0 0 -40px -20px; width:40px; height: 40px; background: url(../images/common/step_arrow_m.png) center 0 no-repeat; }
    .big-photo {padding: 10px;}
    .big-photo a {right:10px; bottom: 10px;}
    .big-photo a img {width:40px;}
    .sum-photo li {width: 50%;height:158px;padding: 5px;}
}

/**search**/
.search_box {
    width: 100%;
    text-align:center;
    margin-bottom: 30px;
}
.search_box span {
    display: inline-block;
}
.search_box span select {
    height: 35px;
    width: 120px;
    background-position:right 7px top 13px;
}
.search_box span input {
    height: 35px;
    width: 250px;
}
.search_box {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}

.search_box2 span {display: inline-block;}
.search_box2 span select {height: 35px;background-position: right 7px top 13px;}
.search_box3 span input {height: 35px;width: 250px;}

.bg_gray {background: #fafafa; border: 1px solid #ddd; padding: 10px;}
.teacher {margin-bottom: 10px;}
.teacher label {font-size: 15px; margin:10px 5px;}
.month {text-align: center;}
.month span {display: inline-block;vertical-align: middle;font-size: 24px;color: #333;padding:0 10px;}
.total {position: absolute; font-size: 14px; color: #555; margin-top: -25px;}
.total span {color: #fe4e00; font-size: 16px;}

/**table**/
.table-layout {width: 100%;margin: 20px 0;border-right: solid 1px #ddd;border-left: solid 1px #ddd; overflow-x:auto;}
.table-layout table {width: 100%;border-top: solid 2px #767676;}
.table-layout th, .table-layout td {white-space: nowrap;}
.table-layout th {font-size: 15px;background:#f5f5f5;border-bottom: solid 1px #ddd; border-right: solid 1px #ddd; color: #555; height: 40px; padding:10px;}
.table-layout td {font-size: 15px;border-bottom: solid 1px #ddd; border-right: solid 1px #eee; color:#999; padding: 10px; text-align: center;}
.table-layout th:last-child, .table-layout td:last-child {border-right:0;}

.table-layout td.title {text-align: left;}
.table-layout td > a.lock {background: url(../images/common/icon_lock.png) no-repeat left center; padding-left:20px;}

/**view**/
.table-view {width: 100%;}
.table-view table {width: 100%;border-top: solid 2px #767676; }
.table-view th {font-size: 15px;background:#f5f5f5;border-bottom: solid 1px #ddd; border-right: solid 1px #ddd; color: #555; height: 40px;}
.table-view td {font-size: 15px;border-bottom: solid 1px #ddd; border-right: solid 1px #eee; color:#999; padding: 10px;}
.table-view th:last-child, .table-view td:last-child {border-right:0;}
.comment {border: solid 1px #ddd; padding:10px;margin-top: 20px;}
.comment dt {font-size: 14px; font-weight: 700; color: #333; padding: 10px;}
.comment dt span {display: inline-block; font-size: 12px; color: #999;padding-left: 10px;}
.comment dd {padding: 0 10px;}
.comment_input {padding: 10px; background: #f5f5f5; margin-top: 10px;}

.title_box {
    width: 100%;
    border-top: 2px #000 solid;    
    text-align: left;
    margin-top: 30px;
}
.title_box h3 {
    position: relative;
    font-size: 20px;
    color: #333;
    border-bottom: 1px #d6d6d6 solid;
    padding: 15px;
}
.title_box h3 > span {display: inline-block; position: absolute; right: 15px; font-size: 16px; color: #999; line-height: 20px;}
.title_box .clf {background: #fafafa; text-align: right; padding: 15px; font-size: 14px;}
.title_box .clf:before {content: ""; width: 14px; height: 14px; display: inline-block; vertical-align: middle; background: url(../images/common/icon_attach.png) no-repeat; margin-right: 5px;}
.view_box {
    padding:10px;
    min-height: 300px;
    overflow:auto;
    box-sizing: border-box;
    text-align: left;
    font-size: 14px;
    color: #666;
    line-height: 25px;
    -ms-word-break: keep-all;
    word-break: keep-all;
    border-bottom: solid 1px #ddd;
}
.list_box {
    width: 100%;
    margin-bottom: 30px;
    border-top: 2px #000 solid;
    text-align: left;
    font-size: 14px;
}
.list_box dl {padding: 15px 0; border-bottom: solid 1px #ddd;}
.list_box dt, .list_box dd {padding: 0 30px;float: left;}
.list_box dt span { margin-right: 10px;}
.fa {display: inline-block; width: 13px; height: 9px;}
.fa-up {background: url(../images/common/fa_up.gif) no-repeat;}
.fa-dn {background: url(../images/common/fa_dn.gif) no-repeat;}

.answer_box {
    width: 100%;
    margin-bottom: 30px;
    background: #fafafa;
    border-top: 1px #ddd solid;
    border-bottom: 2px #000 solid;
    text-align: left;
    font-size: 14px;
    padding: 30px;
    font-size: 0;
}
.answer_box dt:before {content: "답변"; color: #fff; background: #116dd4; font-size: 14px; margin-bottom: 10px;padding: 5px; }
.answer_box dt {display: inline-block; width: 50px; vertical-align: top; padding-top: 5px;}
.answer_box dd {display: inline-block;color: #999; font-size: 14px; width: calc(100% - 50px);}

/**table-input**/
.divTable {width: 100%; margin-bottom: 20px; border-top:solid 2px #767676; border-bottom: solid 1px #ddd;}
.divTableBody {
    display: table;
    table-layout: fixed;
    width: 100%;
    background-color:#fff;
}
.divTableRow {display: table-row;}
.divTableHead {
    display: table-cell;
    width: 20%;
    border-top: 1px solid #eee;
    background-color: #fafafa;
    color: #333;
    padding-left: 20px;
    vertical-align: middle;
    font-size:14px;
}
.divTableCell {
    display: table-cell;
    border-left: 1px solid #eee;
    border-top: 1px solid #eee;    
    padding: 10px;
    vertical-align: middle;
    font-size:14px;
    color: #666;
}
.divTableCell p {margin:2px 0 3px 0;line-height: 28px;}
.divTableCell p.pay {padding: 5px 0; border-bottom:dashed 1px #ddd;}
.divTableCell p.pay:last-child {border-bottom: 0;}
.divTableCell p.pay span {display: inline-block; padding: 0 10px; border-right:solid 1px #ddd; line-height: 100%;}
.required {display: inline-block;}
.required:before {content:"*";display: inline-block; vertical-align: middle; color: red;}

@media only screen and (max-width:768px) { 
    .search_box span {display: block; margin-bottom: 5px;}
    .search_box span select {width: 100%; float: none;}
    .search_box span input {width:calc(100% - 85px);}

    .search_box2 span {display: block;margin-bottom: 5px;text-align:right;}
    .search_box2 span select.one {width: 30%;float: none;}
    .search_box2 span select.two {width: 50%;float: none;}
    .total {display: none;}
    .scroll {overflow-x: scroll;}
    .scroll table {width: auto;}
    .scroll th, .scroll td {white-space: nowrap;}

    .title_box h3 > span {position: relative; display: block; padding: 5px 15px; font-size: 14px;}
    .title_box .clf {text-align: left;}
    .view_box {width: 100%; padding: 30px 10px;min-height: auto;}
    .list_box dt {width: 30%;padding: 0 0 0 0;box-sizing: border-box;text-align: center;}
    .list_box dd {width: 70%;padding: 0 0 0 0;box-sizing: border-box;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
    .answer_box {padding: 10px;}
    .answer_box dt, .answer_box dd {display: block; width: 100%;}
    .answer_box dt:before {display: block; text-align: center; }

    .divTable {width: 100%;border-bottom:0;}
    .divTableBody {display: block; border: 0;}
    .divTableRow {display: block; }
    .divTableCell {display: block; width:100%; border:0; padding:10px; font-size: 12px;border-bottom: 1px solid #ddd}
    .divTableHead {display: block;background:#fff; font-size:12px; padding: 10px 0 0 10px; width:100%; height: auto; border:0; color: #5971a3; font-weight:bold;}
    .divTableCell .photo {height: auto;}
    .divTableCell .photo dt {float: none; text-align: center; padding-bottom: 10px;}
    .divTableCell .photo dd {float: none; border-top: 1px solid #eee; padding: 10px 0;}

    /* 테이블 */
    .table-layout th {font-size: 12px;background:#f5f5f5;border-bottom: solid 1px #ddd; border-right: solid 1px #ddd; color: #555; height: 40px; padding:10px;}
    .table-layout td {font-size: 12px;}
    .table-layout .table_board{font-size: 12px;border-bottom: solid 1px #ddd; border-right: solid 1px #eee; color:#999; padding: 10px; text-align: center; max-width:170px;white-space:nowrap;text-overflow: ellipsis;overflow: hidden;}
}

/*** tab ***/
.tab_type01 > ul {
    font-size: 0;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #999;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
.tab_type01 > ul > li {
    position: relative;
    display: inline-block;
    min-width: 98px;
    height: 100%;
    border: 1px solid #d5dae3;
    border-left: none;
    border-bottom: none;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
.tab_type01 > ul > li:first-child {
    border-left: 1px solid #d5dae3;}
.tab_type01 > ul > li.on {
    background-color: #fff;
    border-top: 4px solid #116dd4;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    border-bottom: none;
}
.tab_type01 > ul > li.on > a {
    background-color: #fff;
    color: #116dd4;
    font-weight: 600;
    height: 50px;
}
.tab_type01 > ul > li > a {
    display: block;
    height: 100%;
    padding: 16px 18px 9px;
    background-color: #f2f5f8;
    font-size: 16px;
    font-weight: normal;
    line-height: 16px;
    color: #333;
    text-align: center;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.tab_list {width: 100%; font-size: 14px; color: #666; line-height: 20px; margin-top: 15px;}
.item_6 > li {width: 16.666%;}

/*** FAQ ***/
.faq {margin-bottom: 20px;}
.faq li {position: relative;border-bottom: 1px solid #ddd; padding: 10px 0; }
.faq li li {border:0; padding: 5px;}
.faq li > a {display: inline-block; font-size: 16px; color: #333; padding: 10px 20px 10px 20px;}
.faq li > a:before {content: ""; position: absolute; left:20px; width: 34px; height: 34px; margin-top: -5px;}
.faq li div {display: block; background: #fafafa; padding: 20px 20px 20px 20px; font-size: 16px;line-height: 24px; border-top: 1px solid #eee; margin-top: 10px;}
.faq li div:before {content: ""; position: absolute; left:20px; width: 34px; height: 34px; margin-top: -5px;}
.bullet_type {display: inline-block;vertical-align: middle;min-width: 50px;text-align: center;background: #f2f5f8; color: #333; font-size: 12px; padding: 3px 0; margin-right: 5px;border-radius: 2px;border:1px solid #d5dae3;}

/**page**/
.paging {clear: both; font-size: 12px;text-align: center;line-height: 28px;}
.paging a.btn {background-color: #fff;}
.paging a {
    display: inline-block;
    vertical-align: middle;
    border: #dfdfdf 1px solid;
    width: 30px;
    height: 30px;
    color: #999999;
    font-size: 12px;
    text-align: center;
    padding: 0 !important;
    background: #fff;
    margin-left: 2px;
}
.paging strong {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    padding: 0;
    background: #116dd4;
    color: #fff;
    margin-left: 2px;
}
.paging a.prev {
    content: "";
    background: url(../images/common/icon_back.gif) center center no-repeat;
}
.paging a.next {
    content: "";
    background: url(../images/common/icon_next.gif) center center no-repeat;
}
.paging a.pre_end {
    content: "";
    background: url(../images/common/icon_back_first.gif) center center no-repeat;
}
.paging a.next_end {
    content: "";
    background: url(../images/common/icon_next_last.gif) center center no-repeat;
}

@media only screen and (max-width:768px) { 
    .tab_type01 {width: 100%;margin-top: 0;padding: 15px;background-color: #f1f5f8;}
    .tab_type01 > ul {height: auto;border-bottom: none;border-bottom: 1px solid #e1e7ee;border-right: 1px solid #e1e7ee;background-color: #fff;}
    .tab_type01 > ul > li.on {height: auto;border: 1px solid #116dd4;}
    .tab_type01 > ul > li.on > a {background-color: #fff;color: #116dd4;font-weight: 600; height: auto;}
    .tab_type01 > ul > li {width: 50% !important;height: auto;border: 1px solid #e1e7ee;border-right: none;border-bottom-color: #fff;}
    .tab_type01 > ul > li > a {height: auto;background-color: #fff;color: #444; padding: 0; line-height: 36px;}
}
@media only screen and (max-width:420px) { 
    .btn_set {margin:20px 0; text-align: center !important;}
    .btn_set > span {width: 50%;}
    .btn_set  a {height: 35px; line-height: 33px; padding: 0 20px; margin-bottom: 5px;}
}

/**etc**/
.red {color: red !important;}
.blue {color: #116dd4;}
.black {color: #000;}
.white {color: #fff;}
.orng {color: #fe4e00;}
.green {color: #1a8a00;}
.brown {color: #BB731A}
.center {text-align: center;}
.left {text-align: left !important;}
.right {text-align: right;}
.bdr_0 {border:0;}
.secret {display: inline-block;background: #aaa;color: #fff;padding: 3px;font-size: 11px; margin: 0 5px;line-height: 100%;border-radius: 2px;}

.findid {
    margin-left: 10px;
    font-weight: 600;
    cursor: pointer;
}

/* Y출석 N결석 L지각 E조퇴 T통보결석*/
.attend .Y {color: #0098db;}
.attend .N {color: #f25a21 !important;}
.attend .L {color: #70bd6b;}
.attend .E {color: #b6bc02;}
.attend .T {color: #bc7417;}