@charset "utf-8";

/* ====================================================================================================
  List
==================================================================================================== */

/* ===========================================================================
  List > Popup
=========================================================================== */
#popup-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:999;}
#popup-wrapper {display: none; position: fixed; top: 10%; left: 50%; width: 90%; max-width: 1600px; height: 90%; background: #f5f5f5; overflow-x: hidden; z-index: 1000; transform: translateX(-50%); border-radius: 50px 50px 0 0; scrollbar-width: none; -ms-overflow-style: none;}
#popup-wrapper::-webkit-scrollbar {display: none; /* Chrome 등 */}
#popup-wrapper > .closeBtn {position: sticky; top: 2vw; width: 50px; height: 50px; margin-top: -50px; background-color: #000; border-radius: 50px; border: 0; margin-left: auto; margin-right: 2vw; font-size: 0; z-index: 1001; cursor: pointer;}
#popup-wrapper > .closeBtn::before,
#popup-wrapper > .closeBtn::after {position: absolute; left: 20%; top: 50%; width: 60%; height: 1px; background-color: #fff; transform-origin: center; transition: background 0.3s; content: "";}
#popup-wrapper > .closeBtn::before {transform: rotate(45deg);}
#popup-wrapper > .closeBtn::after {transform: rotate(-45deg);}

#popup-content {height: 100%; overflow-x: hidden; overflow-y: auto;}
#popup-content::-webkit-scrollbar {width: 5px; height: 5px;}
#popup-content::-webkit-scrollbar-track {background-color: #fff; border-radius: 5px;}
#popup-content::-webkit-scrollbar-thumb {background: linear-gradient(to bottom, #4377B6 17%, #45ED77 100%); border-radius: 5px;}


/* ===========================================================================
  List > Default
=========================================================================== */
#bo_list_total {font-size: 0;}
.gall_row .col-gn-0, .gall_row .col-gn-1, .gall_row .col-gn-2, .gall_row .col-gn-3, .gall_row .col-gn-4, .gall_row .col-gn-5, .gall_row .col-gn-6, .gall_row .col-gn-7, .gall_row .col-gn-8, .gall_row .col-gn-9, .gall_row .col-gn-10 {padding-left: 17px; padding-right: 17px}
#bo_gall #gall_ul {margin: 10px -17px 0;}
#bo_gall .gall_box {margin: 0 0 70px 0 !important;}
#bo_gall .gall_img {position: relative; border-radius: 10px; overflow: hidden;}
#bo_gall .gall_img img {transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); transition: all 0.3s ease-in-out;}
#bo_gall .gall_img:hover img {transform:scale(1.05); -webkit-transform:scale(1.05); -moz-transform:scale(1.05); -o-transform:scale(1.05);}
#bo_gall .titleBox {margin-top: 30px;}
#bo_gall .titleBox .sTit {margin-bottom: 13px;}
#bo_gall .empty_list {display: flex; align-items: center; justify-content: center; height: 400px; color: #fff;}

/* ===========================================================================
  List > SubCate
=========================================================================== */
#bo_gall .sCate {display:none; position: absolute; /*display: flex;*/ align-items: center; bottom: 1vw; left: 1vw; height: 27px; gap: 4px; z-index: 1; font-size: 0.889rem;}
#bo_gall .sCate > li {display: flex; align-items: center; height: 100%; background-color: #000; padding: 0 13px; font-size: inherit; font-weight: 400; color: inherit; border-radius: 30px;}
#bo_gall .sCate > li > a {}
#bo_gall .sCate > li.new {background: #ff0000;}


/* ====================================================================================================
  View
==================================================================================================== */
#bo_v {color: #111; margin: 0; font-weight: 400;}
#bo_v #bo_v_top {position: absolute !important; top: 80px; right: 7%; z-index: 2;}
#bo_v #bo_v_top > ul {display: flex; float: none !important;}
#bo_v #bo_v_top > ul > li {float: none;}

#topInfo ul > li {font-weight: 300;}
.view_image {pointer-events: none;}

/* ===========================================================================
  View > Copyright
=========================================================================== */
#bo_v .copyright {display: flex; align-items: center; flex-direction: column; border-top: 1px solid rgba(0,0,0,0.2); padding: 2.5vw 0; margin-top: 6.5vw;}
#bo_v .copyright > img {opacity: 0; width: 100px; margin-bottom: 20px;}
#bo_v .copyright > p {font-weight: 400; color: #333;}
#bo_v .copyright.show > img {animation: fadeInDown 1s forwards; animation-delay: 0.5s;}


