@charset "utf-8";

#sub{background:#fff; padding-top: 146px;}
#header{box-shadow: 1px 1px 8px rgba(0,0,0,.2);}
#header.fixed{top: 0;}
#header .hearder-top a:hover{text-decoration: underline; text-underline-position: under;}
#header.active h1 img,
#header.active .btn-bx button img{filter: none !important;}
#header.active .hearder-top a{color: #696969;} 

#header.on{background: #fff !important;}
#header.on h1 img{filter: none !important;}
#header.on .nav-bx .Htlv01 a{color: #000 !important;}
#header.on .hearder-top a{color: #696969 !important;}
#header.on .btn-bx button img{filter: none !important;}


.boGalleryView .slick-dots li + li{margin-left:8px;}
.boGalleryView .slick-dots button{background:rgb(204, 204, 204);}

#sub .titLv{font-weight: 700; margin-bottom: 2.9rem; word-break:keep-all;font-size: 4rem;display: flex;align-items: center;color: #181818;}
#sub .titLv:not(:first-child){margin-top: 5rem;}

#sub .titLv2 {display:flex;padding-left:0px;margin-bottom: 1.2rem;word-break:keep-all;color: #181818;font-size: 2.4rem;font-weight: 700;}
#sub .titLv2:before{position:relative;margin-right: 10px;background: url(/page/keli/images/sub/ico-2dep.png) no-repeat center center /cover; width: 4px;height: 22px; flex-shrink:0; left:auto; top: 8px;flex-shrink: 0;}
#sub .titLv2 + .pgraph,
#sub .titLv2 + .listLv{/* padding-left: 16px */}

#sub .titLv3{font-weight: 600;padding-left:0px;display:flex;margin-bottom:5px;color: #181818;font-size: 2rem;padding-left:10px;}
#sub .titLv2 + .titLv3{padding-left:30px;}

#sub .titLv3:before{position:relative;margin-right: 7px;background: url(../images/sub/ico-3dep.png) no-repeat center center /cover;width:7px;height: 11.5px;flex-shrink:0;left:auto;top: 10px;border-radius:0;}
#sub .titLv3 + .pgraph,
#sub .titLv3 + .listLv{padding-left: 27px;}
#sub a:hover{text-decoration:none;}

#sub .pgraph{font-size: 1.8rem; font-weight:500; color: #4d4d4d;margin-bottom:2rem; padding-top: 0;}
  #sub .skinBtnBo{height: 46px !important; padding: 0 20px !important; font-size: 18px !important; border-color: #ccc !important; min-width: 90px !important; background: transparent !important; color: #444 !important; border-radius: 10px; display: inline-flex; align-items: center;
justify-content: center;} 
#sub .boSrch-btnBo{border: 1px solid #222 !important; color: #fff !important; background: #080f20 !important; padding: 0 10px !important; min-width: 60px !important; font-size: 1.6rem !important;}
#sub .skinBtnBo,
#sub .skinIptTxt, 
#sub .skinSelectBox{height:34px;line-height:35px;font-weight: 500;font-size: 1.6rem; color: #666;  padding: 0 0 0 15px}
#sub .skinIptPass{line-height: 33px;}
#sub .boSrchArea .skinBtnBo,
#sub .boSrchArea .skinIptTxt,
#sub .boSrchArea .skinSelectBox{min-height: 60px; border-radius: 5px;}
#sub .skinBtnBo{padding-left: 0;}
#sub .skinBtnBo:hover{background: #000 !important;}
#sub .skinBtnBo:hover{background: #019995 !important; border-color: #019995 !important; color: #fff !important;}
#sub .boSrch-btnBo:hover{background: #080f20 !important; border-color: #080f20 !important;}
#sub .search-wrap{position: relative; display: flex; width: 100%; justify-content: flex-end;}
#sub .boSrchArea{background:transparent;background:#fff; margin-bottom: 40px; border: none; padding: 0;}
#sub .boSrchArea .boMeta{font-size: 1.8rem; font-weight: 700; color: #00ada9;}
#sub .search-wrap button{font-size: 0; position: absolute !important; right: 0; top: 0; font-size: 0; width: 50px !important; height: 100%; border: none !important; background: transparent !important; cursor: pointer;}

#sub .listLv{font-weight: 500;margin-left:0px !important;color: #555 !important;font-size: 1.9rem;}
#sub p.listLv, #sub div.listLv, #sub span.listLv, #sub .listLv > li, #sub .listLv > dt, #sub .listLv > dd{padding-left: 16px;padding-top:0.8rem;}
#sub p.listLv2, #sub div.listLv2, #sub span.listLv2, #sub .listLv2 > li, #sub .listLv2 > dt, #sub .listLv2 > dd{padding-left: 16px;margin-bottom:5px;font-size: 1.8rem;color: #4d4d4d;font-weight: 400;}
#sub p.listLv2:before, #sub div.listLv2:before, #sub span.listLv2:before, #sub .listLv2 > li:before, #sub .listLv2 > dt:before{top: 10px; background: #4d4d4d; left:2px; width: 6px;height: 6px; border-radius: 50%;}
#sub p.listLv3, #sub div.listLv3, #sub span.listLv3, #sub .listLv3 > li, #sub .listLv3 > dt{margin-bottom:5px;padding-left:15px;font-size: 1.8rem;color: #4d4d4d; font-weight: 500;}
#sub p.listLv3:before, #sub div.listLv3:before, #sub span.listLv3:before, #sub .listLv3 > li:before, #sub .listLv3 > dt:before{top:11px;left: 0px;background: #666; width: 8px;height: 2px;}
#sub .listLv4{padding-left:0px;}
#sub p.listLv4, #sub div.listLv4, #sub span.listLv4, #sub .listLv4 > li, #sub .listLv4 > dt{margin-bottom:5px;padding-left:15px;}
#sub p.listLv4:before, #sub div.listLv4:before, #sub span.listLv4:before, #sub .listLv4 > li:before, #sub .listLv4 > dt:before{top:10px;left:3px;width:3px;height:3px;background:rgb(0, 82, 155);}
#sub .listLv > li > .listLv2, #sub .listLv2 > li > .listLv3, #sub .listLv3 > li > .listLv4{margin-top:0px;color: #777 !important;}
#sub .listLv2 > li > .listLv3{margin-top: 5px;}
#sub .imptBox{border:0px;background:#f5f8fa;border-radius:15px;}
#sub .contsBtn{border: 1px solid #000;color: #000;font-weight:400;position:relative;z-index:1;}
#sub .skinBtnBo:before, #sub .contsBtn:before{display:none;}
#sub .skinBtnBo{color:#222;font-weight:400;position:relative;border:1px solid #222;background: #080f20;color: #fff; padding: 0 10px;}

#sub .btnBoPrev,
#sub .btnBoNext{font-size: 18px; font-weight: 700; color: #c4c4c4;}
#sub .btnBoPrev span, #sub .btnBoNext span{background-image: url(/page/keli/images/sub/prev.png); width: 8px; height: 13px;}
#sub .btnBoNext span{background-image: url(/page/keli/images/sub/next.png); background-position: 100% 100%; margin-left: 10px;}
#sub .contsBtn:hover, #sub .skinBtnBo:hover{background: #435053;color: #fff;}
#sub .contsBtn:hover:after, #sub .skinBtnBo:hover:after{content:'';position:absolute;z-index:-1;top:2px;bottom:2px;left:2px;right:2px;/* background:#fff; */display:block;border-radius:3px;}

#sub input.skinBtnBo:hover{border-color:#303030;color: #fff;}
#sub .contsBtn > a:after{filter:brightness(0) grayscale(0);}
#sub .contsBtn:hover > a:after{filter:brightness(200) grayscale(1);}

#sub .boSrchArea input[type="submit"], #sub .skinBtnBo.ctrlFile-btnFile{color:rgb(255, 255, 255);}
#sub .skinTb:before{border-top: 2px solid #080f20;}
#sub .skinTb{font-size: 1.9rem;margin-top: 1.5rem;margin-bottom:1.5rem;margin-left: 0px;color: #555;}
#sub .skinTb.v2 .skinTb-td{border-width: 1px 0;}
#sub .skinTb.v2:before{display: none;}

#sub .skinTb-th, #sub .skinTb > tr > th, #sub .skinTb > thead > tr > th, #sub .skinTb > tbody > tr > th, #sub .skinTb > tfoot > tr > th{font-weight: 700;background-color: #f7f7f7;color: #000;border-color: #e0e0e0;border-width: 0px 1px 1px 1px;font-size: 1.8rem;padding: 1.5rem;}
#sub .skinTb > thead > tr > th{border-bottom-color: #000;}
#sub .skinTb > tr > td, #sub .skinTb > thead > tr > td, #sub .skinTb > tbody > tr > td, #sub .skinTb > tfoot > tr > td, #sub .skinTb-td{font-weight: 500;padding: 1.5rem 2rem;color: #4d4d4d; border-color: #e0e0e0; border-width: 0 1px 1px 1px; font-size: 1.8rem;}
#sub .skinTb td.skinTb-sbj{font-weight:500 !important;}
#sub .skinTb-conts{border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0;}
#sub .skinTb-data-resList > thead > tr > th{background: #fff; border-width: 0px 0 1px 0;}
#sub .skinTb-data-resList > tbody > tr > td{border-width: 0px 0 1px 0;}

#sub .skinTb-data-resList > tbody > tr > td .download{display: flex; justify-content: center; align-items: center;}
#sub .skinTb-data-resList > tbody > tr > td .download span{background: url(/page/keli/images/sub/download.png)no-repeat; width: 20px; height: 20px; font-size: 0;}
#sub .skinTb-data-resList a:hover{text-decoration: underline; text-underline-position: under;}

#sub .skinTb tbody th{border-right-width: 0px !important;}
#sub .skinTb-th[data-hidden="mob"]{border-right: 0 !important;}
#sub .skinTb .skinTb-conts img{max-width: 100%;}
#sub .skinTb-td table > tbody > tr > td{border-style: solid !important; border-width: 1px !important;}

#sub .skinTb-wrapper,
#sub .titLv3 + .titLv3{margin-top:1.2rem;}
#sub .titLv3 + .titLv2,
#sub .titLv2 + .titLv2,
#sub .skinTb-wrapper + .titLv2,
#sub .skinTb-wrapper + .titLv3,
#sub .titLv2 + .imptBox, 
#sub .titLv2 + .skinTb-wrapper{margin-top: .5rem;}
#sub .titLv + .titLv2,
#sub .listLv + .titLv2,
#sub .listLv2 + .titLv2,
#sub .listLv3 + .titLv2,
#sub .skinTb-wrapper + .titLv,
#sub .listLv4 + .titLv2{margin-top: 3rem;}
#sub .skinTb .listLv2, #sub .skinTb .listLv3, #sub .skinTb .listLv4 {margin:10px 0 10px 10px;}
#sub .ui-datepicker-trigger{margin-top: 5px;}

