/* 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; } #wrap {width:auto; min-width:1400px;} #privacy-wrap {width:auto;} #wrap header {background-position:center top; height:350px; z-index:10; position:relative;} #wrap header.company {background-image:url(../img/sub/company-title.jpg);} #wrap header.business {background-image:url(../img/sub/business-title.jpg);} #wrap header.contact {background-image:url(../img/sub/contact-title.jpg);} #wrap header.support {background-image:url(../img/sub/support-title.jpg);} #wrap header #menu-wrap {width:100%; min-width:1400px; margin:0 auto; position:absolute; border:0px solid #f00; height:105px; z-index:5} #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: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:207px; z-index:1} #wrap header #header-wrap #head-txt1 {text-align:center; color:#fff; font-size:48px; font-weight:800; line-height:100%; z-index:1; place-items: center; display: grid} #wrap header #header-wrap #head-txt1 .typing-ef {width: var(--typing-width); animation: var(--typing-ani), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid #fff; font-size: 1em;} #wrap header #header-wrap #head-txt2 {text-align:center; color:#fff; margin-top:15px; font-size:18px; font-weight:500; line-height:100%} @keyframes typing { from { width: 0 } } @keyframes blink { 50% { border-color: transparent } } #wrap #sub-wrap {border:0px solid #F00; width:1400px; margin:0 auto; padding-bottom:50px} #wrap #sub-wrap #sub-head {width:auto; height:140px; margin:0 auto; padding-top:32px; border:0px solid #f00; background-image:url(../img/sub/sub-title-bg.gif); background-repeat:no-repeat} #wrap #sub-wrap #sub-head #sub-head-navi {} #wrap #sub-wrap #sub-head #sub-head-navi #sub-head-navi-ttle {display:none} #wrap #sub-wrap #sub-head #sub-head-navi ul {display:flex; margin-left:42px;} #wrap #sub-wrap #sub-head #sub-head-navi ul li {margin-left:40px; padding-right:40px; background-image:url(../img/sub/sub-menu-bar.gif); background-repeat:no-repeat; background-position:right 3px; border:0px solid #F00; font-weight:500} #wrap #sub-wrap #sub-head #sub-head-navi ul li:last-child {padding-right:0px; background-image:url()} #wrap #sub-wrap #sub-head #sub-head-navi ul li a {cursor:pointer; font-size:18px; display:block; text-decoration:none; color:#000} #wrap #sub-wrap #sub-head #sub-head-navi ul li .bottom-bar {background-color:#fff; height:3px; margin-top:8px} #wrap #sub-wrap #sub-head #sub-head-navi ul li.menu-over {} #wrap #sub-wrap #sub-head #sub-head-navi ul li.menu-over a {color:#ce171f} #wrap #sub-wrap #sub-head #sub-head-navi ul li.menu-over .bottom-bar {background-color:#ce171f;} #wrap #sub-wrap #sub-contents-top {width:auto; margin:0 auto; border:0px solid #f00; z-index:10} #wrap #sub-wrap #sub-contents-top .sub-contents-head {width:auto; margin:0 auto; height:70px; border:0px solid #f00; position:relative;} #wrap #sub-wrap #sub-contents-top .sub-contents-head .sub-contents-title {font-size:36px; padding-left:35px; font-weight:700} #wrap #sub-wrap #sub-contents-top .sub-contents-head .sub-navi {position:absolute; display:flex; right:5px; top:20px; color:#666666; font-size:14px} #wrap #sub-wrap #sub-contents-top .sub-contents-head .sub-navi li {margin-left:10px; padding-right:17px; background-image:url(../img/sub/sub-navi-arrow.gif); background-repeat:no-repeat; background-position:right 1px; line-height:100%; font-weight:300} #wrap #sub-wrap #sub-contents-top .sub-contents-head .sub-navi li:last-child {padding-right:0px; background-image:url()} #wrap #sub-wrap #sub-contents {width:auto; margin:0 auto; border:0px solid #f00; min-height:500px; padding:20px 0px; z-index:5} #wrap #sub-wrap #sub-contents .lw1 {letter-spacing:0.2px} #wrap #sub-wrap #sub-contents .lw-1 {letter-spacing:-0.2px} #wrap #sub-wrap #sub-contents .const {text-align:center; padding:150px 0px} /**** #wrap #sub-wrap #sub-contents #history {text-align:left;} #wrap #sub-wrap #sub-contents #history ul {border:0px solid #f00; background-image:url(/img/sub/history-bar.gif); background-repeat:repeat-y; background-position:9px 5px;} #wrap #sub-wrap #sub-contents #history ul li {padding-bottom:30px; background-image:url(/img/sub/history-icon.png); background-repeat:no-repeat; background-position:0 1px; padding-left:28px} #wrap #sub-wrap #sub-contents #history ul li.txt-right {} #wrap #sub-wrap #sub-contents #history ul li .history-year {font-weight:700; font-size:18px; margin-bottom:7px; padding-left:3px} #wrap #sub-wrap #sub-contents #history ul li .history-cont {margin-bottom:5px} ****/ #wrap #sub-wrap #sub-contents #history {text-align:left;} #wrap #sub-wrap #sub-contents #history ul {margin-bottom:50px} #wrap #sub-wrap #sub-contents #history ul li {padding-bottom:50px; background-image:url(/img/sub/history-icon.png); background-repeat:no-repeat; background-position:center 1px;} #wrap #sub-wrap #sub-contents #history ul li div {border:0px solid #f00; width:50%; text-align:right; padding-right:18px} #wrap #sub-wrap #sub-contents #history ul li .history-year {font-weight:700; font-size:18px; margin-bottom:7px; padding-right:3px} #wrap #sub-wrap #sub-contents #history ul li .history-cont {margin-bottom:5px; color:#555} #wrap #sub-wrap #sub-contents #history ul li.txt-right {} #wrap #sub-wrap #sub-contents #history ul li.txt-right:after {clear:both; display:block; content:"";} #wrap #sub-wrap #sub-contents #history ul li.txt-right div {float:right; padding-left:18px; text-align:left;} #wrap #sub-wrap #sub-contents #history ul li.txt-right .history-year {padding-left:3px} #wrap #sub-wrap #sub-contents #history ul li.txt-right .history-cont {} #wrap #sub-wrap #sub-contents .map-title {color:#666; margin-bottom:10px; position:relative; padding-left:15px} #wrap #sub-wrap #sub-contents .map-title .bar {position:absolute; display:block; height:15px; width:3px; background-color:#ce171f; left:0px; top:20%} #wrap #sub-wrap #sub-contents .map-title .map-title-name {color:#000; font-size:18px; font-weight:700; padding-right:10px} #wrap #sub-wrap #sub-contents #introduct {font-size:17px; line-height:180%; color:#555; display:flex;} #wrap #sub-wrap #sub-contents #introduct .introduct-left {float:left; width:30%; margin-right:3.6%; border:0px solid #f00} #wrap #sub-wrap #sub-contents #introduct .introduct-left img {width:100%} #wrap #sub-wrap #sub-contents #introduct .introduct-right {border:0px solid #00f; width:66.4%} #wrap #sub-wrap #sub-contents #introduct .introduct-right .introduct-h1 {font-size:20px; line-height:180%; color:#000; margin-bottom:30px; font-weight:700} #wrap #sub-wrap #sub-contents .cate-list {border:0px solid #00f; display:flex;} #wrap #sub-wrap #sub-contents .cate-list li {margin-right:10px; border:1px solid #666} #wrap #sub-wrap #sub-contents .cate-list li a {display:block; padding:8px 20px; min-width:100px; text-align:center; text-decoration:none; color:#333; font-size:15px} #wrap #sub-wrap #sub-contents .cate-list li.over {border:1px solid #ce171f} #wrap #sub-wrap #sub-contents .cate-list li.over a {background-color:#ce171f; color:#fff} #wrap #sub-wrap #sub-contents .cate-list li.hover {border:1px solid #ce171f} #wrap #sub-wrap #sub-contents .cate-list li.hover a {background-color:#ce171f; color:#fff} #wrap #sub-wrap #sub-contents .product-list-wrap {margin-top:30px} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list {border-top:1px solid #dcdcdc; } #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li {border-bottom:1px solid #dcdcdc; padding:40px 10px; display:flex;} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .photo {margin-right:30px;} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .photo img {width:300px} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .pinfo {} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .pinfo .category {padding-bottom:15px;} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .pinfo .category p {display:inline-block; background-color:#ce171f; color:#fff; padding:7px 20px; border-radius:20px} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .pinfo .product-name {font-size:17px; font-weight:700; padding-top:5px;} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .pinfo .product-name a {text-decoration:none; color:#333} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .pinfo .product-info {font-size:14px; color:#666; padding-top:30px; line-height:180%} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .no-data {text-align:center; width:100%; display:block;} #wrap #sub-wrap #sub-contents .product-read-wrap {margin-top:30px; border:0px solid #f00} #wrap #sub-wrap #sub-contents .product-read-wrap .pinfo1 {border:1px solid #dcdcdc; padding:20px 20px; background-color:#fafafa} #wrap #sub-wrap #sub-contents .product-read-wrap .pinfo1 .category {padding-bottom:20px} #wrap #sub-wrap #sub-contents .product-read-wrap .pinfo1 .category p {display:inline-block; background-color:#ce171f; color:#fff; padding:7px 20px; border-radius:20px} #wrap #sub-wrap #sub-contents .product-read-wrap .pinfo1 .product-name {font-size:18px; font-weight:700;} #wrap #sub-wrap #sub-contents .product-read-wrap .photo {width:auto; text-align:center; padding:30px 0px} #wrap #sub-wrap #sub-contents .product-read-wrap .photo img {max-width:90%; } #wrap #sub-wrap #sub-contents .product-read-wrap .pinfo2 {border-top:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; font-size:14px; color:#666; padding:30px 10px; line-height:180%} #wrap #sub-wrap #sub-contents .product-read-wrap .back-btn {margin-top:30px; text-align:right;} #wrap #sub-wrap #sub-contents .product-read-wrap .back-btn a {display:inline-block; background-color:#333; color:#fff; padding:10px 25px; border-radius:3px; text-decoration:none; font-size:14px} #wrap #sub-wrap #sub-contents #contact-wrap {border:1px solid #dcdcdc; background-color:#fafafa; padding:100px 60px} #wrap #sub-wrap #sub-contents #contact-wrap .contact-msg {text-align:center; margin-bottom:50px; color:#666} #wrap #sub-wrap #sub-contents #contact-wrap dl {display:flex; flex-wrap:wrap; justify-content:flex-start} #wrap #sub-wrap #sub-contents #contact-wrap dl dt {width:10%; padding:31px 0px; color:#333} #wrap #sub-wrap #sub-contents #contact-wrap dl dd {width:90%; padding:15px 0px; color:#333} #wrap #sub-wrap #sub-contents #contact-wrap dl dd input {border:0px none; border-bottom:1px solid #999; background:transparent; width:99%; padding:15px; font-size:16px; -webkit-transition:all 0.30s ease-in-out; -moz-transition:all 0.30s ease-in-out; -ms-transition:all 0.30s ease-in-out; -o-transition:all 0.30s ease-in-out; outline:none;; color:#333} #wrap #sub-wrap #sub-contents #contact-wrap .privacy label {color:#ce171f} #wrap #sub-wrap #sub-contents #contact-wrap .submit-btn {margin-top:40px; text-align:center;} #wrap #sub-wrap #sub-contents #contact-wrap .submit-btn input {border:0px none; background-color:#ce171f; color:#fff; font-size:18px; text-align:center; line-height:100%; padding:30px; width:99%; cursor:pointer} /** 조직도 **/ #sub-contents .group-box {width:100%;display:flex;} #sub-contents .group-box li {border:0px solid #f00; flex-wrap:wrap; justify-content:flex-start} #sub-contents .group-box li.box1 {width:34%} #sub-contents .group-box li.box2 {width:32%} #sub-contents .group-box li.box3 {width:34%} #sub-contents .group-box li .name1 {border:1px solid #666; width:140px; margin:0 auto; text-align:center; padding:10px 0px; border-radius:20px; background-color:#434d6c; color:#fff; font-weight:bold} #sub-contents .group-box li .name2 {border:1px solid #666; width:130px; margin:0 auto; text-align:center; padding:10px 0px; border-radius:20px; background-color:#818aa5; color:#fff; font-weight:bold} #sub-contents .group-box li .yline {border-right:1px solid #666; width:0px; margin:0 auto; height:50px} #sub-contents .group-box li .xline1 {width:50%; background-color:#666; height:1px; float:right} #sub-contents .group-box li .xline2 {width:100%; background-color:#666; height:1px} #sub-contents .group-box li .xline3 {width:50%; background-color:#666; height:1px} #sub-contents .group-box .sgroup-box1 {min-width:200px; width:60%; display:flex; margin:0 auto; border:0px solid #f00} #sub-contents .group-box .sgroup-box1 li {width:25%; display:flex; border:0px solid #f00; text-align:center;} #sub-contents .group-box .sgroup-box1 li table {margin:0 auto; display:block;} #sub-contents .group-box .sgroup-box1 li table .name1 {border:1px solid #666; width:50px; margin:0 auto; height:170px; padding:10px 0px; border-radius:25px; background-color:#fff; color:#000; font-weight:bold} #sub-contents .group-box .sgroup-box1 li .xline1 {width:50%; border-bottom:1px solid #666; height:0px; margin-left:50%; } #sub-contents .group-box .sgroup-box1 li .xline2 {width:100%; border-bottom:1px solid #666; height:0px} #sub-contents .group-box .sgroup-box1 li .xline3 {width:100%; border-bottom:1px solid #666; height:0px} #sub-contents .group-box .sgroup-box1 li .xline4 {width:50%; border-bottom:1px solid #666; height:0px} #sub-contents .group-box .sgroup-box2 {min-width:100px; width:50%; display:flex; margin:0 auto; border:0px solid #f00} #sub-contents .group-box .sgroup-box2 li {width:50%; display:flex; border:0px solid #f00; text-align:center;} #sub-contents .group-box .sgroup-box2 li table {margin:0 auto; display:block;} #sub-contents .group-box .sgroup-box2 li table .name1 {border:1px solid #666; width:50px; margin:0 auto; height:170px; padding:10px 0px; border-radius:25px; background-color:#fff; color:#000; font-weight:bold} #sub-contents .group-box .sgroup-box2 li .xline1 {width:50%; border-bottom:1px solid #666; height:0px; margin-left:50%; } #sub-contents .group-box .sgroup-box2 li .xline2 {width:50%; border-bottom:1px solid #666; height:0px} #sub-contents .group-box .name-height {line-height:170%} /**** 리스트 페이지링크 ****/ #wrap #sub-wrap #sub-contents #bbs-list-pagelink {margin:25px 0 20px 0; padding-bottom:10px; width:100%; border:0px solid #FF0000; text-align:center} #wrap #sub-wrap #sub-contents #bbs-list-pagelink span {margin:0px 1px; padding:0.4em 0.8em; color:#fff; font-weight:bold; font-size:1em; border:1px solid #f60; line-height:1.5; vertical-align:middle; outline:0px none; display:inline-block; background-color:#f60} #wrap #sub-wrap #sub-contents #bbs-list-pagelink a {text-decoration:none; color:#666; margin:0px 1px; padding:0.4em 0.8em; line-height:1.5; font-size:1em; border:1px solid #ccc; line-height:1.5; vertical-align:middle; outline:0px none; display:inline-block} #wrap #sub-wrap #sub-contents #bbs-list-pagelink a.ar {letter-spacing:-0.2em} #privacy-wrap .privacy {padding:10px} #privacy-wrap .privacy .privacy-ttle {margin-bottom:15px; border-bottom:1px solid #999; font-weight:700; padding:10px; font-size:17px} #privacy-wrap .privacy p {margin-bottom:25px; font-size:14px; line-height:170%; padding:0px 10px} #privacy-wrap .privacy .privacy-close {margin:15px 0px; border-top:1px solid #999; font-weight:700; padding:10px; font-size:17px; text-align:center} #wrap footer {height:190px; background-color:#fff; border:0px solid #f00; border-top:1px solid #dee0ec} #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-position:center; background-size:cover; height:260px;} #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:110px; font-size:33px;} #wrap header #header-wrap #head-txt2 {font-size:16px; line-height:140%; padding:0 20px} #wrap #sub-wrap {border:0px solid #F00; width:auto; margin:0 auto; padding-bottom:50px; position:relative;} #wrap #sub-wrap #sub-head {width:auto; height:50px; margin:0 auto; border-bottom:1px solid #dee0ec; background-size:16px; z-index:5; position:relative;} #wrap #sub-wrap #sub-head #sub-head-navi {position:absolute; top:0px; right:0px; height:50px;} #wrap #sub-wrap #sub-head #sub-head-navi #sub-head-navi-ttle {display:block; font-size:15px; border-left:1px solid #dee0ec; height:50px; line-height:50px; padding:0 30px 0px 20px; cursor:pointer; font-weight:700; background-image:url(../img/sub/sub-navi-barrow.gif); background-repeat:no-repeat; background-position:90% 47%} #wrap #sub-wrap #sub-head #sub-head-navi ul {display:block; top:10px; right:0px; height:0px; padding:0px; margin:0px; overflow:hidden; background-color:#fff} #wrap #sub-wrap #sub-head #sub-head-navi ul li {display:absolute; height:40px; border-left:1px solid #dee0ec; border-bottom:1px solid #dee0ec; margin:0px; padding:0px; background-image:url(../img/sub/sub-navi-menu-icon.gif); background-repeat:no-repeat; background-position:18px 47%} #wrap #sub-wrap #sub-head #sub-head-navi ul li:last-child {padding-right:0px; background-image:url(../img/sub/sub-navi-menu-icon.gif)} #wrap #sub-wrap #sub-head #sub-head-navi ul li a {cursor:pointer; font-size:14px; display:block; text-decoration:none; color:#000; height:40px; line-height:40px; padding:0 30px 0px 36px} #wrap #sub-wrap #sub-head #sub-head-navi ul li .bottom-bar {display:none} #wrap #sub-wrap #sub-head #sub-head-navi ul li.menu-over a {color:#000} #wrap #sub-wrap #sub-contents-top {width:auto; margin:0 auto; border:0px solid #f00; position:absolute; width:auto; top:0px; z-index:1} #wrap #sub-wrap #sub-contents-top .sub-contents-head {width:auto; margin:0 auto; height:50px; border:0px solid #f00; position:relative;} #wrap #sub-wrap #sub-contents-top .sub-contents-head .sub-contents-title {font-size:20px; padding-left:30px; font-weight:700; line-height:45px} #wrap #sub-wrap #sub-contents-top .sub-contents-head .sub-navi {display:none} #wrap #sub-wrap #sub-contents {width:auto; margin:0 auto; border:0px solid #f00; min-height:500px; margin-top:30px; padding:0px 10px} /**** 연혁 ****/ #wrap #sub-wrap #sub-contents #history {text-align:left; } #wrap #sub-wrap #sub-contents #history ul {margin-bottom:30px} #wrap #sub-wrap #sub-contents #history ul li {padding-bottom:40px; background-position:0px 1px;} #wrap #sub-wrap #sub-contents #history ul li div {border:0px solid #f00; width:100%; text-align:left; padding-left:28px} #wrap #sub-wrap #sub-contents #history ul li .history-year {font-weight:700; font-size:18px; margin-bottom:7px; padding-left:3px} #wrap #sub-wrap #sub-contents #history ul li .history-cont {margin-bottom:5px; color:#555} #wrap #sub-wrap #sub-contents #history ul li.txt-right div {float:none; padding-left:28px;} #wrap #sub-wrap #sub-contents .map-title {padding-left:13px; font-size:14px} #wrap #sub-wrap #sub-contents .map-title .bar {top:10%} #wrap #sub-wrap #sub-contents .map-title .map-title-name {font-size:16px;} #wrap #sub-wrap #sub-contents #introduct {font-size:15px; line-height:180%; color:#555; display:block;} #wrap #sub-wrap #sub-contents #introduct .introduct-left {float:left; width:30%; margin-right:10px} #wrap #sub-wrap #sub-contents #introduct .introduct-left img {width:100%} #wrap #sub-wrap #sub-contents #introduct .introduct-right {border:0px solid #00f; width:auto} #wrap #sub-wrap #sub-contents #introduct .introduct-right .introduct-h1 {font-size:20px; line-height:130%; color:#000; margin-bottom:30px; font-weight:700} #wrap #sub-wrap #sub-contents #introduct .introduct-right .introduct-h1 br {display:1none} #wrap #sub-wrap #sub-contents .cate-list {border:0px solid #00f; display:flex; flex-wrap:wrap; justify-content:flex-start} #wrap #sub-wrap #sub-contents .cate-list li {margin-right:10px; margin-bottom:10px} #wrap #sub-wrap #sub-contents .cate-list li a { padding:7px 15px; min-width:auto; min-width:70px; font-size:14px} #wrap #sub-wrap #sub-contents .product-list-wrap {margin-top:30px} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list {border-top:1px solid #dcdcdc; } #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li {border-bottom:1px solid #dcdcdc; padding:20px 0px; display:block;} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li:after {clear:both; display:block; content:"";} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .photo {margin-right:10px; margin-bottom:10px; float:left; width:140px;} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .photo img {width:100%} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .pinfo {} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .pinfo .category {padding-bottom:15px} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .pinfo .category p {display:inline-block; background-color:#ce171f; color:#fff; padding:7px 20px; border-radius:20px; font-size:14px} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .pinfo .product-name {font-size:16px; font-weight:700; } #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .pinfo .product-name a {text-decoration:none; color:#333} #wrap #sub-wrap #sub-contents .product-list-wrap .product-list li .pinfo .product-info {font-size:14px; color:#666; padding-top:15px; line-height:150%} #wrap #sub-wrap #sub-contents .product-read-wrap {margin-top:30px; border:0px solid #f00} #wrap #sub-wrap #sub-contents .product-read-wrap .pinfo1 {border:1px solid #dcdcdc; padding:15px 10px} #wrap #sub-wrap #sub-contents .product-read-wrap .pinfo1 .category {padding-bottom:15px;} #wrap #sub-wrap #sub-contents .product-read-wrap .pinfo1 .category p {font-size:14px; padding:5px 15px; border-radius:20px} #wrap #sub-wrap #sub-contents .product-read-wrap .pinfo1 .product-name {font-size:16px; font-weight:700;} #wrap #sub-wrap #sub-contents .product-read-wrap .photo {width:auto; text-align:center; padding:25px 0px} #wrap #sub-wrap #sub-contents .product-read-wrap .photo img {max-width:90%; } #wrap #sub-wrap #sub-contents .product-read-wrap .pinfo2 {border-top:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; font-size:14px; color:#666; padding:25px 10px; line-height:180%} /** 조직도 **/ #sub-contents .group-box {width:100%;display:flex;} #sub-contents .group-box li {border:0px solid #f00; flex-wrap:wrap; justify-content:flex-start} #sub-contents .group-box li.box1 {width:34%} #sub-contents .group-box li.box2 {width:32%} #sub-contents .group-box li.box3 {width:34%} #sub-contents .group-box li .name1 {border:1px solid #666; width:120px; margin:0 auto; text-align:center; padding:10px 0px; border-radius:20px; background-color:#434d6c; color:#fff; font-weight:bold} #sub-contents .group-box li .name2 {border:1px solid #666; width:110px; margin:0 auto; text-align:center; padding:10px 0px; border-radius:20px; background-color:#818aa5; color:#fff; font-weight:bold} #sub-contents .group-box li .yline {border-right:1px solid #666; width:0px; margin:0 auto; height:40px} #sub-contents .group-box li .xline1 {width:50%; background-color:#666; height:1px; float:right} #sub-contents .group-box li .xline2 {width:100%; background-color:#666; height:1px} #sub-contents .group-box li .xline3 {width:50%; background-color:#666; height:1px} #sub-contents .group-box .sgroup-box1 {min-width:140px; width:100%; display:flex; margin:0 auto; border:0px solid #f00} #sub-contents .group-box .sgroup-box1 li {width:25%; display:flex; border:0px solid #f00; text-align:center;} #sub-contents .group-box .sgroup-box1 li table {margin:0 auto; display:block;} #sub-contents .group-box .sgroup-box1 li table .name1 {border:1px solid #666; width:36px; margin:0 auto; height:160px; font-size:14px; padding:10px 0px; border-radius:18px; background-color:#fff; color:#000; font-weight:bold} #sub-contents .group-box .sgroup-box1 li .xline1 {width:50%; border-bottom:1px solid #666; height:0px; margin-left:50%; } #sub-contents .group-box .sgroup-box1 li .xline2 {width:100%; border-bottom:1px solid #666; height:0px} #sub-contents .group-box .sgroup-box1 li .xline3 {width:100%; border-bottom:1px solid #666; height:0px} #sub-contents .group-box .sgroup-box1 li .xline4 {width:50%; border-bottom:1px solid #666; height:0px} #sub-contents .group-box .sgroup-box2 {min-width:100px; width:70%; display:flex; margin:0 auto; border:0px solid #f00} #sub-contents .group-box .sgroup-box2 li {width:50%; display:flex; border:0px solid #f00; text-align:center;} #sub-contents .group-box .sgroup-box2 li table {margin:0 auto; display:block;} #sub-contents .group-box .sgroup-box2 li table .name1 {border:1px solid #666; width:36px; margin:0 auto; height:160px; font-size:14px; padding:10px 0px; border-radius:18px; background-color:#fff; color:#000; font-weight:bold} #sub-contents .group-box .sgroup-box2 li .xline1 {width:50%; border-bottom:1px solid #666; height:0px; margin-left:50%; } #sub-contents .group-box .sgroup-box2 li .xline2 {width:50%; border-bottom:1px solid #666; height:0px} #sub-contents .group-box .name-height {line-height:170%} #wrap #sub-wrap #sub-contents #contact-wrap {border:1px solid #dcdcdc; background-color:#fafafa; padding:50px 15px} #wrap #sub-wrap #sub-contents #contact-wrap .contact-msg {text-align:center; margin-bottom:30px; color:#666} #wrap #sub-wrap #sub-contents #contact-wrap dl {display:block;} #wrap #sub-wrap #sub-contents #contact-wrap dl dt {display:none} #wrap #sub-wrap #sub-contents #contact-wrap dl dd {width:auto; padding:15px 0px; color:#333} #wrap #sub-wrap #sub-contents #contact-wrap dl dd input {border:0px none; border-bottom:1px solid #999; background:transparent; width:99%; padding:10px; font-size:14px;} #wrap #sub-wrap #sub-contents #contact-wrap .submit-btn {margin-top:40px; text-align:center;} #wrap #sub-wrap #sub-contents #contact-wrap .submit-btn input {border:0px none; background-color:#ce171f; color:#fff; font-size:18px; text-align:center; line-height:100%; padding:25px; width:100%; cursor:pointer} #wrap footer {height:auto; width:auto;} #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) { } /* 미디엄 디바이스 (태블릿) */ @media (min-width: 768px) and (max-width: 1023px) { /** header { text-align: center; } nav ul { float: right; } nav li { display: inline; margin-left: 10px; } **/ }