@charset "utf-8";

/* list */
#bo_list_wrap{width:100%;padding:0 30px;border-bottom: 1px solid #000;position: relative;display: flex;justify-content: space-between;}
#bo_list_wrap .list_title{padding: 200px 30px 30px;position: sticky;top:0;height: 100vh;border-left: 1px solid #000;}
#bo_list_wrap .list_title p.tit1{position: relative;display: inline-block;font-size: clamp(50px, 7vw, 110px);font-weight: 600;font-family: 'Manrope' !important;line-height: 1;letter-spacing: .02em;}
#bo_list_wrap .list_title p.tit1 .stroke{color: transparent;  -webkit-text-stroke:2px #000;}
#bo_list_wrap .list_title p.tit1 .fill{position: absolute;inset: 0;color: #000;clip-path: inset(0 100% 0 0);}
@media screen and (max-width:500px){
	#bo_list_wrap .list_title p.tit1 .stroke{-webkit-text-stroke:1px #000;}
	#bo_list_wrap .list_title p.tit1 .fill{transform: translate(-0.005em, -0.005em);}
}

#bo_list_wrap .list_page{padding: 350px 30px 30px;border-right: 1px solid #000;width: 65%;position: relative;}
#bo_list_wrap .list_page #bo_webzine .list-item .project_hover{background-color:transparent;clip-path: inset(0 0 100% 0);width:100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 100;padding: 20px;opacity:0;transition: clip-path 0.4s ease, opacity 0.4s ease;}
#bo_list_wrap .list_page #bo_webzine .list-item .img-wrap:hover .project_hover{opacity:1;clip-path: inset(0 0 0 0);background-color:rgba(0,0,0,0.7);}
#bo_list_wrap .list_page #bo_webzine .list-item .project_link{width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: space-between;color: #fff;padding: 20px;}
#bo_list_wrap .list_page #bo_webzine .list-item .project_link:hover{color: #fff;}
#bo_list_wrap .list_page #bo_webzine .list-item .project_link p.tit1{font-size: 24px;font-weight: 600;line-height: 1.3;}
#bo_list_wrap .list_page #bo_webzine .list-item .project_btn{display: flex;justify-content: space-between;align-items: center;}
#bo_list_wrap .list_page #bo_webzine .list-item .project_btn img{width: 20px;height: auto;aspect-ratio: 1 / 1;margin: unset;}
#bo_list_wrap .list_page #bo_webzine .list-item .hover_cont{position: relative;width: 100%;height: 100%;display: flex;flex-direction:column;opacity: 0;}
#bo_list_wrap .list_page #bo_webzine .list-item:hover .hover_cont{opacity: 1;transition: all .3s ease-in;}
#bo_list_wrap .list_page #bo_webzine .list-item .squareBox{position: absolute;left: 0;display: flex;justify-content: space-between;align-items: start;width: 100%;}
#bo_list_wrap .list_page #bo_webzine .list-item .squareBox .square{width: 20px; aspect-ratio:1 / 1;position: relative;}
#bo_list_wrap .list_page #bo_webzine .list-item .top_square{top: 0;}
#bo_list_wrap .list_page #bo_webzine .list-item .top_square .square:nth-child(1)::before{content:'';width:100%;height:100%;display:block;border-left-width:1px;border-top-width:1px;border-right-width:0;border-bottom-width:0;border-style:solid;border-color:#fff;}
#bo_list_wrap .list_page #bo_webzine .list-item .top_square .square:nth-child(2)::before{content:'';width:100%;height:100%;display:block;border-left-width:0;border-top-width:1px;border-right-width:1px;border-bottom-width:0;border-style:solid;border-color:#fff;}
#bo_list_wrap .list_page #bo_webzine .list-item .bot_square{bottom: 0;}
#bo_list_wrap .list_page #bo_webzine .list-item .bot_square .square:nth-child(1)::before{content:'';width:100%;height:100%;display:block;border-left-width:1px;border-top-width:0;border-right-width:0;border-bottom-width:1px;border-style:solid;border-color:#fff;}
#bo_list_wrap .list_page #bo_webzine .list-item .bot_square .square:nth-child(2)::before{content:'';width:100%;height:100%;display:block;border-left-width:0;border-top-width:0;border-right-width:1px;border-bottom-width:1px;border-style:solid;border-color:#fff;}