/* ====================================================================================================
  Write
==================================================================================================== */

/* ===========================================================================
  Write > Default
=========================================================================== */
#bo_w {background-color: rgba(0,15,32,0.8);}
#bo_w > form dl {margin-bottom: 2vw;}
#bo_w > form dl > dd {min-height: 4vw;}
#bo_w > form .wrap {width: 48%;}
#bo_w > form .wrap > dl {width: 100%;}

#bo_w > form .wrap1 {display: flex; justify-content: space-between;}
#bo_w > form .wrap1 > dl {width: 48%;}

#bo_w > form dl dd .wr_content1 {width: 100%;}
#bo_w > form dl dd .wr_content1 textarea {border-radius: 10px; min-height: 13vw; padding: 1.5vw;}

#bo_w > form dl.bo_w_select > dt {width: 100%;}
#bo_w > form dl.bo_w_select > dd {width: 100%;}

#bo_w > form input[type="text"].small_input {width: 80px; height: 2vw !important; line-height: 2vw !important; padding: 0 0.5vw; margin-left: 10px;}

/* ===========================================================================
  Write > Preview
=========================================================================== */
#previewBox {position: absolute; top: 0; left: 50%; width: 200px; height: 500px; display: none; pointer-events: none; z-index: 9999; overflow: hidden;}
#previewBox img {width: 100%; border: 1px solid #ccc; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2);}

/* ===========================================================================
  Write > Year
=========================================================================== */
.projectYear {display: flex; flex-wrap: wrap; gap: 10px;}
.projectYear > li {flex: 0 0 18%;}

/* ===========================================================================
  Write > Month
=========================================================================== */
.projectMonth {display: flex; flex-wrap: wrap; gap: 10px;}
.projectMonth > li {flex: 0 0 14%;}

/* ===========================================================================
  Write > Templet
=========================================================================== */
.projectTemplet {display: flex; flex-wrap: wrap; gap: 10px;}
.projectTemplet > li {flex: 0 0 24%; display: none;}


