@import url(common.css?dt=2022110903);
@import url(css.css?dt=2022110903);

/*FLEX 리스트*/
div.jnl section.productMain{background:#605751;}
div.jnl section.productMain:before{opacity: 0.25; background: url(/images/fo/jnl-main-img.png) no-repeat center center; background-size: cover;}

div.jnl section.product-page{background:#F4F5F7; max-width:100% !important; width:100% !important; margin: 0px !important;}
div.jnl section.product-page .jnl-page{max-width:1200px; width:100%; margin: 0 auto; padding: 60px 0px 120px; }
div.jnl section.product-page article:nth-child(1){ margin-top:0px !important;}

div.jnl .jnl-page .fordesign{background-size: 10px 9px !important; background: url(/images/fo/down.png) #fff 150px center no-repeat;}
div.jnl .jnl-page .product-search input{background:#fff !important;}
div.jnl .jnl-page .jnl-list{width:100%; height:auto;}
div.jnl .jnl-page .jnl-list .jnl-list-box{width:32%; background:#fff; float: left; margin-right: 2%; margin-bottom:5%;}
div.jnl .jnl-page .jnl-list .jnl-list-box:nth-child(3n+0){margin-right:0px;}

div.jnl .jnl-page .jnl-list .jnl-list-box .img{overflow: hidden;  height: 220px;position: relative;}
div.jnl .jnl-page .jnl-list .jnl-list-box .img p.d-day{position: absolute; background:#212529; top:10px; right: 10px;border-radius: 50%; color:#fff; font-size:16px; text-align:center; line-height:70px; height: 70px; width:70px; font-weight: 400; }

div.jnl .jnl-page .jnl-list .jnl-list-box .img a{overflow: hidden; text-align: center; width:100%; height: 100%; display: inline-block;}
div.jnl .jnl-page .jnl-list .jnl-list-box .img a img{width: 100%; height: 100%; object-fit: contain; padding: 10px;}
div.jnl .jnl-page .jnl-list .jnl-list-box:hover{box-shadow: 0 3px 9px rgb(0 0 0 / 6%);}

div.jnl .jnl-page .jnl-list .jnl-list-box .text{width: 100%; padding:20px; letter-spacing: -0.62px; border-top:1px solid #E9ECEF;}
div.jnl .jnl-page .jnl-list .jnl-list-box .text h1{font-size:20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500;}
div.jnl .jnl-page .jnl-list .jnl-list-box .text p.ing span{display: inline-block; width:7px; background:#4386F9; height: 7px; margin-right: 4px; vertical-align: middle;   border-radius: 50%;}
div.jnl .jnl-page .jnl-list .jnl-list-box .text .product-box{height:10px;border-radius: 10px; margin-top: 8px;}
div.jnl .jnl-page .jnl-list .jnl-list-box .text .product-state{padding:6px 0px;}
div.jnl .product-state-piece{font-weight: 500; color: #868e96;}
div.jnl .product-state-piece>span{color:#343a40 !important; font-weight:600;}
div.jnl .product-state-per{font-weight:600; font-size:16px;}
div.jnl .product-state-per.percent{font-size:18px;}
div.jnl .jnl-page .jnl-list .jnl-list-box .text .product-state .product-state-per.blue{color:#4386F9;}
div.jnl .jnl-page .jnl-list .jnl-list-box .text .product-state.recovery{background:#F4F5F7;border-radius: 5px; padding: 6px 10px; margin-top:8px;}
div.jnl .jnl-page .jnl-list .jnl-list-box .text .product-state.recovery .product-state-piece{font-size:14px; font-weight: 500;}
div.jnl .jnl-page .jnl-list .jnl-list-box .text .product-state.recovery p{color:#495057 !important;   font-weight: 500 !important;}

div.jnl .jnl-page .jnl-list .jnl-list-box .text .product-box span.black{background:#343a40;}
div.jnl .jnl-page .jnl-list .jnl-list-box .img.product-finish{ position: relative !important;  background: #f9fafc;}
div.jnl .jnl-page .jnl-list .jnl-list-box .img.product-finish a{opacity: 0.4;}
div.jnl .jnl-page .jnl-list .jnl-list-box .img.product-finish .product-sell{position: absolute;width: 100%; height: 68px; bottom: 0;}
div.jnl .jnl-page .jnl-list .jnl-list-box .img.product-finish .product-sell p.product-sell-text{text-align:right; padding: 0px 5px 5px 0px; }
div.jnl .jnl-page .jnl-list .jnl-list-box .img.product-finish .product-sell p.product-sell-per{background:#4386F9; height: 45px;}
div.jnl .jnl-page .jnl-list .jnl-list-box .img.product-finish .product-sell p.product-sell-per{text-align:center; color:#fff; font-size:16px; line-height: 45px; font-weight: 500;}
div.jnl .jnl-page .jnl-list .jnl-list-box .img.product-finish .product-sell p.product-sell-per i{color: #F8C519; margin-right: 5px;}

div.jnl p.ing{font-size:14px; color:#4386F9; font-weight: 600; }
div.jnl p.ing span{display: inline-block; width:7px; background:#4386F9; height: 7px; margin-right: 4px; vertical-align: middle;   border-radius: 50%;}
div.jnl p.ing.black{color:#212529;}
div.jnl p.ing.black span{background:#212529 !important;}
div.jnl p.ing.gray{color:#868e96;}
div.jnl p.ing.gray span{background:#868e96 !important;}

div.jnl .product-box-bg.black{background:#212529;}
div.jnl .product-box-bg.black:after{opacity:0 !important;}

/*FLEX 상세페이지*/
div.jnl .jnl-detail{max-width:1200px; margin:0 auto; padding: 80px 0px 40px;}
div.jnl #detailImgList .img-list .list{border-radius: 50px;overflow: hidden; background:#fff;}
div.jnl .jnl-detail p.ing{font-size:18px;}
div.jnl .jnl-detail p.ing span{width: 10px; height:10px;}
div.jnl .jnl-detail .detail-right ul.goods-state p{width:50%; display:inline-block; float:left;}
div.jnl .jnl-detail .detail-right ul.goods-state p.url{float:right; background:#fff; border: 1px solid #CDD6DE;  border-radius:20px; width: 70px; height:25px;}
div.jnl .jnl-detail .detail-right ul.goods-state p.url a{color: #868E96; font-size:13px; text-align:center; letter-spacing:-0.72px; display: block; font-weight:500; line-height:25px;}

div.jnl .jnl-detail .product-box{height: 13px;border-radius:50px;}
div.jnl .jnl-detail .detail-texts{padding: 20px 0; margin: 20px 0;}
div.jnl .jnl-detail .detail-texts >li{height: 50px;line-height: 40px;}
div.jnl .product-box-bg:after{
      position: absolute;
      content:'';
      width:100%;
      height:inherit;
      background-image:linear-gradient(45deg,#fff 25%,
                                          rgba(0,0,0,0)25%,
                                          rgba(0,0,0,0) 50%,
                                          #fff 50%,
                                          #fff 75%,
                                          rgba(0,0,0,0) 75%,
                                          rgba(0,0,0,0));
      opacity: 0.2;                                   
      background-size:100%;
      background-size:30px 30px;
      animation: progress-bar .8s infinite linear;
      -webkit-animation: progress-bar .8s infinite linear;
      -moz-animation: progress-bar .8s infinite linear;
      -ms-animation: progress-bar .8s infinite linear;
      -o-animation: progress-bar .8s infinite linear;
}

div.jnl .product-box-bg{background:#4386F9;}

div.jnl .btn-area> li:nth-child(1){background:#fff;}
div.jnl .jnl-buy-btn-active{background:#212529;}
div.jnl .jnl-buy-btn-gray{background:#e1e5e8; color:#adb5bd; cursor: default;}

div.jnl .jnl-bottm-text{margin:60px 0px;}
div.jnl .jnl-bottm-text ul.tabs{margin: 0px;padding: 0px;list-style: none; width:100%; max-width: 1200px;}
div.jnl .jnl-bottm-text ul.tabs li{margin-right: 10px; font-size:16px; display: inline-block;background: #fff; border:1px solid #CDD6DE; color: #868E96; border-radius:40px; cursor: pointer; font-weight:600; max-width:160px;width:100%; line-height: 50px; height: 50px; text-align: center; }
div.jnl .jnl-bottm-text ul.tabs li.current{background: #330D00;color: #fff;}
div.jnl .jnl-bottm-text .tab-content{letter-spacing: -0.62px; display: inherit;margin-top:20px; background: #fff;padding: 25px; border-radius: 10px; box-shadow: 0 3px 9px rgb(0 0 0 / 6%); }
/*div.jnl .jnl-bottm-text .tab-content.current{display: inherit;}*/
div.jnl .jnl-bottm-text .tab-content h1{font-size:18px; font-weight:500;}
div.jnl .jnl-bottm-text .tab-content p{font-size:14px; line-height:23px;}
div.jnl .jnl-bottm-text .tab-content span.bottom-box{background:#ddd; width:40px; height: 3px; display:inline-block; margin:10px 0px 20px;}
div.jnl .jnl-bottm-text #rewardTbl{width:100% !important;}

/*구입완료*/
div.jnl section.buyOk .buy-ok button.buy-ok-btn{background: #330D00;}
.jnl-modal .body ul li h2{color:#330D00 !important;}
.jnl-modal .body .confirm-btn{background:#212529 !important;}

/*구입*/
div.jnl div.mallBuybtn{background:#212529;}
div.jnl .buyForm .buyForm-in .product-box-gray ul.mallBuy-state li.last{color:#330D00 !important;}
div.jnl .buyForm .buyForm-in .product-box-gray ul.mallBuy-state li.mallBuy-state-text span#totalBuyAmt{color:#330D00 !important;}
div.jnl .buyForm .buyForm-in .buyForm-prouduct .w30p{width: 120px; height: 120px; display: block; float: none; margin: 0 auto 20px;}

/*소유자현황*/
div.jnl-container>div{max-width:1200px; margin:40px auto 0; }
div.jnl-container ul.tabs{margin: 0px;padding: 0px;list-style: none; width:100%; max-width: 400px;margin:0 auto;}
div.jnl-container ul.tabs li{font-size:16px; display: inline-block;background: #fff; float:left; color: #868E96;cursor: pointer; font-weight:600; width:50%; line-height: 50px; height: 50px; text-align: center; }
div.jnl-container ul.tabs li.owner-current{background: #0f4c81; color: #fff;}
div.jnl-container .owner-tab{display: none;}
div.jnl-container .owner-tab.owner-current{display: inherit;}
section#tab-2 .ownership-box .ownership-btn{background:#330D00;}
section#tab-2 .ownership-box .ownership-box-img{background:#F5F8FA; }

/*소유자현황 상세페이지*/
div.jnl-in article.ownership-top{width:100%; background: #fff;box-shadow: 0 3px 9px rgb(0 0 0 / 6%); padding: 20px 60px; border-radius: 20px;}
div.jnl-in article.ownership-top .detail-right{height: auto; box-shadow: none;}
div.jnl-in article.ownership-top .detail-right .width25p{padding: 10px; border:none;}
div.jnl-in article.ownership-top .detail-right .width25p p.ing{ font-size: 14px; color: #4386F9; font-weight: 600;}
div.jnl-in article.ownership-top .detail-right .width25p p.ing span.round{ display: inline-block; width: 7px; background: #4386F9;height: 7px;margin-right: 4px;vertical-align: middle;border-radius: 50%;}
div.jnl-in article.ownership-top .detail-right .width25p p.ing.gray{color:#868e96; }
div.jnl-in article.ownership-top .detail-right .width25p p.ing.gray span.round{background:#868e96;}
div.jnl-in article.ownership-top .detail-right .width25p h1{padding-bottom:20px; border-bottom:1px solid #e9ecef;}
div.jnl-in article.ownership-top .detail-right .width25p h1 span.all-ownership{    float: right; font-weight: 400; font-size: 14px; padding-top: 10px;color: #330D00; letter-spacing: -0.72px;}
div.jnl-in article.ownership-top .detail-right .width25p h1 span.all-ownership i{color: #330D00; padding: 0px 2px 5px 0px;}
div.jnl-in article.ownership-top .detail-right .width25p h1 span.all-ownership>span{font-size: 18px;color: #330D00;font-weight: 500;}
div.jnl-in article.ownership-top .detail-left{border:none; height: auto; padding-top: 20px; box-shadow:none; }
div.jnl-in article.ownership-top .detail-left img{width:100%;}
div.jnl-in article.ownership-bottom section.top{background:#330D00;}

/*매각 진행현황*/
div.disposal-container>div{margin: 40px auto 20px !important;}
div.disposal-container>div ul.tabs{box-shadow: 0 3px 9px rgb(0 0 0 / 6%);}
div.jnl-container ul.tabs li.disposal-current{background: #0f4c81; color: #fff;}
div.jnl-container .disposal-tab{display: none;}
div.jnl-container .disposal-tab.disposal-current{display: inherit;}
div.disposal-container #tab-2 section.disposalMain div.disposal-main div.card-box{   border-left: 5px solid #330D00;}

/*매각투표*/
section.jnl-vote section.vote-gray .card h4{color:#330D00;}
section.jnl-vote section.vote-gray .card .vote-list{border-top: 3px solid #330D00;}

/*소유자현황 - 플렉스 공동구매 */
section.jnl-O section.ownershipMain:before{    opacity: 0.25; background: url(/images/fo/jnl-main-img.png) no-repeat center !important;}
section.jnl-O section.productMain {background: #605751 !important;}
section.jnl-O section.voteMain:before{    opacity: 0.25; background: url(/images/fo/jnl-main-img.png) no-repeat center !important;}


@media screen and (min-width:790px) and (max-width:1200px){
	div.jnl-in article.ownership-top{display: inline-grid;}
	div.jnl-in article.ownership-top .detail-left{margin: 0 auto 4%;}
	div.jnl-in article.ownership-top .detail-right{ width: 100% !important;  max-width: 100%;}	
}




@media(max-width:789px) {
	.product-page, .product-page-detail{margin: 40px auto 120px;}
	
	div.jnl .jnl-page .jnl-list .jnl-list-box{width:100%;}
	div.jnl section.product-page .jnl-page{padding:20px 0px 120px;}
	div.jnl section.product-page{padding:20px;}
	
	div.jnl .jnl-page .jnl-list .jnl-list-box{height:auto;}
	div.jnl .jnl-page .jnl-list .jnl-list-box .text p.ing{font-size:12px;}
	div.jnl .jnl-page .jnl-list .jnl-list-box .text h1{font-size:16px;}

	div.jnl .jnl-page .jnl-list .jnl-list-box{height:auto;}
	div.jnl .jnl-page .jnl-list .jnl-list-box .img.product-finish .product-sell p.product-sell-per{font-size:14px;}
	div.jnl .jnl-page .jnl-list .jnl-list-box .text .product-state.recovery .product-state-piece{font-size:13px;}
	div.jnl .jnl-page .jnl-list .jnl-list-box .text .product-state .product-state-per{font-size:14px;}
	
	div.jnl .product-page-detail .detail-top .detail-left{width:100%;}
	div.jnl .jnl-detail{padding: 30px 0px 40px;}
	div.jnl .product-page-detail .detail-top .detail-right{padding:0px;}
	div.jnl .jnl-detail p.ing{font-size:16px;}
	div.jnl .jnl-detail .detail-texts >li{height:30px; line-height:30px;}
	
	div.jnl .jnl-bottm-text ul.tabs li{width: 25%; float: left; height: 40px; line-height:40px;background: #f9fafc; font-size: 13px;font-weight: 500;  margin: 0; border-radius: 0;border: none; max-width: 100%;overflow: hidden;}
	div.jnl .jnl-bottm-text .tab-content{margin:0px; border-radius:0px; padding: 20px;}
	div.jnl .jnl-bottm-text .tab-content h1{font-size:16px;}
	div.jnl .jnl-bottm-text .tab-content span.bottom-box{width:30px; margin:8px 0px 10px;}
	div.jnl .jnl-bottm-text .tab-content p{font-size:12px;}
	
	div.jnl-container ul.tabs li{font-size:14px; font-weight:500;}
	
	div.jnl-in article.ownership-top{display: inline-grid; padding: 0 20px;}
	div.jnl-in article.ownership-top .detail-left{margin: 10px auto 0; padding:0 !important;}
	div.jnl-in article.ownership-top .detail-left img{width:100%; border: 5px solid #330D00;}
	div.jnl-in article.ownership-top .detail-right{ width: 100% !important;  max-width: 100%;}
	div.jnl-in article.ownership-top .detail-right .width25p h1{border:none; font-size:16px; padding-bottom:0px !important;}
	div.jnl-in article.ownership-top .detail-right .width25p h1 span.all-ownership{padding-top: 0px; font-size:12px; text-align: right; display:inline-block; border-bottom:1px solid #e9ecef; width:100%; padding-bottom:10px;}
	div.jnl-in article.ownership-top .detail-right .width25p h1 span.all-ownership>span{font-size:14px;}
	div.jnl-in article.ownership-top .detail-right .width25p-position{height:100px !important; }
	div.jnl-in article.ownership-top .detail-right .width25p-auto{ height: auto; padding-bottom: 20px;}
	div.jnl-in article.ownership-bottom{margin-top:8%;}


}