.listLv a{text-decoration: none;}
.listLv a:hover{text-decoration: underline; text-underline-position: under;}
.listLv .icon-btn:hover{color: #fff;}

#sub .boMultiSrch-group{justify-content:flex-end;}
#sub .boMeta-pt:before{background:#121212}
#sub .boMeta-pt{color: #121212;}

.sub-btn{display: flex; gap: 10px;}
.sub-btn a{display: flex; align-items: center; justify-content: center; border-radius: 50px; border: 2px solid #000;
width: 160px; height: 46px;  color: #000; transition: all .3s;}
.sub-btn a:hover{transition: all .3s; background: #000; color: #fff;}

.icon-btn{display:inline-flex;align-items:center;height: 56px;border:1px solid #ccc;border-radius:10px;color:#444;transition:all .1s;padding-right:15px;background: #fff;}
.icon-btn:hover{text-decoration:none !important;color:#fff;background: #080f20;border-color: #080f20;}
.icon-btn span{padding:0 20px;border-right:1px solid #cbcbcb;margin-right:10px;}
.icon-btn img{width:24px;}
.icon-btn:hover img{filter:invert(1) brightness(200);}

.board-btn{display:inline-flex;align-items:center;height:46px;border:1px solid #ccc;border-radius:10px;color:#444;padding:0 20px;font-size:18px;justify-content: center;min-width: 90px; font-weight: 500;}
.board-btn + .board-btn{margin-left:5px;}
.board-btn:hover{text-decoration:none !important;color:#fff;background:#019995;border-color:#019995;}
.board-btn.v2:hover{background: #000;border-color: #000;}

#sub .listLv >li:before{display: none !important;}

.listLv + .icon-btn{margin:17px 0 0 25px;}
.titLv2 + .icon-btn,
.titLv3 + .icon-btn{margin: 15px 0 0px 30px;}

#sub .ctrlFile-btnFile{background: #000 !important; height: 3.4rem !important;
padding: 0 10px !important; border-radius: 5px !important; color: #fff !important; border-color: #000 !important;}
#sub .skinIptTxt + .ctrlFile-btnFile{margin-left: 10px;}
#sub .ctrlFile-btnFile:hover{background: #000 !important; border-color: #000 !important;}
@media (max-width:1400px){
  html{font-size: 9px;}
  #sub{padding-top: 106px;}
  #sub p.listLv:before, #sub div.listLv:before, #sub span.listLv:before, #sub .listLv > li:before, #sub .listLv > dt:before{top: 17px;left: 2px;}
  #sub p.listLv2:before, #sub div.listLv2:before, #sub span.listLv2:before, #sub .listLv2 > li:before, #sub .listLv2 > dt:before{top: 6px;left: 2px;}
  #sub p.listLv3:before, #sub div.listLv3:before, #sub span.listLv3:before, #sub .listLv3 > li:before, #sub .listLv3 > dt:before{left: 0px;width: 5px;}
  #sub p.listLv4:before, #sub div.listLv4:before, #sub span.listLv4:before, #sub .listLv4 > li:before, #sub .listLv4 > dt:before{left:0px;}
  #sub p.listLv2, #sub div.listLv2, #sub span.listLv2, #sub .listLv2 > li, #sub .listLv2 > dt, #sub .listLv2 > dd, #sub p.listLv3, #sub div.listLv3, #sub span.listLv3, #sub .listLv3 > li, #sub .listLv3 > dt, #sub p.listLv4, #sub div.listLv4, #sub span.listLv4, #sub .listLv4 > li, #sub .listLv4 > dt{padding-left:11px;}
  #sub .titLv{margin-bottom: 2rem;}
  #sub .titLv2 {font-size: 2.4rem;}
  #sub .titLv3 {margin-left: 0;padding-left: 5px !important;}
  #sub .titLv2:before{top: 6px;;}
  #sub .titLv3:before{top: 8px;margin-right: 6px;width: 6px;height: 11px;}
  #sub .skinTb-th, #sub .skinTb > tr > th, #sub .skinTb > thead > tr > th, #sub .skinTb > tbody > tr > th, #sub .skinTb > tfoot > tr > th{font-weight:500;font-size: 1.8rem;}
  #sub .skinTb td, #sub .skinTb th,
  #sub .skinTb{font-size: 1.7rem;}
  #sub .skinTb a{display:inline-block;}
  #TRow-term{min-width:95px;}
  #text{font-size:13px !important}
  #sub .titLv2 + .pgraph,
  #sub .titLv2 + .listLv,
  #sub .titLv3 + .pgraph,
  #sub .titLv3 + .listLv{padding-left: 4px;}
  #sub .titLv{font-size: 3rem;}
  #sub .titLv:before{width: 36px;height: 28px;margin-right:8px;margin-top: -2px;}
  .icon-btn{height: 46px;border-radius:5px;padding-right: 13px;font-size: 14px;}
  .icon-btn span{padding: 0px 13px;margin-right:5px;}
  .icon-btn img{width:20px;}
  .board-btn{height:40px;border-radius:5px;padding:0 13px;font-size:13px;min-width: 80px;}
  .listLv + .icon-btn{margin:15px 0 0 15px;}
  .titLv2 + .icon-btn,
  .titLv3 + .icon-btn{margin: 5px 0 0 0px;}
  .board-btn{height:40px;border-radius:5px;padding: 0px 15px;font-size: 14px;min-width: 64px;}
  #sub .pgraph{font-size: 16px;font-weight:500;color:#4a4a4a;margin-bottom:3rem;padding-top: 5px;}
  #sub .skinBtnBo{height: 34px !important;  padding: 0px 10px !important; min-width: 64px !important;  border-radius: 5px !important; font-size: 16px !important;}
  #sub .skinBtnBo,
  #sub .skinIptTxt, 
  #sub .skinSelectBox{height: 34px;line-height: 35px;}
  #sub .boSrchArea{background:transparent;}
  #sub .boSrchArea .boMeta{padding-left:10px;}


  #sub .listLv{font-size: 1.75rem;}
  #sub p.listLv2, #sub div.listLv2, #sub span.listLv2, #sub .listLv2 > li, #sub .listLv2 > dt, #sub .listLv2 > dd{font-size:1.7rem;}
  #sub .skinTb.v2 .skinTb-td > div a{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
  #sub .skinTb.v2 .skinTb-td > div{display: flex; justify-content: flex-end;}
  #sub .skinTb.v2 .skinTb-td > div:first-child{justify-content: flex-start;}
  #sub .skinTb.v2 .skinTb-td:nth-child(2) > div{justify-content: flex-end;}
  #sub .ctrlFile-btnFile{margin-bottom: 0;}
}

@media (max-width:760px) {
  #sub{padding-top: 91px;}
  html{font-size: 8.2px;}
  .btnBoPrev, .btnBoNext{display: flex; align-items: flex-start; flex-direction: column;}
  #sub .btnBoPrev, #sub .btnBoNext{font-size: 16px;}

  #sub .boSrchArea .skinBtnBo,
  #sub .boSrchArea .skinIptTxt,
  #sub .boSrchArea .skinSelectBox{min-height: 34px; border-radius: 5px; padding: 0 0 0 10px; font-size: 14px !important;}
  #sub .boSrch-iptTxt{padding-right: 40px; background-size: 15px;}

  #sub .search-wrap button{width: 40px !important; height: 35px; top: auto; bottom: 0; margin: 0 !important;}
  #sub .skinTb.v2 .skinTb-td > div{display: flex; flex-direction: column;}
  #sub .skinTb.v2 .skinTb-td > div .btnBoNext{order: 1;}
  #sub .skinTb.v2 .skinTb-td > div a{order: 2;}

  #sub .skinMb-small .skinTb-td{border-width: 0 0 1px 0;}
  #sub .boSrch-btnBo{height: 34px !important;}

  #sub .skinIptPass{height: 34px; padding-left: 10px;}

  #sub .search-wrap{flex-direction: column;}
  #sub .skinTb:before{border-top-width:2px;}
  .skinTb-data-resList.skinTb-data-group >tbody >tr >td{border-width: 0 1px 1px;}
  #sub .titLv {margin-bottom:1.2rem;font-size: 2.7rem;}
  #sub .titLv3{padding-left: 15px;}
  #sub .titLv3:before{top:6px;left: 0;}
  #sub .listLv2, #sub .listLv3, #sub .listLv4{margin-left: 0px;}
  #sub .listLv > li > .listLv2, #sub .listLv2 > li > .listLv3, #sub .listLv3 > li > .listLv4{margin-top:5px;}
  #sub .caution{font-size:14px;}
  #sub .caution:before{margin:1px 1px 0px 0px;transform:scale(0.9);transform-origin:0% 50%;}
  #sub .pgraph {padding-top:5px;}
  #sub .imptBox{margin:15px -15px;border-radius:0px;}

  #sub p.listLv:before, #sub div.listLv:before, #sub span.listLv:before, #sub .listLv > li:before, #sub .listLv > dt:before{top: 15px;left: 0px;}
  #sub p.listLv2:before, #sub div.listLv2:before, #sub span.listLv2:before, #sub .listLv2 > li:before, #sub .listLv2 > dt:before{top: 8px;left: 1px;}
  #sub p.listLv3:before, #sub div.listLv3:before, #sub span.listLv3:before, #sub .listLv3 > li:before, #sub .listLv3 > dt:before{left: 0px;width: 4px;top: 10px;}
  #sub p.listLv4:before, #sub div.listLv4:before, #sub span.listLv4:before, #sub .listLv4 > li:before, #sub .listLv4 > dt:before{left:0px;}
  #sub p.listLv2, #sub div.listLv2, #sub span.listLv2, #sub .listLv2 > li, #sub .listLv2 > dt, #sub .listLv2 > dd, #sub p.listLv3, #sub div.listLv3, #sub span.listLv3, #sub .listLv3 > li, #sub .listLv3 > dt, #sub p.listLv4, #sub div.listLv4, #sub span.listLv4, #sub .listLv4 > li, #sub .listLv4 > dt{padding-left:11px;}
  #sub .titLv2:before{top: 5px;}
  #sub .titLv3:before{top: 5px;}
  #sub .titLv2{
    font-size: 2.2rem;
  }
  #sub .titLv3{font-size: 1.8rem;}
  #sub .titLv:before{width: 26px;height: 20px;margin-right:8px;margin-top: -2px;}
  .listLv + .icon-btn{margin:10px 0 0 10px;}
  .titLv2 + .icon-btn,
  .titLv3 + .icon-btn{margin: 5px 0 0 0px;}

  #sub .pgraph{font-size: 14px;font-weight:500;color:#4a4a4a;margin-bottom:3rem;padding-top: 5px;}
  #sub .skinBtnBo,
  #sub .skinIptTxt, 
  #sub .skinSelectBox{height: 34px;line-height: 32px; }
  #sub .skinBtnBo,
  #sub .skinIptTxt{padding-left: 10px;}
  #sub .boSrchArea{background:transparent;}
  #sub .boSrchArea .boMeta{padding-left:0;}
  #sub .skinTb-data-resList > tbody > tr > td .download{padding: 10px;}

  #sub .skinSelectBox{padding-left: 5px;}

  .board-btn{height:38px;padding: 0px 15px;font-size: 13px;}
  .icon-btn{height: 40px;border-radius:5px;padding-right: 12px;font-size: 13px;}
  .icon-btn span{padding: 0px 12px;margin-right:5px;}
  .icon-btn img{width:16px;}
  .btnBoPrev, .btnBoNext{min-width:auto;}
  #sub .ctrlFile-btnFile{font-size: 14px !important;}
}

/* pager */
#sub .pager {position: relative;margin:14px auto 0;padding: 20px 20px 7px;text-align: center;}
#sub .pager-num {display: none;}
#sub .pager-link {display: inline-block; margin: 0 1px; min-width: 36px;height: 36px;padding: 0 2px;background-color: transparent;border-color: #d2d2d2;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;line-height: 33px;vertical-align: middle;font-size:14px;color: #222 !important;border-radius: 5px;border: 1px solid #d7d7d7;}
#sub .pager-link-data-prev,
#sub .pager-link-data-first,
#sub .pager-link-data-next,
#sub .pager-link-data-last{border: none;}
#sub .pager-link.active {background: #00ada9;color: #fff !important;}
#sub .pager-link.active{border-color: #00ada9;}
#sub .pager-link-data-next,
#sub .pager-link-data-last,
#sub .pager-link-data-prev,
#sub .pager-link-data-first {font-size: 0;background: #fff !important;/* border: 1px solid #b6b6b6; */margin: 0 1px;}
#sub .pager-link-data-next {background:url(../images/common/ico-paging-narr.png) no-repeat center center /7px 12px !important;margin-left: 7px;}
#sub .pager-link-data-last {background:url(../images/common/ico-paging-narr2.png) no-repeat center center /13px 12px !important;}
#sub .pager-link-data-prev {background:url(../images/common/ico-paging-parr.png) no-repeat center center /7px 12px !important;margin-right: 7px;}
#sub .pager-link-data-first {background:url(../images/common/ico-paging-parr2.png) no-repeat center center /13px 12px !important;}

#sub .contsArea .pager a{text-decoration:none;}

@media (max-width:1400px){
  #sub .pager {margin:14px auto 0;padding: 10px 0px 5px;text-align: center;}
  #sub .pager-link {min-width: 26px;height: 26px;line-height: 26px;font-size:13px;}
  #sub .pager-link-data-next,
  #sub .pager-link-data-last,
  #sub .pager-link-data-prev,
  #sub .pager-link-data-first {font-size: 0;background: #fff !important;/* border: 1px solid #b6b6b6; */margin: 0px;}
  #sub .pager-link-data-next {background:url(../images/common/ico-paging-narr.png) no-repeat center center /6px 10px !important;margin-left: 5px;}
  #sub .pager-link-data-last {background:url(../images/common/ico-paging-narr2.png) no-repeat center center /11px 10px !important;}
  #sub .pager-link-data-prev {background:url(../images/common/ico-paging-parr.png) no-repeat center center /6px 10px !important;margin-right: 5px;}
  #sub .pager-link-data-first {background:url(../images/common/ico-paging-parr2.png) no-repeat center center /11px 10px !important;}
}
#sub .skinTb-th,
#sub .skinTb th{position:relative;}


@media (max-width: 1199px){
	#sub .pager-link-data-ellipsis {height: 4px;border-width: 0;font-size: 0;background-color: #000;width: 4px;border-radius: 50%;min-width: initial;}
	#sub .pager{margin-top:5px;}
  #sub .skinTb-data-resWrite:before{display:none;}
  #sub .skinTb-data-resWrite .skinTb-th{border-top:1px solid #080f20;margin-top:-1px;}
  #sub .skinTb-th:not(:last-child):after{display:none;}
  #sub .skinTb th:not(:last-child):after{height:14px;margin-top:-7px}
}

@media (max-width: 420px){
	#sub .pager-link:nth-child(n+3).pager-link:nth-last-child(n+3) {display: none;}
	#sub .pager-num {display: inline-block;padding:0 3px;vertical-align:-1px;font-size:14px;font-weight:500;color:#222;}
}        

.img-modal-bx{display:flex;align-items:center;justify-content:space-between;}
.img-modal-bx .img-zoom-modal + .img-zoom-modal{margin-left:15px;}
.img-zoom-modal{position:relative;display:block;flex:1 1 0%;}
.img-zoom-modal:after {content:"확대축소";transition:all 0.2s ease 0s;width:40px;height:40px;background:url("/page/common/images/zoom_w.png") center center / 25px 25px no-repeat rgba(0, 0, 0, 0.7);border-radius:50%;position:absolute;bottom:10px;right:10px;display:block;font-size:0px;}
.img-zoom-modal:before {content:"확대축소";transition:all 0.2s ease 0s;width:50px;height:50px;opacity:0;background:url("/page/common/images/zoom_w.png") center center / 30px 30px no-repeat rgba(0, 0, 0, 0.7);border-radius:50%;position:absolute;left:50%;top:50%;display:block;font-size:0px;margin:-25px 0px 0px -25px;}
.img-zoom-modal:hover:after{opacity:0;}
.img-zoom-modal:hover:before{opacity:0.6;}
.img-zoom-modal img{display:block;margin:0px auto;max-width:100%;}
#img-modal{width:auto;padding:60px 0px;background:rgb(25, 25, 25);position:fixed;z-index:5000;inset:0px;animation:0.35s ease 0s 1 normal both running img-modal;}
#img-modal .thumb{width:auto;margin:0px auto;display:flex;align-items:center;justify-content:center;height:calc(100vh - 120px);overflow:hidden;background:rgb(239, 239, 239);}
#img-modal .thumb img{display:block;}
#img-modal .contsBtn{display:block;margin:30px auto 0px;max-width:125px;background:rgb(255, 255, 255);border-radius:0px;}
#img-modal .close{display:block;position:absolute;right:15px;top:13px;width:24px;height:24px;filter:invert(1);font-size:30px;line-height:1;}
#img-modal .close:hover{transform:scale(1.1);}
#img-modal .title-bx{color:rgb(241, 241, 241);position:absolute;bottom:0px;left:0px;width:100%;background:rgb(17, 17, 17);height:60px;padding:0px 310px 0px 0px;z-index:10;}
#img-modal .title-bx h1{padding-left:20px;height:60px;line-height:58px;font-weight:300;font-size:17px;border-left: 5px solid #0059e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#img-modal .title-bx .btn-bx{position:absolute;right:10px;top:12px;height:36px;}
#img-modal .title-bx .btn-bx a{display:inline-block;vertical-align:top;border:1px solid rgb(170, 170, 170);height:36px;line-height:34px;color:rgb(170, 170, 170);font-size:14px;font-weight:300;min-width:100px;text-align:center;}
#img-modal .title-bx .btn-bx i{margin-right:3px;}
#img-modal .title-bx .btn-bx a + a{margin-left:3px;}
.boSrch{flex-wrap:wrap;justify-content:flex-start;}
.yrSrch-btnBo,
.boSrchPeriod-btnBo{width:100%;margin-left:0;height:36px;background:#333;font-size:14px;line-height:32px;display:block;}
.boSrch .boSrchPeriod-btnBo{margin-top:10px;}
.spSrch .boSrchPeriod-group:nth-child(2) .boSrchPeriod-btnBo{margin-top:10px;}
.spSrch .boSrchPeriod-group{width:100% !important;}
.spSrch .boSrchPeriod-group + .boSrchPeriod-group{margin-top:10px;}
.boSrchArea fieldset{width:100%;}

@media (max-width:1400px){
  .img-modal-bx .img-zoom-modal + .img-zoom-modal{margin-left:10px;}
  #img-modal{padding:50px 0px;}
  #img-modal .thumb{height:calc(100vh - 100px);}
  #img-modal .title-bx{height:50px;padding:0px 115px 0px 0px;}
  #img-modal .title-bx h1{padding-left:15px;height:50px;line-height:48px;font-size:15px;border-left-width: 3px;}
  #img-modal .title-bx .btn-bx{top:9px;height:32px;}
  #img-modal .title-bx .btn-bx a{height:32px;line-height:30px;min-width:32px;font-size:0px;}
  #img-modal .title-bx .btn-bx i{margin-right:0px;font-size:16px;vertical-align:middle;}
  #img-modal .title-bx .btn-bx a + a{margin-left:3px;}
  #img-modal .close{right:10px;top:11px;font-size:28px;}
  .img-zoom-modal:before{display:none !important;}
  .img-zoom-modal:after{transform:scale(0.85);transform-origin:100% 100%;opacity:1 !important;}
}
@media (max-width:716px) {
  .img-modal-bx{overflow-x:auto;padding:0px 0px 0px 15px;margin:0px -15px;}
  .img-modal-bx .img-zoom-modal{min-width:340px;margin:10px 7px 10px 0px !important;}
  .img-zoom-modal {/* margin:20px -15px; */}
  #img-modal .title-bx{height:50px;padding:0px 90px 0px 0px;}
  #img-modal .title-bx h1{font-size:14px;}
  #img-modal .title-bx .btn-bx{right:10px;}
  #img-modal .title-bx .btn-bx i{font-size:15px;}
  #img-modal .title-bx .btn-bx a + a{margin-left:1px;}
  #img-modal .close{right:6px;}
  .img-zoom-modal:after {transform:scale(0.7);right:5px;bottom:5px;}
  .boSrchPeriod-btnBo{margin-top:0 !important;}
  .bjSrch label{font-size:14px;}
  .yrSrch-btnBo,
  .boSrch .boSrchPeriod-btnBo{margin-top: 0 !important;}
  .yrSrch + div .boSrchPeriod-iptTxt{width:auto !important;flex:1;}
  .yrSrch + div .boSrchPeriod-group{width:100% !important;display:flex;align-items:center;margin-top: 5px;}
  .yrSrch + div .boSrchPeriod-group + .boSrchPeriod-group{margin-top:-5px;}
  .boSrchPeriod-label{font-size:14px;min-width: 60px;margin-top: 7px;}
  .yrSrch label{font-size:14px;}
  .bjSrch .yrSrch-iptTxt{margin-bottom:5px;}
  .boSrchPeriod-group{display:flex;flex-wrap:wrap;}
}
@keyframes img-modal{
  0%{opacity:0;transform:translateY(50%);}
  100%{opacity:1;transform:translateY(0%);}
}

.ui-modal{display: flex; position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);  z-index:2000;justify-content:center;align-items:center;}

.ui-modal.v1,
.ui-modal.v2{visibility: hidden;}
.ui-modal.v1.active,
.ui-modal.v2.active{display: flex !important; visibility: visible;}
.ui-modal.v1 .slick-wrap,
.ui-modal.v2 .slick-wrap{position: relative;}

.ui-modal.v1 .slick,
.ui-modal.v2 .slick{max-width: 1044px;}
.ui-modal.v2 .slick{max-width: 335px;}
.ui-modal.v1 .control,
.ui-modal.v2 .control{display: flex; position: absolute; left: 0; top: 50%; transform: translateY(-50%);  z-index: 10; width: 100%;}
.ui-modal.v1 .control button,
.ui-modal.v2 .control button{position: absolute; left: -90px; top: 50%; transform: translateY(-50%);}
.ui-modal.v1 .control button.next,
.ui-modal.v2 .control button.next{right: -90px; left: auto;}
.ui-modal.v1 .slick .slick-dots,
.ui-modal.v2 .slick .slick-dots{width: 100%; position: absolute; left: 0;  bottom: -64px;text-align: center;}
.ui-modal.v1 .slick .slick-dots li + li,
.ui-modal.v2 .slick .slick-dots li + li{margin-left: 10px;}
.ui-modal.v1 .slick .slick-dots .slick-active button,
.ui-modal.v2 .slick .slick-dots .slick-active button{background: #00ada9;}
.ui-modal.v1 .slick .slick-dots button,
.ui-modal.v2 .slick .slick-dots button{font-size: 0; width: 10px; height: 10px; background: #d9d9d9;  border-radius: 50%;}
.ui-modal.v1 .close,
.ui-modal.v2 .close{font-size: 0;background: url(/page/keli/images/sub/close.png)no-repeat;position: absolute;right: -140px;top: -100px;width: 44px;height: 44px;}
.ui-modal.v1 .close::after, 
.ui-modal.v2 .close::after{display: none;}

.ui-modal .bx{background:#fff;border-radius:10px;padding:20px 20px 20px;box-shadow:3px 3px 10px 0px rgba(0,0,0,.3);max-width:300px;width:90%;display:flex;align-items:center;min-height:130px;position:relative;}
.ui-modal h2{font-weight:500;font-size:18px;line-height:1.4;margin-bottom:13px;text-align:center;word-break:keep-all;}
.ui-modal h2 + span{margin:-10px 0 12px;font-size:13px;display:block;text-align:center;color:#aaa;font-weight:300;word-break:keep-all;}
.ui-modal select{height:32px;line-height:32px;border:1px solid #bbb;padding-left:10px;flex:3;}
.ui-modal input[type="password"],
.ui-modal input[type="text"]{height:32px;line-height:32px;border:1px solid #bbb;padding-left:15px;flex:3;}
.ui-modal .ui-flex + .ui-flex{margin-top:5px;}
.ui-modal .ui-flex{display:flex;width:100%;flex-wrap:wrap;}
.ui-modal form{width:100%;}
.ui-modal input[type="submit"]{flex:1;height:32px;line-height:32px;text-align:center;background:#111;font-size:14px;color:#fff;}
.ui-modal input[type="submit"] + input[type="submit"]{margin-left:5px;}
.ui-modal input[type="password"] + input[type="submit"],
.ui-modal input[type="text"] + input[type="submit"],
.ui-modal select + input[type="submit"]{margin-left:5px}
.ui-modal select ~ input[type="password"],
.ui-modal select ~ input[type="text"]{margin-left:5px;flex-basis:60%;flex-grow:0;width:100%}
.ui-modal .ui-flex > div{padding:3px 0;flex:1;flex-basis:50%;white-space:nowrap;height:30px;line-height:27px;}
.ui-modal .ui-flex > div label{font-size:14px;font-weight:400;overflow:hidden;max-width:calc(100% - 30px);text-overflow:ellipsis;white-space:nowrap;}
.ui-modal .ui-flex > div label + input[type="radio"]{margin-left:10px;}
.ui-modal .ui-flex > div input[type="radio"],
.ui-modal .ui-flex > div input[type="checkbox"]{margin: 9px 3px 0 0;vertical-align:top;}
.ui-modal .close{display:block;position:absolute;top:-38px;right:0px;line-height:0;border-radius:50%;background:#fff;display:block;font-size:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;}
.ui-modal .close:after{content:'✕';font-size:18px;line-height:0;font-family:Arial, Helvetica, sans-serif;}



@media (max-width:1640px){
  .ui-modal .bx{padding:15px 15px 15px;max-width:280px;min-height:120px;}
  .ui-modal h2{font-size:16px;margin-bottom:11px;}
  .ui-modal h2 + span{margin:-8px 0 10px;font-size:12px;}
  .ui-modal select{height:30px;line-height:30px;padding-left:5px;}
  .ui-modal input[type="password"],
  .ui-modal input[type="text"]{height:30px;line-height:30px;padding-left:10px;}
  .ui-modal .ui-flex + .ui-flex{margin-top:5px;}
  .ui-modal input[type="submit"]{height:30px;line-height:30px;font-size:12px;}
  .ui-modal input[type="password"] + input[type="submit"],
  .ui-modal input[type="text"] + input[type="submit"],
  .ui-modal select + input[type="submit"]{margin-left:5px}
  .ui-modal select ~ input[type="password"],
  .ui-modal select ~ input[type="text"]{margin-left:5px;}
  .ui-modal .ui-flex > div{padding:3px 0;flex:1;flex-basis:50%;white-space:nowrap;height:30px;line-height:27px;}
  .ui-modal .ui-flex > div label{font-size:13px;}
  .ui-modal .ui-flex > div label + input[type="radio"]{margin-left:10px;}
  .ui-modal .ui-flex > div input[type="radio"],
  .ui-modal .ui-flex > div input[type="checkbox"]{margin:8px 1px 0 0;}
  .ui-modal .close{transform:scale(.8);top:-35px;transform-origin:100% 50%;padding-bottom:1px;}

  .ui-modal.v1 .slick,
  .ui-modal.v2 .slick{max-width: 600px;}
  .ui-modal.v2 .slick{max-width: 335px;}
  
}

.contsArea{position:relative; padding: 60px 0px 70px 0px; z-index:initial; flex:1;}

#sub textarea{width:100%;border-radius: 5px;}
#sub textarea + .skinBtnBo{width:100%;margin-top:5px;}

@media (max-width:1400px){
   .contsArea{padding: 35px 0px 50px 0px;}
}  

@media (max-width:991px){
   .ui-modal.v1 .close, .ui-modal.v2 .close{right: -90px;top: -83px;}
}

@media (max-width: 716px){
	.skinTb-data-resList >tbody,
	.skinTb-data-resList >tbody >tr,
	.skinTb-data-resList >tbody >tr >td,
	.skinTb-data-resList >.skinTb-tr,
	.skinTb-data-resList >.skinTb-tr >.skinTb-th,
	.skinTb-data-resList >.skinTb-tr >.skinTb-td {align-items:stretch;}

  .contsArea{padding: 25px 0px 25px 0px;}
  .video-box{position: relative; width: 100%; }
  .video-box iframe{width: 100%; padding-top: 56.25%;}
  
  .ui-modal.v1 .slick, .ui-modal.v2 .slick{max-width: 300px;}
  .ui-modal.v1 .control, .ui-modal.v2 .control{display: none;}
  .ui-modal.v1 .close, .ui-modal.v2 .close{ width: 30px; height: 30px; background-size: cover; right: -15px; top: 100px; }
  .ui-modal.v1 .close{right: -40px;top: -59px;}
  .ui-modal.v1 .slick .slick-dots, .ui-modal.v2 .slick .slick-dots{bottom: -34px;}
  .ui-modal.v1 .slick .slick-dots button, .ui-modal.v2 .slick .slick-dots button{width: 8px; height: 8px;}
}

#sub-visual{position:relative; z-index: 1;} 
#sub-visual .inner{height:400px;position:relative;display:flex;flex-direction:column;justify-content:center;padding-bottom:50px;}
#sub-visual .visual-img-bx{height:100%;position:absolute;left:50%;  width:100vw;margin-left:-50vw;overflow:hidden;background:#000;}
#sub-visual .visual-img-bx img{display:block;width:100%;height:100%;object-fit:cover;}
#sub-visual h2{font-size:80px; color: #fff; line-height:1;padding-top:0;position: relative; font-weight: 700;}
#sub-visual .bread-btn-bx{padding-top:17px;display:flex;align-items:center;justify-content:space-between;}
#breadcrumb{display:flex;align-items:center;position: relative;z-index: 55;height:46px; font-size: 18px; }
#breadcrumb .home{flex-shrink:0; color: #fff; font-weight: 500;}
#breadcrumb a{height:100%;position:relative;z-index:1;display:flex; padding-right: 20px; margin-right: 20px; position: relative;text-align:left;align-items:center;font-weight:500;color:#fff;line-height:1.3;word-break:keep-all;}
#breadcrumb a::after{content: ''; background: url(/page/keli/images/sub/arrow.png)no-repeat; width: 4px; height: 8px; position: absolute; right: 0; top: 20px;}
#breadcrumb a:last-child{margin-right: 0; padding-right: 0;}
#breadcrumb a:last-child::after{display: none;}
#sub-visual .btn-group{display:flex;align-items:center;justify-content:center;gap:0 5px;z-index: 50;position: relative;}
#sub-visual .btn-group button{position: relative;}
#sub-visual .btn-group button > img{display:block; width: 36px;} 
#sub-visual .sns-bx{position: relative;display:flex;justify-content:center;z-index:10;}
#sub-visual .sns-bx > div{position:absolute;top:40px;display:flex;align-items:center;gap:0 5px;display:none;}
#sub-visual .sns-bx > div a{background: url(/page/keli/images/sub/sp_dq01.png)no-repeat; display: inline-block; position: relative; width: 37px; height: 37px; background-size: 577px 1510px; vertical-align: middle; font-size: 0;}
#sub-visual .sns-bx > div a.blog{background-position: -6px -326px;}
#sub-visual .sns-bx > div a.facebook{background-position: -46px -327px;}
#sub-visual .sns-bx > div a.twitter{background-position: -535px -5px;}
#sub-visual .sns-bx > div a img{width:100%;display:block;}
#sub-visual .btn-group button.active + div{display:flex !important; flex-direction: column; gap: 5px;}

#content{position: relative;z-index:5;}
.content-title01{display:flex;align-items:center;justify-content:center;word-break:keep-all;line-height:1.4;border-bottom:1px solid #1a1a1a;font-size:40px;font-family: 'OneStoreMobileGothicTitleFont';height:126px;}

#depth-tab{border-bottom: 1px solid #c4c4c4;}
#depth-tab ul{display: flex; gap: 40px;}
#depth-tab ul li a{height: 78px; color: #121212; line-height: 1.2; display: flex; align-items: center; font-size: 18px; font-weight: 700; padding: 0 10px; position: relative;}
#depth-tab ul li.active a{color: #019995;}
#depth-tab ul li.active a::before{content: ''; width: 100%; height: 2px; background: #019995; position: absolute; left: 0; bottom: 0;}

.content-title{padding: 24px 0 0; border: 2px solid #000; margin-top: 1.5rem; border-width: 2px 0 1px 0; display: flex; flex-direction: column; align-items: center;}
.content-title h3{font-size: 40px; font-weight: 700; color: #121212; line-height: 1.2;}
.content-title > div{padding-top: 7px;}
.content-title > div span{font-size: 18px; color: #4d4d4d; font-weight: 500; padding-right: 20px; margin-right: 20px; position: relative;}
.content-title > div span::before{content: ''; width: 1px; height: 20px; background: #c4c4c4; position: absolute; right: 0; top: 0;}
.content-title > div span:last-child::before{display: none;}

.content-title .course{margin-top: 17px; display: flex; justify-content: space-between; width: 100%; align-items: center;  padding: 20px; background: #f7f7f7; border-top: 1px solid #121212;}
.content-title .course em{display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; color: #fff;}
.content-title .course ul li{padding-left: 16px; position: relative; font-size: 18px; color: #4d4d4d;}
.content-title .course ul li::before{content: ''; width: 5px; height: 5px; background: #4d4d4d;
position: absolute; left: 0; top: 11px; border-radius: 50%;}
.content-title .course ul li strong{font-weight: 700; padding-right: 8px;}
.content-title .course ul li a{display: inline-flex; align-items: center; padding: 0 10px; height: 30px; 
border-radius: 5px; background: #121212; color: #fff; transition: all .2s;}
.content-title .course ul li a:hover{background: #00ada9; transition: all .2s;}

.content-box{display: flex; padding: 40px 20px; flex-direction: column; align-items: flex-start;}

.file-list{background: #f7f7f7; margin-bottom: 50px; padding: 30px; border: 1px solid #c4c4c4; border-radius: 10px; display: flex; flex-direction: column; align-items: flex-start;}
.file-list a{position: relative; padding-left: 28px; display: flex; gap: 10px; align-items: center;}
.file-list a + a{margin-top: 10px;}
.file-list a:hover{text-decoration: underline !important; text-underline-position: under;}
.file-list a::before{content: ''; background: url(/page/keli/images/sub/download01.png)no-repeat; width: 18px; height: 18px; position: absolute; left: 0; top: 4px;}
.btnBoNext{padding-left: 20px;}

@media (max-width:1400px){
  #sub-visual .inner{height:385px;padding-bottom:50px;}
  #sub-visual .visual-img-bx{left:auto;margin-left:0;}
  #sub-visual .visual-img-bx img{object-position:50% 100%;}
  #sub-visual h2{font-size:40px;padding-top:40px;}
  #sub-visual .bread-btn-bx{align-items:flex-start;}
  #breadcrumb{height:36px;}
  #breadcrumb .item{min-width:150px;}
  #breadcrumb .item button{padding:0 15px;font-size:16px;}
  #breadcrumb .item button img{width:11px;}
  #breadcrumb .item button:before{width:1px;height:12px;}
  #breadcrumb .item > div{top:40px;border-radius:20px;left:-5px;right:-5px;padding:13px 0;}
  #breadcrumb .item > div a{padding:4px 15px 4px 20px;font-size:14px;}
  #sub-visual .btn-group{margin-bottom:0px;align-self:flex-end;transform:scale(.9);transform-origin:100% 100%;}
  .content-title01{font-size:30px;height:96px;}

  #depth-tab .inner{overflow-x: auto;}
  #depth-tab ul li a{white-space: nowrap;}

  
}

@media (max-width:991px){
  #sub-visual .inner{height:300px;}
  #sub-visual h2{font-size: 35px;}

  #breadcrumb a{font-size: 15px; padding-right: 15px; margin-right: 15px;}
  #breadcrumb a::after{top: 14px;}

  #depth-tab ul{gap: 10px;}
  #depth-tab ul li a{font-size: 16px;}

  .content-title{padding: 15px 0 0;}
  .content-title h3{font-size: 30px;}
  .content-title > div span{font-size: 16px;}
  .content-title .course{padding: 15px;}
  .content-title .course ul li{font-size: 16px; padding-left: 12px;}
  .content-title .course ul li::before{top: 10px;}
  .content-title .course ul li a{font-size: 13px; height: 25px;}
  .content-title .course em{width: 70px; height: 70px; font-size: 14px;}
  .content-box{padding: 20px 15px; font-size: 14px;}

  .file-list{padding: 20px; margin-bottom: 30px;}
}

@media (max-width:760px) {
    #sub-visual .inner{height: 260px;padding-bottom: 0;}
    #sub-visual .visual-img-bx img{object-position: 65% 100%;}
    #sub-visual h2{font-size:30px;padding-top: 0;}
    #sub-visual .bread-btn-bx{padding-top: 13px;flex-direction:column;align-items:flex-start;}
    #breadcrumb{height:auto;flex-direction:column;align-items:flex-start;gap: 5px 0;padding-left:10px;}
    #breadcrumb a{padding-right: 0; margin-right: 0;}
    #breadcrumb a::after{display: none;}
    #breadcrumb .home{display:none;}
    #sub-visual .btn-group{transform:scale(.8);margin-top: 7px;padding: 0 15px;gap: 0 15px;}
    .content-title01{font-size:22px;height:72px;}

    #depth-tab .inner{overflow-x: auto;}
    #depth-tab ul li a{font-size: 15px; height: 60px;}

    .content-title h3{font-size: 20px;}
    .content-title > div span{font-size: 14px; padding-right: 10px; margin-right: 10px;}
    .content-title > div span::before{height: 15px; top: 1px;}
    .content-title .course{margin-top: 10px; padding: 10px;}
    .content-title .course ul li{font-size: 13px; padding-left: 8px;}
    .content-title .course ul li::before{width: 4px; height: 4px; top: 8px;}
    .content-title .course ul li a{padding: 0 5px;}
    .content-title .course ul li strong{padding-right: 5px;}
    .content-title .course ul li span{font-size: 13px;}
    .content-title .course em{width: 60px; height: 60px;}

    .content-box{padding: 20px 10px}

    .file-list{padding: 15px; margin-bottom: 20px;}
    .file-list a{display: inline-flex; max-width: 100%; font-size: 14px; gap: 6px; padding-left: 23px;}
    .file-list a img{display: block; object-fit: cover; width: 15px;}
    .file-list a span{text-overflow: ellipsis; overflow: hidden; min-width: 0; white-space: nowrap; font-size: 14px;}
    .file-list a::before{width: 15px; height: 15px; background-size: cover;}
}


/*통합검색*/
#total-search{position:relative;padding-bottom:50px;}
#total-search .popular{padding:35px 0 32px;text-align:center;}
#total-search .popular strong{display:inline-block;vertical-align:top;padding-right:15px;height:20px;line-height:20px;color:#454545;font-weight:300;position:relative;}
#total-search .popular strong:after{content:'';display:block;width:2px;height:14px;background:#b8b8b8;position:absolute;top:50%;margin-top:-7px;right:0;}
#total-search .popular a{display:inline-block;vertical-align:top;height:20px;line-height:20px;margin-left:13px;color:#454545;font-weight:300;}
#total-search .popular a em{display:inline-block;vertical-align:top;height:20px;width:20px;line-height:20px;background:#7b7b7b;color:#fff;font-weight:400;border:1px solid #515151;transition:all .1s;text-align:center;margin-right:5px;}
#total-search .popular a:hover{text-decoration:none;}
#total-search .popular a:hover em{background:#1f8371;}

#total-search .period{position:relative;background:#f7f7f7;border:1px solid #b5b5b5;border-radius:25px;padding:30px 45px;}
#total-search .period .bx-1{float:left;}
#total-search .period .bx-1 > div{display:inline-block;vertical-align:top;}
#total-search .period .bx-2{float:right;}
#total-search .period strong{display:inline-block;vertical-align:top;height:34px;line-height:36px;color:#454545;font-size:18px;font-weight:500;padding-right:2px;}
#total-search .period .bx-1 div:nth-of-type(n+2) strong{margin-left:40px;}
#total-search .period a{display:inline-block;vertical-align:top;margin-left:5px;width:77px;height:34px;line-height:34px;text-align:center;background:#fff;border:1px solid #1f8371;border-radius:5px;color:#1f8371;transition:all .05s;font-size:14px;font-weight:400;}
#total-search .period a:hover{background:#1f8371;color:#fff;text-decoration:none;}
#total-search .period a.active{background:#1f8371;color:#fff;text-decoration:none;}
#total-search .period .bx:nth-child(2n) > div{display:inline-block;vertical-align:top;}
#total-search .period label{display:inline-block;vertical-align:top;height:34px;line-height:36px;color:#454545;font-size:18px;font-weight:500;padding-right:2px;}
#total-search .period input[type="text"]{height:34px;line-height:34px;padding-left:15px;margin-left:6px;border:1px solid #b1b1b1;width:130px;}
#total-search .ui-datepicker-trigger{margin:5px 0 0 1px;vertical-align:top;}
#total-search .period .data_end{position:relative;padding-left:35px;}
#total-search .period .data_end:after{content:'';display:block;width:5px;height:1px;background:#676767;position:absolute;top:50%;left:12px;}
#total-search .period input[type="submit"]{margin-left:15px;height:34px;line-height:36px;color:#fff;background:#4d5360;font-size:15px;font-weight:400;width:75px;}

#total-search .result{position:relative;}
#total-search .result h4 br{display:none;}
#total-search .result h4{text-align:center;padding:35px 0 35px;font-weight:400;color:#454545;font-size:22px;}
#total-search .result h4 span{color: #2751fe;font-weight:900;}
#total-search .result h4 strong{font-weight:700;color: #fa0f0f;text-decoration:underline;}
#total-search .total{position:relative;background:#f7f7f7;border:1px solid #b5b5b5;border-radius:25px;padding:13px 45px 25px;}
#total-search .total li{margin:17px 0px 0 0;padding-left:16px;position:relative;display:inline-block;width:calc((100% - 15px) / 5)}
#total-search .total li a{display:block;height:25px;line-height:25px;color:#313131;font-weight:500;transition:all .1s;}
#total-search .total li.active a{font-weight:900;}
#total-search .total li:after{content:'';display:block;width:8px;height:8px;border:1px dotted #313131;border-width:0px 0px 1px 1px;position:absolute;top:5px;left:0px;}

#total-search .result h4.none{text-align:left;padding-bottom:5px;color:#1f8371;font-weight:700;font-size:18px;padding-left:20px;}
#total-search .no_result{margin:5px 0 36px;padding-left:20px;}
#total-search .no_result li{line-height:1.4;color:#707070;font-weight:500;padding-left:12px;position:relative;}
#total-search .no_result li:after{content:'-';display:block;position:absolute;top:1px;left:0px;}
#total-search .no_result li + li{margin-top:5px;}

#total-search .item{margin-top:60px;position:relative;}
#total-search .item h5{height: 56px;padding-left:20px;background:#f7f7f7;border:1px solid #b5b5b5;border-radius: 15px;font-size:18px;color:#313131;font-weight:700;margin-bottom:5px;display: flex;align-items: center;}
#total-search .item li a{display: flex;border-bottom:1px dashed #979797;padding:23px 20px;gap: 15px 25px;}
#total-search .item li a:hover{text-decoration:none;}
#total-search .item li a strong{display:block;color: #2751fe;font-size:18px;margin-bottom:7px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .1s;}
#total-search .item li a:hover strong{font-weight:900;}
#total-search .item li a p{line-height:1.6;margin-bottom:5px;max-height:3.2em;word-break:keep-all;color:#707070;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#total-search .item li a span{display:block;color: #2751fe;font-weight:400;}
#total-search .item li a span em{margin-left:10px;padding-left:12px;position:relative;}
#total-search .item li a span em:after{content:'';display:block;height:12px;width:1px;position:absolute;top:50%;margin-top:-6px;left:0px;background:#02987e;}
#total-search .item .more{position:absolute;color:#454545;top: 15px;right:20px;}
#total-search .item .more:hover{text-decoration:none;font-weight:700;}
#total-search .highlight{background:#fff93b;}

#total-search .ga-list{padding-top:25px;border-bottom:0;margin-bottom:-17px;}
#total-search .ga-list .bx{margin-bottom:17px;}
#total-search .menu{padding:18px 20px 27px;border-bottom:1px dashed #979797;}
#total-search .menu a{display:block;margin-top:7px;font-weight:500;color:#434343;}

#total-search .article .image .image-box{position:relative; width: 200px; height: 130px; overflow: hidden;}
#total-search .article .image .image-box:before{content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid rgba(0,0,0,0.3);}
#total-search .article .image .image-box img{ display: block; width: 100%;height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease;}

#total-search #search-box{position:relative;padding:38px 175px;}
#total-search #search-box:before{content:'';display:block;width:1920px;position:absolute;left:50%;margin-left:-960px;top:0;bottom:0;background:#f4f4f4;}
#total-search #search-box .bx{float:left;position:relative;background:#fff;border:1px solid #b5b5b5;padding:0 20px;border-radius:28px;}
#total-search #search-box .bx-1{width:153px;margin-right:15px;}
#total-search #search-box .bx-2{width:calc(100% - 168px);padding-right:55px;}
#total-search #search-box select{display:block;width:100%;line-height:54px;height:54px;background:transparent;font-size:16px;color:#707070;}
#total-search #search-box input[type="search"]{line-height:54px;font-family:'Paperlogy';height:54px;background:transparent;display:block;width:100%;font-size:16px;color:#000;}
#total-search #search-box input[type="search"]::placeholder{font-size:16px;color:#000;}
#total-search #search-box input[type="submit"]{display:block;width: 43px;height: 43px;position:absolute;top: calc(50% - 22px);right: 6px;background: url(../images/common/search.png) no-repeat center center  / cover;font-size:0;color:transparent;image-rendering:-webkit-optimize-contrast;}

#total-search .empty{padding: 30px 15px 0 15px;text-align: center;}

@media (max-width:1400px) {
  #total-search{padding-bottom:35px;}
  #total-search .popular{padding:30px 0 23px;}
  #total-search .popular strong{font-size:15px;padding-right:15px;height:18px;line-height:18px;}
  #total-search .popular strong:after{width:1px;height:12px;margin-top:-6px;}
  #total-search .popular a{margin-left:13px;font-size:15px;height:18px;line-height:18px;}
  #total-search .popular a em{width:18px;height:18px;line-height:18px;font-size:13px;}

  #total-search .period{border-radius:20px;padding:20px 35px;}
  #total-search .period .bx-1{float:none;}
  #total-search .period .bx-2{float:right;margin-top:15px;}
  #total-search .period strong{height:30px;line-height:32px;font-size:16px;}
  #total-search .period .bx-1 div:nth-of-type(n+2) strong{margin-left:30px;}
  #total-search .period a{margin-left:5px;width:65px;height:30px;line-height:28px;font-size:13px;}
  #total-search .period label{height:30px;line-height:32px;font-size:16px;}
  #total-search .period input[type="text"]{height:30px;line-height:30px;padding-left:12px;margin-left:5px;width:100px;font-size:15px;}
  #total-search .ui-datepicker-trigger{margin:3px 0 0 1px;}
  #total-search .period .data_end{padding-left:30px;}
  #total-search .period .data_end:after{left:10px;}
  #total-search .period input[type="submit"]{margin-left:10px;height:30px;line-height:32px;font-size:14px;width:70px;}

  #total-search .result h4{padding:30px 0 30px;font-size:20px;}

  #total-search .total{border-radius:20px;padding:8px 35px 20px;}
  #total-search .total li{margin:15px 0px 0 0;}
  #total-search .total li a{font-size:15px;}
  #total-search .total li:after{width:6px;height:6px;top:5px;}

  #total-search .result h4.none{font-size:16px;padding-left:15px;}
  #total-search .no_result{margin:5px 0 30px;padding-left:15px;}
  #total-search .no_result li{font-size:15px;}

  #total-search .item{margin-top:50px;}
  #total-search .item h5{height: 50px;line-height:40px;padding-left:15px;font-size:16px;}
  #total-search .item li a{padding:20px 15px;}
  #total-search .item li a strong{font-size:15px;margin-bottom:5px;}
  #total-search .item li a p{font-size:14px;margin-bottom:3px;}
  #total-search .item li a span{font-size:13px;}
  #total-search .item li a span em{margin-left:8px;padding-left:10px;}
  #total-search .item li a span em:after{height:10px;margin-top:-5px;}
  #total-search .item .more{top: 14px;right:15px;font-size:14px;}

  #total-search .ga-list{padding-top:20px;}
  #total-search .menu{padding:13px 15px 22px;}
  #total-search .menu a{margin-top:5px;font-size:15px;}

  #total-search #search-box{padding:30px 100px;/* display: flex; *//* justify-content: center; */}
  #total-search #search-box .bx{padding:0 15px;width: 100%;}
  #total-search #search-box .bx-1{width:150px}
  #total-search #search-box .bx-2{width: 100%;padding-right:40px;max-width: 600px;margin: 0 auto;float: none;}
  #total-search #search-box select{line-height:42px;height:42px;font-size:14px;}
  #total-search #search-box input[type="search"]{line-height:42px;height:42px;font-size:14px;}
  #total-search #search-box input[type="search"]::placeholder{font-size:14px;}
  #total-search #search-box input[type="submit"]{width: 36px;height: 36px;top: calc(50% - 18px);}
}

@media (max-width:992px) {
  #total-search #search-box{padding:25px 35px;}
}

@media (max-width:716px) {
  #total-search{padding-bottom:25px;}
  #total-search .popular{padding:22px 0 15px;text-align:left;}
  #total-search .popular strong{font-size:15px;display:block;margin-bottom:10px;font-weight:700;}
  #total-search .popular strong:after{display:none;}
  #total-search .popular a{margin-left:0px;font-size:14px;height:18px;line-height:18px;width:30%;}

  #total-search .period{border-radius:15px;padding:15px;}
  #total-search .period .bx-1 > div{display:block;}
  #total-search .period .bx-1 div:nth-of-type(n+2){margin-top:5px;}
  #total-search .period .bx-1 div:nth-of-type(n+2) strong{margin-left:0;}
  #total-search .period .bx-2{float:none;margin-top:7px;}
  #total-search .period strong{height:26px;line-height:28px;font-size:14px;width:40px;}
  #total-search .period a{margin-left:5px;width:60px;height:26px;line-height:25px;font-size:12px;}
  #total-search .period label{height:26px;line-height:28px;font-size:14px;width:40px;}
  #total-search .period input[type="text"]{height:26px;line-height:26px;padding-left:10px;margin-left:5px;width:calc(100% - 100px);font-size:14px;}
  #total-search .ui-datepicker-trigger{margin:1px 0 0 1px;}
  #total-search .period .bx:nth-child(2n) > div{display:block;margin-bottom:2px;}
  #total-search .period .data_end{padding-left:0px;}
  #total-search .period .data_end:after{display:none;}
  #total-search .period input[type="submit"]{margin-left:0px;height:28px;line-height:30px;font-size:13px;width:100%;margin-top:5px;}

  #total-search .result h4{padding: 25px 0 23px;font-size: 15px;}
  #total-search .result h4 br{display:block;}

  #total-search .total{border-radius:15px;padding:8px 15px 10px;}
  #total-search .total li{margin:7px 0px 0 0;width: calc((100% - 5px) / 2);}
  #total-search .total li a{font-size:14px;}


  #total-search .result h4.none{padding-left:5px;}
  #total-search .no_result{margin:5px 0 25px;padding-left:0px;}
  #total-search .no_result li{font-size:14px;}

  #total-search .item{margin-top:35px;}
  #total-search .item h5{height: 44px;line-height:36px;padding-left:15px;font-size:15px;}
  #total-search .item li a{padding:15px 10px;flex-direction: column;}
  #total-search .item li a strong{font-size:15px;margin-bottom:5px;}
  #total-search .item li a p{font-size:14px;margin-bottom:3px;}
  #total-search .item li a span{font-size:13px;}
  #total-search .item li a span em{margin-left:8px;padding-left:10px;}
  #total-search .item li a span em:after{height:10px;margin-top:-5px;}
  #total-search .item .more{top: 12px;}

  #total-search .ga-list{padding-top:15px;}
  #total-search .menu{padding:10px 0px 17px 10px;}
  #total-search .menu a{margin-top:3px;font-size: 13px;}

  #total-search #search-box{padding:20px 0px;}
  #total-search #search-box .bx{padding:0 10px;}
  #total-search #search-box .bx-1{width:90px;margin-right:7px;}
  #total-search #search-box .bx-2{padding-right:36px;}
  #total-search #search-box select{line-height:36px;height:36px;font-size:13px;}
  #total-search #search-box input[type="search"]{line-height:36px;height:36px;}
  #total-search #search-box input[type="submit"]{width: 30px;height: 30px;top: calc(50% - 16px);right: 3px;}
}


@keyframes table1{ 
  0%{transform:perspective(800px) translateX(100%);opacity:0;}
  100%{transform:perspective(800px) translateX(0%);opacity:1;} 
}

@keyframes pin1{ 
  0%{transform:perspective(100px) rotateY(0deg)}
  100%{transform:perspective(100px) rotateY(360deg)} 
}

@keyframes pin2{ 
  0%{opacity:0;filter:invert(1);}
  100%{opacity:.5;filter:invert(1);} 
}

.empty-data{display: flex; flex-direction: column; align-items: center; min-height: 330px; justify-content: center; border-radius: 20px; background: #e6e6e6;}
.empty-data p{font-size: 18px;}

.mypage .empty-data{min-height: 165px;}

@media (max-width:991px) {
  .empty-data{min-height: 250px;}
  .empty-data p{font-size: 16px;}
}

@media (max-width:760px) {
  .empty-data{min-height: 150px;}
  .empty-data p{font-size: 14px;}

  .mypage .empty-data{min-height: 120px;}
}

/* 켈리소개 */
.introduction{display: flex; gap: 40px; margin: -61px 0 -70px 0; justify-content: space-between; align-items: flex-start;}
.introduction .introduction-bx{padding-top: 155px;}
.introduction .introduction-bx h3{font-size: 30px; font-weight: 700; color: #121212; line-height: 1.3;}
.introduction .introduction-bx > div{display: flex; align-items: flex-end; padding: 50px 0;}
.introduction .introduction-bx > div img{display: block;}
.introduction .introduction-bx p{font-size: 18px; color: #4d4d4d; font-weight: 500;}
.introduction .introduction-bx p + p{margin-top: 31px;}
.introduction .introduction-bx span{font-size: 22px; font-weight: 700; color: #00ada9; line-height: 1.2; display: inline-block; padding-left: 16px;}

@media (max-width:1440px) {
  .introduction{margin: -36px 0 -50px 0; gap: 100px;}
  .introduction .introduction-bx h3{font-size: 25px;}
  .introduction .introduction-bx h3 br{display: none;}
  .introduction .introduction-bx span{font-size: 18px;}
  .introduction .introduction-bx{padding-top: 80px;}
  .introduction .introduction-bx > div img{width: 180px;}
  .introduction .introduction-bx p{font-size: 16px;}
  .introduction .introduction-bx p br{display: none;}
  .introduction > img{display: block; width: 600px; margin-right: -20px;}
}

@media (max-width:991px) {
  .introduction{gap: 50px; flex-direction: column; margin: 0;}
  .introduction .introduction-bx{padding-top: 40px;}
  .introduction .introduction-bx h3{font-size: 22px;}
   .introduction .introduction-bx > div{padding: 40px 0;}
  .introduction .introduction-bx span{font-size: 22px;}
  .introduction .introduction-bx > img{width: 200px;}
  .introduction > img{order: 1; width: 100%;  height: 400px; object-fit: cover;}
  .introduction .introduction-bx{order: 2; padding-top: 0;}
  .introduction .introduction-bx p + p{margin-top: 20px;}
  .introduction .introduction-bx p br{display: none;}
}

@media (max-width:760px) {
  .introduction{gap: 30px;}
  .introduction > img{height: 300px;}
  .introduction .introduction-bx > div{padding: 25px 0;}
  .introduction .introduction-bx h3{font-size: 18px;}
  .introduction .introduction-bx > div img{width: 110px;}
  .introduction .introduction-bx span{font-size: 16px; padding-left: 10px;}
  .introduction .introduction-bx p{font-size: 14px;}
  .introduction .introduction-bx p + p{margin-top: 15px;}
}

/* 조직도 */
.organization-box{position:relative;padding-bottom:50px;}
.organization-box .level-01,
.organization-box .level-02{display:flex; align-items:center; justify-content:center; height:88px; color:#fff; font-weight:700; border-radius: 500px;
background: linear-gradient(90deg, #005BAC 0%, #00ADA9 100%); margin:0 auto; max-width:282px; position:relative; font-size: 24px;}
.organization-box .level-01:after{content:''; display:block; width:0; height:163px; border-left: 2px dashed #d7d7d7; position:absolute; left:calc(50% - 1px); bottom:-163px;}
.organization-box .level-02{line-height: 1.2; width:282px; margin:40px auto 0; position:relative; font-size: 18px; color: #121212; text-align: center; display:flex; align-items:center; justify-content:center; border-radius:20px; border: 3px solid #00ada9; height:88px; font-weight:700; background:#fff;}
.organization-box .or-list{display:flex; justify-content: space-between; gap: 90px; margin:66px auto 0;position:relative;z-index:1;}
.organization-box .or-list::after{content:'';display:block; z-index:-1; border:2px dashed #d7d7d7; height:30px; border-bottom:0 !important; position:absolute; top:-32px; left:140px; right:140px;}
.organization-box .or-list .or-bx{display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1;}
.organization-box .or-list .or-bx::before{content: ''; height: 30px; border-left: 2px dashed #d7d7d7; position: absolute; left: 50%; top: -30px; transform: translateX(-50%); z-index: -1;}
.organization-box .or-list .or-bx:last-child::before,
.organization-box .or-list .or-bx:first-child::before{display: none;}
.organization-box .level-03{display:flex; align-items:center; justify-content:center; border-radius:20px; text-align: center; line-height: 1.2; width: 282px; height:88px; color:#33363d;font-size:20px;font-weight:500; background: #efefef;}

@media (max-width: 1440px) {
  .organization-box .level-03{width: 200px;}
  .organization-box .or-list{gap: 50px;}
  .organization-box .or-list::after{left: 100px; right: 100px;}
}

@media (max-width: 991px) {
  .organization-box .level-01, .organization-box .level-02{max-width: 230px; height: 70px;}
  .organization-box .level-01{font-size: 20px;}
  .organization-box .level-01:after{height: 146px; bottom: -146px;}
  .organization-box .level-02{font-size: 16px;}
  .organization-box .level-03{width: 150px; height: 70px; font-size: 15px;}
  .organization-box .or-list{gap: 30px;}
  .organization-box .or-list::after{left: 75px; right: 75px;}
}

@media (max-width: 760px) {
  .organization-box .level-01, .organization-box .level-02{max-width: 130px; height: 60px;}
  .organization-box .level-01:after{bottom: -115px; height: 115px;}
  .organization-box .level-01{font-size: 18px;}
  .organization-box .level-02{font-size: 14px; margin: 30px auto 0;}
  .organization-box .level-03{width: 64px; height: 60px; font-size: 13px; border-radius: 5px;}
  .organization-box .or-list{margin: 56px auto 0; gap: 0;}
  .organization-box .or-list::after{left: 32px; right: 32px;}
}

@media (max-width: 500px) {
  .organization-box .level-03{width: 100px; height: 60px; font-size: 13px; border-radius: 5px;}
  .organization-box .or-list::after{left: 50px; right: 50px;}
}

@media (max-width: 414px){
  .organization-box .level-03{width: 64px; height: 60px;}
  .organization-box .or-list::after{left: 32px; right: 32px;}
}

/* 연혁 */
.history .history-tit{padding: 0px 50px; display: flex; align-items: center; flex-direction: column; align-items: flex-start; justify-content: center; color: #fff;background: url(/page/keli/images/sub/history_bg.png)no-repeat; width: 100%; height: 296px; background-size: cover; border-radius: 20px;}
.history .history-tit strong{font-size: 80px; font-weight: 700;}
.history .history-tit p{font-size: 18px; font-weight: 500; display: inline-block; margin-top: -5px;}
.history .history-date{padding-top: 100px;}
.history .history-date .history-bx{display: flex; gap: 100px; align-items: flex-start;}
.history .history-date .history-bx h4{font-size: 80px; font-weight: 700;}
.history .history-date .history-bx > div{margin-top: -35px; width: 100%;}
.history .history-date .history-bx ul{position: relative;}
.history .history-date .history-bx ul::before{content: ''; background: #e0e0e0; width: 1px; position: absolute; left: 8px; top: 10px; bottom: 10px;}
.history .history-date .history-bx ul li{font-size: 18px; position: relative; padding-left: 48px;}
.history .history-date .history-bx ul li::before{content: ''; background: url(/page/keli/images/sub/bullet.png)no-repeat; width: 18px; height: 18px;
position: absolute; left: 0; top: 4px;}
.history .history-date .history-bx ul li + li{margin-top: 17px;}
.history .history-date .history-bx ul li strong{color: #121212; font-weight: 700;}
.history .history-date .history-bx ul li span{color: #4d4d4d; font-weight: 500; padding-left: 30px;}
.history .history-date .history-bx + .history-bx{margin-top: 100px;}

@media (max-width:991px) {
  .history .history-tit strong{font-size: 50px;}
  .history .history-tit p{font-size: 16px;}
  .history .history-date{padding-top: 50px;}
  .history .history-date .history-bx{gap: 60px;}
  .history .history-date .history-bx > div{margin-top: 0;}
  .history .history-date .history-bx img{width: 250px;}
  .history .history-date .history-bx h4{font-size: 45px;}
  .history .history-date .history-bx ul li{padding-left: 35px; font-size: 16px;}
  .history .history-date .history-bx ul li span{padding-left: 20px;}
  .history .history-date .history-bx + .history-bx{margin-top: 50px;}
}

@media (max-width:760px) {
  .history .history-tit{height: 150px; padding: 0 20px;}
  .history .history-tit strong{font-size: 30px;}
  .history .history-tit p{font-size: 14px; line-height: 1.2; margin-top: 0;}
 
  .history .history-date .history-bx{flex-direction: column; gap: 30px;}
  .history .history-date .history-bx img{margin: 0 auto;}
  .history .history-date .history-bx h4{font-size: 35px; text-align: center;}
  .history .history-date .history-bx ul li{font-size: 15px; padding-left: 30px;}
  .history .history-date .history-bx ul li::before{top: 3px;}
  .history .history-date .history-bx ul li span{padding-left: 15px;}
}

/* 비전 */
.vision .vision-tit{background: url(/page/keli/images/sub/vision_bg.png)no-repeat; background-size: cover; width: 100%; height: 300px; 
border-radius: 20px; color: #fff; padding: 80px 0; text-align: center;}

.vision .vision-tit em{width: 96px; height: 30px; margin: 0 auto; background: #fff; border-radius: 50px; color: #121212; display: flex; align-items: center; justify-content: center;}
.vision .vision-tit strong{display: block; font-size: 30px; font-weight: 700; line-height: 1.3; padding-top: 39px;}

.core-value{
    position:relative;
    padding-top: 80px; 
}

.task-badge,
.core-badge{
    display:table;
    margin:0 auto 60px;
    display: flex; 
    align-items: center;
    justify-content: center; 
    width: 96px;
    height: 30px;
    font-size:18px;
    font-weight:500;
    color:#fff;
    line-height:1;
    border-radius:30px;
    background:#8f8f8f;
}

.task-badge{
   margin:0 auto 40px;
}

.core-circle{
    position:relative;
    width:403px;
    height:403px;
    margin:0 auto;
    border:1px solid #d9d9d9;
    border-radius:50%;
}

.center-logo{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:260px;
    text-align:center;
}

.center-logo img{
    display:block;
    
    height:auto;
}

/* 공통 */
.point{
    position:absolute;
}

.icon-box{
    width:110px;
    height:110px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 4px 14px rgba(0,0,0,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
}

.icon-box img{
    display:block;
    height:auto;
}

.txt{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:18px;
    line-height:1.2;
    font-weight:700;
    color:#111;
    word-break:keep-all;
    white-space:nowrap;
}

.txt.left{
    right:126px;
    text-align:right;
}

.txt.right{
    left:126px;
    text-align:left;
}

/* 각 위치 */
.point-1{
    left:0;
    top:10px;
}

.point-2{
    right:0;
    top:10px;
}

.point-3{
    left:0px;
    bottom:10px;
}

.point-4{
    right:0;
    bottom:10px;
}

.task{padding-top: 80px;}
.task-wrap{display: grid; gap: 40px; grid-template-columns: repeat(4,1fr);}
.task-wrap .item{border-radius: 20px; text-align: center; background: linear-gradient(180deg, #00ADA9 0%, #005BAC 100%); color: #fff; padding: 30px 20px; min-height: 240px;}
.task-wrap .item strong{font-size: 24px; font-weight: 700; line-height: 1.2; border-bottom: 1px solid #fff; padding-bottom: 5px; display: block;}
.task-wrap .item p{font-size: 18px; font-weight: 500; padding-top: 14px; line-height: 1.4; word-break: keep-all;}

@media (max-width:1440px) {
  .vision .vision-tit strong{font-size: 28px;}


  .task-wrap .item{padding: 15px; min-height: 200px;}
  .task-wrap .item strong{font-size: 18px;}
  .task-wrap .item p{padding-top: 10px; font-size: 15px;}
}

@media (max-width:991px) {
  .vision .vision-tit{padding: 40px 20px; height: 230px;}
  .vision .vision-tit em{font-size: 15px; width: 86px; height: 25px;}
  .vision .vision-tit strong{font-size: 25px; padding-top: 29px; word-break: keep-all;}

  .core-value{padding-top: 60px;}
  .task-badge, .core-badge{font-size: 16px;}
  .txt{font-size: 16px;}

  .task-wrap{grid-template-columns: repeat(2, 1fr); gap: 20px;}
  .task-wrap .item{min-height: 160px;}
}

@media (max-width:760px) {
  .vision .vision-tit{padding: 15px; height: 160px; display: flex; flex-direction: column; justify-content: center;}
  .vision .vision-tit strong{font-size: 16px; word-break: keep-all; padding-top: 19px;}
  .vision .vision-tit strong br{display: none;}
  .vision .vision-tit em{width: 76px;}

  .core-value{padding-top: 30px;}
  .task-badge, .core-badge{font-size: 14px; width: 86px;}
  .icon-box{width: 80px; height: 80px;}
  .icon-box img{width: 45px;}

  .center-logo{width: 150px;}
  .center-logo img{width: 150px;}
  .core-circle{width: 300px; height: 300px;}
  .txt{font-size: 14px; white-space: normal;}
  .txt br{display: none;}
  .txt.left{right: auto; top: 120px; text-align: center;}
  .txt.right{left: auto; top: 120px; text-align: center;} 
  .point-1,
  .point-3{left: -20px;}
  .point-2,
  .point-4{right: -20px;}
   .txt .point-3{top: 120px;}

   .task-wrap{grid-template-columns: 1fr;}
   .task-wrap .item{height: auto;}
   .task-wrap .item strong{font-size: 16px;}
   .task-wrap .item p{font-size: 14px;}
   .task-badge{margin: 0 auto 30px;}
   .core-badge{margin: 0 auto 40px;}
}

/* 
.boGallery .thumbnail{background: #f3f3f3; width: 100%; max-width: 375px; height: 375px; margin: 0 auto; overflow: hidden;}
.boGallery .thumbnail .centered{width: 100%; height: 100%; display: flex; align-items: center;}
.boGallery .thumbnail .centered img{width: auto; height: auto; margin: 0 auto;}
.boGallery .thumbnail img{max-width: 100%; max-height: 100%; width: auto; height: auto;} */

/* 교수자아카데미 */
.learner{background: url(/page/keli/images/sub/learner_bg.png)no-repeat; width: 100%; background-size: cover;}
.program{color: #fff; border-radius: 20px; text-align: center; padding-top: 106px; height: 600px; position: relative;}
.program strong{font-size: 80px; font-weight: 700; display: block;}
.program p{font-size: 18px; padding-top: 12px; display: inline-block;}
.program em{font-size: 128px; font-weight: 700; color: rgba(255, 255, 255, 0.10); position: absolute; left: 50%; bottom: -57px; transform: translateX(-50%); width: 100%;}

.academy{}
.academy .academy-bx{display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 60px;}
.academy .academy-bx .academy-item{border-radius: 6px; position: relative; border: 1px solid #e0e0e0; overflow: hidden;}
.academy .academy-bx .academy-item em{position: absolute; right: 10px; top: 10px; width: 60px; height: 60px;
display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 500;}
.academy em.open{background: #00ada9;}
.academy em.close{background: #999;}
.academy em.waiting{background: #000;}
.academy .academy-bx .img-wrap{background: #f3f3f3; width: 100%; height: 300px; margin: 0 auto; overflow: hidden;}
.academy .academy-bx .img-wrap .img-bx{width: 100%; height: 100%; display: flex; align-items: center;}
.academy .academy-bx .img-wrap .img-bx img{width: auto; height: auto; margin: 0 auto; object-fit: cover;}

.academy .academy-bx .academy-item img{max-width: 100%; max-height: 100%;}
.academy .academy-bx .academy-item .academy-txt{background: #f7f7f7; padding: 15px 20px 0; height: 12.25em;}
.academy .academy-bx .academy-item .academy-txt > strong{font-size: 24px; color: #121212; font-weight: 700; line-height: 1.2;
display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all;}
.academy .academy-bx .academy-item .academy-txt ul{padding-top: 12px;}
.academy .academy-bx .academy-item .academy-txt ul li{color: #4d4d4d; font-size: 18px; position: relative; display: flex; align-items: center;}
.academy .academy-bx .academy-item .academy-txt ul li strong{font-weight: 700; white-space: nowrap;}
.academy .academy-bx .academy-item .academy-txt ul li span{padding-left: 5px; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
min-width: 0;}
.academy .academy-bx .academy-item .btn-wrap{padding: 0; height: auto; display: flex;}
.academy .academy-bx .academy-item .btn-wrap a{display: flex; justify-content: center; flex: 1; align-items: center; height: 46px;  background: #999;
color: #fff; font-size: 18px; font-weight: 500; transition: all .5s;}
.academy .academy-bx .academy-item .btn-wrap a:last-child{border-left: 1px solid #e0e0e0;}
.academy .academy-bx .academy-item .btn-wrap a:hover{transition: all .5s; background: #000;}

@media (max-width:1440px) {
  .program em{font-size: 100px; bottom: -43px;}

  .academy .academy-bx{grid-template-columns: repeat(3, 1fr);}
}

@media (max-width:991px) {
  .program{height: 450px;}
  .program strong{font-size: 60px;}
  .program p{font-size: 16px;}
  .program em{font-size: 70px; bottom: -28px;}

  .academy .academy-bx{gap: 25px; grid-template-columns: repeat(2, 1fr); margin-top: 40px;}
  .academy .academy-bx .academy-item img{height: 200px;}
  .academy .academy-bx .academy-item .academy-txt{height: 10.5em; padding: 10px 15px 0;}
  .academy .academy-bx .academy-item .academy-txt > strong{font-size: 20px;}
  .academy .academy-bx .academy-item .academy-txt ul li{font-size: 16px;} 
  .academy .academy-bx .academy-item .btn-wrap a{font-size: 16px; height: 40px;}
  .academy .academy-bx .img-wrap{height: 270px;}
}

@media (max-width:760px) {
  .program{padding: 30px; height: 250px;}
  .program p{font-size: 14px; word-break: keep-all;}
  .program p br{display: none;}
  .program strong{font-size: 28px;}

  .academy .academy-bx{gap: 15px; margin-top: 0;}
  .academy .academy-bx .academy-item em{font-size: 12px; width: 45px; height: 45px; top: 5px; right: 5px;}
  .academy .academy-bx .academy-item img{height: 150px;}
  .academy .academy-bx .academy-item .academy-txt{padding: 8px 10px 0; height: 8em;}
  .academy .academy-bx .academy-item .academy-txt > strong{font-size: 16px;}
  .academy .academy-bx .academy-item .academy-txt ul{padding-top: 5px;}
  .academy .academy-bx .academy-item .academy-txt ul li{font-size: 14px;}
  .academy .academy-bx .academy-item .academy-txt ul li::before{width: 4px; height: 4px; top: 9px;}
  .academy .academy-bx .academy-item .btn-wrap a{font-size: 13px; height: 33px;}
  .academy .academy-bx .img-wrap{height: 150px;}
}

@media (max-width:500px) {
  .program em{font-size: 40px; bottom: -10px;}
}

@media (max-width:414px) {
  .program em{font-size: 30px; bottom: -10px;}
}

/* 기업 대상 연수 프로그램 */
.business{padding-top: 64px;}
.business h3{font-size: 40px; color: #121212; font-weight: 700;}
.business .business-bx{display: flex; gap: 60px; color: #fff; padding-top: 22px;}
.business .business-item{border-radius: 20px; background: #00ada9; padding: 30px;}
.business .business-item > div{width: 65px; height: 65px; display: flex; 
justify-content: center; align-items: center; background: #fff; border-radius: 10px;}
.business .business-item strong{font-size: 24px; font-weight: 700; padding-top: 12px; display: inline-block;}
.business .business-item p{font-size: 18px; font-weight: 500; padding-top: 7px; line-height: 1.2;}
.business .process{padding-top: 64px;}
.business .process-bx{display: flex; align-items: center; padding: 22px 0; border-bottom: 1px dashed #d7d7d7;}
.business .process-bx em{display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 65px; height: 65px; background: #efefef; font-size: 36px; font-weight: 700; color: #cecece; border-radius: 50%;}
.business .process-bx > div{padding-left: 40px;}
.business .process-bx strong{font-size: 24px; color: #121212; font-weight: 700;}
.business .process-bx p{color: #4d4d4d; font-size: 18px; font-weight: 500; line-height: 1.3;}
.business .business-btn{display: flex; justify-content: flex-end; padding-top: 80px;}
.business .business-btn a{padding: 0 20px; transition: all .2s; border-radius: 5px; background: #000; display: flex; align-items: center; justify-content: center;
height: 46px; color: #fff; font-size: 18px; font-weight: 500; transition: all .2s;}
.business .business-btn a:hover{background: #00ada9;}

@media (max-width:991px) {
  .business{padding-top: 50px;}
  .business h3{font-size: 32px;}
  .business .business-bx{gap: 30px;}
  .business .business-item{padding: 20px;}
  .business .business-item > div{width: 60px; height: 60px;}
  .business .business-item > div img{display: block; width: 35px;}
  .business .business-item strong{font-size: 22px;}
  .business .business-item p{font-size: 16px;}

  .business .process{padding-top: 50px;}
  .business .process-bx em{width: 60px; height: 60px; font-size: 34px;}
  .business .process-bx > div{padding-left: 30px;}
  .business .process-bx strong{font-size: 22px;}
  .business .process-bx p{font-size: 16px;}

  .business .business-btn{padding-top: 60px;}
  .business .business-btn a{font-size: 16px;}
}

@media (max-width:760px) {
  .business{padding-top: 30px;}
  .business h3{font-size: 22px;}
  .business .business-bx{flex-direction: column; padding-top: 12px; gap: 15px;}
  .business .business-item > div{width: 50px; height: 50px;}
  .business .business-item > div img{width: 30px;}
  .business .business-item strong{font-size: 18px; padding-top: 8px;}
  .business .business-item p{font-size: 14px; padding-top: 5px;}

  .business .process{padding-top: 30px;}
  .business .process-bx{padding: 11px 0;}
  .business .process-bx em{font-size: 25px; width: 50px; height: 50px;}
  .business .process-bx > div{padding-left: 20px;}
  .business .process-bx strong{font-size: 18px;}
  .business .process-bx p{font-size: 14px;}

  .business .business-btn{padding-top: 40px;}
  .business .business-btn a{font-size: 14px; padding: 0 15px; height: 40px;}
}

/* ai가이드라인 */
.guide{position: relative; z-index: 1; margin: -60px 0 -70px 0; padding: 50px 0 60px;}
.guide::before{content: ''; width: 1920px; height: 100%; background: #f0f8f8; position: absolute; left: 50%; top: 0; margin-left: -960px; z-index: -1;}
.guide .guide-tit{text-align: center;}
.guide .guide-tit strong{font-size: 30px; color: #121212; font-weight: 700; line-height: 1.4;}
.guide .guide-tit span{color: #e05d00;}
.guide .guide-bx{padding-top: 79px; display: grid; gap: 40px; grid-template-columns: repeat(2, 1fr); max-width: 1300px; margin: 0 auto;}
.guide .guide-bx .box{ min-height: 236px; padding: 30px 30px 21px; border-radius: 20px; background: #fff;}
.guide .guide-bx .box > div{width: 65px; height: 65px; display: flex; align-items: center; justify-content: center; background: #00ada9; border-radius: 10px;}
.guide .guide-bx .box strong{font-size: 24px; color: #121212; font-weight: 700; padding-top: 16px; display: inline-block;}
.guide .guide-bx .box p{font-size: 18px; font-weight: 500; color: #4d4d4d; padding-top: 15px; line-height: 1.2;}
.guide .guide-bx .rule{background: #00ada9; color: #fff;}
.guide .guide-bx .rule strong{display: block;  font-size: 30px; font-weight: 700; line-height: 1.2; padding-top: 17px; color: #fff;}

@media (max-width:1400px) {
  .guide{margin: -35px 0 -50px 0;}
  .guide .guide-bx .box p br{display: none;}
}

@media (max-width:991px) {
  .guide .guide-tit strong{font-size: 24px;}
  .guide .guide-bx{padding-top: 49px; gap: 30px;}
  .guide .guide-bx .box{padding: 20px; min-height: 150px;}
  .guide .guide-bx .box > div{width: 55px; height: 55px;}
  .guide .guide-bx .box > div img{display: block; width: 30px;}
  .guide .guide-bx .box strong{font-size: 20px;}
  .guide .guide-bx .box p{font-size: 16px;}
  .guide .guide-bx .rule{display: flex; flex-direction: column; justify-content: space-between;}
  .guide .guide-bx .rule img{display: block; width: 86px;}
  .guide .guide-bx .rule strong{font-size: 24px;}
}

@media (max-width:716px) {
  .guide{margin: -25px 0 -25px 0; padding: 30px 0 40px;}
  .guide .guide-bx{grid-template-columns: 1fr; padding-top: 39px; gap: 20px;}
  .guide .guide-tit strong{font-size: 18px;}
  .guide .guide-tit strong br{display: none;}
  .guide .guide-bx .box{padding: 15px;}
  .guide .guide-bx .rule{flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px;}
  .guide .guide-bx .rule img{width: 66px;}
  .guide .guide-bx .box strong{font-size: 18px; padding-top: 10px; line-height: 1.2;}

  .guide .guide-bx .box p{font-size: 14px; padding-top: 10px;}
  .guide .guide-bx .rule strong{font-size: 20px;}
}

/* 솔루션마켓 상세 */
.collection{width: calc(100% - 350px);}
.collection-bx{display: flex; align-items: center; justify-content: space-between;}
.collection-bx a{display: flex; justify-content: center; align-items: center; width: 275px; height: 46px; border-radius: 10px;
border: 2px solid #000; background: #fff; margin-top: 10px; font-size: 18px; transition: all .2s;}
.collection-bx a:hover{transition: all .2s; background: #000; color: #fff;}
.collection-txt{display: flex; gap: 50px; flex-shrink: 0; align-items: flex-start;}
.collection-txt img{flex-shrink: 0; display: block; object-fit: cover;}
.collection-txt > div{display: flex; color: #121212; flex-direction: column;}
.collection-txt > div > strong{font-size: 40px; font-weight: 700; line-height: 1.2; max-width: 900px;
display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.collection-txt > div span{font-size: 24px; font-weight: 500; 
display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
max-width: 700px; padding-top: 9px; line-height: 1.2;}
.collection-txt > div em{color: #4d4d4d; font-weight: 500; font-size: 18px;  padding-top: 15px;}
.collection-txt > div em strong{padding-right: 10px; margin-right: 10px; position: relative;}
.collection-txt > div em strong::before{content: ''; width: 2px; height: 15px; 
position: absolute; right: 0; top: 4px; background: #4d4d4d;}
.collection .details-bx{display: flex; gap: 20px;}
.collection .details-bx > div{background: #efefef;  height: 103px; padding: 0 40px; border-radius: 10px; display: flex; flex-direction: column; 
align-items: center; justify-content: center;}
.collection .details-bx > div strong{font-size: 24px; color: #000; font-weight: 500;}
.collection .details-bx > div span{color: #4d4d4d; font-size: 18px; font-weight: 500;}

.collection .demo-link-wrap{position: fixed; top: 500px; right: 128px; z-index: 10;
 display: flex; flex-direction: column; align-items: center;}

.collection-btn{display: none; position: fixed; right: 0; top: 50%; z-index: 100; transform: translateY(-50%); background: #121212;  height: 140px; border-radius: 10px 0 0 10px;}

.collection-btn a{ writing-mode: vertical-rl; color: #fff; font-size: 18px; font-weight: 500; padding: 10px; height: 140px;}
.collection-btn a span{padding-bottom: 4px;}
.collection .demo-link-bx{background: #fff; padding: 20px; border-radius: 10px; border: 2px solid #000;}
.collection .demo-link-bx a{display: flex; align-items: center; justify-content: center; width: 235px; height: 40px;
font-size: 18px; color: #fff; font-weight: 500; background: #4d4d4d; border-radius: 5px; transition: all .2s; margin-top: 0;}
.collection .demo-link-bx a:hover{background: #00ada9; transition: all .2s; border-color: #00ada9;}
.collection .demo-link-bx p{color: #4d4d4d; font-weight: 500; padding-top: 5px; text-align: center; line-height: 1.2;}
.collection .demo-link-bx .short_cut{padding: 26px 0;}
.collection .demo-link-bx .short_cut a + a{margin-top: 10px;}
.collection .demo-link-bx ul{padding-left: 10px;}
.collection .demo-link-bx ul li{padding-left: 16px; line-height: 1.2; position: relative; font-size: 18px; color: #4d4d4d; font-weight: 500;}
.collection .demo-link-bx ul li::before{content: ''; width: 5px; height: 5px; position: absolute; left: 0; top: 9px; background: #4d4d4d; border-radius: 50%;
}

.collection-wrap{ margin-top: 80px; border-top: 2px solid #000; padding-top: 20px;}

.collection .slick-wrap{position: relative;}
.collection .slick img{border-radius: 10px; }
.collection .slick .slick-list{margin: 0 -15px;}
.collection .slick .slick-slide{margin: 0 15px; cursor: pointer;}
.collection .slick .slick-dots{width: 100%; position: absolute; left: 0;  bottom: -64px;text-align: center;}
.collection .slick .slick-dots li + li{margin-left: 10px;}
.collection .slick .slick-dots .slick-active button{background: #00ada9;}
.collection .slick .slick-dots button{font-size: 0; width: 10px; height: 10px; background: #d9d9d9;  border-radius: 50%;}
.collection .control{display: flex; position: absolute; left: 0; top: 50%; transform: translateY(-50%);  z-index: 10; width: 100%;}
.collection .control button{position: absolute; left: 10px; top: 50%; transform: translateY(-50%);}
.collection .control button.next{right: 10px; left: auto;}

.collection .slick-txt{padding-top: 91px;}
.collection .slick-txt p{font-size: 18px; color: #4d4d4d; font-weight: 500;}

.collection .titLv{border-bottom: 2px solid #000; padding-bottom: 30px; margin-bottom: 2rem !important;}
.collection .video .video_bx{grid-template-columns: repeat(3, 1fr); gap: 20px;}

@media (max-width:1440px) {
  .collection-txt{gap: 20px;}
  .collection .demo-link-wrap{right: 15px; top: 50%; }
  .collection-txt > div strong{max-width: 400px; font-size: 28px;}
}

@media (max-width:991px) {
  .collection{width: calc(100% - 300px); margin-top: 0;}
  .collection-bx a{font-size: 16px; padding: 0 10px; width: auto;}
  .collection-txt img{width: 90px;}
  .collection-txt > div em strong{font-size: 16px;}
  .collection-txt > div em strong::before{top: 2px;}
  .collection-txt > div strong{font-size: 20px; margin-top: 0; max-width: 200px;}
  .collection-txt > div span{font-size: 18px; max-width: 200px;}
  .collection-txt > div em{font-size: 16px; padding-top: 5px;}
  .collection .details-bx{gap: 15px;}
  .collection .details-bx > div{padding: 0 15px; height: 90px;}
  .collection .details-bx > div strong{font-size: 20px;}
  .collection .details-bx > div span{font-size: 16px;}

  .collection .demo-link-wrap a{font-size: 16px; height: 40px;}
  .collection .demo-link-bx{padding: 15px;}
  .collection .demo-link-bx a{font-size: 16px; height: 35px;}
  .collection .demo-link-bx ul li{font-size: 16px;}

  .collection .control button img{width: 30px; height: 30px;}
  .collection .slick .slick-dots{bottom: -45px;}
  .collection .slick-txt p{font-size: 16px;}

  .collection .video .video_bx a img{height: 150px;}
 }

 @media (max-width:760px) {
  .collection{width: 100%;}
  .collection .demo-link-wrap{visibility: hidden; opacity: 0; transform: translate(20px , -50%); transition: all 0.3s ease;}
  .collection .demo-link-wrap.active{visibility: visible; opacity: 1; right: 15px; transform: translate(-50px , -50%);}
  .collection .demo-link-wrap a{font-size: 14px; height: 35px;}
  .collection .demo-link-bx{padding: 10px;}
  .collection .demo-link-bx a{width: 100%; font-size: 14px; height: 30px; white-space: nowrap; padding: 0 10px;}
  .collection .demo-link-bx p{font-size: 13px;}
  .collection .demo-link-bx ul{padding-left: 0;}
  .collection .demo-link-bx .short_cut{padding: 15px 0;}
  .collection .demo-link-bx ul li{padding-left: 10px; font-size: 14px;}
  .collection .demo-link-bx ul li::before{width: 4px; height: 4px; top: 8px;}

  .collection-btn a.active img{transform: rotate(180deg);}

  .collection-wrap{width: 100%; margin-top: 30px;}
  .collection-btn{display: block;}
  .collection-bx{flex-direction: column; align-items: flex-start;}
  .collection-txt{gap: 15px;}
  .collection-txt img{width: 70px;}
  .collection-txt > div strong{font-size: 18px; max-width: 100%;}
  .collection-txt > div span{font-size: 16px; max-width: 100%}
  .collection-txt > div em{font-size: 14px;}
  .collection-txt > div em strong{font-size: 16px;}

  .collection .details-bx{margin-top: 30px;}
  .collection .details-bx > div{flex: 1; padding: 0 10px;}
  .collection .details-bx > div strong{font-size: 18px;}
  .collection .details-bx > div span{font-size: 14px;}

  .collection .slick-txt{padding-top: 80px;}
  .collection .slick-txt p{font-size: 14px;}

  .collection .titLv{padding-bottom: 15px;}
  .collection .video .video_bx{grid-template-columns: repeat(2, 1fr);}
  .collection .video .video_bx a img{height: auto;}
 }

/* 솔루션마켓 신청정보입력 */
.entry{padding-top: 100px;}

@media (max-width:991px) {
    .entry{padding-top: 60px;}
}

/* 솔루션마켓 신청완료 */
.perfect{margin-top: 100px; background: #f6f6f6; padding: 50px 0; text-align: center; border-radius: 20px;}
.perfect img{display: inline-block; object-fit: cover;}
.perfect .perfect-txt{padding: 35px 0 50px;}
.perfect .perfect-txt strong{display: block; font-size: 24px; font-weight: 700; color: #005bac;}
.perfect .perfect-txt p{font-size: 18px; display: inline-block; color: #4d4d4d; font-weight: 500; padding-top: 3px; line-height: 1.2;}

.perfect .mode{padding: 20px 30px; border: 1px solid #121212; border-width: 2px 0 1px 0; max-width: 576px;
margin: 0 auto 30px; text-align: left;}
.perfect .mode ul li{font-size: 18px; padding-left: 15px; position: relative; display: flex;}
.perfect .mode ul li + li{margin-top: 5px;}
.perfect .mode ul li::before{content: ''; width: 6px; height: 6px; background: #c4c4c4;
position: absolute; left: 0; top: 11px; border-radius: 50%;}
.perfect .mode ul li strong{color: #4d4d4d; font-weight: 700; min-width: 106px; display: inline-block;}
.perfect .mode ul li span{color: #121212; font-weight: 500; position: relative; padding-right: 5px; margin-right: 5px;}
.perfect .mode ul li > div span::after{content: ''; background: #121212; width: 1px; height: 17px;
position: absolute; right: -2px; top: 2px;}
.perfect .mode ul li > div span:last-child{padding-right: 0; margin-right: 0;}
.perfect .mode ul li > div span:last-child::after{display: none;}

@media (max-width:991px) {
  .perfect{padding: 40px 0; margin-top: 60px;}
  .perfect img{width: 120px;}
  .perfect .perfect-txt{padding: 25px 0 30px;}
  .perfect .perfect-txt strong{font-size: 20px;}
  .perfect .perfect-txt p{font-size: 16px;}

  .perfect .mode{padding: 15px; margin: 0 auto 20px;}
  .perfect .mode ul li{font-size: 16px;}
  .perfect .mode ul li::before{top: 10px;}
}

@media (max-width:760px) {
  .perfect{padding: 20px;}
  .perfect img{width: 80px;}
  .perfect .perfect-txt{padding: 15px 0 20px;}
  .perfect .perfect-txt strong{font-size: 18px;}
  .perfect .perfect-txt p{font-size: 14px;}

  .perfect .mode{padding: 10px; margin: 0 auto 10px;}
  .perfect .mode ul li{font-size: 14px; padding-left: 10px; flex-direction: column;}
  .perfect .mode ul li + li{margin-top: 8px;}
  .perfect .mode ul li strong{min-width: auto;}
  .perfect .mode ul li::before{top: 9px; width: 4px; height: 4px;}
  .perfect .mode ul li > div{line-height: 1.4;}
  .perfect .mode ul li > div span::after{height: 14px;}
}

/* 솔루션마켓 이용안내 */
.usage-guide{background: #f6f6f6; border-radius: 20px; display: flex; justify-content: center; align-items: center;}
.usage-guide img{display: block; object-fit: cover; max-width: 100%;}
.usage-wrap p{color: #4d4d4d; font-size: 18px; font-weight: 500; padding-top: 60px; line-height: 1.2;}

@media (max-width:991px) {
  .usage-wrap p{font-size: 16px; padding-top: 40px;}
}

@media (max-width:760px) {
  .usage-wrap p{font-size: 14px; padding-top: 30px;}
}


/* 파트너_홍보자료 */
.promote-tab{display: flex; justify-content: center; gap: 20px; padding-bottom: 60px;}
.promote-tab a{padding: 0 40px; height: 40px; display: flex; justify-content: center; align-items: center;
background: #efefef; border-radius: 50px; font-size: 18px; font-weight: 500; color: #4d4d4d;}
.promote-tab a.active{background: #121212; color: #fff;}

.promote-bx{display: grid; gap: 20px 18px; grid-template-columns: repeat(4, 1fr); margin: 60px 0;}
.promote-bx a{transition: all .5s;  min-width: 0;}
.promote-bx a .promote-item{padding: 20px; height: 233px;}
.promote-bx a{border: 1px solid #e0e0e0; background: #fff; border-radius: 10px; flex: 1;}
.promote-bx a .promote-item > div{height: 46px; display: flex; align-items: center;}
.promote-bx a .promote-item img{display: block; margin: 0 auto; max-height: 46px;}
.promote-bx.v2 a .promote-item img{max-height: 63px;}
.promote-bx a .promote-item strong{color: #121212; width: 100%;  font-size: 24px; font-weight: 700; padding-top: 17px; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; display: block;}
.promote-bx a .promote-item p{color: #4d4d4d; font-size: 18px; font-weight: 500; line-height: 1.4; padding-top: 15px;
display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: keep-all;}
.promote-bx a > em{background: #000; font-size: 18px; transition: all .5s; display: flex; height: 46px; border-radius: 0 0 10px 10px; justify-content: center; align-items: center; color: #fff; background: #999;}
.promote-bx a:hover{background: #f7f7f7; transition: all .5s; text-decoration: none;}
.promote-bx a:hover > em{background: #000; transition: all .5s;}

.promote-bx .promote-ex{height: auto !important; gap: 20px;}
.promote-bx .promote-ex em{padding: 0 10px; border: 1px solid #4d4d4d; border-radius: 100px;
display: inline-block; height: 27px; line-height: 27px; color: #4d4d4d; font-weight: 500; background: #fff;}
.promote-bx .promote-ex img{margin: 0 !important;}
.promote-txt{overflow: hidden;}
.promote-txt strong{padding-top: 5px !important;}
.promote-bx.v2 .promote-item{height: 200px !important;}
.promote-bx.v2 a .promote-item p{-webkit-line-clamp: 2;}
.promote-bx.v2 a .promote-item span{font-size: 18px; color: #4d4d4d; font-weight: 500;}

@media (max-width:991px) {
  .promote-bx{grid-template-columns: repeat(2, 1fr); margin: 40px 0;}
  .promote-bx a .promote-item{height: 190px;}
  .promote-bx a .promote-item > div{height: 40px;}
  .promote-bx a .promote-item strong{font-size: 20px;}
  .promote-bx a .promote-item p{font-size: 16px;}
  .promote-bx a em{font-size: 16px; height: 40px;}
  .promote-txt em{font-size: 15px !important;}

  .promote-tab{gap: 15px; padding-bottom: 40px;}
  .promote-tab a{padding: 0 30px; font-size: 16px; height: 35px;}

  .promote-bx .promote-ex{gap: 15px;}
  .promote-bx.v2 .promote-item{height: 180px !important;}
}

@media (max-width:760px) {
  .promote-bx{grid-template-columns: 1fr; margin: 30px 0 20px;}
  .promote-bx a .promote-item{height: auto; padding: 15px;}
  .promote-bx a .promote-item > div{height: 40px;}
  .promote-bx a .promote-item strong{font-size: 18px;}
  .promote-bx a .promote-item p{font-size: 14px;}
  .promote-bx a em{font-size: 14px; height: 35px;}

  .promote-bx.v2 .promote-item{height: auto !important;}
  .promote-tab{gap: 0; padding-bottom: 30px;}
  .promote-tab a{padding: 0 8px; border-radius: 10px; flex: 1; 
  height: 30px; font-size: 13px;}
  .promote-tab a + a{margin-left: 10px;}

  .promote-bx .promote-ex img{display: block; width: 55px;}
  .promote-txt em{font-size: 13px !important; padding: 0 8px !important; height: 23px !important; line-height: 23px !important;}
}

/* 파트너_홍보자료상세 */ 
.promote-view .details{display: flex; gap: 50px;}
.promote-view .details > img{display: block; border-radius: 10px; object-fit: cover; max-width: 100%; height: 334px;}
.promote-view .details-txt{width: 100%;}
.promote-view .details-txt img{display: block; max-height: 35px;}
.promote-view .details-txt > strong{font-size: 40px; color: #121212; font-weight: 700; display: block; padding-top: 15px;
line-height: 1.2;}
.promote-view .details-txt p{font-size: 18px; font-weight: 500; color: #4d4d4d; padding-top: 10px;}

.promote-view .details-bx{display: flex; gap: 20px; padding-top: 58px;}
.promote-view .details-bx > div{background: #efefef;  height: 103px; padding: 0 40px; border-radius: 10px; display: flex; flex-direction: column; 
align-items: center; justify-content: center;}
.promote-view .details-bx > div strong{font-size: 24px; color: #000; font-weight: 500;}
.promote-view .details-bx > div span{color: #4d4d4d; font-size: 18px; font-weight: 500;}
.promote-view .details-view{padding: 20px; border-top: 2px solid #000; margin: 80px 0;}
.promote-view .details-view p{font-size: 18px; font-weight: 500; color: #4d4d4d;}
.promote-view .details-view ul{padding-top: 33px;}
.promote-view .details-view ul li{font-size: 18px; font-weight: 500; color: #4d4d4d;}
.promote-view .titLv{border-bottom: 2px solid #000; padding-bottom: 30px; margin-bottom: 2rem !important;}
.promote-view .titLv p{color: #666; font-size: 18px; font-weight: 300; padding-left: 15px; margin-left: 15px;
position: relative;}
.promote-view .titLv p::before{content: ''; background: #c4c4c4; width: 1px; height: 17px;
position: absolute; left: 0; top: 6px;}

.product .product-bx{display: grid; gap: 100px; grid-template-columns: repeat(4, 1fr);}
.product .product-bx > div{width: 100%; height: 383px; min-width: 0; display: flex; flex-direction: column;}
.product .product-bx > div img{display: block; width: 100%;  height: 210px; object-fit: cover; border-radius: 10px;}
.product .product-bx > div strong{display: block; font-size: 24px; color: #121212; font-weight: 700; padding-top: 11px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;}
.product .product-bx > div p{font-size: 18px; color: #4d4d4d; font-weight: 500; line-height: 1.4; padding-top: 9px;
display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.product .product-bx > div a{border: 1px solid #000; height: 46px; display: flex;
justify-content: center; align-items: center; border-radius: 5px; margin-top: auto; transition: all .3s;}
.product .product-bx > div a:hover{background: #000; transition: all .3s; color: #fff;}


.video{padding: 80px 0;}
.video .video_bx{display: grid; gap: 100px; grid-template-columns: repeat(4, 1fr);}
.video .video_bx a{display: flex; flex-direction: column;}
.video .video_bx a img{display: block; border-radius: 10px; width: 100%; height: 210px; object-fit: cover;}
.video .video_bx a span{display: block; margin-top: 15px; font-size: 18px; line-height: 1.2; font-weight: 500; 
color: #4d4d4d; position: relative; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.video .video_bx a span::before{content: ''; width: 0%; height: 100%; background: #000;
position: absolute; left: 0; top: 0; z-index: -1; transition: all .4s;}
.video .video_bx a:hover span{color: #fff; transition: all .4s; }
.video .video_bx a:hover span::before{width: 100%; transition: all .4s;}

.download .download-bx ul li{display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #c4c4c4;}
.download .download-bx ul li:first-child{padding-top: 0;}
.download .titLv{margin-bottom: 1rem !important;}
.download .download-bx ul li .icon-bx{display: flex; align-items: center; min-width: 86px; position: relative;}
.download .download-bx ul li .icon-bx::after{content: ''; width: 1px; height: 20px; background: #c4c4c4;
position: absolute; right: 0; top: 4px;}
.download .download-bx ul li .icon-bx em{font-size: 18px; font-weight: 500; padding-left: 2px;}
.download .download-bx ul li .icon-bx em.link{color: #00ada9;}
.download .download-bx ul li .icon-bx em.file{color: #f39b2b;}
.download .download-bx ul li span{color: #121212; font-size: 18px; font-weight: 500; padding-left: 20px;
display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.download .download-bx ul li a{padding: 0 20px; height: 40px; border-radius: 5px; border: 1px solid #000;
color: #121212; font-weight: 500; font-size: 18px; display: flex; align-items: center; justify-content: center; 
margin-left: auto; transition: all .2s; white-space: nowrap;}
.download .download-bx ul li a:hover{background: #000; color: #fff; transition: all .2s;}

.common-btn01{display: flex; justify-content: center; padding-top: 30px;}
.common-btn01 a{padding: 0 10px; width: 160px; height: 46px; display: flex; align-items: center; justify-content: center;
background: #000; border-radius: 50px; color: #fff; transition: all .2s; font-size: 18px; font-weight: 500;}

.common-btn01 a:hover{background: #00ada9; transition: all .2s;}

@media (max-width:1440px) {
  .promote-view .details-txt p br{display: none;}
  .promote-view .details-bx > div{padding: 0 30px;}
  .promote-view .titLv{padding-bottom: 15px;}
  .promote-view .details > img{width: 470px;}

  .product .product-bx{gap: 50px; grid-template-columns: repeat(3,1fr);}
  .product .product-bx > div{width: 100%;}
  .product .product-bx > div p br{display: none;}

  .video .video_bx{gap: 50px; grid-template-columns: repeat(3,1fr);}
  .video .video_bx a img{width: 100%;}
}

@media (max-width:991px) {
  .promote-view .details{flex-direction: column; gap: 20px;}
  .promote-view .details > img{width: 100%; height: auto;}
  .promote-view .details-txt > strong{font-size: 30px; padding-top: 10px;}
  .promote-view .details-txt p{font-size: 16px;}
  .promote-view .details-bx{padding-top: 30px;}
  .promote-view .details-bx > div{padding: 0 20px; height: 90px;}
  .promote-view .details-bx > div strong{font-size: 20px;}
  .promote-view .details-bx > div span{font-size: 16px;}

  .promote-view .details-view{margin: 50px 0 30px; padding: 15px;}
  .promote-view .details-view p{font-size: 16px;}
  .promote-view .details-view p br{display: none;}
  .promote-view .details-view ul{padding-top: 20px;}
  .promote-view .details-view ul li{font-size: 16px;}
  .promote-view .titLv p{font-size: 16px; padding-left: 10px; margin-left: 10px;}

  .product .product-bx{gap: 30px; grid-template-columns: repeat(2,1fr);}
  .product .product-bx > div{height: 350px;}
  .product .product-bx > div strong{font-size: 20px;}
  .product .product-bx > div p{font-size: 16px;}
  .product .product-bx > div a{font-size: 15px; height: 40px;}

  .video{padding: 50px 0;}
  .video .video_bx{gap: 30px; grid-template-columns: repeat(2,1fr);}
  .video .video_bx a span{font-size: 16px;}

  .download .download-bx ul li .icon-bx{min-width: 70px;}
  .download .download-bx ul li .icon-bx em{font-size: 16px;}
  .download .download-bx ul li span{font-size: 16px; padding-right: 50px;}
  .download .download-bx ul li a{font-size: 16px; padding: 0 15px;
  height: 35px;}

  .common-btn01 a{width: 140px; font-size: 16px;}
}

@media (max-width:760px) {
  .promote-view .details{gap: 15px;}
  .promote-view .details-txt img{max-height: 25px;}
  .promote-view .details-txt > strong{font-size: 20px;}
  .promote-view .details-txt p{font-size: 14px;}

  

  .promote-view .details-bx{padding-top: 20px; gap: 15px;}
  .promote-view .details-bx > div{flex: 1; padding: 0 10px; text-align: center; }
  .promote-view .details-bx > div strong{font-size: 18px; line-height: 1.2;}
  .promote-view .details-bx > div span{font-size: 14px;}
  .promote-view .details-view{margin: 40px 0 20px; padding: 10px;}
  .promote-view .details-view p{font-size: 14px;}
  .promote-view .details-view ul li{font-size: 14px;}
  .promote-view .titLv p{font-size: 14px; padding-top: 5px; padding-left: 0; margin-left: 0;}
  .promote-view .titLv p::before{display: none;}

  .product .product-bx{gap: 15px;}
  .product .product-bx > div{height: 290px;}
  .product .product-bx > div img{height: 150px;}
  .product .product-bx > div strong{font-size: 18px;}
  .product .product-bx > div p{font-size: 14px;}
  .product .product-bx > div a{font-size: 14px; height: 35px;}

  .video{padding: 30px 0;}
  .video .video_bx{gap: 15px;}
  .video .video_bx a img{height: 150px;}
  .video .video_bx a span{font-size: 14px; margin-top: 10px;}
  
  .download .titLv{flex-direction: column; align-items: flex-start !important;}
  .download .download-bx ul li .icon-bx{min-width: 55px;}
  .download .download-bx ul li .icon-bx::after{top: 3px; height: 15px;}
  .download .download-bx ul li .icon-bx img{display: block; width: 15px;}
  .download .download-bx ul li .icon-bx em{font-size: 14px;}
  .download .download-bx ul li span{font-size: 14px; padding-left: 10px;}
  .download .download-bx ul li a{font-size: 14px; padding: 0 5px;}

  .common-btn01{padding-top: 20px;}
  .common-btn01 a{width: 100px; font-size: 14px; height: 40px;}
}

/* 홍보자료관리 */
#confirmModal{display: none; position: fixed; top: 0; left: 0;
width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999;}

.management form > p{font-size: 18px; display: flex; justify-content: flex-end;}
.management form > p span{padding-left: 3px;}
.management .skinTb > tbody > tr > td img{margin: 0 auto; width: 300px; object-fit: cover;}
.management .skinTb > tbody > tr > td .management-info strong{font-size: 22px; font-weight: 700; color: #000;}
.management .skinTb > tbody > tr > td .management-info p{padding-bottom: 10px; line-height: 1.2;}
.management .skinTb > tbody > tr > td .management-info a{color:#096bc9;}
.management .skinTb > tbody > tr > td .management-info a:hover{text-decoration: underline !important; text-underline-position: under;}
.management .skinTb > tbody > tr > td .enroll{display: flex; flex-direction: column; line-height: 1.4;}
.management .skinTb > tbody > tr > td .switch{position: relative; display: inline-block; width: 48px; height: 18px;}
.management .skinTb > tbody > tr > td .switch input[type="checkbox"]{display: none;}
.management .skinTb > tbody > tr > td .slider{position: absolute; cursor: pointer; left: 0; top: 0; right: 0; bottom: 0; height: 18px; background: #ccc; border-radius: 24px; transition: all .3s;}
.management .skinTb > tbody > tr > td .slider::before{content: ''; position: absolute; left: 4px; top: 2px; background: #fff; width: 14px; height: 14px; border-radius: 50%; transition: all .3s;}
.management .skinTb > tbody > tr > td .switch input:checked + .slider{background: #019995;}
.management .skinTb > tbody > tr > td .switch input:checked + .slider::before{transform: translateX(26px);}
.management .skinTb > tbody > tr > td .actions{display: flex; justify-content: center; gap: 10px;}
.management .skinTb > tbody > tr > td .actions a{background: #6c757d; padding: 0 15px; height: 35px; border-radius: 5px; color: #fff;
display: flex !important; align-items: center;}


.management .common-btn{justify-content: flex-end;}
.management .skinTb .skinTb-td .offer-bx{display: flex; align-items: center;}
.management .skinTb .skinTb-td .offer-bx input[type="radio"] + label{padding: 0 20px 0 5px;}

#sub.partner{padding-top: 0;}

@media (max-width:991px) {
  .management form > p{font-size: 16px;}
  .management .skinTb > tbody > tr > td .management-info strong{font-size: 16px;}
  .management .skinTb > tbody > tr > td .management-info p{font-size: 14px;}
  .management .skinTb > tbody > tr > td .management-info a{font-size: 14px;}
  .management .skinTb > tbody > tr > td .enroll{ white-space: nowrap;}
  .management .skinTb > tbody > tr > td .actions a{padding: 0 10px; white-space: nowrap; font-size: 14px; height: 30px;}

  .management .skinTb .skinTb-td .offer-bx{font-size: 15px;}
  .management .skinTb .skinTb-td .offer-bx input[type="radio"] + label{padding: 0 15px 0 5px;}
}

@media (max-width:760px) {
  .management form > p{font-size: 14px; justify-content: flex-start;}
  .management .skinTb .skinTb-td .offer-bx{font-size: 14px;}
  .management .skinTb .skinTb-td .offer-bx input[type="radio"]{width: 14px; height: 14px;}
}

/* 카테고리설명글 */
.solution .space{display: flex; align-items: center; padding: 20px 30px; border-radius: 5px; border: 1px solid #e0e0e0;}
.solution .space + .space{margin-top: 30px;}
.solution .space .box{width: 100px; height: 100px; flex-shrink: 0; background: #00ada9; display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.solution .space .space_txt{padding-left: 20px;}
.solution .space .space_txt strong{font-size: 24px; color: #121212; font-weight: 700;}
.solution .space .space_txt p{font-size: 18px; color: #4d4d4d; font-weight: 500; line-height: 1.3;}

@media (max-width:991px) {
  .solution .space .box{width: 80px; height: 80px;}
  .solution .space .box img{display: block; width: 45px;}
  .solution .space .space_txt strong{font-size: 20px;}
  .solution .space .space_txt p{font-size: 16px; padding-top: 5px;}
}

@media (max-width:760px) {
  .solution .space{padding: 15px;}
  .solution .space .box{width: 70px; height: 70px;}
  .solution .space .box img{width: 35px;}
  .solution .space + .space{margin-top: 20px;}
  .solution .space .space_txt{padding-left: 15px;}
  .solution .space .space_txt strong{font-size: 16px;}
  .solution .space .space_txt p{font-size: 13px;}
  .solution .space .space_txt p br{display: none;}
}

/* 포토게시판 */
.boGallery{display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 44px; border-bottom: none;}
.boGallery .thumbnail{background: #f3f3f3; width: 100%; max-width: 375px; height: 375px; margin: 0 auto; overflow: hidden;}
.boGallery .thumbnail .centered{width: 100%; height: 100%; display: flex; align-items: center;}
.boGallery .thumbnail .centered img{width: auto; height: auto; margin: 0 auto;}
.boGallery .thumbnail img{max-width: 100%; max-height: 100%; width: auto; height: auto;}
.boGallery >li:nth-child(n){width: auto; margin: 0;}
.boGallery.photo .boGallery-sbj{font-size: 18px; font-weight: 500; padding: 13px 15px 0px;  height: 8.5rem;  -webkit-line-clamp: 3;}
.boGallery.photo time{padding: 0 15px 7px;}
.boGallery.photo .boGallery-sbj em{font-size: 16px; font-weight: 400; color: #7f7f7f;}
.boGallery.photo .boGallery-sbj span{display: block; padding-top: 10px; height: 8.5rem;}

@media (max-width:1440px) {
  .boGallery .thumbnail{height: 250px;}
  .boGallery .thumbnail .centered{width: 100%; height: 250px;}
  .boGallery.photo .boGallery-sbj{height: auto; width: 100%;}
  .boGallery.photo .boGallery-sbj span{padding-top: 5px; height: 8.5rem}
}

@media (max-width:991px) {
  .boGallery{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
  .boGallery.photo .boGallery-sbj{text-overflow: ellipsis; overflow: hidden;}
  .boGallery.photo .boGallery-sbj span{font-size: 16px; height: 8rem;}
  .boGallery.photo .boGallery-sbj em{font-size: 14px;}
}

@media (max-width:760px) {
   .boGallery{display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
   .boGallery .thumbnail{height: 200px;}
   .boGallery .thumbnail .centered{width: 100%; height: 200px}
   .boGallery.photo .boGallery-sbj{width: 100%; font-size: 14px;}
   .boGallery.photo .boGallery-sbj span{font-size: 15px;}
    .boGallery.photo .boGallery-sbj em{font-size: 13px;}
    .boSrchArea form{flex-wrap: wrap; width: 100%;} 
    .boSrch .skinIptTxt{width: 100% !important;  flex: 1 100%;  max-width: initial;}
}


/* 프로그램 게시판 */
.program_board {border-top:2px solid #333}
.program_board .list_box {border-bottom:1px solid #e1e1e1;} 
.program_board .list_box .link {display:flex;align-items:center;justify-content:space-between;padding:20px 0;position:relative}
.program_board .list_box .link:hover h2{text-decoration: underline; text-underline-position: under;}
.program_board .list_box .program_item {position:relative; display: flex; flex: 1; min-width: 0;} 
.program_board .list_box .program_item > img{display: block; width: 350px; height: 200px; object-fit: cover;}
.program_board .list_box .program_item h2{display: inline-block; max-width: 90%; white-space: nowrap; text-overflow: ellipsis; margin:5px 0 30px 0;font-size:22px;font-weight:700;overflow:hidden}
.program_board .list_box .program_item .board_date{display: inline-flex; flex-direction: column;}
.program_board .list_box .program_item .board_date li{display:inline-flex; position:relative; font-weight: 500;}
.program_board .list_box .program_item .board_date li span{color: #767676; white-space: nowrap; position: relative; padding-right: 10px; margin-right: 10px;}
.program_board .list_box .program_item .board_date li span::before{content: ''; width: 2px; height: 14px; background: #767676;
position: absolute; right: 0; top: 6px;}
.program_board .list_box .program_item .board_date li strong{font-weight: 500; line-height: 1.5;}
.program_board .list_box .program_item .board_date li:last-child {margin-right:0}
.program_board .list_box .program_item .board_date li:last-child::before{display: none;}
.program_board .list_box .program_item .board_date span {font-weight:600;}
.program_board .list_box .program_item .board_info {position:absolute;right:30px;bottom:0}
.program_board .list_box .program_txt{padding-left: 40px; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;}
.program_board .list_box .status {display:flex;column-gap:10px; flex-shrink:0;}
.program_board .list_box .status em{display:inline-flex;align-items:center;justify-content:center; background: #848690; width:80px;height:80px;text-align:center;font-weight:700;line-height:40px;border-radius:5px; color: #fff; vertical-align:top}
.program_board .list_box .status em:last-child {margin-bottom:0}
.program_board .list_box .status em.middle{background: #00ada9;}
.program_board .list_box .status em.start{background: #121212;}

@media (max-width: 991px) {
  .program_board .list_box .program_item h2{margin: 4px auto 15px 0; font-size: 20px;}
  .program_board .list_box .status em{width: 72px; height: auto; font-size: 15px; line-height: 36px; font-weight: 600;}
  .program_board .list_box .program_txt{padding-left: 20px;}
  .program_board .list_box .program_item > img{width: 250px; height: 180px;}
}

@media (max-width: 760px) {
    .program_board{padding-top: 15px;}
    .program_board .list_box + .list_box{margin-top: 10px;}
    .program_board .list_box .link{flex-direction: column; padding: 16px 15px; border: 1px solid #ddd;  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); border-radius: 6px;}
    .program_board .list_box .program_item{flex-direction: column; align-items: center;}
    .program_board .list_box .program_item h2{margin: 15px 0 12px 0; font-size: 16px; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; font-size: 18px; white-space: normal;  -webkit-box-orient: vertical;}
    .program_board .list_box .status{width: 100%; margin-top: 10px; padding: 0; height: auto;}
    .program_board .list_box .status em{width: 100%;}
    .program_board .list_box .program_item .board_date li{gap: 0; font-size: 14px;}
    .program_board .list_box .program_txt{padding-left: 0; width: 100%;}
    .program_board .list_box .program_item .board_date li span{padding-right: 8px; margin-right: 8px;}
    .program_board .list_box .program_item .board_date li span::before{top: 5px; height: 12px;}
    .program_board .list_box .program_item .board_date li strong{word-break: keep-all;}
    .program_board .list_box .program_item > img{width: 100%; height: auto;}
}

@media (max-width: 360px) {
  .program_board .list_box .program_item > img{height: 180px;}
}

/* 회원유형선택 */
.member_wrap{display: flex; justify-content: center; gap: 40px;}

.member_tab{display: flex; align-items: center; width: 320px; position: relative;}
.member_tab.v2{width: 256px;}
.member_tab::before{content: ''; background: url(/page/keli/images/sub/member_arrow.png)no-repeat; width: 15px; height: 24px;
position: absolute; right: 0;}
.member_tab > div{position: relative; display: flex; width: 80px; height: 80px; justify-content: center; align-items: center; background: #efefef; border-radius: 50%;}
.member_tab > div img{display: block; object-fit: cover;}
.member_tab > div.active{background: #00ada9;}
.member_tab span{padding-left: 20px; font-size: 18px; color: #4d4d4d; font-weight: 500; line-height: 1.2;}
.member_tab:last-child::before{display: none;}

.member_title{padding-bottom: 60px;}
.member_title h3{font-size: 40px; font-weight: 700; color: #121212; text-align: center;}

.member-bx{display: flex; gap: 110px; padding-top: 60px;}
.member-bx a{display: flex; flex: 1; gap: 30px; flex-direction: column; padding-top: 33px; align-items: center; width: 387px; border-radius: 10px; border: 1px solid #e0e0e0;}
.member-bx a strong{font-size: 24px; color: #121212; font-weight: 700; }
.member-bx a span{font-size: 18px; color: #4d4d4d; font-weight: 500;}
.member-bx a em{display: flex; transition: all .3s; align-items: center; justify-content: center; font-size: 18px; height: 53px; 
background: #999; color: #fff; width: 100%; border-radius: 10px;}
.member-bx a:hover em{background: #e05d00; transition: all .3s;}

@media (max-width: 1440px) {
  .member_title{padding-bottom: 35px;}
  .member_wrap{gap: 20px;}
  .member_tab{width: auto; flex: 1;}
  .member_tab > div{width: 60px; height: 60px; flex-shrink: 0;}
  .member_tab > div img{width: 45px;}
  .member_tab span{font-size: 16px; padding-left: 10px; line-height: 1.2;}

  .member-bx{gap: 50px;}
}

@media (max-width: 1024px) {
  .member_title h3{font-size: 32px;}

  .member_wrap{gap: 15px;}
  .member_tab::before{width: 10px; height: 17px; background-size: cover;}
  .member_tab span{max-width: 100px; word-break: keep-all;}

  .member-bx{gap: 30px;}
  .member-bx a{gap: 20px; padding-top: 20px;}
  .member-bx a strong{font-size: 22px;}
  .member-bx a img{width: 100px;}
  .member-bx a span{font-size: 16px;}
  .member-bx a em{font-size: 16px; height: 50px;}
}

@media (max-width: 760px) {
  .member_title{padding-bottom: 10px;}
  .member_title h3{font-size: 22px;}

  .member_wrap{flex-wrap: wrap;}
  .member_tab{flex: 1 33%;}
  .member_tab span{font-size: 14px;}
  .member_tab > div{width: 50px; height: 50px;}
  .member_tab > div img{width: 40px;}

  .member-bx{padding-top: 40px; flex-direction: column;}
  .member-bx a{width: 100%;}
  .member-bx a strong{font-size: 18px;}
  .member-bx a img{width: 90px;}
  .member-bx a span{font-size: 14px;}
  .member-bx a em{font-size: 14px; height: 45px;}
}

/* 약관동의 */
.clause{padding-top: 98px;}
.clause .article{color: #4d4d4d; overflow: auto; border: 1px solid #e0e0e0; height: 228px; padding: 20px;}
.clause .check-bx{display: flex; align-items: center; justify-content: space-between;}
.clause .check-bx p{font-size: 18px; color: #4d4d4d; word-break: keep-all; line-height: 1.2; font-weight: 500;}
.clause .article + .check-bx{margin-top: 18px;}
.clause .article .skinTb >tbody >tr >td{background: #fff;}
.clause .check-bx > div{display: flex; align-items: center;}
.clause .check-bx > div label{font-size: 18px; color: #4d4d4d; font-weight: 500; padding-left: 10px; white-space: nowrap;}
.clause .check-bx > div input[type='checkbox']{width: 18px; height: 18px; accent-color: #00ada9;}
.clause .terms + .terms{margin-top: 60px;}
.clause .join{background: #f6f6f6; border-radius: 5px; padding: 30px 0; text-align: center;}
.clause .join p{color: #4d4d4d; font-size: 18px; font-weight: 500; display: inline-block; line-height: 1.3;}
.clause .join .input-bx{display: flex; align-items: center; justify-content: center; padding-top: 24px;}
.clause .join .input-bx .join-txt{border-radius: 5px; font-size: 18px; border: 1px solid #c4c4c4; width: 116px; height: 46px; padding-left: 10px;}
.clause .join .input-bx em{padding: 0 10px;}
.clause .join .input-bx button{display: flex; flex-shrink: 0; margin-left: 10px; justify-content: center; align-items: center; color: #fff; 
height: 46px; padding: 0 20px; color: #fff; border-radius: 5px; background: #019995; font-size: 18px; font-weight: 500;}
.common-btn{display: flex; gap: 20px; justify-content: center; padding-top: 20px;}
.common-btn a{padding: 0 20px; height: 46px; font-size: 18px; display: flex; align-items: center; justify-content: center; border-radius: 5px;
border: 1px solid #000; transition: all .2s;}
.common-btn a:hover{background: #000; transition: all .2s; color: #fff;}

@media (max-width: 1440px) {
  .clause{padding-top: 58px;}
  .common-btn a{padding: 0 15px; font-size: 16px; height: 40px;}
}

@media (max-width: 991px) {
  .clause .check-bx p{font-size: 16px;}
  .clause .check-bx > div label{font-size: 16px;}
  .clause .check-bx > div input[type='checkbox']{width: 16px; height: 16px;}
  .clause .terms + .terms{margin-top: 40px;}

  .clause .join{padding: 25px 0;}
  .clause .join p{font-size: 16px;}
  .clause .join .input-bx .join-txt{font-size: 16px; height: 40px;}
  .clause .join .input-bx button{font-size: 16px; height: 40px;}

  
}

@media (max-width: 760px) {
  .clause{padding-top: 28px;}
  .clause .check-bx p{font-size: 13px;}
  .clause .article{font-size: 14px; padding: 15px;}
  .clause .article + .check-bx{margin-top: 10px;}
  .clause .check-bx{justify-content: flex-start; gap: 20px;}
  .clause .check-bx > div input[type='checkbox']{width: 13px; height: 13px;}
  .clause .check-bx > div label{font-size: 13px; padding-left: 5px;}

  .clause .join{padding: 20px;}
  .clause .join .input-bx em{padding: 0 5px;}
  .clause .join .input-bx .join-txt{width: 100%; height: 35px; font-size: 14px;}
  .clause .join .input-bx button{padding: 0 15px; height: 35px; font-size: 14px;}
  .clause .join p{font-size: 14px;}

  .common-btn{gap: 15px; padding-top: 15px;}
  .common-btn a{font-size: 14px; padding: 0 10px; height: 40px;}
}

/* 회원정보입력 */
.info-member{padding-top: 100px;}
.info-member .skinIptTxt{color: #000 !important;}
#sub .skinTb-th em{color: #ff0000; display: inline-block; vertical-align: middle;}
#sub .skinTb-td .common-bx button{margin-left: 10px; font-weight: 500; flex-shrink: 0;
display: inline-block; padding: 0 10px; height: 34px; line-height: 34px; border-radius: 5px; background: #000;
color: #fff;}
.skinColor-fmInfo{display: inline-flex; padding-top: 10px; line-height: 1.2; font-size: 1.6rem;}

.info-member .emailAddr .skinIptTxt{width: 20%;}
#sub .skinTb-td .common-bx > div + input, #sub .skinTb-td .common-bx input + input{margin-top: 10px;}
.ctrlFile input[type="button"] + .skinColor-fmInfo{padding-left: 20px;}
#sub .skinTb-td .radio-bx{display: flex; align-items: center; padding: 15px 0 0;}
#sub .skinTb-td .radio-bx input[type="radio"]{vertical-align: -2px;}
#sub .skinTb-td .radio-bx strong{font-size: 18px; font-weight: 700; color: #000; padding-right: 15px;}
#sub .skinTb-td .radio-bx > div label{padding: 0 10px 0 3px;}

/* 데모영상 */
.video-bx{width: 100%; height: 100vh; margin: 0;}
.video-bx embed{width: 100%; height: 100%; display: block;}

@media (max-width: 1440px) {
  .video-bx{height: 80vh;}
  #sub .skinTb-td .common-bx button + .skinColor-fmInfo,
  #sub .skinTb-td .skinIptPass + .skinColor-fmInfo,
  .ctrlFile input[type="button"] + .skinColor-fmInfo{padding-left: 0px; padding-top: 10px; line-height: 1.2;}
  .skinTb-data-resWrite .skinColor-fmInfo{margin-top: 0;}
}

@media (max-width: 991px) {
  .video-bx{height: 40vh;}
  .info-member{padding-top: 60px;}
}

@media (max-width: 760px) {
  #sub .skinTb-td .common-bx > div{display: flex;}
  #sub .skinTb-td .common-bx button{line-height: 33px;}
  .video-bx{height: 25vh;}
  .info-member .emailAddr .skinIptTxt{width: 30%;}
  .emailAddr .skinSelectBox{width: 29%;}
  .ctrlFile-fileTxt{display: inline-block; padding-top: 5px;}

  #sub .skinTb-td .radio-bx strong{font-size: 16px;}
  #sub .skinTb-td .radio-bx input[type="radio"]{vertical-align: -2px;}
  #sub .skinTb-td .radio-bx > div label{font-size: 14px;}

}

/* 가입완료 */
.completion{background: #f6f6f6; margin-top: 60px; border-radius: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; padding: 50px 0;}
.completion span{font-size: 24px; color: #121212; padding-bottom: 40px; line-height: 1.4;}
.completion strong{color: #005bac;}
.completion a{display: flex; align-items: center; justify-content: center; padding: 0 20px; height: 46px;
background: #000; color: #fff; border-radius: 5px; margin-top: 50px; transition: all .2s; font-size: 18px;}
.completion a:hover{background: #00ada9; transition: all .2s;}

@media (max-width: 991px) {
  .completion{padding: 40px 0; margin-top: 50px;}
  .completion span{font-size: 22px; padding-bottom: 40px;}
  .completion a{margin-top: 40px; font-size: 16px; padding: 0 15px;}
  .completion img{display: block; width: 160px;}
}

@media (max-width: 760px) {
  .completion{padding: 20px; border-radius: 15px; margin-top: 40px;}
  .completion span{font-size: 16px; padding-bottom: 30px;}
  .completion span br{display: none;}
  .completion img{width: 90px;}
  .completion a{font-size: 14px; padding: 0 10px; height: 40px; margin-top: 30px;}
}
    
/* 로그인 */
.login-bx{padding: 50px 0; background: #f6f6f6; border-radius: 20px; display: flex;}
.login{margin: 0 auto;}
.login .btn1{background: #000; margin-top: 20px; font-weight: 500; color: #fff; font-size: 18px; width: 100%; height: 46px; display: flex; justify-content: center; align-items: center; border-radius: 5px;}
.login fieldset{width: 100%; position: relative;}
.login .title h3{font-weight: 500; font-size: 24px; line-height: 1.4; color: #121212; display: block; text-align: center; padding-bottom: 40px;}

.login .id-bx + .password-bx{margin-top: 10px;}

.login input[type=text], 
.login input[type=password]{width: 100%; height: 46px; padding: 0 10px; font-size: 18px; background: #fff; text-align: center; border: 1px solid #d7d7d7; border-radius: 5px;}
.login input[type=checkbox]{width: 20px; height: 20px; display: inline-block; vertical-align: -4px; accent-color: #0030ba;}
.login input[type=checkbox] + label{font-size: 18px; color: #000; font-weight: 300; padding-left: 4px;}

.login fieldset div, .form2 fieldset div {position: relative;}
.login fieldset div:nth-of-type(2) label{font-weight: 500; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #a2a2a2;}
.login fieldset div:nth-of-type(3) label{font-weight: 500; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #a2a2a2;}

.login input[type=text]:focus + label, .login input[type=password]:focus + label, .login input[type=text].active + label, .login input[type=password].active + label, .recovery-wrap input[type=text]:focus + label, .recovery-wrap input[type=text].active + label, .form2 input[type=password]:focus + label, .form2 input[type=password].active + label {display: none;}

.login .join{padding-top: 10px; text-align: center; display: flex; gap: 10px;}
.login .join a{color: #121212; font-size: 18px; font-weight: 500; border-radius: 5px; height: 46px;
border: 1px solid #000; transition: all .2s; background: #fff; display: flex; justify-content: center; align-items: center; flex: 1; padding: 0 10px;}
.login .join a:hover{background: #00ada9; transition: all .2s; border-color: #00ada9; color: #fff;}

@media (max-width: 991px) {
  .login .title h3{font-size: 22px; padding-bottom: 30px;}
  .login .btn1{font-size: 16px; height: 40px;}
  .login .join a{font-size: 16px; padding: 0 5px; height: 40px;}
  .login-bx{padding: 40px 0;}
  .login input[type=text], 
  .login input[type=password]{height: 40px;}
}

@media (max-width: 760px) {
  .login{margin: 0; width: 100%;}
  .login .title h3{font-size: 16px;}
  .login input[type=text], 
  .login input[type=password]{font-size: 14px;}
  .login fieldset div:nth-of-type(2) label,
  .login fieldset div:nth-of-type(3) label{font-size: 14px;}
  .login-bx{padding: 20px; border-radius: 15px;}
  .login .btn1{font-size: 14px;}
  .login .join a{font-size: 14px;}
}

/* 비밀번호 변경 */
.common-icon{display: flex; align-items: center; gap: 20px; border: 1px solid #e0e0e0; padding: 20px 30px; border-radius: 5px;}
.common-icon .icon-bx{background: #999; border-radius: 50%; width: 100px; height: 100px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.common-icon > div p{color: #4d4d4d; font-weight: 500; font-size: 18px;}
.common-icon > div p + p{margin-top: 19px;}
.password-wrap{padding-top: 60px;}

@media (max-width: 991px) {
  .common-icon{padding: 20px;}
  .common-icon .icon-bx{width: 80px; height: 80px;}
  .common-icon .icon-bx img{display: block; width: 40px;}
  .common-icon > div p{font-size: 16px;}
  .common-icon > div p + p{margin-top: 10px;}
}

@media (max-width: 760px) {
  .common-icon{flex-direction: column; padding: 15px;}
  .common-icon .icon-bx{width: 70px; height: 70px;}
  .common-icon .icon-bx img{ width: 35px;}
  .common-icon > div p{font-size: 14px;}
  .common-icon > div p br{display: none;}

  .password-wrap{padding-top: 40px;}
}

/* 회원탈퇴 */
.withdrawal{padding-top: 60px;}
.withdrawal-bx{background: #f6f6f6; border-radius: 5px; padding: 45px 30px;}
.withdrawal-bx strong{font-size: 18px; color: #121212; font-weight: 700;}
.withdrawal-bx ul{padding-left: 16px;}
.withdrawal-bx ul li{font-size: 18px; font-weight: 500; color: #4d4d4d;}
.withdrawal-bx ul li em{color: #e05d00;}
.withdrawal-bx .withdrawal-item + .withdrawal-item{margin-top: 10px;}
.withdrawal-bx .withdrawal-item > div{padding-left: 16px;}
.withdrawal-bx .withdrawal-item > div input[type="checkbox"]{vertical-align: -2px;}
.withdrawal-bx .withdrawal-item > div label{font-size: 18px; color: #4d4d4d; font-weight: 500; padding-left: 5px;}

@media (max-width: 991px){
  .withdrawal{padding-top: 30px;}
  .withdrawal-bx{padding: 20px;}

}

@media (max-width: 760px){
  .withdrawal-bx{padding: 15px;}
  .withdrawal-bx strong{font-size: 16px;}
  .withdrawal-bx ul{padding-left: 0;}
  .withdrawal-bx ul li{font-size: 14px;}
  .withdrawal-bx .withdrawal-item > div{padding-left: 0;}
  .withdrawal-bx .withdrawal-item > div label{font-size: 14px; padding-left: 2px;} 
}

/* 마이페이지 */
.mypage .mypage-wrap{border: 2px solid #121212; border-width: 2px 0 1px 0; padding: 20px 93px 20px 30px; display: flex; align-items: center;}
.mypage .mypage-txt > span{font-size: 24px; font-weight: 700; color: #121212; font-weight: 500;}
.mypage .mypage-txt > span strong{color: #005bac; font-weight: 700; padding-right: 6px;}
.mypage .mypage-txt ul{padding-top: 25px;}
.mypage .mypage-txt ul li{padding-left: 14px; position: relative; font-size: 18px;}
.mypage .mypage-txt ul li + li{margin-top: 5px;}
.mypage .mypage-txt ul li::before{content: ''; width: 6px; height: 6px; background: #c4c4c4; border-radius: 50%;
position: absolute; left: 0; top: 10px;}
.mypage .mypage-txt ul li strong{font-weight: 700; color: #4d4d4d; min-width: 100px; display: inline-block;}
.mypage .mypage-txt ul li span{color: #121212; font-weight: 500;}
.mypage .mypage-txt ul li .approval{color: #005bac;}

.mypage-btn{display: flex; gap: 50px; flex: 1; justify-content: flex-end;}
.mypage-btn a{text-align: center;}
.mypage-btn a > div{display: flex; justify-content: center; align-items: center; width: 120px; height: 120px;
background: linear-gradient(180deg, #00ada9 0%, #005bac 100%); border-radius: 50%;}
.mypage-btn a:hover > div{background: linear-gradient(180deg, #ffb347 , #e05d00); }
.mypage-btn a span{color: #121212; font-size: 18px; font-weight: 500; padding-top: 20px; display: inline-block;}

.mypage .pr{padding-top: 60px;}
.mypage .pr .pr-wrap{display: flex; align-items: center; border-radius: 5px; background: #f6f6f6; padding: 30px 93px 30px 30px;}
.mypage .pr-bx ul li{padding-left: 14px; position: relative; font-size: 18px;}
.mypage .pr-bx ul li::before{content: ''; width: 6px; height: 6px; background: #c4c4c4; border-radius: 50%;
position: absolute; left: 0; top: 10px;}
.mypage .pr-bx ul li strong{font-weight: 700; color: #4d4d4d; min-width: 100px; display: inline-block;}
.mypage .pr-bx ul li span{color: #121212; font-weight: 500;}
.mypage .pr-bx-btn{display: flex; gap: 10px; margin-top: 27px;}
.mypage .pr-bx-btn a{padding: 0 20px; height: 46px; display: flex; align-items: center; justify-content: center;
border-radius: 50px; background: #000; color: #fff; font-size: 18px; font-weight: 500; transition: all .2s;} 
.mypage .pr-bx-btn a:hover{background: #00ada9; transition: all .2s;}

.mypage .pr-info{flex: 1; display: flex; gap: 50px; justify-content: flex-end;}
.mypage .pr-info > div{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 120px; height: 120px;
border-radius: 10px; background: #fff; border: 2px solid rgba(0, 0, 0, 0.20);}
.mypage .pr-info > div span{color: #4d4d4d; font-size: 18px; font-weight: 500;}
.mypage .pr-info > div strong{color: #000; font-weight: 700; font-size: 40px;}

.mypage .board{padding-top: 60px; display: flex; justify-content: space-between;}
.mypage .board .demo{width: 44%;}
.mypage .board .demo-tit,
.mypage .board .community-tit{display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 2px solid #000;}
.mypage .board .demo-tit .titLv,
.mypage .board .community-tit .titLv{margin-bottom: 0 !important;}
.mypage .board .demo-tit a,
.mypage .board .community-tit a{display: flex; gap: 10px; align-items: center; }
.mypage .board .demo-tit a .circle,
.mypage .board .community-tit a .circle{background: #000; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 50%;}
.mypage .board .demo-tit a .circle img,
.mypage .board .community-tit a .circle img{display: block; transition: all .2s;}
.mypage .board .demo-tit a:hover .circle img,
.mypage .board .community-tit a:hover .circle img{transform: rotate(45deg); transition: all .2s;}

.mypage .board .demo-img{display: flex; gap: 20px;}
.mypage .board .demo-img a img{display: block; border-radius: 10px; object-fit: cover; width: 350px; height: 180px;}
.mypage .board .demo-img a span{font-size: 18px; color: #4d4d4d; font-weight: 500; margin-top: 15px; display: block; line-height: 1.2;
display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; -webkit-box-orient: vertical; position: relative;}
.mypage .board .demo-img a span::before{content: ''; display: block; width: 0%; height: 100%; background: #000;
position: absolute; left: 0; top: 0; z-index: -1; transition: all .4s;}
.mypage .board .demo-img a:hover span{color: #fff; transition: all .2s;}
.mypage .board .demo-img a:hover span::before{width: 100%; transition: all .4s;}

.mypage .board .community{width: 50%;}
.mypage .board .community-bx ul li{padding-left: 15px; font-size: 18px; color: #121212; font-weight: 500; position: relative;}
.mypage .board .community-bx ul li + li{margin-top: 8px;}
.mypage .board .community-bx ul li::before{content: ''; width: 6px; height: 6px; background: #c4c4c4;
position: absolute; left: 0; top: 12px; border-radius: 50%;}
.mypage .board .community-bx ul li a{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; padding-right: 200px;}
.mypage .board .community-bx ul li a:hover{text-decoration: underline !important; text-underline-position: under;}

.mypage .request{padding-top: 60px; display: flex; justify-content: space-between;}
.mypage .demo_board{width: 44%;}
.mypage .board-tit,
.mypage .adopt-tit{display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 2px solid #000;}
.mypage .board-tit .titLv,
.mypage .adopt-tit .titLv{margin-bottom: 0 !important;}
.mypage .board-tit a,
.mypage .adopt-tit a{display: flex; gap: 10px; align-items: center;}
.mypage .board-tit a .circle,
.mypage .adopt-tit a .circle{background: #000; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 50%;}
.mypage .board-tit a .circle img,
.mypage .adopt-tit a .circle img{display: block; transition: all .2s;}
.mypage .board-tit a:hover .circle img,
.mypage .adopt-tit a:hover .circle img{transform: rotate(45deg); transition: all .2s;}

.mypage .demo_board .application a,
.mypage .adopt .inquiry a{font-size: 18px; font-weight: 500; display: flex; justify-content: space-between;}
.mypage .demo_board .application a + a,
.mypage .adopt .inquiry a + a{margin-top: 8px;}
.mypage .demo_board .application a strong,
.mypage .adopt .inquiry a strong{padding-left: 15px; color: #121212; position: relative; font-weight: 500; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; padding-right: 100px;}
.mypage .demo_board .application a:hover strong,
.mypage .adopt .inquiry a:hover strong{text-decoration: underline; text-underline-position: under;}
.mypage .demo_board .application a strong::before,
.mypage .adopt .inquiry a strong::before{content: ''; width: 6px; height: 6px; aspect-ratio: 1/1; border-radius: 50%;
background: #c4c4c4; position: absolute; left: 0; top: 10px;}
.mypage .demo_board .application a span,
.mypage .adopt .inquiry a span{color: #4d4d4d;}
.mypage .demo_board .application a > div,
.mypage .adopt .inquiry a > div{display: flex; gap: 10px; align-items: center; white-space: nowrap;}
.mypage .demo_board .application a em,
.mypage .adopt .inquiry a em{color: #fff; border-radius: 100px; height: 25px; padding: 0 10px; display: inline-flex; justify-content: center; align-items: center;}
.mypage .demo_board .application a em.ask,
.mypage .adopt .inquiry a em.ask{background: #00ada9;}
.mypage .demo_board .application a em.finish,
.mypage .adopt .inquiry a em.finish{background: #121212;}

.mypage .adopt{width: 50%;}


.status{color: #fff; border-radius: 100px; height: 25px; padding: 0 10px; display: inline-flex; justify-content: center; align-items: center;}
.status.ask{background: #00ada9;}
.status.finish{background: #121212;}

@media (max-width: 1700px){
  .mypage .board .demo-img a{flex: 1;}
  .mypage .board .demo-img a img{width: 100%; height: 150px;}

  .mypage .mypage-txt > span{line-height: 1.2;}
  .mypage .board-tit, .mypage .adopt-tit,
  .mypage .board .demo-tit, .mypage .board .community-tit{padding-bottom: 10px;}
}

@media (max-width: 991px){
  .mypage .mypage-wrap{padding: 20px;}
  .mypage .mypage-txt > span{font-size: 20px;}
  .mypage .mypage-txt ul li{font-size: 16px;}
  .mypage .mypage-txt ul li strong{min-width: 80px;}

  .mypage-btn a > div{width: 90px; height: 90px;}
  .mypage-btn a > div img{display: block; width: 30px;}
  .mypage-btn a span{font-size: 16px; padding-top: 15px;}

  .mypage .pr{padding-top: 40px;}
  .mypage .pr .pr-wrap{padding: 20px;}
  .mypage .pr-bx ul li{font-size: 16px;}
  .mypage .pr-bx ul li strong{min-width: 80px;}
  .mypage .pr-info{gap: 30px;}
  .mypage .pr-info > div{width: 90px; height: 90px;}
  .mypage .pr-info > div span{font-size: 16px;}
  .mypage .pr-info > div strong{font-size: 30px;}
  .mypage .pr-bx-btn{margin-top: 20px;}
  .mypage .pr-bx-btn a{font-size: 15px; padding: 0 15px; height: 40px;}

  .mypage .board{padding-top: 40px; flex-direction: column;}
  .mypage .board .demo{width: 100%;}
  .mypage .board .demo-img a img{height: 180px;}
  .mypage .board .demo-tit, 
  .mypage .board .community-tit{padding-bottom: 15px;}
  .mypage .board .demo-tit a, 
  .mypage .board .community-tit a{font-size: 15px;}
  .mypage .board .demo-img a span{font-size: 16px;}

  .mypage .board .community{width: 100%; padding-top: 40px;}
  .mypage .board .community-bx ul li{font-size: 16px;}
  .mypage .board .community-bx ul li::before{top: 10px;}

  .mypage .request{gap: 40px; flex-direction: column; padding-top: 50px;}
  .mypage .demo_board,
  .mypage .adopt{width: 100%;}
  .mypage .board-tit a, .mypage .adopt-tit a{font-size: 15px;}

  .mypage .demo_board .application a, .mypage .adopt .inquiry a{font-size: 16px;}
  .mypage .demo_board .application a em, .mypage .adopt .inquiry a em{font-size: 14px;}
  .status{font-size: 14px;}
  .mypage .demo_board .application a strong,
  .mypage .adopt .inquiry a strong{padding-right: 20px;}
}

@media (max-width: 760px){
  .mypage .mypage-wrap{flex-direction: column; align-items: flex-start; padding: 15px;}
  .mypage .mypage-txt > span{font-size: 18px;}
  .mypage .mypage-txt ul li strong{min-width: 70px;}

  .mypage-btn{gap: 0; padding-top: 20px; width: 100%; justify-content: space-between;}
  .mypage-btn a span{padding-top: 10px; font-size: 14px;}
  .mypage-btn a > div{width: 70px; height: 70px;}
  .mypage-btn a > div img{width: 25px;}

  .mypage .pr .pr-wrap{flex-direction: column; align-items: flex-start; padding: 15px;}
  .mypage .pr-info{padding-top: 30px; width: 100%; gap: 30px;}
  .mypage .pr-info > div{width: 80px; height: 80px; flex: 1;}
  .mypage .pr-info > div span{font-size: 14px;}
  .mypage .pr-info > div strong{font-size: 25px;}
  .mypage .pr-bx ul li strong{min-width: 70px;}

  .mypage .board .demo-img{flex-direction: column;}
  .mypage .board .demo-tit a, 
  .mypage .board .community-tit a{font-size: 14px; gap: 8px;}

  .mypage .board .community-bx ul li a{padding-right: 60px;}
  .mypage .board .demo-tit a .circle, 
  .mypage .board .community-tit a .circle{width: 25px; height: 25px;}
  .mypage .board .demo-tit a .circle img, 
  .mypage .board .community-tit a .circle img{width: 8px;}
  .mypage .board-tit, .mypage .adopt-tit, .mypage .board .demo-tit, .mypage .board .community-tit{margin-bottom: 15px;}

  .mypage .board-tit a .circle,
  .mypage .adopt-tit a .circle{width: 25px; height: 25px;}
  .mypage .board-tit a .circle img,
  .mypage .adopt-tit a .circle img{display: block; width: 8px;}
  .mypage .demo_board .application a > div, .mypage .adopt .inquiry a > div{gap: 8px;}
  
}
 
@media (max-width: 500px){
  .mypage-btn a > div{width: 90px; height: 90px;}
  .mypage .board .demo-img a img{height: 230px;}
}

@media (max-width: 414px){
  .mypage-btn a > div{width: 70px; height: 70px;}
  .mypage .board .demo-img a img{height: 180px;}
}

/* 마이페이지 데모신청 */
#sub .skinTb > tbody > tr > td a:hover{text-decoration: underline !important; text-underline-position: under;}
.minute .skinTb .skinTb-td .common-bx a{margin-left: 10px; font-weight: 500; flex-shrink: 0;
display: inline-block; padding: 0 10px; height: 34px; line-height: 34px; border-radius: 5px; background: #000;
color: #fff; transition: all .2s;}
.minute .skinTb .skinTb-td .common-bx a:hover{background: #00ada9; transition: all .2s;}
.minute .skinTb .skinTb-td span{position: relative; padding-right: 10px; margin-right: 10px;}
.minute .skinTb .skinTb-td span::before{content: ''; width: 2px; height: 16px; background: #ccc;
position: absolute; right: 0; top: 3px;}
.minute .skinTb .skinTb-td span:last-child::before{display: none;}