/* BASIC css start */
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}



#container    { }
img           { max-width:100%; }
section.area  { margin:80px 3%;}
.mt80         { margin-top:80px; }
.mb80         { margin-bottom:80px; }
.mlr3         { margin-left:3%; margin-right:3%}
img.img       { width:100%;}
h3.title      { margin-top:80px; text-align:center; }
h3.title span { position:relative; display:inline-block; margin:0 auto 2vh; font-size: clamp(21px, 8vw, 30px); font-family: 'GMarketSans'; font-weight:500; letter-spacing:-0.1rem;}
h3.title span:after{ content:""; clear:both; position:absolute; bottom:3px; display:block; width:100%; border-bottom:1px solid #333; }
p.text        { margin-bottom:20px; font-size:16px; }
p.sub-text    { text-align:right; font-size:14px; color:crimson; }

    @media screen and (max-width:640px) {
        p.text  { font-size:15px; }
        p.text strong  { display:block; }
        p.sub-text     { font-size:14px; }
    }



/* TAB MENU */
.board_bl .cmenu01 a{background:var(--main-color); color:white;}


/* ¼îÇθô È÷½ºÅ丮 */
.design_history ul { display:flex; flex-wrap:wrap; gap:6px; width:100%; padding:3%; box-sizing:border-box; background:#c9cccf}
.design_history li { flex:1 1 30%; text-align:center;}
.design_history img{ width:100%; border:1px solid #ccc; box-sizing:border-box; }
.design_history div{ padding:2px; color:#fff; background:#777;}


/*  */
.Major_business li { position:relative; padding-left:20px; font-size:16px; }
.Major_business li:before { content:"¡ß"; position:absolute; left:0; }

    @media screen and (max-width:640px) {
        .Major_business li  { margin:10px 0; font-size:15px; line-height:1.5;}
    }


/* Ãë±ÞÁ¦Ç° */
.products ul     { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1%; width:100%; margin-top:20px;  }
.products li     { display:flex; flex-direction:column; justify-content:center; align-items:center; width:24%; margin:0 0 4px; padding:10px 0; font-size: clamp(14px, 8vw, 16px); font-weight:500; line-height:18px; border:1px solid #e3e3e3; box-sizing:border-box; }
.products li img { width:100%;}
.products li .ct, 
.products li .mf, 
.products li .ip { margin:0 2px; padding:0 3px; font-size:11px; font-weight:500; border-radius:4px; }
.products li .ct { color:#ffa647; border:1px solid  #ffa647;}
.products li .mf { color:#6dc9cc; border:1px solid  #6dc9cc;}
.products li .ip { color:#5c9dfb; border:1px solid  #5c9dfb;}

    @media screen and (max-width:640px) {
        .products li { width:49%; }
    }


/* slider */
.photoslider     { margin-top:30px}
.photoslider ul span 	     { display:block; padding:3px 2px; color:#fff; text-align:center; background:#333;}
.photoslider .bx-wrapper     { margin-bottom:80px;}
.photoslider .bx-wrapper .bx-next { background: url('http://L2294.img2.kr/nw/DHSub/company/img/controls.png') -43px -32px no-repeat;}
.photoslider .bx-wrapper .bx-prev { background: url('http://L2294.img2.kr/nw/DHSub/company/img/controls.png') 0 -32px no-repeat;}
.photoslider .bx-wrapper .bx-controls-direction a { z-index: 1;}

/* Å«À̹ÌÁö 1°³À϶§ */
.photoslider.big .bx-wrapper { margin-top:30px; margin-bottom:0; border:0; box-shadow:none;}
.photoslider.big .bx-viewport{ border:2px solid #000; box-sizing:border-box; }


/* ½æ³×ÀÏ */
.photoslider #bx-pager       { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5%; bottom:auto; margin-top:10px; text-align:center; }
.photoslider #bx-pager a     { width:19.5%; margin-bottom:1%;}
.photoslider #bx-pager a img { width:100%; padding:1px; border:2px solid #ddd; box-sizing:border-box; }
.photoslider #bx-pager a.active img{ border:2px solid #2f6bdc;}
  
  
    @media screen and (min-width: 1200px) {
        .photoslider ul li { width:280px !important;}
        .photoslider.big ul li { width:100% !important;}
    }
    @media screen and (min-width: 640px) and (max-width:1200px) {
        .photoslider ul li { max-width:300px !important;margin-right:20px;}
        .photoslider.big ul li { max-width:100% !important;margin-right:0;}
        .photoslider ul li:last-child {margin-right: 0;}
    }
/* BASIC css end */