@charset "utf-8";
/* com2zoa design  KYJ 20210524 */

/* Layout */
#subpage .basics_font{font-size: 1.077em; font-weight: 400 /*기준폰트 14px*/}
/*글이 많은페이지의 경우 모바일에서 해당 페이지 고유클래스 하위에 기준폰트 1.000em(13px)으로 변경*/
#sub_left {display: none}
#subpage {min-height: 300px; line-height:150%; margin:0 5px 50px; font-weight:300; font-family:NSK}
.clear_fix:after {content: ""; display: block; clear: both}
.qmu_popup{display: none}
.subvisual .visual_item p.vbg_txt{height:0; width:0; line-height:0; font-size:0;text-indent:-9999999px}
.subvisual .visual_item > a{width:100%; height:411px; position: relative; display:block; box-sizing:border-box}

/*Subtop */
#subtop {position:relative; padding-top:33px; margin-bottom:30px; border-bottom:1px solid #cbcbcb}
#subtop h3{height:25px; width: auto; font-size:1.571em; text-align:left; font-weight:600; text-align: center}

/* Guide */
#sub_guide{z-index:500}
#sub_guide .btn_home {display: none}
#sub_guide .submn {display: none}
#sub_guide .guide_wrap {position: relative}

/* Tab01 */
.tabnavi01{margin:0 10px 10px}
.tabnavi01 ul{text-align: center}
.tabnavi01 ul li{position: relative; display: inline-block;margin:0 8px 5px 0; border-radius: 50px}
.tabnavi01 ul li a{display: block; height:auto; line-height:140%; padding: 10px 60px 10px 15px; border-radius:50px;  font-weight:400; font-size: 14px; background:url(../images/sub/btn_tab_off.png) no-repeat right center #ebeced; color:#2e2e2e; transition: all .3s}
.tabnavi01 ul li.on a, .tabnavi01 ul li a:hover{background:url(../images/sub/btn_tab_on.png) no-repeat right center #ff86bf; color:#fff}

/* Tab02 */
.tabnavi02{margin:0 10px 10px}
.tabnavi02 ul {padding:0 30px 10px; border-radius:10px; border: 1px solid #ddd; background: #fff}
.tabnavi02 ul:after {content:""; clear:both; display:block; height:0; font-size:0; line-height:0}
.tabnavi02 ul li { float: left; width: 20%; height: 13px; padding: 10px 0; font-size:14px;  font-weight:300}
.tabnavi02 ul li a {display: block; height: 21px; line-height: 21px; padding-left: 25px; background: url(../images/sub/blt_othertab.png) left 4px no-repeat ;font-size: 1.077em; color: #595959; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tabnavi02 ul li.on a, .tabnavi02 ul li:hover a {height: 21px; line-height: 21px; background: url(../images/sub/blt_othertab_a.png) left 4px  no-repeat; color:#ff71b4; font-weight: 500}

/* boardTab */
.boardTab{margin:0 10px 10px}
.boardTab ul {padding:0 30px 10px; border-radius:10px; border: 1px solid #ddd; background: #fff}
.boardTab ul:after {content:""; clear:both; display:block; height:0; font-size:0; line-height:0}
.boardTab ul li { float: left; width: 20%; height: 13px; padding: 10px 0; font-size:14px;  font-weight:300}
.boardTab ul li a {display: block; height: 21px; line-height: 21px; padding-left: 25px; background: url(../images/sub/blt_othertab.png) left 4px no-repeat ;font-size: 1.077em; color: #595959; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.boardTab ul li.on a, .boardTab ul li:hover a {height: 21px; line-height: 21px; background: url(../images/sub/blt_othertab_a.png) left 4px  no-repeat; color:#ff71b4; font-weight: 500}

/******************************서브컨텐츠 영역**************************************/
/* -------------------컨텐츠 공통------------------- */
/****페이지 준비중****/
.sub_loding{min-height: 450px; background: url(../images/sub/page_loding.gif) no-repeat center center}
/****Blind****/
.blind {font-size:0; overflow:hidden; text-indent:-9999999px; height:0; width:0; line-height:0} 

/****TIT****/
h4.sub_tit4 {line-height:140%; padding:5px 0 5px 30px; margin: 5px 0; background:url(../images/sub/subtit4.gif) no-repeat left 3px; font-size: 1.214em; font-weight:500; font-family:CGC}
h5.sub_tit5 {line-height:140%; padding:0 0 0 20px; margin: 10px 0 0 8px; background:url(../images/sub/subtit5.gif) no-repeat left 5px; font-size: 1.143em; font-weight:500; font-family:CGC}

/****Table****/
.mgb_table{margin:15px 0 25px}
.mgb_table table{width: 100%}
.mgb_table .txtleft {text-align: left; padding-left: 10px}
/*모바일 아래에서 표 내용이 너무많을때 사이즈 고정후 스크롤 하기 테이블 감싸고 있는 div한테 table_scroll 클래스 주면됨*/	
.table_scroll{overflow-x: auto; position: relative}
.table_scroll .mb_txt{line-height:0; font-size:0; text-indent:-9999999px}
.table_scroll table {min-width:450px}
/*표_색상:회색(기본) - !!!!!!!!!!!!!table_scroll이 적용 안되는 테이블은 각페이지 고유 클래스 하위 mgb_table에 overflow: hidden 줘야함*/
.mgb_table {width:100%;  border-collapse:collapse; table-layout:auto; background:#f1f1f1; border-radius: 10px 10px 0 0}
.mgb_table thead th { line-height:150%; padding:8px 3px;  border:1px solid #fff; border-top:1px solid #cacaca;  vertical-align:middle;text-align:center; font-weight:400; font-size: 15px; color:#fff}
.mgb_table thead th:first-child {border-left:1px solid #cacaca}
.mgb_table thead th:last-child {border-right:1px solid #cacaca}
.mgb_table tbody th {line-height:150%; background:#f7f7f7; padding:8px 3px; border:1px solid #cacaca;  text-align:center; font-weight:500; vertical-align:middle; color:#30302e}
.mgb_table tbody td {line-height:150%; background:#fff; padding:8px 3px; border:1px solid #cacaca;text-align:center; vertical-align:middle; color:#4d4d4d} 
/*표_색상:초록*/
.mgb_table .table_st01 {background:#566578}

/*col class 선언영역*/
.wdtfix{width:40px}
.wdt5{width: 5%}
.wdt9{width: 9%}
.wdt10{width: 10%}
.wdt15{width: 15%}
.wdt20{width: 20%}
.wdt25{width: 25%}
.wdt30{width: 30%}
.wdt33{width: 33.3%}
.wdt40{width: 40%}
.wdt50{width: 50%}
.wdt60{width: 60%}
.wdt70{width: 70%}
.wdt80{width: 80%}
.wdt90{width: 90%}
.wdtauto{width: auto}

/* -------------------컨텐츠 스타일 시작 -------------------*/

/*폰트에서 span color사용시 색지정
(span에 단독으로 스타일을 주면 모든 span 태그에 font-weight가 지정되므로 bold는 각각 지정함)_더 두껍게 할 시에는 고유클래스 아래에 지정  */
span.col_r{font-weight: 500; color:#ff1833}
span.col_g{font-weight: 500; color:#76a84e}
span.col_b{font-weight: 500; color:#2273e1}
span.col_o{font-weight: 500; color: #ff7b11}
span.col_p{font-weight: 500; color: #ae4ce6}
span.col_pk{font-weight: 500; color: #f86b96}
span.col_bb{font-weight: 500; color:#202020}
/*폰트에서 bg span color사용시 색지정*/
span.bgcol_pk{background: #ff75a2; color:#fff}
span.bgcol_g{background: #9ccc5e; color:#fff}
span.bgcol_o{background: #ff9e56; color:#fff}
span.bgcol_n{background: #4e3333; color:#fff}

/*공통타이틀(인사말 제외)*/
.contop_titbox{max-width:470px; margin: 0 auto 20px; text-align: center}
.contop_titbox .top_txt{position: relative; padding-bottom: 10px; border-bottom:1px solid #cbcbcb}
.contop_titbox .top_txt::after, .contop_titbox .top_txt::before{content: ""; display: block; clear: both; position:absolute; bottom:-6px; width:10px; height:10px; background: url(../images/sub/dot_toptit.gif) no-repeat left top}
.contop_titbox .top_txt::after{left:0}
.contop_titbox .top_txt::before{right:0}
.contop_titbox .top_tit{display: inline-block; padding:15px 65px; background:url(../images/sub/toptit_line.gif) repeat-x left bottom; font-size:1.214em; font-weight: 500; color:#4c4c4c; font-family:CGC}

/*인사말*/
.mgb_greet{text-align: center}
.mgb_greet .gt_topbox{max-width:506px; margin:0 auto 50px}
.mgb_greet .top_txt, .mgb_greet .gt_tit{position: relative; border-bottom:1px solid #cbcbcb}
.mgb_greet .top_txt{padding-bottom: 18px; margin-bottom: 15px}
.mgb_greet .gt_tit{padding-bottom: 15px}
.mgb_greet .top_txt::after, .mgb_greet .gt_tit::after, .mgb_greet .top_txt::before, .mgb_greet .gt_tit::before{content: ""; display: block; clear: both; position:absolute; bottom:-8px; width:14px; height:14px; background: url(../images/sub/dot_gttop.gif) no-repeat left top}
.mgb_greet .top_txt::after, .mgb_greet .gt_tit::after{left:0}
.mgb_greet .top_txt::before, .mgb_greet .gt_tit::before{right:0}
.mgb_greet .gt_tb{font-size:1.071em}
.mgb_greet .gt_tb > p{margin-bottom:15px; line-height: 140%}
.mgb_greet .gt_tb .gt_lst{position: relative; max-width: 738px; padding: 15px; margin: 0 auto 20px; border-radius: 10px; background:#fff7e6; border-bottom: 3px solid #ffe270}
.mgb_greet .gt_tb .gt_lst::after{content: ""; display: block; clear: both; position:absolute; right: 15px; bottom:0; width:210px; height:135px; background: url(../images/sub/gt_bg.png) no-repeat left top}
.mgb_greet .gt_lst > li{line-height: 150%}
.mgb_greet .gt_lst > li > span{padding:0 8px; border-radius: 50px; font-size:0.867em}
.mgb_greet span.col_b{font-weight: 600}
.mgb_greet .gt_tb > p.gt_sign{font-weight:500}
.mgb_greet .gt_tb > p.gt_sign span{font-size:1.429em}

/*찾아오시는 길*/
.mgb_map .map_add{margin:10px 0 15px; text-align: center}
.mgb_map .map_add span{padding: 5px 0 5px 30px; background:url(../images/sub/map_icon.gif) no-repeat left top; font-weight: 500; font-size: 1.214em; font-family:CGC}
.mgb_map .map_area{overflow: hidden; border-radius: 10px; box-shadow:3px 3px 4px rgba(0, 0, 0, 0.15)}
.map_area .map_txt{padding: 15px 5px; font-weight:500; font-size: 15px; line-height: 140%; background: #364558; text-align: center}
.map_area .map_txt br{display: none}
.map_area .map_txt p{display:inline-block; padding:2px 0 4px 30px; background:url(../images/sub/map_info.png) no-repeat left top; color:#fff}
.map_area .map_txt p span{color:#f7ff27; font-size:16px; font-weight:600}
.map_area {width:100%!important; margin:0}
.map_area .root_daum_roughmap {width:100%!important; padding:0}
.map_area .root_daum_roughmap .wrap_map {overflow:hidden; height:332px !important}
.mgb_map .map_tb{padding: 10px 0; border-bottom: 1px solid #cbcbcb}
.map_numbox ul li p a{position: relative; display: block; font-weight: 400}
.map_tb .map_numbox{margin: 15px 0 20px}
.map_tb .map_numbox ul > li{float: left; width: 33.3%}
.map_tb .map_numbox ul > li > p{position: relative; display:block; width: 95%; height: 37px; line-height: 37px; margin: 0 auto; box-sizing: border-box; font-size:1.077em}
.map_numbox ul li p a{position: relative; display: block;border-radius: 50px; font-weight: 400; color:#fff}
.map_numbox ul li span{display: inline-block; text-align: center; box-sizing: border-box}
.map_numbox ul li span.tit{width:35%; padding-left:26px; border-radius:50px 0 0 50px}
.map_numbox ul li span.numgo{width: 65%}
.map_numbox ul li.num_tel a{background:#3f7d26}
.map_numbox ul li.num_tel a span.tit{ background:url(../images/sub/map_numico_v1.png) no-repeat 3px center #57a139}
.map_numbox ul li.num_fax a{background:#2a6299}
.map_numbox ul li.num_fax a span.tit{ background:url(../images/sub/map_numico_v2.png) no-repeat 3px center #4882bc}
.map_numbox ul li.num_mail a{background:#92419f}
.map_numbox ul li.num_mail a span.tit{ background:url(../images/sub/map_numico_v3.png) no-repeat 3px center #b360c0}
.map_tb .map_busbox{margin: 0 8px}
.map_busbox dl{padding: 5px 5px 5px 10px; border-radius: 5px; background: #f0f0f0}
.map_busbox dl dt{position: relative; float: left; padding: 7px 25px 7px 60px; margin-right: 13px; border-radius: 5px; background: #364558; color:#fff; font-family:CGC}
.map_busbox dl dt::after{content: ""; display: block; clear: both; position:absolute; left:-5px; bottom:-5px; width:44px; height:50px; background: url(../images/sub/map_bus.png) no-repeat left top}
.map_busbox dl dd{padding: 7px 0; font-weight: 500}
.map_busbox dl dd br{display: none}

/*상담절차 및 상담시간*/
/**상담절차**/
.mgb_counseling .counsel_step{margin:20px 0 40px}
.counsel_step ul{position: relative}
.counsel_step ul::after{content: ""; display: block; clear: both; position:absolute; left:50%; bottom:-70px; width:80%; height:6px; margin-left: -320px; background: #d9d9d9}
.counsel_step ul li{position: relative; float: left; width: 25%; z-index: 1}
.counsel_step ul li::after{content: ""; display: block; clear: both; position:absolute; right:-18px; top:52px; width:30px; height:30px; background: url(../images/sub/step_arw.png) no-repeat left top}
.mgb_counseling .counsel_step ul li:last-child::after{display: none}
.counsel_step ul li p.steplst{width: 80%; margin: 0 auto; text-align: center}
.counsel_step ul li span{display: block; margin: 15px 0 0; font-size: 1.143em; font-weight: 500; font-family:CGC}
/**상담시간**/
.counsel_time ul li{float: left; width: 50%}
.counsel_time dl{width: 95%; margin: 0 auto 10px; text-align: center; font-family:CGC}
.counsel_time dl dt{float: left; width: 40%; padding: 10px 5px; background-image:url(../images/sub/time_icon.png); background-position:10px center;  background-color:  #566578; background-repeat: no-repeat; border-radius: 10px; color:#fff; box-sizing: border-box; font-weight:600}
.counsel_time dl dt span{padding-left:20px}
.counsel_time dl dd{position: relative; float: right; width: 57%; padding: 9px 5px; background: #fff; border:1px solid #d1d1d1; border-radius: 10px; box-sizing: border-box; font-weight: 500}
.counsel_time dl dd::after{content: ""; display: block; clear: both; position:absolute; left:-28px; top:14px; width:28px; height:11px;background: url(../images/sub/time_line.png) no-repeat left top}
.counsel_time .bgcol2 dt{background-color:#6180a8}

/*개인 및 집단, 부부상담*/
.mgb_counslst .contop_titbox{margin-bottom: 40px}
.mgb_counslst h4.sub_tit4{margin-left: 240px}
.mgb_counslst .lst_tb{position: relative; min-height: 63px; padding: 20px; margin-bottom: 18px; border-radius: 10px; border: 1px solid #c1c1c1}
.mgb_counslst .lst_img{position: absolute; top:-38px; left:13px; overflow: hidden;  width:206px; height: 125px; border-radius: 10px; box-shadow:3px 3px 4px rgba(0, 0, 0, 0.15)}
.mgb_counslst .lst_img img{width:206px; height: 125px}
.mgb_counslst .lst_tb .lst_txt{margin-left:220px}
.mgb_counslst .lst_tb .lst_txt.line_type2{margin-top: 10px}

/*바우처 및 e튼튼이 카드*/
.mgb_boucher .contop_titbox .top_tit{font-size:15px; line-height:140%}
.mgb_boucher .boucher_tb{padding: 10px; margin: 10px 0 18px; border-radius: 10px; border: 1px solid #c1c1c1}
.boucher_tb > ul {padding: 10px 15px; margin-bottom: 10px; border-radius: 10px; background: #efefef}
.boucher_tb > ul > li{padding-left: 10px; margin-bottom: 5px; background:url(../images/sub/txt_blt.gif) no-repeat left 8px; line-height: 130%}
.boucher_tb > ul > li:last-child{margin-bottom: 0}
.boucher_tb .boucher_help{min-height: 30px; padding:3px 0 0 30px; margin: 5px 5px 0; background:url(../images/sub/ico_help.gif) no-repeat left 3px}
.boucher_tb.bgbox{position: relative}
.boucher_tb.bgbox::after{content: ""; display: block; clear: both; position:absolute; right:10px; top:-141px; width:203px; height:140px; background: url(../images/sub/boucher_bg.gif) no-repeat left top}

/*종합심리검사 ＆ 다원재능검사*/
.mgb_growthtest .test_wrap{width: 760px; margin: 60px auto}
.mgb_growthtest .test_box{position: relative; width: 48%; min-height: 319px; border-radius:10px; border:1px solid #c1c1c1; border-top:10px solid #da89f2}
.mgb_growthtest .testlst01:after, .mgb_growthtest .testlst02::after{content: ""; display: block; clear: both; position:absolute; left:50%; top:-50px; width:92px; height:92px; margin-left: -45px}
.mgb_growthtest .testlst01::after{background:url(../images/sub/testlst_ico01.png) no-repeat left top}
.mgb_growthtest .testlst02::after{background:url(../images/sub/testlst_ico02.png) no-repeat left top}
.mgb_growthtest .testlst01::before, .mgb_growthtest .testlst02::before{content: ""; display: block; clear: both; position:absolute; right:15px; bottom:-1px; width:52px; height:52px; margin-left: 88px}
.mgb_growthtest .testlst01::before{background:url(../images/sub/testlst_btbg01.png) no-repeat left top}
.mgb_growthtest .testlst02::before{background:url(../images/sub/testlst_btbg02.png) no-repeat left top}
.mgb_growthtest .testlst01{float: left}
.mgb_growthtest .testlst02{float: right; border-top-color: #ff869d}
.mgb_growthtest .test_box .test_tit{padding: 60px 15px 100px 15px; background:url(../images/sub/testlst_bg01.gif) no-repeat center bottom; text-align: center; font-size: 1.143em; font-weight: 500; font-family:CGC}
.mgb_growthtest .testlst02 .test_tit{background:url(../images/sub/testlst_bg02.gif) no-repeat center bottom}
.mgb_growthtest .test_box > ul{padding: 15px}
.mgb_growthtest .test_box > ul > li{padding-left: 10px; margin-bottom: 5px; background:url(../images/sub/txt_blt.gif) no-repeat left 8px; line-height: 130%}
.mgb_growthtest .test_box > ul > li:last-child{margin-bottom: 0}

/*개인정보 처리방침*/
.mgb_protect .pro_top{overflow: hidden; position: relative; margin-bottom:30px; border-radius: 10px; border: 1px solid #c1c1c1; background:#255d80}
.mgb_protect .pro_top > p.protop_tit{position: absolute; top:50%; left:0; width: 100px; margin-top: -50px; text-align: center; color:#fff}
.mgb_protect .pro_top > p.protop_tit span{display: block}
.mgb_protect .pro_top > ul{padding: 15px; margin: 0 0 0 100px; background: #fff}
.mgb_protect .pro_top > ul li{line-height: 130%; margin-bottom:7px}
.mgb_protect .pro_top > ul li:last-child{margin-bottom: 0}
.mgb_protect h4.prolst_tit{margin:5px 0 10px; font-size:1.071em; font-family:CGC}
.mgb_protect h4.prolst_tit span{padding: 2px 8px; margin-right: 5px; border-radius: 50px; background: #9b9b9b; color:#fff; font-size:0.875em; font-weight:500}
.mgb_protect .pro_tb{padding: 15px; border-radius: 10px; margin-bottom: 15px; border: 1px solid #c1c1c1}
.mgb_protect .pro_tb > ul {margin-top: 10px; padding: 15px; border-radius: 10px; background: #f2f2f2}
.mgb_protect .pro_tb > ul > li {padding-left: 15px; margin-bottom: 5px; line-height: 130%; background:url(../images/sub/blt_prolst.gif) no-repeat left 7px}
.mgb_protect .pro_tb > ul > li:last-child{margin-bottom: 0}
.mgb_protect .pro_tb > ul > li span{margin-right:5px; font-weight: 500}

/*사이트맵*/
.mgb_sitemap{font-family:CGC}
.mgb_sitemap .sitemap_wrap > ul > li{float: left; width: 25%; margin-bottom: 20px}
.sitemap_wrap .smlst {width: 85%; min-height: 250px; margin: 0 auto}
.sitemap_wrap .smlst .smtit{padding:15px 0; margin-bottom: 13px; background:url(../images/sub/toptit_line.gif) repeat-x left bottom; font-size:1.143em; font-weight: 500; color:#000;  text-align: center}
.sitemap_wrap .smlst li.smn{margin-bottom: 5px;}
.sitemap_wrap .smlst li.smn > a{display: block; padding: 7px; border-radius: 50px; background: #e3e3e3; text-align: center; font-weight: 500; color:#000; transition: all .4s}
.sitemap_wrap .smlst li.smn > a:hover{background: #006dd3; color:#fff}
.sitemap_wrap .sm_third{padding:8px; margin:5px 0 10px; border-radius:10px; background:#fff; border:1px solid #dadada}
.sitemap_wrap .sm_third li a{display:block; padding:5px;border-bottom:1px solid #dadada; text-align:center}
.sitemap_wrap .sm_third li a:hover{color:#ffa943; font-weight:500}
.sitemap_wrap .smn:hover a.smntit{background:#006dd3; color:#fff}
.sitemap_wrap .sm_third li:first-child a{padding-top:0}
.sitemap_wrap .sm_third li:last-child a{padding-bottom:0; border-bottom:none}

/*심리검사*/
.mgb_psytest .psy_tb{position: relative; overflow: hidden; padding: 10px; margin: 10px 0 18px; border-radius: 10px; border: 1px solid #c1c1c1}
.mgb_psytest .psy_tb::after{content: ""; display: block; clear: both; position:absolute; right:0; bottom:0; width:211px}
.mgb_psytest .psy_tb.psybg01::after{height: 157px; background:url(../images/sub/psy_bg01.png) no-repeat right bottom}
.mgb_psytest .psy_tb.psybg02::after{height: 138px; background:url(../images/sub/psy_bg02.png) no-repeat right bottom}
.mgb_psytest .psy_tb.psybg03::after{height: 122px; background:url(../images/sub/psy_bg03.png) no-repeat right bottom}
.psy_tb > p.psy_info{margin: 5px 170px 10px 5px}
.psy_tb > ul {padding: 10px 15px; border-radius: 10px; background: #efefef}
.psy_tb > ul li{margin-bottom: 8px}
.psy_tb > ul li:last-child{margin-bottom:0}
.psy_tb > ul li span.lst_tit{display: inline-block; min-width: 80px; padding: 3px 0; margin-right: 10px; border-radius: 50px; background: #566578;  color:#fff; text-align: center; font-family:CGC; font-weight: 500; font-size: 13px}
.psy_tb > ul li:first-child span.lst_tit{background:#ff5a4e}



/* MOBILE LAYOUT */
@media only screen and (max-width:1024px) {
/* Mobile Menu */
.header_top .qmu_search{right:45px}
.header_top .qmu_site{right:8px}

/* Visual*/
.subvisual .visual_wrap {position: relative;  margin: 0 auto}
.subvisual .visual_item{width:auto; height:236px; margin: 0 auto}
.subvisual .item1{background:url(../images/sub/sub_v1_m.jpg) no-repeat bottom center}
.subvisual .item2{background:url(../images/sub/sub_v2_m.jpg) no-repeat bottom center}
.subvisual .item3{background:url(../images/sub/sub_v3_m.jpg) no-repeat bottom center}
.subvisual .item4{background:url(../images/sub/sub_v4_m.jpg) no-repeat bottom center}
/* .subvisual .slick-dots{position: absolute; top:208px; left:10px; margin-left:0} */
.subvisual .btn_visual{position: absolute; top:204px; left:87px;  margin:0}
.subvisual .visual_item > a{height:235px}
/*비주얼 블릿*/
.slick-dots {position: absolute; left:8px; bottom:5px; margin:0 0 10px 0}

/* Layout */
#subright{position: relative}
#subtop{width:100%; height:auto; margin-bottom:55px; padding-top: 0}
#subtop h3{position: relative; height: auto; font-size: 18px; padding: 15px 0}
#subtop h3::after{content: ""; display: block; clear: both; position: absolute; bottom:-3px; right:10px; width:69px; height:33px; z-index:20}
#subpage {margin:10px 10px 15px}

/* MB guide */
#sub_guide {position: absolute; left: 0; top: 46px; width: 100%; font-size: 14px; z-index:15}
#sub_guide .guide_wrap {padding: 4px 4px 4px 38px; background-color: #255d80}
#sub_guide .btn_home {display: block; position: absolute; left: 0; top: 0}
#sub_guide .btn_home a {display: block; width: 38px; height: 39px; line-height: 44px; background:url('../images/sub/btn_mb_home.gif') no-repeat 50% 50% ; border-radius: 5px; text-indent:-9999999px}
#sub_guide .btn_home span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
#sub_guide .navi_area{border-radius: 10px}
#sub_guide .navi_area>ul>li{float: left; width: 33.3%;  background:url('../images/sub/btn_mb_arr.gif') no-repeat right 50% #fff; position: relative}
#sub_guide .navi_area>ul>li.nav01{border-radius: 5px 0 0 5px}
#sub_guide .navi_area>ul>li:last-child{border-radius: 0 5px 5px 0}
#sub_guide .navi_area>ul>li>a {display: block; height: 31px; line-height: 31px; padding:0 20px 0 5px; font-weight: 500; border-left: 1px solid #255d80; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#404040}
#sub_guide .navi_area>ul>li.nav01 > a{border-left: none}
#sub_guide .navi_area>ul>li.nav_home{display: none}
#sub_guide .submn {overflow: hidden; position: absolute; left: 0; top: 100%; width: 100%;  margin: 0 auto; background: #ffc446;border-radius: 10px; z-index: 150}
#sub_guide .submn ul {padding: 0 6px}
#sub_guide .submn li {padding: 8px 0 8px 5px; border-bottom: 1px solid #fff; z-index: 150}
#sub_guide .submn li:last-child{border:none}
#sub_guide .submn li a {line-height: 160%; color: #404040; font-weight: 500}
#sub_guide .submn li a:hover{color:#000; font-weight: 600}

/* Fontsize */
.sub_tbtn {display:none}

/* Tab01 */
.tabnavi01 ul li{margin-bottom:10px}
.tabnavi01 ul li a{ padding:8px 45px 9px 10px; font-size: 13px}
.tabnavi01 ul li a::after {top:-5px; right: 5px; width:33px; height: 40px;background:url(../images/sub/btn_tab_off_m.png) no-repeat left top}
.tabnavi01 ul li.on a::after, .tabnavi01 ul li:hover a::after {background:url(../images/sub/btn_tab_on_m.png) no-repeat left top}

/* Tab02 */
.tabnavi02 ul {padding:0 20px 10px}
.tabnavi02 ul li {width: 33.3%}
.tabnavi02 ul li a{font-size:14px}

/* boardTab */
.boardTab ul {padding:0 20px 10px}
.boardTab ul li {width: 33.3%}
.boardTab ul li a{font-size:14px}

/*Btn_top*/
#quickmenu{position: absolute; top:140px; right:10px; z-index: 100}
#quickmenu a img{display: none}
#quickmenu a{display: block; width: 29px; height: 43px; background: url(../images/sub/btn_top_m.png) no-repeat center center}
#quickmenu a span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
#quickmenu .btn_top{display: block}

/******************************서브컨텐츠 영역**************************************/

/*#subpage .basics_font{font-size:1em 기준폰트 13px}*/
/****페이지 준비중****/
.sub_loding{background: url(../images/sub/page_loding_m.gif) no-repeat center center}

/****TIT****/
h4.sub_tit4 {font-size:1.071em}
h5.sub_tit5 {font-size:1.000em}

/*MB에서 br 필요 없을때 선언*/
br.mbbr_none{display: none}
/*MB에서 필요 없을때 선언*/
.mb_none{display: none}

/* -------------------컨텐츠 스타일 시작 -------------------*/

/*공통타이틀(인사말 제외)*/
.contop_titbox .top_tit{width:100%; padding:15px 0; font-size:1.071em}

/*바우처 및 e튼튼이 카드*/
.boucher_tb.bgbox::after{display: none}
	
/*개인정보 처리방침*/
.mgb_protect h4.prolst_tit{font-size:1.000em}

/*심리검사*/
.mgb_psytest .psy_tb::after{display: none}
.psy_tb > p.psy_info{margin: 5px 5px 10px 5px}

}

/* PC LAYOUT */
@media only screen and (min-width:1025px) {
/* Layout */
/* .skip_navi a:focus, .skip_navi a:active{margin-top:0} */
#subcontainer{position: relative; z-index: 1}
.subconwrap{position: relative}
.subconbox { width: 1200px; margin: 0 auto}
#sub_left {position: relative; display: block; float: left; margin:0 0 50px 0}
#subright { position: relative; float: right; width: 895px; margin-left: 15px}

/* Visual */
.subvisual{z-index: 1}
.subvisual .visual_wrap {position: relative; width: 100%; margin: 0 auto}
.subvisual .visual_item {width:auto; height:413px}
.subvisual .item1 {background:url(../images/sub/sub_v1_p_n.jpg) no-repeat center top}
.subvisual .item2 {background:url(../images/sub/sub_v2_p.jpg) no-repeat center top}
.subvisual .item3 {background:url(../images/sub/sub_v3_p.jpg) no-repeat center top}
.subvisual .item4 {background:url(../images/sub/sub_v4_p.jpg) no-repeat center top}
/* .visual_wrap .slick-dots { margin:0 0 -190px -605px} */
.visual_wrap .btn_visual{margin:0 0 -192px -515px}
/*비주얼 블릿*/
.slick-dots{bottom:20px; margin:0 0 0 -605px}


/* Subleft */
#sub_left .left_tit h2 {width: 290px; margin:23px 0; font-size:1.923em; font-weight: 600; color:#000; text-align: center}
#sub_left .left_txt {height: 32px; line-height: 32px; margin: 0 auto; background: #113146; border-radius: 10px 10px 0 0; font-size:0.923em; font-weight: 300; color:#f1f1f1; text-align: center; font-weight: 400}
.leftmn {position: relative; width: 290px; padding:10px; border-radius:0 0 10px 10px;  background:url(../images/sub/sub_left_bg_n.png) no-repeat bottom left #1b4a67; box-sizing: border-box}
.leftmn ul{margin-bottom:35px}
.leftmn ul > li{padding-right: 16px}
.leftmn ul > li > a {position: relative; display: block; line-height: 140%;border-radius:10px; padding:15px 50px 15px 10px; margin-bottom: 7px; background: #e3e3e3; font-size:1.154em; font-weight: 500; color: #000; transition: all .3s}
.leftmn ul > li > a::after{content: ""; display: block; clear: both; position:absolute; right:-18px; top:5px; width:38px; height:38px; background:url(../images/sub/blt_sub_left.png) no-repeat right center; transition: all .3s}
.leftmn ul > li > a:hover{background: #fff; color:#000; font-weight:600}
.leftmn ul > li > a:hover::after{background:url(../images/sub/blt_sub_left_a.png) no-repeat right center}
.leftmn ul > li:last-child a{margin-bottom: 0}
.leftmn .left_bt_txt{text-align:center}
.leftmn .leftmenuover > a{background: #fff; color:#000; font-weight:600}
.leftmn .leftmenuover > a::after{background:url(../images/sub/blt_sub_left_a.png) no-repeat right center; text-decoration:none; font-weight: 500}

/*MN third*/
.leftmn .third{position: relative; width: 250px; margin-bottom: 7px; border-radius: 30px; padding:10px; margin-top: 5px; border-radius: 10px; background: #377399}
.leftmn .third li { background:url(../images/sub/blt_sub_third.png) no-repeat 4px 8px; border-bottom:1px solid #e8e8e8}
.leftmn .third li a{display: block; line-height: 140%; padding:7px 0 7px 30px; border:none; font-size:14px; font-weight: 400}
.leftmn ul .third li a::after{display: none}
.leftmn .third .last_line {border-bottom: none}
.leftmn ul>li .third li a {border-bottom:none; background:none; color:#fff}
.leftmn .third .leftmenuover_last {border-bottom:none}
.leftmn .third li:hover {background:url(../images/sub/blt_sub_third_a.png) no-repeat 4px 8px}
.leftmn .third .third_on{background:url(../images/sub/blt_sub_third_a.png) no-repeat 4px 8px}
.leftmn .third li a:hover {color:#ffe270; font-weight: 500; border:none}
.leftmn .third .third_on a {color:#ffe270; font-weight: 500}

/*Subtop TIT */
#subtop{position: relative; height:70px; padding:10px; margin-top:11px}
#subtop h3{padding:7px 0 0 0; font-size:1.538em; font-weight:600}

/* PC guide*/
#sub_guide {position: absolute; left:0; top: 55px; width:100%; z-index: 10}
#sub_guide:after {content:""; clear:both; display:block; height:0; font-size:0; line-height:0}
#sub_guide .navi_area ul {text-align: center}
#sub_guide .navi_area li {display: inline-block; width:auto !important; font-weight:300}
#sub_guide .navi_area li a { display: block;padding: 0 9px 0 15px; line-height: 19px; background: url(../images/sub/navi_arr_pc.gif) 0 50% no-repeat; font-size: 1.077em; font-weight:500}
#sub_guide .navi_area li:first-child a {background: none; padding-left: 0}
#sub_guide .navi_area li.m_menu {display: none}
#sub_guide .navi_area li.page_on{ font-weight:400}
#sub_guide .navi_area > ul > li.nav_home a{width: 20px; padding:0 9px 0 0; height: 19px}

/* subtop_btn */
.subtop_btn {display: block; position: absolute; right:1px; bottom:-15px; width: 132px; height: 28px; background:#1a435d; border-radius: 50px; z-index: 30}
.subtop_btn dl.font{float: left; margin-left: 15px}
.subtop_btn dl.font>dt{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
.subtop_btn dl.font>dd{float: left;padding: 8px 0;  margin-right: 10px}
.subtop_btn dl.font>dd:last-child{margin-right: 0}
.subtop_btn .btn_print{position: absolute; bottom:-10px; right:-1px}

/* Quicktop */
#quickmenu {display: block; top:80px; width: 80px; margin-right: -550px; border-radius: 15px; text-align: center; z-index: 30}
#quickmenu .btn_top a {display: block; width: 38px; height: 58px; padding: 5px 0; margin: 0 auto}
.msquick .sq_titbtn{position: relative}
.msquick .sq_titbtn::after{content: ""; display: block; clear: both; position: absolute; bottom:-5px; right:38px; width:3px; height:5px; background: #ccc; z-index:1}
.msquick .sq_titbtn a{position: relative; display: block; width:80px; height:80px; background:url(../images/sub/sub_quick.png) no-repeat 0 center; transition: all .6s}
.msquick .sq_titbtn a span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
.msquick .sq_titbtn a:hover{background:url(../images/sub/sub_quick_a.png) no-repeat 0 center}
.msquick .sq_titbtn.over a{background:url(../images/sub/sub_quick_a.png) no-repeat 0 center}
.msquick .sq_lst{display:none; position:absolute; top:5px; right:90px; width:316px; height:141px; padding: 5px 15px; background:url(../images/sub/bg_sqlst.gif) repeat-x top left #ececec; border-radius: 15px}
.msquick .sq_lst ul {margin-top:25px}
.msquick .sq_lst ul li{text-align:center; float:left; width:25%; text-align: center}
.msquick .sq_lst ul li a{display:block; font-size: 14px; text-align: center; font-weight:500; color:#000}
.msquick .sq_lst ul li a img{width:71px; height: 71px}
.msquick .sq_lst ul li span.sq_icon{display: block; width:71px; height: 71px; margin: 0 auto 10px; line-height: 42px; border-radius: 50%; transition: all .6s}
.msquick .sq_lst ul li a:hover{font-weight: 500} 
.sub_qmu .quick_tb.over{display: block}
.msquick .sq_lst::after{content: ""; display: block; clear: both; position: absolute; top:20px; right:-9px; width:9px; height:11px; background:url(../images/sub/blt_sqlst.png) no-repeat 0 center; z-index:1}
.msquick .sqmn_v1:hover a span.tq_tit{color:#ea3e82}
.msquick .sqmn_v2:hover a span.tq_tit{color:#33900e}
.msquick .sqmn_v3:hover a span.tq_tit{color:#a739cc}
.msquick .sqmn_v4:hover a span.tq_tit{color:#3890d7}

.quick_tb .quick_close{position:absolute; top:10px; right:10px}
.quick_tb .quick_close a.closebtn{display:block; width:20px; height:20px; background:url(../images/sub/quick_close.png) no-repeat 0 center}
.quick_tb .quick_close a.closebtn span{height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}


/******************************서브컨텐츠 영역**************************************/
/*PC에서 br 필요 없을때 선언*/
br.pcbr_none{display: none}
/*PC에서 필요 없을때 선언*/
.pc_none{display: none}

/* -------------------컨텐츠 스타일 시작 -------------------*/

}

/* LOWSET FIX */

@media only screen and (max-width:798px) {
/*종합심리검사 ＆ 다원재능검사*/
.mgb_growthtest .test_wrap{width: auto; margin: 60px auto}
}

@media only screen and (max-width:760px) {
/*찾아오시는 길*/
.mgb_map .map_add span{font-size: 1.071em; letter-spacing: -.5px}
.map_area .map_txt br{display: block}
.map_area .map_txt span{ background:url(../images/sub/map_info.gif) no-repeat left 3px}
.map_area .root_daum_roughmap .wrap_map { height:200px !important}
.map_tb .map_numbox ul > li{float: none; width: 90%; margin: 0 auto 10px}
.map_tb .map_numbox ul > li > p{width: 100%}
.map_busbox dl dt{float: none; padding: 7px 7px 7px 20px; margin-right:0; text-align: center}
.map_busbox dl dd{text-align: center}
.map_busbox dl dd br{display: block}
}

@media only screen and (max-width:740px) {
/*인사말*/
.mgb_greet .gt_topbox{margin: 0 auto 20px}
.mgb_greet .top_txt{padding-bottom: 10px}
.mgb_greet .top_txt img{width: 286px; height: 21px}
.mgb_greet .gt_tit img{width:286px; height: 17px}
.mgb_greet .top_txt::after, .mgb_greet .gt_tit::after, .mgb_greet .top_txt::before, .mgb_greet .gt_tit::before{ bottom:-7px; width:12px; height:12px; background: url(../images/sub/dot_gttop_m.gif) no-repeat left top}
.mgb_greet .gt_tb{font-size:1.000em}
.mgb_greet .gt_tb .gt_lst{margin-top: 70px}
.mgb_greet .gt_tb .gt_lst::after{ right: 50%; bottom:96px; width:109px; height:66px; margin-right: -50px; background: url(../images/sub/gt_bg_m.gif) no-repeat left top}
/* .mgb_greet .gt_tb .gt_sign img{width: 235px; height: 30px} */

/*상담절차 및 상담시간*/
/**상담절차**/
.counsel_step ul::after{bottom:0; width:6px; height:100%; margin-left:-2px}
.counsel_step ul li{position: relative; float: none; width:100%}
.counsel_step ul li::after{right:50%; top:180px; width:20px; height:20px; margin-right: -11px; background: url(../images/sub/step_arw_m.png) no-repeat left top}
.mgb_counseling .counsel_step ul li:last-child::after{display: none}
.counsel_step ul li p.steplst{width: 80%; margin: 0 auto; text-align: center}
.counsel_step ul li span{display:block; padding: 10px 10px 15px; margin: 8px 0 15px; background: #fff; border:3px solid #eee; border-radius: 50px; font-size:1.071em}
/**상담시간**/
.counsel_time ul li{width: 100%}

/*개인 및 집단, 부부상담*/
.mgb_counslst .contop_titbox{margin-bottom: 20px}
.mgb_counslst h4.sub_tit4{margin-left: 0}
.mgb_counslst .lst_tb{padding:40px 10px 10px; margin:110px 0 18px}
.mgb_counslst .lst_img{top:-100px; left:50%; margin-left: -105px}
.mgb_counslst .lst_tb .lst_txt{margin-left:0; padding: 10px; border-radius: 10px; background: #f2f2f2}
.mgb_counslst .lst_tb .lst_txt.line_type2{margin-top:0}
}

@media only screen and (max-width:710px) {
/*모바일 아래에서 표 내용이 너무많을때 사이즈 고정후 스크롤 하기*/	
.table_scroll .mb_txt{padding: 10px; font-weight:bold; text-align: center}
/****공통 Table****/
.table_scroll{overflow-x: auto; position: relative}
.table_scroll .mb_txt{line-height:140%; font-size:14px; text-indent:1px}
.table_scroll table {min-width:710px}
.comtable .table_scroll table tbody th{background: #fff}

/*사이트맵*/
.mgb_sitemap .sitemap_wrap > ul > li{float:none; width:100%; margin-bottom:10px}
.sitemap_wrap .smlst {min-height:auto; margin: 0 auto}

}

@media only screen and (max-width:630px) {
/*종합심리검사 ＆ 다원재능검사*/
.mgb_growthtest .test_box{width:360px; margin: 0 auto 60px}
.mgb_growthtest .testlst01{float: none}
.mgb_growthtest .testlst02{float: none}
}

@media only screen and (max-width:530px) {
/*심리검사*/
.psy_tb > ul li{text-align: center}
.psy_tb > ul li span.lst_tit{display:block; width: 80px; margin: 0 auto 5px}
}

@media only screen and (max-width:488px) {
/*인사말*/
.mgb_greet .gt_tb > p br{ display: none}

/*개인정보 처리방침*/
.mgb_protect .pro_top{margin-bottom:20px}
.mgb_protect .pro_top > p.protop_tit{position:relative; top:0; left:0; width: auto; margin-top:0; padding:10px}
.mgb_protect .pro_top > p.protop_tit img{display: none}
.mgb_protect .pro_top > p.protop_tit span{display: block; padding-top: 30px; background: url(../images/sub/protop_tit_m.gif) no-repeat center top}
.mgb_protect .pro_top > ul{margin: 0}
}

@media only screen and (max-width:390px) {
/*상담절차 및 상담시간*/
/**상담시간**/
.counsel_time dl dt{background-image:none}
.counsel_time dl dt span{padding-left:0}
.counsel_time dl dd{letter-spacing: -1px}

/*종합심리검사 ＆ 다원재능검사*/
.mgb_growthtest .test_box{width:100%}
}

@media only screen and (max-width:359px) {
.contop_titbox .top_txt{padding-bottom: 10px}
.contop_titbox .top_txt img{width: 286px; height: 21px}
}