@charset "utf-8"; /* KAKAO PLUS */ #kakao_plus { position:fixed; right:30px; bottom:30px; line-height:0; } @media screen and (max-width:1920px) { /* KAKAO PLUS */ #kakao_plus { width:100px; right:20px; bottom:20px; } #kakao_plus img { width:100%; } } @media screen and (max-width:640px) { /* KAKAO PLUS */ #kakao_plus { width:80px; right:20px; bottom:20px; } #kakao_plus img { width:100%; } } /* LAYOUT */ body { -webkit-text-size-adjust: 100%; } #wrap { overflow: hidden; margin: 0 auto; -webkit-overflow-scrolling : touch; } #header { position: fixed; width: 100%; min-width: 1360px; height: 130px; z-index: 10; background-color: transparent; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; } #header.header_over { background-color: #ffffff; border-bottom: 1px solid #e5e4e3; } #container { min-width: 1360px; margin: 130px auto 0; } #footer { overflow: hidden; position: relative; width: 1260px; margin: 0 auto; background-color: #fff; } /* HEADER - HEAD */ #header > .head { position: relative; width: 1360px; margin: 0 auto; } #header > .head h1 { margin: 0; padding: 49px 0 0; line-height: 0; } #header > .head h1 img { height: 33px; } #header > .head h1.v1 { margin: 0; padding: 40px 0 0; line-height: 0; } #header > .head h1.v1 img { height: 49px; } #header > .head .gnb { position: absolute; right: 0; top: 56px; } #header > .head .gnb ul { margin: 0; padding: 0; } #header > .head .gnb li { position: relative; list-style: none; float: left; margin-left: 32px; } #header > .head .gnb a { display: block; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 20px; color: #54565a; letter-spacing: -1.5px; } #header > .head .gnb a:hover { color: #ffae00; } #header > .head .gnb:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */} /* HEADER - MOBILE */ #header > .head .gnb_m { display: none; position: absolute; right: 6%; top: 26px; cursor: pointer; } #header > .head .gnb_m img { width: 26px; } #gnb_m_bg { position:fixed; overflow-y:auto; width:100%; height:100vh; left:0; top:0; background-color:rgba(0,0,0,0.95); -webkit-overflow-scrolling:touch; z-index:11; display:none; } #gnb_m { position:fixed; overflow-y:auto; width:100%; height:100vh; left:-100%; top:0; opacity:0; -webkit-overflow-scrolling:touch; z-index:11; } #gnb_m .btn_close { position: absolute; width: 19px; left: 6%; top: 25px; cursor: pointer; } #gnb_m .btn_close img { width: 100%; } #gnb_m .logo_m { margin: 22px 0 0; line-height: 0; text-align: center; } #gnb_m .logo_m img { height: 23px; } #gnb_m .list { margin: 47px 0 0; } #gnb_m .list ul { margin: 0; padding: 0; } #gnb_m .list li { list-style: none; text-align: center; } #gnb_m .list a { display: block; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 17.5px; line-height: 50px; color: #ffffff; letter-spacing: -1.5px; } #gnb_m .list a:hover { color: #c8805f; } #gnb_m .list:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */} #gnb_m .lnb_m { margin: 45px 0 0; } #gnb_m .lnb_m ul { margin: 0; padding: 0; } #gnb_m .lnb_m li { list-style: none; text-align: center; } #gnb_m .lnb_m a { display: block; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 43px; color: #54565a; letter-spacing: -1.5px; } #gnb_m .lnb_m a:hover { color: #c8805f; } #gnb_m .lnb_m:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */} #gnb_m .gnb_footer { margin: 60px 13% 0; padding: 60px 0; text-align: center; line-height: 0; border-top: 1px solid #18191a; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #gnb_m .gnb_footer img { height: 30px; } /* CONTAINER - 플랜비즈소개 */ #container > .planbiz { position: relative; width: 1260px; margin: 0 auto; } #container > .planbiz h2 { margin: 0 0 0 1%; padding: 90px 0 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-size: 40px; line-height: 58px; color: #000000; letter-spacing: -1.5px; } #container > .planbiz h2 strong { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; color: #ffae1a; } #container > .planbiz h2 span { position: relative; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; color: #ff3e14; } #container > .planbiz h2 span:after { content: ""; position: absolute; width: 100%; height: 2px; left: 0; bottom: 4px; background-color: #ff3e14; } #container > .planbiz h2 i { display: block; } #container > .planbiz h2 i.v1 { display: none; } #container > .planbiz .h2_info { margin: 20px 0 0 1%; padding: 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 20px; color: #54565a; letter-spacing: -1.5px; } #container > .planbiz .h2_info i { display:none; } #container > .planbiz .diagram { margin: 120px 0 0; } #container > .planbiz .diagram img.pc { display: block; } #container > .planbiz .diagram img.mobile { height: 54px; display: none; } #container > .planbiz .diagram ul { margin: 0; padding: 0; font-size: 0; } #container > .planbiz .diagram li { display: inline-block; vertical-align: top; position: relative; list-style: none; width: 8.33333%; } #container > .planbiz .diagram li.plana { width: 43.88888%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #container > .planbiz .diagram li.plana h3 { margin: 0 0 0 8.13%; padding: 0; line-height: 0; } #container > .planbiz .diagram li.plana p { margin: 0 0 0 8.13%; padding: 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; font-size: 60px; line-height: 60px; color: #76777a; letter-spacing: -2.5px; } #container > .planbiz .diagram li.plana span { display: block; margin: 18px 0 0 8.13%; padding: 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 23px; line-height: 41px; color: #76777a; letter-spacing: -1.5px; } #container > .planbiz .diagram li.planb { width: 47.77777%; } #container > .planbiz .diagram li.planb h3 { margin: 0 0 0 3.8%; padding: 0; line-height: 0; } #container > .planbiz .diagram li.planb p { position: relative; margin: 0 0 0 4.31%; padding: 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; font-size: 60px; line-height: 60px; color: #000000; letter-spacing: -2.5px; } #container > .planbiz .diagram li.planb p:before { content: ""; position: absolute; width: 157px; height: 6px; left: 69%; top: 24px; background-color: #ff3c31; } #container > .planbiz .diagram li.planb p:after { content: ""; position: absolute; width: 157px; height: 6px; left: 69%; top: 38px; background-color: #ff3c31; } #container > .planbiz .diagram li.planb span { display: block; margin: 18px 0 0 4.31%; padding: 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 23px; line-height: 41px; color: #76777a; letter-spacing: -1.5px; } #container > .planbiz .diagram:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */} #container > .planbiz .diagram li.plana_new { width: 50.88888%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #container > .planbiz .diagram li.plana_new h3 { height:94px; margin: 0; padding: 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; font-size: 60px; line-height: 94px; color: #76777a; letter-spacing: -1.5px; text-align:center; } #container > .planbiz .diagram li.plana_new .info { position: relative; margin: 30px 0 0 6.74%; font-size:0; text-align:center; } #container > .planbiz .diagram li.plana_new .info .text01 { display:inline-block; vertical-align:middle; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; font-size: 60px; line-height: 60px; color: #76777a; letter-spacing: -1.5px; } #container > .planbiz .diagram li.plana_new .info .text02 { display:inline-block; vertical-align:middle; margin:0 5px 0 10px; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; font-size: 110px; line-height: 110px; color: #000000; letter-spacing: -1px; } #container > .planbiz .diagram li.planb_new { width: 40.77777%; } #container > .planbiz .diagram li.planb_new h3 { margin: 0 0 0 7.9%; padding: 0; line-height: 0; } #container > .planbiz .diagram li.planb_new .info { position: relative; margin: 30px 0 0 6.74%; font-size:0; } #container > .planbiz .diagram li.planb_new .info .text01 { display:inline-block; vertical-align:middle; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; font-size: 60px; line-height: 60px; color: #000000; letter-spacing: -1.5px; } #container > .planbiz .diagram li.planb_new .info .text02 { display:inline-block; vertical-align:middle; margin:0 5px 0 10px; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; font-size: 110px; line-height: 110px; color: #000000; letter-spacing: -1px; } #container > .planbiz .diagram li.planb_new p { position: relative; margin: 30px 0 0 6.74%; padding: 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; font-size: 60px; line-height: 60px; color: #000000; letter-spacing: -1.5px; } #container > .planbiz .diagram li.planb_new p strong { display:inline-block; vertical-align:middle; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; font-size: 60px; line-height: 60px; color: #000000; letter-spacing: -1px; } /* CONTAINER - 문제점 */ #container > .issue { position: relative; width: 1260px; margin: 260px auto 0; } #container > .issue h2 { margin: 0 0 0 3.17%; padding: 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-size: 40px; line-height: 58px; color: #000000; letter-spacing: -1.5px; } #container > .issue .outer { margin: 50px 0 0; font-size: 0; } #container > .issue .outer .side { display: inline-block; vertical-align: top; width: 530px; margin: 0 auto; padding-left: 44px; } #container > .issue .outer .side .side_head { position: relative; height: 229px; } #container > .issue .outer .side .side_head .head_text { position: absolute; left: 131px; bottom: 32px; padding: 0 10px; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-size: 44px; line-height: 60px; color: #000000; letter-spacing: -1.5px; text-align: right; background: url("../images/main/issue_under01.png") no-repeat left bottom; } #container > .issue .outer .side .side_head .head_text i { display: block; } #container > .issue .outer .side .side_head01 { position: relative; height: 229px; } #container > .issue .outer .side .side_head01 .head_text { position: absolute; left: 131px; bottom: 32px; padding: 0 10px 10px; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; font-size: 44px; line-height: 60px; color: #000000; letter-spacing: -1.5px; text-align: right; background: url("../images/main/issue_under01_new.png") no-repeat left bottom; } #container > .issue .outer .side .side_head01 .head_text strong { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-size: 44px; line-height: 60px; color: #000000; letter-spacing: -1.5px; } #container > .issue .outer .side .side_head01 .head_text i { display: block; } #container > .issue .outer .side .side_body { position: relative; height: 386px; background-color: #f3f1ee; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 0 8px rgba(22,21,25,0.2); -moz-box-shadow:0 0 8px rgba(22,21,25,0.2); box-shadow:0 0 8px rgba(22,21,25,0.2); } #container > .issue .outer .side .side_body .list { margin: 0 60px; } #container > .issue .outer .side .side_body .list ul { margin: 0; padding: 0; } #container > .issue .outer .side .side_body .list li { list-style: none; padding: 38px 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; font-size: 28px; line-height: 36px; color: #000000; letter-spacing: -1.5px; text-align: center; border-top: 1px dashed #afafaf; } #container > .issue .outer .side .side_body .list li strong { position: relative; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-size: 28px; line-height: 36px; color: #000000; } /* #container > .issue .outer .side .side_body .list li strong:after { content: ""; position: absolute; width: 100%; height: 1px; left: 0; bottom: 2px; background-color: #ff3e14; } */ #container > .issue .outer .side .side_body .list li:first-child { border-top: none; } #container > .issue .outer .side .side_body .list:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */} #container > .issue .outer .side .side_body .character { z-index: 9; position: absolute; left: 396px; top: -199px; } #container > .issue .outer .side .side_body .character img.pc { } #container > .issue .outer .side .side_body .character img.mobile { width: 100%; max-width: 120px; display: none; } #container > .issue .outer .side.v1 { margin: 0 auto; padding-left: 115px; } #container > .issue .outer .side.v1 .side_head .head_text { left: 162px; text-align: left; background: url("../images/main/issue_under02.png") no-repeat left bottom; } #container > .issue .outer .side.v1 .side_head .head_text i { display: block; } #container > .issue .outer .side.v1 .side_body .list { margin: 0 60px; } #container > .issue .outer .side.v1 .side_body .list ul { margin: 0; padding: 0; } #container > .issue .outer .side.v1 .side_body .list li { list-style: none; padding: 20px 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; font-size: 28px; line-height: 36px; color: #000000; letter-spacing: -1.5px; text-align: center; border-top: 1px dashed #afafaf; } #container > .issue .outer .side.v1 .side_body .list li strong { position: relative; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-size: 28px; line-height: 36px; color: #000000; } /* #container > .issue .outer .side.v1 .side_body .list li strong:after { content: ""; position: absolute; width: 100%; height: 1px; left: 0; bottom: 2px; background-color: #ff3e14; } */ #container > .issue .outer .side.v1 .side_body .list li:first-child { border-top: none; } #container > .issue .outer .side.v1 .side_body .list:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */} #container > .issue .outer .side.v1 .side_head01 .head_text { left: 162px; text-align: left; background: url("../images/main/issue_under02_new.png") no-repeat left bottom; } #container > .issue .outer .side.v1 .side_head01 .head_text i { display: block; } #container > .issue .outer .side.v1 .side_body .inner_list { font-size: 0; text-align: center; } #container > .issue .outer .side.v1 .side_body .inner_list .text { display: inline-block; margin: 8px 0 0; vertical-align: middle; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-size: 31px; line-height: 31px; color: #000000; letter-spacing: -1px; } #container > .issue .outer .side.v1 .side_body .inner_list .text span { display: block; margin: 9px 0 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 18px; color: #76777a; letter-spacing: -1px; } #container > .issue .outer .side.v1 .side_body .inner_list .dash { display: inline-block; vertical-align: middle; margin: 8px 12px 0; line-height: 0; } #container > .issue .outer .side.v1 .side_body .character { z-index: 9; position: absolute; left: 360px; top: -229px; } #container > .issue .outer .side.v1 .side_body .character img.pc { } #container > .issue .outer .side.v1 .side_body .character img.mobile { display: none; } /* CONTAINER - 플랜비즈를 만나면 */ #container > .meet { height: 550px; margin: 415px auto 0; background: url("../images/main/meet_bg.jpg") no-repeat center; background-color: #ffe952; } #container > .meet .outer { position: relative; width: 1260px; margin: 0 auto; } #container > .meet .outer h2 { margin: 0; padding: 87px 0 0 3.17%; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-size: 40px; line-height: 58px; color: #000000; letter-spacing: -1.5px; } #container > .meet .outer h2 i { display: block; } #container > .meet .outer p { margin: 0; padding: 15px 0 0 3.17%; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 28px; color: #54565a; letter-spacing: -1.5px; } #container > .meet .outer p i { display: block; } #container > .meet .outer p i.v1 { display: none; } #container > .meet .outer .thum { position: absolute; right: 27px; top: -114px; line-height: 0; } /* CONTAINER - 업무프로세스 */ #container > .process { width: 1260px; margin: 280px auto 0; } #container > .process h2 { margin: 0; padding: 87px 0 0 3.17%; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-size: 40px; line-height: 58px; color: #000000; letter-spacing: -1.5px; } #container > .process h2 span { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-size: 40px; line-height: 58px; color: #000000; letter-spacing: -1.5px; } #container > .process h2 i { display: none; } #container > .process p { margin: 0; padding: 15px 0 0 3.17%; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 28px; color: #54565a; letter-spacing: -1.5px; } #container > .process p i { display: block; } #container > .process .thum { margin: -30px 0 0; line-height: 0; } #container > .process .thum img.pc { } #container > .process .thum img.mobile { width: 100%; display: none; } /* CONTAINER - 해결 */ #container > .solution { position: relative; width: 1260px; margin: 190px auto 0; } #container > .solution h2 { margin: 0; padding: 0 0 0 3.17%; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-size: 40px; line-height: 58px; color: #000000; letter-spacing: -1.5px; } #container > .solution h2 strong { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-size: 40px; line-height: 58px; color: #ffae1a; letter-spacing: -1.5px; } #container > .solution .outer { margin: 55px 0 0; } #container > .solution .outer .service { width: 444px; margin: 0 0 0 3.17%; } #container > .solution .outer .service ul { margin: 0; padding: 0; font-size: 0; } #container > .solution .outer .service li { display: inline-block; vertical-align: top; width: 28.8%; height: 101px; margin: 0 2.26666%; background-color: #f8f8f6; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow:0 0 8px rgba(22,21,25,0.15); -moz-box-shadow:0 0 8px rgba(22,21,25,0.15); box-shadow:0 0 8px rgba(22,21,25,0.15); } #container > .solution .outer .service li.v1 { display: block; width: 100%; height: 49px; margin: 30px 0; text-align: center; background-color: transparent; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; } #container > .solution .outer .service .thum { text-align: center; margin: 15px 0 0; line-height: 0; } #container > .solution .outer .service .thum_text { margin: 9px 0 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 18px; color: #54565a; letter-spacing: -2px; text-align: center; } #container > .solution .outer .service:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */} #container > .solution .ceo_thum { position: absolute; right: -52px; top: 28px; } #container > .solution .ceo_thum img.pc { } #container > .solution .ceo_thum img.mobile { width: 100%; display: none; } /* CONTAINER - 해결 */ #container > .better { margin: 260px auto 0; } #container > .better h2 { margin: 0; padding: 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-size: 54px; line-height: 70px; color: #000000; letter-spacing: -1.5px; text-align: center; } #container > .better h2 i { display: none; } #container > .better h2.v1 { margin: 0; padding: 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; font-size: 46px; line-height: 50px; color: #000000; letter-spacing: -1.5px; text-align: center; } #container > .better h2.v1 i { display: none; } #container > .better h3 { margin: 25px 0 0; padding: 0; line-height: 0; text-align: center; } #container > .better .outer { height: 1230px; margin: 45px 0 0; background-color: #ffdf00; } #container > .better .outer .slogan { padding: 80px 0 0; line-height: 0; text-align: center; } #container > .better .outer .slogan img.pc { } #container > .better .outer .slogan img.mobile { display: none; } #container > .better .outer .inner { position: relative; width: 1030px; height: 500px; margin: 0 auto 0; background-color: #fff; -webkit-box-shadow:0 0 8px rgba(22,21,25,0.3); -moz-box-shadow:0 0 8px rgba(22,21,25,0.3); box-shadow:0 0 8px rgba(22,21,25,0.3); } #container > .better .outer .inner .side { margin: 0 73px 0 386px; } #container > .better .outer .inner .side .side_text { padding: 58px 0 0 9px; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 30px; line-height: 42px; color: #000000; letter-spacing: -1.5px; } #container > .better .outer .inner .side .side_text strong { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-size: 30px; line-height: 42px; color: #000000; letter-spacing: -1.5px; } #container > .better .outer .inner .side .side_list { margin: 20px 0 0; } #container > .better .outer .inner .side .side_list ul { margin: 0; padding: 0; } #container > .better .outer .inner .side .side_list li { list-style: none; height: 57px; margin-top: 19px; background-color: #fff; border: 1px solid #d9d9d9; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow:0 0 8px rgba(22,21,25,0.1); -moz-box-shadow:0 0 8px rgba(22,21,25,0.1); box-shadow:0 0 8px rgba(22,21,25,0.1); } #container > .better .outer .inner .side .side_list li:first-child { margin-top: 0; } #container > .better .outer .inner .side .side_list .input { width: 100%; height: 55px; padding: 0 23px; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 55px; color: #898a8d; letter-spacing: -1.5px; border: none; background-color: transparent; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #container > .better .outer .inner .side .side_list .select { width: 100%; height: 55px; padding: 0 19px; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 55px; color: #898a8d; letter-spacing: -1.5px; border: none; background-color: transparent; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #container > .better .outer .inner .side .side_list:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */} #container > .better .outer .inner .side .btn_area { position: relative; margin-top: 33px; font-size: 0; text-align: right; } #container > .better .outer .inner .side .btn_area .btn_insert { display: inline-block; width: 190px; height: 54px; background-color: #ffae1a; } #container > .better .outer .inner .side .btn_area .btn_insert a, #container > .better .outer .inner .side .btn_area .btn_insert a:hover { display: block; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 54px; color: #ffffff; letter-spacing: -1.5px; text-align: center; } #container > .better .outer .inner .side .btn_area .kakao_info { position: absolute; left: 8px; top: 2px; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 25px; color: #63574f; letter-spacing: -1px; text-align: left; } #container > .better .outer .inner .side .btn_area .kakao_info strong { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 25px; color: #000000; letter-spacing: -1px; } #container > .better .outer .inner .side .btn_area .kakao_info span { display: inline-block; vertical-align: middle; margin: 0 6px; line-height: 0; } #container > .better .outer .inner .side_thum { position: absolute; left: 78px; bottom: 0; line-height: 0; } #container > .better .outer .inner .side_thum img.pc { } #container > .better .outer .inner .side_thum img.mobile { display: none; } /* CONTAINER - 구성원소개 */ #container > .member { margin: -360px auto 0; } #container > .member h2 { margin: 0; padding: 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-size: 40px; line-height: 40px; color: #000000; letter-spacing: -1.5px; text-align: center; } #container > .member p { margin: 26px 0 0 0; padding: 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 20px; color: #54565a; letter-spacing: -1.5px; text-align: center; } #container > .member .list { width:1100px; margin: 55px auto 0; } #container > .member .list ul { margin: 0; padding: 0; font-size: 0; text-align: center; } #container > .member .list li { display: inline-block; vertical-align: top; list-style: none; width: 287px; margin: 0 22px; } #container > .member .list .thum { z-index: 0; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow:0 0 8px rgba(22,21,25,0.2); -moz-box-shadow:0 0 8px rgba(22,21,25,0.2); box-shadow:0 0 8px rgba(22,21,25,0.2); } #container > .member .list .thum img { -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } #container > .member .list .thum_info { } #container > .member .list .thum_info.v1 { } #container > .member .list .thum_info.v2 { display: none; } #container > .member .list .name { margin: 44px 0 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 30px; color: #54565a; letter-spacing: -1.5px; text-align: center; } #container > .member .list .name strong { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-size: 30px; line-height: 30px; color: #000000; letter-spacing: -1.5px; } #container > .member .list .biz { margin: 14px 0 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 18px; color: #54565a; letter-spacing: -1.5px; text-align: center; } #container > .member .list .history { width: 230px; height:310px; margin: 26px auto 0; border-top: 1px solid #ffdf00; } #container > .member .list .history ul { margin: 0; padding: 28px 0 0; } #container > .member .list .history li { display: block; list-style: none; width: auto; margin: 0 0 0 15px; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 15px; line-height: 26px; color: #54565a; letter-spacing: -1.5px; text-align: left; } #container > .member .list .history:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */} #container > .member .list:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */} /* CONTAINER - 구성원소개 */ #container > .kakao { position: relative; margin: 100px auto 0; background-color: #f9f9f9; } #container > .kakao .outer { position: relative; width: 1260px; margin: 0 auto; } #container > .kakao .inner { margin: 0 0 0 483px; } #container > .kakao .inner .icon { padding: 57px 0 0; line-height: 0; } #container > .kakao .inner .kakaoid { margin: 20px 0 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 46px; line-height: 60px; color: #000000; letter-spacing: -1.5px; } #container > .kakao .inner .kakaoid i { display: none; } #container > .kakao .inner .kakaoid strong { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; } #container > .kakao .inner p { margin: 30px 0 0; padding: 0 0 67px 0; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 20px; color: #707070; letter-spacing: -1px; } #container > .kakao .inner p i { display: none; } #container > .kakao .thum { position: absolute; left: 215px; bottom: 0; line-height: 0; } /* FOOTER */ #footer > .logo { position: absolute; left: 30px; top: 65px; line-height: 0; } #footer > .menu { padding: 60px 0 0 210px; } #footer > .menu ul { margin: 0; padding: 0; font-size: 0; } #footer > .menu li { display: inline-block; list-style: none; margin-right: 4px; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; color: #76777a; letter-spacing: -0.5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #footer > .menu li span { display: inline-block; margin: 0 5px; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 9px; line-height: 24px; color: #76777a; } #footer > .menu li.v1 { display: block; } #footer > .menu:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */} #footer > .copyright { margin: 20px 0 60px 210px; font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; color: #76777a; letter-spacing: -0.5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width:640px) { /* LAYOUT */ #wrap { background-color: #f3f3f3; } #header { min-width: 320px; height: 75px; } #container { min-width: 320px; margin: 90px auto 0;} #footer { width: auto; background-color: #f3f3f3; } /* HEADER - HEAD */ #header > .head { width: auto; } #header > .head h1 { padding: 22px 0 0; margin-left: 6%; } #header > .head h1 img { height: 31px; } #header > .head h1.v1 { padding: 17px 0 0; margin-left: 6%; } #header > .head h1.v1 img { height: 34px; } #header > .head .gnb { display: none; } /* HEADER - MOBILE */ #header > .head .gnb_m { display: block; } /* CONTAINER - 플랜비즈소개 */ #container > .planbiz { width: auto; margin: 0 3.125%; background-color: #fff; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; -webkit-box-shadow:0 0 8px rgba(0,0,0,0.1); -moz-box-shadow:0 0 8px rgba(0,0,0,0.1); box-shadow:0 0 8px rgba(0,0,0,0.1); } #container > .planbiz h2 { margin: 0; padding: 40px 0 0; font-weight: 400; font-size: 21px; line-height: 31px; letter-spacing: -2.5px; text-align: center; } #container > .planbiz h2 strong { font-weight: 500; } #container > .planbiz h2 span { font-weight: 400; } #container > .planbiz h2 span:after { height: 1px; bottom: 1px; } #container > .planbiz h2 i { display: none; } #container > .planbiz h2 i.v1 { display: block; } #container > .planbiz .h2_info { margin: 10px 0 0 0; font-size: 12.5px; line-height: 20px; text-align:center; } #container > .planbiz .h2_info i { display:block; } #container > .planbiz .diagram { margin: 40px 0 0; } #container > .planbiz .diagram img.pc { display: none; } #container > .planbiz .diagram img.mobile { height: 54px; margin-top: 18px; display: inline-block; } #container > .planbiz .diagram li { display: block; width: 100%; text-align: center; } #container > .planbiz .diagram li.plana { width: 100%; } #container > .planbiz .diagram li.plana h3 { margin: 0; text-align: center; } #container > .planbiz .diagram li.plana h3 img { height: 50px; } #container > .planbiz .diagram li.plana p { margin: 0; font-size: 27px; line-height: 27px; text-align: center; } #container > .planbiz .diagram li.plana span { margin: 10px 0 0 0; font-size: 12px; line-height: 12px; text-align: center; } #container > .planbiz .diagram li.planb { width: 100%; } #container > .planbiz .diagram li.planb h3 { margin: 0; text-align: center; } #container > .planbiz .diagram li.planb h3 img { height: 50px; } #container > .planbiz .diagram li.planb p { margin: 0; font-size: 27px; line-height: 27px; text-align: center; } #container > .planbiz .diagram li.planb p:before { width: 20%; height: 3px; left: 64%; top: 12px; } #container > .planbiz .diagram li.planb p:after { width: 20%; height: 3px; left: 64%; top: 18px; } #container > .planbiz .diagram li.planb span { margin: 10px 0 0 0; padding-bottom: 48px; font-size: 12px; line-height: 12px; text-align: center; } #container > .planbiz .diagram li.plana_new { width: auto; margin-top:26px; padding-bottom:50px; } #container > .planbiz .diagram li.plana_new h3 { height:auto; font-size: 27px; line-height: 28px; } #container > .planbiz .diagram li.plana_new .info { margin: 20px 0 0 0; } #container > .planbiz .diagram li.plana_new .info .text01 { font-size: 27.5px; line-height: 50px; } #container > .planbiz .diagram li.plana_new .info .text01 img { height: 28px; } #container > .planbiz .diagram li.plana_new .info .text02 { margin:0 5px; font-size: 50px; line-height: 50px; } #container > .planbiz .diagram li.planb_new { width: auto; } #container > .planbiz .diagram li.planb_new h3 { margin: 0; text-align:center; } #container > .planbiz .diagram li.planb_new h3 img { height:44px; } #container > .planbiz .diagram li.planb_new .info { margin: 16px 0 0 0; text-align:cetner; } #container > .planbiz .diagram li.planb_new .info .text01 { font-size: 27.5px; line-height: 50px; } #container > .planbiz .diagram li.planb_new .info .text02 { margin:0 5px; font-size: 50px; line-height: 50px; } /* CONTAINER - 문제점 */ #container > .issue { width: auto; margin: 16px 3.125% 0; background-color: #fff; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; -webkit-box-shadow:0 0 8px rgba(0,0,0,0.1); -moz-box-shadow:0 0 8px rgba(0,0,0,0.1); box-shadow:0 0 8px rgba(0,0,0,0.1); } #container > .issue h2 { margin: 0; padding: 30px 0 0; font-weight: 400; font-size: 21px; line-height: 31px; letter-spacing: -2.5px; text-align: center; } #container > .issue .outer { margin: 0; } #container > .issue .outer .side { display: block; width: auto; margin: 0 auto; padding-left: 0; } #container > .issue .outer .side .side_head { overflow: hidden; height: auto; } #container > .issue .outer .side .side_head .head_text { position: relative; left: auto; bottom: auto; margin: 30px 0 0; padding: 0 0 3px 0; font-weight: 700; font-size: 27px; line-height: 37px; text-align: center; background: url("../images/main/issue_under01_m.png") no-repeat center bottom; background-size: 240px; } #container > .issue .outer .side .side_head .head_text i { display: none; } #container > .issue .outer .side .side_head01 { overflow: hidden; height: auto; } #container > .issue .outer .side .side_head01 .head_text { position: relative; left: auto; bottom: auto; margin: 30px 0 0; padding: 0 0 3px 0; font-weight: 300; font-size: 27px; line-height: 37px; text-align: center; background: url("../images/main/issue_under01_m_new.png") no-repeat center bottom; background-size: 60px; } #container > .issue .outer .side .side_head01 .head_text strong { font-size: 27px; line-height: 37px; } #container > .issue .outer .side .side_head01 .head_text i { display: none; } #container > .issue .outer .side .side_body { height: auto; background-color: transparent; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; } #container > .issue .outer .side .side_body .list { margin: 35px 5% 0 40%; } #container > .issue .outer .side .side_body .list li { padding: 10px 5px; font-weight: 400; font-size: 17px; line-height: 22px; text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #container > .issue .outer .side .side_body .list li strong { font-weight: 400; font-size: 17px; line-height: 22px; } #container > .issue .outer .side .side_body .character { width: 34%; left: 3%; top: auto; bottom: 10px; } #container > .issue .outer .side .side_body .character img.pc { display: none; } #container > .issue .outer .side .side_body .character img.mobile { display: block; } #container > .issue .outer .side.v1 { padding-left: 0; } #container > .issue .outer .side.v1 .side_head .head_text { position: relative; left: auto; margin: 44px 0 0; text-align: center; background: url("../images/main/issue_under01_m.png") no-repeat center bottom; background-size: 240px; } #container > .issue .outer .side.v1 .side_head .head_text i { display: none; } #container > .issue .outer .side.v1 .side_body .list { margin: 20px 32.5% 0 6.6666%; padding-bottom: 35px; } #container > .issue .outer .side.v1 .side_body .list li { padding: 13px 0; font-weight: 400; font-size: 17px; line-height: 22px; text-align: left; } #container > .issue .outer .side.v1 .side_body .list li strong { font-weight: 400; font-size: 17px; line-height: 22px; } #container > .issue .outer .side.v1 .side_head01 .head_text { position: relative; left: auto; margin: 44px 0 0; text-align: center; background: url("../images/main/issue_under02_m_new.png") no-repeat center bottom; background-size: 60px; } #container > .issue .outer .side.v1 .side_head01 .head_text i { display: none; } #container > .issue .outer .side.v1 .side_body .inner_list { text-align: left; } #container > .issue .outer .side.v1 .side_body .inner_list .text { margin: 6px 0 0; font-weight: 500; font-size: 19px; line-height: 19px; } #container > .issue .outer .side.v1 .side_body .inner_list .text span { margin: 5px 0 0; font-size: 11px; line-height: 12px; } #container > .issue .outer .side.v1 .side_body .inner_list .dash img { height: 18px; } #container > .issue .outer .side.v1 .side_body .character { width: 27%; left: auto; right: 3%; top: auto; bottom: 45px; } #container > .issue .outer .side.v1 .side_body .character img.pc { display: none; } #container > .issue .outer .side.v1 .side_body .character img.mobile { width: 100%; display: block; } /* CONTAINER - 플랜비즈를 만나면 */ #container > .meet { height: 400px; margin: 30px auto 0; background: url("../images/main/meet_bg.jpg") no-repeat center; background-color: #ffe952; background-size: contain; } #container > .meet .outer { width: auto; margin: 0 auto; } #container > .meet .outer h2 { margin: 0; padding: 40px 0 0; font-weight: 500; font-size: 21px; line-height: 30px; text-align: center; } #container > .meet .outer h2 i { display: none; } #container > .meet .outer p { margin: 0 11%; padding: 15px 0 0; font-size: 12px; line-height: 20px; text-align: center; } #container > .meet .outer p i { display: none; } #container > .meet .outer p i.v1 { display: block; } #container > .meet .outer .thum { position: relative; right: auto; top: auto; margin: 30px 3% 0; line-height: 0; text-align: center; } #container > .meet .outer .thum img { width: 320px; } /* CONTAINER - 업무프로세스 */ #container > .process { width: auto; margin: 130px 3.125% 0; background-color: #fff; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; -webkit-box-shadow:0 0 8px rgba(0,0,0,0.1); -moz-box-shadow:0 0 8px rgba(0,0,0,0.1); box-shadow:0 0 8px rgba(0,0,0,0.1); } #container > .process h2 { padding: 30px 0 0; font-weight: 500; font-size: 21px; line-height: 31px; text-align: center; } #container > .process h2 span { display:block; font-weight: 300; font-size: 21px; line-height: 31px; } #container > .process h2 i { display: block; } #container > .process p { padding: 10px 0 0; font-size: 12px; line-height: 20px; text-align: center; } #container > .process .thum { margin: 30px 0 0; padding-bottom: 30px; } #container > .process .thum img.pc { display: none; } #container > .process .thum img.mobile { display: block; } /* CONTAINER - 해결 */ #container > .solution { width: auto; margin: 17px 3.125% 0; background-color: #fff; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; -webkit-box-shadow:0 0 8px rgba(0,0,0,0.1); -moz-box-shadow:0 0 8px rgba(0,0,0,0.1); box-shadow:0 0 8px rgba(0,0,0,0.1); } #container > .solution h2 { padding: 30px 0 0 0; font-weight: 400; font-size: 21px; line-height: 31px; text-align: center; } #container > .solution h2 strong { font-weight: 400; font-size: 21px; line-height: 31px; } #container > .solution .outer { margin: 35px 0 0; } #container > .solution .outer .service { width: auto; margin: 0 2.6666%; } #container > .solution .outer .service li { height: 80px; } #container > .solution .outer .service li.v1 { height: 39px; margin: 18px 0; } #container > .solution .outer .service li.v1 img { height: 39px; } #container > .solution .outer .service .thum { margin: 12px 0 0; line-height: 0; } #container > .solution .outer .service .thum img { height: 30px; } #container > .solution .outer .service .thum_text { margin: 5px 0 0; font-size: 14px; line-height: 18px; } #container > .solution .ceo_thum { position: relative; right: auto; top: auto; text-align: right; margin-top: 20px; padding-left: 3.125%; margin-right: -3.125%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #container > .solution .ceo_thum img.pc { display: none; } #container > .solution .ceo_thum img.mobile { display: block; } /* CONTAINER - 해결 */ #container > .better { margin: 40px auto 0; } #container > .better h2 { font-weight: 500; font-size: 25px; line-height: 34px; } #container > .better h2 i { display: block; } #container > .better h2.v1 { font-size: 25px; line-height: 34px; } #container > .better h2.v1 i { display: block; } #container > .better h3 { margin: 15px 7.8% 0; } #container > .better h3 img { width: 100%; } #container > .better .outer { height: auto; margin: 30px 0 0; padding-bottom: 35px; } #container > .better .outer .slogan { padding: 40px 0 0; margin: 0 15.6%; } #container > .better .outer .slogan img.pc { display: none; } #container > .better .outer .slogan img.mobile { width: 100%; max-width: 260px; display: inline-block; } #container > .better .outer .inner { width: auto; height: auto; margin: 0 1.71875%; } #container > .better .outer .inner .side { margin: 0 3.7%; } #container > .better .outer .inner .side .side_text { padding: 30px 0 0 0; font-size: 18px; line-height: 26px; text-align: center; } #container > .better .outer .inner .side .side_text strong { font-size: 18px; line-height: 26px; } #container > .better .outer .inner .side .side_list { margin: 18px 0 0; } #container > .better .outer .inner .side .side_list li { height: 50px; margin-top: 18px; } #container > .better .outer .inner .side .side_list .input { height: 48px; padding: 0 15px; font-size: 18px; line-height: 48px; } #container > .better .outer .inner .side .side_list .select { height: 48px; padding: 0 10px; font-size: 18px; line-height: 48px; } #container > .better .outer .inner .side .btn_area { margin-top: 30px; } #container > .better .outer .inner .side .btn_area .btn_insert { display: block; width: auto; height: 54px; background-color: #ffae1a; } #container > .better .outer .inner .side .btn_area .kakao_info { position: relative; left: auto; top: auto; margin: 20px 0 0; font-size: 12px; line-height: 23px; text-align: center; } #container > .better .outer .inner .side .btn_area .kakao_info strong { font-size: 12px; line-height: 23px; } #container > .better .outer .inner .side .btn_area .kakao_info span { margin: 0 3px; } #container > .better .outer .inner .side .btn_area .kakao_info span img { height: 21px; } #container > .better .outer .inner .side_thum { position: relative; left: auto; bottom: auto; margin: 30px 17.9% 0; text-align: center; } #container > .better .outer .inner .side_thum img.pc { display: none; } #container > .better .outer .inner .side_thum img.mobile { width: 100%; max-width: 220px; display: inline-block; } /* CONTAINER - 구성원소개 */ #container > .member { margin: 50px auto 0; } #container > .member h2 { font-weight: 500; font-size: 25px; line-height: 25px; } #container > .member p { margin: 13px 0 0 0; font-size: 12px; line-height: 18px; } #container > .member .list { width:auto; margin: 40px 7.6% 0; } #container > .member .list li { display: block; width: auto; margin: 0 0 22px; font-size: 0; } #container > .member .list .thum { display: inline-block; vertical-align: middle; width: 52.56%; } #container > .member .list .thum img { width: 100%; } #container > .member .list .thum_info { display: inline-block; vertical-align: middle; width: 40%; margin-left: 7%; } #container > .member .list .thum_info.v1 { display: none; } #container > .member .list .thum_info.v2 { display: inline-block; width: 40%; margin-left: 0; margin-right: 7%; } #container > .member .list .name { margin: 0; font-size: 12.5px; line-height: 24px; } #container > .member .list .name strong { font-size: 18px; line-height: 24px; } #container > .member .list .biz { margin: 7px 0 0; font-size: 11px; line-height: 14px; } #container > .member .list .history { width: auto; height:auto; margin: 15px auto 0; } #container > .member .list .history ul { padding: 18px 0 0; } #container > .member .list .history li { display: block; list-style: none; width: auto; margin: 0 0 0 5px; font-size: 10px; line-height: 16px; } /* CONTAINER - 구성원소개 */ #container > .kakao { margin: 30px auto 0; background-color: #f9f9f9; } #container > .kakao .outer { width: auto; margin: 0 auto; } #container > .kakao .inner { margin: 0 0 0 41.7%; } #container > .kakao .inner .icon { padding: 30px 0 0; } #container > .kakao .inner .icon img { height: 30px; } #container > .kakao .inner .kakaoid { margin: 14px 0 0; font-size: 24px; line-height: 34px; } #container > .kakao .inner .kakaoid i { display: block; } #container > .kakao .inner p { margin: 10px 0 0; padding: 0 0 30px 0; font-size: 12px; line-height: 18px; } #container > .kakao .inner p i { display: block; } #container > .kakao .thum { position: absolute; width: 41.7%; left: 0; text-align: center; } #container > .kakao .thum img { width: 88%; max-width: 135px; } /* FOOTER */ #footer > .logo { position: relative; width: 93px; left: auto; top: auto; margin: 45px auto 0; } #footer > .logo img { width: 100%; } #footer > .menu { padding: 20px 0 0; } #footer > .menu ul { text-align: center; } #footer > .menu li { margin: 0 2px; font-size: 12px; line-height: 18px; } #footer > .menu li span { display: inline-block; margin: 0 5px; font-size: 9px; line-height: 18px; } #footer > .copyright { margin: 10px 5% 50px; font-size: 12px; line-height: 18px; text-align: center; } }