@import url(font.css);
@import url(remixicon.css);
@font-face {
    font-family: 'ONE-Mobile-Title';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
html {overflow-y:auto;}
body {-webkit-overflow-scrolling:touch; overflow-x: hidden; line-height: 1; font-size: 16px; color:#222222; font-family:'Pretendard', sans-serif; font-weight: 400;}
html,body {width:100%;}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
pre {font-family: inherit;}
ul,ol,dl,dt,li {list-style: none;}
img, fieldset {border:0 none;}
img {vertical-align:top; height:auto;}
legend {display:none; position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; font-size:0; line-height:0;}
input, textarea {font-size:16px; color: var(--font-color); background:transparent; font-family: inherit; border:0;}
textarea {resize: none;}
button {border:0 none; background:transparent; padding:0; margin:0; font-size:inherit; font-family:inherit; color: inherit;}
input,textarea,select {appearance:none; border-radius: 0;}
em, address {font-style:normal;}
table {border-spacing:0; border-collapse:collapse; width:100%;}
caption {font-size: 0; line-height: 0; width:0; height:0; text-indent:-1000px; overflow: hidden;}
a, a:link, a:visited, a:hover, a:active {text-decoration:none; color:inherit;}
a,input{-webkit-tap-highlight-color:transparent;}
* {margin: 0; padding: 0; outline: none; text-decoration: none; box-sizing: border-box;}
button, input[type="button"], label {cursor:pointer;}
select {border:0; width:100%; height:100%; cursor: pointer;}
::before, ::after {box-sizing: border-box;}

/*placeholder css*/
input:focus::-webkit-input-placeholder {color:transparent;}
input:focus:-moz-placeholder { color:transparent; }
input::-webkit-input-placeholder {color:#b5b5b5;}
input::-moz-input-placeholder {color:#b5b5b5;}
input:-ms-input-placeholder {color:#b5b5b5;}
input:-moz-input-placeholder {color:#b5b5b5;}

/* select */
.selectBox {display:flex; align-items: center; width:100%; height:45px; border:1px solid #dddddd; position: relative;}
.selectBox select {padding:5px 10px; font-size:14px;}
.selectBox::after {content:"\ea4d"; font-family: 'remixicon'; font-size:20px; position: absolute; top:50%; right:10px; transform: translateY(-50%);}

/* input(text,password,number,tel,search,email) */
input[type="text"],input[type="password"],input[type="number"],input[type="tel"],input[type="search"],input[type="email"],input[type="file"] {width: 100%; height:45px; font-size:14px; padding:8px 10px; border:1px solid #dddddd;}

/*layout*/
.wrap {width:100%;}
.container {width:100%; padding-top:100px; transition:all 0.3s ease-out;}
.content_wrap {max-width: 1200px; margin:0 auto; width:100%; padding:0 20px;}
.container.scrollOn {padding-top:65px;}

/* animate */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* common */
.visually-hidden {position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);}
.mask {position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); z-index: 100;}
.layer {display:none; position:fixed; top:0; left:0; width:calc(100% - 30px); height:calc(100% - 60px); margin:30px 15px; justify-content: center; align-items: center; z-index: 200; transform: translateY(-100px); opacity: 0; transition: all 0.3s ease-out;}
.layer .flex {display:flex; width:640px; background:#ffffff; flex-direction: column; position: relative; border-radius:15px; overflow: hidden;}
.layer .flex h3 {background:#000000; padding:0 55px 0 25px; height:58px; display:flex; align-items: center; font-size:18px; color:#ffa800; font-weight:500;}
.layer .flex > ul {display:flex; align-items: center; width:100%; background:#000000; padding:0 55px 0 25px; gap:10px; height:58px;}
.layer .flex > ul > li > button {font-size:18px; color:#888888; display:flex; gap:10px; align-items: center;}
.layer .flex > ul > li > button::after {content:""; display:flex; width:1px; height:14px; background:#555555;}
.layer .flex > ul > li:last-child > button::after {display:none;}
.layer .flex > ul > li > button.on {color:#ffa800; font-weight:500;}
.layer .flex .layerScroller {max-height:650px; overflow-y: auto; padding:25px 20px;}
.layer .flex .layerScroller .layercontent {display:none; font-size:14px; line-height: 1.4;}
.layer .flex .closeButton {position:absolute; top:calc((55px - 30px) / 2); right:20px; width:28px; height:28px; font-size:0;}
.layer .flex .closeButton::before {content:""; width:100%; height:1px; background:#ffffff; position:absolute; top:14px; left:0; transform:rotate(45deg);}
.layer .flex .closeButton::after {content:""; width:100%; height:1px; background:#ffffff; position:absolute; top:14px; left:0; transform:rotate(-225deg);}

/*paging*/
.paging {display:flex; align-items: center; justify-content: center; gap: 4px; margin:50px 0 100px;}
.paging > button {display:flex; width:32px; height:32px; justify-content: center; align-items: center; border:1px solid #dfdfdf; border-radius: 3px; transition: all 0.3s ease;}
.paging .number {display:flex;  align-items: center;  gap:4px;}
.paging .number > a {display:flex; width:32px; height:32px; justify-content: center; align-items: center; border:1px solid #dfdfdf; border-radius: 3px; transition: all 0.3s ease;}
.paging > button:hover, .paging .number > a:hover {border:1px solid #000000;}
.paging .number > a.on {border:1px solid #000000;}

/* align */
.left {text-align: left !important;}
.center {text-align: center !important;}
.right {text-align: right !important;}

/* table */
table thead th, table tbody th, table tbody td, table tfoot th, table tfoot td {height:45px; border:1px solid #cccccc; padding:8px 10px; font-weight:500; font-size:14px;}
table thead th {background:#eeeeee;}
table tbody th {background:#f9f9f9;}
table tfoot {background: #d1ebfd;}

/* 검색필드 */
.search_wrap {display:flex; justify-content: flex-end;}
.searchField {display:flex; align-items: center; gap:5px; width:70%;}
.searchField .selectBox {width:140px;}
.searchField input {width:calc(100% - 240px);}
.searchField .btn {width:100px;}

/*데이타가 없을 때*/
.noData {position:relative; width:100%; height:250px; background:url('../images/arrow_bg.png')repeat; padding:20px; }
.noData strong {display:flex; width:100%; height:100%; background: #ffffff; align-items: center; justify-content: center; font-size:20px; font-weight:500;}

/*웹접근성으로 인한 탭이동 필요한 본문으로 가기*/
.contentLink {width:0; height:0; margin:0; font-size:0; line-height:0; display:block; text-align:center;}
.contentLink:focus {height:5px; padding:15px 0; font-size:14px; width:100%; color:#fff; background:#333;}

/* 일정영역 넓힐 때 */
hr {display:block; height:60px; border:0;}

/* button */
.button_wrap {display:flex; gap:10px; align-items: center; justify-content: center;}
.btn {width:100%; height:45px; display:flex; align-items: center; justify-content: center; padding:8px 10px; font-weight:500; font-size:14px;}
.gray {background:#555555; color:#ffffff !important;}
.black {background:#000000; color:#ffffff !important;}
.green {background:#2ecc71; color:#ffffff !important;}
.blue {background:#0a6fb3; color:#ffffff !important;}
.orange {background: #ff811b; color:#ffffff !important;}
.red {background: #ff0000; color:#ffffff !important;}
.button_wrap .btn:only-child {width:33.33%;}

/* input 필드 공통영역 */
.formField {display:flex; width:100%; gap:5px;}
.inpField {display:flex; align-items: center; gap:5px; width:100%;}
.inpField label, .inpField .lb {display:flex; align-items:center; justify-content: center; height:45px; width:140px; font-size:14px;}
.inpField label i, .inpField .lb i {font-size:10px; margin-right:5px; color:#ff0000;}
.inpField input[type="text"], .inpField input[type="password"], .inpField input[type="number"], .inpField input[type="tel"], 
.inpField input[type="search"], .inpField input[type="email"], .inpField input[type="file"] {display:flex; width:calc(100% - 140px); font-size:14px;}
.inpField textarea {width:calc(100% - 140px); height: 250px; padding:15px; border:1px solid #dddddd; background:#ffffff; line-height: 1.4; overflow-y: auto;}
.inpField.textArea label, .inpField.textArea .lb {height:100%;}

/*header*/
.header {position:fixed; background:#fff; width:100%; z-index:50; top:0; left:0; display:flex; align-items: center; justify-content: center; padding:0 25px; height:100px; transition: all 0.3s ease-out;}
.header h1 {display:flex; height:100%; position:absolute; top:0; left:0; padding:25px;}
.header h1 > a {display:flex; width:100%; transform:scale(1); transition:all 0.3s ease-out;}
.header h1 > a > img {width:100%;}
.header.scrollOn {height:65px; border-bottom:1px solid #dddddd;}
.header.scrollOn h1 {padding:12px;}

/*gnb*/
.mgnb_bar {display:none; position:fixed; top:15px; right:15px; width:24px; height:24px; z-index: 200; align-items: center; justify-content: center;}
.mgnb_bar span {font-size:0; background:#000000; width:100%; height:2px; position:relative; transition:all 0.3s ease-out;}
.mgnb_bar span::before {content:""; width:100%; height:2px; background:#000000; position:absolute; top:-7px; left:0; transition:all 0.3s ease-out;}
.mgnb_bar span::after {content:""; width:100%; height:2px; background:#000000; position:absolute; top:7px; left:0; transition:all 0.3s ease-out;}
.mgnb_bar.active span {background:transparent;}
.mgnb_bar.active span::before {transform:rotate(45deg); top:0;}
.mgnb_bar.active span::after {transform:rotate(-225deg); top:0;}
.navigation {max-width:1200px; margin:0 auto; width:100%; transition:all 0.3s ease-out;}
.navigation .gnb {width:100%; display:flex; justify-content: space-between; align-items: center;}
.navigation .gnb > li {width:25%; position: relative; height:100%;}
.navigation .gnb > li > button {font-size:20px; width:100%; font-family: 'ONE-Mobile-Title';}
.navigation .gnb > li > .gnbPanel {position:absolute; top:61px; left:0; z-index:250; background:#f2f2f2; width:100%; overflow: hidden; border: 1px solid #dddddd; transition:all 0.3s ease-out; max-height:0; visibility: hidden;}
.navigation .gnb > li > .gnbPanel > ul > li > a {display:block; padding:15px; font-size:15px; border-bottom:1px solid #ddd;}
.navigation .gnb > li > .gnbPanel > ul > li:last-child > a {border-bottom:0;}
.navigation .gnb > li > .gnbPanel > ul > li > a:hover {background:#fff; font-weight:400; color:#ffa800;}
.header.scrollOn .navigation .gnb > li > .gnbPanel {top:43px;}

/*sub common headline*/
.comTopdBg {height:300px; transition:all .5s; -webkit-transition:all .5s; -moz-transition:all .5s; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; position:relative; z-index:-5;}
.comTopdBg::after {content:""; width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(0,0,0,0.5); z-index:-1;}
.comTopinTx {display:flex; align-items: center; justify-content: center; flex-direction: column; gap:25px; padding-top:80px;}
.comTopinTx h2 {font-size:42px; color:#fff; font-family: 'ONE-Mobile-Title'; animation-name : slideUp; animation-duration : 0.5s; animation-direction : normal; font-weight: 500;}
.comTopinTx p {font-size:18px; color:#f9f9f9; font-family: 'ONE-Mobile-Title'; animation-name : slideDown; animation-duration : 0.5s; animation-direction : normal;}

/* page location */
.pageLocation {display:flex; align-items: center; justify-content: flex-end; padding-top:20px; gap:5px;}
.pageLocation span {color:#fff; font-size:13px; opacity:0.6; display:flex; align-items: center; gap:5px;}
.pageLocation span.home::before {content:"\ee1b"; font-family: 'remixicon'; font-size:14px;}
.pageLocation span::after {content:"\ea6e"; font-family: 'remixicon'; font-size:16px;}
.pageLocation span:last-child {opacity:1; font-weight:500;}
.pageLocation span:last-child::after {display:none;}

/*footer*/
.footer {background:#333333;}
.rolling-container {overflow: hidden; width: 100%; position: relative; background:#f8f8f8; margin-top:65px; padding:45px 0;}
.rolling-track {display: flex; width: max-content; will-change: transform;}
.rolling-content {display: flex;}
.rolling-content img {width: 155px; margin-right: 20px; flex-shrink: 0; display: block;}
.footerLayerNav {background:#000;}
.footerLayerNav .content_wrap {padding:0; display:flex; align-items: center; height:55px;}
.footerLayerNav .content_wrap > div {width:50%;}
.footerLayerNav .content_wrap .link {display:flex; align-items: center; gap:10px;}
.footerLayerNav .content_wrap .link button {color:#fff; font-size:14px; opacity:.8; display:flex; align-items: center;}
.footerLayerNav .content_wrap .link button::after {content:""; width:1px; height:12px; display:flex; background:rgba(255,255,255,0.8); margin-left:10px;}
.footerLayerNav .content_wrap .link button:last-child::after {display:none;}
.footerLayerNav .content_wrap .link button.bold {opacity:1; font-weight:500;}
.footerLayerNav .content_wrap .download_wrap {display:flex; justify-content: flex-end;}
.footerLayerNav .content_wrap .download_wrap button {font-size: 14px; height:55px; padding:0 15px; display:flex; align-items: center;}
.footerLayerNav .content_wrap .download_wrap button::before {content:"\ec5a"; font-family: 'remixicon'; font-size:16px; margin-right:5px;}
.footer address {padding:35px 0; display:flex; gap:20px;}
.footer address .img {width:68px;}
.footer address .img img {width:100%;}
.footer address .addressInfo {width:calc(100% - 74px); display:flex; flex-direction: column;}
.footer address .addressInfo strong {font-size:18px; font-weight:400; color:#666666; color:#ffffff;}
.footer address .addressInfo .addr {font-size:14px; display:flex; align-items: center; gap:15px; margin:15px 0 10px; color:#ffffff;}
.footer address .addressInfo .addr span {display:flex; align-items: center;}
.footer address .addressInfo .addr span a {font-size:10px; display:flex; align-items: center; justify-content: center; height:20px; font-weight:200; padding:0 8px; background:#666666; margin-left:5px;}
.footer address .addressInfo .copy {font-size:12px; color:#ffffff;}

/* 회사소개서 다운로드 */
.downloadButton {display:none; position:fixed; bottom:300px; right:20px; flex-direction: column; width:85px; height:75px; justify-content: center; align-items: center; font-size:12px; line-height: 1.4; border-radius: 10px; box-shadow: 0 2px 5px rgba(2, 41, 85, 0.1); z-index: 50;}
.downloadButton::before {content:"\ec5a"; font-family: 'remixicon'; font-size:24px;}
.downloadButton.on {display:flex;}
.downloadButton2 {display:none; position:fixed; bottom:200px; right:20px; flex-direction: column; width:85px; height:75px; justify-content: center; align-items: center; font-size:12px; line-height: 1.4; border-radius: 10px; box-shadow: 0 2px 5px rgba(2, 41, 85, 0.1); z-index: 50;}
.downloadButton2::before {content:"\ec5a"; font-family: 'remixicon'; font-size:24px;}
.downloadButton2.on {display:flex;}

/*sub content*/
.subcoNt_wrap {max-width:1200px; margin:0 auto; width:100%;}
.subcoNt_wrap h2 {font-size:28px; font-family: 'ONE-Mobile-Title'; display:flex; align-items: center; font-weight: 500;}
.subcoNt_wrap h2 i {margin-right:10px; color:#777777; font-size:32px;}

/*about*/
.about_wrap {margin:80px 0; padding:30px; background:url('../images/arrow_bg.png')repeat; display:flex;}
.about_wrap .leftBox {padding:20px 25px; border:1px solid #ddd; background:#fff; width:calc(100% - 550px); width:-webkit-calc(100% - 550px); width:-moz-calc(100% - 550px); display:flex; flex-direction: column; gap:20px;}
.about_wrap .leftBox h3 {font-size:18px; font-family: 'ONE-Mobile-Title'; line-height:1.6; font-weight:500; margin-bottom:20px; word-break:keep-all;}
.about_wrap .leftBox p {line-height:1.6; font-size:14px; color:#777; word-break:keep-all; }
.about_wrap .leftBox p em {color:#000; font-weight:400;}
.about_wrap .leftBox .sign {text-align:right; margin:20px 0;}
.about_wrap .leftBox .sign span {display:inline-block; padding:30px 20px 0 0; color:#555;}
.about_wrap .rightBox {width:550px; overflow: hidden; display:flex; justify-content: center;}
.about_wrap .rightBox img {width:fit-content;}

/* 회사전경 */
.aboutCompanyImg {overflow:hidden; margin:40px 0 80px; padding:30px; background:url('../images/arrow_bg.png')repeat; display:flex;}
.aboutCompanyImg img {max-width:100%; width:fit-content;}

/*history*/
.history_wrap {margin:40px 0 80px; padding:30px; background:url('../images/arrow_bg.png')repeat;}
.history_list {background:#fff;}
.history_list > li {display:flex; min-height: 150px;}
.history_list > li:nth-child(even) {background:url('../images/arrow_bg.png')repeat;}
.history_list > li * {transition:all 0.3s ease-out;}
.history_list > li h3 {display:flex; width:35%; font-size:36px; font-family: 'ONE-Mobile-Title'; position:relative; padding:20px; text-align:right; justify-content: center; align-items: center;}
.history_list > li h3::before {content:""; width:20px; height:20px; position:absolute; top:50%; right:0; background:#ffa800; border-radius:50%; z-index:10; transform: translateY(-50%);}
.history_list > li h3::after {content:""; width:14px; height:14px; position:absolute; top:50%; right:3px; background:#fff; border-radius:50%; z-index:15; transform: translateY(-50%);}
.history_list > li ul {display:flex; width:65%; position:relative; padding:10px 20px; justify-content: center; flex-direction: column; gap:8px;}
.history_list > li ul::after {content:""; width:2px; height:100%; background:#ffa800; position:absolute; top:0; left:-11px; z-index:5;}
.history_list > li ul > li {display:flex; width:100%; gap:20px;}
.history_list > li ul > li > time {width:40px; font-size:16px; color:#333333; font-weight:500; display:flex;}
.history_list > li ul > li > span {width:calc(100% - 40px); color:#777777; display:flex;}

/*조직도*/
.organization_wrap {margin:80px 0; padding:30px; background:url('../images/arrow_bg.png')repeat;}
.organization_coNt {background:#fff; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; padding: 50px 0;}
.organization_coNt .node {position: relative; background: white; border: 2px solid #ccc; border-radius: 8px; padding: 15px 16px; margin: 40px auto; text-align: center; min-width: 180px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
.organization_coNt .node.only {margin: 0 auto;}
.organization_coNt .line-down {width: 2px; height: 60px; background: #ccc; margin: 0 auto; }
.organization_coNt .level {display: flex; justify-content: center; flex-wrap: wrap; position: relative; }
.organization_coNt .level::before { content: ''; position: absolute; top: 0; left: 50%; height: 40px; width: calc(100% - 240px); border-top: 2px solid #ccc; transform: translateX(-50%);}
.organization_coNt .admin {display: flex; flex-direction: column; align-items: center; margin: 0 30px; position: relative;}
.organization_coNt .admin::before {content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 40px; background: #ccc; transform: translateX(-50%);}
.organization_coNt .managers {display: flex; flex-direction: column; margin-top: 10px; position: relative;}
.organization_coNt .managers::before {content: ''; position: absolute; top: -50px; left: 50%; height: 100%; width: 2px; background: #ccc; transform: translateX(-50%);}
.organization_coNt .manager {margin: 4px 0;}
.organization_coNt .node.ceo {background-color: #d0ebff; border-color: #c9e5fa;}
.organization_coNt .node.sales {background-color: #d3f9d8; border-color: #b7fdbf;}
.organization_coNt .node.production {background-color: #fff3bf; border-color: #fcedae;}
.organization_coNt .node.office {background-color: #e5dbff; border-color: #d8cafc;}

/* 특허 */
.patent_wrap {margin:80px 0;}
.patentList {display:grid; grid-template-columns: repeat(4, 1fr); gap:25px;}
.patentList > li > figure {display:flex; flex-direction: column; border:1px solid #dddddd; padding:20px; gap:15px;}
.patentList > li > figure .img {width:100%; overflow: hidden; display:flex; justify-content: center; padding:10px; position: relative; z-index: 2;}
.patentList > li > figure .img::after {content:""; width:100%; height:100%; display:flex; background:url('../images/arrow_bg.png')repeat; position:absolute; top:0; left:0; z-index: -1;}
.patentList > li > figure .img img {width:100%;}
.patentList > li > figure figcaption {text-align: center; font-weight:500; line-height: 1.4;}
.patentList > li > figure figcaption p {display:flex; align-items: center; justify-content: center;}
.patentList > li > figure figcaption p button {display:flex; align-items: center; justify-content: center; height:32px; border-radius:32px; font-size:14px; padding:0 15px 0 12px; background:#000000; color:#ffffff; margin-top:10px;}
.patentList > li > figure figcaption p button::before {content:"\f2db"; font-family: 'remixicon'; margin-right:5px;}

/* 레이어 슬라이드 */
.patentLayer .flex .layerScroller {max-height:910px; padding:15px 10px;}
.patentSlide {width:100%; position:relative; overflow: hidden; padding:25px 10px 45px;}
.patentSlide .swiper-slide {position:relative;}
.patentSlide .swiper-slide img {width:fit-content; max-width: 100%; border:1px solid #dddddd;}
.patentSlide .swiper-button-prev, .patentSlide .swiper-button-next {width:30px; height:30px; border-radius: 30px; background: rgba(223, 223, 223, 0.7);} 
.patentSlide .swiper-button-prev {left:10px;}
.patentSlide .swiper-button-next {right:10px;}
.patentSlide .swiper-button-prev:after, .patentSlide .swiper-button-next:after {color:#000000; font-size:24px;}
.patentSlide .swiper-button-prev:after {content:"\ea60"; font-family: 'remixicon';}
.patentSlide .swiper-button-next:after {content:"\ea6c"; font-family: 'remixicon';}
.patentSlide .swiper-pagination-bullet {background:#d4d4d4; width:10px; height:10px; border-radius: 10px; transition: all 0.5s ease-out;}
.patentSlide .swiper-pagination-bullet.swiper-pagination-bullet-active {width:25px;}

/* 작업공정도 */
.workProcessChart_wrap {margin:80px 0; background:url('../images/arrow_bg.png')repeat; padding:30px;}
.workflow-container {padding:100px 20px; display:flex; flex-direction:column; gap:40px; position:relative; background: #ffffff;}
.workflow-container h5 {font-size:22px; font-family: 'ONE-Mobile-Title'; display:flex; align-items: center; font-weight:500; gap:5px;}
.workflow-container h5::before {content:"\f468"; font-size:24px; font-family:'remixicon'; color:#777777;}
.workflow-row {display:flex; flex-wrap:wrap; align-items:center; position:relative;}
.workflow-row.reverse {flex-direction: row-reverse;}
.workflow-row .step {background:#dddddd; padding:14px 24px; margin-right:20px; border-radius:8px; box-shadow:2px 2px 6px rgba(0,0,0,0.1); position:relative; font-size:16px; min-width:120px; text-align:center; flex-shrink:0;}
.workflow-row .step.arrow::after {content:"→"; position:absolute; right:-20px; top:50%; transform:translateY(-50%); color:#999999; font-size:20px;}
.workflow-row .step:last-child {margin-right:0;}
.workflow-row.reverse .step.arrow::after {content:"←";}
.workflow-row .step:last-child.arrow::after {content:"↓"; right:auto; left:50%; top:55px; transform:translateX(-50%);}
.workflow-row.reverse .step {margin-right:0; margin-left:20px;}
.workflow-row.reverse .step:first-child.arrow::after {content:"";}
.workflow-row.reverse .step:last-child.arrow::after {content:"←"; right:-20px; left:auto; top:50%; transform:translateY(-50%);}
.workflow-row.flexEnd {align-items: flex-end;}
.workflow-row .two {display:flex; flex-direction: column; gap:20px; justify-content: center; position: relative; width:120px; margin-right:20px;}
.workflow-row .two .step.top {position: relative; margin-right:0;}
.workflow-row .two .step.top::after {content:""; width:0; height:12px; border-right:4px dotted #999999; position:absolute; bottom:-15px; left:50%; transform: translateX(-50%);}
.workflow-row .two .step.bottom {width:120px;}
.workflow-row .two.arrow::after {content:"→"; position:absolute; right:-20px; top:auto; bottom:12px; transform:translateY(0); color:#999999; font-size:20px;}
.workflow-row .green {background:#2ecc71; color:#ffffff; font-weight:500;}
.workflow-row .blue {background:#0a6fb3; color:#ffffff; font-weight:500;}

/* 설계장비 */
.designEquipment_wrap {margin:80px 0;}
.designEquipmentList {display:grid; grid-template-columns: repeat(3, 1fr); gap:25px;}
.designEquipmentList > li > figure {display:flex; flex-direction: column; gap:10px; position: relative; z-index: 2;}
.designEquipmentList > li > figure::after {content:""; width:100%; height:100%; display:flex; background:url('../images/arrow_bg.png')repeat; position:absolute; top:0; left:0; z-index: -1;}
.designEquipmentList > li > figure .img {width:100%; overflow: hidden; display:flex; justify-content: center; padding:10px;}
.designEquipmentList > li > figure .img img {width:100%; border: 1px solid #eeeeee;}
.designEquipmentList > li > figure figcaption {text-align: center; font-weight:500; line-height: 1.4; padding:0 10px 20px;}

/* 설비현황 */
.facilityStatus_wrap {margin:80px 0;}
.facilityStatusList {display:flex; flex-direction: column; gap:55px;}
.facilityStatusList > li {border-bottom:1px solid #dddddd; padding-bottom:55px;}
.facilityStatusList > li:last-child {border-bottom:0;}
.facilityStatusList > li > figure {display:flex; gap:20px;}
.facilityStatusList > li > figure > .img {width:45%; padding:20px; background:url('../images/arrow_bg.png')repeat; overflow: hidden; display:flex; justify-content: center;}
.facilityStatusList > li > figure > .img img {width:fit-content; max-width: 100%;}
.facilityStatusList > li > figure figcaption {width:55%; display:flex; flex-direction: column; justify-content: flex-end; padding-top:45px;}
.facilityStatusList > li > figure figcaption h4 {display:flex; align-items: center; font-size:24px; font-family: 'ONE-Mobile-Title'; gap:5px; font-weight:500;}
.facilityStatusList > li > figure figcaption h4 i {color:#777777;}
.facilityStatusList > li > figure figcaption p {color:#ffa339; font-size:18px; margin-top:10px;}
.facilityStatusList > li > figure figcaption ul {margin-top:30px; border:1px solid #dddddd;}
.facilityStatusList > li > figure figcaption ul > li {display:flex; align-items: center; border-bottom:1px solid #dddddd;}
.facilityStatusList > li > figure figcaption ul > li:last-child {border-bottom:0;}
.facilityStatusList > li > figure figcaption ul > li span {width:35%; display:flex; padding:12px 20px;}
.facilityStatusList > li > figure figcaption ul > li span:first-child {background: #f9f9f9; border-right:1px solid #dddddd;}
.facilityStatusList > li > figure figcaption ul > li span + span {width:65%;}
.facilityStatusList > li > figure figcaption ul.two > li span {width:70%;}
.facilityStatusList > li > figure figcaption ul.two > li span + span {width:30%; justify-content: center;}

/* 납품현황 */
.deliveryStatus_wrap {margin:80px 0;}
.deliveryStatusList {display:flex; flex-wrap: wrap; gap:40px;}
.deliveryStatusList > li {width:calc(50% - 20px); margin-bottom:65px;}
.deliveryStatusList > li .inBox {padding:20px; background:url('../images/arrow_bg.png')repeat;}
.deliveryStatusList > li h4 {display:flex; justify-content: center; align-items: center; height:55px; font-size:20px; margin-top:10px; color:#0a6fb3; background: #e0f2ff;}
.deliverySlide_wrap {width:100%; position:relative; overflow: hidden;}
.deliverySlide_wrap .swiper-slide {position:relative;}
.deliverySlide_wrap .swiper-slide img {width:fit-content; max-width: 100%;}
.deliverySlide_wrap .swiper-slide strong {width:100%; display:flex; align-items: center; height:45px; font-size:14px; position:absolute; top:35px; left:0; padding:0 15px; color:#000000; background:linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 85%);}
.deliverySlide_wrap .swiper-button-prev, .deliverySlide_wrap .swiper-button-next {width:30px; height:30px; border-radius: 30px; background: rgba(223, 223, 223, 0.7);} 
.deliverySlide_wrap .swiper-button-prev {left:10px;}
.deliverySlide_wrap .swiper-button-next {right:10px;}
.deliverySlide_wrap .swiper-button-prev:after, .deliverySlide_wrap .swiper-button-next:after {color:#000000; font-size:24px;}
.deliverySlide_wrap .swiper-button-prev:after {content:"\ea60"; font-family: 'remixicon';}
.deliverySlide_wrap .swiper-button-next:after {content:"\ea6c"; font-family: 'remixicon';}
.deliverySlide_wrap .swiper-pagination-bullet {background:#d4d4d4; width:10px; height:10px; border-radius: 10px; transition: all 0.5s ease-out;}
.deliverySlide_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active {width:25px;}

/* 매출현황 */
.salesStatus_wrap {margin:80px 0;}
.salesStatus_wrap .salesTableBox {position: relative;}
.salesStatus_wrap .salesTableBox .unit {position:absolute; top:-20px; right:0; color:#777777; font-size:14px;}
.salesStatus_wrap .salesTableBox table {margin:25px 0 10px;}
.salesStatus_wrap p {font-size:14px; color:#777777; line-height: 1.4;}
.chart_wrap {width:100%; height:500px; padding:45px 0; position: relative;}
#salesChart { width: 100% !important; height: 100% !important;}

/*공지사항*/
.notice_wrap {margin:80px 0;}
.notice_wrap h2 {border-top:1px solid #000000; font-size:20px; font-weight:500; padding:15px; line-height: 1.6; display:flex; align-items: center; gap:10px;}
.notice_wrap h2 .new {display:flex; font-size:14px; height:20px; align-items: center; justify-content: center; padding:1px 8px 0 8px;}
.searchResult_wrap {margin-top:15px;}
.searchResult_wrap table thead th {background:#f9f9f9; border:0; border-top:1px solid #000000; border-bottom:1px solid #dddddd;}
.searchResult_wrap table tbody td {border:0; border-bottom:1px solid #dddddd; text-align: center;}
.searchResult_wrap table tbody td:nth-child(2) {text-align: left;}
.searchResult_wrap table tbody td .noticeTitle {display:flex; align-items: center; gap:5px; line-height: 1.4;}
.searchResult_wrap table tbody td .noticeTitle .new {display:flex; font-size:10px; padding:4px 8px;}
.searchResult_wrap table tbody td .btn_wrap {display:flex; align-items: center; justify-content: center;}
.searchResult_wrap table tbody td .btn_wrap .btn {width:50%; height:28px; padding:0; font-size:12px;}
.notice_wrap .authorDate {padding:10px; background:url('../images/arrow_bg.png')repeat; font-size:14px; text-align: right; border-top:1px solid #dddddd; border-bottom:1px solid #dddddd;}
.notice_wrap .noticeInfo {padding:20px 15px; font-size:14px; line-height: 1.4; min-height: 250px;}
.notice_wrap .prevNext_wrap {border-bottom:1px solid #000000; border-top:1px solid #dddddd; display:flex; flex-direction: column;}
.notice_wrap .prevNext_wrap div {height:45px; display:flex; align-items: center; gap:15px;}
.notice_wrap .prevNext_wrap div .lb {width:20%; height:100%; display:flex; align-items: center; justify-content: space-between; background: #f9f9f9; padding:0 15px; font-size:14px; border-right:1px solid #dddddd;}
.notice_wrap .prevNext_wrap div .lb::after {font-family: 'remixicon'; font-size:20px;}
.notice_wrap .prevNext_wrap .prev {border-bottom:1px solid #dddddd;}
.notice_wrap .prevNext_wrap .prev .lb::after {content:"\ea76";}
.notice_wrap .prevNext_wrap .next .lb::after {content:"\ea4c";}
.notice_wrap .prevNext_wrap div a {width:80%; height:100%; display:flex; align-items: center; padding:5px 15px; font-size:14px; text-decoration: underline; line-height: 1.4;}
.notice_wrap .button_wrap {margin-top:45px;}

/* 문의하기 */
.contactUs_wrap {margin:80px 0;}
.contactUs_wrap p {font-size:14px; color:#777777;}
.contactUs_wrap p i {color:#ff0000;}
.contactUs_wrap form {margin:10px 0; padding:20px; background:url('../images/arrow_bg.png')repeat;}
.contactUs_wrap .formField {margin-bottom:5px;}
.contactUs_wrap .formField:last-child {margin-bottom:0;}
.contactUs_wrap .formField .inpField label, .contactUs_wrap .formField .inpField .lb {background:#ffffff; border:1px solid #dddddd;}
.contactUs_wrap .formField .inpField input {background:#ffffff;}
.contactUs_wrap .button_wrap {margin-top:45px;}
.contactUs_wrap .button_wrap .btn {height:55px; font-size:16px;}

/* 찾아오시는길 */
.map_wrap {margin:80px 0;}
.map {margin: 40px 0; padding:20px; background:url('../images/arrow_bg.png')repeat;}
.mapInfomation {margin:5px 0 80px 0; padding: 0 30px;}
.mapInfomation h4 {font-size:20px; font-family: 'ONE-Mobile-Title'; display:flex; align-items: center; font-weight: 500; margin-bottom:15px;}
.mapInfomation h4 i {color:#2ecc71;}
.addressField {display:grid; grid-template-columns: repeat(2, 1fr);  border-top:1px solid #000000;}
.addressField .inbox {display:flex; height:45px; align-items: center; gap:10px;}
.addressField .inbox span {font-size:18px; display:flex; align-items: center; width:50px;}
.addressField .inbox span + span {width:calc(100% - 50px);}
.addressField .inbox span + span::after {display:none;}

/*index*/
.idx_wrap h1 {display:flex; position:fixed; top:10px; left:15px; z-index: 50;}
.idx_wrap h1 > a {display:flex; width:35px;}
.idx_wrap h1 > a > img {width:100%;}
.idx_gnb_bar {position:fixed; top:15px; right:15px; width:24px; height:24px; align-items: center; z-index: 200;}
.idx_gnb_bar span {font-size:0; display:flex; background:#ffffff; width:100%; height:2px; position:relative; transition:all 0.3s ease-out;}
.idx_gnb_bar span::before {content:""; width:100%; height:2px; background:#ffffff; position:absolute; top:-7px; left:0; transition:all 0.3s ease-out;}
.idx_gnb_bar span::after {content:""; width:100%; height:2px; background:#ffffff; position:absolute; top:7px; left:0; transition:all 0.3s ease-out;}
.idx_mask {position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); z-index:100;}
.idxNavigation {display:flex; width:100%; height:100%; position:fixed; top:0; left:0; justify-content: center; align-items: center; z-index: 350; display:none;}
.idxNavigation .gnb_scroll {padding:20px; background:#ffffff url('../images/arrow_bg.png')repeat; position: relative; transform: translateY(100px); opacity: 0; transition: all 0.5s ease-out;}
.idxNavigation.active .gnb_scroll {transform: translateY(0); opacity: 1;}
.idxNavigation .gnb {display:flex; gap:15px; width: 1000px; padding:50px; background:#ffffff; border:1px solid #dddddd;}
.idxNavigation .gnb > li {width:calc(100% / 4);}
.idxNavigation .gnb > li > button {font-size:20px; margin-bottom:15px; font-weight:500; font-family: 'ONE-Mobile-Title';}
.idxNavigation .gnb > li > .gnbPanel > ul > li > a {display:flex; align-items: center; height:45px; font-size:16px; color:#777777;}
.idxNavigation .gnb > li > .gnbPanel > ul > li > a::before {content:"-"; margin-right:10px;}
.idxMenuClose {position:absolute; top:-50px; right:0}
.idxMenuClose button {display:block; position:relative; width:35px; height:35px; text-indent:-9999px;}
.idxMenuClose button::before {content:""; width:100%; height:1px; background:#fff; position:absolute; top:5px; left:50%; margin-left:-5px; transform:rotate(-45deg) translateX(-50%); -webkit-transform:rotate(-45deg) translateX(-50%); -moz-transform:rotate(-45deg) translateX(-50%);}
.idxMenuClose button::after {content:""; width:100%; height:1px; background:#fff; position:absolute; bottom:5px; left:50%; margin-left:-5px; transform:rotate(45deg) translateX(-50%); -webkit-transform:rotate(45deg) translateX(-50%); -moz-transform:rotate(45deg) translateX(-50%);}
.idxNav {display:flex; width:100%; height:100%; position:absolute; top:0; left:0; align-items: end; justify-content:center; z-index: 100;}
.idxNav ul {display:flex; padding-bottom:125px;}
.idxNav ul li {margin:0 25px;}
.idxNav ul li > a {display:flex; flex-direction: column; align-items: center; justify-content: center; color:#ffffff; gap:25px; font-size:14px;}
.idxNav ul li > a:before {content:""; width:45px; height:45px; background-size: contain; background-repeat: no-repeat;}
.idxNav ul li:nth-child(1) > a:before {background-image:url('../images/idx_icon00.png');}
.idxNav ul li:nth-child(2) > a:before {background-image:url('../images/idx_icon01.png');}
.idxNav ul li:nth-child(3) > a:before {background-image:url('../images/idx_icon02.png');}
.idxNav ul li:nth-child(4) > a:before {background-image:url('../images/idx_icon03.png');}
.idx_animate:hover:before {
    -webkit-animation: toBottomFromTop 0.3s forwards;
    -moz-animation: toBottomFromTop 0.3s forwards;
    animation: toBottomFromTop 0.3s forwards;
}
/* 슬라이드 추가 */
.idx_slide {width:100%; height:100%; overflow:hidden; position:relative;}
.idx_slide .swiper-wrapper .swiper-slide {height:100vh; background-size:cover; width:100%; background-repeat: no-repeat; position:relative; overflow: hidden;}
.idx_slide .swiper-wrapper .swiper-slide .cover {display:flex; align-items: center; justify-content: center; width:100%; height:100%; position: relative;}
.idx_slide .swiper-wrapper .swiper-slide .cover::after {content:""; width:100%; height:100%; position:absolute; top:0; left:0; background-image:url('../images/visual_cover_dot.png'); background-repeat: repeat; opacity: 0.25; background-size: 3px; background-position: 0 0; z-index: -1;}
.idx_slide .swiper-wrapper .swiper-slide .cover .circle { position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius:50%; transform: translate(-50%, -50%) scale(0.5); background-color: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 230vw rgba(0,0,0,0.25); transition: all 0.5s ease-out;}
.idx_slide .swiper-wrapper .swiper-slide .cover .circle::before, .idx_slide .swiper-wrapper .swiper-slide .cover .circle::after {content:""; position:absolute; top:50%; left:50%; border-radius:50%; border:1px solid rgba(255, 255, 255, 0.2);}
.idx_slide .swiper-wrapper .swiper-slide .cover .circle::before {width:1800px; height:1800px;}
.idx_slide .swiper-wrapper .swiper-slide .cover .circle::after {width:2500px; height:2500px;}
@keyframes lineAnimate { 
    0% {
        transform: translate(-50%, -50%) scale(1); 
        opacity:1;
    }
    15% {
        transform: translate(-50%, -50%) scale(1.2); 
        opacity:1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5); 
        opacity:0;
    } 
}
.idx_slide .swiper-wrapper .swiper-slide.swiper-slide-active .circle {width: 1600px; height: 1600px;}
.idx_slide .swiper-wrapper .swiper-slide.swiper-slide-active .cover .circle::before, .idx_slide .swiper-wrapper .swiper-slide.swiper-slide-active .cover .circle::after {animation: lineAnimate 11s ease-in-out infinite;}
.idx_slide .swiper-wrapper .swiper-slide .swiper-wrapper .swiper-slide .cover .txt {text-align: center; position:relative; z-index: 10;}
.idx_slide .swiper-wrapper .swiper-slide .cover .txt {text-align: center; line-height: 1.2;}
.idx_slide .swiper-wrapper .swiper-slide .cover .txt h3 {font-size:80px; color:#ffffff; font-family: 'ONE-Mobile-Title'; font-weight:500; transform: scale(0); opacity: 0; transition: all .6s ease-in-out .4s;}
.idx_slide .swiper-wrapper .swiper-slide .cover .txt p {font-size:32px; color:#ffffff; margin-top:20px; transition: all .6s ease-in-out .4s; transform:translateY(100px); opacity: 0;}
.idx_slide .swiper-wrapper .swiper-slide.swiper-slide-active .cover .txt h3 {transform: scale(1); opacity: 1;}
.idx_slide .swiper-wrapper .swiper-slide.swiper-slide-active .cover .txt p {transform:translateY(0); opacity: 1;}
@keyframes toBottomFromTop {
    49% {
        transform: translateY(100%);
    }
    50% {
        opacity: 0;
        transform: translateY(-100%);
    }
    51% {
        opacity: 1;
    }
}
.idx_footer {color:#ffffff; font-size:14px; text-align: center; position: absolute; bottom:20px; left:0; width:100%; opacity: 0.7; z-index: 50;}

@media (min-width:1025px) and (max-width:1200px) {
    html, body {font-size:15px;}
    /* gnb */
    .navigation {padding:0 100px;}
    .navigation .gnb > li > button {font-size:18px;}
    .navigation .gnb > li > .gnbPanel {top:60px;}
    .navigation .gnb > li > .gnbPanel > ul > li > a {font-size:14px;}
    .header.scrollOn .navigation .gnb > li > .gnbPanel {top:42px;}
    /* 작업공정도 */
    .workProcessChart_wrap {padding:15px;}
    .workflow-container {padding:60px 10px;}
    .workflow-row .step {min-width:80px;}
    .workflow-row.flexEnd {justify-content: center;}
    .workflow-row.reverse {padding-right:7.2%;}
    .workflow-container .workflow-row:last-child {padding-left: 7.2%;}
}

@media (max-width:1024px) {
    html, body {font-size:14px;}
    /* header */
    .header {height:55px; border-bottom:1px solid #dddddd;}
    .header h1 {padding:10px 15px;}
    .header.scrollOn {height:55px;}
    .header.scrollOn h1 {padding:10px 15px;}
    /* container */
    .container {padding-top:55px;}
    .container.scrollOn {padding-top:55px;}
    /* gnb */
    .mgnb_bar {display:flex;}
    .navigation {padding:0; position:fixed; top:0; right:0; width:320px; height:100%; transform: translateX(100%); padding:55px 0 0 0; z-index: 150; background:#ffffff url('../images/arrow_bg.png')repeat;}
    .navigation .gnb {display:flex; flex-direction: column; align-items: flex-start;}
    .navigation .gnb > li {width:100%; overflow: hidden;}
    .navigation .gnb > li > button {text-align:left; padding:15px 10px; font-size:16px; border-bottom:1px solid #dddddd; background: #ffffff;}
    .navigation .gnb > li:first-child button {border-top:1px solid #dddddd;}
    .navigation .gnb > li > .gnbPanel {position:relative; top:auto; left:auto; max-height: 0; transition: all 0.3s ease-out; border-top:0; background:transparent;}
    .navigation .gnb > li > .gnbPanel > ul > li > a:hover {background:none; font-weight:400; color:#ffa800;}
    .navigation .gnb > li.on .gnbPanel {border-bottom:1px solid #dddddd;}
    /*sub common*/
    .subcoNt_wrap {padding:0 20px;}
    .subcoNt_wrap h2 {font-size:24px;}
    .subcoNt_wrap h2 i {font-size:28px;}
    .comTopdBg {height:250px;}
    .comTopinTx {padding-top:65px; gap:20px;}
    .comTopinTx h2 {font-size:36px;}
    .comTopinTx p {font-size:16px;}
    /*footer*/
	.rolling-container {padding:15px 0;}
    .rolling-content img {width: 125px;}
    .footerLayerNav .content_wrap {height:45px;}
    .footerLayerNav .content_wrap .link {padding:0 20px;}
    .footerLayerNav .content_wrap .link button {font-size:13px; font-weight:400;}
    .footerLayerNav .content_wrap .download_wrap button {font-size:13px; height:45px;}
    .footer address .addressInfo strong {font-size:16px;}
    .footer address .addressInfo .addr {font-size:13px; flex-wrap: wrap; gap:5px;}
    /* 회사소개서 다운로드 */
    .downloadButton {bottom:315px; right:15px; width:70px; height:60px; font-size:10px; line-height: 1.4;}
    .downloadButton::before {font-size:16px;}
	.downloadButton2 {bottom:235px; right:15px; width:70px; height:60px; font-size:10px; line-height: 1.4;}
    .downloadButton2::before {font-size:16px;}
    /* about */
    .about_wrap .leftBox {width:55%;}
    .about_wrap .rightBox {width:45%;}
    /* 특허 */
    .patentList {display:grid; grid-template-columns: repeat(3, 1fr); gap:25px;}
    /* 작업공정도 */
    .workflow-container {padding:30px 10px; gap:20px;}
    .workflow-container h5 {margin-top:60px; font-size:18px;}
    .workflow-container h5::before {font-size:20px;}
    .workflow-container h5:nth-child(1) {margin-top:0;}
    .workflow-row {flex-direction:column; align-items:flex-start; gap:20px;}
    .workflow-row.reverse {flex-direction:column; align-items:flex-end;}
    .workflow-row .step {width:100%; margin-right:0; margin-left:0;}
    .workflow-row .step.arrow::after {content:"↓"; right:auto; left:50%; top:auto; bottom:-20px; transform:translateX(-50%);}
    .workflow-row .step:last-child.arrow::after {left:50%; right:auto; bottom:-20px; top:auto; transform:translateX(-50%);}
    .workflow-row.reverse .step {margin-left:0;}
    .workflow-row.reverse .step.arrow::after {content:"↓"; left:50%; right:auto; bottom:-20px; top:auto; transform:translateX(-50%);}
    .workflow-row.reverse .step:first-child::after {content:"↓" !important; left:50%; right:auto; bottom:-20px; top:auto; transform:translateX(-50%);}
    .workflow-row.reverse .step:last-child.arrow::after {content:"";}
    .workflow-row .two {flex-direction:row-reverse; align-items:center; width:100%; margin-right:0; gap:0;}
    .workflow-row .two .step.top {width:calc(50% - 10px); margin-left:10px;}
    .workflow-row .two .step.bottom {width:calc(50% - 10px); margin-right:10px;}
    .workflow-row .two.arrow::after {content:"↓"; right:auto; left:50%; top:auto; bottom:-20px; transform:translateX(-50%);}
    .workflow-row .two .step.top::after {border-right:none; border-bottom:4px dotted #999999; height:0; width:10px; bottom:auto; top:50%; left:-15px; right:auto; transform: translateX(0);}
    /* 설비현황 */
    .facilityStatusList > li > figure > .img {width:55%;}
    .facilityStatusList > li > figure figcaption {width:45%;}
    /* 납품현황 */
    .deliveryStatusList > li h4 {height:50px; font-size:18px;}
    /* 문의하기 */
    .contactUs_wrap .formField {flex-direction: column;}
    .contactUs_wrap .formField .inpField.textArea label, .contactUs_wrap .formField .inpField.textArea .lb {height:250px;}
    /* 메인페이지 */
    .idx_gnb_bar {z-index: 250;}
    .idx_gnb_bar.active span {background:transparent;}
    .idx_gnb_bar.active span::before {transform:rotate(45deg); top:0; background:#000000;}
    .idx_gnb_bar.active span::after {transform:rotate(-225deg); top:0; background:#000000;}
    .idxNavigation {display:none; padding:0; position:fixed; top:0; right:0; left:auto; width:320px; height:100%; justify-content: initial; align-items: initial; transform: translateX(100%); padding:55px 0 0 0; z-index: 150; background:#ffffff url('../images/arrow_bg.png')repeat; transition: all 0.5s ease-out;}
    .idxNavigation.active {transform: translateX(0);}
    .idxNavigation .gnb_scroll {padding:0; transition: none; transform: none; opacity: 1; width:100%; overflow-y:auto;}
    .idxNavigation.active .gnb_scroll {transform: none; opacity: 1;}
    .idxNavigation .gnb {display:flex; flex-direction: column; gap:0; width:100%; padding:0; border:0; background: none;}
    .idxNavigation .gnb > li {width:100%; overflow: hidden;}
    .idxNavigation .gnb > li > button {text-align:left; padding:15px 10px; font-size:16px; border-bottom:1px solid #dddddd; background: #ffffff; margin-bottom:0; width:100%;}
    .idxNavigation .gnb > li:first-child button {border-top:1px solid #dddddd;}
    .idxNavigation .gnb > li > .gnbPanel {position:relative; top:auto; left:auto; max-height: 0; transition: all 0.3s ease-out; border-top:0; background:transparent;}
    .idxNavigation .gnb > li > .gnbPanel > ul > li > a {display:block; padding:15px; font-size:15px; color:#222222; border-bottom:1px solid #dddddd;}
    .idxNavigation .gnb > li > .gnbPanel > ul > li > a::before {display:none;}
    .idxNavigation .gnb > li > .gnbPanel > ul > li > a:hover {background:none; font-weight:400; color:#ffa800;}
    .idxNavigation .gnb > li.on .gnbPanel {border-bottom:1px solid #dddddd;}
    .idxMenuClose {display:none;}
    /*index*/
    .idx_slide .swiper-wrapper .swiper-slide .cover .circle::before {width:1400px; height:1400px;}
    .idx_slide .swiper-wrapper .swiper-slide .cover .circle::after {width:1800px; height:1800px;}
    .idx_slide .swiper-wrapper .swiper-slide.swiper-slide-active .circle {width: 1000px; height: 1000px;}
    .idx_slide .swiper-wrapper .swiper-slide .cover .txt {line-height: 1.4;}
    .idx_slide .swiper-wrapper .swiper-slide .cover .txt h3 {font-size:45px;}
    .idx_slide .swiper-wrapper .swiper-slide .cover .txt p {font-size:28px;}
    .idxNav {display:none;}
    .idx_footer {font-size:12px;}
}

@media (max-width: 768px) {
    html, body {font-size:12px;}
    .pc {display:none;}
    /* select */
    .selectBox {height:38px;}
    .selectBox select {font-size:12px;}

    /* input(text,password,number,tel,search,email) */
    input[type="text"],input[type="password"],input[type="number"],input[type="tel"],input[type="search"],input[type="email"],input[type="file"] {height:38px; font-size:12px; padding:5px 10px;}

    /*sub common headline*/
    .comTopdBg {height:180px;}
    .comTopinTx {padding-top:45px;}
    .pageLocation {padding-top:10px;}
    .pageLocation span {font-size:12px;}
    .comTopinTx h2 {font-size:28px; font-weight:500;}
    .comTopinTx p {font-size:14px; font-family:'Pretendard', sans-serif;}
    /*footer*/
	.rolling-container {padding:10px 0;}
    .rolling-content img {width: 85px;}
    .footerLayerNav .content_wrap {height:auto; flex-direction: column;}
    .footerLayerNav .content_wrap > div {width:100%; height:45px;}
    .footerLayerNav .content_wrap .link {position:relative; padding:0; gap:0;}
    .footerLayerNav .content_wrap .link::after {content:""; width:1px; height:12px; display:flex; background:rgba(255,255,255,0.8); position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
    .footerLayerNav .content_wrap .link button {width:50%; display:flex; justify-content: center; height:45px;}
    .footerLayerNav .content_wrap .link button::after {display:none;}
    .footerLayerNav .content_wrap .download_wrap {justify-content: center;}
    .footerLayerNav .content_wrap .download_wrap button {width:50%; justify-content: center;}
    .footer address {flex-direction: column; align-items: center; padding:25px 0;}
    .footer address .img {display:none;}
    .footer address .addressInfo {width:100%;}
    .footer address .addressInfo strong {text-align: center;}
    .footer address .addressInfo .addr {font-size:12px; flex-direction: column;}
    .footer address .addressInfo .copy {text-align: center; font-size:10px; font-weight:300; opacity: 0.8; margin-top:10px;}
    /* common */
    .subcoNt_wrap {padding:0 15px;}
    .subcoNt_wrap h2 {font-size:20px;}
    .subcoNt_wrap h2 i {font-size:24px;}
    .visually-hidden {position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);}
	.btn {height:40px; padding:5px 10px; font-size:14px;}
	.button_wrap .btn:only-child {width:50%;}
    .mask {position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); z-index: 100;}
    .layer {display:none; position:fixed; top:0; left:0; width:calc(100% - 30px); height:calc(100% - 60px); margin:30px 15px; justify-content: center; align-items: center; z-index: 200; transform: translateY(-100px); opacity: 0; transition: all 0.3s ease-out;}
    .layer .flex {border-radius:10px;}
    .layer .flex h3 {padding:0 45px 0 15px; font-size:15px; line-height: 1.4;}
    .layer .flex > ul {padding:15px 45px 15px 15px;}
    .layer .flex > ul > li > button {font-size:16px;}
    .layer .flex .layerScroller {max-height:550px; padding:15px 10px;}
    .layer .flex .layerScroller .layercontent {font-size:12px; line-height: 1.2;}
    .layer .flex .closeButton {position:absolute; right:15px;}
    /* table */
    table {width:100%; table-layout: fixed;}
    table colgroup {display: none;}
    table thead {display:none;}
    table tbody {display:flex; flex-direction: column; gap:10px;}
    table tr {display:flex; width:100%; flex-direction: column; border-radius:6px; border:1px solid #dddddd; overflow: hidden;}
    table td::before {content: attr(data-label); width:36%; height:100%; display:flex; align-items: center; background:#f9f9f9; padding:0 10px;}
    table td:last-child {border-bottom: 0;}
    table tbody th {border:0; border-bottom:1px solid #dddddd; display:flex; align-items: center; justify-content: center; font-size:13px;}
    table tbody td {border:0; border-bottom:1px solid #dddddd; display:flex; align-items: center; justify-content:space-between; padding:0 10px 0 0; font-size:13px;}
    table tfoot {background: none;}
    table tfoot tr {margin-top: 10px;}
    table tfoot th {border:0; border-bottom:1px solid #dddddd; display:flex; align-items: center; justify-content: center; background: #d1ebfd; font-size:13px;}
    table tfoot td {border:0; border-bottom:1px solid #dddddd; display:flex; align-items: center; justify-content:space-between; background: #d1ebfd; font-size:13px;}
    table tfoot td::before {background:none;}
    /* 검색필드 */
    .search_wrap {justify-content:inherit;}
    .searchField {width:100%; flex-direction: column;}
    .searchField .selectBox {width:100%;}
    .searchField input {width:100%;}
    .searchField .btn {width:100%; font-size:12px; height:38px;}
    /*데이타가 없을 때*/
    .noData {padding:15px;}
    .noData strong {font-size:16px;}
    /* about */
    .about_wrap {padding:10px; margin:60px 0;}
    .about_wrap .leftBox {width:100%; padding:10px; gap:15px;}
    .about_wrap .leftBox h3 {line-height: 1.4; margin-bottom:15px;}
    .about_wrap .leftBox p {font-size:13px;}
    .about_wrap .rightBox {display:none;}
	/* 회사전경 */
	.aboutCompanyImg {margin:20px 0 60px; padding:10px;}
    /* history */
    .history_wrap {margin:20px 0 60px; padding:10px;}
    .history_list > li {flex-direction: column; min-height:auto;}
    .history_list > li h3 {width:100%; justify-content: flex-start; padding:20px 10px 10px; font-size:18px;}
    .history_list > li h3::before {display:none;}
    .history_list > li h3::after {display:none;}
    .history_list > li ul {width:100%; padding:5px 10px 20px;}
    .history_list > li ul::after {display:none;}
    .history_list > li ul > li {gap:10px;}
    .history_list > li ul > li time {width:62px; justify-content: flex-end; font-size:13px;}
    .history_list > li ul > li span {width:calc(100% - 62px); font-size:13px; line-height: 1.3; word-break:keep-all;}
    /* 조직도 */
    .organization_coNt {position: relative; z-index: 2;}
    .organization_coNt::after {content:''; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:2px; height:calc(100% - 108px); background:#ccc; z-index: -1;}
    .organization_coNt .line-down {background:none; height:20px;}
    .organization_coNt .admin {flex: 1 1 100%;}
    .organization_coNt .node {font-size: 14px; padding: 8px 12px; margin:20px auto;}
    .organization_coNt .manager {font-size: 14px; margin:4px 0;}
    .organization_coNt .level::before,
    .organization_coNt .level .admin:nth-child(1)::after,
    .organization_coNt .level .admin:nth-child(2)::after,
    .organization_coNt.admin::before,
    .organization_coNt .managers::before {display: none;}
    /* 특허 */
    .patent_wrap {margin:60px 0;}
    .patentList {grid-template-columns: repeat(2, 1fr); gap:15px;}
    .patentList > li > figure {padding:10px;}
    .patentList > li > figure figcaption {padding:0 20px; word-break: keep-all;}
    .patentList > li > figure figcaption p button {height:28px; border-radius:28px; font-size:12px; padding:0 15px 0 12px;}
    .patentList > li > figure figcaption p button::before {content:"\f2db"; font-family: 'remixicon'; margin-right:5px;}
	.patentLayer .flex .layerScroller {max-height:none;}
    /* 작업공정도 */
    .workProcessChart_wrap {margin:60px 0;  padding:20px;}
    .workflow-row .step {font-size:14px;}
    /* 설계장비 */
    .designEquipment_wrap {margin:60px 0;}
    .designEquipmentList {grid-template-columns: repeat(2, 1fr); gap:15px;}
    /* 설비현황 */
    .facilityStatusList > li > figure {flex-direction: column; gap:0;}
    .facilityStatusList > li > figure .img {width:100%;}
    .facilityStatusList > li > figure figcaption {width:100%; padding-top:25px;}
    .facilityStatusList > li > figure figcaption h4 {font-size:18px;}
    .facilityStatusList > li > figure figcaption p {margin-top:8px; font-size:15px;}
    .facilityStatusList > li > figure figcaption ul {margin-top:20px;}
    /* 납품현황 */
    .deliveryStatus_wrap {margin:60px 0;}
    .deliveryStatusList {flex-direction: column;}
    .deliveryStatusList > li {width:100%; margin-bottom:20px;}
    .deliveryStatusList > li .inBox {padding:10px;}
    .deliveryStatusList > li h4 {height:45px; font-size:16px;}
    .deliverySlide_wrap .swiper-slide strong {height:35px; top:15px;}
    .deliverySlide_wrap .swiper-button-prev, .deliverySlide_wrap .swiper-button-next {width:24px; height:24px; border-radius: 24px;}
    .deliverySlide_wrap .swiper-button-prev {left:2px;}
    .deliverySlide_wrap .swiper-button-next {right:2px;}
    .deliverySlide_wrap .swiper-button-prev:after, .deliverySlide_wrap .swiper-button-next:after {font-size:20px;}
    /* 매출현황 */
    .salesStatus_wrap {margin:60px 0;}
    .salesStatus_wrap .salesTableBox .unit {font-size:12px;}
    .salesStatus_wrap p {font-size:12px;}
    .chart_wrap {height:600px; padding:25px 0;}
    /* 공지사항 */
    .notice_wrap {margin:60px 0;}
    .notice_wrap h2 {font-size:16px; flex-direction: column; align-items: flex-start; gap:5px;}
    .notice_wrap h2 .new {font-size:10px; height:20px; padding:0 8px 0 8px;}
    .searchResult_wrap table tbody td:nth-child(1) {display:none;}
    .searchResult_wrap table tbody td:last-child {border-bottom:0;}
    .searchResult_wrap table tbody td::before {width:20%;}
    .searchResult_wrap table tbody td .btn_wrap {width:80%; justify-content: flex-end;}
    .notice_wrap .authorDate {font-size:12px;}
    .notice_wrap .noticeInfo {padding:20px 10px; font-size:13px;}
    .notice_wrap .prevNext_wrap div .lb {padding:0 10px; font-size:13px; width:28%;}
    .notice_wrap .prevNext_wrap div .lb::after {font-size:18px;}
    .notice_wrap .prevNext_wrap div a {padding:5px 10px; font-size:13px; width:72%;}
    /* 문의하기 */
    .contactUs_wrap {margin:60px 0;}
    .contactUs_wrap p {font-size:12px; line-height:1.4;}
	.contactUs_wrap form {padding:15px 10px;}
    .contactUs_wrap .formField .inpField label, .contactUs_wrap .formField .inpField .lb {font-size:13px; height:38px; width:110px;}
    .contactUs_wrap .formField .inpField input {font-size:13px; width:calc(100% - 110px);}
    .contactUs_wrap .formField .inpField textarea {padding:10px; font-size:13px; width:calc(100% - 110px);}
    .contactUs_wrap .button_wrap {margin-top:45px;}
    .contactUs_wrap .button_wrap .btn {height:45px; font-size:14px;}
    /* 찾아오시는길 */
    .map_wrap {margin:60px 0;}
    .map {padding:10px;}
    .map iframe {height:300px;}
    .mapInfomation h4 {font-size:18px;}
    .mapInfomation h4 i {color:#2ecc71;}
    .addressField {display:flex; flex-direction: column;}
    .addressField .inbox {height:35px;}
    .addressField .inbox span {font-size:14px;}
    /* 메인페이지 */
    .idx_slide .swiper-wrapper .swiper-slide .cover .circle::before {width:800px; height:800px;}
    .idx_slide .swiper-wrapper .swiper-slide .cover .circle::after {width:1200px; height:1200px;}
    .idx_slide .swiper-wrapper .swiper-slide.swiper-slide-active .circle {width:580px; height: 580px;}
    .idx_slide .swiper-wrapper .swiper-slide .cover .txt h3 {font-size:24px;}
    .idx_slide .swiper-wrapper .swiper-slide .cover .txt p {font-size:18px;}
    .idx_footer {font-size:10px;}
}

@media (max-height:500px) {
    .idxNav li {width:25%; margin-bottom:0;}
    .layer {overflow-y: auto; padding-bottom:65px; height:100%; align-items: flex-start;}
    .downloadButton {bottom:85px;}
	.downloadButton2 {bottom:15px;}
}