#bo_list_wrap .board_top{justify-content: space-between;align-items: center;}
#bo_list_wrap .board_top p{color: #000; font-size: 15px;margin: 10px 0;}
#bo_list_wrap .board_top .btn_wrap{}
#bo_list_wrap .board_top .btn_wrap a.all_check{padding: 0 20px;}
#bo_list_wrap .board_top .btn_wrap a.all_check label{color: #000; font-size: 15px;cursor: pointer;}
#bo_list_wrap .board_top .btn_wrap a.all_check div{}
#bo_list_wrap .board_top .btn_wrap a.all_check div input{}
#bo_list_wrap .board_top .btn_wrap button{color: #000; padding: 0 20px; font-size: 15px;}
#bo_list_wrap .board_top .btn_wrap a{color: #000; padding: 0 20px; font-size: 15px;}
#bo_list_wrap .list_page #bo_list{}
#bo_list_wrap .list_page .pagination{margin-top: 50px;display: none;}
#bo_list_wrap .list_page .pagination li.active a{background-color: #000 !important;}
#bo_list_wrap .list_page .pagination li a.page-link{border-color: #000 !important;}
#bo_list_wrap #bo_webzine{display: flex; justify-content: start; align-items: center;flex-flow: row wrap;}
/* #bo_list_wrap #bo_webzine li.list-item{width: calc(100% / 3 - 20px);} */
#bo_list_wrap #bo_webzine li.list-item{width: 100%;display: flex;justify-content: space-between;gap: 60px;margin-bottom: 200px;}
#bo_list_wrap #bo_webzine li.list-item .img-wrap{width: 60%;height: auto;aspect-ratio: 16 / 9;padding-bottom: 0 !important;}
#bo_list_wrap #bo_webzine li.list-item .card{border: 0;}
#bo_list_wrap #bo_webzine li.list-item .card .no-gutters>div{width: 100%;height: 100%;}
#bo_list_wrap #bo_webzine li.list-item .img-item{}
#bo_list_wrap #bo_webzine li.list-item .img-item a{width:100%;height: auto;display: block;}
#bo_list_wrap #bo_webzine li.list-item .img-item a img{height: 100%;object-fit: cover;}
#bo_list_wrap #bo_webzine li.list-item .img-item span{position: absolute;top: 10px;left: 10px;z-index: 100;}
#bo_list_wrap #bo_webzine li.list-item .img-item span input{width: 20px;height: 20px;}
#bo_list_wrap #bo_webzine li.list-item .img-item .project_img{opacity:0;transform: translateY(24px);will-change: transform, opacity;}
#bo_list_wrap #bo_webzine li.list-item .card-text{font-size: 20px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: #fff; width: 100%; background: #000; text-align: center; line-height: 50px;}
#bo_list_wrap #bo_webzine li.list-item .project_info{width: 40%;opacity:0;transform: translateY(24px);will-change: transform, opacity;}
#bo_list_wrap #bo_webzine li.list-item .project_info .project_tit{margin-bottom:30px;}
#bo_list_wrap #bo_webzine li.list-item .project_info .project_tit p.tit1{font-size: 30px;font-weight: 600;}
#bo_list_wrap #bo_webzine li.list-item .project_info .project_tit p.tit2{font-size: 18px;font-weight: 400;}
#bo_list_wrap #bo_webzine li.list-item .project_info .project_cont ul li{display: flex;justify-content: start;}
#bo_list_wrap #bo_webzine li.list-item .project_info .project_cont ul li:not(:last-child){margin-bottom: 8px;}
#bo_list_wrap #bo_webzine li.list-item .project_info .project_cont ul li span{width: 100px;font-size: 16px;font-weight: 600;}
#bo_list_wrap #bo_webzine li.list-item .project_info .project_cont ul li p.tit3{width: calc(100% - 100px);font-size: 16px;font-weight: 400;}

