@charset "UTF-8";

/**템플릿 보기**/

/***** Thumnail-list *****/
.albumWrap{margin-bottom: 80px;}
.albumWrap > ul{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap: 50px;font-size:0;align-items: center;}
.albumWrap > ul > li > a{border:1px solid #e2e2e2;display: block;}
.albumWrap > ul > li.trashLi {display: none;}
.albumWrap ul li .thum{overflow:hidden;height: 380px;}
.albumWrap ul li .thum img{width:100%;font-size:17px;}
.albumWrap ul li .conts{padding: 35px;box-sizing: border-box;font-size:17px;}
.albumWrap ul li .conts strong{font-size: 20px; color: #333;}
.albumWrap ul li .conts > ul{font-size:0;}
.albumWrap ul li .conts > ul > li{display: inline-block;vertical-align: top;font-family: 'Noto Light';font-size:16px;color:#666;padding: 0 5px;position: relative;border: 0;background: none;}
.albumWrap ul li .conts > ul > li > a{display: block;width: 40px;height: 50px;text-indent: -9999px;background-size: contain !important;}
.albumWrap ul li .conts > ul > li.pc > a{background: url(./../../images/icon/pc-btn.png) no-repeat;}
.albumWrap ul li .conts > ul > li.ta > a{background: url(./../../images/icon/tab-btn.png) no-repeat;}
.albumWrap ul li .conts > ul > li.mo > a{background: url(./../../images/icon/mo-btn.png) no-repeat;}

@media screen and (max-width: 1300px){
  .albumWrap > ul{grid-template-columns: 1fr 1fr 1fr;}
}

@media screen and (max-width: 1000px){
  .albumWrap > ul{grid-template-columns: 1fr 1fr;}
}
@media screen and (max-width: 600px){
  .albumWrap > ul{grid-template-columns: 1fr;}
}

/***** 4칸씩 *****/
.boxtype4 > li{width: calc(100% / 4 - 26.25px);}
.boxtype4 > li:nth-child(4n-1){margin:0 35px 35px 0;}
.boxtype4 > li:nth-child(4n-2){margin:0 35px 35px 35px;}
.albumWrap .boxtype4 > li .inner strong{font-size:22px;height: 58px;margin-bottom:20px;}
.boxtype4 li .thum{height:240px;}
.boxtype4 li .thum img{min-height:240px;}

/***** 3칸씩 *****/
.boxtype3 > li{width:calc(100% / 3 - 23.5px);}
.boxtype3 > li:nth-child(3n-1){margin:0 35px 35px;}
.boxtype3 li .thum{height:300px;}
.boxtype3 li .thum img{min-height:300px;}

/***** 2칸씩 *****/
.albumWrap .boxtype2{justify-content: space-between;}
.boxtype2 li .thum{height:340px;}
.boxtype2 > li{width:calc(100% / 2 - 15px);margin-bottom:30px;}
.boxtype2 > li:nth-child(3n-1){margin:0 0 30px;}

.boxtype1 li{width:100%;}

@media screen and (max-width: 1500px){
  .albumWrap > ul > li .inner{padding:7.5%;}
  .albumWrap > ul > li .inner ul li{font-size:14px;}
  .albumWrap .boxtype4 > li .inner strong{font-size:26px;height: 65px;margin-bottom:25px;}
}

@media screen and (max-width: 1300px){
  .albumWrap > ul > li .inner ul li{font-size:13px;}
}

@media screen and (max-width: 1200px){
  .albumWrap > .boxtype4,
  .albumWrap > .boxtype3{justify-content: space-between;}
  .boxtype4 > li{width:calc(100% / 2 - 15px);margin-bottom:30px;}
  .boxtype4 > li:nth-child(3n-1),
  .boxtype4 > li:nth-child(4n-1),
  .boxtype4 > li:nth-child(4n-2){margin:0 0 30px;}
  .boxtype3 > li{width:calc(100% / 2 - 15px);margin-bottom:30px;}
  .boxtype3 > li:nth-child(3n-1){margin:0 0 30px;}
  .albumWrap > ul > li .inner ul li{font-size:16px;}
}

@media screen and (max-width: 767px){
  .albumWrap > ul > li > a + a{border:0;}
  .albumWrap > ul > li .thum{border: 1px solid #e2e2e2;}
  .albumWrap > ul > li{width:100%;}
  .albumWrap ul li .conts{padding: 0 25px 35px;border:0;}
  .albumWrap ul li .conts > ul{margin-top: 5px;}
  .albumWrap ul li .conts strong{font-size:22px;}
  .albumWrap ul li .conts > ul > li{font-size:13px;padding: 0 10px;}
  .albumWrap ul li .conts .numb{display:block;font-size:13px;colro:#555;}
  .boxtype3 li .thum,
  .boxtype4 li .thum{height:240px;}
  .boxtype3 li .thum img,
  .boxtype4 li .thum img{min-height:240px;}
  .albumWrap ul li .conts > ul > li + li:before{top:8px;}
  .albumWrap ul li .conts > ul > li img{top:-1px;}
}



.wrap-con {padding: 0 0 40px 0;}
.wrap-con .grid-item img {width:100%; transition: all 0.3s ease; box-shadow: 0px 0px 0 0px rgba(0,0,0,0); border-radius: 9px; overflow: hidden;}
.wrap-con .grid-item img:hover {box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);}
.wrap-con .grid-item {opacity: 0;transform: translate(0,50%);border: 1px solid #ccc;border-radius: 10px 10px 0 0;}
.wrap-con .grid-item.is-visible{opacity: 1; transform: translate(0,0); transition: all 0.45s ease;}
.wrap-con .grid-item.is-visible.fast {transition: all 0s ease;}
.wrap-con .grid-item.fixed {opacity: 1; transform: translate(0,0);}
.wrap-con .grid-item .item {position: relative;}
.wrap-con .grid-item .item .detail {position: relative;display: block;overflow: hidden;font-size: 0;overflow: hidden;/* border: 1px solid #ffffff; *//* box-shadow: 0 2px 2px rgba(0,0,0,0.3); */}
.wrap-con .grid-item .item .detail > a {display: block; position: relative;}
.wrap-con .grid-item .item .detail > a:after {content: '';opacity: 0;position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 4px solid #2060c4;transition:all 0.5s ease;}
.wrap-con .grid-item .item .detail > a:hover:after {opacity: 1;}
.wrap-con .grid-item .item .detail .deleteArtclSeqs {position: absolute; left: 10px; top: 10px; z-index: 100;}
.wrap-con .grid-item .control {position: absolute;left: 0;bottom: 0;z-index: 100;width: 100%;background: #f4f4f4;color: #fff;padding: 15px 20px;display: flex;align-items: center;justify-content: space-between;}
.wrap-con .grid-item .control.hover {opacity: 1; bottom: 0;}
.wrap-con .grid-item .control > div {display: table-cell; vertical-align: middle;}
.wrap-con .grid-item .subject {font-size: 16px; font-family: 'Noto Regular'; text-align: left;}
.wrap-con .grid-item .newArtcl {display: none;}
.wrap-con .grid-item .download, .wrap-con .grid-item .view {width: 32px;}
.wrap-con .grid-item .view {padding-left: 10px;}
.wrap-con .grid-item .download a, .wrap-con .grid-item .view a {display: block; text-indent: -9999px; width: 32px; height: 32px; border-radius: 100%; transition: all 0.4s ease;}
.wrap-con .grid-item .download a {background: #fff url('../images/icon-download.png') no-repeat center bottom;}
.wrap-con .grid-item .view a {background: #fff  url('../images/icon-view.png') no-repeat center bottom;}
.wrap-con .grid-item .download a:hover, .wrap-con .grid-item .view a:hover {background-position: center top;}
.wrap-con .no-data {text-align: center;}

@media all and (max-width:1300px) {
  .wrap-con .grid-item {    grid-template-columns: 1fr 1fr 1fr;}
}

@media all and (max-width:1000px) {
  .wrap-con .grid-item {    grid-template-columns: 1fr 1fr;}
}

@media all and (max-width:550px) {
  .wrap-con .grid-item {    grid-template-columns: 1fr;}
}

.wrap-con  {display: table; width: 100%; table-layout: fixed;}
.wrap-con .text {margin-top: 20px; display:none;}
.wrap-con .img {float: left; width: 75%; vertical-align: top; padding-bottom: 40px;}
.wrap-con .img img {border: 1px solid #d1d1d1;}
.wrap-con .func {float: right; width: 25%; padding-left: 40px;}
.wrap-con .func .subject {position: relative; padding: 0 0 16px 0; border-bottom: 1px solid #e4e4e4; margin-bottom: 20px;}
.wrap-con .func .subject h2 {line-height: 1.5; font-family: 'Noto Medium'; font-size: 24px;}
.wrap-con .func .subject a {position: absolute; right: 0; top: 0; width: 19px; height: 69px; background: url('../images/btn-list.png') no-repeat center center; text-indent: -99999px;}
.wrap-con .func .download a {text-align: left; display: block; width: 100%; padding: 16px 0 16px 30px; border: 0; font-family: 'Noto Light'; color: #fff; font-size: 18px;}
.wrap-con .func .download li {margin-bottom: 15px;}
.wrap-con .func .download .color1 a {background: #2060c4 url('../images/ico-func1.png') no-repeat right center;}
.wrap-con .func .download .color2 a {background: #29bd65 url('../images/ico-func2.png') no-repeat right center;}
.wrap-con .func .download .color3 a {background: #aeaeae url('../images/ico-func3.png') no-repeat right center;}
.wrap-con .func .tag ul {display: inline-block; width: 100%; padding-left: 30px; margin-top: 10px; background: url('../images/ico-tag.png') no-repeat left 3px;}
.wrap-con .func .tag li {float: left; margin-right: 10px; margin-bottom: 5px;}
.wrap-con .func .tag {font-family: 'Noto Regular'; color: #8b8b8b;}

@media all and (max-width:1205px) {
  .wrap-con .func {width: 35%;}
  .wrap-con .img {width: 65%;}
}

@media all and (max-width:860px) {
  .wrap-con .func {width: 100%; padding-left: 0; padding-bottom: 40px;}
  .wrap-con .img {width: 100%;}
}