<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsDetailDescFormWeb.html
 * @desc	: 딜 구상상품상세 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE		 AUTHOR		 DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.24   eskim	   최초 작성
 *******************************************************************************
 -->
 <div class="cont_head">
	<h3 class="sr-only">상품상세정보</h3>
</div>
<div class="cont_body" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
	<!-- 상품설명 노출 -->
	<div class="descrp_box" th:if="${goodsInfo.tobeFormYn == 'Y'}">
		<div class="desc_simple"> <!-- 상품 간략설명-->
			<span class="tit_desc" th:if="${goodsInfo.goodsTitle  != null  and !goodsInfo.goodsTitle.empty}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTitle))}">사이드 밴딩으로 편안한 만능 슬랙스!</span>
			<p class="ptxt01"th:if="${goodsInfo.goodsTitleDesc}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTitleDesc))}">
				슬림핏에 사이드 밴딩으로 편안함을 더해준 슬랙스입니다. 
			</p>
		</div>
		<div class="desc_character" th:if="${goodsInfo.goodsSpecialDesc != null  and !goodsInfo.goodsSpecialDesc.empty}"> <!-- 상품특징 -->
			<span class="tit_desc">상품특징</span>
			<p class="ptxt01" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsSpecialDesc))}">
				- 지퍼플러 장식을 더해 완성도를 높여줌
			</p>
		</div>
	</div>
	<!-- //상품설명 노출 -->
	
	<!-- 관리자 에디터입력 내용   공지 html -->
	<div class="mdhtml_box">
			<th:block th:if="${goodsNoticeList != null and !goodsNoticeList.empty}" >
		<th:block  th:each="goodsNotice, status : ${goodsNoticeList}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsNotice.noticeContent))}"></th:block >
			</th:block>
		<!-- 상세동영상 -->
		<th:block th:if="${goodsDescVideoList != null and !goodsDescVideoList.empty}">
		<th:block th:each="goodsVideo, status : ${goodsDescVideoList}">
		<div style="height:100px"></div><!-- 여백용 html -->
		<div class="movblock">
			<th:block th:if="${goodsVideo.goodsContentsVideoGubun == 'Y'}">
			<iframe th:src="${'https://www.youtube.com/embed/'+goodsVideo.kmcKey}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
			</th:block>
			<th:block th:unless="${goodsVideo.goodsContentsVideoGubun == 'Y'}">
			<iframe th:src="${kollusMediaUrl+'/'+goodsVideo.kmcKey}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
			<iframe width="100%" height="100%" th:src="${kollusMediaUrl+'/'+goodsVideo.kmcKey+'?player_version=html5'}" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
			</th:block>
		</div>
		</th:block>	
		</th:block>
		<!-- 상세 베너 -->
		<th:block th:if="${goodsDescBannerList != null and !goodsDescBannerList.empty}">
		<th:block th:each="goodsBanner, status : ${goodsDescBannerList}" >
		<th:block th:if="${goodsBanner.linkUrl != null and  not #strings.equals(goodsBanner.linkUrl, '#')}" th:with="target=${(goodsBanner.linkTarget == 'N')? '_blank': '_self'}">
			 <div style="height:100px"></div><!-- 여백용 html -->
			<a th:href="${goodsBanner.linkUrl}" th:target="${target}">
			<img th:src="${imgUrl+goodsBanner.imgPath}" alt="">
			</a>
		</th:block>
		<th:block th:unless="${goodsBanner.linkUrl != null and  not #strings.equals(goodsBanner.linkUrl, '#')}">
		 	<div style="height:100px"></div><!-- 여백용 html -->
			<img th:src="${imgUrl+goodsBanner.imgPath}" alt="">
		</th:block>
		</th:block>
		</th:block>
		
		<!-- 관리자 에디터입력 내용 노출  상단 html -->
		<th:block  th:if="${goodsInfo.goodsTopDesc != null  and !goodsInfo.goodsTopDesc.empty }" >
		<div style="height:100px"></div><!-- 여백용 html -->
		<th:block th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTopDesc))}"></th:block>
		</th:block >
		
		<th:block th:if="${goodsInfo.tobeFormYn == 'N' and goodsInfo.goodsDesc != null  and !goodsInfo.goodsDesc.empty}" >
		<div style="height:100px"></div><!-- 여백용 html -->
		<div id="goodsDescHtml"></div>
		</th:block>
	</div>	
			
	<th:block th:if="${goodsInfo.tobeFormYn == 'Y'}">
	<!-- 착용컷 노출 -->
	<div class="view_outfit_box" th:if="${#strings.contains(goodsImgList,'_C1') 
										or #strings.contains(goodsImgList,'_C2')
										or #strings.contains(goodsImgList,'_C3')
										or #strings.contains(goodsImgList,'_C4')
										or #strings.contains(goodsImgList,'_C5')}">
		<span class="tit_view">OUTFIT VIEW</span>
		<span class="model_info">(모델정보 : 185cm / 78kg / XL 착용)</span>
		<div class="view">
			<th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_C1') 
																		or #strings.contains(goodsImg.sysImgNm,'_C2')
																		or #strings.contains(goodsImg.sysImgNm,'_C3')
																		or #strings.contains(goodsImg.sysImgNm,'_C4')
																		or #strings.contains(goodsImg.sysImgNm,'_C5')}">
			<img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=720'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
			</th:block>
		</div>
	</div>
	
	<!-- //착용컷 노출 -->
	<!-- 상품컷 노출 -->
	<div class="view_detail_box" th:if="${#strings.contains(goodsImgList,'_01') or #strings.contains(goodsImgList,'_02')
										or #strings.contains(goodsImgList,'_D1') or #strings.contains(goodsImgList,'_D2')
										or #strings.contains(goodsImgList,'_D3') or #strings.contains(goodsImgList,'_D4')
										or #strings.contains(goodsImgList,'_D5') or #strings.contains(goodsImgList,'_D6')
										or #strings.contains(goodsImgList,'_D7') or #strings.contains(goodsImgList,'_D8')
										or #strings.contains(goodsImgList,'_D9') or #strings.contains(goodsImgList,'_D10')
										or #strings.contains(goodsImgList,'_D11') or #strings.contains(goodsImgList,'_D12')
										or #strings.contains(goodsImgList,'_D13') or #strings.contains(goodsImgList,'_D14')
										or #strings.contains(goodsImgList,'_D15') or #strings.contains(goodsImgList,'_D16')
										or #strings.contains(goodsImgList,'_D17') or #strings.contains(goodsImgList,'_D18')
										or #strings.contains(goodsImgList,'_D19') or #strings.contains(goodsImgList,'_D20')}">
		<span class="tit_view">PRODUCT VIEW</span>
		<div class="view">
			<th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_01') or #strings.contains(goodsImg.sysImgNm,'_02')
																		or #strings.contains(goodsImg.sysImgNm,'_D1') or #strings.contains(goodsImg.sysImgNm,'_D2')
																		or #strings.contains(goodsImg.sysImgNm,'_D3') or #strings.contains(goodsImg.sysImgNm,'_D4')
																		or #strings.contains(goodsImg.sysImgNm,'_D5') or #strings.contains(goodsImg.sysImgNm,'_D6')
																		or #strings.contains(goodsImg.sysImgNm,'_D7') or #strings.contains(goodsImg.sysImgNm,'_D8')
																		or #strings.contains(goodsImg.sysImgNm,'_D9') or #strings.contains(goodsImg.sysImgNm,'_D10')
																		or #strings.contains(goodsImg.sysImgNm,'_D11') or #strings.contains(goodsImg.sysImgNm,'_D12')
																		or #strings.contains(goodsImg.sysImgNm,'_D13') or #strings.contains(goodsImg.sysImgNm,'_D14')
																		or #strings.contains(goodsImg.sysImgNm,'_D15') or #strings.contains(goodsImg.sysImgNm,'_D16')
																		or #strings.contains(goodsImg.sysImgNm,'_D17') or #strings.contains(goodsImg.sysImgNm,'_D18')
																		or #strings.contains(goodsImg.sysImgNm,'_D19') or #strings.contains(goodsImg.sysImgNm,'_D20')}">
			<img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=720'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
			</th:block>
		</div>
	</div>
	<!-- //상품컷 노출 -->
	<!-- 원단 노출 -->
	<div class="view_fabric_box" th:if="${#strings.contains(goodsImgList,'_F1')}">
		<span class="tit_view">FABRIC</span>
		<div class="view">
			<th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_F1')}">
			<img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=720'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
			</th:block>
		</div>
	</div>
	<!-- //원단 노출 -->
	<!-- 라벨 노출 -->
	<div class="view_label_box" th:if="${#strings.contains(goodsImgList,'_L1') 
										or #strings.contains(goodsImgList,'_L2')}">
		<span class="tit_view">LABEL INFO</span>
		<div class="view">
			<span>
				<th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_L1') 
																		or #strings.contains(goodsImg.sysImgNm,'_L2')}">
				<img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=250'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
				</th:block>
			</span>
		</div>
	</div>
	<!-- //라벨 노출 -->
	
	<!-- //네이밍룰 안맞는 이미지 노출 -->
	<div class="view_detail_box" th:if="${not #strings.contains(goodsImgList,'_01')}">
		<div class="view">
			<th:block th:each="goodsImg, status : ${goodsImgList}" >
				<img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=720'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
				</th:block>
		</div>
	</div>
	</th:block>
		
	<!-- 관리자 에디터입력 내용 노출  하다단 html -->
	<div class="mdhtml_box" th:if="${goodsInfo.goodsDownDesc != null  and !goodsInfo.goodsDownDesc.empty}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsDownDesc))}"></div>
		
	<!-- 브랜드 노출 -->
	<div class="brand_box">
		<p class="name" th:text="${goodsInfo.brandGroupNm}">TBJ 티비제이</p>
		<a href="javascript:void(0);" class="btn btn_default" th:onclick="cfnGoToBrandMain([[${goodsInfo.brandGroupNo}]])" ><span>브랜드 홈 바로가기</span></a>
	</div>
	<!-- //브랜드 노출 -->
	<!-- 상품필수정보 노출 -->
	<div class="required_box" >
		<div class="area_infotbl" th:if="${goodsInfo.goodsType == 'G056_N' and goodsNotiList != null and !goodsNotiList.empty}">
			<span class="title">상품고시정보</span>
			<div class="tbl type1 mt30">
				<table>
					<tbody>
						<tr  th:each="goodsNoti, status : ${goodsNotiList}" >
							<th th:text="${goodsNoti.niItemNm}">스타일</th>
							<td th:text="${goodsNoti.niContent}">F94U-MD01XA60F0</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div class="area_infotbl" th:if="${goodsInfo.goodsType == 'G056_S' and goodsComposeList != null and !goodsComposeList.empty}">
			<span class="title">상품고시정보</span>
			<th:block th:each="goodsCompose, status : ${goodsComposeList}">
			<div class="tbl type1 mt30">
				<table>
					<tbody>
						<tr  th:each="goodsNoti, status : ${goodsCompose.goodsNotiList}" >
							<th th:text="${goodsNoti.niItemNm}">스타일</th>
							<td th:text="${goodsNoti.niContent}">F94U-MD01XA60F0</td>
						</tr>
					</tbody>
				</table>
			</div>
			</th:block>
		</div>
		
		<th:block th:if="${goodsSafeNo != null}" >
			<th:block th:if="${goodsSafeNo.certTargetGb == 'G083_3'}" >  <!-- 상세별도표시 -->
		<div class="area_kcl no-mark">
			<p class="tit normal"><th:block th:if="${goodsSafeNo.certFormNm}" th:text="${goodsSafeNo.certFormNm}"></th:block>
								<th:block th:if="${goodsSafeNo.certTypeNm}" th:text="${' ' + goodsSafeNo.certTypeNm}"></th:block> / 제품 상세정보 내 별도 표기</p>
			<p class="normal">제품 상세정보 내 표기되어 있습니다. 상품 정보를 확인해주세요.</p>
			<p class="t_info dot_info">해당 인증정보는 판매자가 등록한 것으로 등록정보에 대한 일체의 책임은 판매자에게 있습니다.</p>
		</div>	
			</th:block>
			<th:block th:unless="${goodsSafeNo.certTargetGb == 'G083_3'}" > <!-- 인증 -->
				<th:block th:if="${goodsSafeNo.certType == 'G081_3'}" > <!-- 공급자적합성 -->
		<div class="area_kcl">
			<i class="ico ico_kcl"></i>
			<p class="tit normal"><th:block th:if="${goodsSafeNo.certFormNm}" th:text="${goodsSafeNo.certFormNm}"></th:block>
									<th:block th:if="${goodsSafeNo.certTypeNm}" th:text="${' ' + goodsSafeNo.certTypeNm}"></th:block> / 공급자적합성확인</p>
			<p class="normal">공급자 적합성 확인 품목으로 국가통합인증을 필함</p>
			<p class="t_info dot_info">해당 인증정보는 판매자가 등록한 것으로 등록정보에 대한 일체의 책임은 판매자에게 있습니다.</p>
		</div>
				</th:block>
				<th:block th:unless="${goodsSafeNo.certType == 'G081_3'}" > <!-- 공급자적합성 외 -->
		<div class="area_kcl" >
			<i class="ico ico_kcl"></i>
			<th:block th:if="${goodsSafeNo.certFormGb != 'G084_4' and  goodsSafeNo.certFormGb != 'G084_5' }">
			<p class="tit normal" >
				<th:block th:if="${goodsSafeNo.certDiv}" th:text="${goodsSafeNo.certDiv}"></th:block>
				<th:block th:if="${goodsSafeNo.certOrganName}" th:text="${' /' + goodsSafeNo.certOrganName}"></th:block>
			</p>
			</th:block>
			<th:block th:unless="${goodsSafeNo.certFormGb != 'G084_4' and  goodsSafeNo.certFormGb != 'G084_5' }">
			<p class="tit normal">
				<th:block th:if="${goodsSafeNo.certFormNm}" th:text="${goodsSafeNo.certFormNm}"></th:block>
				<th:block th:if="${goodsSafeNo.certTypeNm}" th:text="${' ' + goodsSafeNo.certTypeNm}"></th:block>
			</p>
			</th:block>
			<p class="normal" >
				<th:block th:if="${goodsSafeNo.certNum}" th:text="${'인증번호: ' + goodsSafeNo.certNum}"></th:block>
				<th:block th:if="${goodsSafeNo.certFormGb != 'G084_4' and  goodsSafeNo.certFormGb != 'G084_5' }">
				<a th:href="@{http://www.safetykorea.kr/search/searchPop(certNum=${goodsSafeNo.certNum})}" target="_blank" class="linktxt3">상세보기</a>
				</th:block>
			</p>
			<p class="t_info dot_info">
				해당 인증정보는 판매자가 등록한 것으로 등록정보에 대한 일체의 책임은 판매자에게 있습니다.
			</p>
		</div>
				</th:block>
			</th:block>
		</th:block>
		
		<div class="area_infotbl">
			<span class="title">상품기본정보</span>
			<div class="tbl type1 mt30">
				<table>
					<tbody>
						<tr>
							<th>상품코드</th>
							<td th:text="${goodsInfo.goodsCd}">14443216</td>
						</tr>
						<tr>
							<th>상품구분</th>
							<td th:text="${goodsInfo.goodsGbNm}">병행수입</td>
						</tr>
						<tr>
							<th>브랜드</th>
							<td th:text="${goodsInfo.brandGroupNm}">TBJ</td>
						</tr>
						<tr>
							<th>상품명</th>
							<td th:text="${goodsInfo.goodsNm}">남성 테이퍼드 핏 겨울 기모면 스판 올 밴딩 팬츠</td>
						</tr>
						<th:block th:if="${goodsInfo.goodsType == 'G056_N' and goodsNotiList != null and !goodsNotiList.empty}">
									<th:block th:each="goodsNoti, status : ${goodsNotiList}"  th:if="${goodsNoti.niItemCd == 'G005_005'}">
									<tr>
										<th th:text="${goodsNoti.niItemNm}">제조사</th>
										<td th:text="${goodsNoti.niContent}"></td>
									</tr>
									</th:block>
									</th:block>
						<tr>
							<th>제조국</th>
							<td th:text="${goodsInfo.originNm}">베트남</td>
						</tr>
					</tbody>
				</table>
			</div>
			<p class="t_info dot_info mt20">
				주문제작 상품의 경우 주문 후 제작되어 판매되는 상품으로 제작 시점부터 반품/교환이 어려울 수 있습니다.
			</p>
		</div>
	</div>
	<!-- //상품필수정보 노출 -->
</div>
<div class="btn_more_box covered">
	<button type="button" class="btn btn_default btn_md">
		<span>상세정보 더보기</span>
	</button>
</div>

<script th:inline="javascript">
/*<![CDATA[*/

// 상품상세 asis html  이지미 경로 수정
   $(document).ready( function() {
   	 $(".pd_descrp_pop .cont_body").find('img').each(function() {
			let tmpImgSrc = $(this).attr('src');
			if (tmpImgSrc.indexOf('Upload') == 1 ){  // /Upload
				$(this).attr('src' , tmpImgSrc.replace('/Upload', _imgUrl+"/Local").replace('/Upload/Local', "/Local"));
			}
		});
   //210526_ 추가 : 이미지 style 속성 제거
	$(".mdhtml_box style").remove();$(".mdhtml_box img").removeAttr("style");
   	
	});
	
 //상품상세 적용
	// 입점 html 에 태그가 정상적이지 않아 스크립트로 처리
	let goodsDesc = [[${goodsInfo.goodsDesc}]];
	if ("N" == [[${goodsInfo.tobeFormYn}]] && !gagajf.isNull(goodsDesc)){
		$('#goodsDescHtml').html([[${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsDesc))}]]);
	}
	
/*]]>*/
</script>	
</html>