@media screen and (max-width:1900px){
	#bo_list_wrap{flex-direction: column;gap: 0;}
	#bo_list_wrap .list_title{height: auto;border-right:1px solid #000;position: unset;}
	#bo_list_wrap .list_page{width: 100%;border-left: 1px solid #000;padding: 30px;}
}
@media screen and (max-width:1400px){	
	#bo_list_wrap #bo_webzine li.list-item{margin-bottom: 100px;}
	#bo_list_wrap #bo_webzine li.list-item .project_info .project_tit p.tit1{font-size: 28px;}
}
@media screen and (max-width:1200px){	
	#bo_list_wrap #bo_webzine li.list-item{gap: 40px;}
	#bo_list_wrap #bo_webzine li.list-item .project_info .project_tit p.tit1{font-size: 26px;}
	#bo_list_wrap #bo_webzine li.list-item .project_info .project_tit p.tit2{font-size: 17px;}
}
@media screen and (max-width:960px){	
	#bo_list_wrap #bo_webzine li.list-item{flex-direction: column;}
	#bo_list_wrap #bo_webzine li.list-item .img-wrap{width: 100%;}
	#bo_list_wrap #bo_webzine li.list-item .project_info{width: 100%;}
	#bo_list_wrap #bo_webzine li.list-item .project_info .project_tit p.tit1{font-size: 24px;}
}
@media screen and (max-width:768px){	
	#bo_list_wrap .list_title{border-left: 0;border-right: 0;padding: 180px 20px 50px 20px;}
	#bo_list_wrap .list_page{border-left: 0;border-right: 0;padding: 20px;}
	#bo_list_wrap #bo_webzine li.list-item{margin-bottom: 60px;}
}
@media screen and (max-width:500px){	
	#bo_list_wrap #bo_webzine li.list-item .project_info .project_tit{margin-bottom: 20px;}
	#bo_list_wrap #bo_webzine li.list-item .project_info .project_cont ul li span{width: 80px;}
	#bo_list_wrap #bo_webzine li.list-item .project_info .project_cont ul li p.tit3{width: calc(100% - 80px);}
}



/* view */
#bo_v{width:100%;padding: 0 30px;margin: 0 auto;border-bottom: 1px solid #000;}
#bo_v .viewpage{border-left: 1px solid #000;border-right: 1px solid #000;padding: 120px 30px 30px;}
#bo_v .viewpage .pj_bnr{width: 100%;}
#bo_v .viewpage .pj_bnr .view_image img{max-width: 100%;width:100%;height: 100%;}
#bo_v .viewpage .pj_cont{display: flex;align-items: start;padding: 60px 0;gap:30px;}
#bo_v .viewpage .pj_cont .pj_title{width: 50%;min-width: 350px;}
#bo_v .viewpage .pj_cont .pj_title .titBox {margin-bottom: 50px;}
#bo_v .viewpage .pj_cont .pj_title .titBox p.tit1{font-size: 50px;font-weight: 600;line-height: 1;padding-bottom: 15px;word-break: keep-all;}
#bo_v .viewpage .pj_cont .pj_title .titBox p.tit2{font-size: 18px;font-weight: 400;word-break: keep-all;}
#bo_v .viewpage .pj_cont .pj_title .linkBox .list{list-style: none;}
#bo_v .viewpage .pj_cont .pj_title .linkBox .link_con{width:170px;display: flex;justify-content: center;align-items: center;gap: 10px;padding: 10px 0;color: #fff;background: #000;border-radius: 50px;box-sizing: border-box;border: 1px solid transparent;transition: all .3s ease-in;}
#bo_v .viewpage .pj_cont .pj_title .linkBox .link_con a{color: #fff;font-size: 17px;}
#bo_v .viewpage .pj_cont .pj_title .linkBox .link_con:hover{background: #fff;border: 1px solid #000;}
#bo_v .viewpage .pj_cont .pj_title .linkBox .link_con:hover a{color: #000;}
#bo_v .viewpage .pj_cont .pj_title .linkBox .link_con:hover i{color: #000;}
#bo_v .viewpage .pj_imgwrap{display: flex;gap: 30px;}
#bo_v .viewpage .pj_imgwrap .view_image{width:calc(50% - 15px);}
#bo_v .viewpage .pj_imgwrap .view_image img{max-width: 100%;border: 1px solid #ddd;}


#bo_v #bo_v_btn{display: flex !important; align-items: center; justify-content: flex-end;}
#bo_v #bo_v_btn button{color: #000; padding: 0 20px; font-size: 15px;margin: .5rem 0 !important;display: block;}
#bo_v #bo_v_btn a{color: #000; padding: 0 20px; font-size: 15px;margin: .5rem 0 !important;display: block;}
#bo_v #bo_v_btn a:first-child{padding: 0;}
#bo_v .view_data{width: 50%;}
#bo_v .view_data ul{}
#bo_v .view_data ul li{align-items: center;}
#bo_v .view_data ul li:not(:last-child){margin-bottom: 10px;}
#bo_v .view_data ul li span{width: 100px;font-size: 17px;color: #000;font-weight:600;}
#bo_v .view_data ul li p{font-size: 17px;color: #000;width: calc(100% - 120px);}
#bo_v .view-content{color: #000;}
#bo_v_data{margin-top: 20px;}
#bo_v_data a{color: #000;}


/* write */
#bo_w{width: calc(100% - 40px);max-width: 1600px;margin: 0 auto;padding:0;}

