@charset "utf-8";

/*목록*/
#bo_project #gall_ul {}
#bo_project .gall_li{}
#bo_project .gall_li .gall_box { position: relative; transition: .3s; height: 100%;}
#bo_project .gall_li .gall_box .gall_chk {position:absolute; top:5px; left:5px; padding:5px; z-index:1}
#bo_project .gall_li .gall_box .gall_con {position:relative; overflow: hidden; display: block;}
#bo_project .gall_li .gall_img {text-align:center; overflow:hidden;}
#bo_project .gall_li .gall_img a{height:100%;}
#bo_project .gall_li .gall_img img,
#bo_project .gall_li .gall_img video {max-width:100%; width:100%; transition: .3s;}
/*#bo_project .gall_li .gall_img img:hover{transform: scale(1.05);}*/
#bo_project .gall_li .no_image{font-size:1.25em; color:#ccc; font-weight: 600; width:100%; height:100%; background-color: #f9f9f9;}
#bo_project .gall_li .no_image .xi{font-size:2.5em; display: block; line-height: 1;}
#bo_project .gall_li .gall_hover{padding:25px 25px; position:absolute; bottom:0; left:0; width:100%; background:linear-gradient(0deg, rgba(0,0,0,0.5), #0000); transition:all .4s; color:#fff; opacity: 0;}
#bo_project .gall_li .bo_cate_link{color:rgba(255,255,255,.8)!important; margin-bottom: 5px; margin-right:0;}
#bo_project .gall_li .bo_cate_link:before,
#bo_project .gall_li .bo_cate_link:after{display:none;}
#bo_project .gall_li .bo_tit{font-weight:700; font-size: 1.375em; color:#fff;}

#bo_project .gall_li .gall_box:hover .gall_hover{opacity: 1; transition: .3s;}

.project_wr #footer{display:none;}
.project_wr #container_wr{position: absolute; top: 0; left:70px; right: 0; bottom: 20px; overflow-x: scroll; overflow-y: hidden; padding-bottom:0; width:calc(100% - 70px); padding-left:0;}
.project_wr #container_wr::-webkit-scrollbar{width:5px;}
.project_wr #container_wr::-webkit-scrollbar-thumb{background-color:transparent;}
.project_wr #container_wr::-webkit-scrollbar-track{}

.info_tx{color:#888; margin-top:5px;}
.info_tx .xi{font-size: 1em;}


/*뷰*/
#bo_v.project_view{white-space: nowrap; position: relative;}
.project_view .txt_cont{ position: absolute; top: 0; left: 0; height: 100%; width:45%; white-space: normal;}
.project_view .txt_cont .bo_v_content * {color:#fff; font-weight: 300;}
.project_view .txt_cont .bo_v_content .cont_ol{margin:30px 0 40px;}
.project_view .txt_cont .bo_v_content .cont_ol li{margin-bottom: 7px;}
.project_view .txt_cont .bo_v_tit{font-size:6.5em; font-weight: 700; color:#1820e5; position: absolute; left:0; bottom:0; line-height: 1; letter-spacing: -1px}
.project_view .txt_cont #bo_v_top .bo_v_com{display:flex;}
.project_view .img_cont{ height: calc(100vh - 180px); padding-left: 55%; width:160%;}
.project_view .img_cont img{margin-left:15px; width:auto!important; max-width:inherit!important;}
.project_wr .bo_v_com{display:none;}    


.gall_row .col-gn-0,
.gall_row .col-gn-1 {width:100%}
.gall_row .col-gn-2 {width:calc(100% / 2);}
.gall_row .col-gn-3 {width:calc(100% / 3);}
.gall_row .col-gn-4 {width:calc(100% / 4);}
.gall_row .col-gn-5 {width:calc(100% / 5);}
.gall_row .col-gn-6 {width:calc(100% / 6);}
.gall_row .col-gn-7 {width:calc(100% / 7);}
.gall_row .col-gn-8 {width:calc(100% / 8);}
.gall_row .col-gn-9 {width:calc(100% / 9);}
.gall_row .col-gn-10 {width:calc(100% / 10);}
.gall_row .box_clear {clear:both}


@media screen and (max-width:1500px) {
.project_wr #container_wr{left:0; width: 1400px;}
    .project_view .txt_cont .bo_v_tit{font-size:4em;}
}

@media screen and (max-width:1024px) {
.project_wr #footer{display:block;}    
.project_wr #container_wr{position:relative; top: inherit; left:inherit; right:inherit; bottom:inherit; overflow-x: hidden; overflow-y:inherit; padding-bottom:150px; z-index: -1;}
.project_wr #bo_v.project_view{white-space: normal}    
.project_view .txt_cont{position: inherit; top: inherit; left:inherit; width:100%; height: auto; margin-bottom: 30px;}
.project_view .txt_cont .bo_v_tit{margin:20px 0; font-size:2em; position: inherit; left: inherit; bottom: inherit;}
.project_view .txt_cont #bo_v_top{display:none;}    
.project_view .img_cont{padding-left:0%; height: auto; width:100%; display: block}
.project_view .img_cont img{margin-left:0; width:100%!important; height: auto;}
}

@media screen and (max-width:500px) {
.project_view .txt_cont .bo_v_tit{margin:20px 0; font-size:1.625em;}
}