/************************************************************************
 * 파일명	:reactive.phone.css
 * 설명	:반응형 휴대폰 사이즈 CSS
 * 작성일	:2020.09.22
************************************************************************/


@media (max-width:640px){

/* 상단 로고 */
#wrapper #header .header .header_top_wrap .header_top {width:100%}

/* 상단 검색 */
#wrapper #header .header .header_top_wrap .header_top .search_wrap {top:80px}

/* 메인 quick */
.board_quick_box {width:100% !important;}
.board_quick_box ul li {width:33.333%; font-size:15px !important;}
.board_quick_box ul li .board_quick_box1 a {width:calc(100% - 2px) !important}
/* .board_quick_box ul li .board_quick_box1 .quick_box1 {border-left:none !important} */
/* .board_quick_box ul li .board_quick_box1 .quick_box5 {border-right:2px solid #fff !important} */
/* .board_quick_box ul li .board_quick_box1 .quick_box3 {border-right:none !important} */
.board_quick_box ul li:nth-child(7), .board_quick_box ul li:nth-child(8) {width:50% !important}
.board_quick_box ul li .board_quick_box2 a {width:100% !important;}
.board_quick_box ul li .board_quick_box2 button {width:100% !important;}

.board_wrap .board {width:calc(100% - 20px) !important; margin:45px 10px 0 10px !important;}
.board_wrap .edu_link .sit_link {padding: 20px !important}
.board_wrap .edu_link .sit_link div {width:100% !important; float: initial !important;}
.board_wrap .edu_link .sit_link div.sit_link_cet {margin-left:0}
.board_wrap .edu_link .sit_link div a {width: calc(100% - 75px) !important}

/* 메인비주얼 롤링 */
.main-visual-box .main-visual-img-box {height:450px !important}
.main-visual-box .main-visual-txt-box .visual-txt-box {padding:120px 50px 0 50px !important; max-width:none !important;}
.main-visual-box .main-visual-txt-box div p:nth-of-type(1) {text-align:center; font-size:40px !important;}
.main-visual-box .main-visual-txt-box div p:nth-of-type(2) {display:none}
.main-visual-box .main-visual-txt-box .main_visual_link {top:320px !important;}
.main-visual-box .owl-dots {top:400px !important}
.main-visual-box .mini-board-ctrl {top:400px !important}
.main-visual-box .control-wrap .prev {left:0 !important}
.main-visual-box .control-wrap .next {right:0 !important}

/* 페이지 content (좌측 메뉴 숨김) */
#wrapper #container .content {margin:0px; padding:0px; width:100%;}
.contentpadding {padding:15px;}
.location ul {margin-top:10px}
.location ul li{padding-left:12px !important; background-position-x:0 !important; font-size:11px; line-height:24px !important;}
.location ul li:nth-child(2) {padding-left:0 !important; background:none !important}
.location ul li.home {display:none !important}

/*sub_top*/
.sub_top .info p {font-size: 29px}

/*paging*/
.pager_wrap .page {display:inherit !important}
.pager_wrap .page a {margin-bottom:5px}

/* 게시판 검색 */
.notice_wrap .search_wrap {padding:0px 5px !important;}
.notice_wrap .search_wrap > .fl_right {width:100%;}
.notice_wrap .search_wrap .select.w150p {width:100px !important;}
.notice_wrap .search_wrap .int_wrap {width:calc(100% - 122px)!important; margin-left:5px !important;}
.notice_wrap .search_wrap .int_wrap input {width:calc(100% - 32px)!important;}
.notice_wrap .board_search .center_wrap .select {float: inherit !important; width: calc(100% - 2px);}

/* Tab */
.tab_wrap ul li:nth-child(3) > a {border-right:0 !important}
.tab_wrap ul li:nth-child(2) > a, .tab_wrap ul li:nth-child(4) > a {border-right:1px solid #d5ddea !important}
.tab_wrap ul li:last-child > a {border-right:1px solid #d5ddea !important}

/*step_box*/
.step_box .info_box > div {float:none !important; width:100% !important}
.step_box .info_box > img {float:none !important; margin:0 !important; margin-left:calc(50% - 14px) !important; padding:0; transform:rotatez(90deg);}
.step_box .info_box .info_txt {width:100% !important}

.app_wrap_new .cont .step_box .info_box.reinfochange > div {width:100% !important}
.app_wrap_new .cont .step_box .info_box.reinfochange > img {margin:0 !important; margin-left:calc(50% - 14px) !important;}

/*관할구역 선택 - 광역*/
.edu_step_wrap .area_select_p .info_box > div:first-child {width: 50% !important;}
.edu_step_wrap .area_select_p .info_box > div:nth-child(2) {width: calc(50% - 30px) !important;}
.edu_step_wrap .area_select_p .info_box > a {width: calc(50% - 109px) !important;}

/*교육과정 모두보기*/
.edu_step_wrap .area_select .map_wrap .fl_left {float: none !important}
.edu_step_wrap .area_select .map_wrap .fl_right {height:540px !important; float: none !important}
.edu_step_wrap .area_select .map_wrap .map_area {width:100%}
.edu_step_wrap .area_select .map_wrap .fl_right .map_area {overflow-x: scroll}

.edu_step_wrap .edu_process .process_wrap .schedulesearch_wrap {padding-bottom: 50px}
.edu_step_wrap .edu_process .process_wrap .schedulesearch_wrap .edusearchtxt {width:100% !important; background-image:none !important; padding:15px 0 !important;}
.edu_step_wrap .edu_process .process_wrap .schedulesearch_wrap .select.upselect {width:calc(100% - 22px) !important}
.edu_step_wrap .edu_process .process_wrap .schedulesearch_wrap .searchckeckbox {width:calc(100% - 40px) !important; margin:0 20px !important}
.edu_step_wrap .edu_process .process_wrap .schedulesearch_wrap .select {width:40% !important}
.edu_step_wrap .edu_process .process_wrap .schedulesearch_wrap .select.downselect {margin:0 10px 10px 10px !important}
.edu_step_wrap .edu_process .process_wrap .schedulesearch_wrap .searchEdcSbjectNm {width:50% !important; margin:0 10px 10px 0 !important}
.edu_step_wrap .edu_process .process_wrap .schedulesearch_wrap .btn_search {width:100% !important; top:inherit !important; left:0; bottom:0; border-radius:0 !important}

/* 서브메인 */
.target_wrap .cont_new.ta01,
.target_wrap .cont_new.ta02,
.target_wrap .cont_new.ta03,
.target_wrap .cont_new.ta04,
.target_wrap .cont_new.ta05,
.target_wrap .cont_new.ta06 {background-size:50px !important; background-position-x:5% !important;}
.target_wrap .cont_new .t_wrap {padding-left:110px !important}
.target_wrap .cont_new .t_wrap h2 {padding: 20px 0 5px 0 !important; font-size:18px !important}

.app_wrap .sub_cont .step_box .info_box {width:100% !important;}

/*STEP2*/
.edu_step_wrap .step_info .busi_info {margin-top:70px !important}
.edu_step_wrap .step_info .busi_info .chk_wrap {top: -58px !important}

/* 건설업 기초안전보건교육기관 등록현황(기관현황) */
.notice_wrap .board_search .center_wrap .int_wrap {width:100%; margin-top:10px}
.notice_wrap .board_search .center_wrap .int_wrap input {width: calc(100% - 40px) !important}

/*건설업 기초안전보건교육 자주하는 질문*/
.info_wrap .cont_new .tab_wrap.FAQ ul li {width:50% !important}

/* 교육 이수 근로자 조회(이수정보 조회) */
.info_wrap .search_comp {padding:20px !important}
.info_wrap .search_comp .searchdiv:after {content:""; display:block; clear:both}
.info_wrap .search_comp .txt {argin-left:10px !important}

/* 개인정보변경신청 step2 */
#wrapper #container .info_wrap_new .search_comp .searchdiv input#searchUserCertProcText {width:calc(100% - 130px) !important}

/* 교육 이수 근로자 조회(이수정보 조회) */
.info_wrap .cont .search_comp.new .txt {font-size:15px !important}

/*민간안전보건교육기관 안내*/
.eva_info .cont .app_img img {max-width:400px !important;}

/* 개인정보정정 신청 */
.app_wrap_new .inner .reinfo_sub {width:100% !important; position:inherit !important}
.app_wrap_new .inner .reinfo_cnt {padding-left:0 !important; margin-bottom: 20px}
.app_wrap .cont .inner {margin-left:0 !important}

/*민간안전보건교육기관 안내*/
.eva_wrap .stab_wrap ul li {width:50% !important;}
.eva_wrap .search_wrap input {width:150px !important;}

/* 위험성평가 담당자교육 위탁기관 */
.eva_wrap .btn_wrap {float:inherit !important}
.eva_wrap .btn_wrap .btn_all {position:inherit !important; display:inline-block}

/*마이페이지*/
.my_wrap .info {width: calc(100% - 60px) !important; height:auto !important}
.my_wrap .info:nth-of-type(2), .my_wrap .info:nth-of-type(4) {margin-left:0 !important}
.my_wrap .cont02 ul {margin:0 auto !important}

/* 계산서/전표출력 */
.bill_wrap .text_wrap .rule-img li::before {content: "▽" !important; width:100% !important; margin:30px auto !important; text-align:center !important; font-size:25px !important; font-weight:800 !important;}
.bill_wrap .text_wrap .rule-img li {clear:both !important; float:none !important;}
.bill_wrap .text_wrap .rule-img li img{	margin:0 auto !important; width:120px !important; display: block !important;}
.bill_wrap .text_wrap dl dd {padding-top: 0px !important; font-size: 15px !important;	display: block !important;}
.bill_wrap .text_wrap dl dt {padding:100px 0px 20px !important; width: 100% !important; font-size: 20px !important; display: block !important; text-align:center !important;}
.bill_wrap .text_wrap .rule-img li:first-child::before {content: "" !important; margin:0 !important;}
.bill_wrap .text_wrap .rule-img { margin-top: 0px !important;}	

/*모듈형 교재*/
/* .bbs_wrap .list_wrap ul li .img {float:inherit !important; width:125px; margin:0 auto !important} */
.bbs_wrap .list_wrap ul li .t_wrap .tit a {font-size:19px !important}
.bbs_wrap .list_wrap ul li .t_wrap .txt {font-size:15px !important}
.bbs_wrap .bbs_search {height:inherit !important}
.bbs_wrap .bbs_search:after	{content:""; display:block; clear:both}
.bbs_wrap .bbs_search .int_wrap {margin:15px 0 15px 10px !important}
.bbs_wrap_new .table_wrap.form table tbody tr td .info img {max-width:400px !important;}

/* step2_popup(코드조회) */
.layer_popup_new.issCodeSearch .iss_wrap .search input {width:200px !important}

/* 2019-10-17 추천 교육 과정 */
.recommend_wrap .list_wrap ul li .num {float:inherit !important; width:100% !important; display:block; padding:10px 0;}
.recommend_wrap .list_wrap ul li:nth-of-type(1) .t_wrap {border:0 !important}
.recommend_wrap .list_wrap ul li .num em {margin:0 !important}
.recommend_wrap .list_wrap ul li .t_wrap {padding:20px !important}
.recommend_wrap .list_wrap ul li .t_wrap .btn_wrap {position:inherit !important; margin-top:0 !important; padding-bottom:0 !important}

.layer_popup.iss .iss_wrap .search .txt {width:90px; margin-left:0 !important}
.layer_popup.iss .iss_wrap .search .userName {width:calc(100% - 100px) !important; margin-left:0 !important; margin-bottom:5px}
.layer_popup.iss .iss_wrap .search .userBirthday {width:calc(100% - 100px) !important; margin-left:0 !important}

/* 로그인 */
.login_wrap.cert .welcome {font-size:30px !important}

/* footer */
/* #wrapper #footer {height:280px;} */
/* #wrapper #footer .footer_wrap {width:100%; padding:20px 0px;} */
#wrapper #footer .footer_wrap {width:100%;}
/* #wrapper #footer .foot_util .util_wrap {text-align:center;} */
/* #wrapper #footer .footer_wrap .foot_util{float:none; width:calc(100% - 60px);} */
/* #wrapper #footer .footer_wrap .foot_util .util_wrap ul {display:inline-block; width:auto;} */

/* #wrapper #footer .foot_util .util_wrap li:nth-child(1),
#wrapper #footer .foot_util .util_wrap li:nth-child(3),
#wrapper #footer .foot_util .util_wrap li:nth-child(4) {display:none;}
#wrapper #footer .foot_util .util_wrap ul li:nth-child(2):after {background:transparent;} */

/* footer 바로가기 */
#wrapper #footer .footer_wrap .move_site {float:none; padding:30px 20px 0px 20px;}
#wrapper #footer .footer_wrap .move_site .family_site {line-height:10px;}
#wrapper #footer .footer_wrap .move_site .family_site .select_cont .select {width:calc(100% - 33px)}
/* #wrapper #footer .foot_util .util_wrap ul li {padding:0px 8px;} */
/* #wrapper #footer .footer_wrap .foot_util .util_wrap .info .copy {position:absolute; left:0px; bottom:-150px; width:100%; text-align:center; font-weight:100; font-size:12px;} */
}

@media screen and (max-width:600px){
	.footer-bottom-wrap .footer-bottom-box {display: block; padding: 40px 15px;}
	.footer_wrap .f_logo {float: inherit; margin-right: 0; text-align: center; margin-bottom: 30px;}
	.footer_wrap .foot_util .util_wrap .info > ul > li ul li {padding-right: 10px; margin-right: 10px;}
}

@media screen and (max-width:580px) {
	.f-link ul {display: block;}
	.f-link ul li {width: 100%;}
	.f-link ul li:first-child {border-bottom: 1px solid #686e76;}
	
	/*키워드로 보는 교육과정 한 눈에 보기*/
	.keyword p {font-size: 22px !important;}
	.keyword ul li {font-size: 15px !important;}
}

@media screen and (max-width:480px) {
/*contentpagetitle*/
.contentpagetitle {font-size:25px !important}

/*new 공통 팝업 */
.layer_popup .tit_wrap h1 em {margin-left:0; padding-left:0}

/* Tab */
.tab_wrap ul li > a {font-size:12px}
.tab_wrap ul li.on > a {font-size:12px}

/*민간안전보건교육기관 안내*/
.eva_info .cont .app_img img {max-width:320px !important;}

/*STEP2*/
.edu_step_wrap .step_info .busi_info {margin-top:90px !important}
.edu_step_wrap .step_info .busi_info .chk_wrap {top: -78px !important}

/*회원정보*/
.pin_wrap .busi_wrap .busi_info .info_wrap .cont04 input {width:100% !important}

/*모듈형 교재*/
.bbs_wrap .bbs_search .select {width:calc(100% - 30px) !important; margin-bottom:0 !important}
.bbs_wrap_new .table_wrap.form table tbody tr td .info img {max-width:300px !important;}

/* step2_popup(코드조회) */
.layer_popup_new.issCodeSearch .iss_wrap .search input {width:70% !important}
.layer_popup_new.issCodeSearch .iss_wrap .search .btn_base {margin-top:10px}

/* 로그인 */
.login_wrap.cert .int_box .certified h3 {font-size:17px !important}
.login_wrap.cert .info_txt_login .title {font-size:17px !important; line-height:25px !important}
.login_wrap.cert .info_txt_login > ul li {font-size:15px !important}
.login_wrap.cert .int_box .certified .btn_wrap .log_left {width:33% !important}
.login_wrap.cert .int_box .certified .btn_wrap .log_right {width:33% !important}

}