@media screen and (max-width:1400px){
	/* #bo_list_wrap #bo_webzine li.list-item{width: calc(100% / 3 - 14px);} */
	#bo_list_wrap .list_page #bo_webzine .list-item .project_hover{padding: 15px;}
	#bo_list_wrap .list_page #bo_webzine .list-item .project_link{padding: 15px;}
	#bo_list_wrap .list_page #bo_webzine .list-item .squareBox .square{width: 15px;}
	#bo_list_wrap .list_page #bo_webzine .list-item .project_btn img{width: 15px;}
	#bo_v .viewpage .pj_cont .pj_title .titBox p.tit1{font-size: 45px;}
}
@media screen and (max-width:1200px){
	/* #bo_list_wrap #bo_webzine li.list-item{width: calc(100% / 2 - 10px);} */
	#bo_v .viewpage .pj_cont .pj_title .titBox{margin-bottom: 40px;}
	#bo_v .viewpage .pj_cont .pj_title .titBox p.tit1{font-size: 40px;padding-bottom: 10px;}
	#bo_v .viewpage .pj_imgwrap{gap: 20px;}
	#bo_v .viewpage .pj_imgwrap .view_image{width:calc(50% - 10px);}
	#bo_w{padding-top: 160px; padding-bottom: 50px;}
}
@media screen and (max-width:960px){
	/* #bo_list_wrap .list_page{padding: 100px 30px 30px;} */
	/* #bo_list_wrap #bo_webzine li.list-item{width: calc(100% / 2 - 5px);} */
	#bo_v .viewpage{padding: 100px 30px 30px;}
	#bo_v .viewpage .pj_cont{flex-direction: column;gap:60px;}
	#bo_v .viewpage .pj_cont .pj_title{width: 100%;min-width: auto;}
	#bo_v .viewpage .pj_cont .pj_title .titBox{margin-bottom: 30px;}
	#bo_v .viewpage .pj_cont .pj_title .titBox p.tit1{font-size: 36px;padding-bottom: 10px;}
	#bo_v .viewpage .pj_cont .pj_title .linkBox .link_con{width: 150px;padding: 7px 0;}
	#bo_v .viewpage .pj_cont .pj_title .linkBox .link_con a{font-size: 15px;}
	#bo_v .view_data{width:100%;}
	#bo_v .viewpage .pj_imgwrap{flex-direction: column;}
	#bo_v .viewpage .pj_imgwrap .view_image{width:100%;}
	#bo_w{padding-top: 100px;}
}
@media screen and (max-width:850px){
	/* #bo_list_wrap #bo_webzine li.list-item{width: 100%;} */
}
@media screen and (max-width:768px){
	#bo_list_wrap{padding: 0;}
	/* #bo_list_wrap .list_page{padding: 100px 20px 20px;border-left: 0;border-right: 0;} */
	#bo_v{padding: 0;}
	#bo_v .viewpage{padding: 100px 20px 20px;border-left: 0;border-right: 0;}	
	#bo_v .viewpage .pj_cont .pj_title .titBox p.tit1{font-size: 30px;}
	#bo_v .viewpage .pj_cont .pj_title .titBox p.tit2{font-size: 16px;}
}
@media all and (max-width:640px){
    #bo_list_wrap .list_page #bo_webzine .list-item .project_hover{padding: 10px;}
    #bo_list_wrap .list_page #bo_webzine .list-item .project_link{padding:10px;}
    #bo_list_wrap .list_page #bo_webzine .list-item .project_link p.tit1{font-size: 20px;}
    #bo_list_wrap .list_page #bo_webzine .list-item .project_btn p.tit2{font-size: 14px;}
    #bo_list_wrap .list_page #bo_webzine .list-item .project_btn img{width: 12px;}
    #bo_list_wrap .list_page #bo_webzine .list-item .squareBox .square{width: 10px;}
}
@media screen and (max-width:500px){
	#bo_v .viewpage .pj_cont{gap:40px;padding: 40px 0;}
	#bo_v .viewpage .pj_cont .pj_title .titBox{margin-bottom: 20px;}
	/* #bo_v .viewpage .pj_cont .pj_title .titBox p.tit1{font-size: 26px;} */
	#bo_v .viewpage .pj_cont .pj_title .linkBox .link_con{width: 135px;}
	#bo_v .viewpage .pj_cont .pj_title .linkBox .link_con a{font-size: 14px;}
	#bo_v .view_data ul li span{font-size: 16px;width: 80px;}
	#bo_v .view_data ul li p{font-size: 16px;width: calc(100% - 80px);}
	#bo_w{padding-bottom: 0;}
}