@charset "utf-8"; @import url('/sites/moj/style/css/font.css'); @import url('/sites/corrections/style/css/style_moj.css'); a:focus{outline:2px solid red; outline-offset:-2px;} button:focus, input:focus, select:focus{outline:3px solid red;} /*사이트안내 첫번째 메뉴 삭제*/ .moj_siteMap ._stMpWrap > ul > li:first-child{display:none} .tableWrap h2{font-size:0} body.Desktop .blockUI.foreigner, body.Tablet .blockUI.foreigner { top: 50px !important; width: 555px !important; height: 750px;} ._mojList table.artclTable tbody th{border-bottom: 1px solid #cfcfd1;} .note{color: #6060BF !important;} /* 메인 하단 동영상 */ .rcnt_movie .recentBbsThumb img{height: 222px;} /* 메인 배너 웹접근성 임시처리 */ .top_visual .bx-controls{padding: 4px 12px; background-color: #fff; border-radius: 18px;} .top_visual .bx-controls-auto{position:absolute; right:8px;} /* 비전 */ .tb_vis{width:700px !important;margin: 0 auto;} .tb_vis tbody th{text-align:left !important;padding:10px 20px !important;font-size: 16px;color: #000;} .tb_vis tbody th span{font-size:12px} .tb_vis tbody td{text-align:left;padding:10px 20px !important; font-size: 14px;} body.Mobile .visimg img{width:100%} body.Mobile .tb_vis{width:100% !important} /***** 동의서 수정 ***/ .agree{background: #f7f9fa;border: 1px solid #e6eaed;padding: 20px 30px;margin-bottom: 45px;} .agree img{float: left; margin-right: 25px;margin-top: 7px;margin-bottom: 15px;} .h1{font-size: 20px;color: #1b386e;font-weight: 500;} .h22{line-height: 20px;color: #555;font-weight: 400;font-size:14px;} .h2{color: #555;line-height: 20px;font-weight: 400} .h3{color: #333;font-size: 17px;font-weight: 400;} .info_tb{margin-bottom: 30px; border-top: 1px solid #1b386e;margin-top: 8px;} .info_tb th{border-left: 1px solid #dadce0;border-right: 1px solid #dadce0;padding:10px 20px;background: #f2f4f6;color: #1b386e;font-weight: 400;} .info_tb th:first-child{width: 50%;} .info_tb td{border:1px solid #b8c2cc; border-left: 1px solid #dadce0;border-right: 1px solid #dadce0;padding:10px 20px;text-align:center;background: #fff;font-size: 14px;color: #555;font-weight: 400;font-size: 15px;} .info_tb td:first-child{text-align:left;padding: 20px 100px;} .agr{margin-top: 25px;text-align: center;border-width: 1px 0 1px 0;border-color: #b8c2cc;border-style: solid;padding: 30px 0;margin-bottom: 70px;} .agr p{color: #555; font-weight: 400;} .radioBtn {margin-top: 10px;} .radioBtn input{margin-right: 3px;} .radioBtn label{font-weight: 400;color: #555;margin-right:15px} /*****팝업 ***********/ /* CSS 공통 */ .maL10{margin-left:10px;} .maL15{margin-left:15px;} .maL20{margin-left:20px;} .maB10{margin-bottom:10px;} .maB15{margin-bottom:15px;} .maB20{margin-bottom:20px;} .maB25{margin-bottom:25px;} .maB30{margin-bottom:30px;} .maB35{margin-bottom:35px;} /* 연혁 */ .historyWrap .substance dd{float: right} .recentBbsInnerLi a{display:block; outline-offset:0;} .nomoreOpen form input{cursor:default} .PZwindow { border:1px solid #999; background-color:#fff; position:absolute !important; z-index:99999; cursor:move; overflow:hidden; } .PZwindow * { font-family: 'Pretendard GOV', 'NotoKR', '맑은 고딕', 'Malgun Gothic', sans-serif !important; font-size:17px; line-height:1.3; color:#1e2124; letter-spacing:-1px; } .PZwindow .PZwrap { overflow:hidden; } .PZwindow .nomoreOpen { border-right:1px solid #333; overflow:hidden; } .PZwindow .nomoreOpen form label { font-size:15px; color:#fff; } .PZwindow .nomoreOpen form a.PZwindowClose { margin-top:5px; } .reptxt,.longdesc {overflow: hidden; position: absolute; width: 1px; height: 1px; border: 0; margin: -1px; padding: 0; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;} .PZwindow .btn { padding:10px 20px; display:inline-block; font-weight:bold; color:#fff !important; text-decoration:none; background:url(/sites/moj/images/contents/button_type_02.png) left top repeat; } .PZwindow .ul_2 { margin-top: 10px; overflow: hidden; } .PZwindow .ul_2 li { padding-left: 8px; color: #fff; position:relative; } .PZwindow .ul_2 li::before { content:'·'; position:absolute; top:-1px; left:0; } .compop-wrap { max-width:400px; background:url(/sites/moj/images/popup/popup_background_img.jpg) top center no-repeat; min-height:calc(420px - 35px); overflow:hidden; letter-spacing:-1px; } .compop-wrap .pop-haed { margin:28px 0 10px; text-align:center; overflow:hidden; } .compop-wrap .pop-haed h1 { font-size:21px; margin-bottom:10px; color:#1d1d1d; font-weight:700;} .compop-wrap .pop-haed h1 span { padding-top:5px; display:block; color:#555; overflow:hidden; text-align:center; } .compop-wrap .pop-haed .copytxt {margin-bottom:10px; text-align:center; } .compop-wrap .pop-haed .copytxt .bold {font-weight:700;} .compop-wrap .pop-haed .copytxt .underline {text-underline-position: under; text-decoration: underline;} .compop-wrap .pop-body { padding:0; overflow:hidden; } .compop-wrap .pop-body .pop-box { color:#fff; padding:20px; border-top-left-radius:5px; border-top-right-radius:5px; background:url(/sites/moj/images/popup/popup_text_img.png) top center no-repeat; overflow:hidden; } .compop-wrap .pop-body .pop-box dl.list { margin-bottom:10px; list-style:none; overflow:hidden; position:relative; } .compop-wrap .pop-body .pop-box dl.list dt, .pop-body .pop-box dl.list dd { text-align:left; line-height:1.5; color:#fff; } .compop-wrap .pop-body .pop-box dl.list dt { width:40px; padding-left:9px; font-weight:bold; position:absolute; } .compop-wrap .pop-body .pop-box dl.list dt span { width:5px; height:2px; background-color:#fc0; position:absolute; top:3px; left:0; } .compop-wrap .pop-body .pop-box dl.list dd { width:calc(100% - 50px); margin-left:50px; padding-bottom:2px;} .compop-wrap .pop-body .pop-box dl.list dd span {font-weight:500; color:#fc0;} .compop-wrap .pop-body .pop-box p { margin-top:15px; padding-left:12px; font-size:15px; color:#ddd; position:relative; } .compop-wrap .pop-body .pop-box p::before { content:'※'; position:absolute; top:-1px; left:0; } @media only screen and (min-width:768px) { .compop-wrap { min-width:calc(375px - 60px);padding:35px 16px 0 16px; } } @media only screen and (max-width:737px) { .compop-wrap {/* max-width:auto;*/ padding:35px 10px 0 10px; } .compop-wrap .pop-body .pop-box { margin:0 15px; } } /** 변호사시험 팝업 **/ .lawpop-wrap { max-width:480px;background:url(/sites/moj/images/popup/popup_background_lawimg.png) top left no-repeat;min-height:calc(420px - 35px);overflow:hidden;letter-spacing:-0.01em;} .lawpop-wrap .pop-haed { min-height:140px; margin-top:20px; text-align:center; overflow:hidden; } .lawpop-wrap .pop-haed h1 { font-size:1.2em; color:#e7e7e7; font-weight:bold; } .lawpop-wrap .pop-haed h1 span { padding-top:5px; display:block; color:#333; overflow:hidden; text-align:center; } .lawpop-wrap .pop-haed .copytxt { font-size:1em; text-align:center; } .lawpop-wrap .pop-haed .copytxt .bold { margin-bottom:10px; font-weight:bold; color:#333; } .lawpop-wrap .pop-haed .copytxt span { border-bottom:1px solid #339; color:#339; font-weight:bold } .lawpop-wrap .pop-body { padding:0 20px 0 15px; overflow:hidden; } .lawpop-wrap .pop-body ul.list { margin:0; padding:0; list-style:none; overflow:hidden; } .lawpop-wrap .pop-body ul.list li { margin-bottom:15px; padding:0 0 0 10px; font-size:14px; position:relative; text-align:justify; } .lawpop-wrap .pop-body ul.list li::before { content:''; width:5px; height:2px; background-color:#930; position:absolute; top:10px; left:0; } .lawpop-wrap .pop-body ul.list li span { font-weight:bold; border-bottom:1px solid #f60; color:#f60; } .lawpop-wrap .pop-body ul.list li b { font-weight: bold; color: #333; } .lawpop-wrap .pop-foot { padding:1em 0; text-align:center; overflow:hidden; } /** 신규모바일앱 **/ .compop-wrap .app-store { margin:0; padding:0; list-style:none; overflow: hidden; } .compop-wrap .app-store li { float:left; width:40%; margin:0 5%; overflow: hidden; } .compop-wrap .app-store .btn-appDown { width:90px; height:110px; margin:0 auto; display:block; } /** 이미지 팝업(다운로드 링크) **/ .imgpop-wrap { /*width:375px;*/min-height:420px;margin:0 auto; overflow:hidden; } .imgpop-wrap .pop-body { padding:0; overflow:hidden; position:relative; } .imgpop-wrap .pop-body .pop-bg { position:relative; z-index:10; } .imgpop-wrap .pop-btn-down { width:265px; list-style:none; overflow:hidden; position:absolute; left:50px; bottom:25px; z-index:50; } .imgpop-wrap .pop-btn-down dd { float:left; width:33.3%; margin:0; padding:0; text-align:center; } .txt01{ margin-bottom: 10px; font-size: 18px; font-weight: bold;} .cor_01 li a{ background: #1d446d;font-size: 12px;padding: 2px 5px;color: #fff;margin: 0 3px; outline-offset: 2px;} .cor_01 > li .dot{background: url(/sites/moj/images/contents/textBox_ul.png) left 9px no-repeat;padding-left: 15px;} .cor_01 > li .fr{margin-top:5px;} .cor_01 > li p span{font-weight:500;color: #054780;margin-right:5px;} .cor_01 > li > p:first-child{margin-top:5px;} .aten{color:#28a2e7} /******************************************************************************************* MAIN css ***/ /* Visual Area */ .multipleDiv .visual {min-height: 580px; background: url('../../images/main/mVisual_20190119.png') center top no-repeat;padding-top: 50px;box-sizing: border-box;} .multipleDiv .visual p {color: #333333; font-size: 18px; margin-top: 25px;} .multipleDiv .visualText:before {content: '';display: block;width: 50px; height: 4px;background-color: #1d4899;margin-bottom: 25px;} #multipleDiv_corrections_4 .multipleContentsDiv {max-width: 100%;} .multipleDiv .visualText, .multipleContentsDiv {max-width: 1200px; margin: 0 auto;} .multipleDiv .visualText img {max-width: 727px; width: 100%;} /* 사이버본부장실 */ .hqmng_box {position: relative;max-width: 385px;height: 303px;box-sizing: border-box;} .hqmng_box h2{color:#424242;font-size:20px;font-weight:500;line-height:1;} .hqmng_box h2 > span{color:#2b62ac;font-size:20px;font-weight:500;} .hqmng_box .hqmng_btn_box{position:relative;margin-top:17px;border:1px solid #dbdbdb;background: url('/sites/corrections/images/main/box_bg.jpg') left top no-repeat;} .hqmng_box .hqmng_btn_box:after{content:'';position:absolute;top:18px;right:0;width:147px;height:163px;background:url('/sites/corrections/images/main/img_hqmng25.png') 0 0 no-repeat;} .hqmng_box .hqmng_btn_box .left_txt_box{padding:37px 0 38px;} .hqmng_box .hqmng_btn_box .left_txt_box .t01{padding-left:20px;} .hqmng_box .hqmng_btn_box .left_txt_box .t02{padding-left:18px;margin-top:10px;} .hqmng_box ul {overflow:hidden;display:block;width:100%;padding:7px 2px 8px 6px;background-color:#53668c;box-sizing: border-box;} .hqmng_box ul li{float:left;display:flex;width:calc(100% / 4 - 4px);height:63px;margin-left:4px;text-align:center;border:1px solid rgba(255, 255, 255, 0.4);box-sizing:border-box;justify-content:center;align-items:center;flex-wrap:nowrap;} .hqmng_box ul li:first-child{margin-left:0;} .hqmng_box ul li:nth-child(3){margin-left:2px;} .hqmng_box ul li a{display:block;width:100%;text-align:center;color:#fff;font-size:15px;line-height:1.2;box-sizing:border-box;} /******************************************************************************************* 2022_New메인 ***/ body.Desktop #multipleDiv_corrections_26275{background-color:#e8eff5;} /*온라인민원QUICK*/ .online_quick_box{overflow:hidden;display:block;width:100%;background-color:#fff;border:1px solid #b6b8b9;box-sizing:border-box;} .online_quick_box .cnt_tit_box{float:left;display:block;padding:13px 36px 17px 14px;font-size:16px;color:#262626;background:url('/sites/corrections/images/main/ico_baro.png') right center no-repeat;} .online_quick_box .cnt_tit_box .txt_gray{margin-right:5px;} .online_quick_box .cnt_tit_box .txt_blue{} .online_quick_wrap{float:left;position:relative;width:82.2%;margin-top:10px;} .online_quick_wrap ul li{position:relative;float:left;width:calc(100% / 8);} .online_quick_wrap ul li:before{content:'';float:left;display:block;width:1px;height:59px;background:#bfbfbf;} .online_quick_wrap ul li:first-child:before{display:none;} .online_quick_wrap ul li a{display:block;text-align:center;} .online_quick_wrap .mw_ico{display:block;padding-top:33px;} .online_quick_wrap .micon01{background:url('/sites/corrections/images/main/ico_mw_01.png') center center no-repeat;} .online_quick_wrap .micon02{background:url('/sites/corrections/images/main/ico_mw_02.png') center center no-repeat;} .online_quick_wrap .micon03{background:url('/sites/corrections/images/main/ico_mw_03.png') center center no-repeat;} .online_quick_wrap .micon04{background:url('/sites/corrections/images/main/ico_mw_04.png') center center no-repeat;} .online_quick_wrap .micon05{background:url('/sites/corrections/images/main/ico_mw_05.png') center center no-repeat;} .online_quick_wrap .micon06{background:url('/sites/corrections/images/main/ico_mw_06.png') center center no-repeat;} .online_quick_wrap .micon07{background:url('/sites/corrections/images/main/ico_mw_07.png') center center no-repeat;} .online_quick_wrap .micon08{background:url('/sites/corrections/images/main/ico_mw_08.png') center center no-repeat;} .online_quick_wrap .micon09{background:url('/sites/corrections/images/main/ico_mw_09.png') center center no-repeat;} .online_quick_wrap .micon10{background:url('/sites/corrections/images/main/ico_mw_10.png') center center no-repeat;} .online_quick_wrap .mw_qk_txt{display:block;padding-top:10px;line-height:1;font-size:14px;color:#404040;font-weight:300;} /* 바로가기 */ .btm_cnt_box{clear:both;overflow:hidden;width:100%;border:1px solid #dbdbdb;box-sizing:border-box;} .btm_cnt_box .cnt_tit_box{float:left;padding:12px 49px 18px 33px;font-size:15px;color:#343434;font-weight:300;background:url('/sites/corrections/images/main/ico_baro.png') right center no-repeat;} .btm_cnt_box .cnt_tit_box > span{display:block;} .btm_cnt_box .cnt_tit_box > span.txt_gray{padding-top:3px;} .btm_cnt_box .cnt_tit_box > span.txt_blue{margin-top:3px;} .btm_cnt_box .baro_quick_list{float:left;width:calc(100% - 174px);} .btm_cnt_box .baro_quick_list ul{overflow:hidden;width:100%;margin-top:19px;margin-bottom:19px;} .btm_cnt_box .baro_quick_list li{float:left;display:block;width:calc(100% / 8 - 3px); margin-right:2px; box-sizing:border-box;} .btm_cnt_box .baro_quick_list li > a{position:relative;display:inline-block;width:100%;text-align:center;} .btm_cnt_box .baro_quick_list li:first-child > a{border-left:0;} .btm_cnt_box .baro_quick_list li > a:after{content:'';position:absolute;top:3px;right:0;width:1px;height:74px;background:#dbdbdb;} .btm_cnt_box .baro_quick_list li:last-child{margin-right:0;} .btm_cnt_box .baro_quick_list li:last-child > a:after{display:none;} .btm_cnt_box .baro_quick_list li > a span.br_btn_txt{display:inline-block;font-size:15px;color:#616161;font-weight:200;letter-spacing:-0.09em;} .btm_cnt_box .baro_quick_list li > a span.br_icon{display:inline-block;width:100%;padding-top:45px;} .btm_cnt_box .baro_quick_list li > a span.bicon01{background:url('/sites/corrections/images/main/ico_br_01.png') center center no-repeat;} .btm_cnt_box .baro_quick_list li > a span.bicon02{background:url('/sites/corrections/images/main/ico_br_02.png') center center no-repeat;} .btm_cnt_box .baro_quick_list li > a span.bicon03{background:url('/sites/corrections/images/main/ico_br_03.png') center center no-repeat;} .btm_cnt_box .baro_quick_list li > a span.bicon04{background:url('/sites/corrections/images/main/ico_br_04.png') center center no-repeat;} .btm_cnt_box .baro_quick_list li > a span.bicon05{background:url('/sites/corrections/images/main/ico_br_05.png') center center no-repeat;} .btm_cnt_box .baro_quick_list li > a span.bicon06{background:url('/sites/corrections/images/main/ico_br_06.png') center center no-repeat;} .btm_cnt_box .baro_quick_list li > a span.bicon07{background:url('/sites/corrections/images/main/ico_br_07.png') center center no-repeat;} .btm_cnt_box .baro_quick_list li > a span.bicon08{background:url('/sites/corrections/images/main/ico_br_08.png') center center no-repeat;} .btm_cnt_box .baro_quick_list li > a span.bicon09{background:url('/sites/corrections/images/main/ico_br_09.png') center center no-repeat;} .btm_cnt_box .baro_quick_list li > a span.br_btn_txt br{display:none;} body.Desktop .btm_cnt_box .baro_quick_list li.onlyMbe{display:none;} /* 260311 교정 홍보영상 */ .cor_movie_wrap h2{font-size: 20px; font-weight: 500; line-height: 1; color: #424242;} .cor_movie_wrap h2 span{font-weight: 500; color:#2b62ac;} .cor_movie_wrap .cor_movie_bx{margin-top:18px; border: 1px solid #dbdbdb; box-sizing:border-box;} .cor_movie_wrap .cor_movie_bx a{display:block;} .cor_movie_wrap .cor_movie_img{position:relative; width:100%; height:180px; overflow:hidden; z-index:-1;} .cor_movie_wrap .cor_movie_img:after{content: ''; position: absolute; top: calc(50% - 23px); left: calc(50% - 32px); width: 64px; height: 46px; background: url("/sites/corrections/images/main/movieBtn.png") left top no-repeat;} .cor_movie_wrap .cor_movie_img img{width:100%;} .cor_movie_wrap .cor_movie_tit{width: 100%; height: 80px; padding: 12px 16px 16px; background-color: #ececec; overflow: hidden; box-sizing: border-box;} .cor_movie_wrap .cor_movie_tit strong{display: block; width: 100%; font-weight: 500; font-size: 16px; color: #424242; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} /******************************************************************************************* s: 신메인_반응형 ***/ @media all and (max-width: 1200px) { /* 온라인민원서비스바로가기 */ .online_quick_box .cnt_tit_box{display: block;float:none;line-height:1;background:none;} .online_quick_box .cnt_tit_box > br{display:none;} .online_quick_box .cnt_tit_box > span{display:inline-block;vertical-align:baseline;} .online_quick_box .cnt_tit_box .txt_gray{width:51px;margin-left:5px;} .online_quick_box .cnt_tit_box .txt_blue{width:40px;margin-left:3px;} .online_quick_box .cnt_tit_box img{width:100%;} .online_quick_box .online_quick_wrap{float:none;width:100%;margin-top:6px;margin-bottom:10px;} .online_quick_box .online_quick_wrap ul{overflow:hidden;} /* 사이버본부장실 */ .hqmng_box .hqmng_btn_box{background-size:cover;} .baro_quick_list li > a span.br_btn_txt{font-size:1.5vw;} #menu2952_obj20838{clear:both;float:none;width:100%;margin:0 0;padding-top:35px;} #menu1013_obj26393{float:left;width:calc(33.3% - 15px);} #menu1013_obj26394{width:calc(32.3% - 15px);} } @media all and (max-width: 860px) { body.main #_wrap #_wrapArticle{margin-top:0;} body.main #_wrap #_wrapArticle #_container{background-color:#e8eff5;} body.Tablet .baro_quick_list li.onlyMbe, body.Mobile .baro_quick_list li.onlyMbe{display:block;} /* 온라인민원서비스바로가기 */ .online_quick_box .cnt_tit_box{padding-bottom:10px;font-size:20px;} .online_quick_box .cnt_tit_box .txt_gray{width:64px;} .online_quick_box .cnt_tit_box .txt_blue{width:52px;} .online_quick_box .online_quick_wrap ul li{width:calc(100% / 4);} .online_quick_box .online_quick_wrap ul li:nth-child(5):before{display:none;} .online_quick_box .online_quick_wrap ul li:nth-child(n+5){margin-top:10px;} /* 바로가기 */ .btm_cnt_box{background-color:#fff;} .btm_cnt_box .cnt_tit_box{float:none;width:100%;font-size:20px;padding:21px 15px 0 15px;line-height:1;} .btm_cnt_box .cnt_tit_box > span{display:inline-block;margin-left:3px;vertical-align:middle;} .btm_cnt_box .cnt_tit_box > span.txt_gray{width:64px;padding-top:0;vertical-align:top;} .btm_cnt_box .cnt_tit_box > span.txt_blue{width:52px;margin-top:0;vertical-align:top;} .btm_cnt_box .cnt_tit_box > span img{width:100%;} .btm_cnt_box .baro_quick_list{float:none;width:100%;margin-top:10px;} .btm_cnt_box .baro_quick_list > ul{overflow:hidden;margin-top:10px;margin-bottom:10px;} .btm_cnt_box .baro_quick_list li{width:calc(100% / 4);} .btm_cnt_box .baro_quick_list li:nth-child(n+5){margin-top:5px !important;} #menu1013_obj26393{width:49.5%;box-sizing:border-box;} #menu1013_obj26393 .hqmng_box{max-width:100%;height:auto;} #menu1013_obj26394{float:right; width:49.5%;box-sizing:border-box;} /* 홍보배너*/ #multipleContentsDiv_corrections_20842{height:100%;} } @media all and (max-width: 755px) { /* 사이버본부장실 */ .hqmng_box .hqmng_btn_box .left_txt_box{padding:40px 0 44px;} .hqmng_box .hqmng_btn_box .left_txt_box .t02{width: 44%;margin-top:17px;} .hqmng_box .hqmng_btn_box .left_txt_box .t02 img{width:100%;} } @media all and (max-width: 672px) { /* 사이버본부장실 */ .hqmng_box .hqmng_btn_box .left_txt_box{padding:42px 0 47px;} } @media all and (max-width: 640px) { /* 바로가기퀵 */ #menu2952_obj21933{margin-top:15px;} .btm_cnt_box{padding:32px 0 14px 0;background-color:#fff;border:0;border-radius: 20px 20px;} .btm_cnt_box .cnt_tit_box{padding-top:0;} .btm_cnt_box .baro_quick_list{margin-top:0;padding-top:6px;} .btm_cnt_box .baro_quick_list li:nth-child(4) > a:after{display:none;border-color:transparent;} .btm_cnt_box .baro_quick_list li:nth-child(5){clear:both;} .btm_cnt_box .baro_quick_list li > a span.br_btn_txt br{display:inline-block;} } @media all and (max-width: 610px) { .hqmng_box .hqmng_btn_box .left_txt_box .t01{width:44%;padding-left:3%;} .hqmng_box .hqmng_btn_box .left_txt_box .t01 img{width:100%;} .hqmng_box .hqmng_btn_box .left_txt_box .t02{padding-left:3%;} .rcnt_movie .recentBbsThumb{max-height:157px;} } @media all and (max-width: 420px) { /* 사이버본부장실 */ .hqmng_box .hqmng_btn_box .left_txt_box{padding:34px 0 30px;} /* 바로가기퀵 */ .btm_cnt_box .baro_quick_list li{} .btm_cnt_box .baro_quick_list li > a span.br_btn_txt{font-size:14px;line-height:1.1;} } @media screen and (max-width : 1200px) and (min-width : 860px) { .hqmng_box{max-width:100%;} .hqmng_box ul{position:relative;z-index:999;} .rcnt_movie .recentBbsThumb{max-width:100%;} } @media screen and (max-width : 860px) and (min-width : 670px) { .hqmng_box .hqmng_btn_box{height:260px;background-size:cover;} } @media screen and (max-width : 860px) and (min-width : 320px) { .hqmng_box .hqmng_btn_box .left_txt_box{position:relative;z-index:999;} .hqmng_box ul{position:relative;bottom:1px;z-index:999;} #menu2952_obj20838{padding-top:0;} } @media screen and (max-width : 420px) and (min-width : 320px) { /* 사이버 본부장실 */ #menu1013_obj26393{padding-top:31px;padding-left:15px;padding-right:15px;background-color:#fff;border-radius:25px 25px 0 0;} .hqmng_box{height:auto;max-width:100%;} .hqmng_box .hqmng_btn_box .left_txt_box .t01{width:50%;padding-left:14px;} .hqmng_box .hqmng_btn_box .left_txt_box .t02{width:50%;padding-left:14px;} .hqmng_box ul li{width:calc(100% / 2 - 4px);height:44px;} .hqmng_box ul li:nth-child(3){margin-left:0;} .hqmng_box ul li:nth-child(3), .hqmng_box ul li:nth-child(4){margin-top:4px !important;} .hqmng_box ul li a{font-size:14px;line-height:1.1;} .hqmng_box ul li a > br{display:none;} #menu1013_obj26393{float:none;width:100%;} #menu1013_obj26394{float:none;width:100%;} } @media screen and (max-width : 375px) and (min-width : 320px) { } /******************************************************************************************* e: 신메인_반응형 ***/ /********************************************************************************************************** SUB_contents */ body.Mobile {min-width: 320px;} ._contentBuilder ._obj._objHtml .tableWrap table tbody td.bggray, ._contentBuilder .tableWrap table tbody td.bggray {background-color: #fbfbfb;} ._contentBuilder ._obj._objHtml ol.ko > li, ._contentBuilder ._obj._objTag ol.ko > li {list-style-type: hangul;} .pc_mode, .mobile_mode {display: none;} body.Desktop .pc_mode, body.Tablet .pc_mode, body.Mobile .mobile_mode {display: block; margin: 0 auto;} .text_hidden {position: absolute; top: 0; left: 0; text-indent: -5000000px;} ._contentBuilder ._obj._objHtml .tableWrap table img, ._contentBuilder ._obj._objTag .tableWrap table img, ._contentBuilder .tableWrap table img {max-width: 100%;} .jt td img{width:65%} /********************************************************************************************************** images */ .img_wrap {display: table-cell; vertical-align: top;} .img_wrap .img {border-width: 10px; border-style: solid; border-image: url("../../images/contents/img_shadow.png") 10 round; text-align: center; display: inline-block; margin-right:10px} .img_wrap .img > img {margin: -10px 0 0 -10px;} .img_wrap .img .img_no {color: #bdbdbd; font-weight: 200; position: relative; width: 350px; height: 210px; margin: -10px 0 0 -10px; background-color: #e1e1e1; box-sizing: border-box; padding-top: 70px;} .img_wrap .img .img_no.h170 {height: 170px; width: 280px; padding-top: 50px;} .img_wrap .img .img_no:before {content: ""; display: block; background: url("../../images/contents/no_image.png") center top no-repeat; width: 74px; height: 40px; margin: 0 auto 15px auto;} .img_wrap .img .img_whiteBg {background-color: #FFF; border: 1px solid #ebebeb; box-sizing: border-box; text-align: center; margin: -10px 0 0 -10px; display: table; width: 180px;} .img_wrap .img .img_whiteBg.w350 {width: 350px;} .img_wrap .img .img_whiteBg p {display: table-cell; vertical-align: middle; height: 180px;} .img_wrap .img .img_whiteBg.w350 p {height: 350px;} .img_wrap .img .img_whiteBg p img{/*padding: 20px 10px;*/ max-width: 100%;width:80%} /********************************************************************************************************** images 2020.11 추가 */ .img_wrap .img2 {border-width: 10px; border-style: solid; border-image: url("../../images/contents/img_shadow.png") 10 round; text-align: center; display: inline-block;} .img_wrap .img2 > img {margin: -10px 0 0 -10px;} .img_wrap .img2 .img_no {color: #bdbdbd; font-weight: 200; position: relative; width: 350px; height: 210px; margin: -10px 0 0 -10px; background-color: #e1e1e1; box-sizing: border-box; padding-top: 70px;} .img_wrap .img2 .img_no.h170 {height: 170px; width: 280px; padding-top: 50px;} .img_wrap .img2 .img_no:before {content: ""; display: block; background: url("../../images/contents/no_image.png") center top no-repeat; width: 74px; height: 40px; margin: 0 auto 15px auto;} .img_wrap .img2 .img_whiteBg {background-color: #FFF; border: 1px solid #ebebeb; box-sizing: border-box; text-align: center; display: table; width: 180px;} .img_wrap .img2 .img_whiteBg.w350 {width: 350px;} .img_wrap .img2 .img_whiteBg p {display: table-cell; vertical-align: middle; height: 180px;} .img_wrap .img2 .img_whiteBg.w350 p {height: 350px;} .img_wrap .img2 .img_whiteBg p img {padding: 20px 10px; max-width: 100%;width: 80%;} /* tablet */ body.Tablet .img_wrap .img .img_no {width: 250px;} body.Tablet .img_wrap .img .img_whiteBg.w350 {width: 290px;} body.Tablet .img_wrap.w100 .img img, body.Mobile .img_wrap.w100 .img img {max-width: 103%;} /* mobile */ body.Mobile .img_wrap .img .img_no {width: 250px;} body.Mobile .img_wrap .img .img_whiteBg.w350 {width: auto;} body.Mobile .img_wrap .img .img_whiteBg.w350 p {height: auto;} .img_pro {overflow: hidden; display: block;} .img_pro > li {float: left; width: 33.3%; display: inline-table; vertical-align: top; box-sizing: border-box;} .img_pro > li img {max-width: 103%; height: 230px;width:350px} /* mobile */ body.Mobile .img_pro > li {width: 100%; margin-bottom: 15px;} /********************************************************************************************************** text box type */ .bgLineBox {background-color: #f5f5f5; padding: 20px; position: relative; text-align: center;} .bgLineBox img {max-width: 100%;} body.Tablet .bgLineBox, body.Mobile .bgLineBox {padding: 10px 5px;} .bgLineBox_img {border-width: 5px; border-style: solid; border-image: url("../../images/contents/line_box_bg.png") 5 round; box-sizing: border-box; width: 100%; padding: 20px;} .bgLineBox_img > ul {overflow: hidden; display: table; width: 100%;} .bgLineBox_img > ul > li {float: left; width: 49.5%; box-sizing: border-box; padding: 20px 20px 0 0; display: inline-table; vertical-align: top;} .bgLineBox_img > ul > li:nth-child(1), .bgLineBox_img > ul > li:nth-child(2) {padding-top: 0;} .bgLineBox_img > ul > li .icon {display: table-cell; vertical-align: top; width:120px; max-width: 120px; height: 120px; background-color: #f5f5f5; border-radius: 100%; text-align: center; position: relative; overflow: hidden; float: left;} .bgLineBox_img > ul > li .icon:after {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; z-index: 1; background-color: #e0e6f2;} .bgLineBox_img > ul > li .icon img {position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -30px; z-index: 3;} .bgLineBox_img > ul > li .text {display: table-cell; vertical-align: middle; padding-left: 20px; width: 100%;} .bgLineBox_img > ul > li .text .title {margin-bottom: 10px;} .bgLineBox_img > ul > li .text .title strong {color: #2460db; font-size: 16px; font-weight: 400;} body.Desktop .bgLineBox_img > ul > li:nth-child(2n+1) {clear:both;} /* tablet */ body.Tablet .bgLineBox_img > ul > li {width: 100%; padding: 0; margin-top: 20px !important;} body.Tablet .bgLineBox_img > ul > li:first-child {margin-top: 0 !important;} body.Tablet .bgLineBox_img.m_alignC > ul > li {width: 50%;} body.Tablet .bgLineBox_img.m_alignC > ul > li:first-child, body.Tablet .bgLineBox_img.m_alignC > ul > li:nth-child(2) {margin-top: 0 !important;} @media screen and (max-width : 630px) { body.Tablet .bgLineBox_img.m_alignC > ul > li {width: 100%;} body.Tablet .bgLineBox_img.m_alignC > ul > li:nth-child(2) {margin-top: 20px !important;} } /* mobile */ body.Mobile .bgLineBox_img.m_alignC {text-align: center;} body.Mobile .bgLineBox_img > ul > li {width: 100%; padding: 0; margin-top: 20px !important;} body.Mobile .bgLineBox_img > ul > li:first-child {margin-top: 0 !important;} body.Mobile .bgLineBox_img > ul > li .icon {display: block; float: none; margin: 0 auto 15px auto;} body.Mobile .bgLineBox_img > ul > li .text {display: block; padding-left: 0;} body.Mobile .bgLineBox_img > ul > li .text.center {text-align: center;} body.Mobile .bgLineBox_img > ul > li .text .title {text-align: center;} /********************************************************************************************************** 왼쪽이미지 리스트 type1 */ .line_1 > ul > li {border-bottom: 1px solid #ebebeb; background: url("../../images/contents/bg_02.png") right top no-repeat; padding-bottom: 30px; margin-bottom: 30px; overflow: hidden;} .line_1.bgNo > ul > li {background: none;} .line_1 > ul > li:last-child {border-bottom: 0; padding-bottom: 0;} .line_1 > ul > li > .img_wrap {float: left;} .line_1 > ul > li > dl {display: table-cell; vertical-align: top; padding: 10px 70px 0 30px; width: 100%;} .line_1.bgNo > ul > li > dl {padding-right: 0;} .line_1 > ul > li > .text {display: table-cell; vertical-align: top; padding: 10px 0 0 30px;} /* tablet */ body.Tablet .line_1 > ul > li {background: none;} body.Tablet .line_1 > ul > li > dl, body.Tablet .line_1 > ul > li > .text {padding: 10px 0 0 30px;} @media screen and (max-width : 630px) { body.Tablet .line_1 > ul > li > .img_wrap {float: none;} body.Tablet .line_1 > ul > li > dl, body.Tablet .line_1 > ul > li > .text {display: block; padding: 30px 0 0;} } /* mobile */ body.Mobile .line_1 > ul > li {background: none;} body.Mobile .line_1 > ul > li > .img_wrap {float: none;} body.Mobile .line_1 > ul > li > dl, body.Mobile .line_1 > ul > li > .text {display: block; padding: 30px 0 0;} /********************************************************************************************************** 왼쪽이미지 리스트 type2 */ .line_2 > ul > li {display: table; width: 100%; padding-top: 30px;} .line_2 > ul > li .img_wrap {padding-right: 30px;} .line_2 > ul > li .img_wrap.unvis {position: absolute; visibility: hidden;} .line_2 > ul > li > dl {display: table-cell; vertical-align: top; width: 100%;} .line_2 > ul > li > dl dt {position: relative; padding-left: 60px; color: #333; font-size: 18px; font-weight: 400; padding: 13px 0 25px 60px; margin-bottom: 15px;} .line_2 > ul > li > dl dt:before {content: ""; position: absolute; top: 0; left: 0; background: url("../../images/contents/sub_03_05_icon.png") left top no-repeat; width: 50px; height: 50px;} .line_2 > ul > li > dl.icon01 dt:before {background-position: left top;} .line_2 > ul > li > dl.icon02 dt:before {background-position: left -50px;} .line_2 > ul > li > dl.icon03 dt:before {background-position: left -100px;} .line_2 > ul > li > dl.icon04 dt:before {background-position: left -150px;} .line_2 > ul > li > dl.icon05 dt:before {background-position: left -200px;} .line_2 > ul > li > dl.icon06 dt:before {background-position: left -250px;} .line_2 > ul > li > dl.icon07 dt:before {background-position: left -300px;} .line_2 > ul > li > dl.icon08 dt:before {background-position: left -350px;} .line_2 > ul > li > dl.icon09 dt:before {background-position: left -400px;} .line_2 > ul > li > dl.icon10 dt:before {background-position: left -450px;} .line_2 > ul > li > dl.icon11 dt:before {background-position: left -500px;} .line_2 > ul > li > dl dt:after {content: ""; width: 280px; height: 1px; background-color: #2460db; position: absolute; bottom: 0; left: -70px; z-index: 3; /* temporary added */ left: 0; width: 30px;} .line_2.iconNo > ul > li > dl dt {padding-left: 0;} .line_2.iconNo > ul > li > dl dt:before {display: none;} /* tablet */ body.Tablet .line_2 > ul > li .img_wrap .img img {width: 250px;} body.Tablet .line_2.info > ul > li .img_wrap .img img {width: auto;} @media screen and (max-width : 550px) { body.Tablet .line_2 > ul > li .img_wrap {display: none;} body.Tablet .line_2.info > ul > li .img_wrap {display: block;} body.Tablet .line_2.info > ul > li > dl {display: block;} } /* mobile */ body.Mobile .line_2 > ul > li .img_wrap {display: none;} body.Mobile .line_2.info > ul > li .img_wrap {display: block;} body.Mobile .line_2.info > ul > li > dl {display: block;} /********************************************************************************************************** 오른쪽이미지 리스트 type */ .list_type1 > ul > li {display: table; width: 100%; border-top: 1px solid #ebebeb; padding-top: 30px; margin-bottom: 30px;} .list_type1 > ul > li dl {display: table-cell; vertical-align: top; position: relative;} .list_type1 > ul > li dl dt {display: table-cell; vertical-align: top; color: #333; font-size: 18px; font-weight: 400; width: 110px; box-sizing: border-box; padding: 0 10px 70px 10px;} .list_type1 > ul > li dl dt:before {content: ""; position: absolute; top: -31px; left: 0; width: 110px; height: 1px; background-color: #2460db;} .list_type1 > ul > li dl dt:after {content: ""; position: absolute; bottom: 0; left: 10px; width: 65px; height: 60px; background: url("../../images/contents/sub_03_04_icon.png") left top no-repeat;} .list_type1 > ul > li dl.icon01 dt:after {background-position: left top;} .list_type1 > ul > li dl.icon02 dt:after {background-position: left -60px;} .list_type1 > ul > li dl.icon03 dt:after {background-position: left -120px;} .list_type1 > ul > li dl dd {display: table-cell; vertical-align: top; height: 105px; box-sizing: border-box; padding: 0 20px;} .list_type1 > ul > li .img_wrap {padding-left: 20px;} /* tablet */ body.Tablet .list_type1 > ul > li dl {display: block;} body.Tablet .list_type1 > ul > li .img_wrap {display: table; float: right; margin-top: 20px;} /* mobile */ body.Mobile .list_type1 > ul > li dl {display: block;} body.Mobile .list_type1 > ul > li dl dt {display: table; width: 100%; padding: 0 90px 0 0; min-height: 50px;} body.Mobile .list_type1 > ul > li dl dt:after {bottom: auto; top: -18px; right: 0; left: auto;} body.Mobile .list_type1 > ul > li dl dd {padding: 0; display: block; height: auto;} body.Mobile .list_type1 > ul > li .img_wrap {display: table; float: right; margin-top: 20px; padding-left: 0;} /********************************************************************************************************** sub_02_05_02 */ .e-book_intro {overflow: hidden;} .e-book_intro > ul {width: 105%;} .e-book_intro > ul > li {float: left; width: 20%; margin-right: 5%; margin-bottom: 50px;} .e-book_intro > ul > li .img {position: relative; display: table; width: 100%; border: 1px solid #ebebeb; margin-bottom: 20px; text-align: center; box-sizing: border-box;} .e-book_intro > ul > li .img > p {display: table-cell; vertical-align: middle; height: 230px;} .e-book_intro > ul > li .img > p img {max-width: 100%;} .e-book_intro > ul > li .img > a {position: absolute; bottom: -1px; right: -1px; background-color: #25a1db; width: 40px; height: 40px; z-index: 3; text-indent: -5000px;} .e-book_intro > ul > li .img > a.go {background-color: #2460db;} .e-book_intro > ul > li .img > a:after {content: ""; background: url("../../images/contents/arrow_3.png") left top no-repeat; width: 40px; height: 40px; position: absolute; top: 0; left: 0;} .e-book_intro > ul > li .img > a.go:after {background-position: right top;} .e-book_intro > ul > li .text {display: block;} .e-book_intro > ul > li .text .title {border-bottom: 1px solid #c4c4c4; color: #333; padding-bottom: 7px; margin-bottom: 7px;} body.Desktop .e-book_intro > ul > li:nth-child(4n+1) {clear: both;} /* tablet */ body.Tablet .e-book_intro > ul > li {width: 28.3%;} body.Tablet .e-book_intro > ul > li:nth-child(3n+1) {clear: both;} @media screen and (max-width : 600px) { body.Tablet .e-book_intro > ul > li {width: 45%;} body.Tablet .e-book_intro > ul > li:nth-child(3n+1) {clear: none;} body.Tablet .e-book_intro > ul > li:nth-child(2n+1) {clear: both;} } /* mobile */ body.Mobile .e-book_intro > ul {width: 100%;} body.Mobile .e-book_intro > ul > li {width: 100%; margin: 0;} /********************************************************************************************************** sub_03_01 */ .step_1_1 .head_text {text-align: center; margin-bottom: 30px;} .step_1_1 .head_text p {color: #053863; font-size: 16px;} .step_1_1 .head_text p.h1 {color: #2460db; font-size: 28px; font-weight: 400;} .step_1_1 > ol {padding-left: 0 !important; overflow: hidden;} .step_1_1 > ol > li {position: relative; list-style: none !important; padding: 0 0 0 5px; margin: 0 0 20px 0 !important; float: left; width: 16.6%; box-sizing: border-box;} .step_1_1 > ol > li > .title {background-color: #f5f5f5; text-align: center; min-height: 120px; border-radius: 10px; display: table; width: 95%; box-sizing: border-box; padding: 25px 20px; position: relative; z-index: 2;} .step_1_1 > ol > li > .title p {position: relative; color: #333; font-size: 18px; line-height: 1.3; display: table-cell; vertical-align: top;} .step_1_1 > ol > li > .title p span {display: block; font-size: 15px; color: #333;} .step_1_1 > ol > li > .title p:before {content: "00"; display: block; font-style: italic; color: #333; font-size: 18px;} .step_1_1 > ol > li:nth-child(1) > .title p:before {content: "01";} .step_1_1 > ol > li:nth-child(2) > .title p:before {content: "02";} .step_1_1 > ol > li:nth-child(3) > .title p:before {content: "03";} .step_1_1 > ol > li:nth-child(3) > .title.no2 p:before {content: "03-1";} .step_1_1 > ol > li:nth-child(4) > .title p:before {content: "04";} .step_1_1 > ol > li:nth-child(5) > .title p:before {content: "05";} .step_1_1 > ol > li:nth-child(6) > .title p:before {content: "06";} .step_1_1 > ol > li:nth-child(7) > .title p:before {content: "07";} .step_1_1 > ol > li:nth-child(8) > .title p:before {content: "08";} .step_1_1 > ol > li:nth-child(9) > .title p:before {content: "09";} .step_1_1 > ol > li:nth-child(10) > .title p:before {content: "10";} .step_1_1 > ol > li > .title p:after {content: ""; position: absolute; top: 50%; right: -5%; background: url("../../images/contents/arrow.png") left top no-repeat; width: 10px; height: 6px; margin-top: -3px; transform: translateY(0px) rotate(-90deg);} .step_1_1 > ol > li > ul {border: 1px solid #ebebeb; border-radius: 10px; padding: 90px 5px 15px 15px; margin: -85px 0px 30px 10px; text-align: left; box-sizing: border-box; min-height: 265px; background-color: #FFF;} .step_1_1 > ol > li:first-child > ul {border-color: #91afed;} .step_1_1 > ol > li:first-child > .title {background-color: #2460db;} .step_1_1 > ol > li:last-child > ul {border-color: #92d0ed;} .step_1_1 > ol > li:last-child > .title {/*background-color: #25a1db;*/background-color:#1380A6;}/* 220308_웹접근성수정 */ .step_1_1 > ol > li > .title em{position:absolute;left:-9999em;overflow:hidden;width:1px;height:1px;margin:-1px -1px;padding:0;}/* 220308_추가 */ .step_1_1 > ol > li:nth-child(3) > ul:last-child {border-color: #cad2d7; margin-bottom: 0;} .step_1_1 > ol > li:nth-child(3) > .title.no2 {background-color: #51697c;} .step_1_1 > ol > li:first-child > .title p, .step_1_1 > ol > li:first-child > .title p span, .step_1_1 > ol > li:first-child > .title p:before, .step_1_1 > ol > li:last-child > .title p, .step_1_1 > ol > li:last-child > .title p span, .step_1_1 > ol > li:last-child > .title p:before, .step_1_1 > ol > li:nth-child(3) > .title.no2 p, .step_1_1 > ol > li:nth-child(3) > .title.no2 p span, .step_1_1 > ol > li:nth-child(3) > .title.no2 p:before {color: #FFF;} .step_1_1 > ol > li:first-child > .title p:after {background-position: right top;} .step_1_1 > ol > li:nth-child(3) > .title.no2 p:after, .step_1_1 > ol > li:last-child > .title p:after {display: none;} .step_1_1 > ol > li > ul {overflow: hidden;} .step_1_1 > ol > li > ul > li {position: relative; padding: 0 5px 0 7px; box-sizing: border-box; margin: 2px 0 !important; letter-spacing: -1px;} .step_1_1 > ol > li > ul > li:before {content: ""; position: absolute; top: 10px; left: 0; background-color: #2460db; width: 2px; height: 2px;} .step_1_1 > ol > li > ul.w2 > li {float: left; width: 50%;} .step_1_1 > ol > li > ul.w2 > li:last-child {width: 100%;} .step_1_1 > ol > li > ul > li > ul > li {position: relative; padding-left: 10px; color: #888; font-size:14px;} .step_1_1 > ol > li > ul > li > ul > li:before {content: "-"; position: absolute; top: 0; left: 0;} .step_1_1 > ol > li:nth-child(2):before, .step_1_1 > ol > li:nth-child(2):after {content: ""; position: absolute; bottom: -60px; left: 55%; border: 0.5px dashed #CCC; z-index: -1;} .step_1_1 > ol > li:nth-child(2):before {height: 100%;} .step_1_1 > ol > li:nth-child(2):after {width: 100%;} /*tablet*/ body.Tablet .step_1_1 > ol > li {width: 33.3%;} body.Tablet .step_1_1 > ol > li:nth-child(3n+1) {clear: both;} @media screen and (max-width : 560px) { body.Tablet .step_1_1 > ol > li {width: 50%;} body.Tablet .step_1_1 > ol > li:nth-child(3n+1) {clear: none;} body.Tablet .step_1_1 > ol > li:nth-child(4) {clear: both;} body.Tablet .step_1_1 > ol > li:nth-child(2):before, body.Tablet .step_1_1 > ol > li:nth-child(2):after {bottom: -430px;} body.Tablet .step_1_1 > ol > li:nth-child(2):before {height: 160%;} body.Tablet .step_1_1 > ol > li:nth-child(2):after {width: 55%; left: 0;} } /*mobile*/ body.Mobile .step_1_1 > ol > li {width: 100%;} body.Mobile .step_1_1 > ol > li > ul {min-height: auto; margin-bottom: 10px;} body.Mobile .step_1_1 > ol > li:nth-child(3) > .title, body.Mobile .step_1_1 > ol > li:nth-child(3) > ul {float: left; width: 75%;} body.Mobile .step_1_1 > ol > li:nth-child(2):before, body.Mobile .step_1_1 > ol > li:nth-child(2):after {left: 90%; bottom: -100%;} body.Mobile .step_1_1 > ol > li:nth-child(2):before {height: 160%;} body.Mobile .step_1_1 > ol > li:nth-child(2):after {width: 90%; left: 0;} /********************************************************************************************************** sub_04_01 */ .sub_04_01 .title {background:url("../../images/contents/sub_04_01_01.png") center center no-repeat; max-width: 490px; height: 190px; width: 100%; text-indent: -5000px; margin: 0 auto 20px auto; display: block; background-size: 100%;} .sub_04_01 > ul {background: url("../../images/contents/sub_04_01_01_bg.png") center top no-repeat; display: table; max-width: 863px; margin: 0 auto; box-sizing: border-box; min-height: 225px; text-align: center;} .sub_04_01 > ul > li {display: inline-table; vertical-align: top; width: 220px; text-align: center; margin-left: -2%; margin-top: -2% !important;} .sub_04_01 > ul > li p {display: table-cell; vertical-align: middle; background-color: rgba(242,132,34,0.8); border-radius: 100%; color: #400040; font-size: 16px; line-height: 1.3; height: 220px; box-sizing: border-box; padding: 0 25px; word-break: keep-all;} .sub_04_01 > ul > li:nth-child(2) p {background-color: rgba(249,161,27,0.8);} .sub_04_01 > ul > li:nth-child(3) p {background-color: rgba(55,181,71,0.8);} .sub_04_01 > ul > li:nth-child(4) p {background-color: rgba(2,173,243,0.8);} .sub_04_01 > ul > li p span {display:block; font-size: 13px; color: #400040} /* tablet */ body.Tablet .sub_04_01 > ul {background: none; margin-left: 2%;} body.Tablet .sub_04_01 .title {margin-bottom: 0;} @media screen and (max-width : 520px) { body.Tablet .sub_04_01 > ul > li {width: 180px;} body.Tablet .sub_04_01 > ul > li p {height: 180px;} } /* mobile */ body.Mobile .sub_04_01 .title {margin-bottom: 0;} body.Mobile .sub_04_01 > ul {background: none;} body.Mobile .sub_04_01 > ul > li {width: 170px; margin-left: 0; margin-top: -4% !important;} body.Mobile .sub_04_01 > ul > li p {height: 170px;} .sub_04_icon {overflow: hidden;} .sub_04_icon > ul {display: table; width: 101%;} .sub_04_icon > ul > li {display: inline-table; width: 32.3%; position: relative; box-sizing: border-box; padding: 15px 20px 10px 95px; background-color: #dae1e9; height: 100px; margin: 0 1% 1% 0; float: left;} .sub_04_icon.type2 > ul > li {background-color: #edf4f7;} .sub_04_icon > ul > li:nth-child(even) {background-color: #e6ebf1;} .sub_04_icon.type2 > ul > li:nth-child(even) {background-color: #dbe9f0;} .sub_04_icon > ul > li:before {content: ""; position: absolute; top: 50%; left: 20px; width: 50px; height: 50px; margin-top: -25px; background: url("../../images/contents/sub_04_01_icon.png") left top no-repeat;} .sub_04_icon > ul > li.icon01:before {background-position: left top;} .sub_04_icon > ul > li.icon02:before {background-position: left -49px;} .sub_04_icon > ul > li.icon03:before {background-position: left -99px;} .sub_04_icon > ul > li.icon04:before {background-position: left -149px;} .sub_04_icon > ul > li.icon05:before {background-position: left -199px;} .sub_04_icon > ul > li.icon06:before {background-position: left -249px;} .sub_04_icon > ul > li:after {content: ""; position: absolute; bottom: 50px; right: 60px; width: 10px; height: 10px; background-color: #3970df; border-radius: 100%;} .sub_04_icon.type2 > ul > li:after {background-color: #25a1db;} .sub_04_icon > ul > li:nth-child(2):after {right: 40px;} .sub_04_icon > ul > li:nth-child(3):after {right: 20px;} .sub_04_icon > ul > li:nth-child(4):after {right: 60px; bottom: 30px;} .sub_04_icon > ul > li:nth-child(5):after {right: 40px; bottom: 30px;} .sub_04_icon > ul > li:nth-child(6):after {right: 20px; bottom: 30px;} .sub_04_icon > ul > li:nth-child(7):after {right: 60px; bottom: 10px;} .sub_04_icon > ul > li:nth-child(8):after {right: 40px; bottom: 10px;} .sub_04_icon > ul > li:nth-child(9):after {right: 20px; bottom: 10px;} .sub_04_icon > ul > li.numZero:after {right: 40px; bottom: 10px;} .sub_04_icon > ul > li.numFive:after {right: 40px; bottom: 30px;} .sub_04_icon > ul > li.numSix:after {right: 20px; bottom: 30px;} .sub_04_icon > ul > li > p {position: relative; font-size: 16px; color: #333; display: table-cell; vertical-align: top; background: url("../../images/contents/sub_04_01_list_icon.png") right bottom no-repeat; font-weight: 400; padding-right: 60px; word-break: keep-all; line-height: 1.3; text-align: left;} .sub_04_icon > ul > li > p:before {content: "00"; display: block; color: #333; margin-bottom: 5px; font-size: 18px;} .sub_04_icon > ul > li:nth-child(1) > p:before {content: "01";} .sub_04_icon > ul > li:nth-child(2) > p:before {content: "02";} .sub_04_icon > ul > li:nth-child(3) > p:before {content: "03";} .sub_04_icon > ul > li:nth-child(4) > p:before {content: "04";} .sub_04_icon > ul > li:nth-child(5) > p:before {content: "05";} .sub_04_icon > ul > li:nth-child(6) > p:before {content: "06";} .sub_04_icon > ul > li:nth-child(7) > p:before {content: "07";} .sub_04_icon > ul > li:nth-child(8) > p:before {content: "08";} .sub_04_icon > ul > li:nth-child(9) > p:before {content: "09";} .sub_04_icon > ul > li.numZero > p:before {content: "00";} body.Desktop .sub_04_icon > ul > li:nth-child(3n+1) {clear:both;} /* tablet */ body.Tablet .sub_04_icon > ul > li {width: 49%;} body.Tablet .sub_04_icon > ul > li:nth-child(odd) {clear:both;} @media screen and (max-width : 600px) { body.Tablet .sub_04_icon > ul {width: 100%;} body.Tablet .sub_04_icon > ul > li {width: 100%; margin: 0 0 10px 0;} } /* mobile */ body.Mobile .sub_04_icon > ul {width: 100%;} body.Mobile .sub_04_icon > ul > li {width: 100%; margin: 0 0 10px 0;} /********************************************************************************************************** sub_04_03_03 */ .step_2_1 > ul {text-align: center; display: table; margin-left: 1%; box-sizing: border-box;} .step_2_1 > ul > li {display: inline-table; vertical-align: top; width: 33.3%; margin-left: -1%; word-break: keep-all;} .step_2_1 > ul > li dl dt {display: table; width: 102%; background-color: #002e8d; border-radius: 50px; position: relative; margin-bottom: 30px;} .step_2_1 > ul > li:nth-child(2) dl dt {background-color: rgba(36,96,219,0.8); z-index: 3;} .step_2_1 > ul > li:nth-child(3) dl dt {background-color: #25a1db;} .step_2_1 > ul > li dl dt em {color: #FFF; display: table-cell; vertical-align: middle; height: 85px; padding: 0 20px;} .step_2_1 > ul > li dl dd {position: relative; font-size: 14px; text-align: left; padding: 0 20px;} .step_2_1 > ul > li dl dd span {display: block; color: #888; margin-top: 10px;} .step_2_1 > ul > li dl dd:before {content: ""; position: absolute; top: -45px; left: 50%; margin-left: -1px; background-color: #ccc; width: 1px; height: 35px; z-index: 3;} /* tablet */ @media screen and (max-width : 540px) { body.Tablet .step_2_1 {padding: 20px;} body.Tablet .step_2_1 > ul {margin-left: 0;} body.Tablet .step_2_1 > ul > li {display: block; margin-left: 0; width: 100%; margin-bottom: 20px;} body.Tablet .step_2_1 > ul > li:last-child {margin-bottom: 0;} body.Tablet .step_2_1 > ul > li dl dt {width: 100%;} } /* mobile */ body.Mobile .step_2_1 {padding: 20px;} body.Mobile .step_2_1 > ul {margin-left: 0;} body.Mobile .step_2_1 > ul > li {display: block; margin-left: 0; width: 100%; margin-bottom: 20px;} body.Mobile .step_2_1 > ul > li:last-child {margin-bottom: 0;} body.Mobile .step_2_1 > ul > li dl dt {width: 100%;} /********************************************************************************************************** sub_03_07 */ .history_list > ul > li > dl {display: table; width: 100%; overflow: hidden; position: relative;} .history_list > ul > li > dl:after {content: ""; position: absolute; top: 0; left: 104px; width: 1px; height: 100%; background-color: #2460db;} .history_list > ul > li:first-child > dl:after {top: 10px;} .history_list > ul > li:last-child > dl:after {background: linear-gradient(#2460db,#d0ddf7,#eef3fc,#ffffff);} .history_list > ul > li > dl dt {display: table-cell; vertical-align: top; width: 110px; color: #333; font-size: 18px; position: relative;} .history_list > ul > li > dl dt:before {content: ""; position: absolute; top: 8px; right: 0; width: 11px; height: 11px; background-color: #2460db; border-radius: 100%; z-index: 3;} .history_list > ul > li > dl dd {display: table-cell; vertical-align: top; padding: 0 0 30px 30px;} .history_list > ul > li:last-child > dl dd {padding-bottom: 0;} /* mobile */ body.Mobile .history_list > ul > li > dl:after {left: 5px;} body.Mobile .history_list > ul > li > dl dt {display: block; width: 100%; padding-left: 20px;} body.Mobile .history_list > ul > li > dl dt:before {left: 0; right: auto;} body.Mobile .history_list > ul > li > dl dd {display: block; padding: 20px 0 30px 20px;} /********************************************************************************************************** sub_04_03_02 */ .mobile_step {padding: 30px 40px 0 40px;} .mobile_step > ul {display: table; width: 100%; position: relative; text-align: center;} .mobile_step > ul > li {display: inline-table; vertical-align: top; position: relative; width: 33%; margin-bottom: 40px; box-sizing: border-box; padding: 0 20px; /*float: left;*/ table-layout: fixed;} .mobile_step > ul > li:after {content: ""; position: absolute; top: 55px; left: 0; width: 100%; height: 1px; background-color: #ccc;} .mobile_step > ul.w2 > li {width: 49.8%;} .mobile_step > ul.w4 > li {width: 24.7%;} .mobile_step > ul > li > dl {max-width: 200px; margin: 0 auto; text-align: left;} .mobile_step > ul > li > dl:before, .mobile_step > ul > li > dl:after {content: ""; position: absolute; background-color: #295dc7; width: 30px; height: 1px; right: -15px; top: 55px; z-index: 3;} .mobile_step > ul > li > dl:before {transform: translateY(-10px) rotate(-140deg); right: -18px;} .mobile_step > ul > li:last-child > dl:before, .mobile_step > ul > li:last-child > dl:after {display: none;} .mobile_step > ul > li > dl dt {color: #333;} .mobile_step > ul > li > dl dt em {font-weight: 500; color: #333; display: block; margin-bottom: 5px;} .mobile_step > ul > li > dl dd {margin-top: 40px; min-height: 85px;} .mobile_step > ul.w4 > li > dl dd {font-size: 14px;} /* desktop */ body.Desktop .mobile_step > ul > li:nth-child(3n+3) > dl:before, body.Desktop .mobile_step > ul > li:nth-child(3n+3) > dl:after, body.Desktop .mobile_step > ul.w4 > li:nth-child(4n+4) > dl:before, body.Desktop .mobile_step > ul.w4 > li:nth-child(4n+4) > dl:after {display: none;} body.Desktop .mobile_step > ul > li:nth-child(6n+4), body.Desktop .mobile_step > ul > li:nth-child(6n+5), body.Desktop .mobile_step > ul > li:nth-child(6n+6) {float: right;} body.Desktop .mobile_step > ul > li:nth-child(6n+4) > dl:before, body.Desktop .mobile_step > ul > li:nth-child(6n+4) > dl:after, body.Desktop .mobile_step > ul > li:nth-child(6n+5) > dl:before, body.Desktop .mobile_step > ul > li:nth-child(6n+5) > dl:after, body.Desktop .mobile_step > ul > li:nth-child(6n+6) > dl:before, body.Desktop .mobile_step > ul > li:nth-child(6n+6) > dl:after {right: auto; left: -15px;} body.Desktop .mobile_step > ul > li:nth-child(6n+4) > dl:before, body.Desktop .mobile_step > ul > li:nth-child(6n+5) > dl:before, body.Desktop .mobile_step > ul > li:nth-child(6n+6) > dl:before {transform: translateY(-10px) rotate(-220deg); right: auto; left: -18px;} body.Desktop .mobile_step > ul.w4 > li:nth-child(3n+3) > dl:before, body.Desktop .mobile_step > ul.w4 > li:nth-child(3n+3) > dl:after {display: block;} body.Desktop .mobile_step > ul.w4 > li:nth-child(6n+4) {float: none;} /* tablet */ body.Tablet .mobile_step {padding: 30px 20px 0 20px;} @media screen and (max-width : 840px) { body.Tablet .mobile_step > ul > li {width: 49.5%;} body.Tablet .mobile_step > ul > li:nth-child(2n+2) > dl:before, body.Tablet .mobile_step > ul > li:nth-child(2n+2) > dl:after {display: none;} } /* mobile */ body.Mobile .mobile_step {padding: 20px 0px;} body.Mobile .mobile_step > ul > li {width: 80%; float: none;} body.Mobile .mobile_step > ul.w2 > li, body.Mobile .mobile_step > ul.w4 > li {width: 80%;} body.Mobile .mobile_step > ul > li > dl dt {line-height: 1.1;} body.Mobile .mobile_step > ul > li > dl dd {min-height: auto; margin-top: 30px;} .sub_04_03_02 {display: table; width: 100%; box-sizing: border-box;} .sub_04_03_02 .img {display: inline-table; vertical-align: top; margin-right: 50px; max-width: 200px;} .sub_04_03_02 .text {display: table-cell; vertical-align: middle; text-align: left; width: 65%;} .sub_04_03_02 .text > strong {position: relative; font-size: 22px; color: #333; margin-bottom: 10px; display: block; font-weight: 300;} .sub_04_03_02 .text > strong:before, .sub_04_03_02 .text > strong:after {color: #e5e5e5; font-size: 60px; font-weight: 300; display: inline-block; line-height: 0.4; vertical-align: bottom;} .sub_04_03_02 .text > strong:before {content: " “ "; margin-right: 10px;} .sub_04_03_02 .text > strong:after {content: " ” "; line-height: 0.1; margin-left: 10px;} .sub_04_03_02 .text .qr_text {margin-top: 30px; overflow: hidden;} .sub_04_03_02 .text .qr_text > p {float: left; margin-right: 20px;} .sub_04_03_02 .text .qr_text > dl dt {color: #25a1db; margin-bottom: 10px;} .sub_04_03_02 .text .qr_text > dl dt em {background-color: #25a1db; color: #FFF; border-radius: 5px; margin-right: 5px; display: inline-block; padding: 0 15px;} .sub_04_03_02 .text .qr_text > dl dd {color: #2c2f35;} /* tablet */ body.Tablet .sub_04_03_02.bgLineBox {padding: 20px;} @media screen and (max-width : 560px) { body.Tablet .sub_04_03_02 .img {display: none;} body.Tablet .sub_04_03_02 .text .qr_text > p {float: none; margin: 0 0 10px 0;} } /* mobile */ body.Mobile .sub_04_03_02.bgLineBox {padding: 20px;} body.Mobile .sub_04_03_02 .img {display: none;} body.Mobile .sub_04_03_02 .text .qr_text > p {float: none; margin: 0 0 10px 0;} /********************************************************************************************************** sub_04_03_05 */ .sub_04_03_05 > ul {display: table; width: 100%;} .sub_04_03_05 > ul > li {display: inline-table; vertical-align: top; width: 33.3%; text-align: center; float: left; position: relative;} .sub_04_03_05 > ul > li:after {content: "연결"; text-indent: -5000px; position: absolute; top: 50%; right: -16.5%; max-width: 124px; width: 36%; height: 29px; margin-top: -17.5px; background: url("../../images/contents/arrow_2.png") left top no-repeat; background-size: 100% 29px; z-index: 1;} .sub_04_03_05 > ul > li:last-child:after {display: none;} .sub_04_03_05 > ul > li .shadow {display: table; max-width: 180px; margin: 0 auto; border-width: 10px; border-style: solid; border-image: url("../../images/contents/img_shadow_round.png") 10 round; position: relative; z-index: 3;} .sub_04_03_05 > ul > li .shadow .wrap {margin: -10px 0 0 -10px;} .sub_04_03_05 > ul > li .shadow .wrap p {display: table-cell; vertical-align: middle; color: #333; background-color: #FFF; border: 1px solid #2460db; width: 180px; height: 120px; box-sizing: border-box; border-radius: 10px; font-size: 18px;} .sub_04_03_05 > ul > li .shadow .wrap p span {display: block; margin-top: 3px; font-size: 15px; font-weight: 200;} .sub_04_03_05 > ul > li:first-child .shadow .wrap p {background-color: #2460db; border-color: #2460db; color: #FFF;} .sub_04_03_05 > ul > li:last-child .shadow .wrap p {background-color: #037CC2; border-color: #037CC2; color: #FFF;} .sub_04_03_05 > ul > li:first-child .shadow .wrap p span, .sub_04_03_05 > ul > li:last-child .shadow .wrap p span {color: #FFF;} /* tablet */ body.Tablet .sub_04_03_05 {padding: 20px;} /* mobile */ body.Mobile .sub_04_03_05 {padding: 20px;} body.Mobile .sub_04_03_05 > ul > li {display: block; padding-bottom: 140px; float: none; width: 100%;} body.Mobile .sub_04_03_05 > ul > li:last-child {padding-bottom: 0;} body.Mobile .sub_04_03_05 > ul > li:after {transform: rotate(-270deg); right: auto; left: 32%; top: auto; bottom: 55px; margin-top: 0;} /********************************************************************************************************** sub_04_03_05 */ .icon_list_1 > ul {border-top: 1px solid #ebebeb;} .icon_list_1 > ul > li {border-bottom: 1px solid #ebebeb; padding: 30px 20px 30px 50px; display: table; width: 100%; box-sizing: border-box;} .icon_list_1 > ul > li .icon_wrap {display: inline-block; vertical-align: top; width: 160px; height: 160px; overflow: hidden; text-align: center; position: relative; border-radius: 100%; background-color: #f5f5f5; margin-right: 60px;} .icon_list_1 > ul > li .icon_wrap:after {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; background-color: #e0e6f2;} .icon_list_1 > ul > li .icon_wrap img {margin-top: 50px;} .icon_list_1 > ul > li dl {display: table-cell; vertical-align: middle; width: 100%;} /* tablet */ body.Tablet .icon_list_1 > ul > li {padding: 30px 10px;} body.Tablet .icon_list_1 > ul > li .icon_wrap {margin-right: 40px; width: 140px; height: 140px;} body.Tablet .icon_list_1 > ul > li .icon_wrap img {margin-top: 35px;} /* mobile */ body.Mobile .icon_list_1 > ul > li {padding: 10px;} body.Mobile .icon_list_1 > ul > li .icon_wrap {display: block; margin: 0 auto 20px auto; width: 120px; height: 120px;} body.Mobile .icon_list_1 > ul > li .icon_wrap:after {height: 20px;} body.Mobile .icon_list_1 > ul > li .icon_wrap img {margin-top: 30px;} body.Mobile .icon_list_1 > ul > li dl {display: block;} .step_list {display: table; text-align: center; width: 100%; margin: 20px 0 0 1%;} .step_list > li {width: 25%; display: inline-table; float:left; position: relative; margin: 0 0 5px -10px;} .step_list > li:before, .step_list > li:after {content: ""; position: absolute; top: 22px; right: -1px; width: 8px; height: 1px; background-color: #FFF; z-index: 5;} .step_list > li:before {transform: translateY(0px) rotate(-320deg);} .step_list > li:after {transform: translateY(5px) rotate(-400deg);} .step_list > li:nth-child(even):before, .step_list > li:nth-child(even):after {right: 2px;} .step_list > li:last-child:before, .step_list > li:last-child:after {display: none;} .step_list > li p {display: table-cell; vertical-align: middle; background-color: #317595; border-radius: 50px; color: #FFF; font-size: 14px; height: 50px; position: relative; z-index: 1; padding: 0 15px;} .step_list > li:nth-child(even) p {background-color: #626a7b; z-index: 2;} /* tablet */ body.Tablet .step_list > li {width: 50%;} body.Tablet .step_list > li:nth-child(4n+2) p, body.Tablet .step_list > li:nth-child(4n+3) p {background-color: #4e7ee0;} body.Tablet .step_list > li:nth-child(4n+4) p {background-color: #51b4e2;} @media screen and (max-width : 500px) { body.Tablet .step_list > li {width: 100%; padding-bottom: 20px; margin: 0} body.Tablet .step_list > li:last-child {padding-bottom: 0;} body.Tablet .step_list > li:nth-child(4n+2) p {background-color: #4e7ee0;} body.Tablet .step_list > li:nth-child(4n+3) p {background-color: #51b4e2;} body.Tablet .step_list > li:nth-child(4n+4) p {background-color: #4e7ee0;} body.Tablet .step_list > li:before, body.Tablet .step_list > li:after {right: auto; left: 50%; top: auto; bottom: 7px; background-color: #ccc} body.Tablet .step_list > li:before {transform: translateY(0px) rotate(-310deg);} body.Tablet .step_list > li:after {transform: translateX(5px) rotate(-230deg);} } /* mobile */ body.Mobile .step_list {margin: 20px 0;} body.Mobile .step_list > li {width: 100%; padding-bottom: 20px; margin: 0;} body.Mobile .step_list > li:last-child {padding-bottom: 0;} body.Mobile .step_list > li:before, body.Mobile .step_list > li:after {right: auto; left: 50%; top: auto; bottom: 10px; background-color: #ccc; margin-left: -5px;} body.Mobile .step_list > li:before {transform: translateY(0px) rotate(-310deg);} body.Mobile .step_list > li:after {transform: translateX(5px) rotate(-230deg);} /********************************************************************************************************** sub_04_08 */ .data_img {border: 1px solid #ccc;} .data_img > ul {display: table; width: 100%; table-layout: fixed;} .data_img > ul > li {display: table-cell; vertical-align: middle; position: relative; text-align: center; padding: 40px 10px 90px 10px; width: 50%; box-sizing: border-box;} .data_img > ul > li:first-child {border-right: 1px solid #ccc;} .data_img > ul > li img {max-width: 100%;} .data_img > ul > li p {position: absolute; bottom: 0; left: 0; width: 100%; background-color: #f5f5f5; padding: 10px 5px; box-sizing: border-box; color: #333;} /* mobile */ body.Mobile .data_img > ul > li {display: block; width: 100%;} body.Mobile .data_img > ul > li:first-child {border-right: 0; border-bottom: 1px solid #ccc;} /********************************************************************************************************** sub_04_11 */ .sub_04_11 {background: url("../../images/contents/bg_03.png") left bottom no-repeat;} .sub_04_11 > dl {display: table; width: 100%;} .sub_04_11 > dl dt {display: table-caption; width: 100%; font-size: 30px; color: #333; font-weight: 500;} .sub_04_11 > dl dd {display: table-cell; vertical-align: top; width: 100%; box-sizing: border-box; position: relative; padding: 20px 10px 0 0;} .sub_04_11 > dl dd:nth-child(2) {padding-right: 95px; width: 39%;} .sub_04_11 > dl dd:nth-child(2):after {content: ""; position: absolute; top: 32px; right: 10px; background-color: #295dc7; width: 70px; height: 1px;} .sub_04_11 > dl dd ul {margin-bottom: 40px;} .sub_04_11 > dl dd ul li {margin: 10px 0 !important; font-size: 16px; color: #333;} .sub_04_11 > dl dd ul li:first-child {margin-top: 0 !important;} .sub_04_11 > dl dd ul li span {color: #a2ccf4; font-size: 25px; font-weight: 400;} /* mobile */ body.Mobile .sub_04_11 {background: none;} body.Mobile .sub_04_11 > dl dd {display:block; width: 100%; padding: 20px 0 0;} body.Mobile .sub_04_11 > dl dd:nth-child(2) {padding-right: 0;} body.Mobile .sub_04_11 > dl dd:nth-child(2):after {display: none;} /* 민원안내 > 민원행정서비스 헌장 > 법무부 행정서비스 헌장 */ .charterWrap {background: url('../../images/contents/charter_img.png') center top no-repeat; padding-top: 270px;} .charterWrap .titleWrap {text-align: center; background-color: #fff; max-width: 660px; margin: 0 auto 30px; padding-top: 25px;} .charterWrap .titleWrap .title {color: #333; font-size: 30px; font-weight: 500;} .charterWrap .titleWrap .title:after {content: ''; display: block; width: 70px; height: 1px; background-color: #295dc7; margin: 25px auto;} .charterWrap .process {text-align: center; margin-bottom: 30px;} .charterWrap .process ol {overflow: hidden;} .charterWrap .process ol > li {display: inline-block !important; vertical-align: top; width: 20%; margin-bottom: 20px; margin-right: -3px;} .charterWrap .process ol > li > .num { position: relative; color: #7c86a1; font-size: 20px; font-weight: 500; width: 90px; height: 87px; background: url('../../images/contents/charter_process.png') left top no-repeat; margin: 0 auto 15px; padding-top: 32px; box-sizing: border-box; } .charterWrap .process ol > li > .num:before, .charterWrap .process ol > li > .num:after { content: ''; position: absolute; top: 34px; left: calc(50% - 21px); width: 43px; height: 1px; background-color: #8e9bb6; } .charterWrap .process ol > li > .num:after {top: auto; bottom: 27px;} .charterWrap .process ol > li > .text {color: #333; font-size: 16px;} .bottomArea {font-size: 16px; text-align: center; background-color: #f7f7f7; padding: 40px; box-sizing: border-box;} body.Tablet .charterWrap .process ol > li {width: 30%; margin: 0 1% 20px;} body.Mobile .charterWrap .process ol > li {width: 50%;} body.Tablet .charterWrap, body.Mobile .charterWrap {background-size: 100%; padding-top: 23%; } /********************************************************************************************************** sub_05_02_03 */ .vision_wrap {position: relative; text-align: center; min-height: 885px; box-sizing: border-box; padding-top: 260px; width: 80%; margin: 0 auto;} .vision_wrap:before, .vision_wrap:after {content: ""; position: absolute; background-color: #e5e5e5; z-index: 1;} .vision_wrap:before {top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1px;} .vision_wrap:after {top: 50%; left:0; width: 100%; height: 2px; margin-top: -1px;} .vision_wrap .head {background: url("../../images/contents/vision_head.png") left top no-repeat; width: 385px; height: 330px; display: table; margin: 0 auto; position: relative; z-index: 2;} .vision_wrap .head p {color: #FFF; display: table-cell; vertical-align: middle; font-size: 18px; font-weight: 400; padding: 0 30px; word-break: keep-all;} .vision_wrap .head p em {display: block; color: #FFF; font-size: 32px; position: relative; padding-bottom: 20px; margin-bottom: 20px; line-height: 1.2;} .vision_wrap .head p em:after {content: ""; width: 30px; height: 3px; background-color: #FFF; position: absolute; bottom: 0; left: 50%; margin-left: -15px;} .vision_wrap > ul {display: table; width: 100%;} .vision_wrap > ul > li {display: inline-table; vertical-align: top; position: relative; border: 1px dashed #d8d8d8; box-sizing: border-box; padding: 10px; border-radius: 100%; max-width: 210px; height: 210px; background-color: #FFF; position: absolute; z-index: 3;} .vision_wrap > ul > li:before {content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid #FFF; background-color: #2460db; border-radius: 100%; margin-left: -8px;} .vision_wrap > ul > li > p {display: table-cell; vertical-align: middle; background-color: #f5f5f5; border-radius: 100%; color: #2460db; font-size: 18px; padding: 0 35px; word-break: keep-all;} body.Desktop .vision_wrap > ul > li:nth-child(1) {top: 0; left: 50%; margin-left: -105px !important;} body.Desktop .vision_wrap > ul > li:nth-child(1):before {bottom: 0; top: auto; left: 50%; margin: 0 0 -8px -8px;} body.Desktop .vision_wrap > ul > li:nth-child(2) {top: 50%; right: 0; margin-top: -105px !important;} body.Desktop .vision_wrap > ul > li:nth-child(2):before {top: 50%; left: 0; margin: -8px 0 0 -8px;} body.Desktop .vision_wrap > ul > li:nth-child(3) {bottom: 0; left: 50%; margin-left: -105px !important;} body.Desktop .vision_wrap > ul > li:nth-child(4) {top: 50%; left: 0; margin-top: -105px !important;} body.Desktop .vision_wrap > ul > li:nth-child(4):before {top: 50%; left: auto; right: 0; margin: -8px -8px 0 0;} /*수정*/ .vision_wrap > ul > li.none {display: none;} body.Desktop .vision_wrap > ul > li.bottom {bottom: 0; left: 50%; margin-left: -280px !important;} .vision_wrap > ul > li.bottom {min-width: 560px; max-width: 560px; border: 2px solid #e5e5e5; border-radius: 10px; padding: 25px 30px 40px;} .vision_wrap > ul > li.bottom:before {background-color: #e5e5e5;} .vision_wrap > ul > li.bottom .vision_box {word-break: keep-all;} .vision_wrap > ul > li.bottom .vision_box em {color: #2460db;} .vision_wrap > ul > li.bottom .vision_box .quote {color: #2c2f35; font-size: 22px; margin-bottom: 20px;} .vision_wrap > ul > li.bottom .vision_box .quote:before, .vision_wrap > ul > li.bottom .vision_box .quote:after {content:'“'; display: inline-block; color: #e5e5e5; font-size: 60px; font-weight: 500; height: 0; line-height: 0; vertical-align: middle; margin-right: 5px;} .vision_wrap > ul > li.bottom .vision_box .quote:after {content:'”'; margin-left: 5px; margin-right: 0; vertical-align: bottom;} /* tablet */ body.Tablet .vision_wrap {min-height: auto; padding-top: 0; width: 100%;} body.Tablet .vision_wrap:before, body.Tablet .vision_wrap:after {display: none;} body.Tablet .vision_wrap .head {margin: 0 auto 40px auto;} body.Tablet .vision_wrap > ul > li {position: relative; top: auto; left: auto; max-width: 170px; height: 170px; margin: 20px 1%;} body.Tablet .vision_wrap > ul > li > p {padding: 0 10px;} /* mobile */ body.Mobile .vision_wrap {min-height: auto; padding-top: 0; width: 100%;} body.Mobile .vision_wrap:before, body.Mobile .vision_wrap:after {display: none;} body.Mobile .vision_wrap .head {margin: 0 auto 40px auto; width: 305px; height: 265px; background-size: 100%;} body.Mobile .vision_wrap .head p {padding: 0 70px;} body.Mobile .vision_wrap > ul {display: block;} body.Mobile .vision_wrap > ul > li {position: relative; top: auto; left: auto; max-width: 170px; height: 170px; margin: 20px 1%;} body.Tablet .vision_wrap > ul > li.bottom, body.Mobile .vision_wrap > ul > li.bottom {max-width: 90%; min-width: auto;} body.Mobile .vision_wrap > ul > li > p {padding: 0 10px;} /********************************************************************************************************** sub_05_02_05 */ .grid_wrap {background: url("../../images/contents/symbol_grid.png") left top repeat; border: 1px solid #ededed; display: inline-table; vertical-align: top; min-width: 420px; text-align: center; position: relative; box-sizing: border-box;} .grid_wrap p {display: table-cell; vertical-align: middle; height: 289px;} .grid_wrap p img {padding: 10px 24px; max-width: 100%; box-sizing: border-box;} .symbol_head {display: table; width: 100%; position: relative; text-align: center;} .symbol_head .grid_wrap {margin-right: 100px;} .symbol_head:after {content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: #e5e5e5; margin-top: -1px; z-index: -1;} .symbol_head .symbol_text {display: table-cell; vertical-align: middle;} .symbol_head .symbol_text .wrap {border: 2px solid #e5e5e5; border-radius: 10px; background-color: #FFF; position: relative; padding: 30px 40px; text-align: center;} .symbol_head .symbol_text .wrap:before {content: ""; position: absolute; top: 50%; left: -8px; width: 16px; height: 16px; border: 2px solid #FFF; box-sizing: border-box; background-color: #e5e5e5; margin-top: -8px; border-radius: 100%; z-index: 3;} .symbol_head .symbol_text .wrap strong {position: relative; font-size: 22px; color: #2c2f35; font-weight: 300;} .symbol_head .symbol_text .wrap strong em {color: #2460db;} .symbol_head .symbol_text .wrap strong:before, .symbol_head .symbol_text .wrap strong:after {color: #e5e5e5; font-size: 60px; font-weight: 300; display: inline-block; line-height: 0.4; vertical-align: bottom;} .symbol_head .symbol_text .wrap strong:before {content:'“'; margin-right: 10px;} .symbol_head .symbol_text .wrap strong:after {content: '”'; line-height: 0.1; margin-left: 10px;} .symbol_head .symbol_text .wrap p {margin: 20px 0;} /* tablet */ body.Tablet .grid_wrap {margin: 0 0 40px 0; min-width: auto;} body.Tablet .symbol_head .grid_wrap {display: inline-block;} body.Tablet .symbol_head:after {left: 50%; top: 0; margin: 0 0 0 -1px; width: 1px; height: 100%;} body.Tablet .symbol_head .symbol_text {display: block; width: 100%;} body.Tablet .symbol_head .symbol_text .wrap:before {top: -8px; left: 50%; margin: 0 0 0 -8px;} /* mobile */ body.Mobile .grid_wrap {margin: 0 0 40px 0; min-width: auto; display: table; width: 100%;} body.Mobile .grid_wrap p {height: auto; padding: 10px 0;} body.Mobile .symbol_head:after {left: 50%; top: 0; margin: 0 0 0 -1px; width: 1px; height: 100%;} body.Mobile .symbol_head .symbol_text {display: block; width: 100%;} body.Mobile .symbol_head .symbol_text .wrap {padding: 30px 20px;} body.Mobile .symbol_head .symbol_text .wrap:before {top: -8px; left: 50%; margin: 0 0 0 -8px;} .symbol_list > ul {display: table; width: 100%;} .symbol_list > ul > li {display: inline-table; width: 50%; margin-bottom: 30px; float: left;} .symbol_list > ul > li dl {padding: 10px 30px 0 30px; display: table-cell; vertical-align: top; width: 100%; box-sizing: border-box;} body.Desktop .symbol_list > ul > li:nth-child(odd) {clear: both;} /* tablet */ body.Tablet .symbol_list > ul > li {width: 100%;} /* mobile */ body.Mobile .symbol_list > ul > li {width: 100%;} body.Mobile .symbol_list > ul > li .img_wrap {display: inline-block;} body.Mobile .symbol_list > ul > li dl {display:block; padding: 0; margin-top: 10px;} .signature_list .grid_wrap {padding-bottom: 40px; margin-left: 30px;} .signature_list .grid_wrap:nth-child(1) {margin-left: 0;} .signature_list .grid_wrap.w60 {width: 58%;} .signature_list .grid_wrap.w40 {width: 39%;} .signature_list .grid_wrap .text {position: absolute; bottom: 0; left: 0; width: 100%; background-color: #f0f0f0; padding: 10px 0;} .signature_list.w4 .grid_wrap {min-width: 250px;} /* tablet */ body.Tablet .signature_list .grid_wrap {width: 48%; box-sizing: border-box; float: left; margin-left: 0;} body.Tablet .signature_list .grid_wrap:nth-child(2n+2) {float: right;} body.Tablet .signature_list.w4 .grid_wrap {min-width: auto;} /* mobile */ body.Mobile .signature_list .grid_wrap {margin-left: 0px;} body.Mobile .signature_list .grid_wrap.w60, body.Mobile .signature_list .grid_wrap.w40 {width: 100%;} body.Mobile .signature_list.w4 .grid_wrap {min-width: auto;} /* 20190916 (고석만) */ .signature_wrap { overflow: hidden; } .signature_wrap img { width: 100%; max-width: 425px; } .signature_wrap .signature_list { overflow: hidden; } .signature_wrap .signature_list li { float:left; text-align: center; padding: 15px; word-break: keep-all;} .signature_wrap .signature_list li span { color: #2460db; } .signature_wrap .signature_list li:before { content: ''; display: block; width: 135px; height: 135px; margin: 0 auto 20px auto; border: 1px solid #ddd; border-radius: 50%; background-color: #f7f7f7; background-image: url(/sites/corrections/images/contents/signature_icon.png); background-repeat: no-repeat; overflow: hidden; } .signature_wrap .signature_list li.icon01:before { background-position: 0 0; } .signature_wrap .signature_list li.icon02:before { background-position: -135px 0; } .signature_wrap .signature_list li.icon03:before { background-position: -270px 0; } .signature_wrap .signature_list li.icon04:before { background-position: -405px 0; } .signature_wrap .signature_list.w4 li { width: calc(25% - 30px); } body.Mobile .signature_wrap .signature_list.w4 li { width: calc(50% - 30px); } .m_color_list {overflow: hidden;} .m_color_list > li {float: left; width: 48%;} .m_color_list > li:last-child {float: right;} .m_color_list > li > p {display: table; width: 100%; margin-bottom: 20px;} .m_color_list > li > p strong {display: table-cell; vertical-align: bottom; height: 100px; padding: 10px 15px; box-sizing: border-box; font-size: 30px; color: rgba(255,255,255,0.5); font-weight: 300; line-height: 1.3;} .m_color_list > li .mColor01 {background-color: #e4b623;} .m_color_list > li .mColor02 {background-color: #121b59;} .m_color_list > li > dl {padding: 15px 20px;display: table;width: 100%;box-sizing: border-box;border-top: 1px solid #dddee0;} .m_color_list > li > dl:last-child {border-bottom: 1px solid #dddee0;} .m_color_list > li > dl > dt {display: table-cell; vertical-align: top; width: 40%; max-width: 40%; min-width: 130px; color: #333;} .m_color_list > li > dl > dd {display: table-cell; vertical-align: middle; font-size: 14px;} .m_color_list > li > dl > dd > ul {overflow: hidden;} .m_color_list > li > dl > dd > ul > li {float: left; margin-right: 30px;} /* tablet */ @media screen and (max-width : 660px) { body.Tablet .m_color_list > li {width: 100%; margin-bottom: 20px;} } /* mobile */ body.Mobile .m_color_list > li {width: 100%; margin-bottom: 20px;} /********************************************************************************************************** 조직도 */ .org_wrap {position: relative;} .org_wrap h2{display:none} .org_wrap:after {content: ""; background-color: #707785; z-index: 0; position: absolute; width: 2px; height: 100%; position: absolute; top: 0; left: 50%; margin-left: -1px;} .org_wrap .h4, .org_wrap .h5 {display: table; margin: 0 auto 30px auto; text-align: center; padding-left: 30px; position: relative; z-index: 1;} .org_wrap .h5 {padding: 0 25px 0 0; margin-top: 30px;} .org_wrap .h4 span, .org_wrap .h5 span {width: 214px; height: 186px; display: table-cell; vertical-align: middle; color: #FFF; font-size: 20px; font-weight: 400; padding-right: 30px; background: url("../../images/contents/org_top_bg.png") left top no-repeat; box-sizing: border-box;} .org_wrap .h5 span {background: url("../../images/contents/org_top_bg2.png") left top no-repeat; padding: 0 0 0 25px;} .org_wrap .org_2depth {position: relative; width: 46%; margin: 30px auto; text-align: center;} .org_wrap .org_2depth:after{content:''; display:block; clear:both;} .org_wrap .org_2depth > li {float: left; width: 50%; position: relative;} .org_wrap .org_2depth > li:after {content: ""; background-color: #707785; z-index: 0; position: absolute; width: 100%; height: 2px; top: 50%; left: 0; margin-top: -1px;} .org_wrap .org_2depth > li.left {float: left;} .org_wrap .org_2depth > li.right {float: right;} .org_wrap .org_2depth > li.center {float: none; margin: 0 auto;} .org_wrap .org_2depth > li > p {background-color: #ededed; border-radius: 50px; padding: 15px; color: #054780; font-size: 18px; font-weight: 400; margin-right: 40px; position: relative; z-index: 2;} .org_wrap .org_2depth > li > p.point {background-color: #054780; color: #FFF;} .org_wrap .org_2depth > li.right > p {margin: 0 0 0 40px;} .org_wrap .org_2depth > li.center > p {margin: 0;} .org_wrap .org_3depth {position: relative; display: table; width: 100%; margin-bottom:30px; background-color: #FFF; z-index: 3;} .org_wrap .org_3depth.bg {margin-bottom:30px; background-color: transparent;} .org_wrap .org_3depth:after {content: ""; background-color: #707785; z-index: 0; position: absolute; width: 80%; height: 2px; top: 0; left: 10%;} .org_wrap .org_3depth.w4:after {width: 75%; left: 12.5%;} .org_wrap .org_3depth.w6:after {width: 83.3%; left: 8.3%;} .org_wrap .org_3depth.w7:after {width: 85.8%; left: 7.1%;} .org_wrap .org_3depth.w9:after {width: 89%; left: 5.5%;} .org_wrap .org_3depth > li {display: table-cell; vertical-align: top; width: 20%; text-align: center;} .org_wrap .org_3depth.w4 > li {width: 25%;} .org_wrap .org_3depth.w6 > li {width: calc(100% / 6);} .org_wrap .org_3depth.w7 > li {width: calc(100% / 7);} .org_wrap .org_3depth.w9 > li {width: 11.12%;} .org_wrap .org_3depth > li > dl {padding-top: 30px; text-align: left; position: relative;} .org_wrap .org_3depth > li > dl:after, .org_wrap .org_3depth > li > p:after {content: ""; background-color: #707785; z-index: -1; position: absolute; width: 2px; height: 100%; top: 0; left: 50%; margin-left: -1px;} .org_wrap .org_3depth > li > p:after {top: -20px;} .org_wrap .org_3depth > li > dl dt {display: table; border: 10px solid #707785; border-radius: 100%; background-color: #FFF; width: 100%; max-width: 170px; height: 170px; text-align: center; margin: 0 auto; box-sizing: border-box;} .org_wrap .org_3depth > li > dl dt strong {display: table-cell; vertical-align: middle; color: #2460db; font-size: 18px; height: 100%;} .org_wrap .org_3depth > li > dl dd {border: 2px solid #707785; padding: 15px; border-radius: 10px; background-color: #FFF; margin: 20px auto 0 auto; min-height: 120px; box-sizing: border-box; width: 90%; max-width: 170px; position: relative; overflow:hidden;} .org_wrap .org_3depth > li > dl dd > ul > li {position: relative; padding-left: 15px !important; margin: 5px 0 !important;} .org_wrap .org_3depth > li > dl dd > ul > li:before {content: ""; position: absolute; top: 9px; left:0; width: 6px; height: 6px; background-color: #51697c; border-radius: 100%;} .org_wrap .org_3depth > li > p {padding: 15px; border-radius: 10px; background-color: #054780; color: #FFF; box-sizing: border-box; margin: 20px auto 0 auto; width: 90%; position: relative;} .org_wrap .org_3depth.type2 > li > dl > dd {padding-bottom: 50px;} .org_wrap .org_3depth.type2 > li > dl > dd > p {position:absolute; bottom: 0; left: 0; width: 100%; text-align: center; color: #333; padding: 10px 0; background-color: #f5f5f5;} /* tablet */ body.Tablet .org_wrap .org_2depthl {width: 100%;} body.Tablet .org_wrap .org_3depth.bg{margin-bottom:0; background-color:#fff;} body.Tablet .org_wrap .org_3depth.bg + .org_3depth:after{display:none;} body.Tablet .org_wrap .org_3depth > li {width: 50%; float: left;} body.Tablet .org_wrap .org_3depth:after, body.Tablet .org_wrap .org_3depth.w4:after, body.Tablet .org_wrap .org_3depth.w6:after {width: 50%; left: 25%;} /* mobile */ body.Mobile .org_wrap .org_2depth {width: 100%; margin: 0;} body.Mobile .org_wrap .org_3depth.bg{margin-bottom:0; background-color:#fff;} body.Mobile .org_wrap .org_3depth.bg + .org_3depth:after{display:none;} body.Mobile .org_wrap .org_3depth > li {width: 100%; float: left;} body.Mobile .org_wrap .org_2depth > li > p {font-size: 17px;} body.Mobile .org_wrap .org_2depth > li.left > p {margin: 0 25px 0 0;} body.Mobile .org_wrap .org_2depth > li.right > p {margin: 0 0 0 25px;} body.Mobile .org_wrap .org_3depth:after {display: none;} body.Mobile .org_wrap .org_3depth > li > dl dd {max-width: 100%;} body.Mobile .org_wrap .org_3depth > li > dl dt {max-width: 140px; height: 140px; border-width: 8px;} /********************************************************************************************************** 기관소개_photo */ .non1{display:none !important} .slider_thumb {border-width: 2px 1px; border-style: solid; border-color: #353e4d #d9d9d9; box-sizing: border-box; position: relative; overflow: hidden; margin-bottom: 50px;} .slider_thumb .thumb_photo {width: 100%; background: url("/sites/corrections/images/contents/slider_thumb_bg.png") right bottom no-repeat;} .slider_thumb .thumb_photo li.slick-slide {display: table; table-layout: fixed;} .slider_thumb .thumb_photo li.slick-slide > img {max-width: 525px; width: 100%; display: table-cell; vertical-align: top;} .slider_thumb .thumb_photo li.slick-slide .text {padding: 30px; box-sizing: border-box; display: table-cell; vertical-align: top; width: 52%;} .slider_thumb .thumb_photo li.slick-slide .text .title {color: #212121; font-size: 18px; position: relative; padding-top: 15px; margin-bottom: 15px;} .slider_thumb .thumb_photo li.slick-slide .text .title:before {content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 2px; background-color: #214c92;} .slider_thumb .thumb_list {background-color: #f7f7f7; border-top: 1px solid #d9d9d9; padding: 20px; text-align: center; box-sizing: border-box; position: relative; width: 100%;} .slider_thumb .thumb_list .slick-list {margin: 10px 0; display: inline-block; vertical-align: middle; width: 89%;} .slider_thumb .thumb_list .slick-list .slick-track {margin: 0 auto;} .slider_thumb .thumb_list li.slick-slide {border: 0; margin: 5px 25px !important; position: relative; height: auto; cursor: pointer;} .slider_thumb .thumb_list li.slick-slide:before {content :""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); box-sizing: border-box;} .slider_thumb .thumb_list li.slick-slide.slick-current:before {background-color: transparent; border: 3px solid #2460db;} .slider_thumb .thumb_list li.slick-slide img {width: 100%; /*height: 90px;*/} .slider_thumb .thumb_list li.slick-slide .text {display: none;} .slider_thumb .slick-arrow {border: 1px solid #d3d8dc; background-color: #FFF; text-align: center; width: 41px; height: 41px; box-sizing: border-box; text-indent: -5000px; position: relative; border-radius: 100%; vertical-align: middle;} .slider_thumb .slick-arrow:before, .slider_thumb .slick-arrow:after {content: ""; position: absolute; top: 48%; left: 47%; width: 14px; height: 1px; background-color: #2460db;} .slider_thumb .slick-arrow:before {transform: rotate(-225deg); margin-left: -10px;} .slider_thumb .slick-arrow:after {transform: rotate(-135deg);} .slider_thumb .slick-arrow.slick-prev {transform: rotate(-90deg);} .slider_thumb .slick-arrow.slick-next {transform: rotate(-270deg);} .slider_thumb .custom_paging {position: absolute; top: -30px; right: 20px; text-align: center; z-index: 9;} .slider_thumb .custom_paging > li {display:none; font-size: 14px;} .slider_thumb .custom_paging > li.slick-active {display: block;} .slider_thumb .custom_paging > li strong {color: #2460db;} /* tablet */ body.Tablet .slider_thumb .thumb_photo {background-size: 50%;} body.Tablet .slider_thumb .thumb_photo li.slick-slide > img {display: block; margin: 0 auto; max-width: 100%;} body.Tablet .slider_thumb .thumb_photo li.slick-slide .text {display: block; width: 100%;} body.Tablet .slider_thumb .thumb_list {padding: 20px 10px;} body.Tablet .slider_thumb .thumb_list .slick-list {width: 82%;} body.Tablet .slider_thumb .thumb_list li.slick-slide {margin: 5px 20px !important;} body.Tablet .slider_thumb .slick-arrow {display: inline-block !important;} @media screen and (max-width : 600px) { body.Tablet .slider_thumb .thumb_list .slick-list {width: 75%;} body.Tablet .slider_thumb .thumb_list li.slick-slide {margin: 5px 10px !important;} body.Tablet .slider_thumb .thumb_list li.slick-slide img {height: 70px;} } /* mobile */ body.Mobile .slider_thumb {margin-bottom: 30px;} body.Mobile .slider_thumb .thumb_photo {background-size: 50%;} body.Mobile .slider_thumb .thumb_photo li.slick-slide > img {display: block; margin: 0 auto; max-width: 100%;} body.Mobile .slider_thumb .thumb_photo li.slick-slide .text {padding: 20px;} body.Mobile .slider_thumb .thumb_photo li.slick-slide .text {display: block; width: 100%;} body.Mobile .slider_thumb .thumb_list {padding: 0px 10px;} body.Mobile .slider_thumb .thumb_list .slick-list {width: 70%;} body.Mobile .slider_thumb .thumb_list li.slick-slide {margin: 5px 10px !important;} body.Mobile .slider_thumb .slick-arrow {display: inline-block !important;} body.Mobile .slider_thumb .thumb_list li.slick-slide img {height: 70px;} @media screen and (max-width : 400px) { body.Mobile .slider_thumb .thumb_list .slick-list {width: 65%;} } /********************************************************************************************************** anchor */ .sub_category_list {background-color: #f7f7f7; display: table; width: 100%;} .sub_category_list .title {background: url("../../images/contents/sub_category_list_bg.png") left top repeat; width: 200px; height: 50px; text-align: center; color: #FFF; display: table-cell; vertical-align: middle; box-sizing: border-box;} .sub_category_list > ul {display: table-cell; vertical-align: top;} .sub_category_list > ul > li {position: relative; text-align: center; display: inline-table; float: left;} .sub_category_list > ul > li:before {content: ""; background-color: #d6d6d6; width: 1px; height: 13px; position: absolute; top: 50%; right: 0; margin-top: -6.5px;} .sub_category_list > ul > li:last-child:before {display: none;} .sub_category_list > ul > li a {color: #585858; font-size: 14px; display: table-cell; vertical-align: middle; padding: 10px 20px; box-sizing: border-box; height: 50px;} .sub_category_list > ul > li.on a {color: #2460db;} .sub_category_list > ul > li.on a:focus{outline:-webkit-focus-ring-color auto 5px} .sub_category_list > ul > li.on a:after {content: ""; position: absolute; bottom: 5px; left: 50%; background: url("../../images/contents/sub_category_list_arrow.png") left top no-repeat; width: 9px; height: 5px;} /* tablet */ @media screen and (max-width : 520px) { body.Tablet .sub_category_list .title {display: block; width: 100%; padding: 13px 0;} body.Tablet .sub_category_list > ul {display: table;} body.Tablet .sub_category_list > ul > li {width: 50%;} body.Tablet .sub_category_list > ul > li:nth-child(2n+2):before {display: none;} body.Tablet .sub_category_list > ul > li a {padding: 10px 5px;} } /* mobile */ body.Mobile .sub_category_list .title {display: block; width: 100%; padding: 13px 0;} body.Mobile .sub_category_list > ul {display: table;} body.Mobile .sub_category_list > ul > li {width: 50%;} body.Mobile .sub_category_list > ul > li:nth-child(2n+2):before {display: none;} body.Mobile .sub_category_list > ul > li a {padding: 10px 5px;} /* 알림마당 > 교정홍보물 > 월간교정 + 새길 */ .squareWrap.sty-zone {background: #d5ebdb url('../../images/contents/square_bg.png') right top repeat-y;} .squareWrap.sty-zone .img img {width: 100%;} .squareWrap.sty-zone .content .bold {color: #000; font-size: 20px; font-weight: 500; margin-bottom: 20px;} .squareWrap.sty-zone .content .bold + p {line-height: 1.8;} .squareWrap.sty-zone .content .textShadow {position: absolute; right: 0; bottom: -15px; color: rgba(219, 231, 255, 0.5); font-size: 40px; font-weight: 500;} .ebook {border: 1px solid #ebebeb; padding: 30px 30px 20px;} .ebook ul {overflow: hidden;} .ebook li {position: relative; width: 22%; max-width: 230px; float: left; margin-right: 4%; margin-bottom: 20px;} .ebook li:last-child, .ebook li:nth-child(4n) {margin-right: 0;} .ebook .ebook_img {width: 100%; border: 1px solid #ececec; box-sizing: border-box; margin-bottom: 10px;} .ebook .title {color: #333; font-weight: 400;} .ebook a.more {position: absolute; right: 0; bottom: 12px; width: 50px; height: 50px; background: rgba(36, 96, 219, 0.9) url('../../images/contents/square_zone_more.png') center center no-repeat; text-indent: -5000px;} .ebook a.down {position: absolute; right: 50px; bottom: 12px; width: 50px; height: 50px; background-color: #ddd; cursor: pointer;} body.Mobile .ebook li {width: 47%; margin-bottom: 10px;} body.Mobile .ebook li:nth-child(2n) {margin-right: 0;} /* ebook sty2*/ .ebook-2 {overflow: hidden; border: 1px solid #ebebeb; padding: 25px; box-sizing: border-box;} .ebook-2 > ul {overflow: hidden;} .ebook-2 > ul > li {position: relative; float: left; width: calc((100% - 12%)/4); max-width: 230px; margin-right: 4%; margin-bottom: 20px; border: 1px solid #ebebeb; box-sizing:border-box;} .ebook-2 > ul > li > img {width: 100%; border: 1px solid #ececec; box-sizing: border-box;} .ebook-2 > ul > li .title {text-align: center; background-color: #dcdcdc; color: #333; padding: 9px;} .ebook-2 > ul > li:hover .title {background-color: #2460db; color: #fff;} /* .ebook-2 > ul > li:hover:before {content:''; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 40px); z-index:0;} .ebook-2 > ul > li:hover:after {content:''; position: absolute; top: 9px; left: 9px; width: calc(100% - 20px); height: calc(100% - 60px); border: 1px solid rgba(255,255,255,0.5);} */ .ebook-2 li:nth-child(4n) {margin-right: 0;} .ebook-2 .btnBox {display: none; z-index: 1; position: absolute; top: 41%; left: 50%; margin-left: -66px;} .ebook-2 .btnBox > a {display: inline-block; width: 65px; height: 59px; background:url('../../images/contents/ebook2_btn.png') left top no-repeat; text-indent: -5000px;} .ebook-2 .btnBox > a.ebBtn {background-position: right top} .ebook-2 > ul > li:hover > .btnBox {display: block;} .ebook_img{width: 100%; border: 1px solid #ececec; box-sizing: border-box;} /*@media all and (max-width: 1100px) { .ebook-2 > ul > li {margin-right: 3%;} }*/ body.Mobile .ebook-2 > ul > li {width: calc((100% - 5px) / 2); margin-bottom: 10px; margin-right: 5px;} body.Mobile .ebook-2 > ul > li:nth-child(2n){margin-right: 0;} /* 역대 국장 및 본부장 :: 자세히보기 버튼 삭제 */ #menu1195_obj4035 ._moj_intList ._prFlLinkView {display: none !important;} /* 20190215 고석만*/ /*입력양식폼 input style */ /*.formWrap input[type="text"] { width:100%; }*/ .formWrap select, .formWrap input[type="password"], .formWrap #userName { width:100%; /*min-width:150px;*/ max-width:50%; } /*200302 양식폼 추가 */ .formWrap{margin-bottom:10px} .formWrap .searchBtn{padding:3px 10px} .formWrap select, .formWrap input[type="password"], .artclForm select, .artclForm input[type="password"], .formWrap #userName, .artclForm #annymtyWriter { width:100%; /*min-width:150px*/; max-width:50%; } .appli td{padding:15px 5px !important} body.Mobile .formWrap select, body.Mobile .formWrap #userName { width:100%; min-width:150px; max-width:100%; } .fnSearch { overflow:hidden; } /*.fnSearch .formWrap { text-align:right; }*/ .fnSearch .formWrap select { width:auto; } /* 설명절접견안내팝업모바일화면위치 */ @media all and (min-width: 320px) and (max-width: 640px){ #PZwindow197{left:0 !important;} } /* 230224 웹접근성 추가 (김은혜) */ caption{overflow: hidden; position: absolute; width: 1px; height: 1px; border: 0; margin: -1px; padding: 0; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;} caption.mo{display:none;} @media all and (max-width: 861px){ caption.mo{display:block;} caption.pc{display:none;} } /* 메인페이지 웹접근성 임시*/ .top_visual ._imgSldVisual .bx-wrapper .bx-viewport ul li a:focus{outline:5px solid red;} .corrections_rctList ._recentWListUl .recentBbsLi .recentBbsTab{outline-offset:-2px;} .snsBox .btn{outline-offset:-2px;} #corrections_banner .controls .prev, #corrections_banner .controls .next, #corrections_banner .controls .play, #corrections_banner .controls .stop{outline-offset:-2px;} /* 뉴스배너 */ .mainVisual li a{display:block; height:354px;} .mainVisual li a:focus{outline:5px solid red; outline-offset: -5px;} .mainVisual .recentBbsThumb{height:304px;} .mainVisual .recentBbsInfo{height:50px;} /* 230526 게시판 css 수정 */ ._mojList .rss{display:none;} /* 인사말 */ .greetingWrap .quote span, .greetingWrap2 .quote span{font-weight: 400; color:#117DBA;} /* 달력 아이콘 수정 */ ._mojList .artclSerch .artclPeriod input[type="text"]{background: #fff url(../../images/artclPeriod_icon.png) 93% center no-repeat; outline-offset:-2px;} /* 게시판 키보드 초점 수정*/ ._mojList .artclSerch .artclPeriod label, ._mojList .artclSerch .artclPeriod input[type="text"], ._mojList .fnDiv .fnSearch fieldset select, ._mojList .fnDiv .fnSearch fieldset input[type="text"]{outline-offset:-2px;} ._mojList .fnDiv .fnSearch fieldset .fnSubmit input{outline-offset:-2px;} /* 게시판 페이징 수정 */ ._paging ._inner > a{background-image: url(../../images/page_arrow.png) !important;} ._paging ._inner ul li strong{background-color:#117DBA;} /* FAQ 이미지 사이즈 추가 */ ._mojFaq .answer img{width:100%;} /* 230510 본인인증 신규 페이지 */ .cirtificaton-wayBx{margin-bottom:24px;} .tit-wrap{margin-bottom:24px;} .tit-wrap strong{padding:13px 0; text-align:center; font-size:25px; font-weight:700; color:#1d1d1d;} .self_certiList{display:flex; flex-wrap: wrap; justify-content: space-between;} .self_certiList .self_item{position:relative; width:calc((100% - 24px)/2); min-height:200px; margin-bottom:24px; padding:24px 24px 92px; text-align:center; border:1px solid #d8d8d8; border-radius:12px; background-color:#fff; box-sizing:border-box;} .self_item .item_tit{margin-bottom:16px;} .self_item .item_tit strong{vertical-align:middle; font-size:21px; font-weight:bold; color:#1d1d1d;} .self_item .icon{display:inline-block; width:32px; height:32px; margin-right:12px; } .self_item .icon img{width:100%; height:100%; vertical-align:middle;} .self_item .item_txt{font-size:17px;} .self_certiList .btn-login{position:absolute; bottom:24px; left: 50%;transform: translate(-50%, 0); min-width:180px; height:54px; border:1px solid #256ef4; border-radius:8px; padding:12px;background:#ecf2fe; vertical-align:middle; text-align:center; font-size:17px; color:#0b50d0; box-sizing:border-box;} .cirtification_wrap .notice{position:relative; padding:24px 24px 24px 145px; border:1px solid #c6c6c6; background:#f8f8f8;} .cirtification_wrap .notice:before {content: ""; position: absolute; top: 20px; left: 40px; width: 70px; height: 70px; background: url("/sites/moj/images/contents/textBox_icon.png") -140px top no-repeat;} .cirtification_wrap .notice .title{margin-bottom:24px; font-size:19px; font-weight:700; color:#1d1d1d;} .cirtification_wrap .notice > ul > li {margin: 8px 0; padding-left: 15px; text-align:left; font-size: 17px; background: url(/sites/moj/images/contents/textBox_ul.png) left 9px no-repeat;} .cirtification_wrap .notice > ul > li .button{margin-bottom:0; margin-left:4px;} /* tablet */ @media screen and (max-width: 1024px){ .self_certiList .self_item{min-height:220px;} } /* mobile */ @media screen and (max-width: 600px){ .self_certiList .self_item{width:100%; min-height:auto; margin-bottom:16px;} .self_item .item_tit{margin-bottom:16px;} .cirtification_wrap .notice{padding:24px;} .cirtification_wrap .notice:before {display:none;} } .subway .substance ul li.line4 dl dt{color:#2a7daf;} /* 기관장과의 대화 (의견 등록) */ ._mojWrite .writeForm {border-top: 2px solid #353e4d;} ._mojWrite dl.artclForm {width: 50%; float: left; overflow: hidden; display: table; min-height: 50px; border-bottom: 1px solid #dfdfdf;} ._mojWrite .artclForm dt, ._mojWrite .artclForm dd {display: table-cell; vertical-align: middle; box-sizing: border-box;} ._mojWrite .artclForm dt {width: 150px; text-align: center; background-color: #fafafa; border-right: 1px solid #dfdfdf; padding: 0 5px;} ._mojWrite .artclForm dt label {color: #1e2124; font-size: 17px;} ._mojWrite .artclForm._100per {float: none; width: 100%;} ._mojWrite .artclForm dd {padding: 10px;} ._mojWrite input[type="text"]._full, ._mojWrite input[type="text"].w100per {max-width: 100%; width:100%;} ._mojWrite input[type="text"],._mojWrite input[type="password"],.hasDatepicker {max-width: 130px; height: 40px; line-height: 40px;} ._mojWrite .artclForm select{height:40px; line-height:40px;} ._mojWrite .artclForm dd, ._mojWrite .artclForm dd label {font-size: 17px; } ._mojWrite .artclForm dd.artclInsert ul._hor li {line-height: 20px; margin-bottom: 0;} ._mojWrite .artclForm dd.artclInsert ul._hor, ._mojWrite .artclForm dd.artclInsert .intOpt {float: left; line-height: 2;} ._mojWrite .artclForm.both {clear:both; padding: 20px 0; box-sizing: border-box; border-bottom: 1px solid #6a6a6a; border-top: 1px solid #b2b2b2; position: relative; top: -1px;} ._mojWrite .artclInsert textarea {width:100%; min-height: 500px;} ._mojWrite .fileWrap .artclInsert {overflow: hidden;} ._mojWrite .fileWrap {border-bottom: 1px solid #6a6a6a;} ._mojWrite .fileWrap .artclForm dt, ._mojWrite .fileWrap .artclForm dd {border-bottom:0;} ._mojWrite .fileWrap .artclInsert select {float: left; width: 60%; min-height: 130px; padding: 10px; box-sizing: border-box;} ._mojWrite .fileWrap .artclInsert select option{font-size: 13px;} ._mojWrite .fileWrap .file_btn, ._mojWrite .fileWrap .notice {float: left; margin-left: 10px;} ._mojWrite .fileWrap .notice {font-size: 17px;} ._mojWrite .fileWrap .file_btn .btn {display: block; margin: 0 0 15px 0;} ._mojWrite .fileWrap .file_btn .btn input[type="button"] {text-align: left; min-width: 145px; font-size: 13px; border: 1px solid #d5d5d5; background: #ececec url('../images/file_btn.gif') 10px 10px no-repeat; padding: 6px 10px 7px 30px;} ._mojWrite .fileWrap .file_btn .btn.del input[type="button"] {background-position: 10px -44px;}