@charset "utf-8";

.album-detail .bts-room,
.album-detail .army-room{position: relative;max-width:100%;margin-top: 170px;}
.album-detail .bts-room::before,
.album-detail .army-room::before {content: '';display: block;position: absolute;bottom: 0;left: 0;width: 100%;height: calc(100% + 170px);background: #232321;}
.album-detail .bts-room .contents-title,
.album-detail .army-room .contents-title{font-size: 56px;line-height: 49px;z-index:9;}
.album-detail .bts-room .slide-wrap,
.album-detail .army-room .slide-wrap{margin-top: -15px;}
.bts-room .slide-wrap > ul{position: relative;width: 1080px;height: 1080px;margin: 0 auto;font-size: 0;}
.bts-room .slide-wrap > ul > li{position: absolute;width: 100%;height: 100%;top: 0;left: 0;overflow: hidden;z-index:1;}
.bts-room .slide-wrap > ul > li.active{z-index:2;}
.bts-room .slide-wrap .contents-obj{width: 100%;height: 100%;}
.bts-room .slide-wrap .contents-obj .obj-item img{width: 100%;max-width: 100%;}

.army-room .content-wrap{position: relative;margin-top: -15px;text-align: center;font-size: 0;}
.army-room .content-wrap .img-hover{position: relative;display: block;width: 1080px;height: 1080px;margin: auto;}
.army-room .content-wrap .img-hover img{width: 100%;max-width: 100%;}
.army-room .content-wrap .dim{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);opacity: 0;transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;}
.army-room .content-wrap .dim .txt{position: absolute;top: 50%;left: 50%;display: inline-block;border-bottom: 1px solid #fff;font-size: 16px;color: #fff;transform: translate(-50%,-50%);opacity: 0;transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;}
.army-room .content-wrap .img-hover:hover .dim{opacity: 1;}
.army-room .content-wrap .img-hover:hover .dim .txt{opacity: 1;}

/* videos popup */
.btsroom .video_wrap .contents-obj{width: 100%;max-width: 1080px;margin: auto;}

/* custom room popup */
.be section > div.custom_area{position: relative;max-width: 100%;max-height: none;font-size: 0;padding: 0;margin: 0;text-align: center;}
.custom_area .canvas-container{display: inline-block;border: none;}
.custom_area #customImgSave{position: relative;display: block;width: 320px;height: 70px;margin: 60px auto 0;padding: 0 20px;border: 1px solid #777;font-family:'NotoSansCJKkr-R';font-size: 16px;color: #cfcfcf;text-align: left;}
.custom_area #customImgSave::after{position: absolute;top: 50%;right: 20px;transform: translateY(-50%);display: block;width: 18px;height: 21px;background: url('../../images/bts/ic-download.png') 50% 50% no-repeat;background-size: 100%;content: '';}
#canvasDragArea{position: relative !important;border: none;}

@media screen and (max-width: 1440px){
	.album-detail .bts-room, .album-detail .army-room{margin-top: 11.39vw;}
	.album-detail .bts-room::before, .album-detail .army-room::before{height: calc(100% + 11.39vw);}
	.album-detail .bts-room  .contents-title, .album-detail .army-room .contents-title{font-size: 3.89vw;line-height: 3.4vw;}
	.album-detail .bts-room .slide-wrap{margin: -1.04vw auto 0;}
	.album-detail .bts-room .slide-wrap > ul{width: 75vw;height: 75vw;}

	.army-room .content-wrap{font-size: 3.89vw;line-height: 3.4vw;}
	.army-room .content-wrap .img-hover{width: 75vw;height: 75vw;}

	/* custom room popup */
	#canvasDragArea, .custom_area .upper-canvas {width: 100% !important; height: 100% !important; margin: auto;}
}
@media screen and (max-width: 768px){
	.album-detail .bts-room, .album-detail .army-room {margin-top: 16.11vw;background: none;}
	.album-detail .bts-room::before, .album-detail .army-room::before{display: none;}
	.album-detail .bts-room .contents-title, .album-detail .army-room .contents-title {padding: 0 1.25vw;font-size: 9.72vw;line-height: 7.97vw;}
	.album-detail .bts-room .slide-wrap{width: 100%;height: auto;margin-top: -2.21vw;}
	.album-detail .bts-room .slide-wrap > ul{width: 100%;height: auto;}
	.album-detail .bts-room .slide-wrap > ul > li{position: relative;margin-bottom: 5.28vw;}

	.army-room .content-wrap .img-hover{width: 100%;height: 100%;}
	.army-room .content-wrap .dim{display: none;}

	/* custom room popup */
	.custom_area #customImgSave{width: 190px;height: 50px;font-size: 14px;}
	.custom_area #customImgSave::after{width: 14px;height: 17px;}
}
@media screen and (max-width: 320px){
	.album-detail .bts-room {margin-top: 87px;}
	.album-detail .album-player .contents-title {padding: 0 4px;font-size: 30px;line-height: 25px;}
}