@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 아래에 작성 ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── font common ───────────────────────────────────────────────────────────*/ /** PC 일반 **/ body {}/*letter-spacing:-0.2px;*/ div, dd, li, p, span, td, dt, h1, h2, h3, h4, h5, h6, strong, b, em, th {} b, dt, strong, em, th, h1, h2, h3, h4, h5, h6 {font-weight:700;}/* Noto Sans KR은 500 사용 */ input, button, textarea, select {} /* 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 사용 */ /*** common ***/ /*** TABLE | 서브페이지 전체 사용 ( board / member / layout ) ***/ /*** BOARD ***/ /*** GOODS ***/ /*** MEMBER ***/ /*** SERVICE ***/ /*─────────────────────────────────────────────────────────── ** navigation, button 관련 css 영역 ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── navigation common ───────────────────────────────────────────────────────────*/ /** PC 일반 **/ .nav_wrap {} .nav_wrap .nav_box {padding:7.0% 0 3% 0;border:0;margin:0;position:relative;z-index:1;} .nav_wrap .nav_box:after {clear:both;content:"";display:block;} .nav_wrap .nav_box h2 {font-size:40px;line-height:56px;padding:0;margin:0;text-align:center;color:#333;font-weight:600;z-index:1;} .nav_wrap .nav_box p {font-size:17px;line-height:22px;padding:1% 0 0 0;color:#666;font-weight:400;text-align:center;} .nav_wrap .nav_box ul {line-height:18px;top:20%;position:absolute;left:0;font-size:0;padding:0;z-index:5;display:block;} .nav_wrap .nav_box ul li {line-height:18px;height:18px;font-size:8px;text-align:left;vertical-align:top;padding:0;color:#aaa;display:inline-block;} .nav_wrap .nav_box ul li + li {padding-left:5px;} .nav_wrap .nav_box ul li span, .nav_wrap .nav_box ul li strong, .nav_wrap .nav_box ul li > a {line-height:18px;height:18px;padding:0 4px 0px 0;font-size:12px;display:inline-block;width:auto;color:#666;vertical-align:top;margin:0;box-sizing:border-box;} .nav_wrap .nav_box ul li a.home {padding-left:0px;font-size:12px;color:#666666;} .nav_wrap .nav_box ul li a.home:before {width:11px;height:11px;margin:0 5px 2px 0;content:"";display:inline-block;background:url("../images/common/sub_locate_home.png") no-repeat left center #333333;background-size:auto 13px;vertical-align:middle;} .nav_wrap .nav_box ul li:last-child a, .nav_wrap .nav_box ul li:last-child span, .nav_wrap .nav_box ul li:last-child strong {color:#444;font-weight:700;padding-right:0;} .nav_wrap .nav_box ul li .navi_select {min-width:150px;border: 1px solid #999;cursor: pointer;margin-top: -3px;position:relative;box-sizing: border-box;} .nav_wrap .nav_box ul li .navi_select .navi_tit {padding: 2px 10px;line-height: 18px;height: auto;display: block;} .nav_wrap .nav_box ul li .navi_select .navi_tit:after {content:"";display:inline-block;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid #999;position:absolute;right: 10px;top: 9px;transition:all .2s;} .nav_wrap .nav_box ul li .navi_select ul {display:none;position:absolute;left: -1px;top: 100%;width:150px;background:#fff;padding:6px 0 6px 0;border: 1px solid #888;box-sizing: border-box;} .nav_wrap .nav_box ul li .navi_select ul li {display: block;line-height: 1;height: auto;font-size: 12px;padding: 0;} .nav_wrap .nav_box ul li .navi_select ul li a {display:block;padding:5px 10px;font-size: 12px;line-height: 1;height: auto;transition:all .2s;} .nav_wrap .nav_box ul li .navi_select ul li a:hover {background:#999;color:#fff;} .nav_wrap .nav_box ul li .navi_select:hover .navi_tit:after {transform: rotate(180deg);} .nav_wrap .nav_box ul li .navi_select:hover ul {display:block;} .nav_wrap .nav_box.dis_flex{display:flex;} .nav_wrap .nav_box.dis_flex h2{width: 305px;text-align: left;} .nav_wrap .nav_box.dis_flex .sub_title{width: calc(100% - 305px);text-align:left;padding-top: 2px;} .nav_wrap .nav_box.dis_flex .sub_title h3 small{font-size:94.4%;} .nav_wrap .nav_box.dis_flex .sub_title h3 + p{margin-top: 17px;text-align:left;padding-top:0;} @media only screen and (max-width:1217px) { .nav_wrap .nav_box.dis_flex h2{width:250px;} .nav_wrap .nav_box.dis_flex .sub_title{width:calc(100% - 250px);} } @media only screen and (max-width:1024px) { .nav_wrap .nav_box {padding:4.0% 0 3.8% 0;} .nav_wrap .nav_box h2 {font-size:36px;line-height:42px;} .nav_wrap .nav_box p, .nav_wrap .nav_box ul {display:none;} .nav_wrap .nav_box.dis_flex{display:block;} .nav_wrap .nav_box.dis_flex h2{width:100%;} .nav_wrap .nav_box.dis_flex .sub_title{width:100%; padding-top:30px;} } @media only screen and (max-width:860px) { .nav_wrap .nav_box {padding:4.8% 0 3.2% 0;} .nav_wrap .nav_box h2 {font-size:28px;line-height:32px;} } @media only screen and (max-width:767px) { .nav_wrap .nav_box.dis_flex .sub_title p br{display:none;} } @media only screen and (max-width:640px) { .nav_wrap .nav_box {padding:6.2% 0 6% 0;} .nav_wrap .nav_box h2 {font-size:24px;line-height:28px;} .nav_wrap .nav_box.dis_flex .sub_title{padding-top:25px;} .nav_wrap .nav_box.dis_flex .sub_title h3 + p{margin-top:10px;} } @media only screen and (max-width:479px) { .nav_wrap .nav_box {padding:0 0 0;margin-left:-12px;margin-right:-12px;width: calc(100% + 24px);} .nav_wrap .nav_box h2 {padding:8.8% 0 4.8% 0;margin-left: -12px;margin-right: -12px;font-size:20px;line-height:28px;} .nav_wrap .nav_box.dis_flex .sub_title{padding-top:20px;} } /*─────────────────────────────────────────────────────────── button common ───────────────────────────────────────────────────────────*/ /** PC 일반 **/ /* 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;background:#fff url(../images/common/icon_btn_reset.gif) no-repeat 9px 50%;padding:0 10px 0 30px;color:#555;} /* 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 공통 ───────────────────────────────────────────────────────────*/ .sub_visual {height:420px;display:flex;align-items:center;background-position:center;background-size:cover;} .sub_visual .visual_title {text-align:center;} .sub_visual .visual_title h2 {font-size:var(--title-80);font-weight:700;color:var(--point-white);} .sub_business .sub_visual .visual_title h2{font-size:var(--title-50);letter-spacing:-0.03em;} .sub_business .sub_visual .visual_title h2 span{font-size:var(--title-30);letter-spacing:-0.03em;color:inherit;font-weight:500;display: block;padding-bottom:13px;} .sub_visual .visual_title p{font-size:var(--title-20);font-weight:300;color:var(--point-white);font-family:var(--font-type02);margin-top:17px;} .subsec {padding:110px 0 120px;} .sub_title {text-align:center;padding-bottom:50px;} .sub_title h3 {font-size:var(--title-40);font-weight:600;color:var(--black-color01);line-height:1.25;} .sub_title h3 strong {font-size:inherit;font-weight:700;color:inherit;} .sub_title h3 b {font-size:inherit;font-weight:inherit;color:var(--point-color01);} .sub_title p {font-size:var(--title-18);line-height:1.44;font-weight:400;color:var(--black-color03);padding-top:16px;} .img_list {} .img_list li {display:flex;align-items:center;} .img_list li + li {margin-top:100px;} .img_list li .img {width:600px;border-radius:20px;overflow:hidden;animation-timing-function: ease-out;animation-duration: 300ms;transition:ease-out 0.3s;} .img_list li .img img {width:100%;transform:scale(1);animation-timing-function: ease-out;animation-duration: 300ms;transition:ease-out 0.3s;} .img_list li .txt_wrap {width:calc(100% - 600px);padding-left:80px;box-sizing:border-box;} .img_list li .txt_wrap strong {display:block;font-size:var(--title-40);line-height:1.25;font-weight:700;color:var(--black-color00);} .img_list li .txt_wrap p {font-size:var(--title-16);line-height:1.5;font-weight:400;color:var(--black-color03);padding-top:20px;} .img_list li:nth-of-type(even) {flex-direction: row-reverse;} .img_list li:nth-of-type(even) .txt_wrap {padding-left:60px;padding-right:80px;} .icon_list {display:flex;flex-wrap:wrap;} .icon_list li {width:calc(50% - 20px);border:2px solid var(--border-color01);border-radius:20px;box-sizing:border-box;background:var(--point-white);padding:40px 60px 83px;position:relative;transition:0.2s;} .icon_list li:before {content:'';display:block;position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);box-sizing:border-box;top:-2px;left:-2px;border: 4px solid transparent;background: linear-gradient(90deg, #0076BE 0.63%, #00446D 100%) border-box;-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;border-radius:17px;opacity:0;transition:0.2s;} .icon_list li:nth-of-type(2n) {margin-left:40px;} .icon_list li:nth-of-type(n+3) {margin-top:40px;} .icon_list li .txt_wrap {} .icon_list li .txt_wrap strong {display:block;font-size:var(--title-32);font-weight:600;color:var(--black-color01);letter-spacing:var(--letter-03);} .icon_list li .txt_wrap .circle {padding:14px 0 20px;font-size:0;} .icon_list li .txt_wrap .circle span {width:5px;height:5px;border-radius:100%;background:var(--border-color01);display:inline-block;} .icon_list li .txt_wrap .circle span + span {margin-left:10px;} .icon_list li .txt_wrap p {font-size:var(--title-18);line-height:1.66;font-weight:400;color:var(--black-color05);letter-spacing:var(--letter-04);} .icon_list li .icon {bottom:50px;right:50px;position:absolute;} .icon_list li .icon img {} .icon_list li .btn_more {position:absolute;bottom:50px;right:50px;height:50px;width:55px;height:55px;z-index:3;overflow:hidden;opacity:0;transition:0.2s;} .icon_list li .btn_more:before {width:150px;height:150px;content:'';background:linear-gradient(90deg, #0076BE 0%, #00446D 100%);transition:0.3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} .icon_list li .btn_more a {position:relative;width:100%;height:100%;display:block;} .icon_list li .btn_more a:before, .icon_list li .btn_more a:after {content:'';display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--point-white);} .icon_list li .btn_more a:before {width:15px;height:2px;} .icon_list li .btn_more a:after {width:2px;height:15px;} @media only screen and (min-width:1024px){ .img_list li .img:hover {box-shadow:4px 8px 8px 0px rgba(0, 0, 0, 0.25);} .img_list li .img:hover img {transform:scale(1.05);} .icon_list li .btn_more:hover:before{transform:translate(-50%, -50%) rotate(180deg);} .icon_list li:hover {border-color:transparent;} .icon_list li:hover:before {opacity:1;} .icon_list li:hover .btn_more {display:block;opacity:1;} } @media only screen and (max-width:1280px) { .img_list li .img {width:46%;} .img_list li .txt_wrap {width:54%;} .icon_list li {width:calc(50% - 15px);} .icon_list li:nth-of-type(2n) {margin-left:30px;} .icon_list li:nth-of-type(n+3) {margin-top:30px;} } @media only screen and (max-width:1024px) { .sub_visual {height:380px;} .subsec {padding:100px 0 110px;} .img_list li + li {margin-top:90px;} .img_list li .txt_wrap {padding-left:60px;} .img_list li:nth-of-type(even) .txt_wrap {padding-left:40px;padding-right:60px;} .icon_list li {width:calc(50% - 10px);padding:40px 40px 83px;} .icon_list li:nth-of-type(2n) {margin-left:20px;} .icon_list li:nth-of-type(n+3) {margin-top:20px;} } @media only screen and (max-width:1023px) { .icon_list li:before {display:none;} } @media only screen and (max-width:1000px) { .icon_list li {padding:40px;display: inline-flex;flex-direction:column;justify-content:space-between;} .icon_list li .icon {position:static;padding-top:14px;text-align:right;display:block;} } @media only screen and (max-width:860px) { .sub_visual {height:350px;} .subsec {padding:80px 0 80px;} .img_list li + li {margin-top:80px;} .img_list li .txt_wrap {padding-left:40px;} .img_list li:nth-of-type(even) .txt_wrap {padding-left:0;padding-right:40px;} .icon_list li .icon img {width:45px;} } @media only screen and (max-width:768px) { .sub_visual {height:300px;} .subsec {padding:60px 0 70px;} .img_list li {display:block;} .img_list li + li {margin-top:60px;} .img_list li .img, .img_list li .txt_wrap {width:100%;} .img_list li .txt_wrap {padding:0;padding-top:30px;} } @media only screen and (max-width:640px) { .sub_visual {height:260px;} .subsec {padding:60px 0;} .sub_title {padding-bottom:25px;} .img_list li + li {margin-top:50px;} .icon_list li {padding:30px;} .icon_list li:nth-of-type(2n) {margin-left:15px;} .icon_list li:nth-of-type(n+3) {margin-top:15px;} .icon_list li .icon img {width:40px;} } @media only screen and (max-width:500px) { .sub_visual {height:210px;} .icon_list li {width:100%;} .icon_list li:nth-of-type(2n) {margin-left:0;} .icon_list li + li {margin-top:15px;} } @media only screen and (max-width:320px) { .icon_list li + li {margin-top:10px;} } /*─────────────────────────────────────────────────────────── COMPANY ───────────────────────────────────────────────────────────*/ /*** company/about (회사소개) ***/ /* PC 일반 */ .sub_about {overflow:hidden;} .sub_about .sub_title h3 {color:var(--black-color00);} .sub_about .about_intro {padding-bottom:160px;} .sub_about .about_intro .sub_title {padding-bottom:94px;} .sub_about .about_intro .intro_cont {width:1020px;font-size:0;margin:0 auto;} .sub_about .about_intro .intro_cont li {width:calc(33.333% - 40px);display:inline-block;vertical-align:top;text-align:center;} .sub_about .about_intro .intro_cont li + li {padding-left:60px;} .sub_about .about_intro .intro_cont li .icon {width:100%;height:0;padding-bottom:100%;position:relative;} .sub_about .about_intro .intro_cont li .icon:before {content:'';display:block;position:absolute;width:100%;height:100%;background:url('../images/sub/company_about_bg.png') no-repeat center;background-size:100%;} .sub_about .about_intro .intro_cont li + li .icon:after {content:'';display:block;position:absolute;width:60px;height:1.5px;background:var(--point-color05);top:50%;left:-60px;transform:translateY(-50%);} .sub_about .about_intro .intro_cont li .icon span {} .sub_about .about_intro .intro_cont li .icon span:after {content:'';display:block;position:absolute;width:calc(100% - 60px);height:calc(100% - 60px);box-shadow:4px 8px 16px 0px rgba(0, 0, 0, 0.15);border-radius:100%;top:50%;left:50%;transform:translate(-50%,-50%);} .sub_about .about_intro .intro_cont li + li .icon span:before {content:'';display:block;position:absolute;width:8px;height:8px;border-radius:100%;background:var(--point-color05);border:4px solid var(--point-white);outline:1px solid var(--point-color05);top:50%;left:-8px;transform:translateY(-50%);z-index:1;} .sub_about .about_intro .intro_cont li:nth-of-type(1) .icon:before {transform: rotate(105deg);} .sub_about .about_intro .intro_cont li:nth-of-type(2) .icon:before {transform: rotate(165deg);} .sub_about .about_intro .intro_cont li:nth-of-type(3) .icon:before {transform: rotate(-75deg);} .sub_about .about_intro .intro_cont li:nth-of-type(1) .icon span:after {background:url('../images/sub/company_about_icon01.png') no-repeat center;background-size:41.666% auto;} .sub_about .about_intro .intro_cont li:nth-of-type(2) .icon span:after {background:url('../images/sub/company_about_icon02.png') no-repeat center;background-size:41.666% auto;} .sub_about .about_intro .intro_cont li:nth-of-type(3) .icon span:after {background:url('../images/sub/company_about_icon03.png') no-repeat center;background-size:41.666% auto;} .sub_about .about_intro .intro_cont li p {font-size:var(--title-24);line-height:1;font-weight:600;color:var(--black-color01);padding-top:20px;} .sub_about .about_info {background:var(--gray-bg01);} .sub_about .about_business {position:relative;overflow:hidden;z-index:1;} .sub_about .about_business .sub_title {padding-bottom:40px;} .sub_about .about_business .sub_title h3 {font-size:var(--title-50);color:var(--point-white);} .sub_about .about_business .bg_video {position:absolute;width:100%;height:100%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1;} .sub_about .about_business .bg_video iframe {width:500vw;height:100%;left:50%;top:50%;transform:translate(-50%,-50%);position: absolute;} .sub_about .about_partner {padding:90px 0 80px;border-bottom:1px solid var(--border-color01);} .sub_about .about_partner > a{position: absolute;top:-80px;} .sub_about .about_partner .partner_cont {} .sub_about .about_partner .partner_cont ul {display:flex;flex-wrap:wrap;width:calc(100% + 20px);margin-left:-10px;} .sub_about .about_partner .partner_cont ul li {display:inline-flex;align-items:center;justify-content:center;position:relative;transition:ease-out 0.2s;margin:10px;border-radius:10px;width:calc(20% - 20px);box-sizing:border-box;padding:11px 0;border:1px solid var(--border-color01);} .sub_about .about_partner .partner_cont ul li:before {content:'';display:block;position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);border:2px solid var(--point-color01);border-radius:10px;box-sizing:border-box;transition:ease-out 0.2s;opacity:0;top:50%;left:50%;transform:translate(-50%,-50%);} .sub_about .about_partner .partner_cont ul li img {} .sub_about .about_work {padding:90px 0 0;} .sub_about .about_work .sub_title {padding-bottom:35px;} .sub_about .about_work .sub_title h3 {font-size:var(--title-50);} .sub_about .about_work .work_cont {} .sub_about .about_work .work_cont .chart {text-align:center;padding:0 25px;} .sub_about .about_work .work_cont .chart h4 {display:inline-block;margin:0 auto;position:relative;padding:60px;z-index:1;} .sub_about .about_work .work_cont .chart h4:before, .sub_about .about_work .work_cont .chart h4:after {content:'';display:block;position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%,-50%);background: linear-gradient(0deg, #0076BE 0%, #0076BE 100%), #0076BE;z-index:-1;} .sub_about .about_work .work_cont .chart h4:before {width:100%;height:100%;opacity: 0.05;} .sub_about .about_work .work_cont .chart h4:after {width:calc(100% - 60px);height:calc(100% - 60px);opacity: 0.1;} .sub_about .about_work .work_cont .chart h4 em {display:flex;align-items:center;justify-content:center;margin:0 auto;width:200px;height:200px;border-radius:100%;background:linear-gradient(180deg, #0076BE 0%, #00598F 100%);font-size:var(--title-30);font-weight:700;color:var(--point-white);} .sub_about .about_work .work_cont .chart > ul {position:relative;z-index:1;margin-top: -23px;} .sub_about .about_work .work_cont .chart > ul:before {content:'';display:block;position:absolute;width:1px;height:240px;background:var(--border-color01);left:50%;margin-left:-0.5px;top: calc(-60px - -23px);} .sub_about .about_work .work_cont .chart > ul .chart_side {display:flex;align-items:center;justify-content:center;} .sub_about .about_work .work_cont .chart > ul .chart_side ul {display:inline-block;position:relative;z-index:1;} .sub_about .about_work .work_cont .chart > ul .chart_side ul:before {content:'';display:block;position:absolute;height:1px;background:var(--border-color01);top:50%;margin-top:-0.5px;} .sub_about .about_work .work_cont .chart > ul .chart_side ul li {} .sub_about .about_work .work_cont .chart > ul .chart_side ul li + li {margin-top:10px;} .sub_about .about_work .work_cont .chart > ul .chart_side ul li h5 {display:inline-flex;align-items:center;justify-content:center;width:260px;height: 80px;font-size:var(--title-22);font-weight:500;color:var(--point-white);border-radius: 40px;background:#51657E;} .sub_about .about_work .work_cont .chart > ul .chart_side .left {padding-right:190px;} .sub_about .about_work .work_cont .chart > ul .chart_side .left:before {width:190px;right:0;} .sub_about .about_work .work_cont .chart > ul .chart_side .right {padding-left:204px;} .sub_about .about_work .work_cont .chart > ul .chart_side .right:before {width:calc(204px - 48px);left:0;} .sub_about .about_work .work_cont .chart > ul .chart_side .right:after {content:'';display:block;position:absolute;top:50%;transform:translateY(-50%);left:calc(204px - 48px);width:48px;height: calc(100% - 80px);border-radius:20px 0 0 20px;border:1px solid var(--border-color01);border-right:0;z-index:-1;} .sub_about .about_work .work_cont .chart > ul .chart_side .right h5 {background:#3287C5;} .sub_about .about_work .work_cont .chart > ul .chart_box {padding-top:32px;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step {font-size:0;position:relative;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step:before {content:'';display:block;position:absolute;top:0;left: 50%;transform:translateX(-50%);box-sizing:border-box;border-radius:20px 20px 0 0;border:1px solid var(--border-color01);border-bottom:0;width: calc(83.334% + 25px);height:100%;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li {width:calc(16.666% - 25px);display:inline-block;vertical-align:top;padding-top:60px;position:relative;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li:before {content:'';display:block;position:absolute;width:1px;height:60px;background:var(--border-color01);top:0;left:50%;margin-left:-0.5px;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li + li {margin-left:30px;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li h6 {display:flex;align-items:center;justify-content:center;width:100%;height:72px;border:1px solid var(--border-color01);border-radius:36px;box-sizing:border-box;font-size:var(--title-18);font-weight:400;color:var(--black-color01);position:relative;background: var(--point-white);} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li h6:after {content:'';display:block;position:absolute;width:5px;height:5px;background:var(--black-color10);top:-2.5px;left:50%;margin-left:-2.5px;border-radius:100%;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li:first-of-type:before, .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li:last-of-type:before {display:none;} @media only screen and (min-width:1024px){ .sub_about .about_partner .partner_cont ul li:hover {box-shadow:4px 8px 8px 0px rgba(0, 0, 0, 0.15);} .sub_about .about_partner .partner_cont ul li:hover:before {opacity:1;} } @media only screen and (max-width:1340px) { .sub_about .about_work .work_cont .chart {padding:0;} } @media only screen and (max-width:1200px) { } @media only screen and (max-width:1080px) { .sub_about .about_intro .intro_cont {width:100%;} } @media only screen and (max-width:1024px) { .sub_about .about_intro .sub_title {padding-bottom:87px;} .sub_about .about_intro {padding-bottom:140px;} .sub_about .about_partner {padding:80px 0 70px;} .sub_about .about_work {padding:80px 0 0;} .sub_about .about_work .work_cont .chart > ul .chart_side ul li h5 {width:240px;} .sub_about .about_work .work_cont .chart > ul .chart_side .left {padding-right:160px;} .sub_about .about_work .work_cont .chart > ul .chart_side .left:before {width:160px;} .sub_about .about_work .work_cont .chart > ul .chart_side .right {padding-left:160px;} .sub_about .about_work .work_cont .chart > ul .chart_side .right:before {width:calc(160px - 38px);} .sub_about .about_work .work_cont .chart > ul .chart_side .right:after {left:calc(160px - 38px);width:38px;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step:before {width:calc(83.334% + 23px);} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li {width:calc(16.666% - 20.8333px);} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li + li {margin-left:25px;} } @media only screen and (max-width:860px) { .sub_about .about_intro .sub_title {padding-bottom:57px;} .sub_about .about_intro {padding-bottom:120px;} .sub_about .about_intro .intro_cont li {width:calc(33.333% - 33.333px);} .sub_about .about_intro .intro_cont li + li {padding-left:50px;} .sub_about .about_intro .intro_cont li + li .icon:after {width:50px;height:1px;left:-50px;} .sub_about .about_intro .intro_cont li + li .icon span:before {width:6px;height:6px;left:-6px;border-width:3px;} .sub_about .about_intro .intro_cont li .icon span:after {width:calc(100% - 50px);height:calc(100% - 50px);} .sub_about .about_partner {padding:80px 0 60px;} .sub_about .about_partner .partner_cont ul {width:calc(100% + 15px);margin-left:-7.5px;} .sub_about .about_partner .partner_cont ul li {width:calc(20% - 15px);margin:7.5px;} .sub_about .about_work {padding:70px 0 0;} .sub_about .about_work .sub_title {padding-bottom:25px;} .sub_about .about_work .work_cont .chart > ul {margin-top:0;} .sub_about .about_work .work_cont .chart > ul:before {top:-50px;height:252px;} .sub_about .about_work .work_cont .chart h4 {padding:50px;} .sub_about .about_work .work_cont .chart h4:after {width:calc(100% - 50px);height:calc(100% - 50px);} .sub_about .about_work .work_cont .chart h4 em {width:160px;height:160px;} .sub_about .about_work .work_cont .chart > ul .chart_side ul li h5 {width:220px;} .sub_about .about_work .work_cont .chart > ul .chart_side .left {padding-right:140px;} .sub_about .about_work .work_cont .chart > ul .chart_side .left:before {width:140px;} .sub_about .about_work .work_cont .chart > ul .chart_side .right {padding-left:140px;} .sub_about .about_work .work_cont .chart > ul .chart_side .right:before {width:calc(140px - 38px);} .sub_about .about_work .work_cont .chart > ul .chart_side .right:after {left:calc(140px - 38px);width:38px;} } @media only screen and (max-width:768px) { .sub_about .about_intro .sub_title {padding-bottom:57px;} .sub_about .about_intro {padding-bottom:100px;} .sub_about .about_intro .intro_cont li {width:calc(33.333% - 26.666px);} .sub_about .about_intro .intro_cont li + li {padding-left:40px;} .sub_about .about_intro .intro_cont li + li .icon:after {width:40px;height:1px;left:-40px;} .sub_about .about_intro .intro_cont li .icon span:after {width:calc(100% - 40px);height:calc(100% - 40px);} .sub_about .about_partner {padding:70px 0 50px;} .sub_about .about_work {padding:60px 0 0;} .sub_about .about_work .work_cont .chart > ul:before {height:232px;} .sub_about .about_work .work_cont .chart > ul .chart_side ul li h5 {width:180px;height:70px;box-sizing:border-box;padding:0 10px;} .sub_about .about_work .work_cont .chart > ul .chart_side .left {padding-right:100px;} .sub_about .about_work .work_cont .chart > ul .chart_side .left:before {width:100px;} .sub_about .about_work .work_cont .chart > ul .chart_side .right {padding-left:100px;} .sub_about .about_work .work_cont .chart > ul .chart_side .right:before {width:calc(100px - 28px);} .sub_about .about_work .work_cont .chart > ul .chart_side .right:after {left:calc(100px - 28px);width:28px;height: calc(100% - 70px);} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step:before {width:calc(83.334% + 17px);} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li {width:calc(16.666% - 16.666px);} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li + li {margin-left:20px;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li h6 {height:62px;} } @media only screen and (max-width:640px) { .sub_about .about_intro .sub_title {padding-bottom:47px;} .sub_about .about_intro {padding-bottom:80px;} .sub_about .about_intro .intro_cont li {width:calc(33.333% - 20px);} .sub_about .about_intro .intro_cont li + li {padding-left:30px;} .sub_about .about_intro .intro_cont li + li .icon:after {width:30px;height:1px;left:-30px;} .sub_about .about_intro .intro_cont li + li .icon span:before {width:5px;height:5px;left:-5px;} .sub_about .about_intro .intro_cont li .icon span:after {width:calc(100% - 30px);height:calc(100% - 30px);box-shadow:2px 4px 8px 0px rgba(0, 0, 0, 0.15);} .sub_about .about_partner {padding:60px 0 40px;} .sub_about .about_partner .partner_cont ul li {width:calc(33.333% - 15px);} .sub_about .about_work {padding:50px 0 0;} .sub_about .about_work .sub_title {padding-bottom:20px;} .sub_about .about_work .work_cont .chart h4 {padding:40px;} .sub_about .about_work .work_cont .chart h4:after {width:calc(100% - 40px);height:calc(100% - 40px);} .sub_about .about_work .work_cont .chart h4 em {width:120px;height:120px;} .sub_about .about_work .work_cont .chart > ul:before {top:-40px;} .sub_about .about_work .work_cont .chart > ul .chart_side .left {padding-right:80px;} .sub_about .about_work .work_cont .chart > ul .chart_side .left:before {width:80px;} .sub_about .about_work .work_cont .chart > ul .chart_side .right {padding-left:80px;} .sub_about .about_work .work_cont .chart > ul .chart_side .right:before {width:calc(80px - 28px);} .sub_about .about_work .work_cont .chart > ul .chart_side .right:after {left:calc(80px - 28px);width:28px;border-radius:10px 0 0 10px;} .sub_about .about_work .work_cont .chart > ul .chart_side ul li h5 {height:60px;} .sub_about .about_work .work_cont .chart > ul .chart_side .right:after {height:calc(100% - 60px);} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step:before {height:40px;width:calc(66.666% + 12px);border-radius:10px 10px 0 0;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li {width:calc(33.333% - 10px);padding-top:40px;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li + li {margin-left:15px;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li:before {height:40px;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li:nth-of-type(3n+1) {margin-left:0;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li:last-of-type:before {display:block;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li:nth-of-type(3):before {display:none;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li h6 {height:52px;} } @media only screen and (max-width:550px) { .sub_about .about_work .work_cont .chart > ul .chart_side ul {width:50%;box-sizing:border-box;} .sub_about .about_work .work_cont .chart > ul .chart_side .left {padding-right:60px;} .sub_about .about_work .work_cont .chart > ul .chart_side .left:before {width:60px;} .sub_about .about_work .work_cont .chart > ul .chart_side .right {padding-left:60px;display: flex;flex-direction: column;align-items: flex-end;} .sub_about .about_work .work_cont .chart > ul .chart_side .right:after {left:40px;width:20px;} .sub_about .about_work .work_cont .chart > ul .chart_side .right:before {width:40px;} .sub_about .about_work .work_cont .chart > ul .chart_side ul li {width:100%;} .sub_about .about_work .work_cont .chart > ul .chart_side ul li h5 {width:100%;} } @media only screen and (max-width:500px) { .sub_about .about_business .bg_video iframe{width:1000vw;} .sub_about .about_intro .intro_cont li {width:100%;text-align:center;} .sub_about .about_intro .intro_cont li + li {padding:0;margin-top:40px;} .sub_about .about_intro .intro_cont li .icon {width:260px;padding-bottom:260px;margin:0 auto;} .sub_about .about_intro .intro_cont li .icon span:after {width:calc(100% - 60px);height:calc(100% - 60px);} .sub_about .about_intro .intro_cont li + li .icon:after, .sub_about .about_intro .intro_cont li + li .icon span:before {display:none;} .sub_about .about_partner .partner_cont ul {width:calc(100% + 10px);margin-left:-5px;} .sub_about .about_partner .partner_cont ul li {width:calc(33.333% - 10px);margin:5px;} } @media only screen and (max-width:479px) { .sub_about .about_intro .intro_cont li .icon {width:200px;padding-bottom:200px;margin:0 auto;} .sub_about .about_work {padding:45px 0 0;} .sub_about .about_work .work_cont .chart > ul .chart_side .left {padding-right:40px;} .sub_about .about_work .work_cont .chart > ul .chart_side .left:before {width:40px;} .sub_about .about_work .work_cont .chart > ul .chart_side .right {padding-left:40px;} .sub_about .about_work .work_cont .chart > ul .chart_side .right:after {left:20px;width:20px;} .sub_about .about_work .work_cont .chart > ul .chart_side .right:before {width:20px;} .sub_about .about_work .work_cont .chart > ul .chart_box .chart_step li {padding-top:25px;} } /*** company/ceo (ceo 인사말) ***/ /* PC 일반 */ .sub_ceo {text-align:left;} .sub_ceo .sub_title {text-align:left;} .sub_ceo .sub_title h3 {letter-spacing:var(--letter-04);font-weight:400;padding-bottom:53px;} .sub_ceo .sub_title p {font-size:var(--title-20);font-weight:400;line-height:1.5;color:var(--black-color03);padding:0;} .sub_ceo .sub_title p + p {padding-top:30px;} .sub_ceo .sub_title .ceo {text-align:right;padding-top:54px;font-weight:600;color:var(--black-color01);vertical-align:middle;} .sub_ceo .sub_title .ceo span {margin-left:18px;display:inline-block;vertical-align:middle;} @media only screen and (max-width:1200px) { } @media only screen and (max-width:1024px) { } @media only screen and (max-width:860px) { .sub_ceo .sub_title h3 {padding-bottom:48px;} .sub_ceo .sub_title p + p {padding-top:25px;} .sub_ceo .sub_title .ceo {padding-top:50px;} } @media only screen and (max-width:767px) { .sub_ceo .sub_title h3 {padding-bottom:40px;} .sub_ceo .sub_title p + p {padding-top:20px;} .sub_ceo .sub_title .ceo {padding-top:45px;} } @media only screen and (max-width:640px) { .sub_ceo .sub_title h3 {padding-bottom:35px;} .sub_ceo .sub_title p + p {padding-top:15px;} .sub_ceo .sub_title .ceo {padding-top:40px;} } @media only screen and (max-width:479px) { .sub_ceo .sub_title h3 {padding-bottom:30px;} .sub_ceo .sub_title p + p {padding-top:10px;} .sub_ceo .sub_title .ceo {padding-top:30px;} } /*** company/history (연혁) ***/ /* PC 일반 */ .sub_history {} .sub_history .history_wrap {} .sub_history .history_box {} .sub_history .history_box + .history_box {padding-top:152px;} .sub_history .his_year {text-align:center;padding-bottom:64px;} .sub_history .his_year strong {display:block;font-size:var(--title-60);font-weight:700;line-height:1;color:var(--black-color01);font-family:var(--font-type02);} .sub_history .his_year p {font-size:var(--title-20);font-weight:400;color:var(--black-color06);line-height:1;padding-top:20px;font-family:var(--font-type02);} .sub_history .his_detail {display:flex;flex-wrap:wrap;align-items:flex-start;} .sub_history .his_detail .img {width:480px;padding-top:80px;position:sticky;left:0;top:150px;} .sub_history .his_detail .img span {display:block;border-radius:20px;overflow:hidden;font-size:0;} .sub_history .his_detail .img img {width:100%;} .sub_history .his_detail .detail_wrap {width:calc(100% - 480px);padding-left:98px;box-sizing:border-box;position:relative;z-index:1;overflow:hidden;} .sub_history .his_detail .detail_wrap:before {content:'';display:block;position:absolute;width:2px;height:100%;background:var(--border-color01);left:160px;} .sub_history .his_detail .detail_wrap .line {display:block;width:2px;position:absolute;left:160px;background:var(--point-color01);transition:height 0.2s;} .sub_history .his_detail .detail_wrap .detailYear {} .sub_history .his_detail .detail_wrap .detailYear:last-of-type {padding-bottom:24px;} .sub_history .his_detail .detail_wrap .detailYear dt {font-size:var(--title-52);line-height:1;letter-spacing:var(--letter-04);font-family:var(--font-type02);position:relative;z-index:1;display:inline-block;width:116px;text-align:center;transition:all 0.5s;} .sub_history .his_detail .detail_wrap .detailYear dt:before {content:'';display:block;position:absolute;background:var(--point-white);width:100%;height:100%;padding:24px 0;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1;} .sub_history .his_detail .detail_wrap .detailYear.on dt {color:var(--point-color01);} .sub_history .his_detail .detail_wrap .detailYear dd {padding:84px 0 124px 163px;} .sub_history .his_detail .detail_wrap .detailYear dd ul {} .sub_history .his_detail .detail_wrap .detailYear dd ul li {font-size:var(--title-18);line-height:1.22;font-weight:400;color:var(--black-color06);font-family:var(--font-type02);} .sub_history .his_detail .detail_wrap .detailYear dd ul li + li {padding-top:18px;} .sub_history .his_detail .detail_wrap .detailYear dd ul li strong {font-size:inherit;font-weight:600;color:var(--black-color03);font-family:inherit;} @media only screen and (max-width:1440px) { .sub_history .his_detail .img {top:130px;width: calc(50% - 120px);} .sub_history .his_detail .img span {width: 100%;} .sub_history .his_detail .detail_wrap {padding-left:60px;width: calc(50% + 120px);} .sub_history .his_detail .detail_wrap:before {left: 120px;} .sub_history .his_detail .detail_wrap .line {left:120px;} .sub_history .his_detail .detail_wrap .detailYear dd {padding:74px 0 114px 153px;} } @media only screen and (max-width:1200px) { } @media only screen and (max-width:1024px) { .sub_history .history_box + .history_box {padding-top:132px;} .sub_history .his_detail .detail_wrap .detailYear dd {padding:54px 0 104px 143px;} } @media only screen and (max-width:860px) { .sub_history .his_year {padding-bottom:52px;} .sub_history .history_box + .history_box {padding-top:112px;} .sub_history .his_detail .img {top:100px;padding-top:60px;} .sub_history .his_detail .detail_wrap .detailYear dd {padding:50px 0 80px 120px;} } @media only screen and (max-width:768px) { .sub_history .his_year {padding-bottom:42px;} .sub_history .history_box + .history_box {padding-top:92px;} .sub_history .his_detail .img {top:100px;width: calc(50% - 100px);} .sub_history .his_detail .img span {width: 100%;} .sub_history .his_detail .detail_wrap {padding-left:50px;width: calc(50% + 100px);} .sub_history .his_detail .detail_wrap:before {left: 100px;} .sub_history .his_detail .detail_wrap .line {left:100px;} .sub_history .his_detail .detail_wrap .detailYear dt {width:96px;} .sub_history .his_detail .detail_wrap .detailYear dd {padding:50px 0 70px 100px;} } @media only screen and (max-width:640px) { .sub_history .his_year {padding-bottom:32px;} .sub_history .history_box + .history_box {padding-top:76px;} .sub_history .his_detail {display:block;} .sub_history .his_detail .img {width:100%;position:static;padding:0;} .sub_history .his_detail .img span {width:70%;} .sub_history .his_detail .detail_wrap {width:100%;padding:30px 0 0;} .sub_history .his_detail .detail_wrap:before {left:40px;} .sub_history .his_detail .detail_wrap .line {left:40px;} .sub_history .his_detail .detail_wrap .detailYear dt {width:auto;} .sub_history .his_detail .detail_wrap .detailYear dd {padding:40px 0 60px 80px;} .sub_history .his_detail .detail_wrap .detailYear dd ul li + li {padding-top:13px;} .sub_history .his_detail .detail_wrap .detailYear:last-of-type {padding-bottom:0;} .sub_history .his_detail .detail_wrap .detailYear dt:before {padding:20px 0;} } @media only screen and (max-width:479px) { .sub_history .his_detail .img span {width:85%;} } @media only screen and (max-width:375px) { .sub_history .his_detail .img span {width:100%;} } /*** company/loaction (찾아오시는길) ***/ .sub_location{} .sub_location .location_tab{display: flex;align-items: center;background:var(--point-white);margin-top:30px;margin-bottom:40px;z-index:3;} .sub_location .location_tab a{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;width:33.3333%;border-bottom:1px solid #ddd;font-size:var(--title-20);color:var(--black-color08);font-weight:400;padding:14px 0;letter-spacing:-0.05em;position: relative;text-align: center;} .sub_location .location_tab a:after{width:0;height:2px;content:"";background:var(--point-color01);position: absolute;bottom:-1px;left:0;transition:width 0.5s;} .sub_location .location_tab a span{font-size:146%;color:inherit;font-weight:inherit;} .sub_location .location_tab a.on{color:var(--point-color01);font-weight:500;} .sub_location .location_tab a.on:after{width:100%;} .sub_location .location_wrap{display: none;} .sub_location .location_wrap.on{display: block;} .sub_location .location_wrap .map_box{width:100%;height:0;padding-bottom:560px;overflow:hidden;position: relative;} .sub_location .location_wrap .map_box > div{width:100%;height:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .sub_location .location_wrap .root_daum_roughmap .wrap_map{width:100%;height:100%;} .sub_location .location_wrap .root_daum_roughmap .map{width:100%;height:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .sub_location .location_wrap .map_box iframe{width:100%;height:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .sub_location .location_wrap .info_box{display: flex;flex-wrap:wrap;align-items: flex-start;margin-bottom:30px;} .sub_location .location_wrap .info_box .tit{box-sizing:border-box;background:var(--black-color01);box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.20);width:270px;font-size:var(--title-20);font-weight:400;padding:37px 40px 40px;} .sub_location .location_wrap .info_box .tit span{font-size:89%;color:rgba(255,255,255,0.5);font-weight:inherit;} .sub_location .location_wrap .info_box .tit .name{padding-top:89px;font-size:var(--title-20);color:var(--point-white);font-family:var(--font-type01);} .sub_location .location_wrap .info_box .tit .name p{font-weight:400;} .sub_location .location_wrap .info_box .tit .name strong{font-size:146%;font-weight:600;letter-spacing:-0.03em;display: block;margin-top:8px;} .sub_location .location_wrap .info{box-sizing:border-box;width:100%;margin-top:20px;} .sub_location .location_wrap .info dl{display: flex;flex-wrap:wrap;font-size:var(--title-20);color:var(--black-color03);font-weight:600;} .sub_location .location_wrap .info dl + dl{margin-top:19px;} .sub_location .location_wrap .info dl dt{font-size:inherit;color:inherit;font-weight:inherit;font-family:var(--font-type01);width:89px;} .sub_location .location_wrap .info dl dd{box-sizing:border-box;font-size:89%;color:var(--black-color06);font-weight:400;width:calc(100% - 89px);padding-left:63px;margin-top:4px;} @media only screen and (max-width:1024px) { .sub_location .location_tab{margin-top:20px;} .sub_location .location_wrap .map_box{padding-bottom:55vw;} .sub_location .location_wrap .info_box .tit{padding:37px 25px 40px;margin-top:-70px;} .sub_location .location_wrap .info{margin-top:50px;} } @media only screen and (max-width:860px) { .sub_location .location_tab{margin-top:0;} .sub_location .location_wrap .info_box .tit{width:230px;} .sub_location .location_wrap .info_box .tit .name{padding-top:50px;} .sub_location .location_wrap .info dl dt{width:80px;} .sub_location .location_wrap .info dl dd{width:calc(100% - 80px);padding-left:25px;margin-top:2px;} } @media only screen and (max-width:640px) { .sub_location .location_wrap .info_box{flex-direction: column;} .sub_location .location_wrap .info_box .tit{padding:25px 25px 30px;width:100%;margin:0;} .sub_location .location_wrap .info{width:100%;margin-top:30px;} } @media only screen and (max-width:500px) { .sub_location .location_tab{align-items: stretch;margin-bottom:25px;} .sub_location .location_tab a{padding:8px 10px;} .sub_location .location_wrap .map_box{padding-bottom:100%;} .sub_location .location_wrap .info_box .tit .name{padding-top:30px;} .sub_location .location_wrap .info{margin-top:20px;} .sub_location .location_wrap .info dl + dl{margin-top:10px;} .sub_location .location_wrap .info dl dt{width:70px;} .sub_location .location_wrap .info dl dd{width:calc(100% - 70px);padding-left:20px;} } /* 주요 고객사 */ .sub_customer .logo_list{display: flex; flex-wrap: wrap; gap: 20px;} .sub_customer .logo_list > li{position: relative; width: calc(100% / 5 - 16px); box-sizing: border-box; display: flex; align-items: center; justify-content: center;} @media screen and (max-width:1023px){ .sub_customer .logo_list > li{width: calc(100% / 5 - 12px);} } @media screen and (max-width:860px){ .sub_customer .logo_list > li{width: calc(100% / 4 - 11.25px);} } @media screen and (max-width:640px){ .sub_customer .logo_list > li{width: calc(100% / 3 - 10px);} } @media screen and (max-width:479px){ .sub_customer .logo_list > li{width: calc(100% / 2 - 7.5px);} } /*─────────────────────────────────────────────────────────── 사업영역 - SAP ───────────────────────────────────────────────────────────*/ .sap_platform{} .sap_platform .platform_img{text-align: center;margin-top:29px;} .sap_platform .platform_img .m_ver{display: none;} .sap_platform > ul{width:calc(100% + 40px);margin-left:-20px;margin-top:80px;display: flex;flex-wrap:wrap;} .sap_platform > ul li{width:calc(100% / 3 - 40px);margin:0 20px;box-sizing:border-box;box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);border-radius:20px;;border:1px solid #eee;overflow:hidden;font-size:var(--title-20);color:var(--point-white);font-weight:400;} .sap_platform > ul li strong{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;border-radius:20px 20px 0 0;background:var(--black-color03);text-align: center;font-size:120%;color:inherit;font-weight:inherit;width:100%;padding:17px 0;} .sap_platform > ul li p{font-size:inherit;color:var(--black-color06);font-weight:400;font-family:var(--font-type02);text-align:left;padding: 40px 20px 39px;line-height: 1.6;letter-spacing: -0.03em;} .platform_global{background: url('../images/sub/global_bg.png')no-repeat center top;background-size: 100% auto;padding:25px 0 145px;margin-top:51px;} .platform_global .sub_title{padding-top:45px;} .platform_global > ul{display: flex;justify-content: space-between;text-align: center;margin-top:55px;box-sizing:border-box;padding:0 195px;position: relative;} .platform_global > ul li{font-size:var(--title-20);color:var(--black-color03);font-weight:600;font-family:var(--font-type02);} .platform_global > ul li span{font-size:104%;color:inherit;font-weight:inherit;font-family:inherit;} .platform_global > ul li .cnt{margin-top:49px;position: relative;} .platform_global > ul li .cnt strong{font-size:120px;color:var(--black-color01);font-weight:700;font-family:var(--font-type02);line-height:1;} .platform_global > ul li .cnt em{font-size:var(--title-60);color:var(--point-color01);font-weight:700;font-family:var(--font-type02);position: absolute;top:-23px;right:-32px;} .global_pop{min-width:435px;box-sizing:border-box;border-radius: 10px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:40px;background: #fff;text-align:left;opacity:0;z-index:-1;transition:all 0.3s;} .global_pop .pop_box{box-sizing:border-box;overflow-y:auto;max-height:435px;font-size:var(--title-20);color:var(--black-color03);font-weight:600;padding-right:10px;} .global_pop .tit{font-size:104%;color:inherit;font-weight:inherit;margin-bottom:12px;} .b1_pop ul{font-size:var(--title-20);color:var(--black-color06);font-weight:300;text-align:left;} .b1_pop ul li{font-size:79%;color:inherit;font-weight:inherit;position: relative;padding-left:7px;box-sizing:border-box;line-height:1.6;} .b1_pop ul li:before{content:"·";font-size:inherit;color:inherit;font-weight:inherit;position: absolute;top:0;left:0;} .local_pop table{} .local_pop table tbody tr td{padding:12px 10px;border:1px solid #ddd;font-size:12px;color:var(--black-color03);font-weight:400;} .multi_pop .txt{font-size:var(--title-20);color:var(--black-color06);font-weight:300;text-align:left;} .multi_pop .txt p{font-size:79%;color:inherit;font-weight:inherit;} .multi_pop .txt strong{font-size:inherit;color:var(--black-color03);font-weight:700;display: block;margin-top:15px;} .sap_icon{background:url('../images/sub/sap_list_bg.jpg')no-repeat center;background-size:cover;box-sizing:border-box;padding:120px 0 117px;} .sap_icon .sub_title h3 strong{color:var(--point-white);} .sap_icon .icon_list li{padding:31px 60px 143px;} .sap_analyze{box-sizing:border-box;background: #f5f5f5;padding:120px 0 130px;} .sap_analyze .w_custom > ul{display: flex;flex-wrap:wrap;width:calc(100% + 40px);margin-left:-20px;} .sap_analyze .w_custom > ul > li{margin:0 20px;width:calc(100% / 3 - 40px);box-sizing:border-box;border-radius:30px;border:1px solid #eee;box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);padding:20px 20px 38px;background:var(--point-white);} .sap_analyze .w_custom > ul > li span{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;width:100%;height:60px;border-radius:30px;background:var(--point-color04);font-size:var(--title-20);color:var(--point-white);font-weight:500;font-family:var(--font-type02);} .sap_analyze .w_custom > ul > li .img{margin-top:30px;box-sizing:border-box;padding:0 36px;text-align: center;} .sap_analyze .w_custom > ul > li ul{font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);box-sizing:border-box;margin-top:32px;padding:0 10px;} .sap_analyze .w_custom > ul > li ul li{position: relative;padding-left:12px;font-size:79%;color:inherit;font-weight:inherit;box-sizing:border-box;letter-spacing:-0.05em;} .sap_analyze .w_custom > ul > li ul li + li{margin-top:12px;} .sap_analyze .w_custom > ul > li ul li:before{width:4px;height:4px;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color06);position: absolute;left:0;top:8px;} .sap_solution{margin-top:120px;} .sap_solution .list{display: flex;flex-wrap:wrap;} .sap_solution .list > li{box-sizing:border-box;width:calc(100% / 3 - 10px);background: #E6F2F9;border-radius:10px;text-align: center;padding:36px 40px 30px 30px;position: relative;z-index:1;} .sap_solution .list > li:nth-child(2){z-index:3;} .sap_solution .list > li:nth-child(1), .sap_solution .list > li:nth-child(3){transition:all 0.5s;transition-delay:0.5s;} .sap_solution .list > li:nth-child(1){transform:translate(calc(100% + 15px));} .sap_solution .list > li:nth-child(3){transform:translate(calc(-100% - 15px));} .sap_solution .list.aos-animate > li:nth-child(1), .sap_solution .list.aos-animate > li:nth-child(3){transform:translate(0);} .sap_solution .list > li + li{margin-left:15px;} .sap_solution .list > li h4{font-size:var(--title-30);color:var(--black-color03);font-weight:600;font-family:var(--font-type02);letter-spacing:-0.03em;} .sap_solution .list > li .circle{display: flex;flex-direction: column;align-items: center;margin:17px 0 20px;} .sap_solution .list > li .circle span{display: inline-block;box-sizing:border-box;width:5px;height:5px;border-radius:100%;background:var(--point-color01);} .sap_solution .list > li .circle span + span{margin-top:5px;} .sap_solution .list > li .circle span:nth-child(1){opacity:0.3;} .sap_solution .list > li .circle span:nth-child(2){opacity:0.6;} .sap_solution .list ul{display: flex;flex-wrap:wrap;gap:10px;} .sap_solution .list ul li{box-sizing:border-box;width:calc(50% - 5px);background:var(--point-white);border-radius:5px;display: flex;flex-wrap:wrap;align-items: center;font-size:var(--title-20);color:var(--black-color03);font-weight:400;font-family:var(--font-type02);} .sap_solution .list ul li .icon{width:50px;height:60px;display: flex;align-items: center;justify-content: center;} .sap_solution .list ul li p{width:calc(100% - 50px);font-size:79%;color:inherit;font-weight:inherit;text-align:left;padding-right:10px;box-sizing:border-box;font-family:inherit;letter-spacing:-0.04em;} .sap_business{padding:161px 0;background: linear-gradient(180deg, #FFF 0%, #F1F1F1 100%);;} .sap_business .sub_title h3{font-weight:400;} .sap_business .sub_title h3 em{font-size:inherit;color:var(--point-color01);font-weight:inherit;} .sub_img_box a{pointer-events:none;} @media only screen and (min-width:1024px) { .platform_global > ul li:hover .global_pop{opacity:1;z-index:5;} .sap_icon .icon_list li:hover:before{display: none;} } @media only screen and (max-width:1200px) { .platform_global ul{padding:0 80px;} .icon_list li .txt_wrap p br{display: none;} .sap_solution .list > li{padding:30px 20px 25px 20px;} .sap_solution .list ul li{width:100%;} } @media only screen and (max-width:1024px) { .sap_platform > ul{width:calc(100% + 20px);margin-left:-10px;margin-top:60px;} .sap_platform > ul li{margin:0 10px;width:calc(100% / 3 - 20px);} .sap_platform > ul li p{padding:40px 10px 39px;} .sap_platform > ul li p br{display: none;} .platform_global{margin-top:20px;background-size:auto 100%;padding:20px 0 85px;} .platform_global ul{padding:0 15%;margin-top:20px;} .platform_global ul li .cnt{margin-top:20px;} .platform_global ul li .cnt strong{font-size:var(--title-80);} .platform_global ul li .cnt em{right:-15px;} .sap_icon{padding:100px 0;} .sap_icon .icon_list li{padding:40px 40px;} .sap_analyze {padding:100px 0 110px;} .sap_analyze .w_custom > ul{width:calc(100% + 20px);margin-left:-10px;} .sap_analyze .w_custom > ul > li{margin:0 10px;width:calc(100% / 3 - 20px);padding:20px 15px 30px;} .sap_analyze .w_custom > ul > li span{padding:0 10px;text-align: center;} .sap_analyze .w_custom > ul > li ul li:before{top:7px;} .sap_solution{margin-top:100px;} .sap_business{padding:120px 0;} } @media only screen and (max-width:860px) { .sap_solution .list > li{width:100%;} .sap_solution .list > li:nth-child(1), .sap_solution .list > li:nth-child(3){transform:none;} .sap_solution .list > li + li{margin:30px 0 0 0;} .sap_solution .list ul li{width:calc(50% - 5px);} .platform_global{width:calc(100% + 60px);margin-left:-30px;} } @media only screen and (max-width:767px) { .sap_analyze .w_custom > ul{width:100%;margin-left:0;} .sap_analyze .w_custom > ul > li{margin:0;width:100%;} .sap_analyze .w_custom > ul > li + li{margin-top:20px;} } @media only screen and (max-width:640px) { .sap_platform .platform_img{margin-top:5px;} .sap_platform > ul{margin-top:45px;width:100%;margin-left:0;} .sap_platform > ul li{width:100%;margin:0;} .sap_platform > ul li + li{margin-top:30px;} .platform_global{padding:20px 0 55px;width:calc(100% + 30px);margin-left:-15px;} .platform_global ul{padding:0;flex-direction: column;align-items: center;margin-top:0;} .platform_global ul li + li{margin-top:30px;} .platform_global ul li .cnt{margin-top:8px;} .platform_global ul li .cnt em{right:4px;} .sap_icon{padding:80px 0;} .sap_icon .icon_list li{padding:30px 30px;} .sap_analyze{padding:80px 0 90px;} .sap_analyze .w_custom > ul > li ul li:before{top:5px;} .sap_business{padding:80px 0;} .sap_business .sub_title h3 br{display: none;} .sub_img_box a{pointer-events:all;} } @media only screen and (max-width:479px) { .sap_platform .platform_img .pc_ver{display: none;} .sap_platform .platform_img .m_ver{display: block;} .sap_platform > ul li{border-radius:10px;} .sap_platform > ul li + li{margin-top:20px;} .sap_platform > ul li strong{padding:10px 10px 0 0;padding:12px 0;} .sap_platform > ul li p{padding:25px 10px 25px;} .platform_global .sub_title{padding-top:20px;} .sap_analyze{padding:60px 0 70px;} .sap_analyze .w_custom > ul > li{border-radius:15px;} .sap_analyze .w_custom > ul > li span{height:50px;} .sap_analyze .w_custom > ul > li .img{margin-top:20px;padding:0 20px;} .sap_analyze .w_custom > ul > li ul{margin-top:20px;} .sap_analyze .w_custom > ul > li ul li:before{width:3px;height:3px;top:7px;} .sap_analyze .w_custom > ul > li ul li{padding-left:10px;} .sap_analyze .w_custom > ul > li ul li + li{margin-top:8px;} } /*─────────────────────────────────────────────────────────── 사업영역 - ERP ───────────────────────────────────────────────────────────*/ .sub_erp .sub_title p{font-size:var(--title-20);} .erp_system .system_box{box-sizing:border-box;padding:50px 50px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10);border-radius:20px;display: flex;flex-wrap:wrap;align-items: center;margin-top:8px;} .erp_system .system_box .system_list{box-sizing:border-box;position: relative;} .erp_system .system_box .system_list li{box-sizing:border-box;border-radius:10px;box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);background:var(--point-white);;padding:20px 17px 20px 20px;display: flex;flex-wrap:wrap;align-items: center;position: relative;border:1px solid #eee;} .erp_system .system_box .system_list li + li{margin-top:40px;} .erp_system .system_box .system_list li .icon{width:60px;height:60px;box-sizing:border-box;border-radius:10px;background: #f5f5f5;display: flex;align-items: center;justify-content: center;} .erp_system .system_box .system_list li .txt{width:calc(100% - 60px);box-sizing:border-box;padding-left:20px;font-size:var(--title-20);color:var(--black-color06);font-weight:400;} .erp_system .system_box .system_list li .txt dt{font-size:111%;color:var(--black-color01);font-weight:600;margin-bottom:5px;} .erp_system .system_box .system_list li .txt dd{font-size:89%;color:inherit;font-weight:inherit;letter-spacing:-0.07em;} .erp_system .system_box > .system_list{background: #E6F2F9;border-radius:20px;padding:30px;width:31%;} .erp_system .system_box > .system_list:before{width:1px;height:67%;content:"";border-left:1px dashed var(--point-color01);position: absolute;top:50%;transform:translateY(-50%);} .erp_system .system_box > .system_list.left:before{right:-32px;} .erp_system .system_box > .system_list.right:before{left:-32px;} .erp_system .system_box > .system_list li + li{margin-top:10px;} .erp_system .system_box > .system_list li:before{width:60px;height:1px;content:"";border-top:1px dashed var(--point-color01);position: absolute;top:50%;transform:translateY(-50%);} .erp_system .system_box > .system_list.left li:before{right:-60px;} .erp_system .system_box > .system_list.right li:before{left:-60px;} .erp_system .system_box .center_box{width:38%;box-sizing:border-box;padding:0 71px;} .erp_system .system_box .center_box .logo{text-align: center;margin-bottom:54px;} .erp_system .system_box .center_box .system_list li:nth-child(1):before, .erp_system .system_box .center_box .system_list li:nth-child(1):after{width:42px;height:1px;content:"";border-top:1px dashed var(--point-color01);position: absolute;top:50%;transform:translateY(-50%);} .erp_system .system_box .center_box .system_list li:nth-child(1):before{left:-41px;} .erp_system .system_box .center_box .system_list li:nth-child(1):after{right:-41px;} .erp_system .system_box .center_box .system_list li:nth-child(2):before{width:1px;height:40px;content:"";border-left:1px dashed var(--point-color01);position: absolute;left:50%;transform:translate(-50%);top:-40px;} /*특장점*/ .erp_adv{background:rgba(0, 118, 190, 0.05);text-align: center;margin-top:116px;box-sizing:border-box;padding:119px 0 120px;} .erp_adv .erp_cloud{background:url('../images/sub/erp_cloud.png')no-repeat center;background-size:cover;display:inline-flex;align-items: center;justify-content: center;width:531px;height:348px;margin:0 auto;margin-top:-22px;box-sizing:border-box;padding-top:30px;} .erp_adv .adv_box{display: flex;flex-wrap:wrap;gap:20px;margin-top:42px;position: relative;} .erp_adv .adv_box:before{width:2px;height:82px;content:"";background: #ddd;position: absolute;top:-82px;left:50%;transform:translate(-50%);} .erp_adv .adv_box:after{width: calc(75% + 15px);height:2px;content:"";background: #ddd;position: absolute;top:0;left:50%;transform:translate(-50%);} .erp_adv .adv_box > div{margin-top:40px;position: relative;width:calc(25% - 15px);box-sizing:border-box;border-radius:20px;background:var(--point-white);box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);padding:20px 20px 29px;} .erp_adv .adv_box > div:before{width:2px;height:40px;content:"";background: #ddd;position: absolute;top:-40px;left:50%;transform:translate(-50%);} .erp_adv .adv_box > div span{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;width:100%;height:60px;background:var(--point-color01);font-size:var(--title-20);color:var(--point-white);font-weight:600;font-family:var(--font-type02);border-radius:30px;} .erp_adv .adv_box > div ul{text-align:left;font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);box-sizing:border-box;margin-top:23px;padding:0 10px;} .erp_adv .adv_box > div ul li{position: relative;padding-left:12px;font-size:89%;color:inherit;font-weight:inherit;box-sizing:border-box;letter-spacing:-0.05em;line-height:1.6;font-family:inherit;} .erp_adv .adv_box > div ul li:before{width:4px;height:4px;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color06);position: absolute;left:0;top:12px;} .erp_adv .adv_box > div ul li + li{margin-top:10px;} /*주요기능*/ .erp_function{margin-top:121px;} #wrap .business_tab{display: flex;flex-wrap:wrap;gap:0 50px;justify-content: center;} #wrap .business_tab a{font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);position: relative;padding-top:24px;} #wrap .business_tab a:before{width:10px;height:10px;content:"";box-sizing:border-box;border-radius:100%;background:var(--point-color01);position: absolute;top:0;left:50%;transform:translate(-50%);display: none;} #wrap .business_tab a.on{color:var(--point-color01);font-weight:500;} #wrap .business_tab a.on:before{display: block;} #wrap .business_cont_wrap{box-sizing:border-box;background:#f9f9f9;margin-top:50px;padding:90px 0;} #wrap .business_cont_wrap .business_cont{display: none;align-items: center;justify-content: space-between;} #wrap .business_cont_wrap .business_cont.on{display:flex;} #wrap .business_cont_wrap .business_cont .txt_box{width:39.9%;box-sizing:border-box;padding-right:30px;} #wrap .business_cont_wrap .business_cont .txt_box h4{font-size:var(--title-30);color:var(--black-color01);font-weight:600;font-family:var(--font-type02);} #wrap .business_cont_wrap .business_cont .txt_box ul{text-align:left;font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);box-sizing:border-box;margin-top:26px;} #wrap .business_cont_wrap .business_cont .txt_box ul li{position: relative;padding-left:12px;font-size:89%;color:inherit;font-weight:inherit;box-sizing:border-box;letter-spacing:-0.05em;line-height:1.6;font-family:inherit;} #wrap .business_cont_wrap .business_cont .txt_box ul li + li{margin-top:9px;} #wrap .business_cont_wrap .business_cont .txt_box ul li:before{width:4px;height:4px;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color06);position: absolute;left:0;top:12px;} #wrap .business_cont_wrap .business_cont .img{width:60.1%;} /*process*/ #wrap .erp_process{margin-top:119px;} #wrap .erp_process .sub_img_box{box-sizing:border-box;border-radius:20px;box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);border:1px solid #eee; padding:30px;} /*도입*/ .erp_introduce{margin-top:120px;background:rgba(0, 118, 190, 0.05);box-sizing:border-box;padding:120px 0;} .erp_introduce .introduce_box{width:calc(100% + 20px);margin-left:-10px;display: flex;flex-wrap:wrap;} .erp_introduce .introduce_box > div{box-sizing:border-box;border-radius: 20px;border:1px solid #EEE;background:var(--point-white);box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);margin:0 10px;width:calc(25% - 20px);text-align: center;padding:40px 30px 30px;font-size:var(--title-30);color:var(--black-color03);font-weight:600;font-family:var(--font-type02);} .erp_introduce .introduce_box .icon{height:60px;display: flex;align-items: center;justify-content: center;} .erp_introduce .introduce_box .icon img{max-height:100%;} .erp_introduce .introduce_box h4{font-size:89%;color:inherit;font-weight:inherit;font-family:inherit;margin-top:21px;letter-spacing:-0.04em;} .erp_introduce .introduce_box ul{display: flex;flex-direction: column;font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);margin-top:19px;} .erp_introduce .introduce_box ul li{display: inline-flex;box-sizing:border-box;width:100%;height:46px;align-items: center;justify-content:center;border-radius:23px;background:#F1F3F4;font-size:89%;color:inherit;font-weight:inherit;font-family:inherit;text-align: center;padding:0 5px;} .erp_introduce .introduce_box ul li + li{margin-top:10px;} /*faq*/ #wrap .business_faq{margin-top:118px;} .business_faq .faq_box{} .business_faq .faq_box > li{box-sizing:border-box;border-radius: 20px;border: 1px solid #DDD;background:var(--point-white);box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); } .business_faq .faq_box > li + li{margin-top:30px;} .business_faq .faq_box > li > div{display: flex;flex-wrap:wrap;box-sizing:border-box;} .business_faq .faq_box > li span{display: inline-flex;align-items: center;justify-content: center;box-sizing:border-box;border-radius:100%;width:40px;height:40px;background:var(--point-color01);font-size:var(--title-20);color:var(--point-white);font-weight:600;font-family:var(--font-type02);} .business_faq .faq_box > li p, .business_faq .faq_box > li ul{width:calc(100% - 40px);box-sizing:border-box;padding-left:20px;} .business_faq .faq_box > li p{font-size:var(--title-20);color:var(--black-color03);font-weight:600;font-family:var(--font-type02);width:calc(100% - 80px);} .business_faq .faq_box > li .q_box{align-items: center;position: relative;cursor:pointer;padding:25px 30px 25px 30px;} .business_faq .faq_box > li .q_box:before{width:10px;height:10px;content:"";border:2px solid var(--black-color00);border-width:2px 2px 0 0;position: absolute;right:33px;top:43%;transform:translateY(-50%) rotate(135deg);} .business_faq .faq_box > li .q_box.on:before{border-color:var(--point-color01);transform:translateY(-50%) rotate(-45deg);top:53%;} .business_faq .faq_box > li .a_content{display: flex;flex-wrap:wrap;font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);} .business_faq .faq_box > li .a_box{box-sizing:border-box;border-top:1px solid #ddd;padding:25px 0;display: none;width:calc(100% - 60px);margin:0 auto;} .business_faq .faq_box > li .a_box span{background:var(--black-color03);} .business_faq .faq_box > li .a_box ul{text-align:left;font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);box-sizing:border-box;margin-top:7px;} .business_faq .faq_box > li .a_box ul li{position: relative;padding-left:12px;font-size:89%;color:inherit;font-weight:inherit;box-sizing:border-box;letter-spacing:-0.03em;line-height:1.6;font-family:inherit;} .business_faq .faq_box > li .a_box ul li + li{margin-top:12px;} .business_faq .faq_box > li .a_box ul li:before{width:4px;height:4px;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color06);position: absolute;left:0;top:12px;} .business_faq .faq_box > li .a_box p{font-size:89%;color:inherit;font-weight:inherit;margin-top:7px;} @media only screen and (max-width:1400px) { .erp_system .system_box{padding:50px 30px;} .erp_system .system_box > .system_list{padding:30px 20px;} .erp_system .system_box > .system_list.left:before{right:-40px;} .erp_system .system_box > .system_list.right:before{left:-40px;} .erp_system .system_box .center_box .system_list li:nth-child(1):before, .erp_system .system_box .center_box .system_list li:nth-child(1):after{width:32px;} .erp_system .system_box .center_box .system_list li:nth-child(1):before{left:-32px;} .erp_system .system_box .center_box .system_list li:nth-child(1):after{right:-32px;} } @media only screen and (max-width:1250px) { .erp_system .system_box .system_list li{padding:15px 10px 15px 15px;;} .erp_system .system_box .system_list li .icon{width:50px;height:50px;} .erp_system .system_box .system_list li .txt{width:calc(100% - 50px);padding-left:10px;} } @media only screen and (max-width:1114px) { .erp_system .system_box > .system_list.right:before{height:65%;top:51%;} } @media only screen and (max-width:1070px) { .erp_system .system_box > .system_list.right:before{height:67%;} } @media only screen and (max-width:1024px) { .erp_system .system_box .system_list{display: flex;flex-wrap:wrap;gap:30px;} .erp_system .system_box .system_list li{width:calc(50% - 15px);} .erp_system .system_box .system_list li + li{margin:0;} .erp_system .system_box > .system_list{width:100%;gap:10px;} .erp_system .system_box > .system_list:before{display: none;} .erp_system .system_box > .system_list li{width:calc(50% - 5px);} .erp_system .system_box > .system_list li:before{display: none;} .erp_system .system_box > .system_list li + li{margin-top:0;} .erp_system .system_box .center_box{width:100%;padding:0;margin:40px 0;} .erp_system .system_box .center_box .logo{margin-bottom:30px;} .erp_system .system_box .center_box .system_list li:nth-child(1):before, .erp_system .system_box .center_box .system_list li:nth-child(1):after{display: none;} .erp_system .system_box .center_box .system_list li:nth-child(2):before{display: none;} .erp_adv{margin-top:100px;padding:100px 0 110px;} .erp_adv .adv_box{gap:12px;} .erp_adv .adv_box > div{width:calc(25% - 9px);} .erp_adv .adv_box > div span{padding:0 10px;} /*주요기능*/ .erp_function{margin-top:100px;} #wrap .business_tab{gap:10px 25px;} #wrap .business_cont_wrap .business_cont .txt_box ul li:before{top:9px;} #wrap .erp_process{margin-top:100px;} .erp_introduce{margin-top:100px;padding:100px 0;} .erp_introduce .introduce_box > div{padding:30px 20px 25px;} /*faq*/ #wrap .business_faq{margin-top:100px;} .business_faq .faq_box > li .q_box{padding:20px 20px;} .business_faq .faq_box > li .q_box:before{right:23px;} .business_faq .faq_box > li .a_box{width:calc(100% - 40px);} .business_faq .faq_box > li .a_box ul li:before{top:11px;} } @media only screen and (max-width:860px) { .erp_adv .erp_cloud{width:48vw;height:28vw;background-size:100% auto;position: relative;z-index:3; margin-top:0;} .erp_adv .erp_cloud .img{width:50%;} .erp_adv .adv_box{gap:0 12px;} .erp_adv .adv_box > div{width:calc(50% - 9px);padding:20px 15px 20px;} .erp_adv .adv_box:after{width:calc(50% + 4px);left:calc(50% - 4px);} .erp_adv .adv_box > div ul li:before{top:10px;} .erp_introduce .introduce_box > div{width:calc(50% - 20px);margin-bottom:20px;} } @media only screen and (max-width:640px) { .erp_system .system_box{padding:30px 15px;} .erp_system .system_box .system_list{gap:10px;} .erp_system .system_box > .system_list{padding:15px 15px;} .erp_system .system_box .system_list li{width:100%;} .erp_system .system_box > .system_list li{width:100%;} /*주요기능*/ .erp_function{margin-top:60px;} #wrap .business_tab a{padding-top:16px;} #wrap .business_tab a:before{width:7px;height:7px;} #wrap .business_cont_wrap{margin-top:30px;padding:60px 0;} #wrap .business_cont_wrap .business_cont{flex-direction: column-reverse;align-items: flex-start;} #wrap .business_cont_wrap .business_cont .img{width:100%;} #wrap .business_cont_wrap .business_cont .txt_box{width:100%;padding:30px 0 0 0;} #wrap .business_cont_wrap .business_cont .txt_box ul{margin-top:12px;} #wrap .erp_process{margin-top:80px;} #wrap .erp_process .sub_img_box{padding:20px;} .erp_introduce{margin-top:80px;padding:80px 0 60px;} #wrap .business_faq{margin-top:70px;} .business_faq .faq_box > li span{width:36px;height:36px;} .business_faq .faq_box > li p{width:calc(100% - 70px);} .business_faq .faq_box > li p, .business_faq .faq_box > li ul{padding-left:10px;} .business_faq .faq_box > li .a_box{padding:15px 0;width:calc(100% - 36px);} } @media only screen and (max-width:479px) { .erp_system .system_box{border-radius:10px;} .erp_system .system_box > .system_list{border-radius:10px;} .erp_system .system_box .center_box .logo{margin-bottom:20px;height:50px;} .erp_system .system_box .center_box .logo img{max-height:100%;} .erp_adv{margin-top:60px;padding:60px 0 70px;} .erp_adv .erp_cloud{width:72vw;height:50vw;margin-top:0;} .erp_adv .adv_box{margin-top:10px;} .erp_adv .adv_box:after{display: none;} .erp_adv .adv_box > div{width:100%;margin-top:25px;border-radius:10px;} .erp_adv .adv_box > div:before{height:25px;top:-25px;} .erp_adv .adv_box > div ul li{padding-left:8px;;} .erp_adv .adv_box > div ul li + li{margin-top:5px;} .erp_adv .adv_box > div ul li:before{width:3px;height:3px;top:9px;} /*주요기능*/ #wrap .business_tab{gap:10px 10px;} #wrap .business_tab a{padding-top:12px;} #wrap .business_cont_wrap{padding:40px 0;} #wrap .business_cont_wrap .business_cont .txt_box{padding-top:20px;} #wrap .business_cont_wrap .business_cont .txt_box ul li{padding-left:10px;} #wrap .business_cont_wrap .business_cont .txt_box ul li + li{margin-top:6px;} #wrap .business_cont_wrap .business_cont .txt_box ul li:before{width:3px;height:3px;top:8px;} #wrap .erp_process{margin-top:60px;} #wrap .erp_process .sub_img_box{border-radius:10px;} .erp_introduce .introduce_box{width:100%;margin-left:0;} .erp_introduce .introduce_box > div{width:100%;margin:0 0 15px 0;} .erp_introduce .introduce_box .icon{height:50px;} #wrap .business_faq{margin-top:60px;} .business_faq .faq_box > li{border-radius:10px;} .business_faq .faq_box > li + li{margin-top:20px;} .business_faq .faq_box > li .q_box:before{width:8px;height:8px;top:47%;} .business_faq .faq_box > li .q_box.on:before{top:54%;} .business_faq .faq_box > li .a_box ul{margin-top:5px;} .business_faq .faq_box > li .a_box ul li{padding-left:9px;} .business_faq .faq_box > li .a_box ul li:before{width:3px;height:3px;top:10px;} .business_faq .faq_box > li .a_box p{margin-top:5px;} } /*─────────────────────────────────────────────────────────── 사업영역 - HR ───────────────────────────────────────────────────────────*/ /*system*/ .hr_system .system_box{display: flex;flex-wrap:wrap;margin-top:9px;} .hr_system .system_box .sub_system{width:16.4%;position: relative;} .hr_system .system_box .tit{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;width:100%;height:70px;border-radius:10px;background:var(--point-color01);text-align: center;font-size:var(--title-20);color:var(--point-white);font-weight:400;font-family:var(--font-type02);} .hr_system .system_box .tit span{font-size:120%;color:inherit;font-weight:inherit;font-family:inherit;} .hr_system .system_box .sub_system .tit{background:var(--black-color03);} .hr_system .system_box .sub_system .system_cont{margin-top:20px;box-sizing:border-box;border-radius: 10px;background:var(--point-white);box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10);padding:30px 30px;position: relative;} .hr_system .system_box .sub_system.left .system_cont{padding-bottom:46px;} .hr_system .system_box .sub_system.left ul{text-align: center;margin-top:13px;} .hr_system .system_box .sub_system.left ul li{font-size:var(--title-20);color:var(--black-color06);font-weight:400;} .hr_system .system_box .sub_system.left ul li + li{margin-top:28px;} .hr_system .system_box .sub_system.left ul li p{font-size:79%;color:inherit;font-weight:inherit;margin-top:15px;} .hr_system .system_box .sub_system.right dl{box-sizing:border-box;border-radius:5px;border:1px solid #ddd;overflow:hidden;font-size:var(--title-20);color:var(--point-white);font-weight:600;} .hr_system .system_box .sub_system.right dl + dl{margin-top:20px;} .hr_system .system_box .sub_system.right dl dt{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;border-radius:5px;background:#bbb;font-size:79%;color:inherit;font-weight:inherit;width:100%;height:40px;} .hr_system .system_box .sub_system.right dl dd{box-sizing:border-box;padding:11px 20px 28px;} .hr_system .system_box .sub_system.right dl dd ul{text-align:left;font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);box-sizing:border-box;margin-top:7px;} .hr_system .system_box .sub_system.right dl dd ul li{position: relative;padding-left:12px;font-size:79%;color:inherit;font-weight:inherit;box-sizing:border-box;letter-spacing:-0.03em;line-height:1.6;font-family:inherit;} .hr_system .system_box .sub_system.right dl dd ul li + li{margin-top:4px;} .hr_system .system_box .sub_system.right dl dd ul li:before{width:4px;height:4px;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color06);position: absolute;left:0;top:12px;} .hr_system .system_box .sub_system .arw_box{position: absolute;top:50%;transform:translateY(-50%);} .hr_system .system_box .sub_system .arw_box .arw + .arw{margin-top:13px;} .hr_system .system_box .sub_system.left .arw_box{right:-57px;} .hr_system .system_box .sub_system.right .arw_box{left:-57px;} .hr_system .system_box .system_diagram{width:67.2%;box-sizing:border-box;padding:0 60px;} .hr_system .system_box .system_diagram .system_cont{box-sizing:border-box;border-radius: 10px;background:var(--point-white);box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10);margin-top:20px;padding:30px 30px;display: flex;flex-wrap:wrap;gap:0 10px;} .hr_system .system_box .system_diagram .system_cont .chart_box{display: flex;flex-direction: column;justify-content: space-between;width:45.5%;} .hr_system .system_box .system_diagram .system_cont .chart_box .sub_chart{font-size:var(--title-20);color:var(--black-color01);font-weight:600;} .hr_system .system_box .system_diagram .system_cont .chart_box .sub_chart + .sub_chart{margin-top:30px;} .hr_system .system_box .system_diagram .system_cont .chart_box .sub_chart strong{display:inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;width:100%;height:40px;border-radius:5px;background: #E6F2F9;font-size:79%;color:inherit;font-weight:inherit;} .hr_system .system_box .system_diagram .system_cont .chart_box ul{gap:10px;display: flex;flex-wrap:wrap;margin-top:10px;font-size:var(--title-20);color:var(--black-color06);font-weight:400;} .hr_system .system_box .system_diagram .system_cont .chart_box ul li{width:calc(50% - 5px);display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;height:40px;border-radius:5px;border:1px solid #ddd;font-size:79%;color:inherit;font-weight:inherit;} .hr_system .system_box .system_diagram .system_cont .center{width:calc(9% - 20px);box-sizing:border-box;border-radius:5px;background: #00446D;font-size:var(--title-20);color:var(--point-white);font-weight:500;display: flex;align-items: center;justify-content: center;} .hr_system .system_box .system_diagram .system_cont .center span{font-size:79%;color:inherit;font-weight:inherit;writing-mode: vertical-lr;} /*특장점*/ .hr_adv{margin-top:120px;box-sizing:border-box;background:rgba(0, 118, 190, 0.05);padding:118px 0 120px;} .hr_adv .list{display: flex;flex-wrap:wrap;} .hr_adv .list > div{box-sizing:border-box;width:calc(100% / 3 - 27px);border-radius: 20px;background:var(--point-white);box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);position: relative;overflow:hidden;padding:49px 40px 131px;transition:all 0.3s;} .hr_adv .list > div + div{margin-left:40px;} .hr_adv .list h4{font-size:var(--title-30);color:var(--black-color03);font-weight:700;letter-spacing:-0.03em;transition:all 0.3s;} .hr_adv .list ul{text-align:left;font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);box-sizing:border-box;margin-top:21px;position: relative;z-index:3;} .hr_adv .list ul li{position: relative;padding-left:12px;font-size:89%;color:inherit;font-weight:inherit;box-sizing:border-box;letter-spacing:-0.04em;line-height:1.6;font-family:inherit;transition:all 0.3s;} .hr_adv .list ul li:before{width:4px;height:4px;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color06);position: absolute;left:0;top:12px;} .hr_adv .list ul li + li{margin-top:11px;} .hr_adv .list .icon{position: absolute;bottom:12px;right:12px;} /*주요기능*/ .hr_function{margin-top:122px;} .hr_function .sub_title .img{margin-top:29px;} #wrap .hr_function .business_cont_wrap .business_cont.on{display: block;} .hr_function .hr_func_tit{display: flex;box-sizing:border-box;border-radius: 10px;background:var(--point-white);box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);align-items: center;padding:46px 60px;} .hr_function .hr_func_tit dt{font-size:var(--title-30);color:var(--black-color01);font-weight:600;font-family: var(--font-type02);} .hr_function .hr_func_tit dd:before{width:1px;height:48px;content:"";background: #ddd;display: inline-block;margin:0 80px;} .hr_function .hr_func_tit dd{display: flex;align-items: center;} .hr_function .hr_func_tit dd ul{text-align:left;font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);box-sizing:border-box;} .hr_function .hr_func_tit dd ul li{position: relative;padding-left:12px;font-size:89%;color:inherit;font-weight:inherit;box-sizing:border-box;letter-spacing:-0.04em;line-height:1.6;font-family:inherit;transition:all 0.3s;} .hr_function .hr_func_tit dd ul li:before{width:4px;height:4px;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color06);position: absolute;left:0;top:12px;} .hr_function .hr_func_tit dd ul li + li{margin-top:8px;} .hr_function .img_wrap{margin-top:40px;display: flex;flex-wrap:wrap;text-align: center;} .hr_function .img_wrap li{width:calc(50% - 20px);} .hr_function .img_wrap li .img{width:100% !important;} .hr_function .img_wrap li + li{margin-left:40px;} .hr_function .img_wrap li p{font-size:var(--title-20);color:var(--black-color03);font-weight:600;margin-top:18px;} /*process*/ #wrap .business_process{margin-top:118px;} #wrap .business_process .sub_title h3{font-family: var(--font-type02);} #wrap .business_process ol{display: flex;flex-wrap:wrap;gap:40px;counter-reset:procNum;} #wrap .business_process ol > li{box-sizing:border-box;border-radius: 20px;border:1px solid #DDD;counter-increment:procNum;font-size:var(--title-30);color:var(--black-color01);font-weight:700;width:calc(100% / 3 - 27px);min-height:283px;padding:37px 40px;position: relative;font-family:var(--font-type02);background:var(--point-white);} #wrap .business_process ol > li:before{content:"0" counter(procNum);font-size:var(--title-80);color:var(--point-color06);font-weight:600;line-height:1;position: absolute;bottom:20px;right:20px;font-family:var(--font-type01);} #wrap .business_process ol h4{font-size:86%;color:inherit;font-weight:inherit;font-family:inherit;} #wrap .business_process ol .des{font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);box-sizing:border-box;margin-top:22px;} #wrap .business_process ol .des li{position: relative;padding-left:12px;font-size:79%;color:inherit;font-weight:inherit;box-sizing:border-box;letter-spacing:-0.04em;line-height:1.6;font-family:inherit;} #wrap .business_process ol .des li + li{margin-top:6px;} #wrap .business_process ol .des li:before{width:4px;height:4px;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color06);position: absolute;left:0;top:10px;} #wrap .business_process ol > li dl{display: flex;flex-wrap:wrap;margin-top:22px;} #wrap .business_process ol > li dl + dl{margin-top:12px;} #wrap .business_process ol > li dl dt{font-size:var(--title-20);color:var(--black-color03);font-weight:500;width:90px;} #wrap .business_process ol > li dl dd{width:calc(100% - 90px);box-sizing:border-box;padding-left:20px;} #wrap .business_process ol > li dl dd .des{margin-top:0;} #wrap .business_process ol > li:first-child{background:var(--point-color01);border-color:var(--point-color01);} #wrap .business_process ol > li:first-child:before{color:rgba(238, 238, 238, 0.2);} #wrap .business_process ol > li:first-child h4, #wrap .business_process ol > li:first-child .des li{color:var(--point-white);} #wrap .business_process ol > li:first-child .des li:before{background:var(--point-white);} @media only screen and (min-width:1024px) { /*특장점*/ .hr_adv .list > div:hover{background:var(--point-color01);box-shadow: 0px 4px 4px 0px rgba(0, 118, 190, 0.20);} .hr_adv .list > div:hover h4, .hr_adv .list > div:hover ul li{color:var(--point-white);} .hr_adv .list > div:hover ul li:before{background:var(--point-white);} } @media only screen and (max-width:1250px) { /*system*/ .hr_system .system_box .sub_system .system_cont{padding:30px 16px;} } @media only screen and (max-width:1024px) { /*system*/ .hr_system .system_box .sub_system{width:20%;} .hr_system .system_box .system_diagram{width:60%;padding:0 40px;} .hr_system .system_box .system_diagram .system_cont .chart_box{width:40%;} .hr_system .system_box .system_diagram .system_cont .chart_box ul li{width:100%;} .hr_system .system_box .system_diagram .system_cont .center{width:calc(20% - 20px);} .hr_system .system_box .sub_system.right dl dd ul li:before{top:10px;} /*특장점*/ .hr_adv{margin-top:100px;padding:100px 0;} .hr_adv .list > div{width:calc(100% / 3 - 14px);padding:40px 20px 140px;} .hr_adv .list > div + div{margin-left:21px;} .hr_adv .list ul li:before{top:10px;} .hr_adv .list .icon{width:50%;} /*주요기능*/ .hr_function{margin-top:100px;} .hr_function .hr_func_tit{padding:40px 30px;} .hr_function .hr_func_tit dd:before{margin:0 55px;} .hr_function .hr_func_tit dd ul li:before{top:11px;} /*process*/ #wrap .business_process{margin-top:100px;} #wrap .business_process ol{gap:21px;} #wrap .business_process ol > li{width:calc(100% / 3 - 14px);padding:30px 20px;min-height:26vw;} #wrap .business_process ol .des li:before{top:9px;} } @media only screen and (max-width:860px) { /*system*/ .hr_system .system_box .sub_system{width:100%;} .hr_system .system_box .sub_system .arw_box{top:auto;transform:rotate(90deg) translate(-50%);left:46%;} .hr_system .system_box .sub_system.left .arw_box{right:auto;bottom:-80px;} .hr_system .system_box .sub_system.right .arw_box{top:-110px;left:46%;} .hr_system .system_box .system_diagram{width:100%;padding:50px 0;} .hr_system .system_box .sub_system.left ul{display: flex;flex-wrap:wrap;gap:0 20px;} .hr_system .system_box .sub_system.left ul li{width:calc(25% - 15px);} .hr_system .system_box .sub_system.left ul li + li{margin:0;} .hr_system .system_box .system_diagram .system_cont .chart_box{width:45%;} .hr_system .system_box .system_diagram .system_cont .chart_box ul li{width:calc(50% - 5px);} .hr_system .system_box .system_diagram .system_cont .center{width:calc(10% - 20px);} .hr_system .system_box .sub_system.right dl dd ul li:before{top:9px;} /*특장점*/ .hr_adv .list > div{width:100%;} .hr_adv .list > div + div{margin:30px 0 0 0;} .hr_adv .list .icon{width:165px;} /*process*/ #wrap .business_process ol > li{width:calc(100% / 2 - 10.5px);} #wrap .business_process ol > li dl dt{width:82px;} #wrap .business_process ol > li dl dd{width:calc(100% - 82px);} } @media only screen and (max-width:640px) { /*특장점*/ .hr_adv .list ul li:before{top:9px;} /*주요기능*/ .hr_function{margin-top:80px;} .hr_function .sub_title .img{margin-top:15px;} .hr_function .sub_title .img img{height:50px;} .hr_function .hr_func_tit{padding:30px 20px;} .hr_function .hr_func_tit dd:before{margin:0 30px;} .hr_function .img_wrap li{width:calc(50% - 10px);} .hr_function .img_wrap li + li{margin-left:20px;} /*process*/ #wrap .business_process{margin-top:80px;} #wrap .business_process ol > li dl + dl{margin-top:18px;} #wrap .business_process ol > li dl dt{width:100%;} #wrap .business_process ol > li dl dt br{display: none;} #wrap .business_process ol > li dl dd{width:100%;padding:5px 0 0 0;} } @media only screen and (max-width:479px) { /*system*/ .hr_system .system_box .tit{height:50px;border-radius:5px;} .hr_system .system_box .sub_system .system_cont{border-radius:5px;} .hr_system .system_box .sub_system.left .system_cont{padding:20px 15px;} .hr_system .system_box .sub_system.left ul{margin-top:0;gap:15px;} .hr_system .system_box .sub_system.left ul li{width:calc(50% - 7.5px);} .hr_system .system_box .sub_system .arw_box{left:41%} .hr_system .system_box .sub_system.right .arw_box{top:-90px;left:41%;} .hr_system .system_box .system_diagram .system_cont{border-radius:5px;padding:20px 20px;} .hr_system .system_box .system_diagram .system_cont .chart_box{width:40%;} .hr_system .system_box .system_diagram .system_cont .chart_box .sub_chart + .sub_chart{margin-top:20px;} .hr_system .system_box .system_diagram .system_cont .chart_box ul li{width:100%;height:32px;} .hr_system .system_box .system_diagram .system_cont .center{width:calc(20% - 20px);} .hr_system .system_box .sub_system.right dl + dl{margin-top:15px;} .hr_system .system_box .sub_system.right dl dd{padding:11px 15px 20px;} .hr_system .system_box .sub_system.right dl dd ul li{padding-left:9px;} .hr_system .system_box .sub_system.right dl dd ul li:before{width:3px;height:3px;top:8px;} /*특장점*/ .hr_adv{margin-top:70px;padding:70px 0;} .hr_adv .list > div{border-radius:10px;padding:26px 20px 110px;} .hr_adv .list .icon{width:30%;text-align: right;} .hr_adv .list ul{margin-top:12px;} .hr_adv .list ul li{padding-left:9px;} .hr_adv .list ul li + li{margin-top:5px;} .hr_adv .list ul li:before{width:3px;height:3px;top:8px;} /*주요기능*/ .hr_function{margin-top:60px;} .hr_function .sub_title .img img{height:40px;} .hr_function .hr_func_tit{flex-direction: column;align-items: flex-start;border-radius:5px;} .hr_function .hr_func_tit dd{width:100%;box-sizing:border-box;border-top:1px solid #ddd;margin-top:16px;padding-top:20px;} .hr_function .hr_func_tit dd:before{display: none;} .hr_function .hr_func_tit dd ul li{padding-left:9px;} .hr_function .hr_func_tit dd ul li:before{width:3px;height:3px;top:9px;} .hr_function .img_wrap{margin-top:30px;} .hr_function .img_wrap li{width:100%;} .hr_function .img_wrap li + li{margin:15px 0 0 0;} .hr_function .img_wrap li p{margin-top:8px;} /*process*/ #wrap .business_process{margin-top:60px;} #wrap .business_process ol > li{width:100%;min-height:50vw;padding:25px 20px;border-radius:10px;} #wrap .business_process ol .des{margin-top:12px;} #wrap .business_process ol .des li{padding-left:9px;} #wrap .business_process ol .des li:before{width:3px;height:3px;top:8px;} #wrap .business_process ol > li dl{margin-top:12px;} } /*─────────────────────────────────────────────────────────── 사업영역 - BIZ ───────────────────────────────────────────────────────────*/ /*system*/ .biz_system{} .biz_system .system_box{box-sizing:border-box;border-radius: 10px;background:var(--point-white);box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10);display: flex;flex-wrap:wrap;padding:30px 30px;align-items: center;} .biz_system .system_box .baseline{width:27.7%;text-align: center;padding-bottom:21px;} .biz_system .system_box .baseline .biz_logo{} .biz_system .system_box .baseline .info_box{box-sizing:border-box;border-radius:5px;border:1px solid #ddd;overflow:hidden;font-size:var(--title-20);color:var(--point-white);font-weight:600;margin-top:31px;} .biz_system .system_box .baseline .info_box dt{width:100%;box-sizing:border-box;background:var(--point-color05);border-radius:5px;font-size:79%;color:inherit;font-weight:inherit;height:40px;display: flex;align-items: center;justify-content: center;text-align: center;} .biz_system .system_box .baseline .info_box dd{box-sizing:border-box;padding:20px 20px;} .biz_system .system_box .baseline .info_box ul{position: relative;font-size:var(--title-20);color:var(--black-color06);font-weight:400;display: flex;align-items: center;justify-content: space-between;} .biz_system .system_box .baseline .info_box ul:before{width:100%;height:1px;content:"";border-top:1px dashed var(--point-color01);position: absolute;left:0;top:50%;} .biz_system .system_box .baseline .info_box ul li{position: relative;display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;width:calc(50% - 20px);height:36px;background:#F1F3F4;border-radius:18px;font-size:79%;color:inherit;font-weight:inherit;} .biz_system .system_box .baseline .arw_box{margin:30px 0;box-sizing:border-box;display: flex;align-items: center;justify-content: center;font-size:var(--title-20);color:var(--black-color03);font-weight:600;padding-left:80px;} .biz_system .system_box .baseline .arw_box p{margin-left:15px;font-size:79%;color:inherit;font-weight:inherit;} .biz_system .system_box .baseline .sap_logo{} .biz_system .system_box .make_box{width:72.3%;box-sizing:border-box;padding-left:60px;position: relative;} .biz_system .system_box .make_box:before{width:1px;height:calc(80% - 5px);content:"";background: #ddd;position: absolute;left:60px;top:8%;} .biz_system .system_box .make_box dl{display: flex;flex-wrap:wrap;box-sizing:border-box;border-radius:5px;box-sizing:border-box;position: relative;padding-left:60px;} .biz_system .system_box .make_box dl:before{width:60px;height:1px;content:"";background: #ddd;position: absolute;top:50%;left:0;} .biz_system .system_box .make_box dl:nth-child(3):before{width:120px;left:-60px;} .biz_system .system_box .make_box dl + dl{margin-top:20px;} .biz_system .system_box .make_box dl dt{width:130px;box-sizing:border-box;border-radius:5px 0px 0px 5px;background:var(--point-color01);display: inline-flex;align-items: center;justify-content: center;font-size:var(--title-20);color:var(--point-white);font-weight:500;font-family:var(--font-type02);} .biz_system .system_box .make_box dl dt span{font-size:79%;color:inherit;font-weight:inherit;} .biz_system .system_box .make_box dl dd{box-sizing:border-box;width:calc(100% - 130px);border-radius:0 5px 5px 0;border:1px solid #ddd;border-left:none;padding:17px 30px 20px;font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);} .biz_system .system_box .make_box dl dd p{font-size:79%;color:inherit;font-weight:inherit;font-family:inherit;} .biz_system .system_box .make_box dl dd ul{display: flex;flex-wrap:wrap;gap:30px 60px;margin-top:13px;} .biz_system .system_box .make_box dl dd ul li{width:calc(100% / 3 - 40px);display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;height:36px;font-size:var(--title-20);color:var(--black-color06);font-weight:400;position: relative;} .biz_system .system_box .make_box dl dd ul li span{font-size:79%;color:inherit;font-weight:inherit;font-family:inherit;display: flex;align-items: center;justify-content: center;width:100%;height:100%;position: relative;z-index:3;background: #F1F3F4;box-sizing:border-box;border-radius:18px;} .biz_system .system_box .make_box dl dd ul li + li:before{width:60px;height:1px;border-top:1px dashed var(--point-color01);content:"";position: absolute;left:-60px;top:50%;} .biz_system .system_box .make_box dl dd ul li + li:after{content:"";border-left:5px solid var(--point-color01);border-top:3px solid transparent;border-bottom:3px solid transparent;position: absolute;left:-5px;top:42.5%;} .biz_system .system_box .make_box dl.srm dd ul li:nth-child(2){order:4;} .biz_system .system_box .make_box dl.srm dd ul li:nth-child(3){order:5;} .biz_system .system_box .make_box dl.srm dd ul li:nth-child(4){order:2;} .biz_system .system_box .make_box dl.srm dd ul li:nth-child(5){order:3;} .biz_system .system_box .make_box dl.srm dd ul li:nth-child(6){order:6;} .biz_system .system_box .make_box dl.srm dd ul li:nth-child(2):before, .biz_system .system_box .make_box dl.srm dd ul li:nth-child(6):before{width:1px;height:30px;top:-30px;left:50%;transform:translate(-50%);border:none;border-left:1px dashed var(--point-color01);} .biz_system .system_box .make_box dl.srm dd ul li:nth-child(4):before{width:1px;height:30px;bottom:-30px;left:50%;transform:translate(-50%);border:none;border-left:1px dashed var(--point-color01);top:auto;} .biz_system .system_box .make_box dl.srm dd ul li:nth-child(2):after, .biz_system .system_box .make_box dl.srm dd ul li:nth-child(6):after{border:none;border-top:5px solid var(--point-color01);border-left:3px solid transparent;border-right:3px solid transparent;position: absolute;left:49.5%;top:-5px;transform:translate(-50%);} .biz_system .system_box .make_box dl.srm dd ul li:nth-child(4):after{border:none;border-bottom:5px solid var(--point-color01);border-left:3px solid transparent;border-right:3px solid transparent;position: absolute;left:49.5%;top:auto;bottom:-5px;transform:translate(-50%);} .biz_system .system_ft{margin-top:20px;height:70px;display: flex;box-sizing:border-box;align-items: center;justify-content: center;border-radius:10px;font-size:var(--title-20);color:var(--point-white);font-weight:500;background:var(--black-color03);} .biz_system .system_ft + .system_ft{background:var(--point-color01);} .biz_system .system_ft span{font-size:120%;color:inherit;font-weight:inherit;} /*주요기능*/ .biz_func{box-sizing:border-box;background:#f5f5f5;margin-top:118px;padding:120px 0;} .biz_func ul{display: flex;flex-wrap:wrap;gap:0 20px;} .biz_func ul li{width:calc(20% - 16px);box-sizing:border-box;border-radius: 20px;background:var(--point-white);box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);display: inline-flex;flex-direction: column;font-size:var(--title-20);color:var(--black-color03);font-weight:400;text-align: center;font-family:var(--font-type02);padding:53px 10px 52px;} .biz_func ul li .icon{height:60px;display: flex;align-items: center;justify-content: center;} .biz_func ul li p{font-size:89%;color:inherit;font-weight:inherit;margin-top:21px;line-height:1.5;font-family:inherit;} /*구축사례*/ #wrap .biz_ex{margin-top:121px;} .biz_ex .ex_hd{box-sizing:border-box;border-radius: 20px;background: rgba(0, 118, 190, 0.05);padding:26px 30px 39px;} .biz_ex .ex_hd .ex_txt{display: flex;flex-wrap:wrap;} .biz_ex .ex_hd .ex_txt > div{width:calc(50% - 15px);box-sizing:border-box;border-radius: 10px;background:var(--point-white);box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);padding:25px 30px;} .biz_ex .ex_hd .ex_txt > div + div{margin-left:30px;} .biz_ex .ex_hd .ex_txt p{font-size:var(--title-20);color:var(--black-color03);font-weight:400;font-family:var(--font-type02);display: flex;flex-wrap:wrap;line-height:1.6;letter-spacing:-0.03em;} .biz_ex .ex_hd .ex_txt p:before{width:21px;height:17px;content:"";background:url('../images/sub/icon_chk_b.svg')no-repeat center;background-size:auto 100%;display: inline-block;margin-top:6px;} .biz_ex .ex_hd .ex_txt p span{font-size:inherit;color:inherit;font-weight:inherit;font-family:inherit;display: inline-block;width:calc(100% - 21px);box-sizing:border-box;padding-left:14px;} .biz_ex .ex_hd ul{display: flex;flex-wrap:wrap;margin-top:40px;} .biz_ex .ex_hd ul li{width:20%;box-sizing:border-box;position: relative;text-align: center;font-size:var(--title-20);color:var(--black-color05);font-weight:400;font-family:var(--font-type02);} .biz_ex .ex_hd ul li + li:before{width:1px;height:60px;content:"";background: #ddd;position: absolute;left:0;top:50%;transform:translateY(-50%);} .biz_ex .ex_hd ul li .icon{height:40px;display: flex;align-items: center;justify-content: center;} .biz_ex .ex_hd ul li .icon img{max-height:100%;} .biz_ex .ex_hd ul li p{font-size:89%;color:inherit;font-weight:inherit;font-family:inherit;margin-top:17px;line-height:1.6;} .biz_ex .ex_cont{margin-top:38px;padding-bottom:10px;} .biz_ex .ex_cont .dots{text-align: right;display: flex;align-items: center;justify-content: flex-end;} .biz_ex .ex_cont .dots p{font-size:var(--title-20);color:var(--black-color00);font-weight:400;font-family:var(--font-type02);display: inline-flex;align-items: center;} .biz_ex .ex_cont .dots p + p{margin-left:28px;} .biz_ex .ex_cont .dots p:before{display: inline-block;vertical-align: middle;width:16px;height:16px;content:"";box-sizing:border-box;border-radius:100%;background:var(--point-color01);margin-right:13px;} .biz_ex .ex_cont .dots p + p:before{background:var(--point-color04);} .biz_ex .ex_cont .list{display: flex;flex-wrap:wrap;gap:0 20px;margin-top:18px;} .biz_ex .ex_cont .list > li{box-sizing:border-box;width:calc(25% - 15px);border-radius: 30px;border: 1px solid #EEE;background:var(--point-white);box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);padding:19px 20px 50px;} .biz_ex .ex_cont .list > li span{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;width:100%;height:60px;box-sizing:border-box;border-radius:30px;font-size:var(--title-20);color:var(--point-white);font-weight:600;font-family:var(--font-type02);} .biz_ex .ex_cont .list > li .erp_cont{background:var(--point-color01);} .biz_ex .ex_cont .list > li .scm_cont{background:var(--point-color04);} .biz_ex .ex_cont .list .img{box-sizing:border-box;padding:0 18px;margin-top:30px;text-align: center;} .biz_ex .ex_cont .list ul{font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);box-sizing:border-box;margin-top:31px;padding:0 10px;} .biz_ex .ex_cont .list ul li{position: relative;padding-left:12px;font-size:79%;color:inherit;font-weight:inherit;box-sizing:border-box;letter-spacing:-0.04em;line-height:1.6;font-family:inherit;} .biz_ex .ex_cont .list ul li:before{width:4px;height:4px;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color06);position: absolute;left:0;top:10px;} .biz_ex .ex_cont .list ul li + li{margin-top:9px;} @media only screen and (max-width:1200px) { /*system*/ .biz_system .system_box .baseline .arw_box{padding-left:70px;} .biz_system .system_box .make_box dl dd{padding:17px 20px 20px;} .biz_system .system_box .make_box dl dd ul{gap:30px 30px;} .biz_system .system_box .make_box dl dd ul li{width:calc(100% / 3 - 20px);} /*주요기능*/ .biz_func ul li p br{display: none;} } @media only screen and (max-width:1024px) { /*system*/ .biz_system .system_box .baseline{width:100%;} .biz_system .system_box .baseline .info_box{margin:0 110px;} .biz_system .system_box .make_box{width:100%;padding:50px 0 0 0;} .biz_system .system_box .make_box dl{padding-left:0;} .biz_system .system_box .make_box:before, .biz_system .system_box .make_box dl:before{display: none;} /*주요기능*/ .biz_func{margin-top:100px;padding:100px 0;} .biz_func ul{justify-content: center;gap:20px 20px;} .biz_func ul li{width:calc(100% / 3 - 20px);} /*구축사례*/ #wrap .biz_ex{margin-top:100px;} .biz_ex .ex_hd .ex_txt p br{display: none;} .biz_ex .ex_hd ul{justify-content: center;gap:15px 0;} .biz_ex .ex_hd ul li{padding:0 10px;width:calc(100% / 3);} .biz_ex .ex_hd ul li:nth-child(4):before{display: none;} .biz_ex .ex_cont .list{gap:20px;} .biz_ex .ex_cont .list > li{width:calc(50% - 10px);} .biz_ex .ex_cont .list ul li:before{top:9px;} } @media only screen and (max-width:767px) { .biz_ex .ex_hd .ex_txt > div{width:100%;} .biz_ex .ex_hd .ex_txt > div + div{margin:20px 0 0 0;} } @media only screen and (max-width:640px) { /*system*/ .biz_system .system_box{padding:30px 20px;} .biz_system .system_box .baseline .info_box{width:100%;margin:0;} .biz_system .system_box .make_box dl dt{width:100%;height:32px;border-radius:5px;} .biz_system .system_box .make_box dl dt br{display: none;} .biz_system .system_box .make_box dl dd{border:1px solid #ddd;border-top:none;width:100%;border-radius:5px;} .biz_system .system_ft{height:60px;} /*주요기능*/ .biz_func{margin-top:80px;padding:80px 0;} .biz_func ul li{width:calc(100% / 2 - 10px);padding:30px 10px 30px;} /*구축사례*/ #wrap .biz_ex{margin-top:80px;} .biz_ex .ex_hd{padding:26px 20px 30px;} .biz_ex .ex_hd .ex_txt > div{padding:20px 15px;} .biz_ex .ex_hd .ex_txt p:before{width:15px;height:13px;margin-top:5px;} .biz_ex .ex_hd .ex_txt p span{width:calc(100% - 15px);padding-left:8px;} .biz_ex .ex_hd ul li p br{display: none;} .biz_ex .ex_cont .list > li span{height:50px;} .biz_ex .ex_cont .list ul li:before{top:7px;} } @media only screen and (max-width:479px) { /*system*/ .biz_system .system_box{border-radius:5px;} .biz_system .system_box .baseline .info_box dd{padding:15px;} .biz_system .system_box .baseline .arw_box{margin:15px 0;} .biz_system .system_box .baseline .biz_logo img, .biz_system .system_box .baseline .sap_logo img{width:50%;} .biz_system .system_box .make_box{padding-top:30px;} .biz_system .system_box .make_box dl dd ul{gap:20px 21px;} .biz_system .system_box .make_box dl dd ul li{width:calc(100% / 3 - 14px);} .biz_system .system_box .make_box dl dd ul li span{padding:0 5px;} .biz_system .system_ft{margin-top:15px;border-radius:5px;height:50px;} /*주요기능*/ .biz_func{margin-top:70px;padding:70px 0;} .biz_func ul{gap:15px;} .biz_func ul li{width:calc(50% - 7.5px);border-radius:10px;} .biz_func ul li .icon{height:46px;} .biz_func ul li .icon img{max-height:100%;} .biz_func ul li p{margin-top:10px;} /*구축사례*/ #wrap .biz_ex{margin-top:60px;} .biz_ex .ex_hd{border-radius:10px;} .biz_ex .ex_hd ul{gap:20px 0;} .biz_ex .ex_hd ul li{width:50%;} .biz_ex .ex_hd ul li .icon{height:34px;} .biz_ex .ex_hd ul li:before{display: none;} .biz_ex .ex_cont{margin-top:25px;} .biz_ex .ex_cont .dots p + p{margin-left:15px;} .biz_ex .ex_cont .dots p:before{width:10px;height:10px;margin-right:6px;} .biz_ex .ex_cont .list > li{width:100%;border-radius:10px;padding:19px 20px 30px;} .biz_ex .ex_cont .list > li span{height:40px;} .biz_ex .ex_cont .list .img{padding:0;} .biz_ex .ex_cont .list ul{margin-top:20px;padding:0;} .biz_ex .ex_cont .list ul li{padding-left:9px;} .biz_ex .ex_cont .list ul li + li{margin-top:5px;} .biz_ex .ex_cont .list ul li:before{width:3px;height:3px;} } @media only screen and (max-width:340px) { /*system*/ .biz_system .system_box .make_box dl dd{padding:17px 10px 20px;} } /*─────────────────────────────────────────────────────────── 사업영역 - Cloud ───────────────────────────────────────────────────────────*/ /*system*/ .cloud_system{} .cloud_system .list{} .cloud_system .list > li{display: flex;flex-wrap:wrap;align-items: center;} .cloud_system .list > li + li{margin-top:100px;} .cloud_system .list > li .img{box-sizing:border-box;width:46.9%;height:0;padding-bottom:31.2%;position: relative;overflow:hidden;border-radius:20px;transition:all 0.3s;} .cloud_system .list > li .img img{width:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(1);transition:all 0.3s;} .cloud_system .list > li .txt_box{width:53.1%;box-sizing:border-box;padding-left:80px;} .cloud_system .list > li .txt_box h4{font-size:var(--title-40);color:var(--black-color00);font-weight:700;font-family:var(--font-type02);} .cloud_system .list > li .txt_box ul{font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);box-sizing:border-box;margin-top:22px;} .cloud_system .list > li .txt_box ul li{position: relative;padding-left:12px;font-size:89%;color:inherit;font-weight:inherit;box-sizing:border-box;letter-spacing:-0.04em;line-height:1.6;font-family:inherit;} .cloud_system .list > li .txt_box ul li:before{width:4px;height:4px;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color06);position: absolute;left:0;top:10px;} .cloud_system .list > li .txt_box ul li + li{margin-top:9px;} .cloud_system .list > li:nth-of-type(2n){flex-direction: row-reverse;} .cloud_system .list > li:nth-of-type(2n) .txt_box{padding:0 80px 0 60px;} /*service*/ .cloud_service{} .cloud_service .service_txt{display: flex;flex-wrap:wrap;} .cloud_service .service_txt > div{width:calc(100% / 3 - 20px);box-sizing:border-box;border-radius: 10px;background:var(--point-white);box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);padding:25px 30px;} .cloud_service .service_txt > div + div{margin-left:30px;} .cloud_service .service_txt p{font-size:var(--title-20);color:var(--black-color03);font-weight:400;font-family:var(--font-type02);display: flex;flex-wrap:wrap;line-height:1.6;letter-spacing:-0.03em;} .cloud_service .service_txt p:before{width:21px;height:17px;content:"";background:url('../images/sub/icon_chk_b.svg')no-repeat center;background-size:auto 100%;display: inline-block;margin-top:6px;} .cloud_service .service_txt p span{font-size:inherit;color:inherit;font-weight:inherit;font-family:inherit;display: inline-block;width:calc(100% - 21px);box-sizing:border-box;padding-left:14px;} .cloud_service .cont{box-sizing:border-box;margin-top:40px;border-radius: 20px;border: 1px solid #EEE;background:var(--point-white);box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);padding:50px 50px 44px;} .cloud_service .cont a{display: block;width:100%;height:100%;pointer-events:none;} .cloud_service .cont img{} .sec_service{background: #F5F5F5;margin-top:162px;padding:120px 0;} .vac_service{margin-top:109px;} .vac_service .service_txt > div{border:1px solid #eee;} .pay_service{background: linear-gradient(180deg, #F5F5F5 0%, #FFF 100%);margin-top:120px;padding:110px 0 10px;} @media only screen and (min-width:1024px) { /*system*/ .cloud_system .list > li .img:hover{box-shadow: 4px 8px 8px 0px rgba(0, 0, 0, 0.05);} .cloud_system .list > li .img:hover img{transform:translate(-50%, -50%) scale(1.05);} } @media only screen and (max-width:1024px) { /*system*/ .cloud_system .list > li + li{margin-top:80px;} .cloud_system .list > li .txt_box{padding-left:30px;} .cloud_system .list > li .txt_box h4 br{display: none;} .cloud_system .list > li .txt_box ul li br{display: none;} .cloud_system .list > li:nth-of-type(2n) .txt_box{padding:0 30px 0 30px;} /*service*/ .cloud_service .service_txt > div{width:calc(100% / 3 - 10px);padding:20px 15px;} .cloud_service .service_txt > div + div{margin-left:15px;} .cloud_service .service_txt p br{display: none;} .sec_service{margin-top:120px;padding:100px 0;} .vac_service{margin-top:90px;} } @media only screen and (max-width:640px) { /*system*/ .cloud_system .list > li{flex-direction: column !important;} .cloud_system .list > li .img{width:100%;padding-bottom:66%;} .cloud_system .list > li .txt_box{width:100%;padding:30px 0 0 0 !important;} .cloud_system .list > li .txt_box ul{margin-top:5px;} /*service*/ .cloud_service .service_txt > div{width:100%;} .cloud_service .service_txt > div + div{margin:15px 0 0 0;} .cloud_service .service_txt p:before{width:15px;height:12px;} .cloud_service .service_txt p span{width:calc(100% - 15px);padding-left:9px;} .cloud_service .cont{margin-top:25px;padding:30px 20px;} .cloud_service .cont a{pointer-events:initial;} .sec_service{margin-top:90px;padding:80px 0;} .vac_service{margin-top:70px;} } @media only screen and (max-width:479px) { .cloud_system .list > li + li{margin-top:60px;} .cloud_system .list > li .img{border-radius:10px;} .cloud_system .list > li .txt_box{padding:15px 0 0 0 !important;} .cloud_system .list > li .txt_box ul li + li{margin-top:4px;} .cloud_system .list > li .txt_box ul li:before{width:3px;height:3px;top:9px;} .cloud_service .service_txt > div{padding:15px 15px;border-radius:5px;} .cloud_service .cont{border-radius:10px;} .sec_service{margin-top:60px;padding:60px 0;} .vac_service{margin-top:50px;} } /*─────────────────────────────────────────────────────────── 사업영역 - AMS ───────────────────────────────────────────────────────────*/ .ams_help{margin-top:121px;background:#f5f5f5;padding:120px 0;} .ams_help .help_box{box-sizing:border-box;border-radius: 10px;border: 1px solid #EEE;background:var(--point-white);box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);padding:48px 50px;display: flex;flex-wrap:wrap;gap:0 60px;} .ams_help .help_box .process_box{width:calc((100% / 3 - 10px)*2);box-sizing:border-box;display: flex;flex-wrap:wrap;position: relative;} .ams_help .help_box .process_box .process{width:calc(50% - 30px);height:100%;box-sizing:border-box;border-radius: 5px;border: 1px solid #DDD;background:var(--point-white);border-top:none;} .ams_help .help_box .process_box .process h4{display: flex;width:100%;height:50px;align-items: center;justify-content: center;box-sizing:border-box;border-radius:5px;background:var(--point-color01);text-align: center;font-size:var(--title-20);color:var(--point-white);font-weight:600;font-family:var(--font-type02);} .ams_help .help_box .process_box .process h4 span{font-size:79%;color:inherit;font-weight:inherit;font-family:inherit;} .ams_help .help_box .process_box .process.pi{} .ams_help .help_box .process_box .process .pi_box{box-sizing:border-box;padding:30px 30px;display: flex;flex-wrap:wrap;} .ams_help .help_box .process_box .process .pi_box > div{box-sizing:border-box;border-radius: 10px;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);width:calc(50% - 15px);} .ams_help .help_box .process_box .process .pi_box > div + div{margin-left:30px;} .ams_help .help_box .process_box .process .pi_box .left{padding:10px;} .ams_help .help_box .process_box .process .pi_box .left p{width:100%;height:76px;display: flex;box-sizing:border-box;align-items: center;justify-content: center;border-radius: 10px;background: #F1F3F4;text-align: center;font-size:var(--title-20);color:var(--black-color06);font-weight:400;} .ams_help .help_box .process_box .process .pi_box .left p + p{margin-top:10px;} .ams_help .help_box .process_box .process .pi_box .left p span{font-size:79%;color:inherit;font-weight:inherit;} .ams_help .help_box .process_box .process .pi_box .right{text-align: center;padding:16px 10px;} .ams_help .help_box .process_box .process .pi_box .right > div{font-size:var(--title-20);color:var(--black-color03);font-weight:400;font-family:var(--font-type02);} .ams_help .help_box .process_box .process .pi_box .right > div + div{margin-top:33px;} .ams_help .help_box .process_box .process .pi_box .right > div p{font-size:79%;color:inherit;font-weight:inherit;font-family:inherit;margin-top:6px;} .ams_help .help_box .process_box .arw{width:60px;text-align: center;align-self: center;font-size:var(--title-20);color:var(--black-color03);font-weight:400;padding-top:22px;} .ams_help .help_box .process_box .arw span{display: block;font-size:75%;color:inherit;font-weight:inherit;margin-bottom:3px;} .ams_help .help_box .process_box .process.desk{text-align: center;} .ams_help .help_box .process_box .process.desk .desk_title{font-size:var(--title-20);color:var(--black-color03);font-weight:400;margin-top:24px;} .ams_help .help_box .process_box .process.desk .desk_title span{font-size:79%;color:inherit;font-weight:inherit;} .ams_help .help_box .process_box .process.desk .desk_title h5{font-size:89%;color:inherit;font-weight:600;} .ams_help .help_box .process_box .process.desk ul{font-size:var(--title-20);color:var(--black-color06);font-weight:400;box-sizing:border-box;padding:18px 30px 30px;} .ams_help .help_box .process_box .process.desk ul li{display: flex;box-sizing:border-box;align-items: center;justify-content: center;background:#F1F3F4;height:40px;border-radius:20px;font-size:79%;color:inherit;font-weight:inherit;} .ams_help .help_box .process_box .process.desk ul li + li{margin-top:10px;} .ams_help .help_box .erp_box{width:calc(100% / 3 - 40px);box-sizing:border-box;border-radius: 5px;background: rgba(0, 118, 190, 0.05);padding:30px 30px;} .ams_help .help_box .erp_box .part{display: flex;flex-wrap:wrap;} .ams_help .help_box .erp_box .part dl{box-sizing:border-box;width:calc(50% - 5px);border-radius: 10px;background:var(--point-white);box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);overflow:hidden;} .ams_help .help_box .erp_box .part dl + dl{margin-left:10px;} .ams_help .help_box .erp_box .part dl dt{display: flex;text-align: center;align-items: center;justify-content: center;height:40px;box-sizing:border-box;border-radius:5px 5px 0 0;background:var(--point-color02);font-size:var(--title-20);color:var(--point-white);font-weight:600;} .ams_help .help_box .erp_box .part dl dt span{font-size:79%;color:inherit;font-weight:inherit;} .ams_help .help_box .erp_box .part dl dd{box-sizing:border-box;padding:10px 10px;} .ams_help .help_box .erp_box .part dl dd ul{font-size:var(--title-20);color:var(--black-color06);font-weight:400;} .ams_help .help_box .erp_box .part dl dd ul li{box-sizing:border-box;border-radius: 5px;border: 1px solid #DDD;display: flex;align-items: center;justify-content: center;text-align: center;height:40px;font-size:75%;color:inherit;font-weight:inherit;} .ams_help .help_box .erp_box .part dl dd ul li + li{margin-top:10px;} .ams_help .help_box .erp_box > ul{font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);box-sizing:border-box;margin-top:32px;} .ams_help .help_box .erp_box > ul li{position: relative;padding-left:12px;font-size:79%;color:inherit;font-weight:inherit;box-sizing:border-box;letter-spacing:-0.05em;font-family:inherit;} .ams_help .help_box .erp_box > ul li + li{margin-top:13px;} .ams_help .help_box .erp_box > ul li:before{width:4px;height:4px;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color06);position: absolute;left:0;top:8px;} .ams_help .help_box .erp_box > ul li span{display: block;font-size:89%;color:var(--black-color09);font-weight:inherit;box-sizing:border-box;font-family:inherit;margin-top:2px;} /*table*/ #wrap .ams_type{margin-top:121px;} .ams_type .table_container{} .ams_type .table_container > span{display: none;} .ams_type .table_container table{} .ams_type .table_container table thead tr{font-size:var(--title-20);color:var(--black-color03);font-weight:500;} .ams_type .table_container table thead tr th{box-sizing:border-box;vertical-align: middle;text-align: center;border-bottom:1px solid #ddd;background: #f5f5f5;border-top:1px solid var(--black-color03);font-size:89%;color:inherit;font-weight:inherit;padding:17px 0;} .ams_type .table_container table thead tr th + th{border-left:1px solid #ddd;} .ams_type .table_container table tbody tr{font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);} .ams_type .table_container table tbody tr th, .ams_type .table_container table tbody tr td{box-sizing:border-box;vertical-align: middle;text-align: center;font-size:89%;color:inherit;font-weight:inherit;font-family:inherit;border-bottom:1px solid #ddd;padding:13px 10px 13px 10px;} .ams_type .table_container table tbody tr.sep_quote th, .ams_type .table_container table tbody tr.sep_quote td{background:rgba(135, 179, 201, 0.10);;} .ams_type .table_container table tbody tr th{color:var(--black-color03);font-weight:500;} .ams_type .table_container table tbody tr td{border-left:1px solid #ddd;} .ams_type .table_container table tbody tr td span{display: block;font-size:inherit;color:inherit;font-weight:inherit;text-indent:14px;font-family:inherit;} .ams_type .table_container table tbody tr td.ta_left{padding-left:20px;} /*echoline*/ #wrap .ams_echoline{margin-top:120px;} .ams_echoline .support_box{display: flex;flex-wrap:wrap;gap:20px;} .ams_echoline .support_box dl{width:calc(20% - 16px);box-sizing:border-box;overflow:hidden;border-radius:20px;box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);background:var(--point-white);border:1px solid #eee;border-top:none;} .ams_echoline .support_box dl dt{box-sizing:border-box;border-radius:20px 20px 0 0;display: flex;align-items: center;justify-content: center;text-align: center;height:60px;font-size:var(--title-20);color:var(--point-white);font-weight:600;background:var(--black-color03);} .ams_echoline .support_box dl dd{box-sizing:border-box;border-radius:0 0 20px 20px;padding:20px 20px;} .ams_echoline .support_box dl dd ul{font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);box-sizing:border-box;} .ams_echoline .support_box dl dd ul li{position: relative;padding-left:12px;font-size:79%;color:inherit;font-weight:inherit;box-sizing:border-box;letter-spacing:-0.05em;font-family:inherit;} .ams_echoline .support_box dl dd ul li + li{margin-top:13px;} .ams_echoline .support_box dl dd ul li:before{width:4px;height:4px;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color06);position: absolute;left:0;top:8px;} .ams_echoline .cont{margin-top:40px;box-sizing:border-box;border-radius: 20px;border: 1px solid #EEE;background:var(--point-white);box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);padding:50px 50px;text-align: center;} .ams_echoline .cont a{pointer-events:none;} /*remote*/ .ams_remote{background:url('../images/sub/remote_img.jpg')no-repeat center;background-size:cover;margin-top:120px;padding:100px 0 119px;} .ams_remote .w_custom{text-align: center;} .ams_remote h3{font-size:var(--title-50);color:var(--point-white);font-weight:700;} .ams_remote ol{counter-reset:remoteNum;display: flex;flex-wrap:wrap;justify-content: center;margin-top:19px;} .ams_remote ol li{counter-increment:remoteNum;display: inline-flex;align-items: center;font-size:var(--title-20);color:var(--point-white);font-weight:300;} .ams_remote ol li + li{margin-left:30px;} .ams_remote ol li:before{content:counter(remoteNum);width:30px;height:30px;box-sizing:border-box;border-radius:100%;display: inline-flex;align-items: center;justify-content: center;font-size:89%;color:inherit;font-weight:inherit;background:var(--point-color01);} .ams_remote ol li p{font-size:inherit;color:inherit;font-weight:inherit;padding-left:12px;font-family:var(--font-type02);} .ams_remote .more_box{margin-top:60px;} .ams_remote .main_more{width:247px;font-weight:500;} .ams_remote .main_more span{color:var(--point-white);} .ams_remote .main_more em:before, .ams_remote .main_more em:after{background:var(--point-white);} @media only screen and (max-width:1200px) { .ams_help .help_box{padding:40px 30px;gap:0 42px;} .ams_help .help_box .process_box{width:calc((100% / 3 - 7px)*2);} .ams_help .help_box .process_box .process .pi_box{padding:30px 20px;} .ams_help .help_box .process_box .process .pi_box > div{} .ams_help .help_box .process_box .process .pi_box > div + div{margin-left:20px;} .ams_help .help_box .process_box .process.desk ul{padding:18px 20px 30px;} .ams_help .help_box .erp_box{padding:30px 20px;width:calc(100% / 3 - 28px);} } @media only screen and (max-width:1024px) { .ams_help{margin-top:100px;padding:100px 0;} .ams_help .help_box .process_box{width:100%;} .ams_help .help_box .erp_box{width:100%;margin-top:30px;} .ams_help .help_box .erp_box > ul li:before{top:7px;} /*table*/ #wrap .ams_type{margin-top:100px;} /*echo*/ #wrap .ams_echoline{margin-top:100px;} .ams_echoline .support_box{justify-content: center;} .ams_echoline .support_box dl{width:calc(100% / 3 - 27px);} .ams_echoline .support_box dl dd ul li:before{top:7px;} /*remote*/ .ams_remote{margin-top:100px;padding:90px 0 100px;;} } @media only screen and (max-width:860px) { .ams_help .help_box .process_box .process .pi_box > div{width:100%;display: flex;flex-wrap:wrap;gap:10px;} .ams_help .help_box .process_box .process .pi_box > div + div{margin:20px 0 0 0;} .ams_help .help_box .process_box .process .pi_box .left p{width:calc(50% - 5px);} .ams_help .help_box .process_box .process .pi_box .left p + p{margin:0;} .ams_help .help_box .process_box .process .pi_box .right > div{width:calc(50% - 5px);} .ams_help .help_box .process_box .process .pi_box .right > div + div{margin:0;} .ams_help .help_box .process_box .process .pi_box .right > div .icon{display: flex;align-items: center;justify-content: center;height:30px;} .ams_help .help_box .process_box .process .pi_box .right > div .icon img{max-height:100%;} /*table*/ .ams_type .table_container > span{display: block;font-size:14px;color:var(--black-color03);font-weight:400;margin-bottom:15px;} .ams_type .table_container table{width:1100px;} #wrap .ams_type .swiper-pagination-progressbar{position:relative;margin-top:20px;} #wrap .ams_type .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--black-color00);} } @media only screen and (max-width:640px) { .ams_help{margin-top:80px;padding:80px 0;} .ams_help .help_box{padding:30px 20px;} .ams_help .help_box .process_box .process{width:100%;height:auto;} .ams_help .help_box .process_box .arw{padding:20px 0 30px;width:100%;} .ams_help .help_box .process_box .arw span{margin-bottom:26px;} .ams_help .help_box .process_box .arw img{transform:rotate(90deg);} /*table*/ #wrap .ams_type{margin-top:80px;} .ams_type .table_container table{width:800px;} /*echo*/ #wrap .ams_echoline{margin-top:80px;} .ams_echoline .support_box dl{width:calc(50% - 10px);} .ams_echoline .cont{padding:30px 30px;} .ams_echoline .cont a{pointer-events:initial;} /*remote*/ .ams_remote{margin-top:80px;padding:70px 0 80px;} .ams_remote .more_box{margin-top:30px;} } @media only screen and (max-width:479px) { .ams_help{margin-top:60px;padding:60px 0;} .ams_help .help_box{border-radius:5px;} .ams_help .help_box .process_box .process h4{height:40px;} .ams_help .help_box .process_box .process .pi_box{padding:20px 20px;} .ams_help .help_box .process_box .process .pi_box > div{border-radius:5px;} .ams_help .help_box .process_box .process .pi_box .left p{height:60px;} .ams_help .help_box .process_box .process.desk .desk_title{margin-top:15px;} .ams_help .help_box .process_box .process.desk ul{padding:10px 20px 20px;} .ams_help .help_box .process_box .process.desk ul li{height:32px;} .ams_help .help_box .erp_box{margin-top:20px;padding:20px 20px;} .ams_help .help_box .erp_box .part dl{border-radius:5px;} .ams_help .help_box .erp_box .part dl dt{height:32px;} .ams_help .help_box .erp_box .part dl dd ul li{height:32px;} .ams_help .help_box .erp_box .part dl dd ul li + li{margin-top:5px;} .ams_help .help_box .erp_box > ul{margin-top:20px;} .ams_help .help_box .erp_box > ul li{padding-left:9px;} .ams_help .help_box .erp_box > ul li + li{margin-top:9px;} .ams_help .help_box .erp_box > ul li:before{width:3px;height:3px;top:6px;} /*table*/ #wrap .ams_type{margin-top:60px;} .ams_type .table_container table{width:600px;} /*echo*/ #wrap .ams_echoline{margin-top:60px;} .ams_echoline .support_box{gap:15px;} .ams_echoline .support_box dl{border-radius:10px;} .ams_echoline .support_box dl dt{border-radius:10px 10px 0 0;height:48px;padding:0 10px;} .ams_echoline .support_box dl dd{border-radius:0 0 10px 10px;padding:14px 12px;} .ams_echoline .support_box dl dd ul li{padding-left:8px;} .ams_echoline .support_box dl dd ul li:before{width:3px;height:3px;} .ams_echoline .cont{margin-top:40px;padding:20px 20px;border-radius:10px;} /*remote*/ .ams_remote{margin-top:60px;padding:60px 0 70px;} .ams_remote ol{justify-content: flex-start;} .ams_remote ol li{flex-wrap:wrap;align-items: flex-start;width:100%;} .ams_remote ol li p{padding-left:8px;width:calc(100% - 22px);box-sizing:border-box;text-align:left;} .ams_remote ol li:before{width:22px;height:22px;} .ams_remote ol li + li{margin:10px 0 0 0;} .ams_remote .main_more{width:170px;} } /*─────────────────────────────────────────────────────────── 사업영역 - OCR ───────────────────────────────────────────────────────────*/ /*process*/ #wrap .ocr_process{} .ocr_process ol{} .ocr_process ol > li{display: flex;flex-wrap:wrap;box-sizing:border-box;border-radius:20px;border:1px solid #ddd;padding:45px 50px;align-items: center;} .ocr_process ol > li + li{margin-top:50px;} .ocr_process .txt_box{width:43.6%;box-sizing:border-box;padding-right:40px;font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);} .ocr_process .txt_box > span{font-size:inherit;color:var(--point-color04);font-weight:600;font-family:inherit;} .ocr_process .txt_box h4{font-size:var(--title-30);color:var(--black-color01);font-weight:600;font-family:inherit;margin-top:30px;} .ocr_process .txt_box > p{font-size:89%;color:inherit;font-weight:inherit;font-family:inherit;margin-top:16px;} .ocr_process .txt_box .list{font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);box-sizing:border-box;margin-top:25px;} .ocr_process .txt_box .list li{position: relative;padding-left:12px;font-size:79%;color:inherit;font-weight:inherit;box-sizing:border-box;letter-spacing:-0.05em;font-family:inherit;} .ocr_process .txt_box .list li + li{margin-top:7px;} .ocr_process .txt_box .list li:before{width:4px;height:4px;content:"";box-sizing:border-box;border-radius:100%;background:var(--black-color06);position: absolute;left:0;top:8px;} .ocr_process .program{margin-top:23px;} .ocr_process .program li{display:inline-flex;flex-wrap:wrap;box-sizing:border-box;align-items: center;border-radius:10px;border:1px solid #ddd;padding:10px 10px;min-width:410px;} .ocr_process .program li + li{margin-top:10px;} .ocr_process .program li .img{width:50px;height:50px;box-sizing:border-box;border-radius:10px;overflow:hidden;} .ocr_process .program li .img img{} .ocr_process .program li .txt{width:calc(100% - 50px);box-sizing:border-box;padding-left:10px;font-size:var(--title-20);color:var(--black-color03);font-weight:400;font-family:var(--font-type02);} .ocr_process .program li .txt p{font-size:75%;color:inherit;font-weight:inherit;} .ocr_process .program li .txt p strong{font-size:inherit;color:inherit;font-weight:600;} .ocr_process .program li .txt span{display: block;font-size:68%;color:var(--black-color09);font-weight:400;font-family:inherit;} .ocr_process .img_box{width:56.4%;position: relative;} .ocr_process .img_box img{border-radius:20px;} .ocr_process .img_box .ocr_box{width:253px;box-sizing:border-box;position: absolute;top:77px;right:60px;border-radius: 10px;background:var(--point-white);box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);} .ocr_process .img_box .ocr_box .cont{position: relative;padding:20px 20px;} .ocr_process .img_box .ocr_box .cont .icon{position: absolute;top:10px;right:10px;} .ocr_process .img_box .ocr_box .cont .icon img{border-radius:0;} .ocr_process .img_box .ocr_box .cont .txt{font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);} .ocr_process .img_box .ocr_box .cont p{font-size:75%;color:inherit;font-weight:inherit;font-family:inherit;} .ocr_process .img_box .ocr_box .cont p + p{margin-top:10px;} .ocr_process .img_box .ocr_box .cont span{display: inline-block;font-size:inherit;color:inherit;font-weight:inherit;font-family:inherit;} .ocr_process .img_box .ocr_box .cont span + span{margin-left:20px;} /*ex*/ .ocr_ex{margin-top:120px;padding:110px 0 120px;box-sizing:border-box;background:#f5f5f5;} .ocr_ex .ex_diagram{position: relative;display: flex;flex-wrap:wrap;gap:0 40px;} .ocr_ex .ex_diagram dl{box-sizing:border-box;border-radius:20px;background:var(--point-white);border:1px solid #ddd;border-top:none;} .ocr_ex .ex_diagram dl.ocr{width:31.2%;} .ocr_ex .ex_diagram dl.rpa{width:65.6%;} .ocr_ex .ex_diagram dl dt{box-sizing:border-box;border-radius:20px 20px 0 0;display: flex;align-items: center;justify-content: center;text-align: center;height:70px;font-size:var(--title-20);color:var(--point-white);font-weight:500;font-family:var(--font-type02);background:var(--point-color04);} .ocr_ex .ex_diagram dl dt span{font-size:120%;color:inherit;font-weight:inherit;font-family:inherit;} .ocr_ex .ex_diagram dl dd{box-sizing:border-box;} .ocr_ex .ex_diagram dl.ocr dd{padding:34px 36px 38px;} .ocr_ex .ex_diagram dl.rpa dd{padding:48px 20px 27px 50px;} .ocr_ex .ex_diagram dl dd .m_ver{display: none;} .ocr_ex .reading{position: absolute;font-size:var(--title-20);color:var(--point-white);font-weight:600;top:21%;left:26%;} .ocr_ex .reading span{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;width:176px;height:40px;border-radius:20px;position: relative;text-align: center;background:var(--point-color02);font-size:84%;color:inherit;font-weight:inherit;} .ocr_ex .reading span:before, .ocr_ex .reading span:after{width:51px;height:20px;content:"";background:url('../images/sub/ocr_arw_gr.png')no-repeat center;background-size:auto 100%;position: absolute;top:10px;;} .ocr_ex .reading span:before{left:-40px;} .ocr_ex .reading span:after{transform:scaleX(-1);right:-40px;} .ocr_ex .detail_circle{position: absolute;left:29.5%;top:41%;} .ocr_ex .detail_circle li {position: relative; width: 94px; height: 94px; border-radius: 100%; background: rgba(0,118,190,0.2); box-sizing: border-box; padding: 7px;} .ocr_ex .detail_circle li:before, .ocr_ex .detail_circle li:after {content: ""; position: absolute;top: 50%; transform: translateY(-50%);} .ocr_ex .detail_circle li:before {right:80%;width:139px;height:6px;background:url('../images/sub/ocr_ex_arw_left.png')no-repeat right center;background-size:auto 100%} .ocr_ex .detail_circle li:after {left:51%; width:84px;height:6px;background:url('../images/sub/ocr_ex_arw_right.png')no-repeat left center;background-size:auto 100%;} .ocr_ex .detail_circle li + li {margin-top: 4px;} .ocr_ex .detail_circle li span {position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: var(--point-color01); border-radius: 100%; font-size: 15px; font-weight: 500; color:var(--point-white); letter-spacing: var(--letter-05);} #wrap .ocr_ex .business_process{margin-top:40px;} #wrap .ocr_ex .business_process ol > li{font-size:var(--title-20);min-height:259px;} #wrap .ocr_ex .business_process ol h4{font-size:120%;} #wrap .ocr_ex .business_process ol .des li{font-size:89%;} #wrap .ocr_ex .business_process ol .des li:before{top:11px;} #wrap .ocr_ex .business_process ol > li:first-child{background:var(--point-white);border-color:#ddd;} #wrap .ocr_ex .business_process ol > li:first-child:before{color:var(--point-color06);} #wrap .ocr_ex .business_process ol > li:first-child h4{color:var(--black-color01);} #wrap .ocr_ex .business_process ol > li:first-child .des li{color:var(--black-color06);} #wrap .ocr_ex .business_process ol > li:first-child .des li:before{background:var(--black-color06);} /*adv*/ #wrap .ocr_adv{padding:110px 0 120px;} .ocr_adv ul{display: flex;flex-wrap:wrap;gap:20px;} .ocr_adv ul li{width:calc(25% - 15px);box-sizing:border-box;border-radius: 20px;border: 1px solid #EEE;background:var(--point-white);box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);font-size:var(--title-20);color:var(--black-color03);font-weight:400;font-family:var(--font-type02);text-align: center;padding:54px 0 50px;} .ocr_adv ul li .icon{height:56px;display: flex;align-items: center;justify-content: center;} .ocr_adv ul li .icon img{max-height:100%;} .ocr_adv ul li p{font-size:89%;color:inherit;font-weight:inherit;font-family:inherit;margin-top:19px;} /*dep*/ .ocr_dep{background:rgba(0, 118, 190, 0.05);padding:110px 0 120px;} .ocr_dep ul{display: flex;flex-wrap:wrap;gap:30px;} .ocr_dep ul li{width:calc(50% - 15px);box-sizing:border-box;display: flex;flex-wrap:wrap;} .ocr_dep ul li .img{width:47.9%;} .ocr_dep ul li .img img{} .ocr_dep ul li .txt{width:52.1%;box-sizing:border-box;padding-left:40px;font-size:var(--title-20);color:var(--black-color06);font-weight:400;font-family:var(--font-type02);padding-top:40px;} .ocr_dep ul li .txt strong{font-size:var(--title-30);color:var(--black-color01);font-weight:600;} .ocr_dep ul li .txt p{font-size:89%;color:inherit;font-weight:inherit;font-family:inherit;line-height:1.6;margin-top:15px;} @media only screen and (max-width:1350px) { /*ex*/ .ocr_ex .ex_diagram dl.ocr{width:30%;} .ocr_ex .ex_diagram dl.ocr .img{width:73%;} .ocr_ex .ex_diagram dl.rpa{width:calc(70% - 40px);} .ocr_ex .reading{top:25%;left:25%;} .ocr_ex .reading span{width:140px;} .ocr_ex .detail_circle{top:43%;} .ocr_ex .detail_circle li{width:80px;height:80px;} .ocr_ex .detail_circle li:before{right:51%;} .ocr_ex .detail_circle li:after{left:25%;} } @media only screen and (max-width:1200px) { /*process*/ .ocr_process ol > li{padding:35px 30px;} .ocr_process .program li{min-width:100%;} .ocr_process .txt_box > p br{display: none;} .ocr_process .img_box .ocr_box{right:20px;top:20px;} } @media only screen and (max-width:1024px) { /*process*/ .ocr_process .img_box .ocr_box .cont{padding:15px 15px;} .ocr_process .img_box .ocr_box .cont p + p{margin-top:5px;} /*ex*/ .ocr_ex{margin-top:100px;padding:90px 0 100px;} .ocr_ex .detail_circle{top:41%;} /*adv*/ #wrap .ocr_adv{padding: 100px 0;} /*dep*/ .ocr_dep{padding:100px 0;} .ocr_dep ul li .txt{padding-top:20px;padding-left:20px;} } @media only screen and (max-width:860px) { /*process*/ .ocr_process ol > li{flex-direction: column-reverse;} .ocr_process .txt_box{width:100%;padding:30px 0 0 0;} .ocr_process .txt_box h4{margin-top:10px;} .ocr_process .txt_box > p{margin-top:10px;} .ocr_process .txt_box .list{margin-top:15px;} .ocr_process .img_box{width:100%;text-align: center;} .ocr_process .img_box .ocr_box{right:55px;} .ocr_process .img_box .ocr_box .cont p{text-align:left;} .ocr_process .img_box .ocr_box .cont span + span{margin-left:10px;} .ocr_ex .ex_diagram{gap:80px;} .ocr_ex .ex_diagram dl.ocr{width:100%;} .ocr_ex .ex_diagram dl.ocr .img{width:100%;} .ocr_ex .ex_diagram dl.rpa{width:100%;display: flex;flex-direction: column-reverse;flex-wrap:wrap;} .ocr_ex .ex_diagram dl dt{height:60px;} .ocr_ex .ex_diagram dl.rpa dt{border-radius:0 0 10px 10px;} .ocr_ex .ex_diagram dl.rpa dd{padding:48px 20px 27px 20px;} .ocr_ex .ex_diagram dl dd .m_ver{display:block;margin:0 auto;} .ocr_ex .ex_diagram dl dd .pc_ver{display: none;} .ocr_ex .ex_diagram dl dd .img{text-align: center;} .ocr_ex .ex_diagram{gap:30px;} .ocr_ex .reading{position: relative;top:0;left:0;display: flex;justify-content: center;width:100%;} .ocr_ex .reading span{width:170px;height:40px;font-size:100%;} .ocr_ex .reading span:before, .ocr_ex .reading span:after{left:50%;right:auto;} .ocr_ex .reading span:before{transform:translate(-50%) rotate(90deg);top:-30px;} .ocr_ex .reading span:after{transform:translate(-50%) rotate(-90deg);top:auto;bottom:-30px;} .ocr_ex .detail_circle{width:80%;display: flex;justify-content: space-between;left:50%;top:14%;transform:translate(-50%);} .ocr_ex .detail_circle li{width:110px;height:110px;} .ocr_ex .detail_circle li:after{left:80%;} .ocr_ex .detail_circle li + li:after{transform:translateY(-50%) scaleX(-1);left:auto;right:80%;} .ocr_ex .detail_circle li:before{display: none;} .ocr_ex .detail_circle li span:before{width:1px;height:360px;content:"";border-left:1px dashed var(--point-color01);position: absolute;bottom:-360px;left:50%;transform:translate(-50%);} .ocr_ex .detail_circle li span:after{content:"";border-top:4px solid var(--point-color01);border-left:4px solid transparent;border-right:4px solid transparent;position: absolute;bottom:-360px;left:50%;transform:translate(-50%);} /*adv*/ .ocr_adv ul li{width:calc(50% - 10px);} /*dep*/ .ocr_dep ul li{width:100%;} .ocr_dep ul li .img{width:37.4%;} .ocr_dep ul li .txt{width:62.6%;} } @media only screen and (max-width:767px) { .ocr_process .img_box .ocr_box{right:20px;} .ocr_ex .detail_circle{width:92%;} } @media only screen and (max-width:640px) { /*process*/ .ocr_process ol > li{padding:30px 20px;} .ocr_process ol > li + li{margin-top:30px;} .ocr_process .txt_box .list li:before{top:7px;} /*ex*/ .ocr_ex{margin-top:80px;padding:70px 0 80px;} .ocr_ex .detail_circle{top:16%;} .ocr_ex .detail_circle li{width:86px;height:86px;} .ocr_ex .detail_circle li:after{left:46%;} .ocr_ex .detail_circle li + li:after{right:46%} /*adv*/ #wrap .ocr_adv{padding:80px 0;} .ocr_adv ul li{padding:40px 0;} .ocr_adv ul li .icon{height:44px;} .ocr_adv ul li p{margin-top:14px;} /*dep*/ .ocr_dep{padding:80px 0;} .ocr_dep ul{gap:20px;} } @media only screen and (max-width:479px) { /*process*/ .ocr_process ol > li{border-radius:10px;padding:20px 15px;} .ocr_process .txt_box{padding-top:20px;} .ocr_process .txt_box h4{margin-top:6px;} .ocr_process .txt_box > p{margin-top:5px;} .ocr_process .txt_box .list li{padding-left:8px;} .ocr_process .txt_box .list li + li{margin-top:4px;} .ocr_process .txt_box .list li:before{width:3px;height:3px;} .ocr_process .program{margin-top:15px;} .ocr_process .program li{border-radius:5px;} .ocr_process .program li .img{width:42px;height:42px;} .ocr_process .program li .txt{width:calc(100% - 42px);} .ocr_process .img_box{width:100%;height:0;padding-bottom:80%;position: relative;overflow:hidden;overflow:hidden;border-radius:10px;} .ocr_process .img_box > img{border-radius:0;width:auto;max-width:initial;max-height:100%;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%);} .ocr_process .img_box .ocr_box{width:auto;top:15px;right:15px;border-radius:5px;;} .ocr_process .img_box .ocr_box .cont{padding:15px 30px 15px 15px;} .ocr_process .img_box .ocr_box .cont .icon img{width:20px;} .ocr_process .img_box .ocr_box .cont p{font-size:66%;} /*ex*/ .ocr_ex{margin-top:60px;padding:50px 0 60px;} .ocr_ex .ex_diagram{gap:12px;} .ocr_ex .ex_diagram dl{border-radius:10px;} .ocr_ex .ex_diagram dl dt{border-radius:10px 10px 0 0;height:50px;} .ocr_ex .ex_diagram dl.ocr .img{width:52%;margin:0 auto;} .ocr_ex .ex_diagram dl.rpa dd{padding:30px 20px 27px 20px;} .ocr_ex .reading span{width:132px;height:32px;font-size:84%;} .ocr_ex .reading span:before{top:-24px;} .ocr_ex .reading span:after{bottom:-24px;} .ocr_ex .detail_circle{width:96%;} .ocr_ex .detail_circle li{width:74px;height:74px;} .ocr_ex .detail_circle li:after{left:10%;} .ocr_ex .detail_circle li + li:after{right:10%;} .ocr_ex .detail_circle li span:before{height:260px;bottom:-260px;} .ocr_ex .detail_circle li span:after{bottom:-260px;} /*adv*/ #wrap .ocr_adv{padding:60px 0;} .ocr_adv ul{gap:15px;} .ocr_adv ul li{width:calc(50% - 7.5px);border-radius:10px;padding:30px 10px;} .ocr_adv ul li .icon{height:40px;} .ocr_adv ul li p br{display: none;} /*dep*/ .ocr_dep{padding:60px 0;} .ocr_dep ul{gap:30px;} .ocr_dep ul li .img{width:100%;} .ocr_dep ul li .txt{width:100%;padding:15px 0 0 0;} .ocr_dep ul li .txt p{margin-top:5px;} } @media only screen and (max-width:414px) { .ocr_ex .detail_circle li span:before{height:230px;bottom:-230px;} .ocr_ex .detail_circle li span:after{bottom:-230px;} } @media only screen and (max-width:350px) { .ocr_ex .detail_circle li span:before{height:200px;bottom:-200px;} .ocr_ex .detail_circle li span:after{bottom:-200px;} }