@import url('/sites/moj/style/css/font.css'); @import url('/sites/moj/style/css/style_moj.css'); @import url('/sites/moj/style/css/style_popup.css'); /* 공통 */ .mt30{margin-top:30px;} .mt35{margin-top:35px;} .mt40{margin-top:40px;} .mt45{margin-top:45px;} .mt50{margin-top:50px;} body.Mobile #PZwindow157{top:562px !important } .PZwindow { border:1px solid #999; background-color:#fff; position:absolute !important; /* position:fixed !important;*/ z-index:99999; cursor:move; } .PZwindow * { font-family: "NotoKR", "Noto Sans", "Malgun Gothic", "맑은고딕", "돋음" !important; font-size:1em; line-height:inherit; color:#666; /*letter-spacing:-0.07em; */ } .PZwindow .PZwrap { /*min-width:373px; border-top:1px solid #ddd; border-right:1px solid #ddd; border-left:1px solid #ddd;*/ overflow:hidden; } .PZwindow .nomoreOpen { border-right:1px solid #333; overflow:hidden; } .PZwindow .nomoreOpen form label { font-size:14px; 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; } body.Desktop .blockUI.foreigner, body.Tablet .blockUI.foreigner { top: 50px !important; width: 555px !important; height: 750px; } /***** 동의서 수정 ***/ .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;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} ._mojList table.artclTable ._artclTdWriter{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .backslash { background: url('data:image/svg+xml;utf8,'); } .ustb{ border-top-color: #2460db !important; border-top-style: solid !important; border-top-width: 2px !important; border-left-color: #FFF !important; border-left-style: solid !important; border-left-width: 0px !important; background-color: #fff; margin-left: -1px; margin-bottom: 15px; } .ustb th{background-color: #f3f5f7;text-align: center;color: #333;} .ustb th, .ustb td{ border-width: 0 0 1px 1px !important; border-color: #dddee0 !important; border-style: solid; width: auto; padding: 15px 10px; } .underline{text-decoration:underline;} /****************************************************************** MAIN ******************************************************************/ .first-focus { /*position: absolute; left: 0; top: 0;*/ text-indent: -9999px; } /* ._imgSldWBnrWrap ._imgSldWBnr .bx-wrapper .bx-viewport ul .bx-clone { display: none !important; } */ ._imgSldEvent .bx-wrapper .bx-viewport ul .bx-clone { display: none !important; } body.Mobile {min-width: 320px;} .mTitle {font-size: 20px; color: #474747; font-weight: 400; margin-bottom: 10px;} .director_wrap {background: url("../../images/director_bg.jpg") center top no-repeat; background-size: cover; border: 1px solid #d3dde7; word-break: keep-all; text-align: left;} .director_wrap .wrap {background: url("../../images/2021director_p.png") right 37px no-repeat; min-height: 328px; padding: 20px; box-sizing: border-box;} .director_wrap h2 {color: #252525; font-size: 20px; font-weight: 400; margin-bottom: 10px;} .director_wrap p {font-size: 14px; color: #6a6a6a; margin-bottom: 10px; width: 67%;} .director_wrap ul {overflow: hidden;position: absolute; left: 0; bottom: 0; width: 100%; } .director_wrap ul li {float: left; width: 50%; box-sizing: border-box; padding: 10px 7px 11px; box-sizing: border-box; background-color: #217072; text-align:center; } .director_wrap ul li:first-child {border-bottom: 1px solid #85ccce; width:100%;} /*.director_wrap ul li:nth-of-type(2) {border-bottom: 1px solid #85ccce;}*/ .director_wrap ul li:nth-of-type(2) {border-right: 1px solid #85ccce;} .director_wrap ul li a {display: block; /*background-color: #38bbbd;*/ color: #FFF; width: 100%; height: 20px; /*padding: 10px 7px 11px;*/ font-size: 13px; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .director_wrap ul li:hover {background-color: #2a80ce;} body.Mobile .director_wrap .wrap {min-height: 235px; background-position: right 7px;} .quick_01 {background-color: #e6edf3; padding: 20px;} .quick_01 ul {overflow: hidden;} .quick_01 ul li {float: left; width: 50%; display: inline-table; vertical-align: middle; position: relative;} .quick_01 ul li a {display: table-cell; vertical-align: middle; color: #6f6f6f; font-size: 14px; height: 80px; padding: 0 5px 0 60px; text-align: left; line-height: 1.3;} .quick_01 ul li a:before {content: ""; position: absolute; top: 50%; left: 0; margin-top: -29px; width: 55px; height: 55px; background: url("../../images/quick_01_icon.png") left top no-repeat;} .quick_01 ul li a:hover {color: #213952;} .quick_01 ul li.icon01 a:before {background-position: left top;} .quick_01 ul li.icon02 a:before {background-position: -55px top;} .quick_01 ul li.icon03 a:before {background-position: -110px top;} .quick_01 ul li.icon04 a:before {background-position: -165px top;} .quick_01 ul li.icon05 a:before {background-position: -220px top;} .quick_01 ul li.icon06 a:before {background-position: -275px top;} .quick_02 ul li:hover a:before { animation-name: icon_animation; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @keyframes icon_animation { 50% { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -o-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } /* new_main */ .orgSearch {overflow:visible;position:relative; padding:13px 24px 15px; background-color:#fff;box-shadow:0 0 10px rgb(0 0 0 / 5%); border-radius: 21px 21px;box-sizing:border-box;} .orgSearch h2, .orgSearch h4 {color: #2d2d2d;text-align: left;} .orgSearch h2{font-size:19px;font-weight:900;} .orgSearch p {color: #FFF; font-size: 14px; margin-bottom: 5px; text-align: left;} .orgSearch .orgSearchBox{overflow:visible;margin-top:6px;} .orgSearch .org_list {position: relative; text-align: left; /*float:left;*/display:inline-block; width:75%;vertical-align: top;} .orgSearch .org_list button {background-color: #f4f6fa; height: 40px; padding: 0 35px 0 15px; text-align: left; color: #7C6E6E; font-size: 16px; margin-top: 3px; width: 100%; box-sizing: border-box; border-radius:8px 8px; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .orgSearch .org_list button.on {} .orgSearch .org_list button:after {content: ""; background: url("../../images/orgSearch_arrow.png") left top no-repeat; width: 17px; height: 11px; position: absolute; top: 13px; right: 15px; transition: all 0.2s ease;} .orgSearch .org_list button.on:after {background-position: left bottom; transform: translateY(0px) rotate(0deg);} .orgSearch .org_list button:first-child{margin-top:0;} .orgSearch .org_list > ul {background-color: #f7f7f7; border: 1px solid #ddd; position: absolute; left: 0; width: 100%; max-height: 120px; min-height: auto; overflow-y: auto; display: none; color: #494949; z-index: 999; box-sizing: border-box; padding: 0 15px; z-index: 2; } .orgSearch .org_list > ul.t1_2 { z-index: 3; } .orgSearch .org_list > ul li {padding: 7px 0; color: #494949; font-size: 14px;} .orgSearch .org_list > ul li a {color: #494949; font-size: 14px; display: block;} .orgSearch .org_list > ul.t1_2 li.on a {color: #1674cb; font-weight: 400;} .orgSearch .org_list > ul.t2_2 > li {display: none;} .orgSearch .org_list > ul.t2_2 > li.on {display: block;} .orgSearch .go_btn { display: inline-block;vertical-align: top; padding: 15px 15px 0 15px; width: 52px; height: 62px; line-height:1.3; font-weight:900;text-align: center; background-color: #00357e; color: #FFF; font-size: 17px; border-radius: 9px 9px; outline-offset: 2px;} /* 주요서비스 */ .mqMenuWrap{max-width:1200px;width:100%;margin:0 auto;} .mqMenuWrap .mmwTitBox{display:inline-block;width:22%;margin-top:-42px;vertical-align: middle;} .mqMenuWrap .mmwTitBox .mmwTitBg{background:url('/sites/immigration/images/newmain/ico_tit.png') left center no-repeat;} .mqMenuWrap .mmwTitBox h2{padding-left:68px;font-family: 'NotoKR' !important;font-size:28px;font-weight:900;color:#fff;line-height:1;} .mqMenuWrap .mmwTitBox .exTxt{display:block;margin-top:10px;padding-left:68px;font-size:16px;font-weight:400;color:#fff;line-height:1;} .mqMenuWrap .mmListBox{display:inline-block;width: calc(100% - 22%);margin-left:-4px;vertical-align: middle;} .mqMenuWrap .mmListBox ul{overflow: hidden;width: 100%;padding:15px 0 15px 0;text-align:right;box-sizing: border-box;} .mqMenuWrap .mmListBox ul li{display: block;float: left;width: calc(100% / 9);margin-left: 0;vertical-align:top;text-align:center;} .mqMenuWrap .mmListBox ul li:first-child{margin-left:0;} .mqMenuWrap .mmListBox ul li a{display:inline-block;font-size:16px;color:#333;font-weight:500;line-height:1.3;} .mqMenuWrap .mmListBox ul li span{display:block;width:76px;height:76px;margin:0 auto 7px auto;border-radius:50% 50%;box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);} .mqMenuWrap .mmListBox ul li .icon01{background:#fff url('/sites/immigration/images/newmain/ico_1.png') center top no-repeat;} .mqMenuWrap .mmListBox ul li .icon02{background:#fff url('/sites/immigration/images/newmain/ico_2.png') center top no-repeat;} .mqMenuWrap .mmListBox ul li .icon03{background:#fff url('/sites/immigration/images/newmain/ico_3.png') center top no-repeat;} .mqMenuWrap .mmListBox ul li .icon04{background:#fff url('/sites/immigration/images/newmain/ico_4.png') center top no-repeat;} .mqMenuWrap .mmListBox ul li .icon05{background:#fff url('/sites/immigration/images/newmain/ico_5.png') center top no-repeat;} .mqMenuWrap .mmListBox ul li .icon06{background:#fff url('/sites/immigration/images/newmain/ico_6.png') center top no-repeat;} .mqMenuWrap .mmListBox ul li .icon07{background:#fff url('/sites/immigration/images/newmain/ico_7.png') center top no-repeat;} .mqMenuWrap .mmListBox ul li .icon08{background:#fff url('/sites/immigration/images/newmain/ico_8.png') center top no-repeat;} .mqMenuWrap .mmListBox ul li .icon09{background:#fff url('/sites/immigration/images/newmain/ico_9.png') center top no-repeat;} .mqMenuWrap .mmListBox ul li a:hover span{background-color:#f7f7f7;} /* */ .quickWrap{display:block;width:100%;} .quickWrap h2{display:block;font-size:19px;font-weight:bold;color:#222222;} .quickWrap .quickBtnBox{display:block;min-height:290px;margin-top:13px;background-color:#f7f7f7;} .quickWrap .quickBtnBox ul{position:relative;display:block;width:100%;padding-top:19px;text-align:center;box-sizing:border-box;} .quickWrap .quickBtnBox ul li{display:inline-block;margin-right:7px;vertical-align:top;} .quickWrap .quickBtnBox ul li:nth-child(-n+4){margin-top:0 !important;} .quickWrap .quickBtnBox ul li:nth-child(n+5):nth-child(-n+8){margin-top:17px;} .quickWrap .quickBtnBox ul li:nth-child(4n){margin-right:0;} .quickWrap .quickBtnBox ul li span:first-child{display:block;width:59px;height:57px;border-radius:9px 9px;box-shadow:2px 2px 7px 0 rgba(122, 122, 122, 0.2);} .quickWrap .quickBtnBox ul li span.icon01{background:#fff url(/sites/immigration/images/newmain/quick_ico_1.png) center center no-repeat;} .quickWrap .quickBtnBox ul li span.icon02{background:#fff url(/sites/immigration/images/newmain/quick_ico_2.png) center center no-repeat;} .quickWrap .quickBtnBox ul li span.icon03{background:#fff url(/sites/immigration/images/newmain/quick_ico_3.png) center center no-repeat;} .quickWrap .quickBtnBox ul li span.icon04{background:#fff url(/sites/immigration/images/newmain/quick_ico_4.png) center center no-repeat;} .quickWrap .quickBtnBox ul li span.icon05{background:#fff url(/sites/immigration/images/newmain/quick_ico_5.png) center center no-repeat;} .quickWrap .quickBtnBox ul li span.icon06{background:#fff url(/sites/immigration/images/newmain/quick_ico_6.png) center center no-repeat;} .quickWrap .quickBtnBox ul li span.icon07{background:#fff url(/sites/immigration/images/newmain/quick_ico_7.png) center center no-repeat;} .quickWrap .quickBtnBox ul li span.icon08{background:#fff url(/sites/immigration/images/newmain/quick_ico_8.png) center center no-repeat;} .quickWrap .quickBtnBox ul li a{display:block;margin-top:11px;font-size:15px;color:#262626;line-height:1.2;} .quickWrap .quickBtnBox ul li span:last-child{display:block;margin-top:7px;padding-left:15px;text-align:left;} .quickWrap .quickBtnBox ul li a:hover span:first-child, .quickWrap .quickBtnBox ul li a:active span:first-child{background-color:#f7f3f7;} /* 신규퀵메뉴 */ .quick_colBox ul{padding:7px 12px 9px 16px;background-color:#fff;border-radius:25px 25px;box-shadow:0 0 10px rgba(0, 0, 0, 0.05);} .quick_colBox ul li{width:100%;padding:27px 0;text-align:center;border-top:1px dashed #4f4f4f;} .quick_colBox ul li:first-child{border-top:0;} .quick_colBox ul li p{margin-top:11px;font-size:17px;font-weight:600;color:#110d0e;letter-spacing: -0.05em;} .quick_02 ul {overflow: hidden; border: 1px solid #c7c7c7; padding: 10px 15px;} .quick_02 ul li {float: left; display: inline-table; text-align: center; width: 12.5%; vertical-align: top;} .quick_02 ul li a {display: table-cell; height: 88px; color: #4a4a4a; font-size: 14px; vertical-align: middle; line-height: 1.2;} .quick_02 ul li a:hover {text-decoration: underline;} .quick_02 ul li a:before {content: ""; background: url("../../images/quick_02_icon.png") left -7px no-repeat; width: 45px; height: 45px; display: block; margin: 0 auto 5px auto;} .quick_02 ul li a.icon01:before {background-position: -20px -9px;} .quick_02 ul li a.icon02:before {background-position: -121px -9px;} .quick_02 ul li a.icon03:before {background-position: -219px -9px;} .quick_02 ul li a.icon04:before {background-position: -319px -9px;} .quick_02 ul li a.icon05:before {background-position: -416px -9px;} .quick_02 ul li a.icon06:before {background-position: -516px -9px;} .quick_02 ul li a.icon07:before {background-position: -610px -9px;} .quick_02 ul li a.icon08:before {background-position: -709px -9px;} .quick_03 {overflow: hidden;} .quick_03 ul {width: 107%;} .quick_03 ul li {float: left; width: 32.3%; display: inline-table; vertical-align: top; box-sizing: border-box; padding-right: 5%;} .quick_03 ul li a {display: table-cell; vertical-align: middle; position: relative; padding-right: 100px; height: 105px; word-break: keep-all; text-align: left;} .quick_03 ul li a:after {content: ""; position: absolute; top: 0; right: 0; background: url("../../images/quick_03_icon.png") left top no-repeat; width: 95px; height: 95px;} .quick_03 ul li a.icon01:after {background-position: left top;} .quick_03 ul li a.icon02:after {background-position: -94px top;} .quick_03 ul li a.icon03:after {background-position: -190px top;} .quick_03 ul li dl dt {color: #1674cb; font-size: 18px; position: relative; padding-bottom: 10px; margin-bottom: 10px;} .quick_03 ul li dl dt:after {content:""; position: absolute; width: 15px; height: 1px; background-color: #9e9e9e; bottom: 0; left: 0; transition: all 0.2s ease-in-out;} .quick_03 ul li dl dd {font-size: 14px; color: #767676;} .quick_03 ul li:hover dl dt:after {width: 110%; background-color: #1674cb;} /* new_sns_style */ .sns_wrap {position: relative;padding:0 0 0 0;background-color:#fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);border-radius:21px 21px;box-sizing: border-box;} .sns_wrap .mTitle, .sns_wrap .pass{display:inline-block;vertical-align: middle;} .sns_wrap .mTitle {height:40px;margin:28px 0 0 20px;padding:0 22px;background-color:#00357e;border-radius:8px 8px 0 0;color:#fff;font-weight:bold;text-align:center;line-height:40px;} .sns_wrap .pass{margin-top:28px;display:none;} .sns_wrap .pass a{padding-left:5px;font-size:19px;font-weight:900;color:rgba(133, 133, 133, 0.5);} .sns_wrap ul { padding: 0; height: 208px; box-sizing: border-box; overflow-y: auto;} .sns_wrap ul li {position:relative;display:block;padding-top:20px;} .sns_wrap ul li:before {content:'';position:absolute;top:33px;left:14px;display:block;width:6px;height:6px;border:4px solid #3281d7;border-radius:50%;z-index:2;} .sns_wrap ul li:after {content:'';position:absolute;top:0;left:20px;display:block;width:1px;height: 100%;background-color:#ededed;z-index:1;} .sns_wrap ul li > a{display: block;padding-left:38px;} .sns_wrap ul li > a > strong, .sns_wrap ul li > a > span{display:inline-block;vertical-align:middle;} .sns_wrap ul li > a > strong{position:relative;color:#00549e;font-size:14px;font-weight:500;} .sns_wrap ul li > a > strong:before{content:'';display:inline-block;width:38px;height:38px;margin-right:9px;background:url("http://mojdev.moj.go.kr/sites/immigration/images/main_v2/ico_sns01.png") no-repeat;border:1px solid #dfe7e7;border-radius:50% 50%;vertical-align:middle;} .sns_wrap ul li > a > span{} .sns_wrap ul li > a > .date{color:#00549e;} .sns_wrap ul li > a > .date:hover{color:#333;} .sns_wrap ul li > a > .txt{display:block;width:95%;margin-top:11px;color:#333;} .sns_wrap ul li > a > .txt:hover{colro:#333;} .sns_wrap a.more {position: absolute; top: 27px; right: 19px; background-color:#efefef; width: 41px; height: 41px; border-radius:9px 9px; box-sizing: border-box; text-indent: -5000px;} .sns_wrap a.more:before, .sns_wrap a.more:after {content: ""; position: absolute; background-color: #3d3d3d;} .sns_wrap a.more:before {width: 3px; height: 13px; top: 14px; left: 19px;} .sns_wrap a.more:after {width: 13px; height: 3px; top: 19px; left: 14px;} .immigration_snsList{margin-top: 20px;} .quick_04 ul {overflow: hidden; border-top: 1px solid #dce0e0; border-left: 1px solid #dce0e0; width: 100%; box-sizing: border-box;} .quick_04 ul li {border-right: 1px solid #dce0e0; border-bottom: 1px solid #dce0e0; box-sizing: border-box; float: left; width: 25%; text-align: center; background-color: #f5f9f9; display: inline-table; vertical-align: middle; table-layout: fixed;} .quick_04 ul li a {color: #505050; font-size: 14px; display: table-cell; padding: 0 10px; height: 150px; vertical-align: middle;} body.Tablet .quick_04 ul li a, body.Mobile .quick_04 ul li a {height: 100px;} .quick_04 ul li p {margin-top: 5px; line-height: 1.2;} .quick_04 ul li img {max-width: 100%;} /* 모듈style */ #menu1439_obj1089 {margin: 38px 0px 0 0;padding: 0 0 29px 11px;background:#fff;border-radius:25px 0 0 25px;box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.05);} #menu1439_obj1112 {margin: 38px 0px 0 0;background: #fff;padding: 29px 0 24px 7px;box-shadow: 0 10px 10px -10px rgb(0 0 0 / 5%), 0 -10px 10px -10px rgb(0 0 0 / 5%);} #menu1439_obj1091 {float:left !important;margin: 38px 0px 0 0;padding-bottom:24px;background: #fff;border-radius: 0 25px 25px 0;box-shadow: 10px 0 10px 0 rgb(0 0 0 / 5%);} #menu1439_obj1098 {clear:both;position:relative;bottom:-68px;z-index:10;} #menu1439_obj1097{overflow:visible;z-index:99;} /* newMain_Responsive */ @media screen and (max-width:1200px){ .mqMenuWrap{position:static;top:auto;margin-top:23px;padding:0 20px;box-sizing:border-box;} .mqMenuWrap .mmwTitBox{position:static;left:auto;max-width:100%;width:100%;margin-top:0;margin-left:0;padding:10px;background:transparent;box-shadow:none;} .mqMenuWrap .mmwTitBox .mmwTitBg{margin-left:0;padding-left:0;background:transparent;} .mqMenuWrap .mmwTitBox h2{padding-left:0;color:#222222;} .mqMenuWrap .mmwTitBox .exTxt{display:none;} .mqMenuWrap .mmListBox{max-width:100%;width:100%;margin-left:0;} .mqMenuWrap .mmListBox ul{padding:13px 0 15px 0;text-align:center;} .mqMenuWrap .mmListBox ul li{width:calc(100% / 9);} .middleContWrap{position:relative;width:calc(100% - 40px);} /* 위치와넓이조정 */ #menu1439_obj1089{float:none;width:100%;margin:0 auto;padding-left:0;border-radius:25px 25px 0 0;} #menu1439_obj54{clear:both;margin-left:0.9%;margin-top:21px;} #menu1439_obj51{margin-top:21px;} #menu1439_obj1112{float:left;width:calc(50% - 7px);margin-top:0;} #menu1439_obj1091{float:right;width:50%;margin:0 0;} #menu1439_obj1112{padding-top:0;padding-bottom:28px;border-radius:0 0 0 25px;} #menu1439_obj1091{padding-bottom:37px;border-radius:0 0 25px 0;} #menu1439_obj51 ._fnctWrap{background:#f7f7f7;} #menu1439_obj51 ._fnctWrap h2{background:#fff;} #menu1439_obj1098{bottom:-15px;} .quickWrap{margin-left:13px;padding-bottom: 9px;} .quickWrap .quickBtnBox{margin-top:12px;} .quickWrap .quickBtnBox ul{padding-top:37px;} .quickWrap .quickBtnBox ul li{width:calc(100% / 4 - 20px);margin-top:0 !important;text-align:center;} .quickWrap .quickBtnBox ul li:nth-child(n+5){margin-top:15px !important;} .quickWrap .quickBtnBox ul li:first-child, .quickWrap .quickBtnBox ul li:nth-chhild(5){margin-left:0 !important;} .quickWrap .quickBtnBox ul li a{display:inline-block;width:59px;margin-top:0;text-align:center;} .quickWrap .quickBtnBox ul li span{display:inline-block;width:69px;height:69px;text-align:center;} .quickWrap .quickBtnBox ul li span:last-child{height:41px;} /* 알림판 */ ._alrimpanZone h2 {padding-top:0;line-height:1.5;} ._alrimpanZone ._imgSldEvent{width:100%;background-color:#f7f7f7;} ._alrimpanZone ._imgSldEvent .bx-wrapper{max-width:315px !important;} .lastContWrap{position:relative;width:calc(100% - 40px);} body.Desktop ._recentPhotoUl .recentBbsLi .recentBbsInnerUl .recentBbsInnerLi .recentBbsThumb{height:333px;} #menu1439_obj1114{width:100%;} .quick_colBox ul{overflow:hidden;padding-top:12px;padding-bottom:12px;} .quick_colBox ul li{float:left;width:50%;min-height:70px;padding:17px 0;border-top:0;} .quick_colBox ul li:first-child, .quick_colBox ul li:nth-child(2){border-bottom:1px dashed #4f4f4f;} .quick_colBox ul li:first-child, .quick_colBox ul li:nth-child(3){width:calc(50% - 1px);border-right:1px dashed #4f4f4f;} .quick_colBox ul li:nth-child(2n){margin-top:0 !important;} .quick_colBox ul li:nth-child(even){padding-top:26px;padding-bottom:8px;} #menu1439_obj910{clear:both;} #menu1439_obj910{width:100%;margin-left:0;margin-top:35px;} #menu2915_obj1074{float:none;position:relative;bottom:0;width:100%;height:auto;margin-top:25px;} #menu1439_obj1096{width:100%;margin: 15px 0 0 0;float: none;position: relative;z-index: 1001;left: 0px;top: 0px;clear: both;} #menu1439_obj1097{width:100%; margin-right:0;} #menu1439_obj1093{margin:33px 0 20px;} .orgSearch .orgSearchBox{margin-top:15px;} .orgSearch .org_list{width:calc(100% - 92px);} .orgSearch .go_btn{margin-left:7px;} #imm_banner{width:100%;padding:15px 0;} /* 유튜브 */ #menu1439_obj1133{width: 52.5%; height: 433px; margin-left: 2.5%;} } @media screen and (max-width: 860px){ .mqMenuWrap{padding:0 0;} #menu1439_obj1089, #menu1439_obj1112, #menu1439_obj1093, #menu1439_obj1096{margin-left:0;} #menu1439_obj1112, #menu1439_obj1091{width:50%;margin-bottom:15px;background-color:#fff;} #menu1439_obj1089{width:100%;background-color:#fff;} #menu1439_obj1091{float:right!important;} #menu1439_obj1096{width:100%;margin-top: 15px;} #menu1439_obj1112{float:left;padding-left:0;padding-bottom:23px;} #menu1439_obj1114{float:none;width:100%;margin-top:15px;margin-left:0;} #menu1439_obj1097{position:static;width:100%;margin-top: 20px;} /*유튜브*/ #menu1439_obj1133{width:100%; height:auto; margin-left:0;} .quickWrap .quickBtnBox{margin-top: 17px;} /* 홍보배너 */ #menu1439_obj1098{bottom:0px;} #menu1439_obj1098 #imm_banner{width:100%;} } @media screen and (max-width: 730px){ #menu1439_obj1114, #menu1439_obj1096{box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);border-radius: 25px 25px;} #menu1439_obj1112{float:none;width:100%;margin-bottom:0;padding-left:0;border-radius:0 0;} #menu1439_obj1091{float:none !important;width:100%;margin-top:0;margin-bottom:0;border-radius:0 0 25px 25px} #menu1439_obj1093{margin-top:15px;margin-bottom:0;} #menu1439_obj1114{margin-top:15px;} .mqMenuWrap .mmListBox ul li{float:none;display:inline-block;width:30%;margin-left:-4px;} .mqMenuWrap .mmListBox ul li:nth-child(n+4):nth-child(-n+9){margin-top:15px} .quickWrap{width:95%;margin:0 auto;} .orgSearch .org_list > ul, .orgSearch .org_list > ul.t1_2{z-index:61;} /* 알림판 */ #menu1439_obj1091 ._alrimpanZone{max-width:93%;margin:0 auto;} } @media screen and (max-width: 550px){ #menu1439_obj1089{overflow:visible;padding-bottom:54px;} #_contentBuilder #menu1439_obj1096 ._fnctWrap, #menu1439_obj1093{margin-top:0;} #menu1439_obj1112{margin-top:0px;} .mqMenuWrap .mmListBox ul li{width:calc(100% / 3 - 5px);} } @media screen and (max-width: 470px){ .mqMenuWrap{margin-top: 0;background-color:#fff;border-radius:25px 25px 25px 25px;} .mqMenuWrap .mmwTitBox h2{padding:15px 0 0 13px;font-size:23px;} } @media screen and (max-width: 425px){ .quick_colBox ul li:first-child, .quick_colBox ul li:nth-child(3), .quick_colBox ul li{float:none;width:100%;} .quick_colBox ul li:first-child, .quick_colBox ul li:nth-child(3){border-right:0;} .quick_colBox ul li:nth-child(3){border-bottom:1px dashed #4f4f4f; } #menu2915_obj1074{margin-top:0;} #imm_banner{width:100%;} #menu1439_obj1098{bottom:11px;} } @media screen and (max-width: 320px){ #menu1439_obj1112{padding-top:25px;} .mqMenuWrap{margin-top: 0;background-color:#fff;border-radius:25px 25px 25px 25px;} .mqMenuWrap .mmwTitBox h2{margin-top: 15px;margin-left: 10px;font-size:18px;} .mqMenuWrap .mmListBox ul{padding-top:0;} .mqMenuWrap .mmListBox ul li{margin-left:0;text-align:center;} .mqMenuWrap .mmListBox ul li:nth-child(n+5):nth-child(-n+8){margin-top: 5px;} .mqMenuWrap .mmListBox ul li:first-child, .mqMenuWrap .mmListBox ul li:nth-child(5){border-left:0;} .mqMenuWrap .mmListBox ul li a{font-size:13px;text-align: center;} .mqMenuWrap .mmListBox ul li span{width: 45px;height: 45px;margin:0 auto 3px;background-position:center center !important;background-size:100% 100% !important;border-radius: 3px 3px;border: 1px solid rgba(0, 0, 0, 0.07);} .quickWrap .quickBtnBox ul li span{width:35px;height:35px;} ._recentWListWrap ._recentWListUl .recentBbsLi .recentBbsTab{font-size:13px;} ._recentWListWrap ._recentWListUl .recentBbsLi .recentBbsInnerUl .recentBbsInnerLi .recentBbsInfo .recentBbsTitle{font-size:14px;} ._recentWListWrap ._recentWListUl .recentBbsMore{bottom:-417px;} } /****************************************************************** CONTENTS ******************************************************************/ /* 고객참여 > 정책제안 */ .squareWrap {overflow: hidden; position: relative; min-height: 415px; background: #f4f6fa url('../../images/contents/square_bg.png') right top repeat-y;} .squareWrap .img {position: absolute; top: 0; left: 0; max-width: 642px;} .squareWrap .content {font-size: 14px; position: absolute; top: 0; right: 0; width: 500px; min-height: 355px; padding: 40px 30px 20px; margin: 30px 30px 30px 0; box-sizing: border-box; background-color: #fff;} body.Mobile .squareWrap .content {padding: 40px 20px 20px;} .squareWrap .content:before, .squareWrap .content:after {content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 20px; background-color: #92d0ed;} .squareWrap .content:after {left: auto; right: 0; background-color: #91afed;} .squareWrap .content .title {font-size: 24px; margin-bottom: 20px;} body.Mobile .squareWrap .content .title {font-size: 20px;} .squareWrap .content .title span {color: #333;} .squareWrap .content .title:after {content:''; display: block; width: 40px; height: 1px; background-color: #2460db; margin-top: 15px;} .squareWrap .content .title span:before, .squareWrap .content .title span:after {content:''; display: inline-block; width: 11px; height: 13px; background: url('../../images/contents/square_quote.png') left top no-repeat; vertical-align: top; margin-top: 5px;} .squareWrap .content .title span:before {margin-right: 5px;} .squareWrap .content .title span:after {background-position: right top; margin-left: 5px;} ._mojList table.artclTable tbody th{border-bottom: 1px solid #cfcfd1;} body.Tablet .squareWrap .img, body.Mobile .squareWrap .img {position: static; margin: 0 auto;} body.Tablet .squareWrap .img img, body.Mobile .squareWrap .img img {width: 100%; } body.Tablet .squareWrap .content, body.Mobile .squareWrap .content {position: relative; width: 90%; margin: 30px auto; } /* noQuote */ .squareWrap .content .noQuote {height: 65px; color: #2460db; text-align: center; margin-bottom: 35px;} .squareWrap .content .noQuote:after {display: none;} body.Tablet .squareWrap .content .noQuote, {font-size: 20px;} body.Mobile .squareWrap .content .title {font-size: 20px;} /* contents size */ .squareWrap .content .f16 {font-size: 16px;} /* 칭찬합시다_인증서 */ .textbox_wrap .wrap{width:100%;border:0;} .certification .way ul{text-align:center;} .certification .way li.simple{display:none !important;width:0;height:0;} body.Mobile .certification .way li{float:left;} @media screen and (max-width: 600px){ .certification .way li{float:left;width:49%;margin-right:0.7%;} } /* 뉴스공지 > 홍보자료 > 소식지 */ .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;} body.Mobile .ebook li {width: 47%; margin-bottom: 10px;} body.Mobile .ebook li:nth-child(2n) {margin-right: 0;} /* 뉴스공지 > 뉴스레터 신청 */ .hideWrap {background-color: #f7f7f7; /*border: 1px solid #d9dee2; padding: 0 30px 10px;*/ box-sizing: border-box;} .hideWrap .objHeading_h4 {margin: 20px 0 15px;} /* 이민정책 > 이민정책 > 국경관리 */ .imgWrap.national_01_bg {background: url('../../images/contents/national_01_bg.png') right bottom no-repeat;} .imgWrap.two {width: 1100px;} .imgWrap.two .imgBox {width: 47%; margin-right: 0;} .imgWrap.two .imgBox:nth-child(2) {float: right;} body.Tablet .imgWrap.national_01_bg, body.Mobile .imgWrap.national_01_bg {background: none;} body.Tablet .imgWrap.two .imgBox {width: 45%;} body.Mobile .imgWrap.two .imgBox {width: 100%; float: none !important; margin-bottom: 20px;} /* 출입국·외국인정책본부 소개 > 본부 소개 > 비전 */ .visionWrap {position: relative; height: 750px;} .visionWrap .titleArea { position: relative; z-index: 1; font-size: 18px; font-weight: 500; text-align: center; width: 386px; height: 329px; padding: 70px 0 0; box-sizing: border-box; background: url('../../images/contents/vision_title.png') center top no-repeat; margin: 0 auto; } .visionWrap .titleArea h3 {color: #fff; font-weight: 400; font-size: 32px;} .visionWrap .titleArea h3:after {content: ''; display: block; margin: 20px auto; width: 30px; height: 3px; background-color: #fff; } .visionWrap .titleArea p {color: #fff;} .visionWrap .vision_list {position: absolute; top: 50px; left: 0; width: 100%;} .visionWrap .vision_list > li { position: absolute; color: #666; font-size: 15px; text-align: center; width: 229px; height: 220px; padding: 40px 0 0; box-sizing: border-box; background: url('../../images/contents/vision_list_bg.png') center top no-repeat; margin: 0 auto; } .visionWrap .vision_list > li.li01 {top: 0; left: 24px;} .visionWrap .vision_list > li.li02 {top: 297px; left: 128px;} .visionWrap .vision_list > li.li03 {top: 415px; left: 39.7%; left: calc(50% - 114px);} .visionWrap .vision_list > li.li04 {top: 297px; right: 128px;} .visionWrap .vision_list > li.li05 {top: 0; right: 24px;} .visionWrap .vision_list > li:before { content: ''; background-color: #e5e5e5; position: absolute; } .visionWrap .vision_list > li.li01:before {width: 148px; height: 2px; top: 47%; right: -146px;} .visionWrap .vision_list > li.li02:before {width: 2px; height: 120px; top: -89px; right: -12px; transform: skewX(-47deg);} .visionWrap .vision_list > li.li03:before {width: 2px; height: 148px; top: -140px; left: calc(50% - 1px);} .visionWrap .vision_list > li.li04:before {width: 2px; height: 104px; top: -77px; left: -5px; transform: skewX(47deg);} .visionWrap .vision_list > li.li05:before {width: 148px; height: 2px; top: 47%; left: -146px;} .visionWrap .vision_list > li:after { content: ''; width: 12px; height: 12px; background-color: #2460db; border: 2px solid #fff; border-radius: 50%; position: absolute; } .visionWrap .vision_list > li.li01:after {top: 43%; right: 0;} .visionWrap .vision_list > li.li02:after {top: 17px; right: 40px;} .visionWrap .vision_list > li.li03:after {top: -8px; right: 46%;} .visionWrap .vision_list > li.li04:after {top: 17px; left: 40px;} .visionWrap .vision_list > li.li05:after {top: 43%; left: 0;} .visionWrap .vision_list > li > dl:before { content: ''; position: absolute; width: 112px; height: 115px; background: url('../../images/contents/vision_list_circle.png') left top no-repeat; } .visionWrap .vision_list > li.li01 > dl:before {bottom: 0; left: 0;} .visionWrap .vision_list > li.li02 > dl:before {top: 25px; left: -20px; transform: rotate(61deg);} .visionWrap .vision_list > li.li03 > dl:before {bottom: -25px; left: 25.5%; transform: rotate(-45deg);} .visionWrap .vision_list > li.li04 > dl:before {top: 25px; right: -20px; transform: rotate(-152deg);} .visionWrap .vision_list > li.li05 > dl:before {bottom: 0; right: 0;transform: rotate(-90deg);} .visionWrap .vision_list > li dt {color: #2460db; font-size: 18px; margin-bottom: 35px;} .visionWrap .vision_list > li dd {max-width: 110px; margin: 0 auto; word-break: keep-all;} body.Tablet .visionWrap, body.Mobile .visionWrap {height: auto;} body.Tablet .visionWrap .titleArea, body.Mobile .visionWrap .titleArea {margin-bottom: 30px;} body.Tablet .visionWrap .vision_list, body.Mobile .visionWrap .vision_list {position: static;} body.Tablet .visionWrap .vision_list {text-align: center;} body.Tablet .visionWrap .vision_list > li, body.Mobile .visionWrap .vision_list > li {display: inline-block; vertical-align: top; position: relative; top: auto; left: auto; right: auto; bottom: auto; margin-bottom: 20px;} body.Mobile .visionWrap .vision_list > li {display: block;} body.Tablet .visionWrap .vision_list > li:after, body.Tablet .visionWrap .vision_list > li:before, body.Mobile .visionWrap .vision_list > li:after, body.Mobile .visionWrap .vision_list > li:before{display: none;} /* 출입국·외국인정책본부 소개 > 본부 소개 > 제3차 외국인정책 기본계획(2018~2022) > 추진구조 */ .propulsionWrap .titleArea { font-size: 20px; text-align: center; width: 414px; height: 415px; padding: 170px 0 0; box-sizing: border-box; background: url('../../images/contents/propulsion_title.png') center top no-repeat; margin: 15px auto 30px; } .propulsionWrap .titleArea h3 {color: #333; font-size: 30px; font-weight: 500; } .propulsionWrap .titleArea p {color: #666; font-weight: 400; } .propulsionWrap ul {position: absolute; top: 0;} .propulsionWrap .list_left {left: 0; text-align: right;} .propulsionWrap .list_left > li > .content {padding-right: 75px;} .propulsionWrap .list_left > li > .content:after {right: 0;} .propulsionWrap .list_right {right: 0; text-align: left;} .propulsionWrap .list_right > li > .content {padding-left: 75px;} .propulsionWrap .list_right > li > .content:after {left: 0;} .propulsionWrap ul > li { position: relative; width: 250px; height: 81px; border-radius: 40px; background-color: #053863; padding: 20px 10px 0; box-sizing: border-box; margin-bottom: 40px; } .propulsionWrap .list_left > li.li02, .propulsionWrap .list_right > li.li04, .propulsionWrap .list_left > li.li02:after, .propulsionWrap .list_left > li.li04:after {background-color: #054780;} .propulsionWrap .list_left > li.li03, .propulsionWrap .list_right > li.li03, .propulsionWrap .list_left > li.li03:after, .propulsionWrap .list_right > li.li03:after {background-color: #002e8d;} .propulsionWrap .list_left > li.li04, .propulsionWrap .list_right > li.li02, .propulsionWrap .list_left > li.li04:after, .propulsionWrap .list_right > li.li02:after {background-color: #2460db;} .propulsionWrap .list_right > li.li01, .propulsionWrap .list_right > li.li01:after {background-color: #0A7CC1;} .propulsionWrap ul > li:before { content: ''; height: 2px; background-color: #e5e5e5; position: absolute; top: 49%; } .propulsionWrap ul > li:after { content: ''; width: 12px; height: 12px; background-color: #053863; border: 2px solid #fff; border-radius: 50%; position: absolute; top: 41%; } .propulsionWrap .list_left > li.li01, .propulsionWrap .list_left > li.li04 {margin-left: 60px;} .propulsionWrap .list_left > li.li01:before, .propulsionWrap .list_left > li.li04:before {width: 135px; right: -135px;} .propulsionWrap .list_left > li.li01:after, .propulsionWrap .list_left > li.li04:after {right: -150px;} .propulsionWrap .list_left > li.li02:before {width: 100px; right: -100px;} .propulsionWrap .list_left > li.li02:after {right: -110px;} .propulsionWrap .list_left > li.li03 {margin-left: 25px;} .propulsionWrap .list_left > li.li03:before {width: 80px; right: -80px;} .propulsionWrap .list_left > li.li03:after {right: -85px;} .propulsionWrap .list_right > li.li01, .propulsionWrap .list_right > li.li04 {margin-right: 60px;} .propulsionWrap .list_right > li.li01:before, .propulsionWrap .list_right > li.li04:before {width: 135px; left: -135px;} .propulsionWrap .list_right > li.li01:after, .propulsionWrap .list_right > li.li04:after {left: -150px;} .propulsionWrap .list_right > li.li02 {margin-left: 60px;} .propulsionWrap .list_right > li.li02:before {width: 100px; left: -100px;} .propulsionWrap .list_right > li.li02:after {left: -110px;} .propulsionWrap .list_right > li.li03 {margin-left: 34px;} .propulsionWrap .list_right > li.li03:before {width: 80px; left: -80px;} .propulsionWrap .list_right > li.li03:after {left: -85px;} .propulsionWrap ul > li > .content {position: relative; color: #fff; font-size: 15px; font-weight: 500;} .propulsionWrap ul > li > .content > p {color: #fff; font-size: 15px; font-weight: 400;} .propulsionWrap ul > li > .content:after { content: ''; position: absolute; top: -10px; width: 59px; height: 59px; background: url('../../images/contents/propulsion_icon.png') left top no-repeat; } .propulsionWrap .list_left > li.li02 > .content:after {background-position: left -60px;} .propulsionWrap .list_left > li.li03 > .content:after {background-position: left -121px;} .propulsionWrap .list_left > li.li04> .content:after {background-position: left bottom;} .propulsionWrap .list_right > li.li01 > .content:after {background-position: right top;} .propulsionWrap .list_right > li.li02 > .content:after {background-position: right -60px;} .propulsionWrap .list_right > li.li03 > .content:after {background-position: right -121px;} .propulsionWrap .list_right > li.li04 > .content:after {background-position: right bottom;} body.Tablet .propulsionWrap ul > li:before, body.Tablet .propulsionWrap ul > li:after, body.Mobile .propulsionWrap ul > li:before, body.Mobile .propulsionWrap ul > li:after {display: none;} body.Tablet .propulsionWrap ul, body.Mobile .propulsionWrap ul {position: static;} body.Tablet .propulsionWrap ul > li, body.Mobile .propulsionWrap ul > li {margin-right: 0 !important; margin-left: 0 !important;} body.Tablet .propulsionWrap .list_left {float: left;} body.Tablet .propulsionWrap .list_right {float: right;} body.Mobile .propulsionWrap .titleArea {width: 100%; height: 375px; background-size: 100%; padding-top: 40%;} @media all and (max-width: 550px) { .propulsionWrap ul {float: none !important; width: 250px; margin: 0 auto;} } /* 출입국·외국인정책본부 소개 > 본부 소개 > 조직과 기능 */ .org_wrap {position: relative;} .org_wrap .h4 {display: table; margin: 0 auto; text-align: center; padding-left: 30px; position: relative; z-index: 1;} .org_wrap .h4 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 .org_2depth {position: relative; margin: 30px 0;} .org_wrap .org_2depth > ul {overflow: hidden; display: block; margin: 20px auto; width: 100%; text-align: center;} .org_wrap .org_2depth > ul > li{float: left; width: 49%; position: relative;} .org_wrap .org_2depth > ul > li.left{width:54%;} .org_wrap .org_2depth > ul > li.right{float: right; width:45%;} .org_wrap .org_2depth.only > ul > li{width:50%;} .org_wrap .org_2depth > ul > li > p {width: 170px; background-color: #ededed; border-radius: 50px; padding: 15px; color: #054780; font-size: 18px; font-weight: 400; position: relative; z-index: 2;margin: 0 auto 50px;} .org_wrap .org_2depth.only > ul > li > p{position:static; margin-left:165px;} .org_wrap .org_2depth > ul > li.center > p {margin: 0;} .org_wrap .org_3depth h2{font-size:0} .org_wrap .org_3depth > ul {width: 100%;} .org_wrap .org_3depth ul:after {content:''; display:block; clear: both;} .org_wrap .org_3depth > ul > li {position: relative; float:left; width: calc((100% - 20px) / 5); text-align: center;} .org_wrap .org_3depth > ul > li+li{margin-left:5px;} .org_wrap .org_3depth > ul > li > p {height: 75px; padding: 15px; background-color: #054780; border-radius: 10px; box-sizing: border-box; color:#fff;} .org_wrap .org_3depth > ul > li.pdSm > p {padding:15px 5px;} .org_wrap li.left .org_3depth > ul > li{width: calc((100% - 25px) / 6);} .org_wrap li.right .org_3depth > ul > li > p {background-color: #12506E;} .org_wrap:after {content: ""; background-color: #cccccc; z-index: 0; width: 2px; height: 340px; position: absolute; top: 0; left: 50%; margin-left: -1px;} .org_2depth:after {content: ""; background-color: #cccccc; z-index: 0; width: 50%; height: 2px; position: absolute; top: 29px; left: 26%;} .org_2depth.only:after{content: ""; background-color: #cccccc; z-index: 0; width: 2px; height: 195px; position: absolute; top: 0; left: 50%; margin-left: -1px;} .org_wrap .org_2depth > ul > li > p:after {content: ""; background-color: #cccccc; z-index: 0; width: 2px; height: 25px; position: absolute; bottom: -25px; left: 50.3%; margin-left: -1px;} .org_wrap .org_2depth.only > ul > li.right > p:after{content: ""; background-color: #cccccc; z-index: 0; width: 167px; height: 2px; position: absolute; top: 31%; left: 0;} .org_wrap .org_3depth:after {content: ""; background-color: #cccccc; z-index: 0; width: 84.3%; height: 2px; position: absolute; top: 81px; left: 8%;} .org_wrap li.right .org_3depth:after {width: 81.2%; left: 9.6%;} .org_wrap .org_3depth > ul > li:after {content: ""; background-color: #cccccc; z-index: 0; width: 2px; height: 25px; position: absolute; top: -25px; left: 50%;} @media all and (max-width: 999px) { .org_wrap .h4{margin-bottom:30px;} .org_wrap .org_2depth{margin:20px 0;} .org_wrap .org_2depth > ul > li {width: 49% !important;} .org_2depth.only:after{height:135px;} .org_wrap .org_2depth.only > ul > li{width:50% !important;} .org_wrap .org_2depth.only > ul > li > p{margin-left:50px; margin-bottom:0;} .org_wrap .org_2depth.only > ul > li.right > p:after{top:53%; width:52px;} .org_wrap .org_2depth > ul > li > p {margin-bottom:25px;} .org_wrap .org_3depth:after{display:none;} .org_wrap li.right .org_3depth:after{width: 80.6%; left: 9.8%;} .org_wrap li .org_3depth > ul > li{float:none; width:100% !important;; margin-bottom:10px;} .org_wrap .org_3depth > ul > li+li{margin-left:0;} .org_wrap .org_3depth > ul > li:after{top:-10px; height:10px;} .org_wrap .org_3depth > ul > li:first-child:after{display:none;} } @media all and (max-width: 599px) { .org_wrap .org_2depth.only > ul > li{width:100% !important;} .org_wrap .org_2depth.only > ul > li.right > p{position:relative; width:170px; margin:0 auto 7px;} .org_wrap .org_2depth.only > ul > li.right > p:after{display:none;} .org_wrap .org_2depth > ul > li > p{width:auto; font-size:16px;} .org_wrap .org_2depth > ul > li.right > p:before{top:-86%; height:50px;} .org_wrap .org_3depth > ul > li {display: inline-block; width: 49% !important; margin-bottom: 25px;} .org_wrap .org_3depth > ul > li:nth-child(2n){margin-left:1%;} .org_wrap .org_3depth > ul > li > p {width: 100%;} .org_wrap li.right .org_3depth:after{width: 50.3%; left: 24.5%;} } /* 출입국·외국인정책본부 소개 > 본부 소개 > 임무 */ .squareWrap.mission {background-color: #dadae2;} .missionList {position: relative; background: url('../../images/contents/missionList_bg.png') left top no-repeat; padding: 40px 15px 10px;} .missionList:after { content:''; width: 105px; height: 105px; background: url('../../images/contents/missionList_bg_bottom.png') left top no-repeat; position: absolute; bottom: 0; right: 0; z-index: -1; } .missionList > ul {overflow: hidden;} .missionList > ul > li {color: #666; text-align: center; word-break: keep-all; float: left; width: 20%; min-height: 220px; border: 1px solid #ddd; padding: 34px 20px 30px; box-sizing: border-box; margin: 0 2.5% 30px; background-color: #fff;} .missionList > ul > li:before {content: ''; display: block; width: 51px; height: 52px; background: url('../../images/contents/missionList_icon.png') left top no-repeat; margin: 0 auto 15px;} .missionList > ul > li:nth-child(2):before {background-position: -110px top;} .missionList > ul > li:nth-child(3):before {background-position: -226px top;} .missionList > ul > li:nth-child(4):before {background-position: -340px top;} .missionList > ul > li:nth-child(5):before {background-position: -455px top;} .missionList > ul > li:nth-child(6):before {background-position: -568px top;} .missionList > ul > li:nth-child(7):before {background-position: -684px top;} .missionList > ul > li:nth-child(8):before {background-position: right top;} body.Tablet .missionList > ul > li {width: 45%; min-height: 200px;} body.Mobile .missionList > ul > li {width: 100%; min-height: 100%; margin: 0 auto 30px;} .squareWrap.mission .content .noQuote {height: 70px;} .squareWrap.mission .content .noQuote:after {display: block; margin: 40px auto 0;} /* images */ .img_wrap {display: table-cell; vertical-align: top;} .img_wrap .img {border: 10px solid transparent; border-image: url("../../images/contents/img_shadow.png") 10 round; text-align: center; display: inline-block;} .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%;} /* 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%;} /* mobile */ body.Mobile .img_pro > li {width: 50%; margin-bottom: 15px;} /* 출입국·외국인정책본부 소개 > 본부 소개 > 연혁 / 오른쪽에 컨텐츠가 있는 img 영역 */ #menu1546_obj336 .historyWrap .substance .year_content dt {text-indent: -5000px; width: 10px; text-align: justify !important;} .imgWrap {overflow: hidden; display: table-cell; vertical-align: top;} .imgWrap .imgBox {float: left; border: 10px solid transparent; border-image: url("../../images/contents/img_shadow.png") 10 round; text-align: center; margin-right: 40px;} .imgWrap .imgBox > img {margin: -10px 0 0 -10px; max-width: 103%;} .imgWrap .ul_1, .imgWrap .rightArea {display: table-cell;} .imgWrap .rightArea dl {margin-bottom: 50px;} body.Tablet .imgWrap .imgBox {margin-bottom: 20px;} body.Tablet .imgWrap .ul_1, body.Tablet .imgWrap .rightArea {display: block; clear: both;} /* imgWrap에 배경 아이콘이 있을때 */ .imgWrap.bgIcon {background: url("../../images/contents/imgWrap_bgIcon.png") right bottom no-repeat;} /* imgWrap의 이미지가 오른쪽에 있을 때 */ .imgWrap.opposite .imgBox{float: right; margin-right: 0; margin-left: 40px;} /* 출입국·외국인정책본부 소개 > 본부 소개 > 제3차 외국인정책 기본계획(2018~2022) > 역할 */ .quoteWrap {text-align: center;} .quoteWrap .title {color: #333; font-size: 30px;} .quoteWrap .title:before, .quoteWrap .title:after {content:''; display: inline-block; width: 11px; height: 13px; background: url('../../images/contents/square_quote.png') left top no-repeat; vertical-align: top; margin-top: 5px;} .quoteWrap .title:before {margin-right: 5px;} .quoteWrap .title:after {background-position: right top; margin-left: 5px;} .quoteWrap p {color: #666; font-size: 20px; margin-top: 5px;} .roleWrap {max-width: 880px; margin: 0 auto; min-height: 325px; background: url('../../images/contents/roleWrap_bg.png') left top no-repeat; padding-top: 15px;} .roleWrap > li {margin-bottom: 65px;} .roleWrap dl {overflow: hidden;} .roleWrap dt {color: #fff; font-size: 18px; font-weight: 500; text-align: center; float: left; width: 50%; padding-top: 15px; position: relative; z-index: 1;} .roleWrap dd { position: relative; color: #666; text-align: center; float: right; width: 50%; max-width: 340px; background-color: #fff; border: 3px solid #25a1db; border-radius: 35px; padding: 16px; box-sizing: border-box; } .roleWrap dd:before {content: ''; position: absolute; left: -50%; top: 50%; width: 50%; height: 1px; background-color: #25a1db; } .roleWrap dd:after {content: ''; position: absolute; left: -5px; top: 43%; width: 4px; height: 4px; background-color: #25a1db; border: 2px solid #fff; border-radius: 50%;} .roleWrap li:nth-child(2) dd {border-color: #658fe6;} .roleWrap li:nth-child(2) dd:before, .roleWrap li:nth-child(2) dd:after {background-color: #658fe6;} .roleWrap li:nth-child(3) dd {border-color: #2460db;} .roleWrap li:nth-child(3) dd:before, .roleWrap li:nth-child(3) dd:after {background-color: #2460db;} @media all and (max-width: 630px) { .roleWrap {background: none;} .roleWrap li:nth-child(1) dt {color: #25a1db;} .roleWrap li:nth-child(2) dt {color: #658fe6;} .roleWrap li:nth-child(3) dt {color: #2460db;} .roleWrap dd {float: none; width: 100%; max-width: 100%;} } /* 출입국·외국인정책본부 소개 > 본부 소개 > 제3차 외국인정책 기본계획(2018~2022) > 수립 근거 및 절차 */ .evidenceList {overflow: hidden; } .evidenceList > li {position: relative; float: left; width: 39%; max-width: 420px;} .evidenceList > li:after {content: ''; position: absolute; top: 174px; width: 2px; height: 8px; background-color: #2460db; transform: skewX(45deg);} .evidenceList > li:before {content: ''; position: absolute; top: 181px; width: 120px; height: 1px; background-color: #2460db;} .evidenceList > li.left:after {right: -118px; } .evidenceList > li.left:before {right: -120px; } .evidenceList > li.right:after {top: 200px; left: -118px; background-color: #0A7CC1;} .evidenceList > li.right:before {top: 200px; left: -120px; background-color: #0A7CC1;} .evidenceList h4 {color: #fff; font-size: 18px; text-align: center; background-color: #205dd9; padding: 12px;} .evidenceList .box {position: relative; min-height: 248px; text-align: center; border: 1px solid #2460db; padding: 20px 20px 15px;} .evidenceList .box:after {content: ''; position: absolute; top: 130px; width: 1px; height: 18px; background-color: #fff;} .evidenceList li.left .box:after {right: -1px;} .evidenceList li.right .box:after {left: -1px;} .evidenceList .box dl {background-color: #f3f7fd; margin-bottom: 5px; padding: 10px 15px;} .evidenceList .box dl > dt {color: #333; font-size: 16px; font-weight: 500; border-bottom: 1px solid #cad9f6; padding-bottom: 10px;} .evidenceList .box dl > dt > p {color: #666; font-weight: 400;} .evidenceList .box dl > dd {padding: 13px 0 5px;} .evidenceList .box dl .ul_3 > li:before {position: static !important; margin-right: 5px;} .evidenceList > li.right {float: right; position: relative;} .evidenceList > li.right h4 {background-color: #0A7CC1;} .evidenceList > li.right dl {background-color: #e9f5fb;} .evidenceList > li.right .box {border-color: #0A7CC1;} .evidenceList > li.right .box dl {height: 223px;} .evidenceList > li.right .box dl > dt {border-color: #c4e6f7;} .evidenceList > li.mid {position: absolute;width: 74px !important;height: 56px;left: 50%;margin-left: -37px;top: 20%;background: url(../../images/contents/both_sides_arrow.png) center center no-repeat;} .evidenceList > li.mid:after,.evidenceList > li.mid:before {display: none;} @media all and (max-width: 800px) { .evidenceList > li {width: 40%;} .evidenceList > li:before {width: 30px;} .evidenceList > li.left:before {right: -30px;} .evidenceList > li.right:before {left: -30px;} .evidenceList > li.left:after {right: -28px;} .evidenceList > li.right:after {left: -28px;} } body.Mobile .evidenceList > li {float: none; width: 100%; margin-bottom: 80px;} body.Mobile .evidenceList > li:before, body.Mobile .evidenceList > li:after, body.Mobile .evidenceList .box:after {display: none;} body.Mobile .evidenceList > li.right .box dl {height: auto; } body.Mobile .evidenceList .box {min-height: 100%;} body.Mobile .evidenceList > li.mid {top: 48%;} /* 출입국·외국인정책본부 소개 > 본부 소개 > 해외 주재관 */ .foreignMap {position: relative; width: 100%; overflow-x: auto; overflow-y: hidden;} .foreignMap .sum {position: absolute; bottom: 10px; right: 10px; font-size: 13px;} .foreignMap > ul {position: absolute; top: 0; left: 0; width: 1100px; height: 100%;} .foreignMap > ul > li {position: absolute;} .foreignMap > ul > li > a {display: block; color: #333; font-size: 14px; text-align: center; padding: 4px 11px; border: 1px solid #2460db; background-color: #fff;} .foreignMap > ul > li:before {content: ''; position: absolute; width: 1px; height: 20px; background-color: #2460db;} .foreignMap > ul > li:after {content: ''; position: absolute; width: 5px; height: 5px; background-color: #2460db; border-radius: 50%;} .foreignMap > ul > li > a:after {content: ''; position: absolute; width: 10px; height: 10px; background-color: #2460db;} .foreignMap > ul > li.rus {top: 220px; left: 99px;} .foreignMap > ul > li.uzb {top: 301px; left: 122px;} .foreignMap > ul > li.indi {top: 387px; left: 204px;} .foreignMap > ul > li.bang {top: 487px; left: 212px;} .foreignMap > ul > li.thai {top: 531px; left: 276px;} .foreignMap > ul > li.hoci {top: 582px; left: 269px;} .foreignMap > ul > li.indo {top: 538px; left: 419px;} .foreignMap > ul > li.phili {top: 491px; left: 436px;} .foreignMap > ul > li.jap {top: 427px; left: 487px;} .foreignMap > ul > li.chi {top: 167px; left: 421px;} .foreignMap > ul > li.mong {top: 219px; left: 280px;} .foreignMap > ul > li.LA {top: 300px; right: 243px;} .foreignMap > ul > li.chi > ul {font-size: 14px; margin-left: 10px;} .foreignMap > ul > li.chi > ul > li {margin-top: 3px !important;} .foreignMap > ul > li.chi > ul > li:before {content: '·'; margin-right: 3px;} .foreignMap > ul > li.rus:before, .foreignMap > ul > li.uzb:before, .foreignMap > ul > li.indi:before, .foreignMap > ul > li.mong:before {bottom: -24px; right: -4px;} .foreignMap > ul > li.rus:after, .foreignMap > ul > li.uzb:after, .foreignMap > ul > li.indi:after, .foreignMap > ul > li.mong:after {bottom: -29px; right: -6px;} .foreignMap > ul > li.rus > a:after, .foreignMap > ul > li.uzb > a:after, .foreignMap > ul > li.indi > a:after, .foreignMap > ul > li.mong > a:after {bottom: -4px; right: -4px;} .foreignMap > ul > li.indi:before {height: 13px; bottom: -17px;} .foreignMap > ul > li.indi:after {bottom: -22px;} .foreignMap > ul > li.mong:before {height: 80px; bottom: -84px;} .foreignMap > ul > li.mong:after {bottom: -89px;} .foreignMap > ul > li.bang:before, .foreignMap > ul > li.thai:before, .foreignMap > ul > li.hoci:before {height: 60px; top: -64px; right: -4px;} .foreignMap > ul > li.bang:after, .foreignMap > ul > li.thai:after, .foreignMap > ul > li.hoci:after {top: -69px; right: -6px;} .foreignMap > ul > li.bang > a:after, .foreignMap > ul > li.thai > a:after, .foreignMap > ul > li.hoci > a:after {top: -4px; right: -4px;} .foreignMap > ul > li.thai:before {height: 80px; top: -84px;} .foreignMap > ul > li.thai:after {top: -89px;} .foreignMap > ul > li.hoci:before {height: 120px; top: -124px;} .foreignMap > ul > li.hoci:after {top: -129px;} .foreignMap > ul > li.indo:before, .foreignMap > ul > li.phili:before, .foreignMap > ul > li.jap:before {height: 40px; top: -44px; left: -4px;} .foreignMap > ul > li.indo:after, .foreignMap > ul > li.phili:after, .foreignMap > ul > li.jap:after {top: -49px; left: -6px;} .foreignMap > ul > li.indo > a:after, .foreignMap > ul > li.phili > a:after, .foreignMap > ul > li.jap > a:after {top: -4px; left: -4px;} .foreignMap > ul > li.chi:before {height: 175px; top: 35px; left: -4px;} .foreignMap > ul > li.chi:after {top: 210px; left: -6px;} .foreignMap > ul > li.chi > a:after, .foreignMap > ul > li.LA > a:after {top: 25px; left: -4px;} .foreignMap > ul > li.LA:before {height: 30px; top: 35px; left: -4px;} .foreignMap > ul > li.LA:after {top: 65px; left: -6px;} /* 이민정책 > 주요제도 > 출입국 우대카드 제도 */ .step_2.f20 > ul > li p {font-size: 20px; padding-top: 65px; line-height: 1.2;} .step_2.f20 > ul > li p:before {top: 4px;} /* 이민정책 > 주요제도 > 외국인 비자연장 전 세금체납 확인제도 */ .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; display: table;} .step_1_1 > ol > li {position: relative; list-style: none !important; padding: 0 0 0 5px; margin: 0 0 20px 0 !important; display: table-cell !important; vertical-align: top; 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;} .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%;} .step_1_1.nosecLine > ol > li:nth-child(2):before, .step_1_1.nosecLine > ol > li:nth-child(2):after {display: none;} .step_1_1.nosecLine > ol > li:nth-child(2):before {display: none;} .step_1_1.nosecLine > ol > li:nth-child(2):after {display: none;} .step_1_1.nosecLine > ol > li:nth-child(3) > ul:last-child {border-color: #ebebeb; margin-bottom: 0;} .step_1_1.liNum05 > ol > li {width: 20%;} /*tablet*/ body.Tablet .step_1_1 > ol > li {width: 33.3%; float: left;} 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%; float: left;} 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;} body.Mobile .step_1_1.nosecLine > ol > li:nth-child(3) > .title, body.Mobile .step_1_1.nosecLine > ol > li:nth-child(3) > ul {float: left; width: 95%;} /* 이민정책 > 주요제도 > 외국인 계절근로자 제도. */ .step_2_1 > ol > li .list > ul > li, .step_2_2 > ol > li > div > ul > li {position: relative; padding-left: 15px !important; margin: 5px 0 !important;} .step_2_1 > ol > li .list > ul > li:before, .step_2_2 > ol > li > div > ul > li:before {content: ""; position: absolute; top: 9px; left:0; width: 6px; height: 6px; background-color: #51697c; border-radius: 100%;} .step_2_1 > ol > li .list > ul > li > ul > li, .step_2_2 > ol > li > div > ul > li > ul > li {position: relative; padding-left: 10px; margin: 5px 0 !important;} .step_2_1 > ol > li .list > ul > li > ul > li:before, .step_2_2 > ol > li > div > ul > li > ul > li:before {content: "-"; position: absolute; top: 0; left:0;} .step_2_1.num > ol > li > p:before, .step_2_2 > ol > li > div:before {content: '01'; display: block; position: absolute; top: 20px; left: 20px; color: #595959; font-size: 48px; font-weight: 500; z-index: 4; line-height: 1.1; -webkit-margin-before: -10px; -webkit-margin-start: -10px; letter-spacing: -0.08em;} .step_2_1.num > ol > li:nth-child(2) > p:before, .step_2_2 > ol > li:nth-child(2) > div:before {content: '02';} .step_2_1.num > ol > li:nth-child(3) > p:before, .step_2_2 > ol > li:nth-child(3) > div:before {content: '03';} .step_2_1.num > ol > li:nth-child(4) > p:before, .step_2_2 > ol > li:nth-child(4) > div:before {content: '04';} .step_2_1.num > ol > li:nth-child(5) > p:before, .step_2_2 > ol > li:nth-child(5) > div:before {content: '05';} .step_2_1.num > ol > li:nth-child(6) > p:before, .step_2_2 > ol > li:nth-child(6) > div:before {content: '06';} .step_2_1.num > ol > li:nth-child(7) > p:before, .step_2_2 > ol > li:nth-child(7) > div:before {content: '07';} .step_2_1.num > ol > li:nth-child(8) > p:before, .step_2_2 > ol > li:nth-child(8) > div:before {content: '08';} .step_2_1.num > ol > li:nth-child(9) > p:before, .step_2_2 > ol > li:nth-child(9) > div:before {content: '09';} .step_2_1.num > ol > li:nth-child(10) > p:before, .step_2_2 > ol > li:nth-child(10) > div:before {content: '10';} .step_2_2 {overflow: hidden; word-break: keep-all; text-align: left;} .step_2_2 > ol {padding-left: 0 !important; width: 104%;} .step_2_2 > ol > li {float:left; position: relative; box-sizing: border-box; margin-right: 4%; margin-bottom: 50px !important; width: 29.3%; min-height: 260px; border: 5px solid #e5e5e5; border-radius: 50px; list-style: none !important;} .step_2_2.h160 > ol > li {min-height: 160px;} .step_2_2 > ol > li:before {content: ""; position: absolute; top: 50%; right: -45px; background: url('/sites/moj/images/contents/step_2_arrow.png') left center no-repeat; width: 50px; height: 20px; z-index: 5; margin-top: -10px;} .step_2_2 > ol > li:after {content: ""; position: absolute; top: 50%; left: -10px; width: 16px; height: 16px; background-color: #e5e5e5; border: 3px solid #fff; border-radius: 100%; box-sizing: border-box; z-index: 4; margin-top: -8px;} .step_2_2 > ol > li > div {position: relative; padding: 40px 20px 10px 40px; overflow: hidden; vertical-align: top; border-radius: 40px;} .step_2_2 > ol > li > div:before {left: 0; top: 10px; -webkit-margin-before: 0; -webkit-margin-start: -2px; z-index: 0;} .step_2_1 > ol > li > p:after, .step_2_2 > ol > li > div:after {content: ''; display: block; position: absolute; top: 35px; left: 135px; width: 12px; height: 33px; background-color: #e5e5e5; transform: skewX(-45deg); z-index: 4; -webkit-margin-before: -10px; -webkit-margin-start: -10px;} .step_2_2 > ol > li > div:after {left: auto; right: 5%; top: 15px; -webkit-margin-before:0; -webkit-margin-start: 0;} .step_2_2 > ol > li > div .title {font-size: 20px; color: #2460db; margin-bottom: 10px; z-index: 1; position: relative; font-weight: 400;} /* desktop */ body.Desktop .step_2_2 > ol > li:nth-child(6n+4), body.Desktop .step_2_2 > ol > li:nth-child(6n+5), body.Desktop .step_2_2 > ol > li:nth-child(6n+6) {float: right;} body.Desktop .step_2_2 > ol > li:nth-child(6n+4):before, body.Desktop .step_2_2 > ol > li:nth-child(6n+5):before, body.Desktop .step_2_2 > ol > li:nth-child(6n+6):before {transform: translateY(0px) rotate(-180deg); left: -45px;} body.Desktop .step_2_2 > ol > li:nth-child(6n+4):after, body.Desktop .step_2_2 > ol > li:nth-child(6n+5):after, body.Desktop .step_2_2 > ol > li:nth-child(6n+6):after {left: auto; right: -10px;} body.Desktop .step_2_2 > ol > li:nth-child(3n+3):before {transform: translateY(0px) rotate(-270deg); margin-left: -25px;left: 50%;top: auto;bottom: -40px;} body.Desktop .step_2_2 > ol > li:nth-child(9n+9) {margin-right: 0;} body.Desktop .step_2_2 > ol > li:last-child:before, body.Desktop .step_2_2 > ol > li:nth-child(3n+1):after {display: none;} body.Desktop .step_2_2 > ol > li:nth-child(3n+1) {clear: both;} /* tablet */ body.Tablet .step_2_2 > ol {width: 107.5%;} body.Tablet .step_2_2 > ol > li {width: 43%; margin-right: 7%;} body.Tablet .step_2_2 > ol > li:nth-child(4n+3), body.Tablet .step_2_2 > ol > li:nth-child(4n+4) {float: right;} body.Tablet .step_2_2 > ol > li:nth-child(4n+3):before, body.Tablet .step_2_2 > ol > li:nth-child(4n+4):before {transform: translateY(0px) rotate(-180deg); left: -45px;} body.Tablet .step_2_2 > ol > li:nth-child(4n+3):after, body.Tablet .step_2_2 > ol > li:nth-child(4n+4):after {left: auto; right: -10px;} body.Tablet .step_2_2 > ol > li:nth-child(2n+2):before {transform: translateY(0px) rotate(-270deg); margin-left: -25px;left: 50%;top: auto;bottom: -30px;} body.Tablet .step_2_2 > ol > li:last-child:before, body.Tablet .step_2_2 > ol > li:nth-child(2n+1):after {display: none;} body.Tablet .step_2_2 > ol > li:nth-child(2n+1) {clear: both;} body.Tablet .step_2_2 > ol > li:last-child {margin-right: 7%;} body.Tablet .step_2_2 > ol > li > div:after {right: 3%;} body.Tablet .step_2_2 > ol > li > div {position: relative; padding: 40px 20px 10px 40px; overflow: hidden; vertical-align: top; border-radius: 40px;} body.Tablet .step_2_2 > ol > li > div:before {left: 0; top: 10px; -webkit-margin-before: 0; -webkit-margin-start: -2px; z-index: 0;} body.Tablet .step_2_2 > ol > li > div:after {left: auto; right: 5%; top: 15px; -webkit-margin-before:0; -webkit-margin-start: 0;} body.Tablet .step_2_2 > ol > li > div .title {font-size: 20px; color: #2460db; margin-bottom: 10px; z-index: 1; position: relative; font-weight: 400;} /* mobile */ body.Mobile .step_2_2 > ol {width: 100%;} body.Mobile .step_2_2 > ol > li {width: 100%; margin-right: 0; min-height: auto; margin-bottom: 60px !important;} body.Mobile .step_2_2 > ol > li:before {top: auto; bottom: -40px; right: auto; left: 50%; margin-left: -25px; transform:translateY(0px) rotate(-270deg);} body.Mobile .step_2_2 > ol > li:after {top: -10px; left: 50%; margin-left: -8px;} body.Mobile .step_2_2 > ol > li:first-child:after, body.Mobile .step_2_2 > ol > li:last-child:before {display: none;} body.Mobile .step_2_2 > ol > li > div {padding: 40px 30px 30px;} body.Mobile .step_2_2 > ol > li > div {position: relative; padding: 40px 20px 10px 40px; overflow: hidden; vertical-align: top; border-radius: 40px;} body.Mobile .step_2_2 > ol > li > div:before {left: 0; top: 10px; -webkit-margin-before: 0; -webkit-margin-start: -2px; z-index: 0;} body.Mobile .step_2_2 > ol > li > div:after {left: auto; right: 5%; top: 15px; -webkit-margin-before:0; -webkit-margin-start: 0;} body.Mobile .step_2_2 > ol > li > div .title {font-size: 20px; color: #2460db; margin-bottom: 10px; z-index: 1; position: relative; font-weight: 400;} /* 이민정책 > 주요제도 > 탑승자 사전확인제도 */ .boardingWrap {background-color: #f7f7f7; padding: 40px 70px; overflow-x: auto;} .boardingWrap .overflowX {width: 960px;} .boardingWrap img {display: block; margin: 0 auto; max-width: 864px; width: 100%;} /*.boardingWrap ul {display: table; width: 100%; margin-bottom: 20px; text-align: center;}*/ .boardingWrap ul > li {display: inline-table; position: relative; z-index: 2; margin-right: 85px; margin-bottom: 10px;} .boardingWrap ul > li > div { position: relative; display: table-cell; vertical-align: middle; color: #333; font-size: 18px; text-align: center; width: 170px; height: 120px; border: 1px solid #2460db; border-radius: 10px; background-color: #fff; } .boardingWrap ul > li:after { content: ''; position: absolute; top: 10px; left: 10px; width: 170px; height: 120px; background: url('../../images/contents/boarding_pattern_grey.png') left top repeat;border-radius: 10px; z-index: -1; } .boardingWrap ul > li > div:before { content: ''; position: absolute; top: 55px; right: -46%; width: 61px; height: 9px; background: url('../../images/contents/boarding_arrow.png') left top repeat; } .boardingWrap ul > li:first-child > div {color: #fff; background-color: #2460db;} .boardingWrap ul > li:last-child > div {color: #fff; /*background-color: #25a1db; border-color: #25a1db;*/background-color:#1c7aa5;border-color:#1c7aa5;} .boardingWrap ul > li:first-child:after, .boardingWrap ul > li:last-child:after{background-image: url('../../images/contents/boarding_pattern.png');} .boardingWrap ul > li:last-child {margin-right: 0;} .boardingWrap ul > li:last-child > div:before {display: none;} /* 이민정책 > 이민정책 > 외국인체류관리(체류관리과) */ .bull_circle{background: url('/sites/moj/images/contents/contents_ul.png') left 8px no-repeat; padding-left: 16px; } ._contentBuilder ._obj._objHtml#menu1515_obj378 ol{margin-left:-6px;} /* 출입국·외국인정책본부 소개 > 본부 소개 > 기념일 */ .anniWrap > ul {position: relative; display: table; width: 100%; border-bottom: 1px solid #dddee0; border-top: 2px solid #2460db;} .anniWrap > ul:before {content: ''; position: absolute; top: 0; left: 50%;width: 1px; height: 100%; background-color: #dddee0;} .anniWrap > ul > li {overflow: hidden; display: inline-table; vertical-align: top; width: 50%; padding: 30px; box-sizing: border-box; border-top: 1px solid #dddee0;} .anniWrap > ul > li:nth-child(1),.anniWrap > ul > li:nth-child(2) {border-top-width: 0;} .anniWrap .month {float: left; color: #333; font-size: 18px; text-align: center; padding-top: 30px; width: 90px; height: 90px; background: url('../../images/contents/anni_month_bg.png') left top repeat; box-sizing: border-box; margin-right: 30px;} .anniWrap .dataList {float: left; width: calc(100% - 120px);} .anniWrap .dataList > ul > li {position: relative; padding-bottom: 30px;} .anniWrap .dataList > ul > li:before {content: ''; position: absolute; left: 12.9%; top: 10px; width: 1px; height: 100%; background-color: #2460db;} .anniWrap .dataList > ul > li:last-child {padding-bottom: 0;} .anniWrap .dataList > ul > li:last-child:before {display: none;} .anniWrap .dataList dl {overflow: hidden; width: 100%;} .anniWrap .dataList dt {position: relative; float: left; color: #333; font-size: 18px; width: 14%;} .anniWrap .dataList dd {float: right; width: 79%;} .anniWrap .dataList dt:after {content: ''; position: absolute; right: 0; top: 10px; width: 7px; height: 7px; background-color: #2460db; border-radius: 50%;} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){ .anniWrap > ul > li {margin-right: -2px;} } body.Tablet .anniWrap .month, body.Mobile .anniWrap .month {float: none; margin: 0 auto 30px;} body.Tablet .anniWrap .dataList, body.Mobile .anniWrap .dataList{float: none; width: 100%;} @media all and (max-width: 660px) { .anniWrap > ul > li {float: none; width: 100%;} .anniWrap > ul:before {display: none;} .anniWrap > ul > li:nth-child(2) {border-top-width: 1px;} .anniWrap .dataList > ul > li:before {left: 13.2%;} } /* 이민정책 > 주요통계 */ .tableWrap.linkTable table tbody td {text-align: left;} .tableWrap.linkTable .button {margin-bottom: 0; margin-left: 5px; vertical-align: middle;} .tableWrap.linkTable .button.small.view a {font-size: 11px !important;} /* 이민정책 > 주요제도 > 외국인을 위한 마을변호사 */ .callCenter {position: relative; height: 535px; max-width: 899px; margin: 0 auto; background: url('../../images/contents/callCenter_bg.png') center center no-repeat; background-size: 100%;} .callCenter p.number {position: absolute; top: 53%; left: calc(50% - 93px); color: #054780; font-weight: 600; font-size: 48px; text-align: center; font-style: italic;} .callCenter li { position: absolute; text-align: center; width: 235px; height: 235px; background: url('../../images/contents/callCenter_li_bg.png') center top no-repeat; padding-top: 45px; box-sizing: border-box; } .callCenter li.li01 {top: 0; left: calc(50% - 121px);} .callCenter li.li02 {bottom: 0; left: 0; background-image: url('../../images/contents/callCenter_li2_bg.png'); padding-top: 60px;} .callCenter li.li03 {bottom: 0; right: 0; background-image: url('../../images/contents/callCenter_li3_bg.png'); padding-top: 60px;} .callCenter li.li01 p {color: #2460db; font-size: 18px; font-weight: 500;} .callCenter li:before {content: ''; display: block; margin: 0 auto 10px; width: 83px; height: 83px; background: url('../../images/contents/callCenter_li_icon.png') center top no-repeat;} .callCenter li.li02:before {background-position: center -294px; margin-bottom: 20px;} .callCenter li.li03:before {background-position: center -591px; margin-bottom: 20px;} @media all and (max-width: 600px) { .callCenter {height: auto; background: none; } .callCenter li, .callCenter p.number{position: static; margin: 0 auto 20px;} } /* 이민정책 > 주요제도 >자동출입국심사서비스 */ .stageArea .circle {display: table; position: relative;width: 191px; height: 191px; margin: 3px auto;} .stageArea .circle:after {content: ''; position: absolute; top: -2px; right: -6px;width: 195px; height: 195px;background-image: url('../../images/contents/stage_circle.png'); background-repeat: no-repeat;} .stageArea .circle .imgBox {display: table-cell; vertical-align: middle; text-align: center;border: 1px solid #d3d3d3; border-radius: 50%;} .stageWrap li.li01 .stageArea .circle:after {background-position: 95px top;} .stageWrap li.li02 .stageArea .circle:after {background-position: -131px top;} .stageWrap li.li03 .stageArea .circle:after {background-position: -358px top;} .stageWrap li.li04 .stageArea .circle:after {width: 201px; background-position: -578px top;} .stageWrap li.li05 .stageArea .circle:after {width: 201px; background-position: -804px top;} .stageWrap ul {display: table; width: 100%;} .stageWrap li {display: inline-table; width: 19.5%; margin : 0 auto;} .stageWrap .content {position: relative; text-align: center; width: 100%; max-width: 165px; min-height: 220px; box-sizing: border-box; padding: 15px; border: 1px solid #ddd; border-radius: 10px; margin: 20px auto;} .stageWrap .content dt {color: #333; font-size: 18px; font-style: italic; margin-bottom: 15px;} .stageWrap .content:after {content: ''; position: absolute; left: 110%; top: 50%; width: 21px; height: 9px; background: url('../../images/contents/stage_arrow.png') left top no-repeat;} .stageWrap li.li05 .content:after{display: none;} body.Tablet .stageWrap li {width: 33%;} @media all and (max-width: 670px) { .stageWrap li {width: 48%;} } body.Mobile .stageWrap li {width: 100%;display: block;} body.Mobile .stageWrap .content:after {display: none;} /* 역대 본부장 및 국장 */ ._moj_intList ._prFlList .thumbLi ._prFlLinkView {display: none !important;} /* 소속기관목록 테이블 컬러 */ .tableWrap tbody .tbl_color01 th, .tableWrap tbody .tbl_color01 td { background-color: #e8f5f9 !important; } .tableWrap tbody th.tbl_color02 { background-color: #ddd; } .tableWrap.on:after {display:none;} .tableWrap.on:before {display:none;} /* 11.26 added */ .textbox_extra { width: 100%; } .textbox_extra .wrap { float: right; padding: 40px 35px; margin-top: -25%; z-index: 1; position: relative; border-top: 1px solid #2460db; background: url(../../images/contents/mission_deco.png) right 20px bottom 20px no-repeat #fff;; } .textbox_extra .wrap h2 { font-size: 24px; color: #333; margin-top: -5px; margin-bottom: 35px; } .textbox_extra .wrap span { font-size: 15px; color: #797676; } .textbox_extra img { width: 100%; max-width: 550px; } .textbox_extra .wrap li { position: relative; line-height: 30px; color: #666; padding-left: 20px; } .textbox_extra .wrap li:before { content: ''; position: absolute; width: 8px; height: 8px; left: 0; top: 12px; border-radius: 50%; background-color: #1562a3; } .textbox_extra .wrap li:after { content: ''; position: absolute; width: 4px; height: 4px; left: 2px; top: 14px; border-radius: 50%; background-color: #fff; } body.Tablet .textbox_extra img { display: block; margin: 0 auto; } body.Tablet .textbox_extra .wrap { float: none; padding: 30px 20px 80px 20px; margin-top: 20px; } body.Mobile .textbox_extra img { display: block; margin: 0 auto; } body.Mobile .textbox_extra .wrap { float: none; padding: 30px 10px 80px 10px; margin-top: 20px; } .mission .img { width: 550px; height:345px; background-repeat: no-repeat; background-size: contain; background-image: url(/sites/immigration/images/contents/mission_bg.jpg); } body.Mobile .mission .img { width: 100%; height: 220px; } /* 메인 고객센터 배너 (20190704 고석만) */ .addedRq { overflow:hidden; } .addedRq li { height:86px; margin-bottom: 10px; padding: 15px; border: 1px solid #ddd; box-sizing: border-box; background-position: right top; background-repeat: no-repeat; background-size: cover; position: relative;} .addedRq li:last-child { margin-bottom: 0; } body.Tablet .addedRq li { padding: 20px 15px 20px 15px; } .addedRq li.sty01 { background-image: url('/sites/immigration/images/main_banner_01.png'); } .addedRq li.sty02 { background-image: url('/sites/immigration/images/main_banner_02.png'); padding: 10px 15px !important; } .addedRq li.sty03 { background-image: url('/sites/immigration/images/main_banner_03.png'); } .addedRq li p.tit { color: #fff; font-size: 15px; font-weight: 200; } .addedRq li p.tel { color: #ffd800; font-size: 20px; font-weight: bold; margin-top: -4px; } .addedRq li.sty02 p, .addedRq li.sty03 p.tit { color: #fff; } .addedRq li.sty03 p.tel { color: #330066; } .addedRq li.sty03 p.tel span { font-size: 16px; color: #330066; } .addedRq li.sty02 a { width: 40px; height: 30px; border-radius: 30px; padding: 15px 10px; overflow: hidden; display: block; position: absolute; top: 13px; right: 20px; color: #fff; font-size: 0.89em; text-align: center; line-height:1.2; background-color: red; } .addedRq li.sty02 a:hover, .addedRq li.sty02 a:active, .addedRq li.sty02 a:focus { background-color: #036; } .artclAtchImg { display: none; } .iframeBox iframe.write { width:100%; height:1200px; min-height:600px; border:0; overflow:hidden; overflow-x:hidden; overflow-y:auto; } .blind{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;clip:rect(0, 0, 0, 0);clip-path:inset(50%);}/* 220222_웹접근성_히든 */ /* 230302 웹접근성 수정 */ ._imgSldVisual .bx-wrapper .bx-controls .bx-controls-direction .bx-prev, ._imgSldVisual .bx-wrapper .bx-controls .bx-controls-direction .bx-next, ._imgSldVisual .bx-wrapper .bx-controls .bx-controls-auto .bx-controls-auto-item .bx-start, ._imgSldVisual .bx-wrapper .bx-controls .bx-controls-auto .bx-controls-auto-item .bx-stop{outline-offset:-2px;} ._imgSldVisual .bx-wrapper .bx-controls .bx-pager{padding:0 5px;} ._recentWListWrap ._recentWListUl .recentBbsLi.active .recentBbsTab{outline-offset:0px;} ._imgSldEvent .bx-wrapper .bx-viewport ul li ._inner:focus{border:0px none; outline:3px solid red;} ._imgSldEvent .bx-wrapper .bx-controls .bx-controls-direction .bx-prev, ._imgSldEvent .bx-wrapper .bx-controls .bx-controls-direction .bx-next, ._imgSldEvent .bx-wrapper .bx-controls .bx-controls-auto .bx-controls-auto-item .bx-start, ._imgSldEvent .bx-wrapper .bx-controls .bx-controls-auto .bx-controls-auto-item .bx-stop{outline-offset:-2px;} ._imgSldWBnrWrap ._imgSldWBnr .bx-wrapper .bx-controls .bx-controls-direction .bx-prev, ._imgSldWBnrWrap ._imgSldWBnr .bx-wrapper .bx-controls .bx-controls-direction .bx-next, ._imgSldWBnrWrap ._imgSldWBnr .bx-wrapper .bx-controls .bx-controls-auto .bx-controls-auto-item .bx-start, ._imgSldWBnrWrap ._imgSldWBnr .bx-wrapper .bx-controls .bx-controls-auto .bx-controls-auto-item .bx-stop{outline-offset:-2px;} /********************************************************************************************************** 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;} /* 20240620 해외국가정황정보 e-book */ .COI_ebookWrap{max-width:1140px; margin:0 auto;} .COI_ebookWrap ul{font-size:0;} .COI_ebookWrap ul li{display:inline-block; width:calc((100% - 128px)/5); margin-bottom:32px; vertical-align: top; box-sizing:border-box;} .COI_ebookWrap ul li+li{margin-left:32px;} .COI_ebookWrap ul li:nth-child(5n+1){margin-left:0;} .COI_ebookWrap ul li:nth-last-child(-n+5){margin-bottom:0;} .COI_ebookWrap ul li .img{position:relative; height:280px; border:1px solid #ededed;} .COI_ebookWrap ul li .img img{display:block; width:100%; height:100%;} .COI_ebookWrap ul li .img .go{position:absolute; right:0; bottom:-8px; width:50px; height:50px; background: rgb(36, 96, 219) url('../../images/contents/square_zone_more.png') center center no-repeat;} .COI_ebookWrap ul li .text .title{margin-top:16px; font-size:17px;} .COI_ebookWrap ul li .text .title b{color:#1f53cc;} .COI_ebookWrap ul li .text .title span{display:block; margin-top:4px; font-size:13px; color:#767676;} @media all and (max-width:1024px){ .COI_ebookWrap ul li{width:calc((100% - 64px)/3);} .COI_ebookWrap ul li:nth-child(5n+1){margin-left:32px;} .COI_ebookWrap ul li:nth-child(3n+1){margin-left:0;} .COI_ebookWrap ul li:nth-last-child(-n+5){margin-bottom:32px;} .COI_ebookWrap ul li:nth-last-child(-n+3){margin-bottom:0;} } @media all and (max-width:600px){ .COI_ebookWrap ul li{width:calc((100% - 32px)/2);} .COI_ebookWrap ul li:nth-child(3n+1){margin-left:32px;} .COI_ebookWrap ul li:nth-child(2n+1){margin-left:0;} .COI_ebookWrap ul li:nth-last-child(-n+4){margin-bottom:32px;} .COI_ebookWrap ul li:nth-last-child(-n+2){margin-bottom:0;} }