@charset "utf-8"; /*─────────────────────────────────────────────────────────── " board｜errors｜goods｜service｜layout/board｜layout/display｜layout/goods " " layout/popup.html " 위 폴더 및 페이지 커스텀 및 layout, navigation, button, company 관련 편집 css 파일 입니다. ** header, footer, main 관련은 /css/skin.css 에 있습니다. ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── common.css 커스텀 css 아래에 작성 ───────────────────────────────────────────────────────────*/ /*** common ***/ body {}/*letter-spacing:-0.2px;*/ div, dd, li, p, span, td, dt, h1, h2, h3, h4, h5, h6, strong, b, em, th {/* font-size: inherit; */} b, dt, strong, em, th, h1, h2, h3, h4, h5, h6 {font-weight:700;}/* Noto Sans KR은 500 사용 */ input, button, textarea, select {} table.bbs_write .address_info, table.bbs_write .veterans_info, table.bbs_write .obstacle_info{display: none;} table.bbs_write .address_info.on, table.bbs_write .veterans_info.on, table.bbs_write .obstacle_info.on{display:table-row;} input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;} #wrap select{background-position:calc(100% - 20px) 50%;padding: 0 40px 0 18px;letter-spacing: -0.5px;min-width: auto;} #wrap input[type="text"], #wrap input[type="password"], #wrap input[type="number"], #wrap input[type="date"]{padding:0 18px;letter-spacing: -0.5px;} #wrap input[type="text"]::placeholder, #wrap input[type="password"]::placeholder, #wrap input[type="number"]::placeholder, #wrap input[type="date"]::placeholder{font-weight:300;} .ui-datepicker.ui-widget .ui-datepicker-title select{height:36px; line-height:36px; padding-left:10px; background-position:calc(100% - 10px) 50%;} .ui-datepicker.ui-widget .ui-datepicker-prev, .ui-datepicker.ui-widget .ui-datepicker-next{top:10px;} @media only screen and (max-width:1350px){ #wrap #contents_wrap.member_contents #contents_box{padding-left:15px; padding-right:15px;} } @media only screen and (max-width:860px) { #wrap select, #wrap input[type="text"], #wrap input[type="password"], #wrap input[type="number"], #wrap input[type="date"]{height:42px;padding-left:15px;line-height: 42px;} #wrap select{background-position:calc(100% - 15px) 50%; padding-right:35px;} } @media only screen and (max-width:767px) { #wrap select, #wrap input[type="text"], #wrap input[type="password"], #wrap input[type="number"], #wrap input[type="date"]{height:40px;line-height: 38px;} } @media only screen and (max-width:640px){ #wrap select{padding-right:24px; background-size:6px auto; background-position:calc(100% - 10px) 50%;} #wrap select, #wrap input[type="text"], #wrap input[type="password"], #wrap input[type="number"], #wrap input[type="date"]{padding: 0 9px;} } @media only screen and (max-width:320px){ #wrap select{padding-right:15px !important;background-position:calc(100% - 5px) 50%;} #wrap select, #wrap input[type="text"], #wrap input[type="password"], #wrap input[type="number"], #wrap input[type="date"]{height:35px;line-height: 33px;padding: 0 5px;} #wrap #contents_wrap.member_contents #contents_box{padding-left:10px; padding-right:10px;} } /*─────────────────────────────────────────────────────────── font common ───────────────────────────────────────────────────────────*/ /* webfont */ .ff_open {font-family: 'Open Sans', 'Nanum Gothic', sans-serif !important;} .ff_noto {font-family: "Noto Sans KR", 'Nanum Gothic', sans-serif !important;} .ff_mont {font-family: 'Montserrat', 'Nanum Gothic', sans-serif !important;} .ff_nanum {font-family: 'Lato','Nanum Gothic', dotum, sans-serif !important;} .ff_lato {font-family: 'Lato', 'Nanum Gothic', sans-serif !important;} .ff_nbg {font-family: 'Nanum Barun Gothic','Nanum Gothic', sans-serif !important;} .ff_open, .ff_open a, .ff_open span, .ff_open div, .ff_open ul, .ff_open li, .ff_open p {font-family: 'Open Sans' !important;} .ff_noto, .ff_noto a, .ff_noto span, .ff_noto div, .ff_noto ul, .ff_noto li, .ff_noto p {font-family: 'Noto Sans KR', 'Noto Sans' !important; font-weight:400;} /* font weight */ .fw_t {font-weight:300;} .fw_n {font-weight:400;} .fw_b {font-weight:700;}/* Noto Sans KR은 500 사용 */ .fw_eb {font-weight:800;}/* Noto Sans KR은 700 사용 */ /*─────────────────────────────────────────────────────────── navigation common ───────────────────────────────────────────────────────────*/ /* 일반형 */ .nav_wrap {position: relative; z-index: 2;} .nav_box.w_custom {position: absolute;left: 50%;top: 0;transform: translateX(-50%);display:flex;align-items: center;justify-content: flex-end;padding-top: 47px;} .nav_box * {font-size: 16px; color: #999; font-weight: 400; font-family: 'Poppins', 'Pretendard', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .nav_box .home {display: inline-block; padding-left: 26px; background: url("../images/sub/icon_home.png") no-repeat left 3px;} .nav_box dl {display: flex;} .nav_box dt, .nav_box dd {position: relative;} .nav_box dt:before, .nav_box dd:before {content: "";display: inline-block;width: 5px;height: 5px;margin: 0 18px;background: #aaa;border-radius: 50%;vertical-align: middle;} .nav_box dd strong {color: #666; font-weight: 500; cursor: pointer;} .nav_box ul {display: none; position: absolute; top: 120%; left: 15px; width: calc(100% + 1px); padding:7px 15px; background:#fff; box-sizing:border-box; box-shadow:3px 3px 5px rgba(0,0,0,0.1); z-index: 5;} .nav_box ul li a {display: block; font-size:15px; padding: 5px 0;} .nav_box ul li.on a {color: #0076bd;} @media only screen and (max-width:1024px) { .nav_box.w_custom {padding-top: 30px;} .nav_box * {font-size: 15px;} .nav_box dt:before, .nav_box dd:before {margin: 0 14px;} } @media only screen and (max-width:860px) { .nav_box.w_custom {padding-top: 15px;} .nav_box * {font-size: 14px;} .nav_box dt:before, .nav_box dd:before {margin: 0 12px;} } @media only screen and (max-width:640px) { .nav_box.w_custom {position: relative; left:inherit; top:inherit; transform: none; width:100%; padding-top: 0; padding-left: 0 !important; padding-right: 0 !important; background:#fff; margin-top:-1px;} .nav_box .home {width: 50px; height: 50px; background-position: center; box-sizing: border-box; border: 1px solid #ddd; border-left: 0; padding-left: 0; font-size: 0;} .nav_box dt{display:none;} .nav_box dl{margin-left:0; width:100%;} .nav_box dd{position: relative; display: flex; align-items: center; margin-left:0; color:#333; height:50px; border-top:1px solid #ddd;border-bottom:1px solid #ddd; width:100%; background:#fff url('../images/sub/sub_location_arrow_bk.png') no-repeat calc(100% - 15px) 50%;box-sizing: border-box;} .nav_box dd.on {background-image:url('../images/sub/sub_location_arrow_bk_on.png')} .nav_box dd:before {display:none;} .nav_box dd strong {padding:0 45px 0 15px;} .nav_box ul {top: 100%; left: -1px; border-top:1px solid #ddd; border-left: 1px solid #ddd;} } @media only screen and (max-width:479px) { .nav_box ul li a {font-size: 14px;} } /*─────────────────────────────────────────────────────────── button common ───────────────────────────────────────────────────────────*/ /* custom button type */ /* button 공통 요소 */ .btn, .btn_lg, .btn_sm, .btn_md {font-weight:700;border-style:solid !important;border-width:1px !important;padding:0;margin:0;text-indent:0;vertical-align:top !important;text-align:center;display:inline-block;box-sizing:border-box;cursor:pointer;box-shadow:none;outline:0 !important;} /* button 크기별 */ .btn_wd {width:100%;height:50px;line-height:48px;font-size:17px;} .btn {width:108px;height:40px;line-height:38px;font-size:15px;} .btn_lg {width:92px;height:72px;line-height:70px;font-size:14px;} .btn_md {width:60px;line-height:28px;height:30px;font-size:13px;} .btn_sm {height:30px;line-height:28px;width:auto !important;padding:0 8px;font-size:inherit;border-color:#aaa !important;background-color:#aaa !important;color:#fff !important;} /* button 색상별 */ .btn_point, .btn_point:hover {border-color:#222 !important;background-color:#222 !important;color:#fff !important;} .btn_basic, .btn_basic:hover {border-color:#777 !important;background-color:#777 !important;color:#fff !important;} .btn_default, .btn_default:hover {border-color:#aaa !important;background-color:#aaa !important;color:#fff !important;} .btn_info, .btn_info:hover {border-color:#d3d3d3 !important;background-color:#fff !important;color:#555 !important;} .btn_reset, .btn_reset:hover {border-color:#d3d3d3 !important;color:#555 !important;} /* button wrapper */ .btn_wrap {margin:0 auto;padding:0;padding-top:2.8%;font-size:0;vertical-align:top;display:inline-block;} .btn_wrap.ta_center {width:100%;} .btn_wrap a + a, .btn_wrap button + button, .btn_wrap a + button, .btn_wrap button + a {margin-left:12px;vertical-align:top;} .btn_wrap button > a, .btn_wrap a > a{margin-left:0;} .view_btn .btn_wrap.ta_right {position:absolute;right:0px;top:0px;} @media only screen and (max-width:1200px) { /* button wrapper */ .btn_wrap {padding-top:3.8%;} } @media only screen and (max-width:1024px) { /* button wrapper */ .btn_wrap {padding-top:4.2%;} .view_btn .btn_wrap.ta_left {position:absolute;left:0px;top:0px;} } @media only screen and (max-width:860px) { } @media only screen and (max-width:767px) { /* button wrapper */ .btn_wrap {padding-top:5.2%;} } @media only screen and (max-width:640px) { /* button wrapper */ .btn_wrap {padding-top:5.8%;} .btn_wrap a + a, .btn_wrap button + button, .btn_wrap a + button, .btn_wrap button + a {margin-left:8px;} } @media only screen and (max-width:479px) { /* button 크기별 */ .btn_wd {font-size:16px;} .btn {width:70px;font-size:13px;} .btn_lg {width:72px;font-size:13px;} .btn_md {width:60px;font-size:12px;} .btn_sm {padding:0 4px;font-size:12px;} /* button wrapper */ .btn_wrap a + a, .btn_wrap button + button, .btn_wrap a + button, .btn_wrap button + a {margin-left:6px;} .view_btn .paging {width:100%;min-height:87px;} .view_btn .paging + .btn_wrap.ta_right{top:70px;} } @media only screen and (max-width:320px) { /* button 크기별 */ .btn {width:68px;} .btn_md {width:44px;font-size:12px;} } /*─────────────────────────────────────────────────────────── sub common ───────────────────────────────────────────────────────────*/ /* 일반형 */ #wrap .sub_title {border:0;margin:0;position:relative;text-align:center;z-index:1;} #wrap .sub_title:after {clear:both;content:"";display:block;} #wrap .sub_title span, #wrap .sub_title h2 {font-family: 'Poppins', 'Pretendard', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} #wrap .sub_title span {font-size: 22px; color: #0076bd;} #wrap .sub_title span + h2 {margin-top: 22px;} #wrap .sub_title h2 {font-size:50px;padding:0;margin:0;text-align:center;color: #111;font-weight: bold;margin-bottom:63px;} #wrap .board_tab{justify-content:center;margin-top: -28px; margin-bottom:-10px;} #wrap .board_tab li{ margin-bottom:10px;} #wrap .board_tab li + li{margin-left: 43px;} #wrap .board_tab li a{position:relative;font-size:18px;font-weight:600;color:#aaa;border: 0 !important;height: auto;line-height: 1;width: auto;display: block;padding-bottom: 15px;letter-spacing: 0; min-width:auto; transition:all 0.4s;} #wrap .board_tab li a:before{position:absolute; content:''; width:0; height:4px; background:#0076bd; bottom:0; left:50%; transform:translateX(-50%); transition:all 0.4s;} #wrap .board_tab li.on a{color:#333;} #wrap .board_tab li.on a:before{width: 96%;} /* 검색 */ #wrap .board_search {line-height:30px;margin: 80px 0 50px;padding: 0;text-align:right;background-color: #fff;font-size:0;width:100%;box-sizing:border-box;} #wrap .board_search fieldset {line-height:inherit;font-size:0;} #wrap .board_search select, #wrap .board_search input, #wrap .board_search span, #wrap .board_search label {vertical-align:top;font-size:13px;line-height:inherit;} #wrap .board_search select, #wrap .board_search input.input_text {margin-right: 0;background-color:#fff;color:#333;font-size:18px;} #wrap .board_search select {width: 100%;margin: 0;} #wrap .board_search input.input_text {width: 301px;margin: 0 9px 0 0;} #wrap .board_search input.input_text::placeholder{color:#999; font-weight:300;} #wrap .board_search .board_search_sel {display:inline-block;vertical-align:middle;font-size: 0;margin: 0 8px 0 0;width: 140px;} #wrap .board_search .btn_default{font-size:0; width:50px; height:50px; background:#0076bd url('../images/sub/board_search_icon.png') no-repeat center !important; border-color:#0076bd !important;} /* 일반형 목록 */ #wrap table.bbs_list {border-top: 2px solid #333333;border-bottom: 1px solid #ddd;width:100%;text-align:center;table-layout:fixed;box-sizing:border-box;} #wrap table.bbs_list tr {} #wrap table.bbs_list tr.board_notice td {background:#fff;} #wrap table.bbs_list tr.board_notice td:nth-of-type(1) {color:#0076bd;font-weight:600;} #wrap table.bbs_list th, #wrap table.bbs_list td {padding-left: 20px;padding-right: 20px;font-size:13px;line-height:20px;font-weight:400;color:#666;text-align:center;vertical-align:middle;} #wrap table.bbs_list td a, #wrap table.bbs_list td em, #wrap table.bbs_list td strong, #wrap table.bbs_list td span {font-size:inherit;line-height:inherit;} #wrap table.bbs_list th {padding-top: 28px;padding-bottom: 28px;border-bottom: 1px solid #ddd;color:#333;font-size: 20px;background: #f5f5f5;font-weight: 500;} #wrap table.bbs_list td {padding-top:23px;padding-bottom: 25px;font-size: 18px;color: #888;font-weight: 400; letter-spacing: -0.4px;} #wrap table.bbs_list td .board_tit {} #wrap table.bbs_list td .board_tit h3 {font-size: 13px;color: #333333;font-weight: 600;} #wrap table.bbs_list td .board_tit .board_ico, #wrap table.bbs_list td .board_tit img, #wrap table.bbs_list td .board_tit h3, #wrap table.bbs_list td .board_tit span {display:inline-block;vertical-align:middle;} #wrap table.bbs_list td .board_tit h3 .board_ico {} #wrap table.bbs_list td .board_tit img {vertical-align: middle;margin-right: 5px;} #wrap table.bbs_list td .board_tit h3 {font-weight: 400;font-size: inherit;color: #333;display: inline-block;vertical-align: middle;width:100%; max-width: 900px;} #wrap table.bbs_list td .board_tit h3 em {width:42px;line-height:26px;margin-top:-3px;margin-bottom:-3px;margin-right:5px;border-radius:4px;display:none;vertical-align: top;font-size: inherit;background:#0076bd;color:#fff;text-align:center;font-weight: inherit;} #wrap table.bbs_list td .board_tit h3 strong {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;vertical-align: top;max-width: 100%;font-size: inherit;color: inherit;font-weight: inherit;line-height: inherit;} #wrap table.bbs_list td .board_tit h3 em + strong {max-width: calc(100% - 50px);} #wrap table.bbs_list td .board_tit .tag_list{display:flex;flex-wrap:wrap;} #wrap table.bbs_list td .board_tit .tag_list li{margin-top: 11px; margin-right:5px;} #wrap table.bbs_list td .board_tit .tag_list li a{display:inline-flex; align-items:center; height:34px; font-size:14px; font-weight:400; color:#888; padding:0 17px; border:1px solid #ddd; border-radius:17px; box-sizing:border-box;} #wrap table.bbs_list td .period{font-size:inherit; font-weight:500; color:#ed4444;} #wrap table.bbs_list td .period.end{color:#888; font-weight:inherit;} #wrap table.bbs_list td a {} #wrap table.bbs_list .m_non, #wrap table.bbs_list .m_non {display:table-cell;} #wrap table.bbs_list td.left {text-align:left;} #wrap table.bbs_list td img{display:inline-block;vertical-align:middle;} #wrap table.bbs_list td img + img {margin-left:4px;} #wrap table.bbs_list tr + tr td {border-top:1px #ddd solid;} #wrap table.bbs_list td .btn{width:100%;font-size:16px;font-weight:400;color:#fff;height: 50px;line-height: 50px;} #wrap table.bbs_list td .btn.btn_black{border-color:#999; color:#999; font-weight:500; pointer-events:none;} #wrap table.bbs_list.list_recruit td{padding-top:18px;padding-bottom: 20px;} /* #wrap table.bbs_list.list_recruit tr + tr td{border-top:0;} */ /*** TABLE view ( board/board_view ) ***/ #wrap .bbs_view {text-align:left;position:relative;z-index:1;} /* 제목.작성자.작성일 */ #wrap .bbs_view div.view_tit {padding: 0 0 22px;border-bottom: 2px solid #333;border-top: 0;background: none;margin:0 auto;width:100%;box-sizing:border-box;text-align:left;vertical-align:top;font-size:0;display: flex;justify-content:space-between;flex-direction: column;} #wrap .bbs_view div.view_tit:after {clear:both;content:"";display:block;} #wrap .bbs_view div.view_tit > h3{line-height: 135%;margin:0;padding:0;display:inline-block;box-sizing:border-box;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;} #wrap .bbs_view div.view_tit > h3 {font-size: 30px;width:100%;color: #333;font-weight: 500;text-align:left; padding-right:30px; box-sizing:border-box;} #wrap .bbs_view div.view_tit > p {padding-top: 10px; text-align: left;} #wrap .bbs_view div.view_tit .btn{width:181px; height:50px; line-height:50px; border-radius:25px; font-size:16px; font-weight:500;} #wrap .bbs_view div.view_tit .btn.btn_black{background:#fff; border-color:#999; color:#999; pointer-events:none;} #wrap .view_recruit div.view_tit{padding: 0 0 22px;border-bottom: 2px solid #333;border-top: 0;background: none;margin:0 auto;width:100%;box-sizing:border-box;text-align:left;vertical-align:top;font-size:0;display: flex;justify-content:space-between;flex-direction:row;align-items: center;} #wrap .view_recruit div.view_tit:after {clear:both;content:"";display:block;} #wrap .view_recruit div.view_tit > h3{line-height: 135%;margin:0;padding:0;display:inline-block;box-sizing:border-box;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;} #wrap .view_recruit div.view_tit > h3 {font-size: 30px;width:100%;color: #333;font-weight: 500;text-align:left; padding-right:30px; box-sizing:border-box;} #wrap .view_recruit div.view_tit > p {padding-top: 10px; text-align: left;} #wrap .view_recruit div.view_tit .btn{width:181px; height:50px; line-height:50px; border-radius:25px; font-size:16px; font-weight:500;} #wrap .view_recruit div.view_tit .btn.btn_black{background:#fff; border-color:#999; color:#999; pointer-events:none;} /*** TABLE write ( board/board_write ) ***/ #wrap .bbs_write {} #wrap .bbs_write + .bbs_write {border-top: 0;} #wrap .bbs_write.bbs_title, #wrap .bbs_write.bbs_content {border-bottom: 0;} #wrap .bbs_write.bbs_title tr:last-of-type th, #wrap .bbs_write.bbs_title tr:last-of-type td {padding-bottom: 15px;} #wrap .bbs_write.bbs_content tr:last-of-type th, #wrap .bbs_write.bbs_content tr:last-of-type td {padding-bottom: 15px;} #wrap .bbs_write.bbs_content tr:first-of-type th, #wrap .bbs_write.bbs_content tr:first-of-type td {padding-top: 15px;} #wrap .bbs_write.bbs_bottom tr:first-of-type th, #wrap .bbs_write.bbs_bottom tr:first-of-type td {padding-top: 15px;} #wrap .bbs_write input[type="checkbox"] + label {font-size: 18px; font-weight: 300; color: #333;} #wrap .bbs_write .edit-box {margin-top: 10px;} #wrap .bbs_write .agree_cont td {padding-top: 35px; padding-bottom: 50px; padding-left: 0; padding-right: 0;} #wrap .bbs_write td .policy_cont {padding-top: 40px; border-top: 1px solid #ddd;} #wrap .bbs_write td .policy_cont > div {padding: 0; line-height: inherit;} #wrap .bbs_write td .policy_cont .cont_title .chk{display: inline-block;vertical-align: top;} #wrap .bbs_write td .policy_cont .cont_title label{font-size:20px;color:#333;font-weight:400;letter-spacing:-0.8px;} #wrap .bbs_write td .policy_cont .cont_title label strong{font-size:inherit;color:#0076bd;font-weight:inherit;} #wrap .bbs_write td .policy_cont .view_cont{display:inline-block;float: right;vertical-align: top;font-size:16px;color:#888;font-weight:400;letter-spacing:-0.64px;position: relative;padding-right:20px;/* margin-top:4px; */cursor:pointer;} #wrap .bbs_write td .policy_cont .view_cont:before{width:5px;height:5px;content:"";border:1px solid #888;border-width:1px 1px 0 0;position: absolute;right:0;top:4px;transform:rotate(135deg);} #wrap .bbs_write td .policy_cont .view_cont.on:before{transform:rotate(-45deg);top:8px;} #wrap .bbs_write td .policy_cont textarea{margin-top:21px;width:100%;height:160px;background:#f5f5f5;box-sizing:border-box;border:1px solid #f5f5f5;outline:none;font-size:15px;color:#666;font-weight:400;letter-spacing:-0.6px;padding:30px;} #wrap .bbs_write td .policy_cont textarea::-webkit-scrollbar{width:4px;border-radius:2px;background:#ccc;} #wrap .bbs_write td .policy_cont textarea::-webkit-scrollbar-thumb{width:4px;border-radius:2px;background:#999;} #wrap .bbs_write + .btn_wrap {padding-top: 60px;} @media only screen and (max-width:1200px){ #wrap .sub_title span {font-size: 21px;} #wrap .sub_title h2{font-size:46px;} #wrap table.bbs_list th{font-size:19px;} #wrap table.bbs_list td{font-size:17px;} } @media only screen and (max-width:1024px) { #wrap .board_tab li a:hover{color:#333;} #wrap .board_tab li a:hover:before{width: 96%;} #wrap .sub_title span {font-size: 20px;} #wrap .sub_title h2{font-size:42px; margin-bottom: 53px;} #wrap .sub_title span + h2 {margin-top: 14px;} #wrap .board_tab li a{font-size:17px; padding-bottom:10px;} #wrap .board_tab li a:before{height:3px;} #wrap .board_search{margin:60px 0 30px;} #wrap .board_search select, #wrap .board_search input.input_text{font-size:17px;} #wrap table.bbs_list col:nth-child(3){width:100px;} #wrap table.bbs_list col:nth-child(4){width:110px;} #wrap table.bbs_list col:nth-child(5){width:100px;} #wrap table.bbs_list.list_recruit col:nth-child(1){width:140px;} #wrap table.bbs_list.list_recruit col:nth-child(3){width:140px;} #wrap table.bbs_list.list_recruit col:nth-child(4){width:140px;} #wrap table.bbs_list th, #wrap table.bbs_list td{padding-left: 10px; padding-right: 10px;}/*line-height:20px;*/ #wrap table.bbs_list th{font-size:18px;padding-top: 20px;padding-bottom: 20px;} #wrap table.bbs_list td{font-size:16px;padding-top: 20px;padding-bottom: 20px;} #wrap table.bbs_list td .board_tit .tag_list{} #wrap table.bbs_list td .board_tit .tag_list li{margin-top:5px;} #wrap table.bbs_list td .board_tit .tag_list li a{height:30px; font-size:13px;} #wrap table.bbs_list.list_recruit td {padding-top: 15px; padding-bottom: 15px;} #wrap .bbs_view div.view_tit > h3{font-size:28px;} #wrap .bbs_view div.view_tit .btn{width:160px;} #wrap .view_recruit div.view_tit > h3{font-size:28px;} #wrap .view_recruit div.view_tit .btn{width:160px;} #wrap .bbs_write.bbs_title tr:last-of-type th, #wrap .bbs_write.bbs_title tr:last-of-type td {padding-bottom: 10px;} #wrap .bbs_write.bbs_content tr:last-of-type th, #wrap .bbs_write.bbs_content tr:last-of-type td {padding-bottom: 10px;} #wrap .bbs_write.bbs_content tr:first-of-type th, #wrap .bbs_write.bbs_content tr:first-of-type td {padding-top: 10px;} #wrap .bbs_write.bbs_bottom tr:first-of-type th, #wrap .bbs_write.bbs_bottom tr:first-of-type td {padding-top: 10px;} #wrap .bbs_write input[type="checkbox"] + label {font-size: 17px;} #wrap .bbs_write .agree_cont td {padding-top: 20px; padding-bottom: 30px;} #wrap .bbs_write td .policy_cont {padding-top: 30px;} #wrap .bbs_write td .policy_cont .cont_title label {font-size: 18px;} #wrap .bbs_write td .policy_cont textarea {font-size:14px;padding:20px 20px;} #wrap .bbs_write + .btn_wrap {padding-top: 50px;} } @media only screen and (max-width:960px) { #wrap .bbs_write .agree_cont td {padding-top: 20px; padding-bottom:15px;} #wrap table.bbs_list th, #wrap table.bbs_list td{padding-top:18px;padding-bottom:18px;} #wrap table.bbs_list th{font-size:17px;} } @media only screen and (max-width:900px) { #wrap .bbs_write input[type="checkbox"] + label, #wrap .bbs_write td .policy_cont .view_cont {font-size: 15px;} #wrap .bbs_write td .policy_cont .cont_title label {font-size: 16px;} } @media only screen and (max-width:860px) { #wrap .sub_title span {font-size: 19px;} #wrap .sub_title h2{font-size:38px;} #wrap .sub_title span + h2 {margin-top: 12px;} #wrap .board_tab li + li{margin-left:35px;} #wrap .board_search{margin: 50px 0 25px;} #wrap .board_search select, #wrap .board_search input.input_text{font-size:16px;} #wrap .board_search .board_search_sel{width:120px;} #wrap .board_search input.input_text{width:260px;} #wrap .board_search .btn_default{width:42px; height:42px; background-size:21px auto !important;} #wrap .bbs_write .agree_cont td {padding-top: 20px; padding-bottom: 25px;} #wrap table.bbs_list colgroup .m_dn:last-child, #wrap table.bbs_list tr .m_dn:last-child {display: none;} #wrap table.bbs_list.list_recruit tbody tr{position:relative;display:flex;flex-wrap:wrap;width:calc(100vw - 30px);padding:22px 18px 24px;border: 1px solid #ddd;box-sizing: border-box;} #wrap table.bbs_list.list_recruit tbody tr + tr{margin-top:20px;} #wrap table.bbs_list.list_recruit tbody tr td{display:block;width:100%;text-align:left;padding: 0;} #wrap table.bbs_list.list_recruit tbody tr td.no, #wrap table.bbs_list.list_recruit tbody tr td.left{} #wrap table.bbs_list.list_recruit tbody tr td.no{display:inline-block;width:auto;font-size:14px;padding-right: 10px;} #wrap table.bbs_list.list_recruit tbody tr td.no span:before{display:inline-flex; content:'[';} #wrap table.bbs_list.list_recruit tbody tr td.no span:after{display:inline-flex; content:']';} #wrap table.bbs_list.list_recruit tbody tr td.left{display:inline-block;padding-left: 0;} #wrap table.bbs_list.list_recruit tr + tr td{border-top:0;} #wrap table.bbs_list th, #wrap table.bbs_list td{padding-left:6px;padding-right:6px;line-height:20px;} #wrap table.bbs_list th{padding-top:14px;padding-bottom:14px;font-size:16px;} #wrap table.bbs_list td{padding-top:14px;padding-bottom:14px;font-size:15px;} #wrap table.bbs_list td .btn{height:45px;line-height:45px;font-size: 16px;} #wrap .bbs_write td .policy_cont textarea {padding:15px;margin-top:15px;} #wrap .bbs_view div.view_tit > h3{font-size:26px;} #wrap .bbs_view div.view_tit .btn{width:150px; height:45px; line-height:45px; font-size:15px;} #wrap .view_recruit div.view_tit > h3{font-size:26px;} #wrap .view_recruit div.view_tit .btn{width:150px; height:45px; line-height:45px; font-size:15px;} } @media only screen and (max-width:767px) { #wrap .board_search{margin: 30px 0 25px;} #wrap .board_search select, #wrap .board_search input.input_text{font-size:15px;} #wrap .board_search .board_search_sel{width:100px;} #wrap .board_search input.input_text{width:220px;} #wrap .board_search .btn_default{width:40px; height:40px;} #wrap table.bbs_list col:nth-child(3){width:80px;} #wrap table.bbs_list col:nth-child(4){width:100px;} #wrap table.bbs_list col:nth-child(5){width:80px;} #wrap table.bbs_list.list_recruit col:nth-child(1){width:120px;} #wrap table.bbs_list.list_recruit col:nth-child(3){width:120px;} #wrap table.bbs_list.list_recruit col:nth-child(4){width:120px;} #wrap table.bbs_list td .board_tit .tag_list li a{padding: 0 11px;font-size: 13px;height: 25px;} #wrap .bbs_write.bbs_content, #wrap .bbs_write.bbs_content tbody, #wrap .bbs_write.bbs_content tbody tr, #wrap .bbs_write.bbs_content td{display: block;} #wrap .bbs_write.bbs_content th {display: none;} #wrap .bbs_write.bbs_content td {padding-left: 0; padding-right: 0;} #wrap .bbs_write.bbs_title tr:last-of-type th, #wrap .bbs_write.bbs_title tr:last-of-type td {padding-bottom: 7.5px;} #wrap .bbs_write.bbs_content tr:last-of-type th, #wrap .bbs_write.bbs_content tr:last-of-type td {padding-bottom: 7.5px;} #wrap .bbs_write.bbs_content tr:first-of-type th, #wrap .bbs_write.bbs_content tr:first-of-type td {padding-top: 7.5px;} #wrap .bbs_write.bbs_bottom tr:first-of-type th, #wrap .bbs_write.bbs_bottom tr:first-of-type td {padding-top: 7.5px;} #wrap .bbs_view div.view_tit > h3{font-size:24px;} #wrap .bbs_view div.view_tit .btn{width:130px;} #wrap .view_recruit div.view_tit > h3{font-size:24px;} #wrap .view_recruit div.view_tit .btn{width:130px;} } @media only screen and (max-width:680px){ #wrap .board_search .board_search_sel{width:100px;} #wrap .board_search input.input_text{width: calc(100% - 157px);} #wrap table.bbs_list .m_dn {display: none;} #wrap table.bbs_list.list_recruit{border-top:0; border-bottom:0;} #wrap table.bbs_list.list_recruit thead{display:none;} #wrap table.bbs_list.list_recruit tbody tr{position:relative;display:flex;flex-wrap:wrap;width:calc(100vw - 30px);padding: 22px 18px 24px;border: 1px solid #ddd;box-sizing: border-box;} #wrap table.bbs_list.list_recruit tbody tr + tr{margin-top:20px;} #wrap table.bbs_list.list_recruit tbody tr td{display:block;width:100%;text-align:left;padding: 0;} #wrap table.bbs_list.list_recruit tbody tr td.no, #wrap table.bbs_list.list_recruit tbody tr td.left{} #wrap table.bbs_list.list_recruit tbody tr td.no{display:inline-block;width:auto;font-size:14px;padding-right: 10px;} #wrap table.bbs_list.list_recruit tbody tr td.no span:before{display:inline-flex; content:'[';} #wrap table.bbs_list.list_recruit tbody tr td.no span:after{display:inline-flex; content:']';} #wrap table.bbs_list.list_recruit tbody tr td.left{display:inline-block;padding-left: 0;} #wrap table.bbs_list.list_recruit tr + tr td{border-top:0;} #wrap table.bbs_list td .board_tit h3 em {display:inline-block;} #wrap table.bbs_list td .btn{} #wrap table.bbs_list td .board_tit .tag_list{position:absolute;left: 18px;top: 56px;width: calc(100% - 36px);padding-right: 60px;box-sizing: border-box;} #wrap table.bbs_list td .board_tit .tag_list li{margin-top:7px; margin-right:10px;} #wrap table.bbs_list td .board_tit .tag_list li a{} #wrap table.bbs_list.list_recruit td.period_td{position:absolute;right: 18px;top: 68px;width: auto;display: inline-block;z-index: 3;padding: 0;} #wrap table.bbs_list td .period{font-size:14px;display:block;} #wrap table.bbs_list td .btn{font-size:14px; margin-top:20px;} #wrap table.bbs_list td .btn.btn_black{background:#999; color:#fff; font-weight:400;} #wrap .bbs_view div.view_tit{display:block; padding-bottom:25px;} #wrap .bbs_view div.view_tit > h3{font-size:22px; padding-right:0;} #wrap .bbs_view div.view_tit > p {padding-top: 6px;} #wrap .bbs_view div.view_tit .btn{width:100%; margin-top:20px; height:40px; line-height:40px; font-size:14px;} #wrap .bbs_view div.view_tit .btn.btn_black{background:#999; color:#fff; font-weight:400;} #wrap .view_recruit div.view_tit{display:block; padding-bottom:25px;} #wrap .view_recruit div.view_tit > h3{font-size:22px; padding-right:0;} #wrap .view_recruit div.view_tit > p {padding-top: 6px;} #wrap .view_recruit div.view_tit .btn{width:100%; margin-top:20px; height:40px; line-height:40px; font-size:14px;} #wrap .view_recruit div.view_tit .btn.btn_black{background:#999; color:#fff; font-weight:400;} #wrap .bbs_write input[type="checkbox"] + label {font-size: 15px;} #wrap .bbs_write td .policy_cont .cont_title label{font-size:16px;} #wrap .bbs_write td .policy_cont .cont_title .view_cont{font-size:14px;} #wrap .bbs_write td .policy_cont .cont_title .view_cont.on:before {top:6px;} #wrap .bbs_write td .policy_cont textarea {margin-top: 10px; font-size:13px;padding:20px 15px;} #wrap .bbs_write + .btn_wrap {padding-top: 40px;} } @media only screen and (max-width:640px){ #wrap .sub_title span {font-size: 18px;font-weight: 500;} #wrap .sub_title h2{font-size:34px; margin-bottom: 43px;} #wrap .sub_title span + h2 {margin-top: 5px;} #wrap .board_tab{margin-top:-20px;} #wrap .board_tab li a{font-size:16px; padding-bottom:7px;} #wrap .board_tab li a:before{height:2px;} #wrap .bbs_write input[type="checkbox"] + label {font-size: 14px;} #wrap .bbs_write td .policy_cont .cont_title label{font-size:15px;} #wrap .bbs_write td .policy_cont .cont_title .view_cont{font-size:14px;} #wrap .board_search select, #wrap .board_search input.input_text{font-size:14px;} #wrap table.bbs_list th, #wrap table.bbs_list td{padding-left:5px;padding-right:5px;} #wrap table.bbs_list th{padding-top:12px;padding-bottom:12px;font-size:15px;} #wrap table.bbs_list td{padding-top:14px;padding-bottom:14px;font-size:14px;} #wrap table.bbs_list td .board_tit {font-size: 14px;} #wrap table.bbs_list.list_recruit td .board_tit {font-size: 15px;} #wrap table.bbs_list td .board_tit h3 em {line-height:24px;margin-top:-2px;margin-bottom:-2px;} } @media only screen and (max-width:500px){ #wrap .sub_title span {font-size: 14px;} #wrap .sub_title h2{font-size: 28px; margin-bottom:20px;} #wrap table.bbs_list col:nth-child(4) {width:90px;} #wrap table.bbs_list th{padding-top:10px;padding-bottom:10px;font-size:14px;} #wrap table.bbs_list td{padding-top:12px;padding-bottom:12px;font-size:13px;} #wrap table.bbs_list td .board_tit {font-size: 13px;} #wrap table.bbs_list.list_recruit td .board_tit {font-size: 14px;} #wrap table.bbs_list td .btn{height:45px;line-height:45px;font-size: 14px;} #wrap table.bbs_list.list_recruit tbody tr {padding:20px 15px;} #wrap table.bbs_list td .board_tit .tag_list{left: 15px;top: 56px;width: calc(100% - 30px);padding-right:56px;} #wrap table.bbs_list td .board_tit h3 em {width:34px;line-height:22px;margin-top:-1px;margin-bottom:-1px;margin-right:5px;border-radius:3px;} #wrap table.bbs_list td .board_tit h3 em + strong {max-width: calc(100% - 40px);} } @media only screen and (max-width:479px){ #wrap .board_tab{margin-top:-6px;} #wrap .board_tab li + li{margin-left:30px;} #wrap .board_tab li a{font-size:15px; font-weight:500;} #wrap .board_search .board_search_sel{width: 95px;margin-right: 10px;} #wrap .board_search input.input_text{width: calc(100% - 145px);margin-right:0;} #wrap .bbs_write input[type="checkbox"] + label {font-size: 13px;} #wrap .bbs_write td .policy_cont .cont_title label{font-size:14px;} #wrap .bbs_write td .policy_cont .cont_title .view_cont{font-size:13px;} #wrap .sub_title h2{font-size:26px;} #wrap .bbs_view div.view_tit > h3{font-size:20px;} #wrap .view_recruit div.view_tit > h3{font-size:20px;} } @media only screen and (max-width:431px){ #wrap .bbs_view div.view_tit > h3{font-size:19px;} #wrap .view_recruit div.view_tit > h3{font-size:19px;} } @media only screen and (max-width:374px){ #wrap table.bbs_list col:nth-child(4) {width:80px;} #wrap .bbs_write input[type="checkbox"] + label {font-size: 14px;} #wrap .bbs_write td .policy_cont .cont_title label{font-size:15px;} #wrap .bbs_write td .policy_cont .cont_title .view_cont{font-size:12px;} } @media only screen and (max-width:320px){ #wrap .sub_title h2{font-size:22px;} #wrap .board_tab li + li {margin-left:21px;} #wrap .board_search .board_search_sel{width:88px;margin-right:5px;} #wrap .board_search input.input_text{width: calc(100% - 125px);} #wrap .board_search .btn_default{width:32px; height:35px;line-height:35px;background-size:18px auto !important;} #wrap .bbs_write input[type="checkbox"] + label {font-size: 12px;} #wrap .bbs_write td .policy_cont .cont_title label{font-size:13px;} #wrap .bbs_write td .policy_cont .cont_title .view_cont{font-size:12px;} #wrap table.bbs_list col:nth-child(4) {width:70px;} #wrap table.bbs_list td{font-size:12px;} #wrap table.bbs_list th, #wrap table.bbs_list td .board_tit, #wrap table.bbs_list.list_recruit td .board_tit {font-size: 13px;} #wrap table.bbs_list td .btn{height:40px;line-height:40px;font-size: 13px;} #wrap table.bbs_list td .board_tit h3 em {width:30px;line-height:20px;margin-top:0;margin-bottom:0;font-size:12px;} #wrap table.bbs_list td .board_tit h3 em + strong {max-width: calc(100% - 35px);} #wrap table.bbs_list.list_recruit tbody tr {padding:15px 10px;} #wrap table.bbs_list td .board_tit .tag_list{left: 10px;width: calc(100% - 20px);padding-right:50px;top:56px;} #wrap table.bbs_list td .board_tit .tag_list li {margin-top:5px;margin-right:5px;} #wrap table.bbs_list td .board_tit .tag_list li a{padding:0 8px;font-size:12px;height:23px;} #wrap table.bbs_list.list_recruit td.period_td {top:62px;} #wrap table.bbs_list td .btn {margin-top:10px;} } /*─────────────────────────────────────────────────────────── About SAE-A ───────────────────────────────────────────────────────────*/ /*** company/history (History) ***/ .sub_history {} .sub_history .history_intro {position: relative; width:100%;max-width:1300px;padding-bottom:30px;box-sizing:border-box;} .sub_history .history_intro .intro_img {width: calc(50% + 30px); height: 300px; background: url("../images/sub/sub_history_img.jpg") no-repeat right center; background-size: cover;} .sub_history .history_intro .intro_txt {position: absolute; right: 0; top: 30px; width: calc(50% + 30px); height: 300px; background: #0076bd; box-sizing: border-box; padding: 48px 0 48px 50px; overflow: hidden;} .sub_history .history_intro .intro_txt:before {content: ""; position: absolute; right: -8px; bottom: -10px; width: 266px; height: 260px; background: url("../images/sub/sub_history_logo.png") no-repeat center;} .sub_history .history_intro .intro_txt span {font-size: 22px; font-weight: 600; color: rgba(255,255,255,0.4); letter-spacing: -0.88px;} .sub_history .history_intro .intro_txt h3 {margin-top: 12px; font-size: 34px; font-weight: 600; color: #fff; line-height: 1.35; letter-spacing: -1.36px;} .sub_history .history_wrap {position: relative;} .sub_history .history_wrap:before {content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #ddd;} .sub_history .history_wrap .history_box {display: flex; padding-top: 54px;} .sub_history .history_wrap .history_box + .history_box {padding-top: 12px;} .sub_history .history_wrap .history_box dl {width: 50%; box-sizing: border-box;} .sub_history .history_wrap .history_box dt {position: relative; margin-bottom: 8px; font-size: 30px; font-weight: 600; color: #333; letter-spacing: -1.2px; font-family: 'Poppins', 'Pretendard', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .sub_history .history_wrap .history_box dt:before, .sub_history .history_wrap .history_box dt:after {content: ""; position: absolute; top: 50%; transform: translateY(-50%); box-sizing: border-box; border-radius: 50%;} .sub_history .history_wrap .history_box dt:before {width: 21px; height: 21px; background: #0076bd; opacity: 0.1;} .sub_history .history_wrap .history_box dt:after {width: 11px; height: 11px; background: #fff; border: 2px solid #0076bd;} .sub_history .history_wrap .history_box dd {font-size: 17px; color: #666; line-height: 1.4; letter-spacing: -0.68px;} .sub_history .history_wrap .history_box dd + dd {margin-top: 10px;} /* 홀수일때-우측정렬 */ .sub_history .history_wrap .history_box:nth-of-type(odd) {text-align: right;} .sub_history .history_wrap .history_box:nth-of-type(odd) dl {padding-right: 62px;} .sub_history .history_wrap .history_box:nth-of-type(odd) dt:before {right: -73px;} .sub_history .history_wrap .history_box:nth-of-type(odd) dt:after {right: -68px;} /* 짝수일때-좌측정렬 */ .sub_history .history_wrap .history_box:nth-of-type(even) {justify-content: flex-end;} .sub_history .history_wrap .history_box:nth-of-type(even) dl {padding-left: 62px;} .sub_history .history_wrap .history_box:nth-of-type(even) dt:before {left: -73px;} .sub_history .history_wrap .history_box:nth-of-type(even) dt:after {left: -68px;} @media only screen and (max-width:1300px) { .sub_history .history_intro {width: calc(100% + 30px);margin-left:-15px;margin-right:-15px;} } @media only screen and (max-width:1200px) { .sub_history .history_intro .intro_txt span {font-size: 21px;} .sub_history .history_intro .intro_txt h3 {font-size: 32px;} } @media only screen and (max-width:1024px) { .sub_history .history_intro .intro_img {height: 270px;} .sub_history .history_intro .intro_txt {height: 270px; padding: 42px 0 42px 36px;} .sub_history .history_intro .intro_txt span {font-size: 20px;} .sub_history .history_intro .intro_txt h3 {margin-top: 10px; font-size: 30px;} .sub_history .history_wrap .history_box {padding-top: 44px;} .sub_history .history_wrap .history_box dt {font-size: 28px;} .sub_history .history_wrap .history_box dd {font-size: 16px;} /* 홀수일때-우측정렬 */ .sub_history .history_wrap .history_box:nth-of-type(odd) dl {padding-right: 47px;} .sub_history .history_wrap .history_box:nth-of-type(odd) dt:before {right: -58px;} .sub_history .history_wrap .history_box:nth-of-type(odd) dt:after {right: -53px;} /* 짝수일때-좌측정렬 */ .sub_history .history_wrap .history_box:nth-of-type(even) dl {padding-left: 47px;} .sub_history .history_wrap .history_box:nth-of-type(even) dt:before {left: -58px;} .sub_history .history_wrap .history_box:nth-of-type(even) dt:after {left: -53px;} } @media only screen and (max-width:960px) { /* 홀수일때-우측정렬 */ .sub_history .history_wrap .history_box:nth-of-type(odd) dl {padding-right: 36px;} .sub_history .history_wrap .history_box:nth-of-type(odd) dt:before {right: -46px;} .sub_history .history_wrap .history_box:nth-of-type(odd) dt:after {right: -41px;} /* 짝수일때-좌측정렬 */ .sub_history .history_wrap .history_box:nth-of-type(even) dl {padding-left: 36px;} .sub_history .history_wrap .history_box:nth-of-type(even) dt:before {left: -46px;} .sub_history .history_wrap .history_box:nth-of-type(even) dt:after {left: -41px;} } @media only screen and (max-width:860px) { .sub_history .history_intro .intro_img {height: 250px;} .sub_history .history_intro .intro_txt {height: 250px; padding: 36px 0 36px 30px;} .sub_history .history_intro .intro_txt span {font-size: 19px;} .sub_history .history_intro .intro_txt h3 {font-size: 28px;} .sub_history .history_wrap .history_box dt {font-size: 26px;} /* 홀수일때-우측정렬 */ .sub_history .history_wrap .history_box:nth-of-type(odd) dl {padding-right: 30px;} .sub_history .history_wrap .history_box:nth-of-type(odd) dt:before {right: -40px;} .sub_history .history_wrap .history_box:nth-of-type(odd) dt:after {right: -35px;} /* 짝수일때-좌측정렬 */ .sub_history .history_wrap .history_box:nth-of-type(even) dl {padding-left: 30px;} .sub_history .history_wrap .history_box:nth-of-type(even) dt:before {left: -40px;} .sub_history .history_wrap .history_box:nth-of-type(even) dt:after {left: -35px;} } @media only screen and (max-width:800px) { .sub_history .history_intro {padding-bottom: 0;} .sub_history .history_intro .intro_img, .sub_history .history_intro .intro_txt {width: calc(100% - 30px);} .sub_history .history_intro .intro_txt {position: relative; top: -30px; right: -30px;} .sub_history .history_wrap {margin-top: -30px;} } @media only screen and (max-width:640px){ .sub_history .history_intro .intro_img, .sub_history .history_intro .intro_txt {width: calc(100% - 20px); height: 230px;} .sub_history .history_intro .intro_txt {top: -20px; right: -20px;} .sub_history .history_intro .intro_txt span {font-size: 18px;} .sub_history .history_wrap {margin-top: -20px; box-sizing: border-box; padding-left: 25px;} .sub_history .history_wrap:before {left: 35px;} .sub_history .history_wrap .history_box + .history_box {padding-top: 30px;} .sub_history .history_wrap .history_box dl {width: 100%;} .sub_history .history_wrap .history_box dt {margin-bottom: 6px; font-size: 24px;} .sub_history .history_wrap .history_box dt:before {width: 19px; height: 19px;} .sub_history .history_wrap .history_box dt:after {width: 9px; height: 9px;} .sub_history .history_wrap .history_box dd {font-size: 15px;} .sub_history .history_wrap .history_box dd + dd {margin-top: 8px;} /* 홀수일때-우측정렬 */ .sub_history .history_wrap .history_box:nth-of-type(odd) {text-align: left;} .sub_history .history_wrap .history_box:nth-of-type(odd) dl {padding-right: 0; padding-left: 40px;} .sub_history .history_wrap .history_box:nth-of-type(odd) dt:before {right: inherit; left: -39px;} .sub_history .history_wrap .history_box:nth-of-type(odd) dt:after {right: inherit; left: -34px;} /* 짝수일때-좌측정렬 */ .sub_history .history_wrap .history_box:nth-of-type(even) {justify-content: flex-start;} .sub_history .history_wrap .history_box:nth-of-type(even) dl {padding-left: 40px;} .sub_history .history_wrap .history_box:nth-of-type(even) dt:before {left: -39px;} .sub_history .history_wrap .history_box:nth-of-type(even) dt:after {left: -34px;} } @media only screen and (max-width:480px){ .sub_history .history_intro .intro_img, .sub_history .history_intro .intro_txt {width: calc(100% - 10px); height: 200px;} .sub_history .history_intro .intro_txt {right: -10px; padding: 30px 24px;} .sub_history .history_intro .intro_txt span {font-size: 17px;} .sub_history .history_intro .intro_txt h3 {margin-top: 8px; font-size: 26px;} .sub_history .history_wrap {padding-left: 10px;} .sub_history .history_wrap:before {left: 20px;} .sub_history .history_wrap .history_box {padding-top: 34px;} .sub_history .history_wrap .history_box dt {font-size: 22px;} .sub_history .history_wrap .history_box dd {font-size: 14px;} /* 홀수일때-우측정렬 */ .sub_history .history_wrap .history_box:nth-of-type(odd) dl {padding-left: 35px;} .sub_history .history_wrap .history_box:nth-of-type(odd) dt:before {left: -34px;} .sub_history .history_wrap .history_box:nth-of-type(odd) dt:after {left: -29px;} /* 짝수일때-좌측정렬 */ .sub_history .history_wrap .history_box:nth-of-type(even) dl {padding-left: 35px;} .sub_history .history_wrap .history_box:nth-of-type(even) dt:before {left: -34px;} .sub_history .history_wrap .history_box:nth-of-type(even) dt:after {left: -29px;} } @media only screen and (max-width:400px){ .sub_history .history_intro .intro_txt h3 br {display: none;} } @media only screen and (max-width:375px){ .sub_history .history_wrap {padding-left:0;} .sub_history .history_wrap:before {left:10px;} } @media only screen and (max-width:350px){ .sub_history .history_wrap {width: calc(100% + 16px);margin-left:-8px;margin-right:-8px;padding-right:8px;box-sizing:border-box;} } /*** company/about (SAE-A Family) ***/ .sub_about {} .sub_about .family_list {} .sub_about .family_list li {display: flex; align-items: center;} .sub_about .family_list li + li {margin-top: 60px;} .sub_about .family_list li .img_box {width: 300px;} .sub_about .family_list li .img_box img {width: 100%;} .sub_about .family_list li .txt_box {width: calc(100% - 300px); box-sizing: border-box; padding-left: 40px; letter-spacing: -0.4px;} .sub_about .family_list li .txt_box dt {margin-bottom: 24px; font-size: 22px; font-weight: 600; color: #333;} .sub_about .family_list li .txt_box dd {font-size: 18px; color: #666; line-height: 1.77; word-break: keep-all;} .sub_about .family_list li .txt_box dd .link {display: flex; flex-direction: column; margin-bottom: 24px;} .sub_about .family_list li .txt_box dd .link a {display: inline-block; width: max-content; font-size: 15px; color: #aaa; line-height: 1.86; letter-spacing: normal; font-family: 'Poppins', 'Pretendard', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;position: relative;} .sub_about .family_list li .txt_box dd .link a:before{width:0;height:1px;content:"";background:#aaa;position: absolute;bottom:0;left:0;transition:width 0.5s;} .sub_about .family_list li .txt_box dd .link a:hover:before{width:100%;} @media only screen and (max-width:1200px){ .sub_about .family_list li .txt_box dt {font-size: 21px;} } @media only screen and (max-width:1024px) { .sub_about .family_list li + li {margin-top: 50px;} .sub_about .family_list li .img_box {width: 270px;} .sub_about .family_list li .txt_box {width: calc(100% - 270px); padding-left: 30px;} .sub_about .family_list li .txt_box dt {margin-bottom: 18px; font-size: 20px;} .sub_about .family_list li .txt_box dd {font-size: 16px;} .sub_about .family_list li .txt_box dd .link {margin-bottom: 18px;} .sub_about .family_list li .txt_box dd .link a {font-size: 14px;} .sub_about .family_list li .txt_box dd br {display: none;} } @media only screen and (max-width:860px) { .sub_about .family_list li .img_box {width: 240px;} .sub_about .family_list li .txt_box {width: calc(100% - 240px);} .sub_about .family_list li .txt_box dt {font-size: 19px;} .sub_about .family_list li .txt_box dd .link a:hover:before{width:0;} } @media only screen and (max-width:640px){ .sub_about .family_list li {display: flex; align-items: flex-start; flex-direction: column;} .sub_about .family_list li + li {margin-top: 40px;} .sub_about .family_list li .img_box {position: relative; width: 100%; padding-bottom: 50%; overflow: hidden;} .sub_about .family_list li .img_box img {position: absolute; left: 0; top: 50%; transform: translateY(-50%);} .sub_about .family_list li .txt_box {width: 100%; padding-left: 0; padding-top: 24px;} .sub_about .family_list li .txt_box dt {margin-bottom: 12px; font-size: 18px;} .sub_about .family_list li .txt_box dd {font-size: 14px;} .sub_about .family_list li .txt_box dd .link {margin-bottom: 12px;} .sub_about .family_list li .txt_box dd .link a {font-size: 12px;} } @media only screen and (max-width:480px){ .sub_about .family_list li .img_box {padding-bottom: 54%;} .sub_about .family_list li .txt_box dt {font-size: 17px;} } /*** company/business (business) ***/ /* 일반형 */ .sub_tit{} .sub_tit.center{text-align:center;} .sub_tit h3{font-size:52px;font-weight:600;color:#111;font-family: 'Poppins', 'Pretendard', sans-serif;} .sub_tit h4{font-size:30px;font-weight:600;color:#111;font-family: 'Poppins', 'Pretendard', sans-serif;line-height: 126%;} .sub_tit h4 + p{margin-top: 9px;} .sub_tit h3 strong{font-size:inherit;font-weight:inherit;color:#0076bd;font-family: inherit;} .sub_tit h5{font-size:26px;font-weight:500;color:#333;line-height:153%;letter-spacing: -1px;} .sub_tit h5 + h3{margin-top: 11px;} .sub_tit p{font-size:20px;font-weight:400;color:#333;letter-spacing: -0.6px;} .sub_business{} .sub_business .intro{padding-bottom: 106px;} .sub_business .intro .sub_tit{margin-top: -16px;} .sub_business .value_chain{padding-top: 114px;padding-bottom:120px;background: #f3f8fc url('../images/sub/sub_business_value_chain_bg.png') no-repeat 61% 158%;} .sub_business .value_chain .cont{display:flex;justify-content:center;margin-top:65px;margin-right: -30px;} .sub_business .value_chain .procedure{padding-top:30px;text-align: right;} .sub_business .value_chain .procedure .proc_list{display:flex;} .sub_business .value_chain .procedure .proc_list + .company{margin-top:183px;} .sub_business .value_chain .procedure .proc_list li{position:relative;} .sub_business .value_chain .procedure .proc_list li + li{margin-left:300px;} .sub_business .value_chain .procedure .proc_list li dl{position:relative;} .sub_business .value_chain .procedure .proc_list li dl dt{display:inline-flex; align-items:center; justify-content:center; width:130px; height:130px; border:2px solid #0076bd; background:#fff; box-sizing:border-box; border-radius:100%; font-size:0;} .sub_business .value_chain .procedure .proc_list li dl dd{position:absolute;top:calc(100% + 15px);left:50%;transform:translateX(-50%);font-size:20px;font-weight:600;color:#333;line-height:140%;width:max-content;text-align:center;letter-spacing: -0.7px;} .sub_business .value_chain .procedure .proc_list li dl dd.top{top:auto;bottom: calc(100% + 17px);} .sub_business .value_chain .procedure .company{position:relative;text-align:right;margin-right:-40px;display: inline-block;} .sub_business .value_chain .procedure .company span{position:relative; font-size:0; display:inline-flex; align-items:center; justify-content:center; margin-left:auto; width:200px; height:200px; background:#0076bd; border-radius:100%; box-shadow:5px 10px 15px rgba(0,0,0,0.25);} .sub_business .value_chain .procedure .company span:before{position:absolute; content:''; width:calc(100% + 60px); height:calc(100% + 60px); top:50%; left:50%; transform:translate(-50%, -50%); background:rgba(0,118,189,0.1); border-radius:100%;} .sub_business .value_chain .procedure .company span:after{position:absolute; content:''; width:calc(100% + 220px); height:calc(100% + 220px); top:50%; left:50%; transform:translate(-50%, -50%); border:1px dashed rgba(0,118,189,0.43); border-radius:100%;} .sub_business .value_chain .exp{position:relative; margin-left:270px;} .sub_business .value_chain .exp_list{background:#fff;padding: 27px 38px;border:3px dashed #0076bd;border-radius:20px;} .sub_business .value_chain .exp_list li{position:relative;} .sub_business .value_chain .exp_list li + li{margin-top:48px;} .sub_business .value_chain .exp_list li dl{text-align:center;} .sub_business .value_chain .exp_list li dl dt{display:inline-flex; align-items:center; justify-content:center; width:110px; height:110px; border-radius:100%; border:2px solid #ddd; box-sizing:border-box;} .sub_business .value_chain .exp_list li dl dt.point{border-color:#0076bd;} .sub_business .value_chain .exp_list li dl dt + dd{margin-top: 11px;} .sub_business .value_chain .exp_list li dl dd{font-size:18px;font-weight: 500;color:#333;letter-spacing:-0.7px;line-height: 135%;} .sub_business .value_chain .exp_list li dl dd strong{font-size:20px; font-weight:600; color:inherit;} /* 아이콘 & 텍스트 */ .sub_business .value_chain .ab_txt{position:absolute;width:max-content;left:50%;bottom: calc(100% + 73px);display:inline-flex;align-items:center;height:40px;padding: 0 19px;font-size:18px;font-weight:400;color:#fff;background:#053d83;border-radius:20px;transform: translateX(calc(-50% - 60px));letter-spacing: -0.7px;} .sub_business .value_chain .ab_txt.sky{background:#0076bd;} .sub_business .value_chain .procedure .proc_list li.customer:before{position:absolute;content:'';width: 297px;height:3px;background:#0076bd;top: calc(100% + 117px);left: calc(100% - 39px);transform: rotate(40deg);} .sub_business .value_chain .procedure .proc_list li.customer:after{position:absolute;content:'';border: 8px solid #fff0;border-left: 13px solid #0076bd;top: calc(100% + 212px);transform: rotate(40deg);left: calc(100% + 220px);} .sub_business .value_chain .procedure .proc_list li.customer .ab_txt{left: calc(100% + 101px);top: calc(100% + 66px);bottom:auto;transform: rotate(40deg);} .sub_business .value_chain .procedure .proc_list li.customer .ab_txt.sky{left: calc(100% + 10px);top: calc(100% + 128px);bottom:auto;transform: rotate(40deg);letter-spacing: 0;} .sub_business .value_chain .procedure .proc_list li.customer dl:before{position:absolute;content:'';width: 309px;height:3px;background:#053d83;top: calc(100% + 107px);left: calc(100% - 25px);transform: rotate(40deg);} .sub_business .value_chain .procedure .proc_list li.customer dl:after{position:absolute;content:'';border: 8px solid #fff0;border-right: 13px solid #053d83;top: calc(100% + 1px);transform: rotate(40deg);left: calc(100% + 0px);} .sub_business .value_chain .procedure .proc_list li.factory:before{position:absolute; content:''; width:250px; height:3px; background:#0076bd; top:50%; transform:translateY(calc(-50% - 0.5px)); right:calc(100% + 20px);} .sub_business .value_chain .procedure .proc_list li.factory:after{position:absolute; content:''; width:50px; height:50px; background:#0076bd url('../images/sub/sub_business_proc_list_icon02_01.png') no-repeat center; border-radius:100%; top:50%; transform:translateY(-50%); right:calc(100% + 120px);} .sub_business .value_chain .procedure .proc_list li.factory dl:before{position:absolute;content:'';border: 8px solid #fff0;border-right: 13px solid #0076bd;top:50%;transform: translateY(-50%);right: calc(100% + 267px);} .sub_business .value_chain .procedure .proc_list li.factory dl dt:before{position:absolute;content:'';width:3px;height:154px;background:#0076bd;left:50%;top: calc(100% + 10px);transform: translateX(calc(-50% + 12px));} .sub_business .value_chain .procedure .proc_list li.factory dl dt:after{position:absolute;content:'';border: 8px solid #fff0;border-top: 13px solid #0076bd;left:50%;top: calc(100% + 161px);transform: translateX(calc(-50% + 12px));} .sub_business .value_chain .procedure .proc_list li.factory .ab_txt{top: calc(100% + 70px);bottom:auto;transform: translateX(calc(-50% + 83px));} .sub_business .value_chain .procedure .company:before{position:absolute;content:'';width:3px;height:154px;background:#053d83;left:50%;bottom:calc(100% + 10px);transform: translateX(calc(-50% - 13px));} .sub_business .value_chain .procedure .company:after{position:absolute;content:'';border: 8px solid #fff0;border-bottom: 13px solid #053d83;left:50%;bottom: calc(100% + 162px);transform: translateX(calc(-50% - 13px));} .sub_business .value_chain .exp:before{position:absolute; content:''; width:250px; border-top:3px dashed #0076bd; top:94px; right:100%;} .sub_business .value_chain .exp:after{position:absolute;content:'';border: 8px solid #fff0;border-right: 13px solid #0076bd;top:88px;right: calc(100% + 240px);} .sub_business .value_chain .exp_list:before{position:absolute; content:''; width:80px; height:50px; background:#0076bd url('../images/sub/sub_business_exp_icon01_01.png') no-repeat center; border-radius:25px; top:70px; right:calc(100% + 80px);} .sub_business .value_chain .exp_list li + li:before{position:absolute;content:'';width:20px;height: 20px;background:#ddd;left:50%;bottom: calc(100% - 2px);transform:translateX(-50%);} .sub_business .value_chain .exp_list li + li:after{position:absolute;content:'';border: 17px solid #fff0;border-bottom: 20px solid #ddd;left:50%;bottom: calc(100% + 18px);transform:translateX(-50%);} .sub_business .worldwide{padding-top:110px;padding-bottom: 334px;background: url('../images/sub/sub_business_worldwide_bg.png') no-repeat 53% 67%;} .sub_business .worldwide .cont{position:relative; text-align:center;} .sub_business .worldwide .globe{position:relative;font-size:0;display:inline-flex;align-items: center;justify-content:center;width:230px;height:230px;background:#fff;box-shadow:5px 10px 15px rgba(0,0,0,0.25);border-radius:100%;margin-top: 269px;} .sub_business .worldwide .globe:before{position:absolute; content:''; width:calc(100% + 290px); height:calc(100% + 290px); border:1px dashed rgba(0,118,189,0.43); box-sizing:border-box; top:50%; left:50%; transform:translate(-50%, -50%); border-radius:100%;} .sub_business .worldwide .exp_list{} .sub_business .worldwide .exp_list li{position:absolute;} .sub_business .worldwide .exp_list li dl{position:relative;} .sub_business .worldwide .exp_list li dl dt{display:inline-flex; align-items:center; justify-content:center; width:150px; height:150px; background:#0076bd; border-radius:100%;} .sub_business .worldwide .exp_list li dl dd{position:absolute;font-size:18px;font-weight:400;color:#333;line-height:155%;letter-spacing:-0.7px;font-family: 'Poppins', 'Pretendard', sans-serif;width: max-content;} .sub_business .worldwide .exp_list li dl dd.flex{display:inline-flex; align-items:center;} .sub_business .worldwide .exp_list li dl dd strong{display:block;font-size:60px;font-weight:bold;color:#0076bd;font-family: inherit;letter-spacing: -2px;line-height: 1;} .sub_business .worldwide .exp_list li dl dd strong em{display:inline-block; vertical-align:top; font-size:65%; margin-top:-3px;} .sub_business .worldwide .exp_list li dl dd strong span{font-size:30px;display: inline-block;letter-spacing: -0.7px;font-family: inherit;} /* nth */ .sub_business .worldwide .exp_list li:nth-child(1){bottom: calc(100% + 44px);left:50%;transform:translateX(-50%);} .sub_business .worldwide .exp_list li:nth-child(2){top: -4%;left: calc(100% + 44px);} .sub_business .worldwide .exp_list li:nth-child(3){top: calc(100% + 4px);left: calc(100% - 53px);text-align: left;} .sub_business .worldwide .exp_list li:nth-child(4){top: calc(100% + 4px);right: calc(100% - 53px);text-align: right;} .sub_business .worldwide .exp_list li:nth-child(5){top: -4%;right: calc(100% + 44px);} .sub_business .worldwide .exp_list li:nth-child(1) dd{bottom: calc(100% + 7px);left:50%;transform: translateX(-40%);} .sub_business .worldwide .exp_list li:nth-child(2) dd{left: calc(100% + 25px);top:50%;transform:translateY(-50%);text-align: left;} .sub_business .worldwide .exp_list li:nth-child(3) dd{left: calc(100% + 22px);top:50%;transform:translateY(-50%);} .sub_business .worldwide .exp_list li:nth-child(4) dd{right: calc(100% + 25px);top:50%;transform:translateY(-50%);text-align: center;} .sub_business .worldwide .exp_list li:nth-child(5) dd{right: calc(100% + 25px);top:50%;transform:translateY(-50%);text-align: right;} .sub_business .worldwide .exp_list li:nth-child(1) dd strong{margin-right: 9px;} .sub_business .worldwide .exp_list li:nth-child(n+2):nth-child(-n+5) dd strong{margin-top: 2px;} @media only screen and (max-width:1317px){ .sub_tit h3{font-size:3.95vw;} .sub_tit h5{font-size:24px;} .sub_tit p{font-size:18px;} .sub_business .value_chain .cont{margin-right:0;} .sub_business .value_chain .exp_list li dl dd{font-size:17px;} .sub_business .value_chain .exp_list li dl dd strong, .sub_business .value_chain .procedure .proc_list li dl dd{font-size:19px;} } @media only screen and (max-width:1217px){ .sub_business .worldwide .globe{width:18.9vw; height:18.9vw; padding:30px; box-sizing:border-box;} .sub_business .worldwide .globe:before{width:calc(100% + 23.8vw); height:calc(100% + 23.8vw);} .sub_business .worldwide .exp_list li dl dt{width:12.3vw; height:12.3vw; padding:20px; box-sizing:border-box;} .sub_business .worldwide .exp_list li:nth-child(n+2):nth-child(-n+5) dl dt{padding:30px;} .sub_business .worldwide .exp_list li dl dd{font-size:17px;} .sub_business .worldwide .exp_list li dl dd strong{font-size:4.9vw;} .sub_business .worldwide .exp_list li dl dd strong span{font-size:27px;} } @media only screen and (max-width:1050px){ .sub_business .value_chain{background-position:50% 130%;} .sub_business .value_chain .procedure .proc_list li.customer dl:before{width:29.4vw; top:calc(100% + 10.2vw);} .sub_business .value_chain .procedure .proc_list li.customer dl:after{top:12vw; left:auto; right:-1.5vw;} .sub_business .value_chain .procedure .proc_list li.customer:before{width:29.4vw; top:calc(100% + 11.5vw);} .sub_business .value_chain .procedure .proc_list li.customer:after{top: 32.9vw;left: auto;right: -23.6vw;} .sub_business .value_chain .procedure .proc_list li.customer .ab_txt{left:22vw; top:18vw;} .sub_business .value_chain .procedure .proc_list li.customer .ab_txt.sky{left:14vw;top: calc(22vw + 40px);} .sub_business .value_chain .procedure .proc_list li + li, .sub_business .value_chain .exp{margin-left:26vw;} .sub_business .value_chain .procedure .proc_list li.factory:before{width:21.5vw;} .sub_business .value_chain .procedure .proc_list li.factory:after{right:calc(100% + 9.5vw);} .sub_business .value_chain .procedure .proc_list li.factory dl:before{right:calc(100% + 22.5vw);} .sub_business .value_chain .procedure .proc_list li dl dt{width:12.3vw; height:12.3vw; padding:25px;} .sub_business .value_chain .procedure .proc_list li dl dt img{max-height:100%;} .sub_business .value_chain .exp:before{width:22.5vw; top:9vw;} .sub_business .value_chain .exp:after{right:calc(100% + 22.5vw); top:8.4vw;} .sub_business .value_chain .exp_list:before{right:calc(100% + 7vw); top:6.6vw;} .sub_business .value_chain .exp_list li dl dt{width:10.4vw; height:10.4vw; padding:20px;} } @media only screen and (max-width:1023px){ .sub_tit h5{font-size:22px;} .sub_tit p{font-size:17px;} .sub_business .value_chain .exp_list li dl dd strong, .sub_business .value_chain .procedure .proc_list li dl dd{font-size:18px;} .sub_business .value_chain .procedure .proc_list li dl dd{top:calc(100% + 10px);} .sub_business .value_chain .procedure .proc_list li dl dd.top{bottom:calc(100% + 10px);} .sub_business .value_chain .exp_list li dl dd{font-size:16px;} .sub_business .value_chain .ab_txt{font-size:17px;} .sub_business .worldwide .exp_list li dl dd{font-size:16px;} .sub_business .worldwide .exp_list li:nth-child(2) dd, .sub_business .worldwide .exp_list li:nth-child(3) dd{left:calc(100% + 15px);} .sub_business .worldwide .exp_list li:nth-child(4) dd, .sub_business .worldwide .exp_list li:nth-child(5) dd{right:calc(100% + 15px);} .sub_business .worldwide .exp_list li dl dd strong span{font-size:25px;} } @media only screen and (max-width:860px){ .sub_tit h3{font-size:33px; line-height:121%} .sub_tit h5{font-size:20px;} .sub_tit h5 + h3{margin-top:18px;} .sub_tit p{font-size:16px;} .sub_business .intro{padding-bottom:80px;} .sub_business .value_chain{padding-top:80px;background-size: 100%;background-position: 50% 19%;} .sub_business .value_chain .cont{display:block;} .sub_business .value_chain .ab_txt{font-size: 14px;height:35px;left: -46px;bottom: auto;top: calc(100% + 29px);transform: rotate(-60deg);padding: 0 12px;} .sub_business .value_chain .procedure{display:flex;flex-wrap:wrap;flex-direction: column-reverse;align-items: center;} .sub_business .value_chain .procedure .proc_list{width:100%;justify-content: center;flex-direction:row-reverse;margin-top: 130px;} .sub_business .value_chain .procedure .proc_list li + li{margin-left:0;margin-right: 120px;} .sub_business .value_chain .procedure .proc_list li dl{text-align:center;} .sub_business .value_chain .procedure .proc_list li dl dt{width:110px; height:110px;} .sub_business .value_chain .procedure .proc_list li dl dd{position:relative;top:auto !important;bottom:auto !important;font-size:16px;margin-top: 13px;} .sub_business .value_chain .procedure .proc_list li.customer:before{width: 3px;height: 120px;transform: rotate(-30deg);bottom: auto;top: auto;bottom: calc(100% + 9px);left: auto;right: 94px;} .sub_business .value_chain .procedure .proc_list li.customer:after{border:6px solid #fff0;border-bottom: 10px solid #0076bd;transform: none;top: auto;bottom: calc(100% + 117px);right: auto;left: -24px;transform: rotate(-30deg);} .sub_business .value_chain .procedure .proc_list li.customer dl:before{width: 3px;height: 120px;transform: rotate(-30deg);bottom: auto;top: auto;bottom: calc(100% + 2px);left: auto;right: 112px;} .sub_business .value_chain .procedure .proc_list li.customer dl:after{border:6px solid #fff0;border-right: 10px solid #053d83;transform: none;top: auto;bottom: calc(100% + 2px);right: auto;left: 15px;} .sub_business .value_chain .procedure .proc_list li.customer .ab_txt{transform: rotate(60deg);top:auto;bottom: calc(100% + 26px);left: -63px;right: auto;} .sub_business .value_chain .procedure .proc_list li.customer .ab_txt.sky{transform: rotate(60deg);top:auto;bottom: calc(100% + 71px);left: auto;right: 11px;} .sub_business .value_chain .procedure .proc_list li.factory:before{width: 142px;left: calc(100% - 22px);right: auto;transform: none;top: 59px;height: 2px;} .sub_business .value_chain .procedure .proc_list li.factory:after{width:35px;height:35px;background-size:20px auto;right: auto;left: calc(100% + 32px);transform: none;top: 43px;} .sub_business .value_chain .procedure .proc_list li.factory dl:before{border:6px solid #fff0;border-left:10px solid #0076bd;transform: none;top: 54px;right: auto;left: calc(100% + 111px);} .sub_business .value_chain .procedure .proc_list li.factory dl dt:before{height: 120px;transform:rotate(30deg);top: auto;bottom: calc(100% + 2px);left: auto;right: 19px;} .sub_business .value_chain .procedure .proc_list li.factory dl dt:after{border:6px solid #fff0;border-top:10px solid #0076bd;top:auto;bottom: calc(100% - 2px);right: 47px;left: auto;transform: rotate(30deg);} .sub_business .value_chain .procedure .proc_list li.factory .ab_txt{transform: rotate(-60deg);top:auto;bottom: calc(100% + 29px);left: auto;right: -46px;} .sub_business .value_chain .procedure .proc_list + .company{margin-top:0;} .sub_business .value_chain .procedure .company{display:block; margin-right:0;} .sub_business .value_chain .procedure .company:before{height: 120px;transform:rotate(30deg);bottom: auto;top: calc(100% + 2px);left: 0px;} .sub_business .value_chain .procedure .company:after{border:6px solid #fff0;border-bottom: 10px solid #053d83;left: 29px;bottom: auto;top: calc(100% - 4px);transform: rotate(30deg);} .sub_business .value_chain .procedure .company span{width:180px; height:180px;} .sub_business .value_chain .procedure .company span img{width:130px;} .sub_business .value_chain .procedure .company span:after{width:calc(100% + 120px);height:calc(100% + 120px);display: none;} .sub_business .value_chain .exp{margin-left:auto;margin-right:auto;margin-top: 112px;width: 100%;max-width:540px;border: 3px dashed #0076bd;border-radius: 20px;background: #fff;text-align: center;} .sub_business .value_chain .exp:before{width:0;height:100px;border-left:2px dashed #0076bd;top:auto;bottom:100%;left:50%;margin-left: -122px;} .sub_business .value_chain .exp:after{right:auto;left:50%;top:auto;bottom:calc(100% + 103px);margin-left: -127px;border:6px solid #fff0;border-bottom:10px solid #0076bd;} .sub_business .value_chain .exp_list{display:flex;justify-content: center;border-width:2px;max-width: 80%;box-sizing: border-box;border: 0;border-radius: 0;margin: 0 auto; background:none;} .sub_business .value_chain .exp_list:before{right:auto;top:auto;left:50%;bottom:calc(100% + 40px);margin-left: -154px;width:70px;height:35px;background-size:37px auto;} .sub_business .value_chain .exp_list li + li{margin-top:0;margin-left: 60px;} .sub_business .value_chain .exp_list li + li:before{width:15px;height:10px;left:auto;right: calc(100% + 18px);transform:none;top:40px;} .sub_business .value_chain .exp_list li + li:after{border: 10px solid #fff0;border-right: 14px solid #ddd;left:auto;right: calc(100% + 21px);top: 35px;} .sub_business .value_chain .exp_list li dl dt{width:90px; height:90px;} .sub_business .value_chain .exp_list li dl dd{font-size:15px;} .sub_business .value_chain .exp_list li dl dd strong{font-size:16px;} .sub_business .worldwide{background-position: 50% 24%;background-size:100%; padding-bottom:100px;} .sub_business .worldwide .globe{width:auto;height:auto;display:block;background:none;box-shadow:none;margin: 50px 0 0;padding: 0 15px;} .sub_business .worldwide .globe:before{width:0;height:100%;top:0;left:50%;transform:translateX(-50%);border:0;border-left: 2px dashed rgba(0,118,189,0.3);border-radius:0;z-index:0;} .sub_business .worldwide .globe > span{display:inline-flex;align-items:center;justify-content:center;width: 220px;height: 220px;box-shadow: 2.5px 5px 7.5px rgb(0 0 0 / 25%);border-radius:100%;position: relative;z-index: 1;background: #fff;} .sub_business .worldwide .exp_list li, .sub_business .worldwide .exp_list li dl dd{position:relative; transform:none !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;} .sub_business .worldwide .exp_list{margin-top:30px;} .sub_business .worldwide .exp_list li{display:flex; align-items:center; height:100px; text-align:left; background:#0076bd; border-radius:15px; overflow:hidden;} .sub_business .worldwide .exp_list li + li{margin-top:20px;} .sub_business .worldwide .exp_list li dl{display:flex; align-items:center;} .sub_business .worldwide .exp_list li dl dt{width:200px; border-radius:0;} .sub_business .worldwide .exp_list li dl dd{width:calc(100% - 200px); color:#fff; text-align:left !important;} .sub_business .worldwide .exp_list li:nth-child(4) dl dd{display:flex; align-items:center;} .sub_business .worldwide .exp_list li dl dd br{display:none;} .sub_business .worldwide .exp_list li dl dd strong{color:#fff; font-size:37px;} .sub_business .worldwide .exp_list li:nth-child(n+2):nth-child(-n+5) dd strong{margin-top: 6px;} .sub_business .worldwide .exp_list li:nth-child(4) dl dd strong{margin-right:10px; margin-top:0 !important;} .sub_business .worldwide .exp_list li dl dd strong span{font-size:22px;} } @media only screen and (max-width:767px){ .sub_tit h5{font-size:18px;} } @media only screen and (max-width:640px){ .sub_tit h5{font-size:17px; line-height:147%; letter-spacing:-0.7px;} .sub_business .intro{padding-bottom:48px;} .sub_business .intro .sub_tit{margin-top:0; padding:5px 15px;} .sub_business .value_chain{padding-top: 54px;padding-bottom: 60px;} .sub_business .value_chain .procedure{padding-top:0;} .sub_business .value_chain .procedure .proc_list li.factory:before{top:51px;} .sub_business .value_chain .procedure .proc_list li.factory:after{top:34px;left: calc(100% + 30px);} .sub_business .value_chain .procedure .proc_list li.factory dl:before{top:46px;} .sub_business .value_chain .procedure .proc_list li.customer:after{left:-34px;} .sub_business .value_chain .procedure .proc_list li.customer dl:after{left:5px;} .sub_business .value_chain .procedure .proc_list li.customer .ab_txt{left:-71px;} .sub_business .value_chain .procedure .proc_list li dl dt{width:100px; height:100px;} .sub_business .value_chain .exp_list li dl dt{width:80px; height:80px;} .sub_business .worldwide{padding-top: 55px;} .sub_business .worldwide .exp_list li dl dt{width:150px;} .sub_business .worldwide .exp_list li dl dd{width:calc(100% - 150px);font-size:14px;font-weight: 200;} .sub_business .worldwide .exp_list li dl dd strong{font-size:35px;letter-spacing: -0.7px;} .sub_business .worldwide .exp_list li dl dd strong span{font-size:20px;} .sub_business .worldwide .globe{padding:0;} } @media only screen and (max-width:479px){ .sub_business .value_chain{background-size: 115%;background-position: 50% 11%;} .sub_business .value_chain .ab_txt{font-size:12px;height: 25px;font-weight: 200;padding: 0 14px;top: calc(100% + 20px);left: -61px;border-radius: 13px;} .sub_business .value_chain .cont{margin-top: 42px;} .sub_business .value_chain .procedure .company{} .sub_business .value_chain .procedure .company span{width:110px;height:110px;box-shadow: 5px 5px 7.5px rgba(0,0,0,0.25);} .sub_business .value_chain .procedure .company span:before{width: calc(100% + 30px);height: calc(100% + 30px);} .sub_business .value_chain .procedure .company span:after{display:none;} .sub_business .value_chain .procedure .company span img{width:85px;} .sub_business .value_chain .procedure .company:before{left: -18px;top: calc(100% + 13px);width: 2px;height: 72px;} .sub_business .value_chain .procedure .company:after{left: -1px;top: calc(100% + 6px);border: 5px solid #fff0;border-bottom: 8px solid #053d83;} .sub_business .value_chain .procedure .proc_list{margin-top:94px;} .sub_business .value_chain .procedure .proc_list li + li{margin-right: 65px;} .sub_business .value_chain .procedure .proc_list li dl dd{font-size:14px;line-height:142%;} .sub_business .value_chain .procedure .proc_list li.factory:before{width: 88px;} .sub_business .value_chain .procedure .proc_list li.factory:after{left:calc(100% + 7px);} .sub_business .value_chain .procedure .proc_list li.factory dl:before{left: calc(100% + 58px);border: 5px solid #fff0;border-left: 8px solid #0076bd;top: 47px;} .sub_business .value_chain .procedure .proc_list li.factory dl dt:before{right: 34px;bottom: calc(100% + 7px);width: 2px;height: 75px;} .sub_business .value_chain .procedure .proc_list li.factory dl dt:after{right: 51px;bottom: calc(100% - -2px);border: 5px solid #fff0;border-top: 8px solid #0076bd;} .sub_business .value_chain .procedure .proc_list li.factory .ab_txt{right: -19px;bottom: calc(100% + 20px);padding: 0 10px;} .sub_business .value_chain .procedure .proc_list li.customer dl:before{right: 80px;bottom: calc(100% + 7px);width: 2px;height: 75px;} .sub_business .value_chain .procedure .proc_list li.customer dl:after{left: 28px;bottom: calc(100% + 6px);border: 5px solid #fff0;border-right: 8px solid #053d83;} .sub_business .value_chain .procedure .proc_list li.customer:before{right: 68px;width: 2px;height: 75px;} .sub_business .value_chain .procedure .proc_list li.customer:after{left: 5px;bottom: calc(100% + 76px);border: 5px solid #fff0;border-bottom: 8px solid #0076bd;} .sub_business .value_chain .procedure .proc_list li.customer .ab_txt{left: -32px;bottom: calc(100% + 22px);padding: 0 10px;} .sub_business .value_chain .procedure .proc_list li.customer .ab_txt.sky{right: 10px;bottom: calc(100% + 43px);width: 60px;text-align: center;height: 36px;padding: 0 5px;} .sub_business .value_chain .exp{} .sub_business .value_chain .exp:before{height: 90px;margin-left: -89px;} .sub_business .value_chain .exp:after{border:5px solid #fff0;border-bottom:8px solid #0076bd;margin-left: -92px;bottom: calc(100% + 93px);} .sub_business .value_chain .exp_list{border-radius:10px;padding: 18px 10px 18px;width: 100%;max-width: 100%;} .sub_business .value_chain .exp_list:before{margin-left: -123px;bottom: calc(100% + 30px);} .sub_business .value_chain .exp_list li + li{margin-left:40px;} .sub_business .value_chain .exp_list li + li:before{right:calc(100% + 8px);top: 31px;} .sub_business .value_chain .exp_list li + li:after{right: calc(100% + 12px);top: 28px;border: 8px solid #fff0;border-right: 12px solid #ddd;} .sub_business .value_chain .exp_list li dl dt{width:75px; height:75px; padding:15px;} .sub_business .value_chain .exp_list li dl dd{font-size:13px;line-height: 150%;font-weight: 300;} .sub_business .value_chain .exp_list li dl dd strong{font-size:14px;} .sub_business .worldwide{background-position: 50% 11.2%;background-size: 92%;} .sub_business .worldwide .globe{padding:0;margin-top: 23px;} .sub_business .worldwide .globe > span{width:125px; height:125px; padding:20px; box-sizing:border-box;} .sub_business .worldwide .exp_list li dl dt{padding:0; width:115px;} .sub_business .worldwide .exp_list li:nth-child(1) dl dt img{width:78px;} .sub_business .worldwide .exp_list li:nth-child(2) dl dt img{width:41px;} .sub_business .worldwide .exp_list li:nth-child(3) dl dt img{width:41px;} .sub_business .worldwide .exp_list li:nth-child(4) dl dt img{width:37px;} .sub_business .worldwide .exp_list li:nth-child(5) dl dt img{width:45px;} .sub_business .worldwide .exp_list li dl dd{width:calc(100% - 115px);} } @media only screen and (max-width:374px){ .sub_business .value_chain .exp_list li dl dt{width:65px; height:65px;} .sub_business .value_chain .exp_list li dl dd{font-size:12px;} .sub_business .worldwide .exp_list li dl dt{width:100px;} .sub_business .worldwide .exp_list li dl dd{width:calc(100% - 100px); font-size:13px;} .sub_business .worldwide .exp_list li dl dd strong{font-size:32px;} .sub_business .worldwide .exp_list li dl dd strong span{font-size:18px;} } @media only screen and (max-width:320px){ .sub_tit h3 {font-size:30px;letter-spacing:-0.02em} .sub_tit h4 {font-size:27px;letter-spacing:-0.02em} .sub_tit h5 {font-size:15px;} .sub_tit p {font-size:14px;} .sub_business .value_chain .procedure .proc_list li dl dd, .sub_business .value_chain .exp_list li dl dd strong {font-size:13px} .sub_business .value_chain .exp_list li dl dd {font-size:11px} .sub_business .value_chain .exp_list li + li {margin-left:32px} .sub_business .value_chain .exp_list li dl dt {width:60px;height:60px;padding:12px;} .sub_business .value_chain .exp_list li + li:before {width:10px;right:calc(100% + 6px);} .sub_business .value_chain .exp_list li + li:after {right:calc(100% + 6px);} } /*─────────────────────────────────────────────────────────── SAE-A 人 Story ───────────────────────────────────────────────────────────*/ /*** SAE-A 人 Story 공통요소 ***/ /* 일반형 */ @media only screen and (max-width:1200px) { } /*─────────────────────────────────────────────────────────── Life at SAE-A ───────────────────────────────────────────────────────────*/ /*** Life at SAE-A 공통요소 ***/ /* 일반형 */ .sub_con_tit {margin-bottom: 25px;} .sub_con_tit h3 {font-size: 30px; font-weight: 500; color: #333; letter-spacing: -0.9px; text-align:left;} .sub_con_tit p {margin-top: 12px; font-size: 18px; color: #666; letter-spacing: -0.54px; line-height: 1.5;} @media only screen and (max-width:1200px) { .sub_con_tit h3 {font-size: 28px;} } @media only screen and (max-width:1024px) { .sub_con_tit {margin-bottom: 22px;} .sub_con_tit h3 {font-size: 26px;} .sub_con_tit p {margin-top: 10px; font-size: 17px;} } @media only screen and (max-width:860px) { .sub_con_tit h3 {font-size: 24px;} } @media only screen and (max-width:640px) { .sub_con_tit {margin-bottom: 20px;} .sub_con_tit h3 {font-size: 22px;} .sub_con_tit p {margin-top: 8px; font-size: 16px;} } @media only screen and (max-width:480px) { .sub_con_tit p {margin-top: 8px; font-size: 15px;} } /*** life/corporate (기업문화) ***/ /* 일반형 */ .sub_corporate{} .sub_corporate .title{text-align: left;} .sub_corporate .title dt{font-size:30px;color:#333;font-weight:500;letter-spacing:-0.9px;} .sub_corporate .title dd{font-size:20px;color:#333;font-weight:400;letter-spacing:-0.6px;margin-top:17px;} /*비전*/ .sub_corporate .corporate_vision{text-align:center;background:url('../images/sub/corporate-globe.png')no-repeat center;margin-top:-11px;padding:10px 15px 114px;} .sub_corporate .corporate_vision > h3{font-size:52px;color:#111;font-weight:600;margin-top:4px;font-family:'Poppins', 'Pretendard';} .sub_corporate .corporate_vision > h3 strong{color:#0076bd;font-weight:600;font-family:inherit;} .sub_corporate .corporate_vision > h3 p{font-size:30px;color:#333;font-weight:500;letter-spacing:-1.2px;margin-top:11px;} .sub_corporate .corporate_vision > p{font-size:20px;color:#333;font-weight:400;letter-spacing:-0.6px;line-height:34px;padding-top:112px;position: relative;margin-top:39px;} .sub_corporate .corporate_vision > p:before{width:1px;height:80px;content:"";background:#000;position: absolute;top:0;left:calc(50% - 1px);} /*임직원 현황*/ .corporate_executives{width:100%;background:#f3f8fc;margin-top:38px;box-sizing:border-box;padding:75px 0 80px;} .corporate_executives .w_custom{font-size:0;} .corporate_executives .graph_box{width:50%;box-sizing:border-box;background:#fff;border-radius:10px;position: relative;padding:60px 0 60px 80px;margin-top:27px; font-size:0; display:inline-block; vertical-align:top;} .corporate_executives .graph_box + .graph_box{padding:61px 80px 60px 0;} .corporate_executives .graph_box .graph_bg{width:100%;height:100%;position: absolute;top:0;left:0;padding:155px 0 186px 80px;} .corporate_executives .graph_box + .graph_box .graph_bg{padding:155px 80px 186px 0;} .corporate_executives .graph_box .graph_bg div{width:100%;height:100%;border-bottom:2px solid #aaa;background:url('../images/sub/corporate_graph_bg.jpg')repeat-x center top;} .corporate_executives .graph_box > div{position: relative;text-align: center;display: inline-block;box-sizing:border-box;vertical-align: bottom;width:100%;} .corporate_executives .graph_box .graph_cont li{position:relative; display: inline-block;vertical-align: bottom;} .corporate_executives .graph_box .graph_cont .graph{position: relative;} .corporate_executives .graph_box .graph_cont span{font-size:18px;color:#333;font-weight:400;letter-spacing:-0.54px;display: block;margin-top:18px;} .corporate_executives .graph_box .graph_cont em{display:block; font-size: 20px; font-weight: bold; letter-spacing: -0.6px; text-align: center; color: #999; font-family: 'Poppins', 'Pretendard', sans-serif;} .corporate_executives .graph_box .graph_cont em strong{font-size:inherit; font-weight:inherit; color:inherit;} .corporate_executives .graph_box .graph_cont .point em{color:#0076bd;} .corporate_executives .graph_box .graph_des{display: inline-block;box-sizing:border-box;vertical-align: top;font-size:18px;color:#fff;font-weight:400;letter-spacing:-0.54px;height:60px;line-height:60px;border-radius:30px;background:#333;padding:0 30px;margin-top:27px;} .gender_rate{padding-left:20px;} .gender_rate .graph_cont{box-sizing:border-box;} #wrap .gender_rate .graph_cont em{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:#fff; z-index:3;} .gender_rate .man .graph{width:131px;height:344px; /*background:url('../images/sub/cnt-man.png')no-repeat center top;*/} .gender_rate .man .graph:after{width:100%;height:100%;content:"";background:url('../images/sub/cnt-man.png')no-repeat center; background-size:auto 100%; position: absolute;bottom: 0;left:50%;transform:translateX(-50%);transition:all 3s;} .gender_rate .man .graph:before{width:calc(100% - 3px);;height:0;content:"";background:rgba(0,118,189,1);position: absolute;bottom:0; left:50%; transform:translateX(-50%); transition:all 3s;} .gender_rate.aos-animate .man .graph:before{height:61%;} .gender_rate .woman{margin-left:100px;} .gender_rate .woman .graph{width: 146px;height: 345px;/*background:url('../images/sub/cnt-woman.png')no-repeat center;*/} .gender_rate .woman .graph:after{width:100%;height:100%;content:"";background:url('../images/sub/cnt-woman.png')no-repeat center; background-size:auto 100%; position: absolute;bottom: -2px;left:50%;transform:translateX(-50%);transition:all 3s;} .gender_rate .woman .graph:before{width:calc(100% - 3px);height:0;content:"";background:rgba(0,118,189,1);position: absolute;bottom: 0;left:50%;transform:translateX(-50%);transition:all 3s;} /*.gender_rate .woman .graph:before{width:0;height:0;content:"";background:url('../images/sub/cnt-woman-ov.png')no-repeat center top;position: absolute;bottom:0;left:50%; transform:translateX(-50%); transition:all 3s; }*/ .gender_rate.aos-animate .woman .graph:before{height:75%;} .ages_rate .graph_cont{height:383px; display: flex; align-items: flex-end; justify-content: center;} .ages_rate .graph_cont li + li{margin-left:50px;} .ages_rate .graph{width:60px; height:0; background:#ccc; transition:all 3s;} .ages_rate .point .graph{background:#0076bd;} .ages_rate .twenty{} .ages_rate.aos-animate .twenty .graph{height:180px;} .ages_rate .thirty{} .ages_rate.aos-animate .thirty .graph{height:240px;} .ages_rate .fourty{} .ages_rate.aos-animate .fourty .graph{height:60px;} .ages_rate .over_fifty{} .ages_rate.aos-animate .over_fifty .graph{height:20px;} /* 복리후생 */ .corporate_welfare{padding-top:76px;} .corporate_welfare .WelfareSwiper{position:relative;padding-top: 0; padding-right:20px; box-sizing:border-box;} .corporate_welfare .WelfareSwiper .swiper-slide{} .corporate_welfare .WelfareSwiper .swiper-slide .thumb{font-size:0; height:300px;} .corporate_welfare .WelfareSwiper .swiper-slide .thumb img{width:100%; height:100%; object-fit:cover;} .corporate_welfare .WelfareSwiper .swiper-slide .thumb + dl{margin-top:26px;} .corporate_welfare .WelfareSwiper .swiper-slide dl{} .corporate_welfare .WelfareSwiper .swiper-slide dl dt{font-size: 24px; font-weight: 600;line-height: 1.33;letter-spacing: -0.72px; color: #333;} .corporate_welfare .WelfareSwiper .swiper-slide dl dt + dd{margin-top:10px;} .corporate_welfare .WelfareSwiper .swiper-slide dl dd{font-size: 18px; line-height: 1.67; letter-spacing: -0.54px; color: #888;} .corporate_welfare .WelfareSwiper .controller{font-size:0; display:flex; justify-content:flex-end; margin-bottom:30px; transform:translateX(20px);} #wrap .WelfareSwiper .swiper-button-prev, #wrap .WelfareSwiper .swiper-button-next{position:relative; top:auto; right:auto; bottom:auto; left:auto; border-color:#ddd; margin:0; background-image:url('../images/skin/main_slide_arrow_gr.png');} #wrap .WelfareSwiper .swiper-button-prev{margin-right:20px;} #wrap .WelfareSwiper .swiper-button-next{} #wrap .WelfareSwiper .swiper-button-stop{width: 65px; height: 65px; border: 1px solid #000; border-radius: 100%; background: #fff; transition: all 0.4s; box-sizing: border-box; background:url('../images/skin/main_slide_stop_gr.png') no-repeat center; border-color:#ddd; margin-right:20px; cursor:pointer;} #wrap .WelfareSwiper .swiper-button-stop.play{background-image:url('../images/skin/main_play_btn_icon_gr.png');} @media only screen and (max-width:1550px){ #wrap .WelfareSwiper .swiper-button-stop{width:60px; height:60px;} } @media only screen and (max-width:1330px){ .corporate_welfare .WelfareSwiper{padding-right:0;} .corporate_welfare .WelfareSwiper .controller{transform:none;} .corporate_welfare .WelfareSwiper .swiper-slide .thumb{height:22vw;} .corporate_welfare .WelfareSwiper .swiper-slide dl dt{font-size:23px;} .corporate_welfare .WelfareSwiper .swiper-slide dl dd{font-size:17px;} } @media only screen and (max-width:1200px){ .corporate_executives .graph_box{padding:60px 0 60px 60px;} .corporate_executives .graph_box + .graph_box{padding:61px 60px 60px 0;} .corporate_executives .graph_box .graph_bg{padding:155px 0 186px 60px} .corporate_executives .graph_box + .graph_box .graph_bg{padding:155px 60px 186px 0} .ages_rate .graph_cont li + li{margin-left:40px;} } @media only screen and (min-width:1024px){ #wrap .WelfareSwiper .swiper-button-stop:hover{background-color:#0076bd; border-color:#0076bd; background-image:url('../images/skin/main_slide_stop_on.png');} .sub_corporate .corporate_vision {margin-top:0;} .sub_corporate .corporate_vision > h3{font-size:5vw;} .sub_corporate .corporate_vision > h3 p, .sub_corporate .title dt{font-size:2.93vw;} .sub_corporate .corporate_vision > p, .sub_corporate .title dd{font-size:19px;} .sub_corporate .corporate_vision > p{line-height:170%;} .corporate_executives .graph_box{padding:60px 0 60px 40px;} .corporate_executives .graph_box + .graph_box{padding:61px 40px 60px 0;} .corporate_executives .graph_box .graph_bg{padding:155px 0 186px 40px} .corporate_executives .graph_box + .graph_box .graph_bg{padding:155px 40px 186px 0} .gender_rate .woman{margin-left:70px;} .ages_rate .graph_cont{height:382px;} .ages_rate .graph_cont li + li{margin-left:30px;} .ages_rate .graph{width:50px;} .corporate_executives .graph_box .graph_cont span{font-size:17px;} .corporate_executives .graph_box .graph_des {font-size:17px; height:55px; line-height:55px; margin-top:33px;} .corporate_welfare .WelfareSwiper .swiper-slide .thumb + dl{margin-top:20px;} .corporate_welfare .WelfareSwiper .swiper-slide dl dt{font-size:22px;} .corporate_welfare .WelfareSwiper .swiper-slide dl dt + dd{margin-top:8px;} .corporate_welfare .WelfareSwiper .swiper-slide dl dd{font-size:16px;} #wrap .WelfareSwiper .swiper-button-prev, #wrap .WelfareSwiper .swiper-button-stop{margin-right:15px;} #wrap .WelfareSwiper .swiper-button-stop{width:55px; height:55px;} } @media only screen and (max-width:975px){ .sub_corporate .corporate_vision{background-size:auto 100%;} } @media only screen and (max-width:860px){ .sub_corporate .corporate_vision > p, .sub_corporate .title dd{font-size:17px;} .corporate_executives .graph_box, .corporate_executives .graph_box + .graph_box{width:100%;padding:60px 40px 60px;} .corporate_executives .graph_box .graph_bg, .corporate_executives .graph_box + .graph_box .graph_bg{padding:155px 40px 186px;} .gender_rate{padding-left:0;} .corporate_welfare .WelfareSwiper .controller{margin-bottom:20px;} .corporate_welfare .WelfareSwiper .swiper-slide .thumb + dl{margin-top:15px;} .corporate_welfare .WelfareSwiper .swiper-slide dl dt{font-size:20px;} .corporate_welfare .WelfareSwiper .swiper-slide dl dt + dd{margin-top:5px;} .corporate_welfare .WelfareSwiper .swiper-slide dl dd{font-size:15px;} #wrap .WelfareSwiper .swiper-button-stop{width:50px; height:50px; background-size:10px auto;} } @media only screen and (max-width:767px){ .sub_corporate .corporate_vision > h3 p, .sub_corporate .title dt{font-size:21px;} .sub_corporate .corporate_vision > p, .sub_corporate .title dd{font-size:16px;} .sub_corporate .corporate_vision > p{padding-top:92px; margin-top:34px;} .sub_corporate .corporate_vision > p:before{height:60px;} .sub_corporate .title dd{margin-top:12px;} .corporate_welfare .WelfareSwiper .swiper-slide dl dt{font-size:19px;} } @media only screen and (max-width:640px){ .sub_corporate .corporate_vision{padding-bottom:70px;} .sub_corporate .corporate_vision > h3{font-size:32px; line-height:130%;} .sub_corporate .corporate_vision > p, .sub_corporate .title dd{font-size:15px;} .sub_corporate .corporate_vision > p{padding-top:58px; margin-top:20px;} .sub_corporate .corporate_vision > p:before{height:40px;} .sub_corporate .corporate_vision > p br{display:none;} .corporate_executives .graph_box + .graph_box{padding-top:0;} .corporate_executives .graph_box .graph_cont em{font-size:19px;} .corporate_executives .graph_box .graph_cont span{font-size:16px;} .corporate_executives .graph_box .graph_des{font-size:16px; height:50px; line-height:50px; margin-top:25px;} .gender_rate .man .graph{width:115px; height:303px;} .gender_rate .woman .graph{width:130px; height:303px;} .gender_rate .man .graph, .gender_rate.aos-animate .man .graph:before, .gender_rate .woman .graph, .gender_rate .woman .graph:before{background-size:auto 100%; background-position:center bottom;} .gender_rate .woman .graph:before{width:calc(100% - 5px); left:calc(50% - 1px);} .corporate_executives .graph_box .graph_bg, .corporate_executives .graph_box + .graph_box .graph_bg{padding: 143px 40px 172px;} .corporate_executives .graph_box .graph_bg div{background-size:auto 100%;} .corporate_welfare .WelfareSwiper .controller{margin-bottom:15px;} #wrap .WelfareSwiper .swiper-button-prev, #wrap .WelfareSwiper .swiper-button-stop{margin-right:10px;} #wrap .WelfareSwiper .swiper-button-stop{width:45px; height:45px;} .corporate_welfare .WelfareSwiper .swiper-slide .thumb{height:34.8vw;} } @media only screen and (max-width:479px){ .sub_corporate .corporate_vision > h3{font-size:30px;} .sub_corporate .corporate_vision > h3 p, .sub_corporate .title dt{font-size:17px;} .sub_corporate .corporate_vision > p{font-size:14px;} .corporate_executives .graph_box .graph_cont em{font-size: 17px;} .corporate_executives .graph_box .graph_cont span{font-size:15px;margin-top: 13px;} .corporate_executives .graph_box .graph_des{font-size:15px; height:45px; line-height:45px; margin-top:20px;} .gender_rate .man .graph{width: 97px;height:250px;} .gender_rate .woman{margin-left: 30px;} .gender_rate .woman .graph{width: 108px;height:250px;} .gender_rate .woman .graph:before{bottom:1px; } .gender_rate.aos-animate .woman .graph:before{height:calc(75% - 1px);} .gender_rate .woman .graph:after{bottom:-1px;} .corporate_executives .graph_box .graph_bg, .corporate_executives .graph_box + .graph_box .graph_bg{padding: 123px 40px 156px;} .ages_rate .graph{width:40px;} .ages_rate .graph_cont li + li{margin-left:25px;} .corporate_executives .graph_box{margin-top:20px;} #wrap .WelfareSwiper .swiper-button-stop{width:40px; height:40px; background-size:9px auto;} .corporate_welfare .WelfareSwiper .swiper-slide dl dt{font-size:18px;} .corporate_welfare .WelfareSwiper .swiper-slide dl dd{font-size:14px; line-height:145%;} } @media only screen and (max-width:431px){ .sub_corporate .corporate_vision{background-size:100% auto;} .sub_corporate .corporate_vision > h3{font-size:28px;} .sub_corporate .corporate_vision > h3 p{font-size:17px;} .sub_corporate .corporate_vision > p, .sub_corporate .title dd{font-size:14px;} .corporate_executives .graph_box .graph_cont em{font-size: 16px;} .corporate_executives .graph_box .graph_cont span{font-size:14px;margin-top: 10px;} .gender_rate .man .graph{width: 90px;height:230px;} .gender_rate .man .graph:before{width:calc(100% - 4px);} .gender_rate .woman{margin-left: 20px;} .gender_rate .woman .graph{width: 98px;height:230px;} .corporate_executives .graph_box .graph_bg, .corporate_executives .graph_box + .graph_box .graph_bg{padding-left:30px;padding-right:30px;padding-bottom: 148px;} .ages_rate .graph{width:35px;} .ages_rate .graph_cont li + li{margin-left:20px;} .corporate_executives .graph_box .graph_des{font-size:14px; height:42px; line-height:42px;} .corporate_welfare .WelfareSwiper .controller{margin-top:20px;} .corporate_welfare .WelfareSwiper .swiper-slide dl dt{font-size:17px;} .corporate_welfare .WelfareSwiper .swiper-slide dl dd{font-size:13px;} } @media only screen and (max-width:360px){ .sub_corporate .corporate_vision > h3{font-size:26px} .sub_corporate .corporate_vision > h3 p, .sub_corporate .title dt, .corporate_welfare .WelfareSwiper .swiper-slide dl dt{font-size:16px;} .corporate_welfare .WelfareSwiper .swiper-slide .thumb{height:68.7vw;} } /*** life/personnel_system (인사제도) ***/ /* 일반형 */ .sub_personnel {} .sub_personnel .pers_talent {margin-bottom: 66px; background: url("../images/sub/sub_pers_talent_bg.png") no-repeat center bottom; padding-bottom: 50px;} .sub_personnel .pers_talent .talent_con {position: relative; display: flex; justify-content: center; width: 100%; padding: 240px 0 128px;} .sub_personnel .pers_talent .talent_con dt {position: relative;} .sub_personnel .pers_talent .talent_con dt:before, .sub_personnel .pers_talent .talent_con dt:after {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-sizing: border-box; border-radius: 50%;} .sub_personnel .pers_talent .talent_con dt:before {width: 340px; height: 340px; background: rgba(0,118,189,0.1);} .sub_personnel .pers_talent .talent_con dt:after {width: 520px; height: 520px; border: 1px dashed rgba(0,118,189,0.43);} .sub_personnel .pers_talent .talent_tit {position: relative; width: 280px; height: 280px; background: #0076bd url("../images/sub/sub_pers_talent_logo.png") no-repeat center; border-radius: 50%; box-shadow: 5px 8.7px 15px 0 rgba(0, 0, 0, 0.25);} .sub_personnel .pers_talent .talent_list li {position: absolute; display: inline-flex; align-items: center; width: max-content;} .sub_personnel .pers_talent .talent_list li .icon_box {display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; background: #fff; box-sizing: border-box; border: 2px solid #0076bd; border-radius: 50%;} .sub_personnel .pers_talent .talent_list li p {font-size: 18px; color: #333; letter-spacing: -0.54px; line-height: 1.55;} .sub_personnel .pers_talent .talent_list li p br.t_br {display: none;} .sub_personnel .pers_talent .talent_list li p br.m_br {display: none;} .sub_personnel .pers_talent .talent_list li p br.pc_br {display: block;} /* 위치 및 스타일*/ .sub_personnel .pers_talent .talent_list li.list01 {top: 0; left: 50%; transform: translateX(-50%); flex-direction: column-reverse; align-items: center; text-align: center;} .sub_personnel .pers_talent .talent_list li.list01 p {padding-bottom: 18px;} .sub_personnel .pers_talent .talent_list li.list02 {top: 50%; left: 50%; transform: translate(45%, -50%);} .sub_personnel .pers_talent .talent_list li.list02 p {padding-left: 24px;} .sub_personnel .pers_talent .talent_list li.list03 {bottom: 0; left: 50%; transform: translateX(15%);} .sub_personnel .pers_talent .talent_list li.list03 p {padding-left: 24px;} .sub_personnel .pers_talent .talent_list li.list04 {bottom: 0; right: 50%; transform: translateX(-15%); flex-direction: row-reverse; text-align: right;} .sub_personnel .pers_talent .talent_list li.list04 p {padding-right: 24px;} .sub_personnel .pers_talent .talent_list li.list05 {top: 50%; right: 50%; transform: translate(-38%, -50%); flex-direction: row-reverse; text-align: right;} .sub_personnel .pers_talent .talent_list li.list05 p {padding-right: 24px;} .sub_personnel .pers_rank .rank_list {display:flex; justify-content:space-between;} .sub_personnel .pers_rank .rank_list li {position:relative;display:flex;justify-content: center;align-items: center;width:100%;font-size:20px;font-weight: 700;color:#333;border:1px solid #ddd;border-radius:20px;box-sizing:border-box;height:100px;} .sub_personnel .pers_rank .rank_list li + li {margin-left:40px;} .sub_personnel .pers_rank .rank_list li:last-child {border:2px solid #0076bd;} .sub_personnel .pers_rank .rank_list li + li:before{position:absolute;content:'';right:100%;top:50%;transform:translateY(-50%);width:40px;height:1px;background-image: linear-gradient(to right, #aaa 30%, rgba(255,255,255,0) 0%);background-position: bottom;background-size: 6px 1px;background-repeat: repeat-x;} .sub_personnel .pers_rank .rank_list li + li:after{position:absolute;content:'';border: 4px solid #fff0;border-top-color:#0076bd;border-right-color:#0076bd;top:50%;right:calc(100% + 20px);transform:translateY(-50%) rotate(45deg);} .sub_personnel .pers_welfare {margin-top: 80px; background: #f3f8fc; box-sizing: border-box; padding: 74px 0 80px;} .sub_personnel .pers_welfare .icon_list li {border: 0;} .sub_personnel .pers_payroll {padding-top: 74px;margin-top:80px;} .sub_personnel .pers_payroll .payroll_table {border-top: 2px solid #333;} .sub_personnel .pers_payroll .payroll_table th, .sub_personnel .pers_payroll .payroll_table td {box-sizing: border-box; padding: 20px 10px; border-bottom: 1px solid #ddd; font-size: 18px; letter-spacing: -0.54px; text-align: center;} .sub_personnel .pers_payroll .payroll_table th {width: 50%; background: #f5f5f5; font-weight: 500; color: #333;} .sub_personnel .pers_payroll .payroll_table th + th {border-left: 1px solid #ddd;} .sub_personnel .pers_payroll .payroll_table td {color: #888;} .sub_personnel .pers_payroll .payroll_table td + td {border-left: 1px solid #ddd;} .sub_personnel .pers_payroll .payroll_table td.td_row {width: 25%; border-right: 1px solid #ddd;} @media only screen and (max-width:1400px) { .sub_personnel .pers_talent .talent_con {padding: 220px 0 120px;} .sub_personnel .pers_talent .talent_con dt:before {width: 320px; height: 320px;} .sub_personnel .pers_talent .talent_con dt:after {width: 490px; height: 490px;} .sub_personnel .pers_talent .talent_tit {width: 260px; height: 260px;} .sub_personnel .pers_talent .talent_list li .icon_box {width: 135px; height: 135px;} .sub_personnel .pers_talent .talent_list li .icon_box img {width: 68px;} .sub_personnel .pers_talent .talent_list li p {font-size: 17px;} .sub_personnel .pers_talent .talent_list li.list01 p {padding-bottom: 14px;} .sub_personnel .pers_talent .talent_list li.list02 p, .sub_personnel .pers_talent .talent_list li.list03 p {padding-left: 20px;} .sub_personnel .pers_talent .talent_list li.list04 p, .sub_personnel .pers_talent .talent_list li.list05 p {padding-right: 20px;} } @media only screen and (max-width:1317px) { .sub_personnel .pers_talent {background-size: 100%; background-position: center;} } @media only screen and (max-width:1240px) { .sub_personnel .pers_talent .talent_con {padding: 206px 0 104px;} .sub_personnel .pers_talent .talent_con dt:before {width: 300px; height: 300px;} .sub_personnel .pers_talent .talent_con dt:after {width: 450px; height: 450px;} .sub_personnel .pers_talent .talent_tit {width: 250px; height: 250px;} .sub_personnel .pers_talent .talent_list li .icon_box {width: 125px; height: 125px;} .sub_personnel .pers_talent .talent_list li .icon_box img {width: 60px;} .sub_personnel .pers_talent .talent_list li.list01 p {padding-bottom: 10px;} .sub_personnel .pers_talent .talent_list li.list02 p, .sub_personnel .pers_talent .talent_list li.list03 p {padding-left: 16px;} .sub_personnel .pers_talent .talent_list li.list04 p, .sub_personnel .pers_talent .talent_list li.list05 p {padding-right: 16px;} } @media only screen and (max-width:1200px) { .sub_personnel .pers_rank .rank_list li {height: 85px;} } @media only screen and (max-width:1080px) { .sub_personnel .pers_talent .talent_con {padding: 196px 0 110px;} .sub_personnel .pers_talent .talent_list li p {font-size: 16px;} .sub_personnel .pers_talent .talent_list li p br.pc_br {display: none;} .sub_personnel .pers_talent .talent_list li p br.t_br {display: block;} .sub_personnel .pers_talent .talent_list li.list02 p, .sub_personnel .pers_talent .talent_list li.list03 p {padding-left: 14px;} .sub_personnel .pers_talent .talent_list li.list04 p, .sub_personnel .pers_talent .talent_list li.list05 p {padding-right: 14px;} .sub_personnel .pers_talent .talent_list li.list02 {transform: translate(50%, -50%);} .sub_personnel .pers_talent .talent_list li.list05 {transform: translate(-47%, -50%);} } @media only screen and (max-width:1024px) { .sub_personnel .pers_rank .rank_list li {height: 75px; font-size: 18px;} .sub_personnel .pers_welfare {margin-top: 70px; padding: 64px 0 70px;} .sub_personnel .pers_payroll {padding-top: 64px;} .sub_personnel .pers_payroll .payroll_table th, .sub_personnel .pers_payroll .payroll_table td {padding: 18px 10px; font-size: 17px;} } @media only screen and (max-width:860px) { .sub_personnel .pers_talent {padding-bottom: 0; background-size: 100%; background-position: center top;} .sub_personnel .pers_talent .talent_con {flex-direction: column; padding: 0;} .sub_personnel .pers_talent .talent_con:before, .sub_personnel .pers_talent .talent_con:after {content: ""; position:absolute; left: 50%; top: 0; width: auto; height: 90%; border: 1px dashed #0076bd;} .sub_personnel .pers_talent .talent_con:before {left: 25%;} .sub_personnel .pers_talent .talent_con:after {left: 75%;} .sub_personnel .pers_talent .talent_con dt {width: 100%;} .sub_personnel .pers_talent .talent_con dt:before, .sub_personnel .pers_talent .talent_con dt:after {display: none;} .sub_personnel .pers_talent .talent_tit {width: 100%; height: 90px; background-size: auto 20px; border-radius: 15px; box-shadow: none;} /* 리스트 초기화 */ .sub_personnel .pers_talent .talent_list {position: relative; z-index: 2;} .sub_personnel .pers_talent .talent_list li {position: relative !important; top: inherit !important; bottom: inherit !important; left: inherit !important; right: inherit !important; transform: none !important; flex-direction: initial !important; text-align: left !important;} .sub_personnel .pers_talent .talent_list li .icon_box {width: auto; height: auto; border: 0;} .sub_personnel .pers_talent .talent_list li p {padding: 0 !important;} /* 리스트 모바일 스타일 - 2개 */ .sub_personnel .pers_talent .talent_list {display: flex; flex-wrap: wrap; justify-content: space-between;} .sub_personnel .pers_talent .talent_list li {width: calc(50% - 8px); margin-top: 30px; background: #fff; border: 2px solid #0076bd; border-radius: 15px; box-sizing: border-box; padding: 30px 20px 30px 40px;} .sub_personnel .pers_talent .talent_list li .icon_box {padding-right: 25px;} .sub_personnel .pers_talent .talent_list li .icon_box img {width: 56px;} .sub_personnel .pers_talent .talent_list li p {width: calc(100% - 56px);} .sub_personnel .pers_talent .talent_list li p br.t_br {display: none;} .sub_personnel .pers_talent .talent_list li p br.m_br {display: block;} .sub_personnel .pers_talent .talent_list li.list05 {width: 100%; justify-content: center;} .sub_personnel .pers_talent .talent_list li.list05 p {width: auto;} .sub_personnel .pers_rank .rank_list li {height: 65px; font-size: 17px;} .sub_personnel .pers_welfare {margin-top: 60px; padding: 54px 0 60px;} .sub_personnel .pers_payroll {padding-top: 54px;margin-top:30px;} } @media only screen and (max-width:767px) { .sub_personnel .pers_talent .talent_list li p br {display: none !important;} .sub_personnel .pers_talent .talent_list li.list05 p br.pc_br {display:inline !important;} .sub_personnel .pers_rank .rank_list li {font-size: 15px; border-radius: 10px;} .sub_personnel .pers_rank .rank_list li + li {margin-left: 30px;} .sub_personnel .pers_rank .rank_list li + li:before {width: 30px;} .sub_personnel .pers_rank .rank_list li + li:after {border-width: 3px; right: calc(100% + 15px);} } @media only screen and (max-width:640px) { .sub_personnel .pers_rank .rank_list li {height: 55px; font-size: 14px;} .sub_personnel .pers_welfare {margin-top: 50px; padding: 44px 0 50px;} .sub_personnel .pers_payroll {padding-top: 44px;} .sub_personnel .pers_payroll .payroll_table th, .sub_personnel .pers_payroll .payroll_table td {padding: 16px 10px; font-size: 16px;} } @media only screen and (max-width:580px) { .sub_personnel .pers_rank .rank_list {flex-direction: column;} .sub_personnel .pers_rank .rank_list li + li {margin: 30px 0 0 0;} .sub_personnel .pers_rank .rank_list li + li:before {right: auto; left: 50%; top: auto; bottom: calc(100% + 17px); transform: translateX(-50%) rotate(-90deg);} .sub_personnel .pers_rank .rank_list li + li:after {top: auto; bottom: calc(100% + 15px); right: auto; left: 50%; transform: translateX(-50%) rotate(135deg);} } @media only screen and (max-width:480px) { .sub_personnel .pers_talent .talent_con:before {left: 50%; transform: translateX(-50%);} .sub_personnel .pers_talent .talent_con:after {display: none;} /* 리스트 모바일 스타일 - 1개 */ .sub_personnel .pers_talent .talent_list li {width: 100%;} .sub_personnel .pers_talent .talent_list li.list05 {justify-content: flex-start;} .sub_personnel .pers_talent .talent_list li + li {margin-top: 20px;} .sub_personnel .pers_talent .talent_list li .icon_box img {width: 46px;} .sub_personnel .pers_talent .talent_list li p {width: calc(100% - 46px); font-size: 15px;} .sub_personnel .pers_talent .talent_list li p br {display: none !important;} /* .sub_personnel .pers_talent .talent_list li p br.m_br {display:inline !important;} */ .sub_personnel .pers_rank .rank_list li {height: 50px;} .sub_personnel .pers_payroll .payroll_table th, .sub_personnel .pers_payroll .payroll_table td {padding: 14px 10px; font-size: 15px;} } @media only screen and (max-width:370px) { .sub_personnel .pers_talent .talent_list li p br, .sub_personnel .pers_talent .talent_list li p br.m_br, .sub_personnel .pers_talent .talent_list li.list05 p br.pc_br {display: none !important;} } @media only screen and (max-width:320px) { .sub_personnel .pers_talent .talent_list li{padding:20px 15px 20px 15px;} .sub_personnel .pers_talent .talent_list li p{width:76%;} .sub_personnel .pers_talent .talent_list li.list05 p{width:76%;} .sub_personnel .pers_payroll .payroll_table th, .sub_personnel .pers_payroll .payroll_table td {font-size:14px;} } /*** life/talent (인재육성) ***/ /* 일반형 */ .icon_list {display: flex; flex-wrap: wrap;} .icon_list li {width: calc(25% - 27px); background: #fff; margin-right: 36px; margin-bottom: 36px; box-sizing: border-box; padding: 24px 30px; border: 1px solid #ddd;} .icon_list li:nth-child(4n) {margin-right: 0;} .icon_list li .txt_box {} .icon_list li .txt_box dt {margin: 16px 0 14px; font-size: 22px; font-weight: 600; color: #333; letter-spacing: -0.88px; line-height: 1.45;} .icon_list li .txt_box dd {font-size: 16px; color: #888; line-height: 1.625; letter-spacing: -0.64px;} @media only screen and (max-width:1300px){ .icon_list li {width: calc(25% - 23px); margin-right: 30px; margin-bottom: 30px;} .icon_list li .txt_box dt {font-size: 21px;} .icon_list li .txt_box dd {font-size: 15px;} } @media only screen and (max-width:1200px){ .icon_list li {width: calc(25% - 19px); margin-right: 25px; margin-bottom: 25px; padding: 20px 24px;} .icon_list li .icon_box img {width: 55px;} } @media only screen and (max-width:1024px) { .icon_list li {width: calc(33.33% - 13.5px); margin-right: 20px; margin-bottom: 20px;} .icon_list li:nth-child(4n) {margin-right: 20px;} .icon_list li:nth-child(3n) {margin-right: 0;} .icon_list li .txt_box dt {margin: 14px 0 12px; font-size: 20px;} } @media only screen and (max-width:860px) { .icon_list li {width: calc(50% - 7.5px); margin-right: 15px; margin-bottom: 15px;} .icon_list li:nth-child(3n) {margin-right: 15px;} .icon_list li:nth-child(2n) {margin-right: 0;} .icon_list li .txt_box dt {font-size: 19px;} } @media only screen and (max-width:640px){ .icon_list li {padding: 16px 20px;} .icon_list li .icon_box img {width: 50px;} .icon_list li .txt_box dt {margin: 12px 0 10px; font-size: 18px;} .icon_list li .txt_box dd {font-size: 14px;} } @media only screen and (max-width:480px){ .icon_list li {width: 100%; margin-right: 0; margin-bottom: 10px;} .icon_list li:nth-child(3n) {margin-right: 0;} .icon_list li .icon_box img {width: 45px;} .icon_list li .txt_box dt {font-size: 17px;} } /*─────────────────────────────────────────────────────────── Job Apply ───────────────────────────────────────────────────────────*/ /*** 채용공고 STEP 영역 (채용공고 상세, 채용 프로세스) ***/ /* 일반형 */ ol.process_step_list {display:flex; justify-content:space-between; counter-reset: step_num;} ol.process_step_list li {position:relative;width:100%;font-size:20px;font-weight: 700;color:#333;border:1px solid #ddd;border-radius:20px;box-sizing:border-box;text-align:center;padding: 21px 10px 23px;background:#fff; display:flex; align-items:center; justify-content:center;} ol.process_step_list li + li {margin-left:40px;} ol.process_step_list li:last-child, ol.process_step_list li.on{border:2px solid #0076bd;} ol.process_step_list li + li:before{position:absolute;content:'';right:100%;top:50%;transform:translateY(-50%);width:40px;height:1px;background-image: linear-gradient(to right, #aaa 30%, rgba(255,255,255,0) 0%);background-position: bottom;background-size: 6px 1px;background-repeat: repeat-x;} ol.process_step_list li + li:after{position:absolute;content:'';border: 4px solid #fff0;border-top-color:#0076bd;border-right-color:#0076bd;top:50%;right:calc(100% + 20px);transform:translateY(-50%) rotate(45deg);} ol.process_step_list li span {display:block;} ol.process_step_list li span:before{content: 'STEP ' counter(step_num);counter-increment: step_num;display:block;font-size:16px;font-weight:600;color:#0076bd;margin-bottom: 4px;font-family: 'Poppins', 'Pretendard', sans-serif;letter-spacing: 0;} @media only screen and (max-width:1200px) { } @media only screen and (max-width:1024px) { ol.process_step_list li{font-size:18px;} ol.process_step_list li span:before{font-size:15px;} ol.process_step_list.step_7{display:block; overflow:hidden;} ol.process_step_list.step_7 li{float:left; width:calc(100% / 4 - 30px); padding-left:0; padding-right:0;} ol.process_step_list.step_7 li:nth-child(n+5){float:right; margin-top:40px;} ol.process_step_list.step_7 li:nth-child(n+5):before{right:auto; left:100%;} ol.process_step_list.step_7 li:nth-child(n+5)::after{right:auto; left:calc(100% + 20px); border-color:#0076bd; border-top-color:#fff0; border-right-color:#fff;} ol.process_step_list.step_7 li:nth-child(4n+1):before{top:auto; bottom:calc(100% + 22px); left:50%; transform:translateX(-50%) rotate(-90deg);} ol.process_step_list.step_7 li:nth-child(4n+1):after{left:50%; top:auto; bottom:calc(100% + 18px); transform:translateX(-50%) rotate(45deg); border-color:#fff0; border-bottom-color:#0076bd; border-right-color:#0076bd;} ol.process_step_list.step_7 li:last-child{margin-left:0;width:calc(100% / 2 - 20px);} } @media only screen and (max-width:860px) { ol.process_step_list li{font-size:17px; padding:20px 10px;} ol.process_step_list li span:before{font-size:14px;} } @media only screen and (max-width:800px) { ol.process_step_list li{font-size:16px;} } @media only screen and (max-width:767px) { ol.process_step_list li{font-size:14px; padding:15px 5px; border-radius:10px;} ol.process_step_list li + li{margin-left:30px;} ol.process_step_list li + li:before{width:30px;} ol.process_step_list li + li:after{border-width:3px; right:calc(100% + 15px);} ol.process_step_list li span:before{font-size:13px;} ol.process_step_list.step_7 li{width:calc(100% / 4 - 23px);} ol.process_step_list.step_7 li:nth-child(n+5){margin-top:24px;} ol.process_step_list.step_7 li:nth-child(n+5):after{left:calc(100% + 12px);} ol.process_step_list.step_7 li:nth-child(4n+1):before{bottom:calc(100% + 12px);} ol.process_step_list.step_7 li:nth-child(4n+1):after{left:50%; bottom:calc(100% + 12px);} } @media only screen and (max-width:640px) { ol.process_step_list li{font-size:13px;} ol.process_step_list li span:before{font-size:12px;} ol.process_step_list li{font-size:14px;} ol.process_step_list li + li{margin-left:24px;} ol.process_step_list li + li:before{width:24px;} ol.process_step_list li + li:after{right:calc(100% + 12px);} ol.process_step_list.step_7 li{width:calc(100% / 4 - 18px);} ol.process_step_list.step_7 li:nth-child(n+5){margin-top:24px;} ol.process_step_list.step_7 li:nth-child(n+5):after{left:calc(100% + 12px);} ol.process_step_list.step_7 li:nth-child(4n+1):before{bottom:calc(100% + 12px);} ol.process_step_list.step_7 li:nth-child(4n+1):after{left:50%; bottom:calc(100% + 12px);} } @media only screen and (max-width:600px) { ol.process_step_list{display:block;} ol.process_step_list li{padding:12px 10px 10px; font-size:14px;} ol.process_step_list li + li{margin:20px 0 0;} ol.process_step_list li + li:before{right: auto;left: 50%;top: auto;bottom: calc(100% + 10px);transform: translateX(-50%) rotate(-90deg); width:20px;} ol.process_step_list li + li:after{top: auto;bottom: calc(100% + 10px);right: auto;left: 50%;transform: translateX(-50%) rotate(135deg); border-color:#fff0; border-top-color: #0076bd; border-right-color: #0076bd;} ol.process_step_list li span:before{font-size:13px;} #wrap ol.process_step_list {overflow:hidden;} #wrap ol.process_step_list li{width:calc(100% / 2 - 10px); margin:0 20px 0 0;} #wrap ol.process_step_list li:nth-child(n+1):nth-child(-n+2){float:left;} #wrap ol.process_step_list li:nth-child(n+3):nth-child(-n+4){float:right; margin-right:0; margin-left:20px;} #wrap ol.process_step_list li:nth-child(n+5):nth-child(-n+6){float:left;} #wrap ol.process_step_list li:nth-child(n+7):nth-child(-n+8){float:right; margin-right:0; margin-left:20px;} #wrap ol.process_step_list li:nth-child(n+3){margin-top:20px;} #wrap ol.process_step_list li:nth-child(2){margin-right:0 !important;} #wrap ol.process_step_list li:nth-child(2):before, #wrap ol.process_step_list li:nth-child(6):before{left:auto; right:100%; bottom:auto; top:50%; transform:translateY(-50%);} #wrap ol.process_step_list li:nth-child(2):after, #wrap ol.process_step_list li:nth-child(6):after{bottom:auto;top: calc(50% - 2.5px);left:auto;right: calc(100% + 6px);transform:translateX(-50%) rotate(135deg);border-color: #fff0;border-top-color: #0076bd;border-left-color: #0076bd;} #wrap ol.process_step_list li:nth-child(4){margin-left:0 !important;} #wrap ol.process_step_list li:nth-child(4):before, #wrap ol.process_step_list li:nth-child(8):before{left:100%; right:auto; bottom:auto; top:50%; transform:translateY(-50%);} #wrap ol.process_step_list li:nth-child(4):after, #wrap ol.process_step_list li:nth-child(8):after{bottom:auto;top: calc(50% - 2.5px);left: calc(100% + 13px); right:auto; ;transform:translateX(-50%) rotate(135deg);border-color: #fff0;border-bottom-color: #0076bd;border-right-color: #0076bd;} #wrap ol.process_step_list li:nth-child(6){margin-right:0 !important;} #wrap ol.process_step_list li:nth-child(8){margin-left:0 !important;} #wrap ol.process_step_list.step_7 li:last-child{width:100%; margin-left:0;} #wrap ol.process_step_list.step_7 li:last-child:before{left:calc(75% + 10px);} #wrap ol.process_step_list.step_7 li:last-child:after{left:calc(75% + 10px); border-color: #fff0; border-top-color: #0076bd; border-right-color: #0076bd;} #wrap ol.process_step_list.step_3 li:nth-child(3) {width:100%;margin-left:0;} #wrap ol.process_step_list.step_3 li:nth-child(3):before{left:calc(75% + 10px);} #wrap ol.process_step_list.step_3 li:nth-child(3):after{left:calc(75% + 10px); border-color: #fff0; border-top-color: #0076bd; border-right-color: #0076bd;} } @media only screen and (max-width:374px) { ol.process_step_list li{font-size:13px;} ol.process_step_list li span:before{font-size:12px;} } /*** 채용공고 공통_타이틀등 (채용공고 상세, 채용 프로세스) ***/ /* 일반형 */ .recruit_cont {} .recruit_cont > dl {margin-top: 75px;} .recruit_cont > dl > dt {font-size: 24px;font-weight: 500;color:#333;border-bottom: 1px solid #333;letter-spacing: -0.7px;padding-bottom: 20px;} .recruit_cont > dl > dd {margin-top: 26px; font-size: 18px; line-height: 1.45; font-weight: 400;color: #666;letter-spacing: -0.8px;} .recruit_cont dl.qualifi dd {margin-top:0;} .recruit_cont > dl > dd > p{position:relative; padding-left:15px;} .recruit_cont > dl > dd > p:before{position:absolute;content:'';width:5px;height:5px;background:#666;border-radius:100%;top: 10px;left:0;} .recruit_cont > dl > dd > p + p{margin-top:11px;} .recruit_cont dl.tasks dd > p, .recruit_cont dl.etc dd > p{padding-left:0;} .recruit_cont dl.tasks dd > p:before, .recruit_cont dl.etc dd > p:before{display:none;} .recruit_cont > dl > dd > ul {margin-top: 26px;} .recruit_cont > dl > dd > ul li {position:relative;font-size: 18px;font-weight: 400;color: #666;letter-spacing: -0.8px;padding-left:15px;} .recruit_cont > dl > dd > ul li:before {position:absolute;content:'';width:5px;height:5px;background:#666;border-radius:100%;top: 10px;left:0;} .recruit_cont > dl > dd > ul li + li{margin-top:11px;} .recruit_cont dl dd .table_wrap {} .recruit_cont dl dd .table_wrap .table_left {border-top:1px solid #ddd;} .recruit_cont dl dd .table_wrap .table_left th, .recruit_cont dl dd .table_wrap .table_left td {font-size: 18px; color:#888; font-weight:400;border-bottom:1px solid #ddd;padding: 19px 30px;} .recruit_cont dl dd .table_wrap .table_left th {color:#333;background:#f5f5f5;font-weight: 500;} .recruit_cont dl dd .table_wrap .table_left td {font-weight:400;color:#666} @media only screen and (max-width:1024px) { .recruit_cont > dl > dt{font-size:23px;} .recruit_cont > dl > dd .table_wrap .table_left th, .recruit_cont dl dd .table_wrap .table_left td{font-size:17px; padding:15px 25px;} } @media only screen and (max-width:860px) { .recruit_cont > dl > dt{font-size:22px; padding-bottom:15px;} .recruit_cont > dl > dd, .recruit_cont > dl > dd > ul{margin-top:20px;} .recruit_cont > dl > dd, .recruit_cont > dl > dd > ul li{font-size:17px;} .recruit_cont > dl > dd > p:before, .recruit_cont > dl > dd > ul li:before{width:4px; height:4px;} .recruit_cont > dl > dd .table_wrap .table_left th, .recruit_cont > dl > dd .table_wrap .table_left td{font-size:16px; padding:10px 20px;} } @media only screen and (max-width:767px) { .recruit_cont > dl > dt{font-size:19px;} .recruit_cont > dl > dd, .recruit_cont > dl > dd > ul li{font-size:16px;} .recruit_cont > dl > dd > p, .recruit_cont > dl > dd > ul li{padding-left:10px;} .recruit_cont > dl > dd > p:before, .recruit_cont > dl > dd > ul li:before{width:3px; height:3px;} .recruit_cont > dl > dd .table_wrap .table_left th, .recruit_cont > dl > dd .table_wrap .table_left td{font-size:15px; padding:10px 15px;} } @media only screen and (max-width:640px) { .recruit_cont > dl{margin-top:60px;} .recruit_cont > dl > dt{font-size:18px; padding-bottom:12px;} .recruit_cont > dl > dd, .recruit_cont > dl > dd > ul{margin-top:15px;} .recruit_cont > dl > dd, .recruit_cont > dl > dd > ul li{font-size:15px;} .recruit_cont > dl > dd > p + p, .recruit_cont > dl > dd > ul li + li{margin-top:7px;} .recruit_cont > dl > dd > p:before, .recruit_cont > dl > dd > ul li:before{top: 8px; /* width:2px; height:2px; */} .recruit_cont > dl > dd .table_wrap .table_left th, .recruit_cont > dl > dd .table_wrap .table_left td{font-size:14px;} } @media only screen and (max-width:479px) { .recruit_cont.job {margin-top:-8px;margin-bottom:32px;} .recruit_cont > dl > dd .table_wrap .table_left col:nth-child(1){width: 80px;} .recruit_cont > dl > dd, .recruit_cont > dl > dd > ul li{font-size:14px;} } @media only screen and (max-width:374px) { .recruit_cont > dl > dd .table_wrap .table_left th, .recruit_cont > dl > dd .table_wrap .table_left td{padding-left:10px; padding-right:10px; font-size:13px;} } /*** board/view_recruit (채용공고 보기) ***/ /* 일반형 */ .recruit_info {} .recruit_info ul {/* border-top: 2px solid #333; */border-bottom: 1px solid #ddd;padding: 9px 0;} .recruit_info ul li {width:100%;box-sizing:border-box;border-bottom: 0;display:flex;flex-wrap:wrap;} .recruit_info ul li dl {display:flex;width:50%;align-items: center;} .recruit_info ul li dl dt {width:20%;background: #fff;font-size: 20px;font-weight: 500;padding: 18px 20px;color: #333;letter-spacing: -0.7px;} .recruit_info ul li dl dd {width:80%;border-right:1px solid #ddd;padding: 18px 27px;font-size: 20px;font-weight: 400;color: #888;letter-spacing: -0.7px;} .recruit_info ul li dl dd:last-child {border-right:0;} .recruit_info ul li dl dd .period_day{display:inline-block; vertical-align:middle; margin-right:12px;} .recruit_info ul li dl dd .period{position:relative; display:inline-block; vertical-align:middle;font-size:16px; font-weight:500; color:#ed4444; font-family: 'Poppins', 'Pretendard', sans-serif; padding-left:27px;} .recruit_info ul li dl dd .period:before{position:absolute; content:''; width:17px; height:17px; background:url('../images/skin/recruit_list_icon.png') no-repeat center; background-size:100%; top:50%; left:0; transform:translateY(calc(-50% - 0.5px)); } @media only screen and (max-width:1024px) { .recruit_info ul li dl {width: calc(50% - 20px);} .recruit_info ul li dl:nth-of-type(even) {width: calc(50% + 20px);} .recruit_info ul li dl dt, .recruit_info ul li dl dd{font-size:19px;padding-top:15px;padding-bottom:15px;padding-left:15px; padding-right:15px;} } @media only screen and (max-width:860px) { .recruit_info ul li dl {width: calc(50% - 40px);} .recruit_info ul li dl:nth-of-type(even) {width: calc(50% + 40px);} .recruit_info ul li dl dt, .recruit_info ul li dl dd{font-size:17px;padding-top:10px;padding-bottom:10px;box-sizing:border-box;} .recruit_info ul li dl dt{padding-right:7.5px; width:90px;} .recruit_info ul li dl dd{padding-left:7.5px; width:calc(100% - 90px);} .recruit_info ul li dl dd .period_day{margin-right:10px;} .recruit_info ul li dl dd .period{font-size:15px;} } @media only screen and (max-width:767px) { .recruit_info ul li dl {width: calc(50% - 60px);} .recruit_info ul li dl:nth-of-type(even) {width: calc(50% + 60px);} .recruit_info ul li dl dt, .recruit_info ul li dl dd{font-size:16px;} .recruit_info ul li dl dt{width: 80px;} .recruit_info ul li dl dd{width:calc(100% - 80px);} } @media only screen and (max-width:640px) { .recruit_info ul li{display:block;} .recruit_info ul li:first-child {padding-top:5px;} .recruit_info ul li:last-child {padding-bottom:5px;} .recruit_info ul li dl, .recruit_info ul li dl:nth-of-type(even){width:100%;} .recruit_info ul li dl dt, .recruit_info ul li dl dd{font-size:15px; padding-top:7px; padding-bottom:7px;} .recruit_info ul li dl dd .period{font-size:14px; padding-left:23px;} .recruit_info ul li dl dd .period:before{width:15px; height:15px; background-size:100%;} } @media only screen and (max-width:479px) { .recruit_info ul li dl dt, .recruit_info ul li dl dd{font-size:14px; padding-top:8px; padding-bottom:8px;} } @media only screen and (max-width:374px) { .recruit_info ul li dl dt, .recruit_info ul li dl dd{font-size:13px; padding-top:5px; padding-bottom:5px;} .recruit_info ul li dl dt{width:70px; padding-left:10px;} .recruit_info ul li dl dd{width:calc(100% - 70px); padding-right:10px;} .recruit_info ul li dl dd .period{font-size:13px;padding-left:20px;} } @media only screen and (max-width:340px) { .recruit_info ul li dl dt {width:60px;} .recruit_info ul li dl dd {width: calc(100% - 60px);} } @media only screen and (max-width:320px) { .recruit_info ul li dl dt {padding-left:0;width:50px;} .recruit_info ul li dl dd {padding-right:0;width: calc(100% - 50px);} } /*** job/recruitment_process (채용 프로세스) ***/ /* 일반형 */ .recruitment_process .recruit_cont dl dt{font-size:30px; border-bottom:0; padding-bottom:0;} .recruitment_process .recruit_cont dl dd ol li{display:flex; align-items:center; justify-content:center;} .recruitment_process .recruit_cont + .process_list{margin-top:80px;} .recruitment_process .process_list{border-top: 2px solid #333;} .recruitment_process .process_list + .process_noti{margin-top:26px;} .recruitment_process .process_list > li{border-bottom:1px solid #ddd;padding: 34px 0 30px;} .recruitment_process .process_list > li dl{display:flex;} .recruitment_process .process_list > li dl dt{width:310px;font-size:24px;font-weight:bold;color:#333;padding: 0 30px;box-sizing: border-box;letter-spacing: -0.04em;} .recruitment_process .process_list > li dl dt span{display:block;font-size:16px;font-weight:400;color:#777;margin-top: 10px;letter-spacing: -0.03em;} .recruitment_process .process_list > li dl dd{width:calc(100% - 310px); padding-right:30px; box-sizing:border-box;} .recruitment_process .process_list > li dl dd p{font-size:18px;color: #666;line-height:166%;font-weight: 400;letter-spacing: -0.03em;} .recruitment_process .process_list > li dl dd p + p{margin-top: 26px;} .recruitment_process .process_list > li dl dd p span{display:block;font-size:16px;font-weight:400;color:#888;margin-top: 17px;} .recruitment_process .process_list > li dl dd p em{display:block; font-size:17px; line-height:164%; font-weight:inherit; color:#888;} .recruitment_process .process_list > li dl dd p strong{display:block;font-size:20px;font-weight:600;color:#333;margin-bottom: 6px;} .recruitment_process .process_noti{font-size:16px; font-weight:400; color:#777; letter-spacing: -0.03em; line-height:145%} .recruitment_process .process_tab_cont{} .recruitment_process .process_tab_cont > ul{} .recruitment_process .process_tab_cont > ul > li{height:0; overflow:hidden;} .recruitment_process .process_tab_cont > ul > li.on{height:auto; overflow:visible;} @media only screen and (max-width:1300px){ .recruitment_process .recruit_cont dl dt{font-size:28px;} .recruitment_process .process_list > li dl dt{font-size:23px;} .recruitment_process .process_list > li dl dt span{font-size:15px;} .recruitment_process .process_list > li dl dd p{font-size:17px;} .recruitment_process .process_list > li dl dd p em{font-size:16px;} .recruitment_process .process_list > li dl dd p span{font-size:15px;} .recruitment_process .process_list > li dl dd p strong{font-size:19px;} } @media only screen and (max-width:1217px){ .recruitment_process .recruit_cont dl dt{font-size:26px;} .recruitment_process .process_list > li dl dd p br{display:none;} } @media only screen and (max-width:1023px){ .recruitment_process .recruit_cont dl dt{font-size:24px;} .recruitment_process .process_list > li dl dt{font-size:22px; width:250px; padding:0 20px;} .recruitment_process .process_list > li dl dt span{font-size:14px;} .recruitment_process .process_list > li dl dd{width:calc(100% - 250px); padding-right:20px;} .recruitment_process .process_list > li dl dd p{font-size:16px;} .recruitment_process .process_list > li dl dd p em{font-size:15px;} .recruitment_process .process_list > li dl dd p span{font-size:14px;} .recruitment_process .process_list > li dl dd p strong{font-size:18px;} .recruitment_process .process_list + .process_noti{margin-top:25px;} .recruitment_process .process_noti{font-size:15px;} } @media only screen and (max-width:860px){ .recruitment_process .recruit_cont dl dt{font-size:22px;} .recruitment_process .process_list > li dl dt{font-size:21px; width:200px;} .recruitment_process .process_list > li dl dt span{font-size:14px;} .recruitment_process .process_list > li dl dd{width:calc(100% - 200px);} .recruitment_process .process_list > li dl dd p{font-size:15px;} .recruitment_process .process_list > li dl dd p + p{margin-top:20px;} .recruitment_process .process_list > li dl dd p em{font-size:14px;} .recruitment_process .process_list > li dl dd p span{font-size:13px; margin-top:12px;} .recruitment_process .process_list > li dl dd p strong{font-size:17px;} .recruitment_process .process_list + .process_noti{margin-top:20px;} .recruitment_process .process_noti{font-size:14px;} } @media only screen and (max-width:640px){ .recruitment_process .recruit_cont dl dt{font-size:20px;} .recruitment_process .process_list > li dl dt{font-size:20px; width:180px; padding:0 15px;} .recruitment_process .process_list > li dl dd{width:calc(100% - 180px); padding-right:15px;} .recruitment_process .process_list > li dl dd p + p{margin-top:15px;} .recruitment_process .process_list + .process_noti{margin-top:15px;} } @media only screen and (max-width:479px){ .recruitment_process .recruit_cont dl dt{font-size:19px;} .recruitment_process .process_list > li{padding:20px 15px;} .recruitment_process .process_list > li dl{display:block;} .recruitment_process .process_list > li dl dt, .recruitment_process .process_list > li dl dd{width:100%; padding:0;} .recruitment_process .process_list > li dl dt + dd{margin-top:10px;} .recruitment_process .process_list > li dl dt{font-size:19px;} .recruitment_process .process_list > li dl dt span{display:inline-block; margin-left:4px;} .recruitment_process .process_list > li dl dd p{font-size:14px;} .recruitment_process .process_list > li dl dd p + p{margin-top:12px;} .recruitment_process .process_list > li dl dd p em{font-size:13px;} .recruitment_process .process_list > li dl dd p strong{font-size:16px;} .recruitment_process .process_list + .process_noti{margin-top:15px;} .recruitment_process .process_noti{font-size:13px;} } @media only screen and (max-width:360px){ .recruitment_process .recruit_cont dl dt{font-size:18px;} .recruitment_process .process_list > li dl dt{font-size:18px;} .recruitment_process .process_list > li dl dd p{font-size:13px;} .recruitment_process .process_list > li dl dd p span{font-size:12px;} .recruitment_process .process_list > li dl dd p strong{font-size:15px;} .recruitment_process .process_list + .process_noti{margin-top:10px;} .recruitment_process .process_noti{font-size:12px;} } /*** layout/board/list_faq (FAQ) ***/ /* 일반형 */ .faq_box{width:100%;} .faq_box .faq_list{width:100%;box-sizing:border-box;border-top:2px solid #000;} .faq_box .faq_list li{position: relative;box-sizing:border-box;padding:23px 25px 20px;border-bottom:1px solid #ddd;font-size:0;} .faq_box .faq_list li.faq_q{cursor:pointer;} .faq_box .faq_list li.faq_q:before{content:"";position: absolute;top:36px;right:20px;width:10px;height:10px;border:1px solid #000;border-width:2px 2px 0 0;transform:rotate(135deg);} .faq_box .faq_list li span{display:inline-flex;justify-content: center;align-items: center;vertical-align: middle;box-sizing:border-box;width:45px;height:45px;background:#fff;border:1px solid #0076bd;border-radius:100%;font-size:20px;color:#0076bd;font-weight:600;letter-spacing:-0.8px;font-family: 'Poppins', 'Pretendard', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;} .faq_box .faq_list li .title{display: inline-block;vertical-align: middle;font-size:20px;color:#333;font-weight:500;line-height: 1.45;letter-spacing:-0.8px;margin-left:30px;max-width:89%;word-break:keep-all;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;} .faq_box .faq_list li.faq_q.on:before{border-color:#0076bd;transform:rotate(-45deg);top:44px;} .faq_box .faq_list li.faq_q.on span{background:#0076bd;color:#fff;} /*답변*/ .faq_box .faq_list li.faq_a{background:#f5f5f5;border-bottom:1px solid #ddd;padding:25px 25px 40px;display: none;} .faq_box .faq_list li.faq_a span{border:none;} .faq_box .faq_list li.faq_a div{width:calc(100% - 45px);box-sizing:border-box;padding-left:30px;display: inline-block;vertical-align: top;margin-top:5px;} .faq_box .faq_list li.faq_a div p{font-size:20px;color:#333;font-weight:400;letter-spacing:-0.8px;line-height:1.7;word-break:keep-all;} @media only screen and (max-width:1300px){ .faq_box .faq_list li span, .faq_box .faq_list li .title, .faq_box .faq_list li.faq_a div p {font-size: 19px;} } @media only screen and (max-width:1200px) { .faq_box .faq_list li .title {margin-left: 25px;} .faq_box .faq_list li.faq_a div {padding-left: 25px;} } @media only screen and (max-width:1024px) { .faq_box .faq_list li span, .faq_box .faq_list li .title, .faq_box .faq_list li.faq_a div p {font-size: 18px;} .faq_box .faq_list li {padding: 18px 20px 15px;} .faq_box .faq_list li.faq_q:before {top: 29px; width: 9px; height: 9px;} .faq_box .faq_list li.faq_q.on:before {top: 36px;} .faq_box .faq_list li span {width: 40px; height: 40px;} .faq_box .faq_list li .title {max-width: 86%; margin-left: 20px;} .faq_box .faq_list li.faq_a {padding: 20px 20px 35px;} .faq_box .faq_list li.faq_a div {padding-left: 20px;} } @media only screen and (max-width:860px) { .faq_box .faq_list li span, .faq_box .faq_list li .title, .faq_box .faq_list li.faq_a div p {font-size: 17px;} .faq_box .faq_list li span {width: 36px; height: 36px;} .faq_box .faq_list li .title {margin-left: 15px;} .faq_box .faq_list li.faq_a div {margin-top: 3px; padding-left: 15px;} } @media only screen and (max-width:640px){ .faq_box .faq_list li span, .faq_box .faq_list li .title, .faq_box .faq_list li.faq_a div p {font-size: 16px;} .faq_box .faq_list li {padding: 16px 15px 13px;} .faq_box .faq_list li.faq_q:before {top: 24px; width: 7px; height: 7px;} .faq_box .faq_list li.faq_q.on:before {top: 30px;} .faq_box .faq_list li span {width: 32px; height: 32px;} .faq_box .faq_list li .title {max-width: 80%;} .faq_box .faq_list li.faq_a {padding: 18px 15px 33px;} } @media only screen and (max-width:480px){ .faq_box .faq_list li span, .faq_box .faq_list li .title, .faq_box .faq_list li.faq_a div p {font-size: 15px;} .faq_box .faq_list li {padding:14px 10px 13px;} .faq_box .faq_list li.faq_q:before {right: 10px;top:21px;} .faq_box .faq_list li.faq_q.on:before {top: 23px;} .faq_box .faq_list li .title {max-width: 78%;margin-left: 10px;} .faq_box .faq_list li.faq_a {padding: 18px 12px 33px;} .faq_box .faq_list li.faq_a div {margin-top: 5px; padding-left: 10px;} .faq_box .faq_list li span {width:28px; height: 28px;} } @media only screen and (max-width:350px){ .faq_box .faq_list li {padding:12px 8px 12px;} .faq_box .faq_list li .title {margin-left:8px;} .faq_box .faq_list li.faq_a div {padding-left:8px;} .faq_box .faq_list li.faq_q:before {right:8px;top:19px;} .faq_box .faq_list li.faq_q.on:before {top: 21px;} .faq_box .faq_list li span, .faq_box .faq_list li .title, .faq_box .faq_list li.faq_a div p {font-size: 14px;} } @media only screen and (max-width:350px){ .faq_box .faq_list li span, .faq_box .faq_list li .title, .faq_box .faq_list li.faq_a div p {font-size: 13px;} } /*** job/insert_application_data & job/talent_pool (입사지원서 & 인재풀) ***/ /* 일반형 */ .sub_agree_box{background:#fff;} .sub_agree_box + .sub_agree_box{margin-top:60px;} .sub_join .bbs_write_title small{font-size:24px;} .recruit_cont.job{margin-top:-29px; margin-bottom:80px;} .recruit_cont.job dl, .recruit_cont.job dl dd{margin-top:0;} .recruit_cont.job dl dd ol{justify-content:center;} .recruit_cont.job dl dd ol li{width:180px;} .recruit_cont.job dl dd ol li:last-child{border:1px solid #ddd;} .recruit_cont.job dl dd ol li.on{border:2px solid #0076bd;} .sub_agree_box.application_wrap {max-width:1300px;margin-right:auto;margin-left:auto;} .app_table_list{} .app_table_list > li{} .app_table_list > li + li{border-bottom:1px solid #ddd;margin-bottom:20px;} .app_table_box .app_table_list > li:nth-child(n+2) .app_table_title, .app_table_box .app_table_list > li:nth-child(n+2) .app_table_title.hd{border-top: none;padding-top: 0;margin-top: 0;} .app_table_box .app_table_list > li:nth-child(n+2) .bbs_write_title small{display:none;} .app_table_box .app_table_list > li:nth-child(n+2) .app_table_title .edu_sel_box .del_edu_btn{display:inline-block;} .app_table_box{margin-top:10px;} .app_table_box + .app_table_box{margin-top:50px;} .app_table_box.hd{margin-top:0;} .app_input_table {border-top:1px #aaa solid;width:100%;display:table;table-layout:fixed;border-collapse:collapse; margin-top:19px;}/* table요소 */ .app_input_table + .app_input_table{border-top:1px dashed #aaa;} .app_table_box.hd .app_input_table{border-top:2px solid #333; margin-top:25px;} .sub_agree_box .recruit_cont dl{margin-top:16px;} .sub_agree_box .recruit_cont dl dd{margin-top:0;} .app_table_box .app_table_title{display:flex;justify-content: space-between; align-items:center;} .app_table_box .app_table_title.hd{border-top: 2px solid #333; padding-top: 30px; margin-top:27px;} .app_table_box .app_table_title .edu_sel_box{} .app_table_box .app_table_title .edu_sel_box span{font-size:16px; font-weight:400; color:#777; margin-right:10px; vertical-align:middle;} .app_table_box .app_table_title .edu_sel_box span.block{margin-right:0;} .app_table_box .app_table_title .edu_sel_box select{height:40px; line-height:40px; width:111px; margin-right:6px; font-size:16px;} .app_table_box .app_table_title .edu_sel_box .add_edu_btn, .app_table_box .app_table_title .edu_sel_box .del_edu_btn{width:40px; height:40px; font-size:0; border:1px solid #999;background:#999 url('../images/skin/board_more_icon_on.png') no-repeat center; background-size:16px auto; box-sizing:border-box;} .app_table_box .app_table_title .edu_sel_box .del_edu_btn{position:relative; background:#fff; border-color:#999; margin-left:6px; /*display:none;*/} .app_table_box .app_table_title .edu_sel_box .del_edu_btn:before{position:absolute; content:''; width:16px; height:2px; background:#999; top:50%; left:50%; transform:translate(-50%, -50%);} .app_input_table input, .app_input_table select, .app_input_table span, .app_input_table p, .app_input_table button {box-sizing:border-box; font-size:inherit;} .app_input_table .rowspan {display:flex;flex-wrap: wrap;} .app_input_table .rowspan + ul{padding-top:0;} .app_input_table ul {display:flex;flex-wrap: wrap;justify-content: space-between;padding: 15px 0;align-items: center;}/* tbody요소 */ .app_input_table ul.nowrap {flex-wrap:nowrap;} .app_input_table .rowspan3_row3 {width:50%;} .app_input_table .rowspan3_row3 > ul{padding-bottom:0;} .app_input_table .rowspan3_row3 > ul > li{width:100%;} .app_input_table .rowspan3_row3 + .rowspan3_row3 ul{height: calc(100% - 15px);} .app_input_table ul > li {width:50%;border-bottom: 0;height: 100%;}/* tr요소 */ .app_input_table ul > li + li {} .app_input_table ul > li.colspan3 {width:100%;} .app_input_table ul > li.rowspan3 {width:100%;} .app_input_table ul > li > dl {/* display:table-row; */display: flex;align-items: center; width:100%; height: 100%;} .app_input_table ul > li > dl > dt, .app_input_table ul > li > dl > dd {font-size: 18px;color:#555;padding: 15px 18px;margin:0;vertical-align:middle;text-align:left;border-collapse:collapse;box-sizing:border-box;display:table-cell;letter-spacing: -0.7px;} .app_input_table ul > li > dl > dt {width: 220px;font-size: 20px;font-weight:500;color:#333;background: #fff;}/* th요소 */ .app_input_table ul > li > dl > dt label, .app_input_table ul > li > dl > dt span {font-size:inherit;font-weight:inherit;display:inline-block;vertical-align:middle;} .app_input_table ul > li > dl > dt label {} .app_input_table ul > li > dl > dt .require_dot {color:#f00;padding-left:3px;} .app_input_table ul > li > dl > dt .require_dot:before {content:"*";font-size: 16px;font-weight:inherit;color: #0076bd;display:inline-block;vertical-align:middle;margin-top: -14px;margin-left: 1px;} .app_input_table ul > li > dl > dd {width:calc(100% - 220px);}/* td요소 */ .app_input_table ul > li > dl > dd label, .app_input_table ul > li > dl > dd span {font-size:inherit;font-weight:inherit;display:inline-block;vertical-align:middle;} .app_input_table ul > li > dl > dd select, .app_input_table ul > li > dl > dd input[type="text"], .app_input_table ul > li > dl > dd input[type="password"], .app_input_table ul > li > dl > dd input[type="number"].bk{width:100%;max-width:301px;} #wrap .app_input_table ul > li > dl > dd .picker_bg {cursor:pointer; background:#fff url('../images/sub/datepicker_icon.png') no-repeat 20px 50%; padding-left:44px; padding-right:9px; color:#999; font-size:16px;} #wrap .app_input_table ul > li.colspan3 > dl > dd .picker_bg, #wrap .app_input_table ul > li.rowspan3 > dl > dd .picker_bg {width:100%;max-width:301px;padding-left:50px;padding-right:18px;} input.disno, select.disno {display:none; } .app_input_table ul > li > dl > dd.profile_upload_box{display:flex;align-items: flex-end; height:100%;} .app_input_table ul > li > dl > dd.profile_upload_box .profile_img{display:inline-flex;align-items: center;justify-content:center;font-size:0;width:181px;height: 100%;border:1px solid #ddd;box-sizing:border-box; max-height:210px; overflow:hidden;position: relative;} .app_input_table ul > li > dl > dd.profile_upload_box .profile_img img{width:auto;height: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);max-width: initial;} .app_input_table ul > li > dl > dd.profile_upload_box .file_btn_wrap{position:relative; margin-left: 10px;} .app_input_table ul > li > dl > dd.profile_upload_box .profile_file{font-size:18px;display: inline-flex;height: 50px;align-items: center;justify-content: center;border: 1px solid #333;padding: 0 21px;box-sizing: border-box;} .app_input_table ul > li > dl > dd.profile_upload_box .fake-files{position:absolute; top:0; left:0; width:100%; height:100%; font-size:0; opacity:0; cursor:pointer;} .app_input_table ul > li > dl > dd.profile_upload_box .profile_upload, .app_input_table ul > li > dl > dd.profile_upload_box .profile_del{display:none;} .app_input_table ul > li > dl > dd.birth{} .app_input_table ul > li > dl > dd.birth input[type="number"], .app_input_table ul > li > dl > dd.birth select{width:85px; margin-left:12px;} .app_input_table ul > li > dl > dd.birth input[type="number"].year{width:100px; margin-left:0; margin-right:0;} .app_input_table ul > li > dl > dd input[type="text"].addr{width:416px;} .app_input_table ul > li > dl > dd input[type="text"].block, .app_input_table ul > li > dl > dd textarea{width:100%;max-width:911px;} .app_input_table ul > li > dl > dd.up_to_picker{} .app_input_table ul > li > dl > dd.up_to_picker .picker_bg{width: calc(50% - 12px);max-width:138px;} .app_input_table ul > li.colspan3 > dl > dd.up_to_picker .picker_bg, .app_input_table ul > li.rowspan3 > dl > dd.up_to_picker .picker_bg {width: calc(50% - 19px);max-width:131px;} .app_input_table ul > li > dl > dd.up_to_picker > span{display:inline-flex; width:24px; justify-content:center;} .app_input_table ul > li.colspan3 > dl > dd.up_to_picker > span, .app_input_table ul > li.rowspan3 > dl > dd.up_to_picker > span {width:38px;} .app_input_table ul > li > dl > dd.grades{} .app_input_table ul > li > dl > dd.grades span, .app_input_table ul > li > dl > dd.grades em{font-size:inherit; font-weight:inherit; color:inherit; display:inline-block;} .app_input_table ul > li > dl > dd.grades span{width:30px; text-align:center;} .app_input_table ul > li > dl > dd.grades em{width:38px; text-align:right;} .app_input_table ul > li > dl > dd.grades input[type="text"], .app_input_table ul > li > dl > dd.grades input[type="number"], .app_input_table ul > li > dl > dd.grades select{width:115px; margin-right:0;} .app_input_table ul > li > dl > dd.treatise_wrap, .app_input_table ul > li > dl > dd.patent_wrap{display:flex; align-items:center; flex-wrap:wrap; margin-top:-10px;} #wrap .app_input_table ul > li > dl > dd .treatise_upload, #wrap .app_input_table ul > li > dl > dd .patent_upload{margin-right:10px; margin-top:10px; width:80px; overflow:hidden; text-overflow:ellipsis; white-space:normal;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;word-break: break-all;} #wrap .app_input_table ul > li > dl > dd .treatise_upload.on, #wrap .app_input_table ul > li > dl > dd .patent_upload.on{width:100%;max-width: calc(100% - 212px);}/*display:block; margin-right:0; */ .app_input_table ul > li > dl > dd .treatise_file, .app_input_table ul > li > dl > dd .patent_file{margin-top:10px; margin-left:0; width:213px !important;} .app_input_table ul > li > dl > dd .treatise_file.on, .app_input_table ul > li > dl > dd .patent_file.on{width:155px !important;padding-left:9px;padding-right:9px;} .app_input_table ul > li > dl > dd #treatise_file, .app_input_table ul > li > dl > dd #patent_file, .fake-files {display:none;} .app_input_table ul > li > dl > dd textarea{ height:121px; resize:none; font-size:inherit; font-weight:inherit; color:inherit; padding:12px 15px;} .app_input_table ul > li > dl > dd input[type="number"]{width:116px; margin-right:10px;} .app_input_table ul > li > dl > dd input[type="number"] + strong{font-size:inherit; font-weight:inherit; color:inherit;} .app_input_table ul > li > dl > dd input[type="number"] + strong span{font-size:16px; color:#777;} .app_input_table ul > li > dl > dd.language_etc input, .app_input_table ul > li > dl > dd.language_test input{margin-top:10px;} .app_input_table ul > li.veterans_info, .app_input_table ul > li.obstacle_info, .app_input_table ul > li.domestic_address, .app_input_table ul > li.abroad_address {display:none;} .app_input_table ul > li.veterans_info.on, .app_input_table ul > li.obstacle_info.on, .app_input_table ul > li.domestic_address.on, .app_input_table ul > li.abroad_address.on {display:inline-flex;} .app_input2_table {} .app_input2_table input, .app_input2_table select, .app_input2_table span, .app_input2_table p, .app_input2_table button {box-sizing:border-box;} .app_input2_table .app_thead {width:100%;margin:0;font-size: 18px;font-weight:500;color:#333;background:#f5f5f5;display:table;table-layout:fixed;border-collapse:collapse;border-top: 1px solid #333;margin-top: 21px;} .app_input2_table .app_thead ul {display:table-row;font-size:inherit;font-weight:inherit;} .app_input2_table .app_thead li {padding: 23px 15px;margin:0;font-size:inherit;font-weight:inherit;border-collapse:collapse;box-sizing:border-box;display:table-cell;text-align:center;vertical-align:middle;} .app_input2_table .app_thead li + li {} .app_input2_table .app_thead li label {font-size:inherit;font-weight:inherit;display:inline-block;vertical-align:middle;} .app_input2_table .app_tbody {width:100%;font-size:18px;color:#333;display:table;table-layout:fixed;border-collapse:collapse; margin:10px 0 60px;} .app_input2_table .app_tbody > li {display:table-row;font-size:inherit;font-weight:inherit;} .app_input2_table .app_tbody > li + li {} .app_input2_table .app_tbody > li > dl {padding: 10px 20px;margin:0;font-size:inherit;font-weight:inherit;border-collapse:collapse;box-sizing:border-box;display:table-cell;text-align:center;vertical-align:middle;} .app_input2_table .app_tbody > li > dl > dt, .app_input2_table .app_tbody > li > dl > dd {margin:0;font-size:inherit;font-weight:inherit;box-sizing:border-box;text-align:center;vertical-align:middle;} .app_input2_table .app_tbody > li > dl > dt {display:none;} .app_input2_table .app_tbody > li > dl > dt label {} .app_input2_table .app_tbody > li > dl > dd {} .app_input2_table .app_tbody > li > dl > dd input[type="text"] {width:100%; font-size:inherit;} .app_input2_table .app_tbody > li > dl > dd input[type="number"] {width: calc(100% / 2 - 39px);text-align:right; font-size:inherit;} .app_input2_table .app_tbody > li > dl > dd input[type="number"] + span{display:inline-block; width:36px; font-size:inherit; font-weight:inherit; color:inherit; text-align:center;} .app_input2_table .app_tbody > li > dl > dd select{width:100%; font-size:inherit;} .app_input2_table .app_thead li:nth-of-type(1), .app_input2_table .app_tbody > li > dl:nth-of-type(1) {width: 60%;} .app_input2_table .app_thead li:nth-of-type(2), .app_input2_table .app_tbody > li > dl:nth-of-type(2) {width: 13%;} .app_input2_table .app_thead li:nth-of-type(3), .app_input2_table .app_tbody > li > dl:nth-of-type(3) {width: 27%;} .textarea_box textarea {font-size:13px;color:#555;width:100%;} .textarea_box textarea::placeholder {font-size:13px;color:#999;} .textarea_box textarea::-webkit-input-placeholder {font-size:13px;color:#999;} .textarea_box textarea:-ms-input-placeholder {font-size:13px;color:#999;} .application_wrap .btn_center{border-top:1px solid #ddd; padding-top:60px;} .sub_agree_box .agree_cont .self_introduction .cont_title label strong{font-size:16px;vertical-align:top;} .self_introduction{padding:0 20px;} .self_introduction > ul{width:100%; padding-bottom:50px;} .self_introduction > ul > li{} .self_introduction > ul > li + li{margin-top:38px;} .self_introduction .textarea_box{margin-top:18px; width:100%;} .self_introduction .textarea_box textarea{width:100%; font-size:16px; color:#333; padding:12px 15px; resize:none; height:150px; box-sizing:border-box;} .self_introduction .textarea_box textarea::placeholder{font-size:inherit; font-weight:inherit; } #wrap .university_layer{position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; width:1300px; max-height:80%; z-index:99; padding:30px; box-sizing:border-box; overflow-y:scroll; opacity:0; pointer-events:none; transition:all 0.4s;} #wrap .university_layer.on{opacity:1; pointer-events:inherit;} #wrap .university_layer::-webkit-scrollbar { width: 5px;} #wrap .university_layer::-webkit-scrollbar-thumb {background-color: #aaa; border-radius: 5px;} #wrap .university_layer::-webkit-scrollbar-track {border-radius: 5px;background:#ddd;} #wrap .university_layer .close_btn{position:absolute;top:30px;right:30px;width: 30px;height: 30px;z-index: 2; cursor:pointer;} #wrap .university_layer .close_btn span{width:100%;height:1px;background:#000;top: 50%;left: 50%;transform:translate(-50%, -50%) rotate(45deg);position: absolute;} #wrap .university_layer .close_btn span + span{transform:translate(-50%, -50%) rotate(-45deg);} #wrap .university_layer .cont{padding:60px 80px;} #wrap .university_layer .board_search{margin-top:0;} #wrap .university_layer table.bbs_list{} #wrap .university_layer table.bbs_list th{font-size:17px; padding-top:20px; padding-bottom:20px;} #wrap .university_layer table.bbs_list td{padding-top:15px; padding-bottom:15px; font-size:16px;} #wrap .university_layer table.bbs_list td .btn{height:40px; line-height:40px; font-size:15px; min-width:auto;} .layer_dim{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:97; opacity:0; pointer-events:none; transition:all 0.4s;} .layer_dim.on{opacity:1; pointer-events:inherit;} @media only screen and (max-width:1350px) { .app_input_table ul > li > dl > dd input[type="text"].block, .app_input_table ul > li > dl > dd textarea{width:95.8%;max-width:911px;} } @media only screen and (max-width:1330px) { #wrap .university_layer{width:calc(100% - 30px);} #wrap .university_layer .cont{padding:50px 0;} } @media only screen and (max-width:1300px) { .app_input_table ul > li > dl > dt, .app_input_table ul > li > dl > dd {padding-left:15px;padding-right:15px;} .app_input_table ul > li > dl > dt{width:150px; font-size:18px;} .app_input_table ul > li > dl > dt .require_dot:before {font-size:inherit;} .app_input_table ul > li > dl > dd{width:calc(100% - 150px);font-size:17px;} .app_input_table ul > li > dl > dd select, .app_input_table ul > li > dl > dd input[type="text"], .app_input_table ul > li > dl > dd input[type="password"], .app_input_table ul > li > dl > dd input[type="number"].bk, .app_input_table ul > li > dl > dd input[type="text"].block, .app_input_table ul > li > dl > dd textarea{width:100%;max-width:100%;} #wrap .app_input_table ul > li.colspan3 > dl > dd .picker_bg, #wrap .app_input_table ul > li.rowspan3 > dl > dd .picker_bg, .app_input_table ul > li.colspan3 > dl > dd select {width:100%;max-width:calc(50% - 90px);} .app_input_table ul > li > dl > dd.up_to_picker .picker_bg {max-width:calc(50% - 12px);} .app_input_table ul > li > dl > dd.profile_upload_box .profile_img{} .app_input_table ul > li > dl > dd.profile_upload_box .file_btn_wrap{width:calc(100% - 170px);} .app_input_table ul > li > dl > dd.profile_upload_box .profile_file{font-size:16px; width:100%; padding:0 10px;} .app_input_table ul > li > dl > dd.birth input[type="number"] {margin-right:0;} .app_input_table ul > li > dl > dd.birth input[type="number"], .app_input_table ul > li > dl > dd.birth select{width:29%;} .app_input_table ul > li > dl > dd.birth input[type="number"].year {width: calc(42% - 32px);} .app_input_table ul > li > dl > dd input[type="text"]#zip{width: calc(100% - 114px);max-width: calc(50% - 203px);} .app_input_table ul > li > dl > dd input[type="number"] + strong span{font-size:15px;} .app_input_table ul > li > dl > dd.grades input[type="text"], .app_input_table ul > li > dl > dd.grades input[type="number"], .app_input_table ul > li > dl > dd.grades select{width:calc(100% / 2 - 38px);} .app_input_table ul > li > dl > dd input#dZipcode{width:auto;} #wrap .app_input_table ul > li > dl > dd .treatise_upload.on, #wrap .app_input_table ul > li > dl > dd .patent_upload.on{max-width: calc(100% - 165px);} .recruit_cont.job{margin-bottom:70px;} } @media only screen and (max-width:1200px) { .sub_agree_box {padding:54px 30px;} .sub_agree_box .all_agree {padding-bottom:30px;} .sub_agree_box .sub_agree {margin-bottom:54px;} .application_wrap .btn_center {padding-top:54px;} .app_input_table ul {padding-top:15px;padding-bottom:20px;} .app_input_table ul > li > dl > dt, .app_input_table ul > li > dl > dd {padding-top:10px;padding-bottom:10px;} .app_input_table ul > li > dl > dd input[type="text"].addr{max-width: calc(50% - 91px);} .app_input_table ul > li > dl > dd input[type="text"]#zip{width: calc(100% - 105px);max-width: calc(50% - 196px);} .app_input2_table .app_thead li:nth-of-type(1), .app_input2_table .app_tbody > li > dl:nth-of-type(1){width:50%;} .app_input2_table .app_thead li:nth-of-type(2), .app_input2_table .app_tbody > li > dl:nth-of-type(2){width:20%;} .app_input2_table .app_thead li:nth-of-type(3), .app_input2_table .app_tbody > li > dl:nth-of-type(3){width:30%} .app_input2_table .app_thead, .app_input2_table .app_tbody{font-size:17px;} #wrap .app_input_table ul > li > dl > dd .picker_bg{font-size:15px;} .self_introduction{padding:0 15px;} .recruit_cont.job{margin-bottom:60px;} } @media only screen and (max-width:1100px) { .sub_agree_box.application_wrap {padding-left:20px;padding-right:20px;} .app_input_table ul > li > dl > dt{width:120px;padding-right:0;} .app_input_table ul > li > dl > dd{width:calc(100% - 120px);} #wrap .app_input_table ul > li.colspan3 > dl > dd .picker_bg, #wrap .app_input_table ul > li.rowspan3 > dl > dd .picker_bg, .app_input_table ul > li > dl > dd input[type="text"].addr, .app_input_table ul > li.colspan3 > dl > dd select {width:100%;max-width: calc(50% - 75px);} .app_input_table ul > li > dl > dd input[type="text"]#zip{width: calc(100% - 105px);max-width: calc(50% - 182px);} } @media only screen and (max-width:1024px) { .app_table_box .app_table_title.hd{margin-top:20px;} .app_input_table .rowspan {justify-content:space-between;} .app_input_table ul > li, .app_input_table .rowspan3_row3 {width:calc(50% - 8px);} .app_input_table ul > li > dl > dt, .app_input_table ul > li > dl > dd {padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px;} .app_input_table ul > li > dl > dt{font-size:17px; padding-left:0; padding-right:0; width:110px;} .app_input_table ul > li > dl > dd{font-size:15px; width:calc(100% - 110px);} .app_input_table ul > li > dl > dd input[type="text"].datepicker{width:100%;} .app_input_table ul > li > dl > dd.birth input[type="number"], .app_input_table ul > li > dl > dd.birth select{width:29%;} .app_input_table ul > li > dl > dd.birth input[type="number"].year {width: calc(42% - 32px);} #wrap .app_input_table ul > li.colspan3 > dl > dd .picker_bg, #wrap .app_input_table ul > li.rowspan3 > dl > dd .picker_bg, .app_input_table ul > li.colspan3 > dl > dd select {max-width: calc(50% - 73px);} .app_input_table ul > li > dl > dd input[type="text"]#zip{width: calc(100% - 105px);max-width: calc(50% - 179px);} .app_input_table ul > li > dl > dd input[type="text"].addr {max-width:100%;} .app_input_table ul > li > dl > dd.up_to_picker .picker_bg{width: calc(50% - 12px);max-width:none;} .app_input_table .rowspan3_row3 + .rowspan3_row3 ul{height:auto;} .app_input_table ul > li > dl > dd.profile_upload_box{}/*display:block;*/ .app_input_table ul > li > dl > dd.profile_upload_box .profile_img{width:160px;} .app_input_table ul > li > dl > dd.profile_upload_box .file_btn_wrap{width: calc(100% - 170px);} .app_input_table ul > li > dl > dd input[type="number"] + strong span{font-size:14px;} .app_table_box .app_table_title .edu_sel_box span, .app_table_box .app_table_title .edu_sel_box select{font-size:15px;} .sub_join .bbs_tit span{position:relative; margin-top:15px;} .app_input2_table .app_thead li{padding:18px 15px;} .app_input2_table .app_tbody > li > dl{padding:10px 15px;} .app_input2_table .app_tbody > li > dl:first-child{padding-left:0;} .app_input2_table .app_tbody > li > dl:last-child{padding-right:0;} .app_input2_table .app_thead, .app_input2_table .app_tbody{font-size:16px;} #wrap .app_input_table ul > li > dl > dd.military_service .picker_bg {background-position:12px 50%;padding-left:34px;} #wrap .app_input_table ul > li > dl > dd .treatise_upload, #wrap .app_input_table ul > li > dl > dd .patent_upload{margin-right:5px;} #wrap .app_input_table ul > li > dl > dd .treatise_upload.on, #wrap .app_input_table ul > li > dl > dd .patent_upload.on{max-width: calc(100% - 150px);} .app_input_table ul > li > dl > dd .treatise_file, .app_input_table ul > li > dl > dd .patent_file{width:160px !important;} .app_input_table ul > li > dl > dd .treatise_file.on, .app_input_table ul > li > dl > dd .patent_file.on{width:140px !important;} .recruit_cont.job{margin-bottom:50px;} } @media only screen and (max-width:900px) { .app_input_table ul > li > dl > dt{font-size:15px;} .app_input_table ul > li > dl > dd{font-size:14px; } .app_input_table ul > li > dl > dd input[type="number"] + strong span{font-size:13px;} .app_table_box .app_table_title .edu_sel_box span, .app_table_box .app_table_title .edu_sel_box select{font-size:14px;} .app_input2_table .app_thead, .app_input2_table .app_tbody{font-size:15px;} .app_input2_table .app_thead li{padding:15px 15px;} #wrap .app_input_table ul > li > dl > dd.military_service .picker_bg {background-position:9px 50%;padding-left:31px;padding-right:7px;} #wrap .app_input_table ul > li > dl > dd .treatise_upload, #wrap .app_input_table ul > li > dl > dd .patent_upload{margin-right:5px; margin-top:10px; width:80px;} #wrap .app_input_table ul > li > dl > dd .treatise_upload.on, #wrap .app_input_table ul > li > dl > dd .patent_upload.on{width:100%;max-width: calc(100% - 131px);} .app_input_table ul > li > dl > dd .treatise_file, .app_input_table ul > li > dl > dd .patent_file{margin-top:10px; margin-left:0; width:160px !important;} .app_input_table ul > li > dl > dd .treatise_file.on, .app_input_table ul > li > dl > dd .patent_file.on{width:126px !important;padding-left:5px;padding-right:5px;} } @media only screen and (max-width:860px) { .sub_agree_box {padding:46px 15px;} .sub_agree_box.application_wrap {padding-top:32px;padding-left:15px;padding-right:15px;} .sub_agree_box .all_agree {padding-bottom:30px;} .sub_agree_box .agree_cont + .agree_cont {margin-top:24px;} .sub_agree_box .sub_agree {margin-bottom:37px;} .application_wrap .btn_center {padding-top:46px;} .sub_agree_box .agree_box textarea {padding:18px 15px;} .recruit_cont.job dl dd ol{justify-content:space-between;} .recruit_cont.job dl dd ol li{width:100%;} .app_input_table ul > li > dl > dd.profile_upload_box .profile_file{height:42px; font-size:15px;} .application_wrap .btn_center{padding-top:40px;} .app_input_table ul{display:block;} .app_input_table ul > li {width:100%;} .app_input_table ul > li > dl > dt {width:100px;} .app_input_table ul > li > dl > dd {width:calc(100% - 100px);} .app_input_table ul > li > dl > dd select, .app_input_table ul > li > dl > dd input[type="text"], .app_input_table ul > li > dl > dd input[type="password"], .app_input_table ul > li > dl > dd input[type="number"].bk, .app_input_table ul > li > dl > dd input[type="text"].datepicker, .app_input_table ul > li > dl > dd input[type="number"], .app_input_table ul > li > dl > dd.up_to_picker .picker_bg{width:70%;} .app_input_table ul > li > dl > dd input[type="number"] {width:116px;} #wrap .app_input_table ul > li.colspan3 > dl > dd .picker_bg, #wrap .app_input_table ul > li.rowspan3 > dl > dd .picker_bg, .app_input_table ul > li.colspan3 > dl > dd select {max-width:70%;} #wrap .app_input_table ul > li > dl > dd.up_to_picker .picker_bg, #wrap .app_input_table ul > li.colspan3 > dl > dd.up_to_picker .picker_bg, #wrap .app_input_table ul > li.rowspan3 > dl > dd.up_to_picker .picker_bg {width:calc(35% - 12px);background-position:15px 50%; padding-left:45px} .app_input_table ul > li > dl > dd input[type="text"]#zip {width:130px;max-width:130px;} .app_input_table ul > li > dl > dd.birth input[type="number"].year {width: calc(32% - 29px);max-width:77px;} .app_input_table ul > li > dl > dd.birth input[type="number"], .app_input_table ul > li > dl > dd.birth select{width:19%;max-width:65px;} .app_input_table ul > li > dl > dd.grades input[type="text"], .app_input_table ul > li > dl > dd.grades input[type="number"], .app_input_table ul > li > dl > dd.grades select {width: calc(70% / 2 - 38px);max-width:99px;} #wrap .app_input_table ul > li > dl > dd .treatise_upload, #wrap .app_input_table ul > li > dl > dd .patent_upload{margin-right:5px; margin-top:10px; width:80px;} #wrap .app_input_table ul > li > dl > dd .treatise_upload.on, #wrap .app_input_table ul > li > dl > dd .patent_upload.on{width:70%;max-width: calc(70% - 131px);} .app_input_table ul > li > dl > dd .treatise_file, .app_input_table ul > li > dl > dd .patent_file{margin-top:10px; margin-left:0; width:160px !important;} .app_input_table ul > li > dl > dd .treatise_file.on, .app_input_table ul > li > dl > dd .patent_file.on{width:126px !important;padding-left:5px;padding-right:5px;} .app_input_table .rowspan {justify-content:flex-start;} .app_input_table .rowspan3_row3 {width:356px;} .app_input_table .rowspan3_row3 + .rowspan3_row3 {margin-left:10px;width:calc(100% - 366px);} .app_input_table .rowspan3_row3 ul {display:flex;} .app_input_table .rowspan3_row3 + .rowspan3_row3 ul > li > dl > dt {width:46px;} .app_input_table .rowspan3_row3 + .rowspan3_row3 ul > li > dl > dd {width: calc(100% - 46px);} .app_input_table .rowspan3_row3 ul > li > dl > dd select, .app_input_table .rowspan3_row3 ul > li > dl > dd input[type="text"], .app_input_table .rowspan3_row3 ul > li > dl > dd input[type="password"], .app_input_table .rowspan3_row3 ul > li > dl > dd input[type="text"].datepicker, .app_input_table .rowspan3_row3 ul > li > dl > dd input[type="number"], .app_input_table .rowspan3_row3 ul > li > dl > dd.up_to_picker .picker_bg{width:100%;} .app_input_table ul > li > dl > dd.profile_upload_box .profile_img {width:140px;} .app_input_table ul > li > dl > dd.profile_upload_box .profile_file {width:100%;max-width:86px;} .app_input2_table .app_thead li:nth-of-type(1), .app_input2_table .app_tbody > li > dl:nth-of-type(1){width:43%;} .app_input2_table .app_thead li:nth-of-type(2), .app_input2_table .app_tbody > li > dl:nth-of-type(2){width:21%;} .app_input2_table .app_thead li:nth-of-type(3), .app_input2_table .app_tbody > li > dl:nth-of-type(3){width:36%} .app_input2_table .app_tbody{margin-bottom:30px;} .self_introduction > ul{padding-bottom:30px;} .self_introduction .textarea_box{margin-top:10px;} .self_introduction .textarea_box textarea{font-size:15px;} .recruit_cont.job{margin-bottom:46px;} } @media only screen and (max-width:800px) { .app_table_box.hd .app_input_table, .app_input_table, .app_table_box .app_table_title.hd{margin-top:10px;} .app_input_table ul > li > dl > dt, .app_input_table ul > li > dl > dd{padding-top:7.5px; padding-bottom:7.5px;} .app_input_table ul > li > dl > dd{padding-right:0;} .app_input_table .rowspan3_row3 + .rowspan3_row3 ul{padding:0; height:auto;} } @media only screen and (max-width:767px) { .sub_join .bbs_tit span {margin-top:12px;} .app_input_table ul > li > dl > dd input[type="text"].addr{width:100%;} .app_input_table ul > li > dl > dd.profile_upload_box .profile_file{height:40px; font-size:14px;} .app_table_box .app_table_title{display:block;} .app_table_box .app_table_title.one_line{display:flex;} .app_table_box .app_table_title.one_line .edu_sel_box{margin-top:0;} .app_table_box .app_table_title .edu_sel_box{display:flex; align-items:center; margin-top:5px;} .app_table_box .app_table_title .edu_sel_box span{width:calc(100% - 50px);} .app_table_box .app_table_title .edu_sel_box span.block{width:100%;} .app_table_box .app_table_title .edu_sel_box.select span{width:calc(100% - 210px)} .app_table_box .app_table_title .edu_sel_box select{margin-left:auto;} .app_input_table .rowspan {display:block;} .app_input_table .rowspan3_row3 {width:100%;} .app_input_table .rowspan3_row3 + .rowspan3_row3 {margin-left:0;width:100%;} .app_input_table .rowspan3_row3 ul {display:block;} .app_input_table .rowspan3_row3 + .rowspan3_row3 ul > li > dl > dt {width:100px;} .app_input_table .rowspan3_row3 + .rowspan3_row3 ul > li > dl > dd {width: calc(100% - 100px);} .app_input_table .rowspan3_row3 ul > li > dl > dd select, .app_input_table .rowspan3_row3 ul > li > dl > dd input[type="text"], .app_input_table .rowspan3_row3 ul > li > dl > dd input[type="password"], .app_input_table .rowspan3_row3 ul > li > dl > dd input[type="text"].datepicker, .app_input_table .rowspan3_row3 ul > li > dl > dd input[type="number"], .app_input_table .rowspan3_row3 ul > li > dl > dd.up_to_picker .picker_bg{width:70%;} .app_input_table ul > li > dl > dd.profile_upload_box .profile_img {width:110px;} .app_input_table ul > li > dl > dd.profile_upload_box .profile_file {width:100%;max-width:86px;} .app_input_table ul > li > dl > dd.birth input[type="number"].year {width: calc(32% - 29px);max-width: calc(32% - 29px);} .app_input_table ul > li > dl > dd.birth input[type="number"], .app_input_table ul > li > dl > dd.birth select{width:19%;max-width:19%;} .app_input_table ul > li > dl > dd input[type="text"]#zip {width:103px;} .app_input_table ul > li > dl > dd.grades input[type="text"] {max-width:65px;} .app_input2_table .app_thead, .app_input2_table .app_tbody{font-size:14px;} .app_input2_table .app_tbody > li > dl {padding-left:8px;padding-right:8px;} .app_input2_table .app_tbody > li > dl > dd input[type="number"]{width:calc(100% / 2 - 27px)} .app_input2_table .app_tbody > li > dl > dd input[type="number"] + span{width:25px;} #wrap .university_layer table.bbs_list col:first-child{width:auto;} #wrap .university_layer table.bbs_list col:last-child{width:100px;} #wrap .university_layer table.bbs_list td .btn{margin-top:0;} #wrap .university_layer table.bbs_list th{font-size:16px; padding-top:15px; padding-bottom:15px;} #wrap .university_layer table.bbs_list td{font-size:15px; padding-top:10px; padding-bottom:10px;} #wrap .university_layer table.bbs_list td .btn{font-size:14px; height:38px; line-height:38px;} } @media only screen and (max-width:640px) { .recruit_cont.job{margin-top:-24px; margin-bottom:50px;} .app_input_table ul > li > dl > dt{font-size:14px; width:100px;} .app_input_table ul > li > dl > dd{font-size:14px; width:calc(100% - 100px);} .app_input2_table .app_tbody > li > dl > dt, .app_input2_table .app_tbody > li > dl > dd {font-size:14px;} .app_input_table ul > li > dl > dd select, .app_input_table ul > li > dl > dd input[type="text"], .app_input_table ul > li > dl > dd input[type="password"], .app_input_table ul > li > dl > dd input[type="number"].bk, .app_input_table ul > li > dl > dd input[type="text"].datepicker{width:100%;} .app_input_table .rowspan3_row3 ul > li > dl > dd select, .app_input_table .rowspan3_row3 ul > li > dl > dd input[type="text"], .app_input_table .rowspan3_row3 ul > li > dl > dd input[type="password"], .app_input_table .rowspan3_row3 ul > li > dl > dd input[type="text"].datepicker, .app_input_table .rowspan3_row3 ul > li > dl > dd input[type="number"], .app_input_table .rowspan3_row3 ul > li > dl > dd.up_to_picker .picker_bg {width:100%;} #wrap .app_input_table ul > li.colspan3 > dl > dd .picker_bg, #wrap .app_input_table ul > li.rowspan3 > dl > dd .picker_bg, .app_input_table ul > li.colspan3 > dl > dd select {max-width:100%;} #wrap .app_input_table ul > li > dl > dd.up_to_picker .picker_bg, #wrap .app_input_table ul > li.colspan3 > dl > dd.up_to_picker .picker_bg, #wrap .app_input_table ul > li.rowspan3 > dl > dd.up_to_picker .picker_bg {width: calc(50% - 12px);} #wrap .app_input_table ul > li > dl > dd .picker_bg, #wrap .app_input_table ul > li.colspan3 > dl > dd .picker_bg, #wrap .app_input_table ul > li.rowspan3 > dl > dd .picker_bg{font-size:inherit;} .app_input_table ul > li > dl > dd textarea{padding:5px 9px;} .app_input_table ul > li > dl > dd.birth input[type="number"].year {width:calc(42% - 32px);max-width:calc(42% - 32px);} .app_input_table ul > li > dl > dd.birth input[type="number"], .app_input_table ul > li > dl > dd.birth select {width:29%;max-width:29%;} .app_input_table ul > li > dl > dd input[type="text"]#zip{width:calc(100% - 77px);} .app_input_table ul > li > dl > dd.birth input[type="number"], .app_input_table ul > li > dl > dd.birth select{margin-left:6px;} .app_input_table ul > li > dl > dd.up_to_picker .picker_bg{width:calc(100% / 2 - 12px);} #wrap .app_input_table ul > li > dl > dd .picker_bg{background-position:10px 50%; padding-left:40px} #wrap .app_input_table ul > li > dl > dd .treatise_upload.on, #wrap .app_input_table ul > li > dl > dd .patent_upload.on {width:100%;max-width:calc(100% - 131px);} .app_table_box .app_table_title.hd{padding-top:20px;} .app_table_box .app_table_title .edu_sel_box span, .app_table_box .app_table_title .edu_sel_box select{font-size:13px;} .app_input_table ul > li > dl > dd.grades em{width:30px;} .application_wrap .btn_center{padding-top:30px;} /*주소*/ .app_input_table ul > li.domestic_address > dl > dd #dZipcode{width:calc(100% - 77px);} .app_input2_table .app_thead{display:none;} .app_input2_table .app_tbody{display:block; border-top:1px solid #333; margin-top:20px; padding-top:5px;} .app_input2_table .app_tbody > li{display:block;} .app_input2_table .app_tbody > li + li{border-top:1px solid #ddd; margin-top:15px; padding-top:15px;} .app_input2_table .app_tbody > li > dl:nth-child(1){display:block; width:100%; } .app_input2_table .app_tbody > li > dl{padding-left:0; padding-right:0;} .app_input2_table .app_tbody > li > dl:nth-of-type(2){width:40%; padding-right:15px;} .app_input2_table .app_tbody > li > dl:nth-of-type(3){width:60%;} .app_input2_table .app_tbody > li > dl > dt{display:block; text-align:left; margin-bottom:10px;} .self_introduction{padding:0;} .self_introduction > ul > li + li{margin-top:30px;} .self_introduction .textarea_box textarea, .app_input_table ul > li > dl > dd textarea{font-size:14px; padding:10px 15px;} /*회원가입*/ #wrap .sub_join #userid{width:calc(100% - 113px);} #wrap .sub_join #verifyCode{width:calc(100% - 78px);} #wrap #captcha{width:calc(100% - 191px);margin:0 10px 0 0;;} #wrap table.bbs_write tr td #captcha_box img{width:180px !important;margin:0;} #wrap .join_captcha .btn_reset{width:100% !important;} table.bbs_write tr td span.btn_sm#refreshCode{} #wrap table.bbs_write col:nth-child(1){width:21% !important;} #wrap table.bbs_write tr td span.btn_sm#refreshCode{width:100% !important;margin:10px 0 0 0;} } @media only screen and (max-width:500px) { .sub_agree_box {padding:30px 15px;} .sub_agree_box .all_agree {padding-bottom:22px;margin-bottom:28px;} .sub_agree_box .agree_cont + .agree_cont {margin-top:18px;} .sub_agree_box .sub_agree {margin-bottom:27px;} .application_wrap .btn_center {padding-top:36px;} .sub_agree_box .agree_cont .view_cont:before {top:2px;right:2px;} .recruit_cont.job{margin-top:0;margin-bottom:40px;} .sub_join .bbs_write_title small{font-size:18px;} .app_input_table ul > li > dl > dd input[type="number"] + strong span {font-size:12px;} .app_input_table ul > li > dl > dt, .app_input_table .rowspan3_row3 + .rowspan3_row3 ul > li > dl > dt {width:80px;} .app_input_table ul > li > dl > dd, .app_input_table .rowspan3_row3 + .rowspan3_row3 ul > li > dl > dd {width:calc(100% - 80px);} .app_input_table ul > li > dl > dd input[type="text"]#zip {max-width:calc(100% - 77px);} .app_input_table ul > li > dl > dd.grades input[type="text"], .app_input_table ul > li > dl > dd.grades input[type="number"], .app_input_table ul > li > dl > dd.grades select {width:calc(100% / 2 - 38px);max-width:calc(100% / 2 - 38px);} } @media only screen and (max-width:479px) { .sub_agree_box.application_wrap {padding-left:10px;padding-right:10px;} .app_input_table ul > li > dl > dt, .app_input_table .rowspan3_row3 + .rowspan3_row3 ul > li > dl > dt {width:75px;} .app_input_table ul > li > dl > dd, .app_input_table .rowspan3_row3 + .rowspan3_row3 ul > li > dl > dd {width:calc(100% - 75px);} .app_input_table ul > li > dl > dd .treatise_file, .app_input_table ul > li > dl > dd .patent_file {width: calc(100% - 85px) !important;} .app_input_table ul > li > dl > dt .require_dot {padding-left:0;} .app_input_table ul > li > dl > dt .require_dot:before {margin-left:0;font-size:13px;} .app_input_table ul > li > dl > dd input[type="number"] {width:calc(100% - 138px);} #wrap .app_input_table ul > li > dl > dd .picker_bg, #wrap .app_input_table ul > li.colspan3 > dl > dd .picker_bg, #wrap .app_input_table ul > li.rowspan3 > dl > dd .picker_bg {padding-left:30px;padding-right:9px;background-size:16px auto;} #wrap .app_input_table ul > li > dl > dd.up_to_picker .picker_bg, #wrap .app_input_table ul > li.colspan3 > dl > dd.up_to_picker .picker_bg, #wrap .app_input_table ul > li.rowspan3 > dl > dd.up_to_picker .picker_bg {width: calc(50% - 12px);background-position:9px 50%;padding-left:28px;padding-right:7px;background-size:16px auto;} .app_input_table ul > li > dl > dd.profile_upload_box .file_btn_wrap {width: calc(100% - 120px);} .app_input_table ul > li > dl > dd.profile_upload_box .profile_file {width:100%;max-width:100%;} .app_input_table ul > li > dl > dd.birth input[type="number"].year {width: calc(42% - 18px);max-width: calc(42% - 18px);} .app_input_table ul > li > dl > dd.grades input[type="text"], .app_input_table ul > li > dl > dd.grades input[type="number"], .app_input_table ul > li > dl > dd.grades select {width: calc(100% / 2 - 33px);max-width: calc(100% / 2 - 33px);} #wrap .app_input_table ul > li > dl > dd .treatise_upload.on, #wrap .app_input_table ul > li > dl > dd .patent_upload.on {max-width:100%;display:block;} .app_input_table ul > li > dl > dd .treatise_file.on, .app_input_table ul > li > dl > dd .patent_file.on {width:calc(100% - 85px) !important;} #wrap table.bbs_write col:nth-child(1){width:28% !important;} #wrap #captcha{width:100%;margin:0;float:none;margin-top:10px;} #wrap table.bbs_write tr td #captcha_box{width:100%;} #wrap table.bbs_write tr td #captcha_box img{width:100% !important;} #wrap .university_layer .board_search input.input_text{width:calc(100% - 40px);} #wrap .university_layer table.bbs_list col:last-child{width:80px;} #wrap .university_layer table.bbs_list th{font-size:14px; padding-top:12px; padding-bottom:12px;} #wrap .university_layer table.bbs_list td{font-size:14px;} #wrap .university_layer table.bbs_list td .btn{font-size:13px; height:35px; line-height:33px;} } @media only screen and (max-width:375px) { .sub_join .bbs_write_title {font-size:20px;} .sub_join .bbs_tit span {margin-top:7px;} .sub_agree_box .all_agree label, .sub_agree_box .agree_cont .cont_title label {font-size:14px;} .self_introduction .textarea_box textarea, .app_input_table ul > li > dl > dd textarea{font-size:13px;} .app_input_table ul > li > dl > dt, .app_input_table ul > li > dl > dd {padding-top:5px;padding-bottom:5px;} } @media only screen and (max-width:365px) { .app_input_table ul > li > dl > dt, .app_input_table ul > li > dl > dd{font-size:13px;} .app_input2_table .app_tbody > li > dl > dt, .app_input2_table .app_tbody > li > dl > dd {font-size:13px;} .app_input_table ul > li > dl > dd.profile_upload_box .profile_file {font-size:13px;} .app_table_box .app_table_title .edu_sel_box.select span {width: calc(100% - 160px);} .app_table_box .app_table_title .edu_sel_box select {width:100px;} .app_input_table ul > li.domestic_address > dl > dd #dZipcode{width:calc(100% - 73px);} #wrap .app_input_table ul > li > dl > dd .picker_bg, #wrap .app_input_table ul > li.colspan3 > dl > dd .picker_bg, #wrap .app_input_table ul > li.rowspan3 > dl > dd .picker_bg {background-size:14px auto;} #wrap .app_input_table ul > li > dl > dd.up_to_picker .picker_bg, #wrap .app_input_table ul > li.colspan3 > dl > dd.up_to_picker .picker_bg, #wrap .app_input_table ul > li.rowspan3 > dl > dd.up_to_picker .picker_bg {background-position:9px 50%;padding-left:25px;padding-right:5px;background-size:14px auto;} #wrap table.bbs_write col:nth-child(1){width:30% !important;} #wrap .sub_join #userid{width:calc(100% - 89px);} #wrap .sub_join #verifyCode{width:calc(100% - 60px);} } @media only screen and (max-width:355px) { #wrap .app_input_table ul > li > dl > dd.up_to_picker .picker_bg, #wrap .app_input_table ul > li.colspan3 > dl > dd.up_to_picker .picker_bg, #wrap .app_input_table ul > li.rowspan3 > dl > dd.up_to_picker .picker_bg {width: calc(100% - 24px);background-position:9px 50%;padding-left:30px;padding-right:9px;} #wrap .app_input_table ul > li > dl > dd.up_to_picker .picker_bg:first-child, #wrap .app_input_table ul > li.colspan3 > dl > dd.up_to_picker .picker_bg:first-child, #wrap .app_input_table ul > li.rowspan3 > dl > dd.up_to_picker .picker_bg:first-child {display:block;margin-bottom:5px;} .app_input_table ul > li > dl > dd.profile_upload_box .profile_file {padding-left:5px;padding-right:5px;} } @media only screen and (max-width:320px) { .sub_agree_box {padding:24px 10px;} .sub_agree_box.application_wrap {padding-left:5px;padding-right:5px;} .sub_agree_box .all_agree {padding-bottom:16px;margin-bottom:20px;} .sub_agree_box .agree_cont + .agree_cont {margin-top:14px;} .sub_agree_box .sub_agree {margin-bottom:19px;} .application_wrap .btn_center {padding-top:36px;} .sub_agree_box .agree_box textarea {padding:10px;} .sub_agree_box .agree_cont .view_cont:before {top:2px;right:2px;} .sub_join .bbs_write_title {font-size:18px;} .sub_join .bbs_tit span {margin-top:7px;} .sub_agree_box .all_agree label, .sub_agree_box .agree_cont .cont_title label {font-size:13px;} .self_introduction .textarea_box textarea, .app_input_table ul > li > dl > dd textarea{font-size:12px; padding:3px 5px;} .app_input_table ul > li.domestic_address > dl > dd #dZipcode{width:calc(100% - 61px);} .sub_join .bbs_write_title small{font-size:17px;} .sub_join .bbs_tit span {font-size:11px;} .recruit_cont dl dd > p, .recruit_cont dl dd ul li {font-size:13px;} .app_table_box .app_table_title .edu_sel_box select {width:90px;} .app_table_box .app_table_title .edu_sel_box .add_edu_btn, .app_table_box .app_table_title .edu_sel_box .del_edu_btn {width:35px;height:35px;} .app_input_table ul > li > dl > dt, .app_input_table .rowspan3_row3 + .rowspan3_row3 ul > li > dl > dt{font-size:12px;width:65px;} .app_input2_table .app_tbody > li > dl > dt, .app_input2_table .app_tbody > li > dl > dd {font-size:12px;} .app_input_table ul > li > dl > dd, .app_input_table .rowspan3_row3 + .rowspan3_row3 ul > li > dl > dd{width: calc(100% - 65px);} .app_table_box .app_table_title .edu_sel_box span, .app_table_box .app_table_title .edu_sel_box select, .app_input_table ul > li > dl > dd, .app_input_table ul > li > dl > dd.profile_upload_box .profile_file {font-size:12px;} #wrap .app_input_table ul > li > dl > dd .picker_bg, #wrap .app_input_table ul > li.colspan3 > dl > dd .picker_bg, #wrap .app_input_table ul > li.rowspan3 > dl > dd .picker_bg {padding-left:24px;padding-right:5px;background-position:5px 50%;} #wrap .app_input_table ul > li > dl > dd.up_to_picker .picker_bg, #wrap .app_input_table ul > li.colspan3 > dl > dd.up_to_picker .picker_bg, #wrap .app_input_table ul > li.rowspan3 > dl > dd.up_to_picker .picker_bg {background-position:5px 50%;padding-left:24px;padding-right:5px;} .app_input_table ul > li > dl > dd.profile_upload_box .profile_img {width:100px;} .app_input_table ul > li > dl > dd.profile_upload_box .file_btn_wrap {width: calc(100% - 105px);} .app_input_table ul > li > dl > dd.profile_upload_box .profile_file {height:35px;line-height:33px;} #wrap .app_input_table ul > li > dl > dd .treatise_upload, #wrap .app_input_table ul > li > dl > dd .patent_upload {width:50px;} .app_input_table ul > li > dl > dd .treatise_file, .app_input_table ul > li > dl > dd .patent_file {width:calc(100% - 56px) !important;} .app_input_table ul > li > dl > dd .treatise_file.on, .app_input_table ul > li > dl > dd .patent_file.on {width:calc(100% - 56px) !important;} .app_input_table ul > li > dl > dd input[type="number"] {width:calc(100% - 100px);} /*.app_input_table ul > li > dl, .app_input_table ul > li > dl > dt, .app_input_table ul > li > dl > dd{display:block;} .app_input_table ul > li > dl > dt{width:100%;} .app_input_table ul > li > dl > dd{width:100%; padding-left:0; padding-top:0;}*/ /*.app_input_table ul > li > dl > dd.treatise_wrap, .app_input_table ul > li > dl > dd.patent_wrap{display:block;} #wrap .app_input_table ul > li > dl > dd .treatise_upload, #wrap .app_input_table ul > li > dl > dd .patent_upload{display:block; max-width:35%;} .app_input_table ul > li > dl > dd .treatise_file, .app_input_table ul > li > dl > dd .patent_file{width:35% !important; padding:0 10px;} .app_input_table ul > li > dl > dd .treatise_file.on, .app_input_table ul > li > dl > dd .patent_file.on{width:35% !important;}*/ /*#wrap .app_input_table ul > li > dl > dd .treatise_upload, #wrap .app_input_table ul > li > dl > dd .patent_upload{width:100%;} .app_input_table ul > li > dl > dd .treatise_file, .app_input_table ul > li > dl > dd .patent_file, .app_input_table ul > li > dl > dd .treatise_file.on, .app_input_table ul > li > dl > dd .patent_file.on{width:100% !important;}*/ } /*─────────────────────────────────────────────────────────── 인스토리 ───────────────────────────────────────────────────────────*/ /*해외영업*/ .sub_story{} .sub_story .video_box{width: 100%;box-sizing: border-box;padding-bottom: 57.1%;height: 0;position: relative;} .sub_story .video_box:before{position:absolute;content:'';width: 5.62vw;height: 22.24vw;background:url('../images/skin/outline_logo.png') no-repeat center;background-size: 100% auto;top:0;right:100%;} .sub_story .video_box iframe{width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} .sub_story .recruitment_process{margin-top:80px;} @media only screen and (max-width:1430px){ .sub_story .video_box:before{display:none;} } @media only screen and (max-width:1023px){ .sub_story .recruitment_process{margin-top:50px;} } @media only screen and (max-width:640px){ .sub_story .recruitment_process{margin-top:30px;} } @media only screen and (max-width:479px){ .sub_story .recruitment_process{margin-top:15px;} } ol.process_step_list .nav-y { cursor: pointer; }