@charset "utf-8";
/* CSS Document */

/* 서브공통 ------------------------------- */
/* layout */
.container {position:relative; overflow:hidden; margin-top:35px; min-height:400px;}
.container.mgt {margin-top:0;}
#lcontent {float:left; width:19.16%;} /* 230/1200 */
#rcontent {float:right; width:76.66%;} /* 920/1200 */
.con {color:#888; min-height:300px; margin-top:4%; margin-bottom:8%;}
.container img {max-width:100%;}
/* 타이틀크기 */
.container h3 {font-size:30px; font-weight:500; letter-spacing:-1px; background:url(../DR0001IMG/content/sub_tit_bg.jpg) 0 100% repeat-x; padding-bottom:20px;}
.container h3 strong, .container h4 strong, .container h5 strong {color:#d33d4f;}
.container h3 + p {font-size:16px;}
.container h4 {font-size:22px; line-height:1.3; margin-bottom:5px;}
.container h4.stit {padding-left:30px; position:relative; text-align:left;}
.container h4.stit:before {content:''; position:absolute; top:7px; left:0; width:10px; height:10px; background:#fff; border:6px solid #3ca7b7; border-radius:50%;}
.container h5 {font-size:17px; margin-bottom:5px;}

.link_tit{width:100%;overflow:hidden;position: relative;}
.link_tit .link_btn{float:right;display:inline-block;position: absolute;right: 0;top: 4px;padding: 8px 20px;background: #4377c0;color: #fff;font-size: 15px;border-radius: 5px;}

/* 컨텐츠 간격 */
.section {margin-top:6%;}
.section:first-child {margin-top:0%;}
/* cols */
.col_s02, .col_s03 {overflow:hidden;}
.col_s02 > div, .col_s02 > li {float:left; width:48%; margin-left:4%;}
.col_s02 > div:first-child, .col_s02 > li:first-child {margin-top:0; margin-left:0;}
.col_s03 > div, .col_s03 > li {float:left; width:31.33%; margin-left:3%;}
.col_s03 > div:first-child, .col_s03 > li:first-child {width:31.34%; margin-left:0;}
.col_s04 {overflow:hidden;}
.col_s04 > li {float:left; width:23.5%; margin:1% 0; margin-left:2%;}
.col_s04 > li:nth-child(4n+1) {margin-left:0;}

.mimg {display:none;}
.maximg {width:100%; max-width:100%;}
.wauto {width:auto;}
.imgh img, img.imgh {height:auto;} /* 게시판등 높이 고정된 이미지 높이값 해제 */
/* 기타텍스트 */
.cm_txt {font-size:13px; color:#888; font-weight:400; margin:2px 0;} /* 참고사항 텍스트 */
.cm_txt.mgt {margin:15px 0;}
ul.cm_txt {margin-top:15px;}
.cm_txt > li {margin:5px 0; position:relative; padding-left:10px;}
.cm_txt > li:before {content:'*'; display:inline-block; position:absolute; top:4px; left:0;}
.cm_txt.v2 > li {padding-left:15px;}
.cm_txt.v2 > li:before {content:'※'; display:inline-block; position:absolute; top:0; left:0;}
.rtxt {color:#b61b35;}
.ptxt {color:#0f2e45;}
.warning {color:#5a5b5b; padding-left:20px; margin-top:2%; position:relative;}
.warning:before {content:''; display:inline-block; background:url(../DR0001IMG/board/bbs_icon.png) 0 -94px no-repeat; background-size:100px; width:16px; height:16px; position:absolute; top:3px; left:0;}
.f12 {font-size:12px;}
.f16 {font-size:16px;}
.box_con {border:7px solid #eee; text-align:center; padding:2% 10px; margin:2% 0;}
.box_con strong {color:#333;}

/* 준비중입니다 */
.ing {text-align:center; padding:25% 5%; width:100%; background:#f7f7f7;}
.ing > p {font-size:16px; color:#333; margin-bottom:15px;}

/* 3depth */
.depth {display:none; position:relative; margin-bottom:20px;}
.depth:after {content:''; display:block; clear:both; position:absolute; right:10px; top:50%; margin-top:-2px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid #fff;}
.depth > span {cursor:pointer; display:block; background:#bbb; color:#fff; padding:8px 10px;}
.depth .smenu {position:absolute; top:34px; left:0px; z-index:10; display:none; width:100%; border:1px solid #bbb;}
.depth .smenu li {width:100%; display:block; background:#fff; border-top:1px solid #e0e0e0;}
.depth .smenu li:first-child {border-top:0;}
.depth .smenu li a {display:block; color:#666; padding:8px 2%;}
.depth .smenu li:hover {-webkit-transition:all 0.25s; -moz-transition:all 0.25s; -ms-transition:all 0.25s; -o-transition:all 0.25s; transition:all 0.25s; background:#f7f7f7;}

/* 좌측메뉴영역 */
#lcontent h3 {background:#0083c3 url(../DR0001IMG/content/snb_tit_bg.png) 100% 100% no-repeat; color:#fff; padding:0px 10px; height:90px; line-height:90px; font-size:27px; text-align:center; letter-spacing:-1px;}
.snb > li {border-bottom:1px solid #e5e5e5;}
.snb > li:first-child {border-top:1px solid #e5e5e5;}
.snb > li > a {display:block; position:relative; font-size:15px; color:#454545; padding:12px 20px; background:#fff; background-position:90% 50%; transition:background .25s ease-in-out; -moz-transition:background .25s ease-in-out; -webkit-transition:background .25s ease-in-out;}
.snb > li > a:before {content:''; position:absolute; top:24px; right:15px; background:#b9b9b9; width:9px; height:2px;}
.snb > li > a.on, .snb > li > a.on:hover {color:#0083c3;}
.snb > li > a.on:before {background:#0083c3;}
.snb > li > a:hover {background:#fbfbfb;}

/* Sprite */
.con_head_txt:before,
#guk_con > .guk_intro > ul > li:before,
.chkbox i, .chkbox input:checked+i, .join_agree .chk i, .join_agree .chk input:checked+i, .es, .wr_cm_txt span:before, #path > li.depth > span:after  
{background-image:url(../DR0001IMG/common/icon_set.png); background-size:500px;}

/* sub_visual */
#sub_visual {background:#d8d8d8; height:400px; text-align:center;}
#sub_visual.learn_vis {background:#d8d8d8 url(../DR0001IMG/content/learn_visual.jpg) 50% 100% no-repeat;}
#sub_visual.learnstep_vis {background:#ddd url(../DR0001IMG/content/learnstep_visual.jpg) 50% 100% no-repeat;}
#sub_visual.mem_vis {background:#d8d8d8 url(../DR0001IMG/content/mem_visual.jpg) 50% 100% no-repeat;}
#sub_visual.join_vis {background:#d8d8d8 url(../DR0001IMG/content/join_visual.jpg) 50% 100% no-repeat;}
#sub_visual.mem_vis.math {background-image:url(../DR0001IMG/content/mem_visual_math.jpg);}
#sub_visual.join_vis.math {background-image:url(../DR0001IMG/content/join_visual_math.jpg);}
#sub_visual.none {background:#fff; height:80px;}

/* 학습플랜 */
.learn_list > ul {overflow:hidden;}
.learn_list > ul > li {float:left; width:31.33%; margin:1%; border:1px solid #ddd; padding:15px; word-break:break-all;}
.learn_list > ul > li .info {position:relative; padding-left:40px; min-height:2.6em; display:block; margin-top:10px; line-height:1.3; max-height:2.6em; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
.learn_list > ul > li .info > span {position:absolute; top:0; left:0; padding-right:8px;}
.learn_list > ul > li .info > span:after {content:''; position:absolute; top:3px; right:0; background:#ddd; width:1px; height:12px;}
.learn_list > ul > li .btn_set {margin:15px 0 0;}

.ds_cont {text-align:center; font-size:18px; margin-top:2%;}
.container.mgt .ds_cont {margin-top:0;}
.container .ds_cont h4 {font-size:45px; line-height:1.2;}
.container .ds_cont h4 + p {font-size:30px; color:#333;}
.container .ds_cont h5 {font-size:24px;}

/* 독해의 힘 */
.define {text-align:left;}
.define .fl {width:30%;}
.define .fr {width:65%;}

/* 특징 */
.diagram {/* border:1px solid #ccc; border-top:1px solid #1e3c94; */ margin-top:2%;}
.diagram h5 {color:#1e3c94; border:2px solid #1e3c94; width:200px; height:33px; line-height:30px; text-align:center; background:#fff; border-radius:50px; margin:0 auto; margin-top:-18px;}
.diagram > div {padding:20px 0; position:relative; display:none;}
.diagram > div:after {content:''; display:block; background:#eee; width:100%; height:8px; position:absolute; top:185px;}
.diagram dl {float:left; width:18%; margin-left:2%; text-align:center; position:relative; z-index:2;}
.diagram dl dt {background:#fff; border:10px solid #d33d4f; border-radius:100px; width:140px; height:140px; margin:0 auto; line-height:125px; font-size:24px; font-weight:600; color:#d33d4f; text-align:center;}
.diagram dl:nth-child(2) dt {border-color:#0083c3; color:#0183c3;}
.diagram dl:nth-child(3) dt {border-color:#9b84d3; color:#9c84d3;}
.diagram dl:nth-child(4) dt {border-color:#00a8b9; color:#00a8b9;}
.diagram dl:nth-child(5) dt {border-color:#82978d; color:#82978d;}
.diagram dl dd {padding:15px 10px; margin-top:62px; position:relative;}
.diagram dl dd:before {content:''; display:inline-block; background:#ccc; width:1px; height:63px; position:absolute; top:-62px; left:50%; margin-left:-0.5px;}
.diagram dl dd:after {content:''; display:inline-block; background:#fff; border:6px solid #bfbfbf; width:12px; height:12px; border-radius:50px; position:absolute; top:-45px; left:50%; margin-left:-12px;}

/* 상세정보 */
#guk_con {padding:4% 0; background:#f6f6f6;}
#guk_con > div {position:relative; word-break:break-all; text-align:left; margin-top:4%;}
#guk_con > div + h4 {margin-top:4%;}
#guk_con > div > p {float:left; width:30%;}
#guk_con > .guk_intro > ul {margin-left:13px; border-left:1px solid #ddd; float:right; width:65%;}
#guk_con.v2 > .guk_intro > ul {float:none; width:auto;}
#guk_con > .guk_intro > ul > li {position:relative; padding:20px 0; padding-left:30px; min-height:21px;}
#guk_con > .guk_intro > ul > li:before {content:''; display:block; background-position:-201px -36px; position:absolute; top:25px; left:-13px; width:28px; height:28px;}
#guk_con > .guk_intro > ul > li:first-child {padding-top:0;}
#guk_con > .guk_intro > ul > li h5 {margin-bottom:1.5%;}
#guk_con > .guk_intro > ul > li:first-child h5, #guk_con > .guk_intro > ul > li:first-child:before {top:0px;}

/* 진행단계 */
.step_con {overflow:hidden; margin-top:2%;}
.step_con dl dt {background:#3ca7b7; color:#fff; font-size:16px; text-align:left;}
.step_con dl dt span {display:inline-block; background:#19626f; padding:3% 0px; margin-right:7px; width:45px; text-align:center;}
.step_con dl dd {margin-top:5px; background:#f5f5f5; border:1px solid #ccc; padding:10px; min-height:45px; text-align:center;}
.step_con dl dd img {width:100%; max-width:80px;}

/* 개설상담 */
.guk_sin {background:url(../DR0001IMG/content/pattern_bg.png) 0 0 repeat; text-align:center;}
.guk_sin > div {padding:4% 0; display:inline-block; position:relative; padding-left:150px;}
.guk_sin > div:before {content:''; background:url(../DR0001IMG/content/online_cs_img.png) 0 0 no-repeat; background-size:150px; position:absolute; bottom:0; left:0; width:150px; height:286px;}
.guk_sin > div h4 {font-size:36px !important;}
.guk_sin > div h4 span {display:block; font-size:24px; font-weight:300;}
.guk_sin > div .time {display:block; color:#777; font-size:13px;}
.guk_sin > div .tel_num {font-family:Arial, Helvetica, sans-serif; font-size:54px; font-weight:bold; color:#3ca7b7;}
.guk_sin .btns.main_bt {background:#3ba7b7; margin-top:3%;}

.learn_step {margin-bottom:4%;}
.learn_step > ul {text-align:left; margin-top:4%;}
.learn_step > ul > li {margin-top:4%;}
.learn_step > ul > li:first-child {margin-top:0;}
.learn_step > ul > li > div {position:relative; padding-left:55px; margin-bottom:3%;}
.learn_step > ul > li > div > span {position:absolute; top:-5px; left:0; background:#0071b2; color:#fff; width:50px; height:50px; line-height:50px; border-radius:50px; text-align:center;}
.learn_step > ul > li .imgs {text-align:center;}
.learn_step > ul > li .imgs img {border:1px solid #ddd; padding:7px;}
.learn_step ol {margin-left:25px;}
.learn_step > ul .img_list {margin-top:4%;}
.learn_step > ul .img_list > li img {height:auto !important;}


/* 플래너 추가 */
section {margin-top:5%;}
section:first-child {margin-top:0;}

.text-danger {color:#ea592c;}

.planner_wrap {max-width:1200px; margin:0 auto 5%;}
.planner_wrap h4 {font-size:16px; margin-bottom:10px;}
.planner_wrap .tb {border:1px solid #c3c4c5;}
.planner_wrap .tb th, .planner_wrap .tb td {padding:8px 5px; border-color:#c3c4c5;}

/* 달 력*/
.calendar_year_box button:after, .star_score {content:''; background-image:url(/DR0001IMG/icon/icons.png); background-size:300px; background-repeat:no-repeat;}
.calendar_year_box {font-size:21px; text-align:center; margin-bottom:3%; color:#111;}
.calendar_year_box .years {padding:0 10px;}
.calendar_year_box button {cursor:pointer; background:none; border:0; width:24px; height:32px; position:relative; text-indent:-9999px;}
.calendar_year_box button:after {content:''; display:block; width:14px; height:22px; position:absolute; top:50%; left:50%; margin-top:-11px; margin-left:-7px;}
.calendar_year_box button.prevyear:after {background-position:0 0;}
.calendar_year_box button.nextyear:after {background-position:-19px 0;}

/* 현황 */
.current_info {overflow:hidden; font-size:14px;}
.current_info > div {float:left; width:33.33%;}
.current_info > div:first-child {width:33.34%;}
.current_info .tb_row th {text-align:center;}

.hwresult_tb {padding-top:32px;}

.detail_info > ul {display:table; width:100%; border:1px solid #c3c4c5;}
.detail_info > ul > li {display:table-cell; width:50%; padding:25px 15px; text-align:center;}
.detail_info > ul > li .tit {font-size:16px; line-height:1.3; font-weight:500; border-bottom:1px dashed #ccc; padding-bottom:15px; margin-bottom:15px;}

/* 수행률 그래프 */
.circular_bar.v2 {padding-top:0;}
.circular_bar {text-align:center; padding-top:40px;}
.circle {position:relative; display:inline-block;}
.circle .percent_txt {position:absolute; top:30px; left:0; width:130px; vertical-align:middle; text-align:center; font-size:16px; color:#111;}
.circle .percent_txt .circle_strong {display:block; font-size:24px;}

/* homework */
.tb_head_info {overflow:hidden; font-size:14px; margin-top:4%; margin-bottom:10px;}
.tb_head_info .txts {float:left;}
.tb_head_info .info {float:right; margin-top:15px;}
.tb_head_info > h4 {float:left;}
.tb_head_info > p {float:right;}
.tb_head_info .info.v2 {margin-top:5px;}
.tb_head_info .info.v2 .cs_tel {display:inline-block; margin-bottom:10px;}
.tb_head_info .info .cs_info {font-size:16px;}
.tb_head_info .info .cs_info .tits {position:relative; padding-left:25px;}
.tb_head_info .info .cs_info .tits:before {content:''; background:url(../DR0001IMG/common/icon_tel.png) 0 0 no-repeat; background-size:22px; width:22px; height:22px; position:absolute; top:2px; left:0;}
.tb_head_info .info .cs_info .times {font-size:13px; color:#777; margin-right:10px;}
.tb_head_info .info .cs_info .buttons img {max-width:16px; margin-right:5px;}
.day_record h4 {color:#ea592c;}

/* 달력 테이블 */
.summarys_head {overflow:hidden; margin-bottom:10px;}
.summarys_head .summarys {float:left;}
.summarys_head .btn_group {float:right; margin-top:10px;}
.summarys_head .btn_group .buttons {height:26px; line-height:24px;}
.summarys {overflow:hidden; font-size:0; letter-spacing:-5px; padding-left:1px; margin:10px 0;}
.summarys > span {margin:5px 0; min-width:120px; margin-right:25px; position:relative; display:inline-block; font-size:12px; letter-spacing:0; vertical-align:top; *display:inline; zoom:1;}
.summarys > span img {max-width:18px;}
.tb_cal td {height:70px; padding:0 !important; vertical-align:top;}
.tb_cal td .cal_p01 {display:block; padding:3px 7px; background:#f9f9f9; border-bottom:1px solid #ccc; position:relative; padding-right:85px; box-sizing:border-box;}
.tb_cal td .cal_p01 .score_info {position:absolute; top:3px; right:5px; background:url(/DR0001IMG/icon/icon_medal_s15.png) 0 50% no-repeat; padding-left:20px; height:20px;}
.tb_cal td .bon {overflow:hidden; font-size:0; letter-spacing:-5px; padding:5px 3px; white-space:normal;}
.tb_cal td .bon > a {width:100%; min-width:73px; padding:3px 2px; position:relative; display:inline-block; font-size:12px; letter-spacing:0; vertical-align:top; *display:inline; zoom:1;}
.tb_cal td .bon > a:hover {background:#f7f7f7; border-radius:3px;}
.tb_cal td .bon > a img {max-width:16px;}
.tb_cal td.bg01 {background:#e4efff;}
.tb_cal td.bg02 {background:#fff7ea;}
.tb_cal td.bg03 {background:#feebff;}
.tb_cal td.bg04 {background:#fcd2d2;}
.tb_cal td.bg05 {background:#8f9bb2;} /* 모두 불합격 */
.tb_cal td.bg05 .bon > a {color:#fff;}
/* 별점평가 */
.star_score {display:inline-block; overflow:hidden; width:auto; vertical-align:top;}
.rating_star {position:relative; width:70px; height:13px; background-position:0 -25px;}
.rating_star_per {position:absolute; top:0; left:0; height:100%; background-position:0 -40px;}
.star_score_info {margin-top:15px;}
.star_score_info > ul > li {display:inline-block; margin-right:20px;}
.star_score_info > ul > li .score_info {display:inline;}
.star_score_info > ul > li .score_info .star_score {vertical-align:middle;}

.typeinfo {overflow:hidden; margin:20px 0; color:#333; font-size:13px;}
.typeinfo > p {display:inline-block; margin:3px 0; margin-right:17px; position:relative; padding-left:22px; min-height:18px;}
.typeinfo > p span {display:inline-block; width:17px; height:17px; border:1px solid rgba(0,0,0,0.2); position:absolute; top:0; left:0;}
.typeinfo > p.type01 span {background:#e4efff;}
.typeinfo > p.type02 span {background:#fff7ea;}
.typeinfo > p.type03 span {background:#feebff;}
.typeinfo > p.type04 span {background:#fcd2d2;}

/* 학습플래너 - 기간 조회하기 */
.search_select { display: flex; gap: 5px; flex-wrap: wrap; }
.view_calender { display: flex; margin-top: 10px; }
.view_calender > div > input { max-width: 95px; }
.view_calender > div > span { margin: 0 10px; }
#view_btn { height: 33px; margin-left: 10px; padding: 0 15px; line-height: 30px; color: #fff; background: #5a5b5b; }
.explain { font-size: 13px; }

@media screen and (max-width:980px) {
    form.justify-content-between { flex-direction: column; }
    .explain { margin-bottom: 10px;}
}

@media screen and (max-width:480px) {
    .search_select select { width: 48%; }
    .view_calender { align-items: center; }
    .view_calender > div { max-width: 270px; }
    #view_btn { width: 20%; margin: 10px 0; margin-left: 10px; padding: 0 10px;}
    .view_calender > div > input { max-width: 90px; }
    .view_calender > div > span { margin: 0 3px; }
}
/* // 학습플래너 - 기간 조회하기 */

@media screen and (max-width:1220px) {

}

@media screen and (max-width:1080px) {
.ds_cont {font-size:16px;}
.container .ds_cont h4 {font-size:36px;}
.container .ds_cont h4 + p {font-size:24px;}
.container .ds_cont h5 {font-size:18px;}
}

@media screen and (max-width:980px) {
/* layout */
.container {min-height:100px;}
#lcontent {display:none;}
#rcontent {float:none; width:auto;}
.con {margin-top:6%;}

/* cols */
.col_s04 > li {width:32%; margin-left:2% !important;}
.col_s04 > li:nth-child(3n+1) {margin-left:0 !important;}

/* 3depth */
.depth {display:block;}

/* 특징 */
.diagram > div:after {top:147px; height:5px;}
.diagram dl {width:26%; margin-left:5.5%;}
.diagram dl dt {border-width:7px; width:105px; height:105px; line-height:95px; font-size:18px;}
.diagram dl dd {margin-top:50px;}
.diagram dl dd:before {height:51px; top:-51px;}
.diagram dl dd:after {border-width:4px; width:8px; height:8px; top:-35px; margin-left:-8px;}

/* 상세정보 */
#guk_con > div {padding-left:90px;}
#guk_con > .guk_intro:before {background-position:0 -378px; width:75px; height:64px;}
#guk_con > .mthome_comment:before {background-position:-87px -378px; width:65px; height:64px;}
#guk_con > .guk_intro > ul > li {padding:20px 0; padding-left:20px;}
#guk_con > .guk_intro * {word-break:break-all;}
#guk_con > .guk_intro > ul > li:before {background-position:-201px -70px; top:22px; left:-10px; width:21px; height:21px;}
#guk_con > .guk_intro > ul > li:first-child:before {top:0px;}

/* 현황 */
.current_info > div {float:none; width:auto !important;}
/* 수행률 그래프 */
.circular_bar {padding:20px 0 !important;}
.hwresult_tb {padding-top:0;}	
}

@media screen and (max-width:768px) {
html, body, input, select {font-size:13px;}
/* 타이틀크기 */
.container h3 {font-size:27px;}
.container h3 + p {font-size:14px;}
.container h4 {font-size:16px;}
.container h4.stit {padding-left:20px;}
.container h4.stit:before {top:6px; width:8px; height:8px; border-width:4px;}
.container h5 {font-size:14px;}

.ds_cont {font-size:13px;}
.container .ds_cont h4 {font-size:24px;}
.container .ds_cont h4 + p {font-size:16px;}

.f16 {font-size:14px;}

/* 컨텐츠 간격 */
.section {margin-top:8%;}
/* cols */
.col_s02 > div, .col_s02 > li {float:none; width:auto; margin-top:8%; margin-left:0;}
.col_s04 > li, .col_s04 > li:nth-child(3n+1) {width:49%; margin-left:2% !important;}
.col_s04 > li:nth-child(odd) {margin-left:0 !important;}

/* sub_visual */
#sub_visual {height:230px;}
#sub_visual.learn_vis {background-position:30% 100%; background-size:1050px;}
#sub_visual.learnstep_vis {background-position:30% 100%; background-size:1050px;}
#sub_visual.mem_vis {background-position:55% 100%; background-size:1050px;}
#sub_visual.join_vis {background-position:35% 100%; background-size:1050px;}

/* 학습플랜 */
.learn_list > ul > li {width:48%;}

/* 독해의 힘 */
.define {text-align:center;}
.define .fl, .define .fr {float:none; width:auto;}
.define .fr {margin-top:4%;}

/* 진행단계 */
.step_con dl dt {font-size:14px;}
.step_con dl dt span {padding:1.5% 0px;}
.step_con dl dd {padding:2px 10px;}
.step_con dl dd img {max-width:60px;}

/* 개설상담 */
.guk_sin > div {padding-left:90px;}
.guk_sin > div:before {background-size:90px; width:90px; height:172px;}
.guk_sin > div h4 {font-size:24px !important;}
.guk_sin > div h4 span {font-size:18px;}
.guk_sin > div .tel_num {font-size:36px;}
.learn_step > ul > li > div {padding-left:35px;}
.learn_step > ul > li > div > span {top:0; width:30px; height:30px; line-height:28px;}
}

@media screen and (max-width:640px) {
/* 상세정보 */
#guk_con > div {padding-left:0;}
#guk_con > div:before {position:relative !important; margin:0 auto; margin-bottom:10px;}
#guk_con > div > p, #guk_con > .guk_intro > ul {float:none; width:auto;}
#guk_con > div > p {width:50%; max-width:200px; margin:0 auto 4%;}
}

@media screen and (max-width:480px) {
/* 타이틀크기 */
.container h3 {font-size:24px;}

/* cols */
.col_s03 > div, .col_s03 > li {float:none; width:auto !important; margin-top:8%; margin-left:0;}
.col_s04 > li, .col_s04 > li:nth-child(3n+1) {width:100%; margin-left:0% !important;}

/* 학습플랜 */
.learn_list > ul > li {float:none; width:auto;}
.learn_list > ul > li .info {min-height:10px; max-height:none;}

/* 특징 */
.diagram > p {display:none;}
.diagram > div {display:block;}
.diagram > div:after {display:none;}
.diagram dl {width:auto; margin-left:0; margin-top:15px; float:none;}
.diagram dl:first-child {margin-top:0;}
.diagram dl dd {margin:0 auto; margin-top:30px; max-width:200px; padding:7px;}
.diagram dl dd:before {height:31px; top:-31px;}
.diagram dl dd:after {top:-25px;}

/* 진행단계 */
.step_con li {background:url(../DR0001IMG/content/icon_step_arrow2.png) 50% 100% no-repeat; background-size:20px; padding-bottom:20px;}
.step_con li.step06 {background:none;}
.step_con dl dd {min-height:10px;}

/* 개설상담 */
.guk_sin > div {padding-left:60px;}
.guk_sin > div:before {background-size:60px; width:60px; height:114px;}
.guk_sin > div .tel_num {font-size:30px;}

.typeinfo > p {margin-right:0; min-width:130px;}
}