/* liwu 메뉴 공통 */ #sub .liwu .body { padding:80px 0 110px; background-size:cover; background-repeat:no-repeat; background-position:center; background-image:url('../img/sub/liwu_bg.jpg'); } #sub .liwu .body strong { font-size:48px; font-weight:700; color:#fff; transition-duration:0.5s; text-shadow:-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; text-align:center; display:block; padding:0 0 30px; } #sub .liwu .body strong:hover { color:#b6dbef; transition-duration:0.5s; } /* 비지니스 - 플랫폼 biz */ #sub .platform_box { } #sub .platform_box .body { text-align:center; padding:150px 0; background-size:cover; background-repeat:no-repeat; background-position:center; background-image:url('../img/sub/platform_bg.jpg'); } #sub .platform_box .body img { height:600px !important; } /* 비지니스 - fulfillment */ #sub .fulfillment_box { } #sub .fulfillment_box .body { height:1030px; padding:100px 0 0; background-size:cover; background-repeat:no-repeat; background-position:center; background-image:url('../img/sub/fulfillment.jpg'); } #sub .fulfillment_box .body strong { font-size:48px; font-weight:700; display:block; text-align:center; margin:0 0 30px; color:#fff; } #sub .fulfillment_box .body .tab { } #sub .fulfillment_box .body .tab ul { overflow:hidden; width:100%; max-width:450px; margin:0 auto 70px; } #sub .fulfillment_box .body .tab ul li { float:left; width:50%; } #sub .fulfillment_box .body .tab ul li a { display:block; text-align:center; font-size:24px; color:#ddd; font-weight:700; } #sub .fulfillment_box .body .tab ul li.on a { } #sub .fulfillment_box .body .tab ul li.on a span { border-bottom:3px solid #08357a; display:inline-block; } #sub .fulfillment_box .body .list { } #sub .fulfillment_box .body .list ul { width:100%; overflow:hidden; } #sub .fulfillment_box .body .list ul li { float:left; width:20%; text-align:center; margin-bottom:40px; min-height:200px; } #sub .fulfillment_box .body .list ul li .img { width:55%; border-radius:50%; background-color:#0f2045; margin:0 auto 15px; position:relative; } #sub .fulfillment_box .body .list ul li .img:after { display:block; content:''; padding-bottom:100%; } #sub .fulfillment_box .body .list ul li .img img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } #sub .fulfillment_box .body .list ul li .txt { font-size:15px; color:#fff; line-height:20px; } #sub .fulfillment_box .body .list2 , #sub .fulfillment_box .body .list3 { display:none; } /* 비지니스 - fm */ #sub .fm_box { } #sub .fm_box .body { } #sub .fm_box .body .section { padding:90px 0; } #sub .fm_box .body .section .title { margin:0 0 70px; } #sub .fm_box .body .section .title p { font-size:40px; font-weight:600; text-align:center; padding:0 0 7px; } #sub .fm_box .body .section .title span { text-align:center; display:block; font-size:24px; } #sub .fm_box .body .section1 { background-color:#f9f9f9; } #sub .fm_box .body .section1 ul { font-size:0; text-align:center; position:relative; margin:0 0 70px; padding-top:30px; } #sub .fm_box .body .section1 ul li { width:240px; text-align:center; display:inline-block; vertical-align:top; position:relative; } #sub .fm_box .body .section1 ul li:first-child:after, #sub .fm_box .body .section1 ul li:first-child:before { display:none; } #sub .fm_box .body .section1 ul li:nth-of-type(even)::before { transform:rotate(30deg); top:30px; } #sub .fm_box .body .section1 ul li:nth-of-type(odd)::after { top:164px; } #sub .fm_box .body .section1 ul li:nth-of-type(odd)::before { transform:rotate(-30deg); top:168px; } #sub .fm_box .body .section1 ul li::after { width:6px; height:6px; border:2px solid #0e6587; background-color:#fff; border-radius:20px; left:-9px; } #sub .fm_box .body .section1 ul li::before { transform:rotate(-30deg); top:171px; } #sub .fm_box .body .section1 ul li::before { width:86px; height:1px; background-color:#0e6587; left:-47px; } #sub .fm_box .body .section1 ul li::before, #sub .fm_box .body .section1 ul li::after { content:''; display:inline-block; position:absolute; } #sub .fm_box .body .section1 ul li::before, #sub .fm_box .body .section1 ul li::after { content:''; display:inline-block; position:absolute; } #sub .fm_box .body .section1 ul li:nth-of-type(even) { margin:150px 0 0; } #sub .fm_box .body .section1 ul li:nth-of-type(even)::after { top:26px; } #sub .fm_box .body .section1 ul li p.num { width:55px; height:55px; border-radius:50%; line-height:55px; color:#fff; background-color:#0e6587; position:absolute; display:inline-block; left:50%; margin-left:-25px; top:-27px; font-size:21px; text-align:center; box-sizing:border-box; } #sub .fm_box .body .section1 ul li .img { width:200px; height:200px; padding:17px; border-radius:50%; border:1px solid #0e6587; margin:0 auto; text-align:center; box-sizing:border-box; display:table; } #sub .fm_box .body .section1 ul li .img div { height:100%; border-radius:100%; display:table-cell; } #sub .fm_box .body .section1 ul li .img div img { width:100%; max-height:100%; border-radius:100%; } #sub .fm_box .body .section1 ul li .txt { font-size:18px; line-height:24px; margin:20px 0 0; color:#17191c; } #sub .fm_box .body .section1 ul li .txt p { } #sub .fm_box .body .section2 { background-image:url('../img/sub/fmbg.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; } #sub .fm_box .body .section2 ul { margin:-2.5%; overflow:hidden; padding:0 10%; box-sizing:border-box; } #sub .fm_box .body .section2 ul li { float:left; width:45%; margin:2.5%; text-align:center; background-color:#fff; border:4px solid #aaa; box-sizing:border-box; min-height:430px; } #sub .fm_box .body .section2 ul li img { display:block; margin:50px auto 30px; } #sub .fm_box .body .section2 ul li span { display:inline-block; background-color:#0e6587; width:25px; height:3px; margin:0 0 10px; } #sub .fm_box .body .section2 ul li p { font-size:24px; font-weight:500; } #sub .fm_box .body .section2 ul li b { font-size:20px; font-weight:400; margin:3px 0 30px; display:block; } #sub .fm_box .body .section3 { } #sub .fm_box .body .section3 ul { margin:-2.5%; overflow:hidden; } #sub .fm_box .body .section3 ul li { width:20%; text-align:center; float:left; margin:2.5%; } #sub .fm_box .body .section3 ul li .one { width:100%; text-align:center; position:relative; box-sizing:border-box; background-image:url('../img/sub/fm3-1.png'); background-size:cover; background-repeat:no-repeat; background-position:center; } #sub .fm_box .body .section3 ul li .one:after { display:block; content:''; padding-bottom:100%; } #sub .fm_box .body .section3 ul li:nth-child(even) .one { background-image:url('../img/sub/fm3-2.png'); } #sub .fm_box .body .section3 ul li .one div { width:100%; color:#fff; line-height:25px; font-size:22px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } #sub .fm_box .body .section3 ul li .one div p { font-weight:500; display:inline-block; position:relative; z-index:1; } #sub .fm_box .body .section3 ul li .one div b { margin:20px 0 0; display:block; font-size:18px; line-height:24px; } #sub .fm_box .body .section3 ul li .txt { font-size:15px; line-height:20px; margin:30px 0 0; color:#505050; } #sub .fm_box .body .section4 { background-color:#f9f9f9; } #sub .fm_box .body .section4 .wrap { } #sub .fm_box .body .section4 ul { overflow:hidden; margin:-2%; } #sub .fm_box .body .section4 ul li { float:left; width:21%; margin:2%; border:1px solid #1d8fce; box-sizing:border-box; text-align:center; background-color:#fff; } #sub .fm_box .body .section4 ul li.tit { border:0; background-color:inherit; padding:15px 0 0; position:relative; } #sub .fm_box .body .section4 ul li.tit img { } #sub .fm_box .body .section4 ul li.tit span { display:block; font-size:17px; color:#1d8fce; display:block; padding:10px 0 0; } #sub .fm_box .body .section4 ul li .img { height:200px; position:relative; } #sub .fm_box .body .section4 ul li .img img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } #sub .fm_box .body .section4 ul li .txt { background-color:#1d8fce; } #sub .fm_box .body .section4 ul li .txt span { color:#fff; font-size:17px; padding:7px 0; display:block; } /* LIWU - 오시는 길 */ #sub .way_box { } #sub .way_box .map { } #sub .way_box .map iframe { height:550px; width:100%; } #sub .way_box .table { margin:50px 0 20px; } #sub .way_box .table table { border-top:2px solid #ccc; } #sub .way_box .table table tbody { } #sub .way_box .table table tbody tr { border-bottom:1px solid #ccc; } #sub .way_box .table table tbody tr th { padding:17px 0; background-color:#f9f9f9; width:30%; font-size:17px; font-weight:500; } #sub .way_box .table table tbody tr td { padding:17px 0; padding:0 0 0 15px; box-sizing:border-box; font-size:17px; color:#505050; } /* LIWU - WHO */ #sub .who_box { } #sub .who_box .body { } #sub .who_box .body strong { } #sub .who_box .body ul { } #sub .who_box .body ul li { text-align:center; margin:50px 0 0; } #sub .who_box .body ul li b { font-size:60px; display:block; text-shadow:5px 5px 5px rgba(0,0,0,0.2); } #sub .who_box .body ul li p { font-size:20px; } /* LIWU - WHAT */ #sub .what_box { } #sub .what_box .body { } #sub .what_box .body ul { } #sub .what_box .body ul > li { margin:50px 0 0; text-align:center; } #sub .what_box .body ul li p { font-size:36px; text-align:center; position:relative; display:inline-block; z-index:1; } #sub .what_box .body ul li p:after { background-color:#b6dbef; width:110%; height:20px; position:absolute; bottom:5px; left:50%; transform:translate(-50%,0); display:block; content:''; z-index:-1; } #sub .what_box .body ul li p b { font-weight:800; color:#08357a; } #sub .what_box .body ul li span { display:block; font-size:20px; text-align:center; } #sub .what_box .body ul li ol { overflow:hidden; display:inline-block; margin:10px 0 0; } #sub .what_box .body ul li ol li { float:left; margin:0 0 0 10px; background-color:#1d8fce; border-radius:10px; color:#fff; padding:2px 8px; font-size:13px; } /* LIWU - WHY */ #sub .why_box { } #sub .why_box ul { } #sub .why_box ul li { margin:50px 0 0; overflow:hidden; background-color:#fff; border-radius:25px; padding:25px 20px; box-sizing:border-box; box-shadow:8px 6px 7px -2px rgba(100,100,100,0.1); } #sub .why_box ul li .img { float:left; width:8%; box-sizing:border-box; position:relative; } #sub .why_box ul li .img img { height:50px !important; opacity:0.3; vertical-align:middle; margin:5px 0 0 15px; } #sub .why_box ul li .txt { float:left; box-sizing:border-box; width:92%; } #sub .why_box ul li .txt p { font-size:22px; font-weight:700; } #sub .why_box ul li .txt span { font-size:17px; } /* 서비스 의뢰 */ #sub .counseling_box { } #sub .counseling_box .service_form { overflow:hidden; background-color:#f9f9f9; padding:50px 25px; } #sub .counseling_box .service_form .div { margin:0 0 17px; padding:0 1%; box-sizing:border-box; } #sub .counseling_box .service_form .div.wid50 { width:50%; float:left; } #sub .counseling_box .service_form .div span { font-size:15px; display:block; padding:0 0 4px; font-weight:500; } #sub .counseling_box .service_form .div span b { color:#1d8fce; font-weight:800; padding:0 3px; } #sub .counseling_box .service_form .div span strong { font-size:14px; font-weight:400; padding:0 3px; } #sub .counseling_box .service_form .div input[type="text"] { width:100%; height:50px; padding:0 0 0 10px; box-sizing:border-box; border:1px solid #ddd; } #sub .counseling_box .service_form .div select { width:100%; height:50px; padding:0 0 0 10px; box-sizing:border-box; border:1px solid #ddd; background-color:#fff; background-position:97% 50%; } #sub .counseling_box .service_form .div textarea { width:100%; height:150px; overflow:auto; padding:10px; box-sizing:border-box; border:1px solid #ddd; } #sub .counseling_box .service_form .policy { padding:0 1%; box-sizing:border-box; } #sub .counseling_box .service_form .policy p { font-size:13px; font-weight:400; background-color:#f9f9f9; padding:15px; box-sizing:border-box; border:1px solid #ccc; overflow:auto; height:150px; } #sub .counseling_box .service_form .chk { margin:8px 0 0; padding:0 1%; box-sizing:border-box; } #sub .counseling_box .service_form .chk input[type="checkbox"] { } #sub .counseling_box .service_form .chk label { font-weight:400; font-size:14px; } #sub .counseling_box .service_form .btn { text-align:center; margin:50px 0 0; } #sub .counseling_box .service_form .btn button { font-size:17px; color:#fff; font-weight:700; background-color:#06335e; line-height:50px; padding:0 50px; border-radius:3px; } /* 이력서 작성 */ #sub .resume_box { } #sub .resume_box .service_form { overflow:hidden; background-color:#f9f9f9; padding:50px 25px; } #sub .resume_box .service_form .div { margin:0 0 17px; padding:0 1%; box-sizing:border-box; } #sub .resume_box .service_form .div.wid33 { width:33.3%; float:left; } #sub .resume_box .service_form .div.wid50 { width:50%; float:left; } #sub .resume_box .service_form .div span { font-size:15px; display:block; padding:0 0 4px; font-weight:500; } #sub .resume_box .service_form .div span b { color:#1d8fce; font-weight:800; padding:0 3px; } #sub .resume_box .service_form .div span strong { font-size:14px; font-weight:400; padding:0 3px; } #sub .resume_box .service_form .div input[type="text"] { width:100%; height:50px; padding:0 0 0 10px; box-sizing:border-box; border:1px solid #ddd; } #sub .resume_box .service_form .div select { width:100%; height:50px; padding:0 0 0 10px; box-sizing:border-box; border:1px solid #ddd; background-color:#fff; background-position:97% 50%; } #sub .resume_box .service_form .div textarea { width:100%; overflow:auto; padding:10px; box-sizing:border-box; border:1px solid #ddd; height:250px; } #sub .resume_box .service_form .div .file { background-color:#fff; border:1px solid #ddd; overflow:hidden; position:relative; } #sub .resume_box .service_form .div .file p { float:left; line-height:35px; padding:10px; color:#505050; } #sub .resume_box .service_form .div .file input[type="file"] { width:1px; height:1px; padding:0; border:0 none; margin:0; position:absolute; left:0; top:50%; clip:rect(0 0 0 0); } #sub .resume_box .service_form .div .file label { float:right; cursor:pointer; font-size:15px; color:#fff; font-weight:700; background-color:#06335e; line-height:35px; margin:10px; padding:0 20px; border-radius:3px; display:inline-block; } #sub .resume_box .service_form .policy { padding:0 1%; box-sizing:border-box; } #sub .resume_box .service_form .policy p { font-size:13px; font-weight:400; background-color:#f9f9f9; padding:15px; box-sizing:border-box; border:1px solid #ccc; overflow:auto; height:150px; } #sub .resume_box .service_form .chk { margin:8px 0 0; padding:0 1%; box-sizing:border-box; } #sub .resume_box .service_form .chk input[type="checkbox"] { } #sub .resume_box .service_form .chk label { font-weight:400; font-size:14px; } #sub .resume_box .service_form .btn { text-align:center; margin:50px 0 0; } #sub .resume_box .service_form .btn button { font-size:17px; color:#fff; font-weight:700; background-color:#06335e; line-height:50px; padding:0 50px; border-radius:3px; } @media screen and (max-width:1280px) { #sub .why_box ul li .img { width:15%; } #sub .why_box ul li .img img { margin:5px 0 0 0; } #sub .why_box ul li .txt { width:85%; } #sub .fulfillment_box .body .list ul li { min-height:240px; } #sub .fulfillment_box .body .list ul li .img { width:70%; } #sub .fulfillment_box .body strong { font-size:36px; } #sub .fulfillment_box .body .tab ul li a { font-size:19px; } #sub .fm_box .body .section1 ul li { width:20%; } #sub .fm_box .body .section1 ul li:nth-of-type(even)::before { display:none; } #sub .fm_box .body .section1 ul li:nth-of-type(odd)::before { display:none; } #sub .fm_box .body .section1 ul li:nth-of-type(even)::after { display:none; } #sub .fm_box .body .section1 ul li:nth-of-type(odd)::after { display:none; } #sub .fm_box .body .section1 ul li .txt { font-size:16px; line-height:22px; margin:13px 0 0; } } @media screen and (max-width:980px) { #sub .platform_box .body img { height:auto !important; } #sub .platform_box .body { padding:80px 0; } #sub .fm_box .body .section1 ul { margin:0; } #sub .fm_box .body .section1 ul li { width:33.3%; } #sub .fm_box .body .section1 ul li:nth-of-type(even) { margin:0 0 80px; } #sub .fm_box .body .section1 ul li .img { width:90%; height:auto; } #sub .fm_box .body .section3 ul { margin:-1%; } #sub .fm_box .body .section3 ul li { width:23%; margin:1%; } #sub .fm_box .body .section3 ul li .one div b { margin:10px 0 0; font-size:15px; line-height:19px; font-weight:400; } } @media screen and (max-width:768px) { #sub .way_box .map iframe { height:350px; } #sub .why_box ul li .img { width:20%; } #sub .why_box ul li .txt { width:80%; } #sub .fulfillment_box .body { height:auto; padding:100px 0; } #sub .fulfillment_box .body .list ul li { width:33.3%; min-height:230px; } #sub .fulfillment_box .body .list ul li .img img { height:38% !important; } #sub .fm_box .body .section2 ul { padding:0; } #sub .fm_box .body .section2 ul li img { height:130px !important; } #sub .fm_box .body .section2 ul li { min-height:350px; } #sub .fm_box .body .section2 ul li p { font-size:21px; } #sub .fm_box .body .section2 ul li b { font-size:16px; } #sub .fm_box .body .section4 ul li.tit { width:100%; padding:0 0 30px; margin:0; } #sub .fm_box .body .section4 ul li { width:29.33%; } } @media screen and (max-width:640px) { #sub .resume_box .service_form { padding:30px 10px; } #sub .resume_box .service_form .div .file label { font-size:14px; padding:0 10px; } #sub .resume_box .service_form .btn { margin:33px 0 0; } #sub .resume_box .service_form .div textarea { height:200px; } #sub .counseling_box .service_form { padding:30px 10px; } #sub .counseling_box .service_form .btn { margin:33px 0 0; } #sub .counseling_box .service_form .div select { height:40px; } #sub .counseling_box .service_form .div input[type="text"] { height:40px; } #sub .way_box .table table tbody tr th { font-size:16px; } #sub .way_box .table table tbody tr td { font-size:16px; } #sub .way_box .table { margin:30px 0 20px; } #sub .who_box .body ul li { margin:30px 0 0; } #sub .who_box .body ul li b { font-size:30px; } #sub .who_box .body ul li p { font-size:16px; } #sub .liwu .body { padding:70px 0 80px; } #sub .liwu .body strong { font-size:36px; padding:0; } #sub .what_box .body ul li p { font-size:30px; } #sub .what_box .body ul li span { font-size:16px; } #sub .why_box ul li .txt p { font-size:19px; } #sub .why_box ul li .txt span { font-size:15px; padding:5px 0 0; display:block; } #sub .why_box ul li .img img { height:40px !important; } #sub .fulfillment_box .body .list ul li { min-height:200px; } #sub .fm_box .body .section1 ul li { width:100%; margin:30px 0 0; } #sub .fm_box .body .section1 ul li:first-child { margin:0; } #sub .fm_box .body .section1 ul li .img { width:50%; float:left; padding:7px; } #sub .fm_box .body .section1 ul li .txt { width:50%; float:left; } #sub .fm_box .body .section1 ul li:nth-of-type(even) { margin:0; margin:30px 0 0; } #sub .fm_box .body .section1 ul li p.num { position:static; top:auto; left:auto; margin:40px 0 0; width:45px; height:45px; line-height:45px; } #sub .fm_box .body .section .title { margin:0 0 35px; } #sub .fm_box .body .section .title p { font-size:28px; } #sub .fm_box .body .section .title span { font-size:19px; } #sub .fm_box .body .section2 ul li img { height: 80px !important; } #sub .fm_box .body .section2 ul li p { font-size:19px; } #sub .fm_box .body .section2 ul li b { margin:3px 9px 20px; } #sub .fm_box .body .section3 ul { margin:-3%; } #sub .fm_box .body .section3 ul li { width:44%; margin:3%; min-height:340px; } #sub .fm_box .body .section3 ul li .txt { margin:20px 0 0; } #sub .fm_box .body .section3 ul li .one div { font-size:18px; } #sub .fm_box .body .section4 ul li .img img { height:40% !important; } #sub .fm_box .body .section4 ul li .txt span { font-size:15px; } #sub .fm_box .body .section4 ul li .img { height:150px; } #sub .fm_box .body .section { padding:65px 0; } #sub .fulfillment_box .body { padding:70px 0; } } @media screen and (max-width:480px) { #sub .way_box .map iframe { height:250px; } #sub .fm_box .body .section3 ul li { min-height:320px; } #sub .fm_box .body .section1 ul li p.num { margin:30px 0 0; } } @media screen and (max-width:360px) { #sub .fulfillment_box .body .list ul li { min-height:170px; } #sub .fm_box .body .section1 ul li p.num { margin:8px 0 0; width:37px; height:37px; font-size:17px; line-height:37px; } #sub .fm_box .body .section1 ul li .txt { font-size:14px; line-height:19px; margin:7px 0 0; } #sub .fm_box .body .section1 ul li p.num { margin:35px 0 0; } #sub .fm_box .body .section1 ul li .txt { margin:7px 0 0; font-size:15px; line-height:20px; } }