/* 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    { }
section.area  { margin:50px 3%;}
.mt50         { margin-top:50px; }
.mb50         { margin-bottom:50px; }
.mlr3         { margin-left:3%; margin-right:3%}
img.img       { width:100%;}
h3.title      { margin-top:50px; text-align:center; }
h3.title span { position:relative; display:inline-block; margin:0 auto 10px; font-size: clamp(21px, 8vw, 40px); font-family: 'GMarketSans'; font-weight:500; letter-spacing:-0.2rem;}
h3.title span:after{ content:""; clear:both; position:absolute; bottom:3px; display:block; width:100%; border-bottom:1px solid #333; }

.mall_history { display:flex; flex-wrap:wrap; gap:6px; width:100%; padding:3%; box-sizing:border-box; }
.mall_history li { flex:1 1 30%; text-align:center;}
.mall_history img{ width:100%; }


.design_history ul { background:#c9cccf}
.design_history img{ width:100%; border:1px solid #ccc; box-sizing:border-box; }
.design_history div{ padding:2px; color:#fff; background:#777;}


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


/*product*/
.products        { padding:30px 0 80px; text-align:center; }
.products ul     { display:flex; flex-wrap: wrap; justify-content:center; gap:3px; width:100%; }
.products li     { display:flex; flex-direction:column; justify-content:center; width:140px; margin:0 0 4px; padding:5px 0; font-size:16px; font-weight:500; line-height:18px; border:1px solid #e3e3e3; }
.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;}

.gallerycontainer{ width:100%; margin:0 auto 50px }
.gallerycontainer > div         { position:relative; height:360px; margin-top:20px; padding-left:515px;}
.gallerycontainer > div > a > img { width:90px; margin:0 0 6px; border:1px solid #ddd;}
.gallerycontainer a:hover       { background-color:transparent;}
.gallerycontainer > div > a:hover > img   { border:1px solid blue;}
.gallerycontainer a span        { position:absolute; padding:0; top:0; left:0; color:black; text-align:center; border:1px dashed gray; background-color:white; visibility:visible; }
.gallerycontainer a:hover span  { visibility:visible; z-index:50;}
.gallerycontainer a span img    { padding:2px; border:1px solid white;}

.gallerycontainer01   { display:flex; flex-wrap:wrap; gap:4px; position:relative; width:861px; margin:0 auto; padding-top:532px; }
.gallerycontainer01 >li:first-child a span { z-index:1}
.gallerycontainer01 a { display:inline-block;}
.gallerycontainer01 a > img { width:169px !important; height:104px;}
.gallerycontainer01 a:hover > img { box-sizing:border-box; border:solid 2px #DD2D2D; }
.gallerycontainer01 a span  { box-sizing:border-box; position:absolute; top:0; left:0; height:527px; border:2px solid #000; visibility:visible; }
.gallerycontainer01 a:hover span  { visibility:visible; z-index:50; }
.gallerycontainer01 a span > img { width:859px; height:524px; }

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



@media screen and (min-width: 1200px) {
    .photoslider ul li {width: 280px !important;}
}
@media screen and (min-width: 640px) and (max-width:1200px) {
    .photoslider ul li {max-width: 300px !important;margin-right: 20px;}
    .photoslider ul li:last-child {margin-right: 0;}
}
/* BASIC css end */