/* font-face */ @font-face { font-family: 'Paybooc'; font-weight: 300; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocLight.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocLight.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocLight.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocLight.woff') format('woff'), url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocLight.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'Paybooc'; font-weight: 500; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocMedium.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocMedium.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocMedium.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocMedium.woff') format('woff'), url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocMedium.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'Paybooc'; font-weight: 700; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocBold.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocBold.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocBold.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocBold.woff') format('woff'), url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocBold.ttf') format("truetype"); font-display: swap; } @font-face { font-family: 'Paybooc'; font-weight: 800; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocExtraBold.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocExtraBold.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocExtraBold.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocExtraBold.woff') format('woff'), url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocExtraBold.ttf') format("truetype"); font-display: swap; } img {vertical-align:top} * {padding:0px; margin:0px; box-sizing:border-box; -moz-box-sizing:border-box;} ul, ol, li {list-style-type:none} html, body {width:auto; height:auto} /* 전체 레이아웃 설정 */ body { font-family: 'Paybooc', 'Noto Sans KR', Arial, sans-serif; margin: 0; padding: 0; width:auto; } a {text-decoration:none} #wrap {width:auto; min-width:1400px;} #wrap header { height:100vh; max-height:900px; position:relative;} #wrap header #main-image {position:absolute; width:100%; height:100%; border:0px solid #f00; z-index:1} #wrap header #main-image #main-img1 {width:100%; height:100%; background-image:url(../img/main/main-img.jpg); background-position:center top;} #wrap header #main-image #main-img2 {width:100%; height:100%; background-image:url(../img/main/main-img2.jpg); background-position:center top;} #wrap header #menu-wrap {width:100%; min-width:1400px; margin:0 auto; position:absolute; border:0px solid #f00; height:105px; z-index:10} #wrap header #menu-wrap nav {width:1400px; margin:53px auto 0px auto; border:0px solid #f00; position:relative;} #wrap header #menu-wrap nav h1 {border:0px solid #f00; padding-left:3px} #wrap header #menu-wrap nav h1 a {display:block; border:0px solid #f00; width:290px; height:50px;} #wrap header #menu-wrap nav h1 a span {display:none;} #wrap header #menu-wrap nav ul.main-menu {border:0px solid #00f; position:absolute; display:flex; top:8px; right:3px;} #wrap header #menu-wrap nav ul.main-menu li {margin-left:105px; position:relative;} #wrap header #menu-wrap nav ul.main-menu li a {text-decoration:none; font-weight:700; font-size:19px; display:block; padding:5px 5px; border:0px solid #F00; cursor:pointer} #wrap header #menu-wrap nav ul.main-menu li a.over-color {color:#ce171f} /** #wrap header #menu-wrap nav ul.main-menu li a:hover { background-color:#fff; transition:0.4s} **/ #wrap header #menu-wrap nav ul.main-menu li:last-child {margin-left:80px} #wrap header #menu-wrap nav ul.main-menu li:last-child a {padding:0px} #wrap header #menu-wrap nav ul.main-menu .sub-menu {border:0px solid #f00; position:absolute; padding-top:35px; left:0px; display:inline; width:100px;} #wrap header #menu-wrap nav ul.main-menu .sub-menu li {display:block; width:100%; margin:10px 0px;} #wrap header #menu-wrap nav ul.main-menu .sub-menu li a {display:block; padding:4px 3px; font-weight:500; font-size:16px; cursor:pointer} #wrap header #menu-wrap nav ul.main-menu .sub-menu li a.over-color {color:#ce171f;} #wrap header #menu-wrap nav ul.main-menu .sub-menu li .b-bar {border-bottom:2px solid #ce171f; width:0px} #wrap header #menu-wrap nav #mobile-menu {display:none} #wrap header #menu-wrap #menu-back {position:absolute; border:0px solid #f00; width:100%; height:100%; background-color:#ffffff; opacity:0} #wrap header .m-out {border:0px solid #f00} #wrap header .m-out nav h1 a {background-image:url(../img/main/header-logo-n.png)} #wrap header .m-out nav ul li a {color:#fff;} #wrap header .m-out nav ul li .sub-menu {display:none !important} #wrap header .m-over {border:0px solid #f00; box-shadow: 10px 10px 15px #666; height:450px} #wrap header .m-over nav h1 a {background-image:url(../img/main/header-logo-ov-n.png)} #wrap header .m-over nav ul li a {color:#000000;} #wrap header #header-wrap {border:0px solid #ff0; height:100%; width:auto; margin:0 auto; padding-top:110px; z-index:5; position:relative;} #wrap header #header-wrap #head-txt1 {text-align:center; color:#fff; margin-top:24.2vh; font-size:24px; font-weight:800} #wrap header #header-wrap #head-txt1 span {font-size:0.8em} #wrap header #header-wrap #head-txt2 {text-align:center; color:#fff; margin-top:4.6vh; font-size:85px; font-weight:800} #wrap header #header-wrap .waviy span { position: relative; display: inline-block; text-transform: uppercase; animation: waviy 5s infinite; animation-delay: calc(.1s * var(--i)); } @keyframes waviy { 0%,40%,100% { transform: translateY(0) } 20% { transform: translateY(-7px) } } @keyframes business{ 0%, 100%{ clip-path: polygon( 0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100% ); } 50%{ clip-path: polygon( 0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100% ); } } @keyframes support{ 0%, 100%{ clip-path: polygon( 0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100% ); } 50%{ clip-path: polygon( 0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100% ); } } #wrap #business {height:1015px; display:relative; background-image:url(../img/main/main-bg1.jpg); background-position:center center; border-top:1px solid #ededf4} #wrap #business #business-txt1 {margin-top:180px; font-size:60px; line-height:100%; font-weight:800; color:#555; text-align:center; border:0px solid #F00} #wrap #business #business-txt1:before{ content: "BUSINESS"; position: absolute; font-size: 1em; color: #010101; animation: business 5s ease-in-out infinite; } #wrap #business #business-txt2 {margin-top:10px; font-size:18px; line-height:100%; font-weight:500; color:#666666; text-align:center;} #wrap #business #business-menu {display:flex; width:1400px;flex-wrap:wrap; justify-content:space-between; margin:0 auto; margin-top:87px; border:0px solid #f00} #wrap #business #business-menu li {width:330px; height:480px; border:0px solid #f00; background-color:#fff; box-shadow: 10px 10px 15px #bbb; position:relative; background-repeat:no-repeat} #wrap #business #business-menu li.bu-m1 {background-image:url(../img/main/business-back1.gif);} #wrap #business #business-menu li.bu-m2 {background-image:url(../img/main/business-back2.gif);} #wrap #business #business-menu li.bu-m3 {background-image:url(../img/main/business-back3.gif);} #wrap #business #business-menu li.bu-m4 {background-image:url(../img/main/business-back4.gif);} #wrap #business #business-menu li a {width:330px; height:480px; border:0px solid #f00; box-shadow: 10px 10px 15px #bbb; display:block; position:relative; background-repeat:no-repeat} #wrap #business #business-menu li .red-icon {width:13px; height:30px; position:absolute; top:0px; left:0px; background-repeat:no-repeat; z-index:5} #wrap #business #business-menu li .menu-name {position:relative; font-size:30px; font-weight:900; padding-top:65px; padding-left:48px; z-index:5} #wrap #business #business-menu li .menu-desc {position:relative; font-size:18px; font-weight:500; margin-top:45px; padding-left:48px; line-height:160%; z-index:5} #wrap #business #business-menu li .arrow-icon {width:56px; height:9px; position:absolute; bottom:70px; right:50px; background-image:url(../img/main/business-arrow.png); background-repeat:no-repeat; z-index:5} #wrap #business #business-menu li .arrow-number {position:absolute; left:50px; bottom:64px; width:60px; height:41px; background-repeat:no-repeat; border:0px solid #f00; z-index:5} #wrap #business #business-menu li.business-out {} #wrap #business #business-menu li.business-out a {background-image:url(../img/main/business-bg-white.png);} #wrap #business #business-menu li.business-out .red-icon {background-image:url(../img/main/business-red.png);} #wrap #business #business-menu li.business-out .menu-name {color:#ce171f;} #wrap #business #business-menu li.business-out .menu-desc {color:#000000;} #wrap #business #business-menu li.business-over {} #wrap #business #business-menu li.business-over a {background-image:url(../img/main/business-bg-red.png); cursor:pointer} #wrap #business #business-menu li.business-over .red-icon {background-image:url();} #wrap #business #business-menu li.business-over .menu-name {color:#fff;} #wrap #business #business-menu li.business-over .menu-desc {color:#fff;} #wrap #business #business-menu li.bu-m1 .num-out {background-image:url(../img/main/business-no1.png);} #wrap #business #business-menu li.bu-m1 .num-over {background-image:url(../img/main/business-no1-ov.png);} #wrap #business #business-menu li.bu-m2 .num-out {background-image:url(../img/main/business-no2.png);} #wrap #business #business-menu li.bu-m2 .num-over {background-image:url(../img/main/business-no2-ov.png);} #wrap #business #business-menu li.bu-m3 .num-out {background-image:url(../img/main/business-no3.png);} #wrap #business #business-menu li.bu-m3 .num-over {background-image:url(../img/main/business-no3-ov.png);} #wrap #business #business-menu li.bu-m4 .num-out {background-image:url(../img/main/business-no4.png);} #wrap #business #business-menu li.bu-m4 .num-over {background-image:url(../img/main/business-no4-ov.png);} #wrap #support {height:815px; background-image:url(../img/main/main-bg2.jpg); padding-top:180px;} #wrap #support #support-wrap {position:relative; width:1400px; margin:0 auto;} #wrap #support #support-wrap #support-left {position:absolute; left:0px; top:0px;} #wrap #support #support-wrap #support-left .support-txt1 {font-size:58px; line-height:100%; font-weight:800; color:#ce171f;} #wrap #support #support-wrap #support-left .support-txt1:before{ content: "SUPPORT"; position: absolute; font-size: 1em; color: #b01118; animation: business 5s ease-in-out infinite; } #wrap #support #support-wrap #support-left .support-txt2 {font-size:17px; line-height:100%; font-weight:800; color:#ffffff; margin-top:15px} #wrap #support #support-wrap #support-left .support-txt3 {font-size:16px; line-height:180%; font-weight:500; color:#aaa; margin-top:30px} #wrap #support #support-wrap #support-left ul {font-size:16px; line-height:180%; font-weight:500; color:#aaa; margin-top:120px; width:320px} #wrap #support #support-wrap #support-left ul li {border:1px solid #fff;} #wrap #support #support-wrap #support-left ul li:first-child {margin-bottom:20px} #wrap #support #support-wrap #support-left ul li a {display:block; font-size:17px; line-height:100%; font-weight:800; color:#ffffff; padding:25px 35px; background-repeat:no-repeat; background-position:250px center; cursor:pointer} #wrap #support #support-wrap #support-left ul li:first-child a {background-image:url(../img/main/support-icon1.png)} #wrap #support #support-wrap #support-left ul li:last-child a {background-image:url(../img/main/support-icon2.png)} #wrap #support #support-wrap #support-right {position:absolute; width:900px; right:0px; border:0px solid #f00} #wrap #support #support-wrap #support-right #support-menu {display:flex;} #wrap #support #support-wrap #support-right #support-menu li {margin-right:50px;} #wrap #support #support-wrap #support-right #support-menu li a {display:block; color:#fff; font-size:18px; line-height:100%; font-weight:800; padding-bottom:10px; border-bottom:2px solid #fff; cursor:pointer;} #wrap #support #support-wrap #support-right #support-menu li a:hover {color:#ce171f; border-bottom:2px solid #ce171f; transition:0.4s} #wrap #support #support-wrap #support-right #support-menu li a.support-hover {color:#ce171f; border-bottom:2px solid #ce171f;} #wrap #support #support-wrap #support-right .support-bbs {margin-top:70px; display:none; width:auto; flex-wrap:wrap; justify-content:space-between; display:none} #wrap #support #support-wrap #support-right .support-bbs li {width:280px;} #wrap #support #support-wrap #support-right .support-bbs li a {display:block;} #wrap #support #support-wrap #support-right .support-bbs li a .subject {color:#f1c600; font-size:18px; line-height:100%; font-weight:700; margin-top:40px} #wrap #support #support-wrap #support-right .support-bbs li a .contents {color:#f3f3f7; font-size:17px; line-height:160%; font-weight:500; margin-top:19px} #wrap #support #support-wrap #support-right .support-bbs li a .wdate {color:#f3f3f7; font-size:17px; line-height:100%; font-weight:500; margin-top:25px} #wrap #support #support-wrap #support-right .support-bbs-hover {display:flex} #wrap #company {height:870px; background-color:#ededf4} #wrap #company #company-wrap {width:1400px; height:100%; margin:0 auto; padding-top:180px; display:flex; flex-wrap:wrap; justify-content:space-between;} #wrap #company #company-wrap #company-left {width:700px; height:100%; border:0px solid #0f0; background-image:url(../img/main/company-k1.png); background-repeat:no-repeat; background-position:left top; } #wrap #company #company-wrap #company-right {width:700px; padding-left:80px; border:0px solid #fff;} #wrap #company #company-wrap #company-right .company-txt1 {font-size:30px; line-height:155%; font-weight:700; color:#000000;} #wrap #company #company-wrap #company-right .company-line {border-top:2px solid #ce171f; width:60px; margin-top:20px} #wrap #company #company-wrap #company-right .company-txt2 {margin-top:20px; font-size:18px; line-height:160%; font-weight:500; color:#666666;} #wrap #company #company-wrap #company-right .company-menu {display:flex; width:auto; flex-wrap:wrap; justify-content:space-between; margin-top:115px} #wrap #company #company-wrap #company-right .company-menu li {width:120px; border:0px solid #f00} #wrap #company #company-wrap #company-right .company-menu li a {cursor:pointer; display:block;} #wrap #company #company-wrap #company-right .company-menu li .icon {border-radius:50%; width:auto; height:120px; background-repeat:no-repeat; background-position:center ; } #wrap #company #company-wrap #company-right .company-menu li p {text-align:center; margin-top:15px; font-size:18px; line-height:100%; font-weight:500; color:#333} #wrap #company #company-wrap #company-right .company-menu li:nth-child(1) .company-menu-out {background-color:#fff; background-image:url(../img/main/company-icon1.png);} #wrap #company #company-wrap #company-right .company-menu li:nth-child(1) .company-menu-over {background-color:#e50012; background-image:url(../img/main/company-icon1-ov.png);} #wrap #company #company-wrap #company-right .company-menu li:nth-child(2) .company-menu-out {background-color:#fff; background-image:url(../img/main/company-icon2.png);} #wrap #company #company-wrap #company-right .company-menu li:nth-child(2) .company-menu-over {background-color:#e50012; background-image:url(../img/main/company-icon2-ov.png);} #wrap #company #company-wrap #company-right .company-menu li:nth-child(3) .company-menu-out {background-color:#fff; background-image:url(../img/main/company-icon3.png);} #wrap #company #company-wrap #company-right .company-menu li:nth-child(3) .company-menu-over {background-color:#e50012; background-image:url(../img/main/company-icon3-ov.png);} #wrap #company #company-wrap #company-right .company-menu li:nth-child(4) .company-menu-out {background-color:#fff; background-image:url(../img/main/company-icon4.png);} #wrap #company #company-wrap #company-right .company-menu li:nth-child(4) .company-menu-over {background-color:#e50012; background-image:url(../img/main/company-icon4-ov.png);} #wrap #company #company-wrap #company-right .company-menu li .icon {border-radius:50%; width:auto; height:120px; background-repeat:no-repeat; background-position:center ; background-color:#fff; transition:0.5s} #wrap footer {height:190px; background-color:#fff; border:0px solid #f00} #wrap footer section {width:1400px; padding-top:60px; text-align:left; position:relative; margin:0 auto; border:0px solid #66f} #wrap footer section .bottom-logo {position:absolute;} #wrap footer section .bottom-copy {padding-left:200px; color:#333333; font-size:16px;} #wrap footer section .bottom-copy p {margin-bottom:6px;} #wrap footer section .bottom-copy p span {padding:0 10px} #wrap footer section .bottom-copy .privacy-btn {color:#000; text-decoration:underline; cursor:pointer} /* 미디어 쿼리를 사용하여 화면 크기에 따라 레이아웃 조정 */ /* 스몰 디바이스 (모바일) */ @media (max-width: 767px) { #wrap {width:100%; min-width:auto; border:0px solid #00f} #wrap header {background-image:url(../img/main/main-img.jpg); background-position:center; background-size:cover; height:100vh;} #wrap header #menu-wrap {width:100%; min-width:auto; margin:0 auto; position:absolute; border:0px solid #f00; height:auto; padding-top:0px;} #wrap header #menu-wrap nav {width:auto; margin:0px auto; border:0px solid #f00; position:relative; z-index:100} #wrap header #menu-wrap nav h1 {border:0px solid #f00; width:100%; padding:0px; padding-top:15px; z-index:10; position:fixed;} #wrap header #menu-wrap nav h1.over {background-color:#000; position:fixed; border-bottom:1px solid #333; } #wrap header #menu-wrap nav h1 .h1-back {width:100%; height:100%; position:absolute; left:0px; top:0px; z-index:1} #wrap header #menu-wrap nav h1 .h1-back-over { background-color:#000; opacity:0.9; box-shadow: 2px 2px 2px #666;} #wrap header #menu-wrap nav h1 a {display:block; position:relative; margin:0px; margin-left:20px; width:200px; height:50px; background-size:contain; background-position:center top; background-repeat: no-repeat; z-index:5} #wrap header #menu-wrap nav h1 a span {display:none;} #wrap header #menu-wrap nav ul.main-menu {border:0px solid #f0f; position:absolute; width:100%; display:none; top:80px; left:0px; z-index:5} #wrap header #menu-wrap nav ul.main-menu-over {display:block !important} #wrap header #menu-wrap nav ul.main-menu li {margin:0px; position:relative; padding-bottom:10px} #wrap header #menu-wrap nav ul.main-menu li a {font-size:18px; display:block; padding:5px 20px;} #wrap header #menu-wrap nav ul.main-menu li a.over-color {color:#ce171f} #wrap header #menu-wrap nav ul.main-menu li:last-child {display:none} #wrap header #menu-wrap nav ul.main-menu .sub-menu {border:0px solid #f00; position:relative; padding-top:0px; left:auto; display:block !important; width:auto;} #wrap header #menu-wrap nav ul.main-menu .sub-menu li {display:block; width:100%; margin:5px 0px; padding:0px;} #wrap header #menu-wrap nav ul.main-menu .sub-menu li a {display:block; padding:5px 35px; font-weight:500; font-size:14px;} #wrap header #menu-wrap nav ul.main-menu .sub-menu li a.over-color {color:#ce171f;} #wrap header #menu-wrap nav ul.main-menu .sub-menu li .b-bar {border-bottom:2px solid #ce171f; width:0px; margin:0px 35px} #wrap header #menu-wrap nav #mobile-menu {display:block; position:fixed; right:15px; top:15px; z-index:10; border:0px solid #F00; background-color:#fff; border-radius:5px; background-image:url(/img/main/top-menu.gif); background-repeat:no-repeat; background-size:60%; background-position:center; opacity:0.9} #wrap header #menu-wrap nav #mobile-menu a {display:block; cursor:pointer; width:32px; height:30px} #wrap header #menu-wrap nav .mobile-menu-over {position:fixed !important; background-image:url(/img/main/close-icon.gif) !important} #wrap header #menu-wrap #menu-back {background-color:#000;} /** 메뉴 배경 **/ #wrap header #menu-wrap .menu-back-over {display:block; position:fixed !important; width:100%; height:100%; z-index:50; opacity:0.9 !important} #wrap header #header-wrap {border:0px solid #ff0; height:100%; width:auto; margin:0 auto; padding-top:1px;} #wrap header #header-wrap #head-txt1 {margin-top:36vh; font-size:21px;} #wrap header #header-wrap #head-txt2 {margin-top:4.6vh; font-size:37px;} /** 완료 **/ #wrap #business {width:auto; height:auto; background-position:center; background-size:cover; padding:30px 0px; border:0px solid #f00} #wrap #business #business-txt1 {margin-top:0px; font-size:30px;} #wrap #business #business-txt2 {margin-top:10px; font-size:14px; padding:0 20px; line-height:140%} #wrap #business #business-menu {width:auto; margin:0 2%; margin-top:30px; border:0px solid #f00} #wrap #business #business-menu li {width:160px; height:230px; margin-bottom:15px; box-shadow: 3px 3px 5px #bbb; position:relative; background-size:cover} #wrap #business #business-menu li a {width:100%; height:100%; box-shadow: 10px 10px 15px #bbb; background-size:cover} #wrap #business #business-menu li .red-icon {width:13px; height:30px; } #wrap #business #business-menu li br {display:none} #wrap #business #business-menu li .menu-name {position:relative; font-size:20px; font-weight:900; padding-top:20px; padding-left:30px;} #wrap #business #business-menu li .menu-desc {position:relative; font-size:14px; font-weight:500; margin-top:20px; padding:0px 10px; line-height:160%} #wrap #business #business-menu li .arrow-icon {width:40px; height:9px; bottom:20px; right:10px; background-size:contain;} #wrap #business #business-menu li .arrow-number {position:absolute; left:10px; bottom:20px; width:40px; height:30px; background-size:contain; border:0px solid #f00;} /** 완료 **/ #wrap #support {height:auto; border:0px solid #F00; background-position:center; background-size:cover; padding:30px 0px 40px 0px;} #wrap #support #support-wrap {position:relative; width:auto; margin:0 auto;} #wrap #support #support-wrap #support-left {position:relative; left:auto; top:auto;} #wrap #support #support-wrap #support-left .support-txt1 {font-size:30px; text-align:center;} #wrap #support #support-wrap #support-left .support-txt2 {font-size:16px; text-align:center;} #wrap #support #support-wrap #support-left .support-txt3 {font-size:14px; text-align:center; margin-top:10px; line-height:130%} #wrap #support #support-wrap #support-left ul {margin:30px auto; width:94%; display:flex; flex-wrap:wrap; justify-content:space-between;} #wrap #support #support-wrap #support-left ul li {width:48.5%; margin:0px} #wrap #support #support-wrap #support-left ul li:first-child {margin-bottom:0px} #wrap #support #support-wrap #support-left ul li a {display:block; font-size:14px; padding:15px 15px; background-position:90% center; background-size:20px} #wrap #support #support-wrap #support-right {position:relative; width:auto; right:auto; border:0px solid #f00; padding:0px 10px; padding-top:10px;} #wrap #support #support-wrap #support-right #support-menu {display:flex; flex-wrap:wrap; justify-content:space-between;} #wrap #support #support-wrap #support-right #support-menu li {margin-right:0px; width:18%} #wrap #support #support-wrap #support-right #support-menu li a {font-size:14px; padding-bottom:10px; border-bottom:2px solid #fff; cursor:pointer} #wrap #support #support-wrap #support-right .support-bbs {margin-top:20px; display:none; width:auto; border:0px solid #f00} #wrap #support #support-wrap #support-right .support-bbs li {width:auto; margin-bottom:20px} #wrap #support #support-wrap #support-right .support-bbs li:last-child {margin-bottom:0px} #wrap #support #support-wrap #support-right .support-bbs li a {display:flex; flex-wrap:wrap; justify-content:space-between;} #wrap #support #support-wrap #support-right .support-bbs li a .support-bbs-img {width:28%} #wrap #support #support-wrap #support-right .support-bbs li a .support-bbs-img img {width:100%} #wrap #support #support-wrap #support-right .support-bbs li a .support-bbs-desc {width:69%} #wrap #support #support-wrap #support-right .support-bbs li a .support-bbs-desc .subject {font-size:14px; margin-top:0px} #wrap #support #support-wrap #support-right .support-bbs li a .support-bbs-desc .contents {font-size:13px; margin-top:10px; line-height:130%} #wrap #support #support-wrap #support-right .support-bbs li a .support-bbs-desc .wdate {font-size:13px; margin-top:10px} #wrap #support #support-wrap #support-right .support-bbs-hover {display:block} /** 완료 **/ #wrap #company {width:auto; height:auto; border:0px solid #00f} #wrap #company #company-wrap {width:auto; height:auto; margin:0 auto; padding:35px 0px 40px 0px; display:block; position:relative;} #wrap #company #company-wrap #company-left {display:block; position:absolute; width:70px; height:70px; left:10px; top:40px; background-size:contain;} #wrap #company #company-wrap #company-right {width:auto; padding:0px 10px; border:0px solid #fff;} #wrap #company #company-wrap #company-right .company-txt1 {font-size:17px; line-height:155%; padding-left:80px} #wrap #company #company-wrap #company-right .company-txt1 br {display:none} #wrap #company #company-wrap #company-right .company-line {margin-top:15px} #wrap #company #company-wrap #company-right .company-txt2 {margin-top:15px; font-size:15px; line-height:160%;} #wrap #company #company-wrap #company-right .company-txt2 br {display:none} #wrap #company #company-wrap #company-right .company-menu {margin-top:30px} #wrap #company #company-wrap #company-right .company-menu li {width:70px; border:0px solid #f00} #wrap #company #company-wrap #company-right .company-menu li p {margin-top:15px; font-size:14px;} #wrap #company #company-wrap #company-right .company-menu li .icon {height:70px; background-size:37%;} #wrap footer {height:auto; width:auto; border:0px solid #f00} #wrap footer section {width:auto; padding:20px 10px;} #wrap footer section .bottom-logo {display:none} #wrap footer section .bottom-copy {padding-left:0px; color:#333333; font-size:14px;} #wrap footer section .bottom-copy p {margin-bottom:6px;} #wrap footer section .bottom-copy p span {padding:0 10px} } /* 스몰 디바이스 (모바일 중간) */ @media (min-width: 540px) and (max-width: 767px) { #wrap #company #company-wrap #company-left {width:80px; height:80px; left:20px; top:40px; background-size:contain;} #wrap #company #company-wrap #company-right {width:auto; padding:0px 20px; border:0px solid #fff;} #wrap #company #company-wrap #company-right .company-txt1 {font-size:17px; line-height:155%; padding-left:100px} #wrap #company #company-wrap #company-right .company-menu {margin-left:20px; margin-right:20px;} #wrap #company #company-wrap #company-right .company-menu li {width:90px; border:0px solid #f00} #wrap #company #company-wrap #company-right .company-menu li .icon {height:90px; background-size:37%;} #wrap footer section {width:auto; padding:20px 20px;} } /* 미디엄 디바이스 (태블릿) */ @media (min-width: 768px) and (max-width: 1023px) { /** header { text-align: center; } nav ul { float: right; } nav li { display: inline; margin-left: 10px; } **/ }