/* ====================================================================================================
   CI,BI
==================================================================================================== */
.colorView {display: flex; justify-content: space-between;}
.colorView .colorPreview {width: 100%; padding-top: 60%; background: #fff; border-radius: 10px;}
.colorView > dl {width: 100% !important; flex: 0 0 29%;}
.colorView ul > li {margin-top: 10px;}
.colorView ul > li > label {margin-bottom: 5px;}
.colorView ul > li > input {padding: 5px 10px; border-radius: 5px; border: 0;}


/* ====================================================================================================
   데스크탑 (1280px ~ 1599px)
==================================================================================================== */
@media screen and (max-width:1599px) {

  /* ===========================================================================
    Write
  =========================================================================== */
  
  /* ==================================================
    Write > Preview
  ================================================== */
  .projectTemplet > li {flex: 0 0 32%;}

}

@media screen and (max-width:1419px) {

  /* ===========================================================================
    View
  =========================================================================== */
    #bo_v .copyright {width: 100%;}

}


/* ====================================================================================================
   노트북 & 태블릿 가로 (1024px ~ 1279px)
==================================================================================================== */
@media screen and (max-width:1279px) {

  /* ===========================================================================
    List
  =========================================================================== */

  /* ==================================================
    List > Preview
  ================================================== */
  .gall_row .col-gn-0, .gall_row .col-gn-1, .gall_row .col-gn-2, .gall_row .col-gn-3, .gall_row .col-gn-4, .gall_row .col-gn-5, .gall_row .col-gn-6, .gall_row .col-gn-7, .gall_row .col-gn-8, .gall_row .col-gn-9, .gall_row .col-gn-10 {padding-left: 1% !important;; padding-right: 1% !important;}
  #bo_gall #gall_ul {margin: 10px -1% 0 !important;}
  #bo_gall .gall_box {margin: 0 0 50px 0 !important;}
  #bo_gall .titleBox {margin-top: 24px;}
  #bo_gall .sCate {font-size: 0.889rem;}

  /* ===========================================================================
    Write
  =========================================================================== */
  #bo_w > form dl dd .wr_content1 textarea {min-height: 19vw;}

  /* ==================================================
    Write > Default
  ================================================== */
  #bo_w > form dl {margin-bottom: 3vw;}
  #bo_w > form dl > dd {min-height: 5.6vw;}

  /* ==================================================
    Write > Preview
  ================================================== */
  .projectTemplet > li {flex: 0 0 48%;}

}


/* ====================================================================================================
   태블릿 가로 (768px ~ 1023px)
==================================================================================================== */
@media screen and (max-width:1023px) {
  
  /* ===========================================================================
    List
  =========================================================================== */

  /* ==================================================
    List > Popup
  ================================================== */
  #popup-wrapper > .closeBtn {width: 45px; height: 45px; margin-top: -45px; }

  /* ==================================================
    List > Default
  ================================================== */
  #bo_gall .gall_box {margin: 0 0 40px 0 !important;}
  #bo_gall .sCate {font-size: 0.856rem; height: 22px; bottom: 2vw; left: 2vw;}
  #bo_gall .sCate > li {padding:0 8px;}
  #bo_gall .sCate > li.new {display: flex;}

  /* ===========================================================================
    View
  =========================================================================== */
  #popup-wrapper {width: 100%; height: 100% ;top: 0; border-radius: 0;}

  /* ===========================================================================
    Write
  =========================================================================== */

  /* ==================================================
    Write > Default
  ================================================== */
  #bo_w > form dl > dd {min-height: 6.4vw;}
  #bo_w > form .wrap {width: 100%;}
  
  /* ==================================================
    Write > Preview
  ================================================== */
  .projectTemplet > li {flex: 0 0 23%;}
}


/* ====================================================================================================
   모바일 가로 & 태블릿 세로 (480px ~ 767px)
==================================================================================================== */
@media screen and (max-width:767px) {

  /* ===========================================================================
    List
  =========================================================================== */
  #bo_cate ul {justify-content: center; border-radius: 30px;}
  #bo_cate li {width: 25%;}
  #bo_cate li > a {text-align: center;}
    
  /* ==================================================
    List > Popup
  ================================================== */
  #popup-wrapper > .closeBtn {width: 40px; height: 40px; margin-top: -40px; }

  /* ==================================================
    List > Default
  ================================================== */
  #bo_gall .gall_box {margin: 0 0 30px 0 !important;}
  #bo_gall .titleBox{margin-top: 18px;}
  #bo_gall .titleBox .sTit {margin-bottom: 10px;}
  #bo_gall .sCate {font-size: 0.794rem;}

  /* ===========================================================================
    View
  =========================================================================== */

  /* ==================================================
    View > Copyright
  ================================================== */
  #bo_v .copyright {padding: 5.5vw 0;}
  #bo_v .copyright > img {width: 80px; margin-bottom: 15px;}

  /* ===========================================================================
    Write
  =========================================================================== */
  
  /* ==================================================
    Write > Default
  ================================================== */
  #bo_w > form dl {margin-bottom: 6vw;}
  #bo_w > form .wrap1 {flex-direction: column;}
  #bo_w > form .wrap1 > dl {width: 100%;}

  #bo_w > form dl dd .wr_content textarea {min-height: inherit !important; height: 300px; padding: 4vw; font-size: 0.978rem;}
  #bo_w > form dl dd .wr_content1 textarea {min-height: inherit; height: 250px; padding: 2vw; font-size: 0.978rem;}

  /* ==================================================
    Write > Month
  ================================================== */
  .projectMonth > li {flex: 0 0 23%;}


  /* ==================================================
    Write > Templet
  ================================================== */
  .projectTemplet > li {flex: 0 0 48%;}

  }


/* ====================================================================================================
   모바일 세로 (~ 479px)
==================================================================================================== */

@media screen and (max-width:479px) {

  /* ===========================================================================
    List
  =========================================================================== */
  #bo_cate li {width: 33.333%;}
  #bo_gall .gall_box {margin: 0 0 40px 0 !important;}
  #bo_gall .sCate {height: 24px; font-size: 0.775rem; left: 3vw; bottom: 3vw;}
  #bo_gall .sCate > li {padding: 0 10px;}
  #bo_gall .titleBox {padding: 0 1vw;}
  #bo_gall .titleBox > h3 {font-size: 0.93rem !important;}

  /* ===========================================================================
    Write
  =========================================================================== */
  
  /* ==================================================
    Write > Default
  ================================================== */
  #bo_w > form dl {margin-bottom: 10vw;}
  #bo_w > form dl dd .wr_content1 textarea {font-size: 0.9rem;}

  /* ==================================================
    Write > Month
  ================================================== */
  .projectMonth > li {flex: 0 0 22%;}
  
  /* ==================================================
    Write > Templet
  ================================================== */
  .projectTemplet > li {flex: 0 0 48%;}

}