@charset "utf-8";

html {overflow-y:scroll; font-size:10px; scroll-behavior: smooth;}
@media screen and (max-width:1024px) {
  html{font-size:9.5px;}
}
.tbsec{ width:100%; position:relative; overflow: hidden;}
body {font-size:1.6rem; font-family:'Poppins', /*'NanumSquare', */'Pretendard','Noto Sans KR',dotum, sans-serif; color:#222; font-weight:400; line-height:1.5em; }

.coverDim{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.3); }

input, button,textarea, select {font-family:'Noto Sans KR', dotum, sans-serif; }
label, input, button, select, img {font-size:1.5rem}
input[type=text]:focus,input[type=password]:focus, textarea:focus, select:focus { -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; border:1px solid #c6c6c6 !important; }
button {border-radius: 0; -moz-appearance:none;-webkit-appearance:none;appearance:none;}
input{ appearance: none; -webkit-appearance: none; -webkit-border-radius: 0;}
select{ -webkit-appearance: none; -moz-appearance: none; appearance: none;  background: url('../../img/slt_arrow.svg') no-repeat 98% 50% #f6f6f6; /*화살표 select박스 오른쪽 중앙 배치,배경 흰색*/  }
select::-ms-expand{  display:none; /* 화살표 없애기 for IE10, 11*/ }
a{outline: none;}
.placeholdersjs {color:#e1e1e1 !important}


/* 트랜지션 */
.trstn3s{ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s; } /* transition:.3s; */
.trstn5s{ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.3s;  transition: all 0.5s; } /* transition:.5s; */

/* br, display 반응형에 따른 */
@media screen and (max-width:768px){
  .br768::after {content:"\A"; white-space: pre;}
}
@media screen and (max-width:560px){
  .br560::after {content:"\A"; white-space: pre;}
}
.dsp_none1200,
.dsp_none768,
.dsp_none560,
.dsp_none420 {}
.dsp_block768,
.dsp_block560 {display:none;}
@media screen and (max-width:1200px){
  .dsp_none1200{display:none;}
}
@media screen and (max-width:768px){
  .dsp_none768 {display:none;}
  .dsp_block768 {display:block;}
}
@media screen and (max-width:560px){
  .dsp_none560{display:none;}
  .dsp_block560 {display:block;}
}
@media screen and (max-width:420px){
  .dsp_none420{display:none;}
}

/* inner */
.tbinner,
.tbinner_wide,
.tbinner_narrow,
.tbinner_thin { margin:0 auto; width:100%; }

@media screen and (max-width: 1790px){
  .tbinner_wide {padding:0 35px;}
}
@media screen and (max-width: 1630px){ /* 1630px : max-width + 35px + 35px  */
  .tbinner {padding:0 35px;}
}
@media screen and (max-width: 1500px){
  .tbinner_narrow { padding:0 50px; }
}
@media screen and (max-width: 1360px){
  .tbinner_thin { padding:0 50px; }
}
@media screen and (max-width: 1024px){
  .tbinner,
  .tbinner_wide{ padding:0 25px; }
}
@media screen and (max-width: 768px){
  .tbinner,
  .tbinner_wide{ padding:0 20px; }
  .tbinner_narrow,
  .tbinner_thin{ padding:0 35px; }
}
@media screen and (max-width: 560px){
  .tbinner_narrow,
  .tbinner_thin{ padding:0 20px; }
}

.absolute_inner{max-width:calc(50% + 880px);}



/* 패딩 */
.pddgLR{padding:0 70px;}

.pddgtop_200{ padding-top:200px; }
.pddgbttm_200{ padding-bottom:200px; }
.pddgtop_180{ padding-top:180px; }
.pddgbttm_180{ padding-bottom:180px; }
.pddgtop_150{ padding-top:150px; }
.pddgbttm_150{ padding-bottom:150px; }
.pddgtop_130{ padding-top:130px; }
.pddgbttm_130{ padding-bottom:130px; }
.pddgtop_100{ padding-top:100px; }
.pddgbttm_100{ padding-bottom:100px; }
.pddgtop_70{ padding-top:70px; }
.pddgbttm_70{ padding-bottom:70px; }
.pddgtop_50{ padding-top:50px; }
.pddgbttm_50{ padding-bottom:50px; }
@media screen and (max-width:1470px) {
  .pddgLR{padding:0 50px;}

  .pddgtop_200{padding-top:150px;}
  .pddgbttm_200{padding-bottom:150px;}
  .pddgtop_180, 
  .pddgtop_150{ padding-top:120px; }
  .pddgbttm_180, 
  .pddgbttm_150{ padding-bottom:120px; }
}
@media screen and (max-width:1024px) {
  .pddgtop_200,
  .pddgtop_180, 
  .pddgtop_150{ padding-top:100px; }
  .pddgbttm_200,
  .pddgbttm_180, 
  .pddgbttm_150{ padding-bottom:100px; }
  .pddgtop_130, 
  .pddgtop_100 { padding-top:70px; }
  .pddgbttm_130,
  .pddgbttm_100 { padding-bottom:70px; }

  .pddgLR { padding:0 20px; }
}
@media screen and (max-width:768px){
  .pddgtop_70{ padding-top:40px; }
  .pddgbttm_70{ padding-bottom:40px; }
  .pddgtop_50{ padding-top:30px; }
  .pddgbttm_50{ padding-bottom:30px; }
}
@media screen and (max-width:560px) {
  .pddgtop_200,
  .pddgtop_180, 
  .pddgtop_150{ padding-top:70px; }
  .pddgbttm_200,
  .pddgbttm_180, 
  .pddgbttm_150{ padding-bottom:70px; }
}

/* 마진 패딩 */
.mgbttm5{margin-bottom:5px;}
.mgbttm10{margin-bottom:10px;}
.mgbttm15{margin-bottom:15px;}
.mgbttm20{margin-bottom:20px;}
.mgbttm25{margin-bottom:25px;}
.mgbttm30{margin-bottom:30px;}
.mgbttm40{margin-bottom:40px;}
.mgbttm50{margin-bottom:50px;}
.pdbttm20{padding-bottom:20px;}
.pdbttm30{padding-bottom:30px;}
.pdbttm40{padding-bottom:40px;}
.pdbttm50{padding-bottom:50px;}
.pdbttm60{padding-bottom:60px;}

.mgtop20{margin-top:20px;}
.mgtop25{margin-top:25px;}
.mgtop30{margin-top:30px;}
.mgtop40{margin-top:40px;}
.pdtop10{padding-top:10px;}
.pdtop20{padding-top:20px;}
.pdtop40{padding-top:40px;}
.pdtop30{padding-top:30px;}


@media screen and (max-width:768px){
  .mgbttm5{margin-bottom:3px;}
  .mgbttm10{margin-bottom:7px;}
  .mgbttm15{margin-bottom:8px;}
  .mgbttm20{margin-bottom:15px;}
  .mgbttm25{margin-bottom:18px;}
  .mgbttm30{margin-bottom:22px;}
  .mgbttm40{margin-bottom:25px;}

  .pdbttm60{padding-bottom:40px;}
  .pdbttm50{padding-bottom:35px;}
  .pdbttm40{padding-bottom:30px;}
  .pdbttm30{padding-bottom:22px;}
  .pdbttm20{padding-bottom:15px;}

  .mgtop20{margin-top:15px;}
  .mgtop25{margin-top:18px;}
  .mgtop30{margin-top:22px;}
  .mgtop40{margin-top:30px;}
  .pdtop10{padding-top:7px;}
  .pdtop20{padding-top:15px;}
  .pdtop40{padding-top:30px;}
  .pdtop30{padding-top:22px;}
}

/* 캡챠 */
#captcha #captcha_mp3 { margin:0 0 0 3px; }
#captcha #captcha_reload {margin:0 0 0 3px; }
#captcha #captcha_key {margin:0 0 0 3px; font-size:1.5rem;}

/* 새창 기본 스타일 */
.new_win .btn_close, .new_win .btn_submit {
  overflow:hidden;cursor:pointer; font-size:1.5rem; line-height:1em; padding:1em 2.3em; font-weight: 400; cursor:pointer; height:auto; border:1px solid #d0d4df;background:#fff;color:#989898;
  -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out;
}
.new_win .btn_submit { border:1px solid #222;background:#222;color:#fff; }

/* 기본테이블 */
.tbl_head01 tfoot th, .tbl_head01 tfoot td {border-top:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;background:#f6f6f6;}
.tbl_head01 tbody th {padding:1em 0;border-bottom:1px solid #e8e8e8}
.tbl_head01 td {color:#222; padding:1em 10px; border-top:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;}
.tbl_wrap table tr,.tbl_wrap table td{position: relative;}
.tbl_wrap table tr.trCont:hover{background:#f6f6f6;}

/* 폼 테이블 */
.wr_content textarea,.tbl_frm01 textarea,.form_01 textarea, .frm_input {border:1px solid #e1e1e1;color:#222; padding:0.8em 10px;-webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; }
.wr_content textarea.bgwhite,.tbl_frm01 textarea.bgwhite,.form_01 textarea.bgwhite, .frm_input.bgwhite{background:#fff;}
.frm_input {height:auto; font-size:1.5rem; line-height:1.7em; padding:0.8em 10px; font-weight: 400;}
.frm_input::placeholder{color:#b5b5b5;}
.full_input {width:100%}
.half_input {width:calc(50% - 5px);}
#bo_w .write_div.captchabox{margin-top:1em;}
@media(max-width:768px){
  #bo_w .write_div.captchabox{margin-top:1em;}
  .half_input {width:100%;}
  #bo_w #wr_password, #bo_w #wr_homepage {margin-left:0}
}

/* 게시물 이동 등 move.php 체크박스*/
.new_win .tbl_head01 td {color:#222; padding: 10px 5px;   border-top:1px solid #e1e1e1;border-bottom:1px solid  #e1e1e1;}
.new_win .tbl_head01 table tr th input[type="checkbox"].move_allcheck + label { color:#bebebe; }
.new_win .tbl_head01 table tr th input[type="checkbox"].move_allcheck + label:hover { color:#3a8afd; }
.new_win .tbl_head01 table tr th input[type="checkbox"].move_allcheck:checked + label { color:#222; }

.new_win .tbl_head01 table tr td input[type="checkbox"].move_check + label { color:#bebebe; } 
.new_win .tbl_head01 table tr td input[type="checkbox"].move_check + label:hover { color:#717070; }
.new_win .tbl_head01 table tr td input[type="checkbox"].move_check:checked + label { color:#3a8afd; }

/* 게시판 페이지번호 */
.pg_wrap {margin-top:40px; float:none; display:block; width:100%; text-align: center;}
.pg_page, .pg_current {display:inline-block; min-width:auto; width:35px; height:35px;line-height:35px; font-size:1.5rem; font-weight: 400; border-radius: 0; padding:0;}
.pg_page {color:#222;}
.pg_page:hover {background-color:#f6f6f6}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#f6f6f6}
.pg_current {background:#3a8afd;border:1px solid #3a8afd;color:#fff;}
@media screen and (max-width:768px){
  .pg_wrap{margin-top:30px;}
}

/* 검색결과 색상 */
.sch_word {background:transparent; color:#3a8afd;font-weight:600; padding:2px; margin:0; }

/* 버튼 */
a.tbbtn{text-decoration: none;}
.tbbtn{ font-size:1.7rem; font-weight: 400; border:0; display: inline-block; cursor: pointer; -moz-appearance:none; -webkit-appearance:none; appearance:none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s;  }
.tbbtn.small{ font-size:1.5rem; }
.tbbtn.big{ padding:0 2.2em; min-width:90px; height:60px; line-height:58px; }
.tbbtn.line000{border:1px solid #222; color:#222;  }
.tbbtn.line000:hover{ background-color:#222; color:#fff;}
.tbbtn.linefff{border:1px solid #fff; color:#fff; background:transparent;}
.tbbtn.linefff:hover{ background-color:#fff; color:#222;}
.tbbtn.bgfull{ border:1px solid #3a8afd; background:#3a8afd; color:#fff;}
.tbbtn.bgfull:hover{ border-color:#003e94; background:#003e94;}

.tbbtn.bgfull000{ border:1px solid #000; background:#000; color:#fff;}
.tbbtn.bgfull000:hover{ border-color:#003e94; background:#003e94;}

.tbbtn.radius{padding:0 2.5em; border-radius: 50px;}
.tbbtn.big.radius{border-radius: 60px;}
.tbbtn.small.radius{padding:0 2em;}

.tbbtn.lineBold{border-width:2px;}

/* 스르륵 progressBtn */
.tbbtn.progressBtn { position:relative; border:1px solid #222; color:#222;}
.tbbtn.progressBtn span{ position:relative; }
.tbbtn.progressBtn::before { content:""; position:absolute; top:0; bottom:0; left:0; height:100%; width:0%; background-color:#3a8afd; transition: all 0.3s ease-out;} 
.tbbtn.progressBtn:hover::before { width:100%; }
.tbbtn.progressBtn:hover {border:1px solid #F57D3D; color:#fff; }
@media screen and (max-width:768px){
  .tbbtn {font-size:1.5rem;}
  .tbbtn.small{ }
  .tbbtn.big{ }
}

.tinybtn{ display:inline-block !important; position:relative; padding:3px 20px; border-radius:20px; background-color:#3a8afd; color:#fff;}

a.btn,.btn {line-height:normal; height:auto; font-weight:normal; vertical-align: middle; font-size:1.5rem;}
.btn_confirm {text-align:center} /* 서식단계 진행 */
.btn_submit,.btn_close, a.btn_cancel, button.btn_cancel{ 
  background:#fff; color:#000; font-size:1.5rem; line-height:1em; padding:1em 2.3em; font-weight: 400; cursor:pointer; border-radius: 0;
  -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out
}
.btn_close {border:1px solid #a5a5a5; color:#989898; background:#fff}
.btn_close:hover{border:1px solid #333; color:#333;}
a.btn_close {}
a.btn_cancel {display:inline-block;border:1px solid #a5a5a5; color:#a5a5a5; background:#fff}
button.btn_cancel {display:inline-block;border:1px solid #a5a5a5; color:#a5a5a5; background:#fff}
.btn_cancel:hover {border:1px solid #333; color:#333; background:#fff; }
a.btn_frmline, button.btn_frmline {width:128px;font-size:1.4rem; padding:0 2px; } /* 우편번호검색버튼 등 */


/* 팝업레이어 */
.popupBg{display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;} 
.popupBg .dimBackground {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity: .5; filter:alpha(opacity=70);} 
.popupBg .popuplayer{display:block;} 
.popuplayer {
  background-color:#f1f1f1;
  width:100%; max-width:800px; height:100%; max-height:500px;
  display:none;
  position:absolute;
  top:50%;left:50%; transform: translate(-50%, -50%);
  z-index:100000; 
}
@media screen and (max-height:700px),
      screen and (max-width:560px){
  .popuplayer{max-height:100%;}
}
.popupPage{height:100%;}


/* 타이틀 */




/*
.titleArea.paddingbttm { padding-bottom:40px; }
.titleArea .left{text-align:left;} .titleArea .center{text-align:center;} .titleArea .right{text-align:right;}
.titleArea .colorfff, .titleArea p.colorfff{color:#fff;}

.titleArea h1{ font-size:6rem; line-height:1.4em; font-weight:600; position:relative; display:block; }
.titleArea h2{ font-size:4.8rem; font-weight:600; line-height:1.4em; position:relative; display:block; }
.titleArea h3{ font-size:3.2rem; line-height:1.4em; position:relative; display:block; word-break:keep-all}
.titleArea h4{ font-size:2.6rem; font-weight:400; line-height:1.4em; position:relative; display:block; word-break:keep-all}
.titleArea h5{ font-size:1.8rem; font-weight:300; line-height:1.6em; position:relative; display:block; }
.titleArea p{font-size:1.8rem; color:#989898; line-height:1.8em; word-break: keep-all;}
.titleArea p.pBig{ font-size:2.2rem; }

  @media screen and (max-width:1024px){
    .titleArea h1 {font-size:4.5rem;}
    .titleArea h2 {font-size:3.8rem;}
    .titleArea h3{ font-size:2.8rem;}
    .titleArea h4{ font-size:2.2rem;}
    .titleArea h5{ font-size:1.6rem; line-height:1.6em; }
    .titleArea p{font-size:1.6rem; line-height:1.6em;}
    .titleArea p.pBig{ font-size:1.9rem; }
  }
  @media screen and (max-width:768px){
    .titleArea h1 {font-size:3.4rem;}
    .titleArea h2 {font-size:3rem;}
    .titleArea h3{ font-size:2.2rem;}
    .titleArea h4{ font-size:1.8rem;}
    .titleArea p.pBig{ font-size:1.6rem; }
  }
*/
/* 서브타이틀 */
/*.titleArea.subbnnTit h1{ font-size:7rem; line-height:1.4em; font-weight:600; position:relative; display:block; }
@media screen and (max-width:1024px){
  .titleArea.subbnnTit h1 {font-size:5rem;}
}
@media screen and (max-width:768px){
  .titleArea.subbnnTit h1 {font-size:3.8rem;}
}*/

/* 텍스트 정렬 .align */
.alignCenter{text-align: center;}
.alignLeft{text-align: left;}
.alignRight{text-align: right;}

/* 텍스트 text */
.font70{font-size:7rem;line-height:1.3em;display:block; }
.font60{font-size:6rem;line-height:1.3em;display:block; }
.font54{font-size:5.4rem;line-height:1.3em;display:block; }
.font48{font-size:4.8rem;line-height:1.4em;display:block; }
.font40{font-size:4rem;line-height:1.4em;display:block; }
.font32{font-size:3.2rem;line-height:1.4em;display:block; }
.font26{font-size:2.6rem;line-height:1.4em;display:block; }
.font22{font-size:2.2rem;line-height:1.5em;display:block; }
.font20{font-size:2.0rem;line-height:1.5em;display:block; }
.font18{font-size: 1.8rem;line-height:1.6em;display:block; }
.font16{font-size: 1.6rem;line-height:1.4em;display:block; }

@media screen and (max-width:1024px){
  .font70 {font-size:5.2rem;}
  .font60 {font-size:4.5rem;}
  .font54 {font-size:4rem;}
  .font48 {font-size:3.8rem;}
  .font40 {font-size:3.4rem;}
  .font32{font-size:2.6rem;}
  .font26{font-size:2.2rem;}
  .font22{font-size:2rem;}
  .font20{font-size:1.8rem;}
  .font18{font-size:1.6rem;}
  .font16{font-size: 1.5rem;line-height:1.4em;display:block; }
}
@media screen and (max-width:768px){
  .font70 {font-size:4rem;}
  .font60 {font-size:3.4rem;}
  .font54 {font-size:3.2rem;}
  .font48{font-size:3rem;}
  .font40 {font-size:2.5rem;}
  .font32{ font-size:2.2rem;}
  .font26{font-size:2rem;}
  .font22{font-size:1.7rem;}
}

/* font-weight */
.fontWeight100{font-weight:100;}
.fontWeight200{font-weight:200;}
.fontWeight300{font-weight:300;}
.fontWeight400{font-weight:400;}
.fontWeight500{font-weight:500;}
.fontWeight600{font-weight:600;}
.fontWeight700{font-weight:700;}
.fontWeight800{font-weight:800;}
.fontWeight900{font-weight:900;}





/* hover 포인트 ************************/

/* hover Highlighter 하이라이트 어떻게 쓰나요?
  <div class="font26 hoverHighlighter">
    <div class="highlighter"></div>
    <span>솔루션 제공</span>
  </div>
  이렇게 넣고 따로 css로 hover 시에
  .parent:hover .hoverHighlighter .highlighter{width:100%}
  하시면 hover시에 <span>솔루션 제공</span> 밑에 하이라이터가 생깁니다.
*/
.hoverHighlighter{display:inline-block; position:relative;}
.hoverHighlighter span{z-index:1; position:relative}
.hoverHighlighter .highlighter{  width:0; position:absolute; bottom:0; left:0; height:16px; background-color:#e1e1e1; transition:width .3s; content:""; }

/* .line-clamp ************************/
.line-clamp{text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; word-wrap:break-word; }
.lineClamp1{  -webkit-line-clamp:1; }
.lineClamp2{  -webkit-line-clamp:2; }
.lineClamp3{  -webkit-line-clamp:3; }
.lineClamp4{  -webkit-line-clamp:4; }


/* 포인트 텍스트 */
.colorfff{color:#fff;}
.colorGray{color:#989898;}
.colorLightGray{color:#b7b6b6;}
.pointColor{color:#00498f;}
.pointColor2{color:#002947;}
.pointColor3{color:#159bed;}

/* 포인트 백그라운드 (대체로 버튼에 쓰입니다.) */
.pointBgColor{border:1px solid #03549e; background-color:#03549e; color:#fff;}
.pointBgColor2{background-color:#002947; border:1px solid #002947;}



/* 스크롤시에 하이라이터 */
.pointTxt {position:relative;}
.pointTxt.highlighter:before{ position:absolute; bottom:5px; left:0; width:100%; height:20px; content:"";}
.pointTxt.highlighter.scroll:before{ position:absolute; bottom:0; left:0; width:100%; height:20px; background-color:#62c0fa; opacity:.6; z-index:-1; content:"";}

.pointTxt.highlighter.scroll:before{ width:0%; transition:.3s .8s;}
.aos-animate .pointTxt.highlighter.scroll:before{ width:100%; }

/* 기본 하이라이터 */
span.highlighter{position:relative; display:inline-block; padding:0 3px; z-index: 1;}
span.highlighter:before {content:""; position:absolute; bottom:3px; left:0; width:100%; height:18px; background-color:#c9c9c9; opacity:.9; z-index:-1; }
@media screen and (max-width:768px){
  span.highlighter:before {height:14px; }
}

/* 형광펜으로 꽉 채운듯한 하이라이터 ex)newgn0101 견적문의에 ADDRESS, E-mail 등등 */
span.highlighter.full{position:relative; display:inline-block; padding:0 3px; z-index: 1;}
span.highlighter.full:before {content:""; position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:1em; background-color:#c9c9c9; opacity:.9; z-index:-1; }
@media screen and (max-width:768px){
  span.highlighter.full:before {height:14px; }
}


/* 기본 두꺼운 하이라이터 */
  span.highlighter.thick:before {height:24px;}
  @media screen and (max-width:768px){
    span.highlighter.thick:before {height:18px; }
  }



/* //-> 뉴비 커스텀 팝업레이어 */
#hd_pop {position:static;}
.hd_pops iframe{max-width:100% !important;}
#hd_pop.resizeCss, .hd_pops.resizeCss{width:100% !important;}
.hd_pops.resizeCss{z-index:101 !important;}
.hd_pops.resizeCss {top:0 !important; left:0 !important; transform: none !important;}
.hd_pops.resizeCss .hd_pops_con,
.hd_pops.resizeCss img,
.hd_pops.resizeCss iframe{width:100% !important;}
.hd_pops.resizeCss .hd_pops_con{height:auto !important;min-height:400px;}
/* //<- 뉴비 커스텀 팝업레이어 */

/* 뉴비 갤러리 기본 */
.nbgall{display:grid; }
  .nbgall.grid3{grid-template-columns: repeat(3, 1fr); column-gap: 50px; row-gap: 70px;}
  .nbgall.grid4{grid-template-columns: repeat(4, 1fr); column-gap: 30px; row-gap: 50px;}
  .nbgall.grid5{grid-template-columns: repeat(5, 1fr); column-gap: 25px; row-gap: 30px;}
  
.nbgall li{position: relative;}
.nbgall .thumb_rate{ position:relative; width:100%; height:0; padding-bottom:100%; overflow:hidden; }
.nbgall .thumb_rate .thumLink{position:absolute; width:100%; height:100%; top:0; left:0;}
.nbgall .rate50{padding-bottom:50%;}
.nbgall .rate56{padding-bottom:56%;}
.nbgall .rate71{padding-bottom:71%;}
.nbgall .rate80{padding-bottom:80%;}
.nbgall .rate100{padding-bottom:100%;}
.nbgall .rate130{padding-bottom:130%;}
.nbgall .thumb_rate .thumLink .thumbImg{width:100%; height:100%; object-fit: cover;}

.nbgall .description{padding:20px 0}
  .nbgall .description.center{text-align: center;}
.nbgall .description .title{ margin-bottom:10px; font-weight:500; line-height:1.5em; display:-webkit-box;  -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; word-wrap: break-word;}
.nbgall .description .cont{line-height:1.6em; display:-webkit-box;  -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; word-wrap: break-word;}

.nbgall.grid1{grid-template-columns: repeat(1, 1fr);}
.nbgall .empty_list{width:100%; font-size: 1.8rem; padding:50px 0 !important;}

@media(max-width: 1200px){
  .nbgall.grid3{column-gap: 40px; row-gap: 50px;}
  .nbgall.grid5{grid-template-columns: repeat(3, 1fr);}
}
@media(max-width: 1024px){
  .nbgall.grid3{column-gap: 20px; row-gap: 30px;}
  .nbgall.grid5{column-gap: 15px; row-gap: 20px;}
  .nbgall.grid4{grid-template-columns: repeat(3, 1fr);}

}
@media(max-width: 768px){
  .nbgall.grid3{grid-template-columns: repeat(2, 1fr); }
  .nbgall.grid5{grid-template-columns: repeat(2, 1fr);}
  .nbgall.grid4{grid-template-columns: repeat(2, 1fr);}
}
@media(max-width: 560px){
  .nbgall.grid4{column-gap: 15px; row-gap: 30px;}
  .nbgall .description{font-size: 1.5rem;}
  .nbgall .description .title{font-size:1.7rem; margin-bottom:5px;}
}
@media(max-width: 480px){
  .nbgall.grid3{grid-template-columns: repeat(1, 1fr); }
}

/* 노이미지 */
.no_image{position:absolute; width:100%; height:100%; top:0; left:0; background:#f1f1f1; color:#fff; font-size:4.5rem; font-weight:600;text-align: center;}
.no_image span{position:absolute; width:100%; top:50%; left:0; transform: translateY(-50%);}

@media(max-width: 1200px){
  .no_image{font-size:3rem;}
}


/** swiper */
.swiper-container{overflow: hidden;}
.swiper-container .swiper-wrapper{height: auto;}
.swiper-container .swiper-slide{height:auto;}



/* /////////////// 구버전 /////////////////// */

  /* 갤러리 tbGallBasic */
  .tbGallBasic{ font-size:0; margin:0 -10px; }
  .tbGallBasic::after{display:block;visibility:hidden;clear:both;content:"";}
  .tbGallBasic > li {
    position:relative; width:25%; padding-left:10px; padding-right:10px; padding-bottom:25px; vertical-align: top; display:inline-block; transition:.3s;
  }
  .tbGallBasic > li.empty_list{width:100%; font-size: 1.8rem; padding:305px 0;}
  .tbGallBasic .gall-thum{ position:relative; width:100%; height:0; padding-bottom:100%; overflow:hidden; }
  .tbGallBasic .gall-thum a{ width:100%; position:absolute; top:0; left:0; top:50%; left:50%; transform:translate(-50%, -50%);transition: width .3s; }
  .tbGallBasic .gall-thum .tbThumImg{ width:100%; height:100%; object-fit: cover; }
  .tbGallBasic .gall-thum .thumHoverBorder{ position:absolute; background:#44b0f9; 
    -webkit-transition:background-color 0.3s ease-out;
    -moz-transition:background-color 0.3s ease-out;
    -o-transition:background-color 0.3s ease-out;
    transition:background-color 0.3s ease-out  }
  .tbGallBasic .gall-description{ padding:1.2em 0.8em; font-size:1.5rem; font-weight:400; color:#989898;}
  .gall-description .prd-title{  display:block;font-size:1.8rem; line-height:1.5em; font-weight:500; margin-bottom:10px;}
    .gall-description .prd-title.center{text-align: center;}
  .gall-description p {font-size:1.5rem; line-height:1.6em; font-weight:400;}
    .gall-description p.center{text-align: center;}
    .gall-description .prd-title a{
      -webkit-transition:color 0.3s ease-out;
      -moz-transition:color 0.3s ease-out;
      -o-transition:color 0.3s ease-out;
      transition:color 0.3s ease-out
    }
  .gallbasic-dim{
    position:absolute; top:0; left:0; width:100%; height:100%; transition:background .5s; 
  }
  .tbGallBasic > li:hover .gallbasic-dim{ background: rgba(0,0,0,.2); }
  .tbGallBasic > li.li25{width:25%;}
  .tbGallBasic > li.li33{width:33.3333%;}
  .tbGallBasic > li.li50{width:50%;}
  @media(max-width: 1200px){
    .tbGallBasic > li {width:33.33333%;}
    .tbGallBasic > li.li25{width:33.33333%;}
  }
  @media screen and (max-width:1024px){
    .tbGallBasic .gall-description{ padding:0.7em 0.5em; }
    .gall-description .prd-title{ font-size:1.7rem;margin-bottom:0.4em;}
  }
  @media screen and (max-width:768px){
    .tbGallBasic{ margin:0 -5px; }
    .tbGallBasic > li { padding-left:5px; padding-right:5px; }
    .tbGallBasic > li { width:50%; }
    .tbGallBasic > li.li25{width:50%;}
    .tbGallBasic > li.li33{width:50%;}
  }
  @media screen and (max-width:560px){
    .tbGallBasic > li { padding-left:3px; padding-right:3px; }
    .tbGallBasic > li.li33{width:100%;}
  }
  @media screen and (max-width:420px){
    .tbGallBasic > li { width:100%; }
  }



.basic_anime{ opacity: 0; transition: 1s; will-change:transform, opacity;}
  .sensed .basic_anime{ opacity: 1; }
.down_to_up {transform: translateY(80px);}
  .sensed .down_to_up {transform: translateY(0);}
.up_to_down {transform: translateY(-80px);}
  .sensed .up_to_down {transform: translateY(0);}
.left_to_right {transform: translateX(-150px);}
  .sensed .left_to_right {transform: translateX(0);}
.right_to_left {transform: translateX(150px);}
  .sensed .right_to_left {transform: translateX(0);}

.delay01 {  transition-delay: .1s;  }
.delay02 {  transition-delay: .2s;  }
.delay03 {  transition-delay: .3s;  }
.delay04 {  transition-delay: .4s;  }
.delay05 {  transition-delay: .5s;  }
.delay06 {  transition-delay: .6s;  }
@media screen and (max-width:768px){
  .up_to_down {transform: translateY(70px);}
}
@media screen and (max-width:560px){
  .basic_anime{ transition: .7s; }
  .down_to_up,
  .left_to_right,
  .right_to_left{transform: translateY(70px);}
    .sensed .down_to_up,
    .sensed .left_to_right,
    .sensed .right_to_left {transform: translateY(0);}

  .delay01
  .delay02,
  .delay03,
  .delay04,
  .delay05,
  .delay06 {  transition-delay: 0;  }
}