1. allow="video-autoplay" 추가

2. header .hmenu .scrollWrap {height: calc(100vh - 9.7rem);-webkit-box-sizing: border-box;box-sizing: border-box;overflow-y: auto; border-bottom: 6.5rem solid #fff;}
3. .br .br_main .submain_visual .txtWrap p {font-size: 3rem; font-weight: 500; line-height: 1.2; display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 4;-webkit-box-orient: vertical; overflow:hidden;}
4. window.load 시 scrollTop 제거
5. .brand_main .post-visual .swiper-slide .txtWrap {width : 30% ▶ width: 80%; 로 변경
6.  ScriptMob.html 추가 <script type="text/javascript" th:src="@{'/ux/plugins/vg-controller-client.latest.min.js'}" src="/ux/plugins/vg-controller-client.latest.min.js"></script>
7. ScriptWeb.html 추가 <script type="text/javascript" th:src="@{'/ux/plugins/vg-controller-client.latest.min.js'}" src="/ux/plugins/vg-controller-client.latest.min.js"></script>
8. 제거 <script src="https://file.kollus.com/vgcontroller/vg-controller-client.latest.min.js"></script>\

src/main/webapp/WEB-INF/views/mob/common/fragments/ScriptsMob.html

@@ -19,6 +19,6 @@
 <script th:src="@{'/ux/style24_link.js'}" src="/ux/style24_link.js"></script>
 <script type="text/javascript" th:src="@{'/ux/plugins/gaga/gaga.common.js'}" src="/ux/plugins/gaga/gaga.common.js"></script>
 <script type="text/javascript" th:src="@{'/ux/plugins/gaga/gaga.validation.js'}" src="/ux/plugins/gaga/gaga.validation.js"></script>
-<script type="text/javascript" th:src="@{'/ux/plugins/vg-controller-client.latest.min.js'}"></script>
+<script type="text/javascript" th:src="@{'/ux/plugins/vg-controller-client.latest.min.js'}" src="/ux/plugins/vg-controller-client.latest.min.js"></script>
 </th:block>
 </html>

src/main/webapp/WEB-INF/views/mob/common/layout/DefaultLayoutMob.html

@@ -9,7 +9,6 @@
 
 <th:block th:replace="~{web/common/fragments/VariablesWeb :: variables}"></th:block>
 <th:block th:replace="~{mob/common/fragments/ScriptsMob :: scripts}"></th:block>
-<script src="https://file.kollus.com/vgcontroller/vg-controller-client.latest.min.js"></script>
 
 <div class="app">
 	<!-- GNB -->

src/main/webapp/WEB-INF/views/mob/display/BrandMainFormMob.html

@@ -98,7 +98,7 @@
 														<div class="itemPic">
 															<th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
 																<iframe th:if="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${'https://www.youtube.com/embed/'+videoArr[1]+'?autoplay=1&mute=1'}"></iframe>
-																<iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
+																<iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov video-autoplay" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="autoplay" allowFullScreen></iframe>
 															</th:block>
 															<img class="vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
 														</div>
@@ -177,7 +177,7 @@
 															<div class="itemPic">
 																<th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
 																	<iframe th:if="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${'https://www.youtube.com/embed/'+videoArr[1]+'?autoplay=1&mute=1'}"></iframe>
-																	<iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
+																	<iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov video-autoplay" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
 																</th:block>
 																<img class="vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm.replace('https:', '').replace('//image.istyle24.com/Upload/ProductImage/','')}" onerror="noneImg(this)">
 															</div>
@@ -266,7 +266,7 @@
 															<div class="itemPic">
 																<th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
 																	<iframe th:if="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${'https://www.youtube.com/embed/'+videoArr[1]+'?autoplay=1&mute=1'}"></iframe>
-																	<iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
+																	<iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov video-autoplay" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
 																</th:block>
 																<img class="vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm.replace('https:', '').replace('//image.istyle24.com/Upload/ProductImage/','')}" onerror="noneImg(this)">
 															</div>
@@ -367,7 +367,7 @@
 											<div class="itemPic">
 												<th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
 													<iframe th:if="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${'https://www.youtube.com/embed/'+videoArr[1]+'?autoplay=1&mute=1'}"></iframe>
-													<iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
+													<iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov video-autoplay" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
 												</th:block>
 												<img class="vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
 											</div>
@@ -446,7 +446,6 @@
 	<a href="#close-modal" rel="modal:close" class="close-modal ">Close</a>
 </div>
 <!-- //픽커모달 -->
-
 <script th:inline="javascript">
 	var goodsImgUrl = [[${@environment.getProperty('upload.goods.view')}]];
 
@@ -528,14 +527,17 @@
 		});
 
 
-		var controller = new VgControllerClient({
-			target_window: document.getElementsById('pdThumbVideo').contentWindow
-		});
-		controller.on('ready', function() {
-// 			controller.set_ratio('fill');
-			controller.set_control_visibility(false);
-			controller.play();
-		});
+// 		if(typeof VgControllerClient == 'object'){
+			var controller = new VgControllerClient({
+				target_window: document.getElementById('pdThumbVideo').contentWindow
+			});
+			controller.on('ready', function() {
+	// 			controller.set_ratio('fill');
+				controller.set_control_visibility(false);
+				controller.play();
+			});
+// 		}
+
 
 
 	});

src/main/webapp/WEB-INF/views/web/common/fragments/ScriptsWeb.html

@@ -19,6 +19,6 @@
 <script th:src="@{'/ux/style24_link.js'}" src="/ux/style24_link.js"></script>
 <script type="text/javascript" th:src="@{'/ux/plugins/gaga/gaga.common.js'}" src="/ux/plugins/gaga/gaga.common.js"></script>
 <script type="text/javascript" th:src="@{'/ux/plugins/gaga/gaga.validation.js'}" src="/ux/plugins/gaga/gaga.validation.js"></script>
-<script type="text/javascript" th:src="@{'/ux/plugins/vg-controller-client.latest.min.js'}"></script>
+<script type="text/javascript" th:src="@{'/ux/plugins/vg-controller-client.latest.min.js'}" src="/ux/plugins/vg-controller-client.latest.min.js"></script>
 </th:block>
 </html>

src/main/webapp/biz/goods.js

@@ -281,7 +281,7 @@ var fnCreateGoodsList = function(result, ithrCd, contentLoc, goodsUrl, lastPage,
 					tag += '<iframe id="pdThumbVideo" class="pd_mov" src="https://www.youtube.com/embed/' + videoUrl + '?autoplay=1&mute=1"></iframe>';
 					//tag += '<iframe id="pdThumbVideo" class="pd_mov" src="http://v.kr.kollus.com/164MyIiv?enable_initialize_focus=false&autoplay&mute&controls_activation=none" allow="fullscreen" allowFullScreen></iframe>';
 				} else {
-					tag += '<iframe id="pdThumbVideo" class="pd_mov" src="' + _kollusMediaUrl + '/' + videoUrl + '?enable_initialize_focus=false&autoplay&mute&controls_activation=none" allow="fullscreen" allowFullScreen></iframe>';
+					tag += '<iframe id="pdThumbVideo" class="pd_mov video-autoplay" src="' + _kollusMediaUrl + '/' + videoUrl + '?enable_initialize_focus=false&autoplay&mute&controls_activation=none" allow="fullscreen" allowFullScreen></iframe>';
 				}
 			}
 			// tag += '		<img class=" vLHTC pd_img" src="' + item.sysImgNm + '" data-img="' + item.sysImgNm2 + '" onerror="noneImg(this)">';

src/main/webapp/biz/search.js

@@ -62,7 +62,7 @@ var fnCreateGoodsList = function(result, ithrCd, contentLoc, goodsUrl, lastPage,
 					tag += '<iframe id="pdThumbVideo" class="pd_mov" src="https://www.youtube.com/embed/'+videoUrl+'?autoplay=1&mute=1"></iframe>';
 					//tag += '<iframe id="pdThumbVideo" class="pd_mov" src="http://v.kr.kollus.com/164MyIiv?enable_initialize_focus=false&autoplay&mute&controls_activation=none" allow="fullscreen" allowFullScreen></iframe>';
 				}else{
-					tag += '<iframe id="pdThumbVideo" class="pd_mov" src="'+_kollusMediaUrl+'/'+videoUrl+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none" allow="fullscreen" allowFullScreen></iframe>';
+					tag += '<iframe id="pdThumbVideo" class="pd_mov" src="'+_kollusMediaUrl+'/'+videoUrl+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none" allow="video-autoplay" allowFullScreen></iframe>';
 				}
 			}
 			var imgUrl = "//image.istyle24.com/Upload/ProductImage/";
@@ -195,7 +195,7 @@ var fnCreateGoodsList = function(result, ithrCd, contentLoc, goodsUrl, lastPage,
 		// 		tag += adBannerTag;
 		// 	}
 		// }
-		
+
 		if (cnt == 1) {
 			// <!-- Criteo 카테고리/리스팅 태그 -->
 			window.criteo_q = window.criteo_q || [];

src/main/webapp/ux/mo/css/common_m.css

@@ -689,7 +689,7 @@ header .hmenu {position: absolute;left: 0;bottom: 100%;background-color: rgba(0,
 header .hmenu .inner {padding: 0;background-color: #fff;position: relative;top: 0;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
 header .hmenu.on {bottom: 0;}
 header .hmenu.on .inner {top: 100%;}
-header .hmenu .scrollWrap {height: calc(100vh - 9.7rem);-webkit-box-sizing: border-box;box-sizing: border-box;overflow-y: auto;}
+header .hmenu .scrollWrap {height: calc(100vh - 9.7rem);-webkit-box-sizing: border-box;box-sizing: border-box;overflow-y: auto; border-bottom: 6.5rem solid #fff;}
 
 header .hmenu .bng{background: #ffffff;}
 header .hmenu .bng .d1 > li{position: relative;height: 7.2rem;border-bottom: 0.1rem solid #eeeeee;}

src/main/webapp/ux/mo/css/layout_m.css

@@ -2177,7 +2177,7 @@
 .br .br_main .submain_visual a:after {content:''; position: absolute; left: 0; bottom: 0; width: 100%; height: 60%; background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 100%);}
 .br .br_main .submain_visual .txtWrap {position: absolute; left: 2rem; right: 2rem; bottom: 9rem; color: #222; z-index:1;}
 .br .br_main .submain_visual .txtWrap.w {color: #fff;}
-.br .br_main .submain_visual .txtWrap p {font-size: 3rem; font-weight: 500; line-height: 1.2; display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow:hidden;}
+.br .br_main .submain_visual .txtWrap p {font-size: 3rem; font-weight: 500; line-height: 1.2; display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 4;-webkit-box-orient: vertical; overflow:hidden;}
 .br .br_main .submain_visual .txtWrap p.txt_xs {font-size: 1.4rem; margin-top: 1.6rem; font-weight: 300; -webkit-line-clamp: 1;}
 .br .br_main .br_top_info{position:relative; margin-top:-1rem; padding-top: 0;}
 .br .br_main .br_top_info .br_subtitle{text-align:left; padding-top: 0;}

src/main/webapp/ux/mo/js/common_m.js

@@ -1,19 +1,19 @@
 
-/* * * * * * * * * * * * * * * * * * * * * * * 
+/* * * * * * * * * * * * * * * * * * * * * * *
 
 1. Init    (초기설정)
 
 * * * * * * * * * * * * * * * * * * * * * */
 window.addEventListener('load', function(){
-    setTimeout(scrollTo, 0, 0, 1);
+//    setTimeout(scrollTo, 0, 0, 1);
   }, false);
 
 // 210819_ touch, scroll event
-var xScrStart, yScrStart = 0; 
+var xScrStart, yScrStart = 0;
 document.addEventListener('touchstart', function(e) {
     xScrStart = e.touches[0].scrareaX;
     yScrStart = e.touches[0].scrareaY;
-}); 
+});
 document.addEventListener('touchmove', function(e) {
     var xMovement = Math.abs(e.touches[0].scrareaX - xScrStart);
     var yMovement = Math.abs(e.touches[0].scrareaY - yScrStart);
@@ -25,7 +25,7 @@ document.addEventListener('touchmove', function(e) {
 $(document).ready(function() {
         // 웹페이지가 브라우징된 후 주소창 제거
         window.addEventListener("load", function () {
-            setTimeout(scrollTo, 0, 0, 1);
+//            setTimeout(scrollTo, 0, 0, 1);
         }, false);
         //210608_히스토리백 스크립트
         $(".btn_back").on("click", function () {
@@ -41,12 +41,12 @@ $(document).ready(function() {
             exdate.setDate(exdate.getDate() + exdays);
             var cookieValue = escape(value) + ((exdays==null) ? "" : "; expires=" + exdate.toGMTString());
             document.cookie = cookieName + "=" + cookieValue;
-        }        
+        }
         function deleteCookie(cookieName){
             var expireDate = new Date();
             expireDate.setDate(expireDate.getDate() - 1);
             document.cookie = cookieName + "= " + "; expires=" + expireDate.toGMTString();
-        }        
+        }
         function getCookie(cookieName) {
             cookieName = cookieName + '=';
             var cookieData = document.cookie;
@@ -76,7 +76,7 @@ $(document).ready(function() {
         window.onpageshow = function(event) {
             if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) {
             // Back Forward Cache로 브라우저가 로딩될 경우 혹은 브라우저 뒤로가기 했을 경우
-                if (category != "" && category != 'undefined' 
+                if (category != "" && category != 'undefined'
                     && category == currentCategory && scrollPoint != "" && scrollPoint != 'undefined') {
                     $('html').animate({scrollTop : scrollPoint}, 400);
                 }
@@ -130,9 +130,9 @@ $(document).ready(function() {
                 }, 50);
             }
         });
-        
 
-        // items like on/off       
+
+        // items like on/off
         $(document).on('click','.itemLike',function(){
             $(this).toggleClass("likeit");
         });
@@ -140,7 +140,7 @@ $(document).ready(function() {
 });
 
 
-/* * * * * * * * * * * * * * * * * * * * * * * 
+/* * * * * * * * * * * * * * * * * * * * * * *
 
 2. Utility (유틸리티)
 
@@ -225,7 +225,7 @@ $(document).ready(function() {
                 fileReader.readAsDataURL(f);
                     var maxFileLength = 2; /* 최대 파일 갯수를 입력해 주세요 */
                         var imgFiles=$('.imgUpload .pics');
-                        
+
                         if (imgFiles.length >= maxFileLength-1) {
                             $('#fileAdds').attr("disabled",true);
                             cmtLa.css('display', 'none');
@@ -243,9 +243,9 @@ $(document).ready(function() {
     $( document ).ready(function() {
         var $chkAll = $('.check-all');
             $chkAll.change(function () {
-                var checked = $(this).prop('checked'); 
+                var checked = $(this).prop('checked');
                 $('input[name="dd"]').prop('checked', checked);
-            });            
+            });
         var ddChk = $('input[name="dd"]');
             ddChk.change(function () {
                 var ddChkLength = ddChk.length;
@@ -324,7 +324,7 @@ $( document ).ready( function() {
         });
 
 
-/* * * * * * * * * * * * * * * * * * * * * * * 
+/* * * * * * * * * * * * * * * * * * * * * * *
 
 2. Page Setting    (페이지세팅)
 
@@ -416,7 +416,7 @@ $(document).ready(function () {
         })
         window.onload = function() {
             setTimeout (function () {
-                scrollTo(0,0);
+//                scrollTo(0,0);
             },1);
         }
         // GNB
@@ -435,7 +435,7 @@ $(document).ready(function () {
             var d2_H = $(this).siblings(".d2").children("li").length * 39;
 
             if ( $(this).parent().hasClass("on") ) {
-                
+
                 $(this).siblings(".d2").animate({
                     "height": 0, "padding-top": 0, "padding-bottom": 0
                 }, 500 , function() {
@@ -551,9 +551,9 @@ $(document).ready(function () {
             var boxHarf = box.width()/2;
             var pos;
             var listWidth=0;
-            
+
             snbwrap.find('.swiper-slide').each(function(){ listWidth += $(this).outerWidth(); })
-            
+
             var selectTargetPos = targetPos.left + target.outerWidth()/2;
             if (selectTargetPos <= boxHarf) { // left
                 pos = 0;
@@ -562,7 +562,7 @@ $(document).ready(function () {
             }else {
                 pos = selectTargetPos - boxHarf;
             }
-            
+
             setTimeout(function(){snbwrap.css({
                 "transform": "translate3d("+ (pos*-2) +"px, 0, 0)",
                 "transition-duration": "500ms"
@@ -633,7 +633,7 @@ $(document).ready(function () {
         // 구매하기팝업
         // pop open
         function popOpenScroll(){
-            $('html, body').css({'overflow': 'hidden', 'height': '100%'}); 
+            $('html, body').css({'overflow': 'hidden', 'height': '100%'});
             $('#element').on('scroll touchmove mousewheel', function(event) { // 터치무브, 휠 스크롤 방지
                 event.preventDefault();
                 event.stopPropagation();
@@ -645,7 +645,7 @@ $(document).ready(function () {
             $('html, body').css({'overflow': 'auto', 'height': '100%'}); //n 해제
             $('#element').off('scroll touchmove mousewheel'); // 터치무브, 휠 스크롤 가능
             return false;
-        }        
+        }
         // popup (media)
         $(".btn_popOpen").on("click", function(e) {
             popOpenScroll();
@@ -677,7 +677,7 @@ $(document).ready(function () {
             $('.container').addClass('btPop_full_open');
             return false;
         });
-        
+
         $('.btPop_full_close').click(function(){
             popClsScroll();
             $('.container').removeClass('btPop_full_open');
@@ -703,7 +703,7 @@ $(document).ready(function () {
             },2000);
             return false;
         });
-        let autome = document.querySelector('.btPopAuto'); 
+        let autome = document.querySelector('.btPopAuto');
         $('.btPop_auto').click(function(){
             popOpenScroll();
             $('.container').addClass('btPop_open');
@@ -719,7 +719,7 @@ $(document).ready(function () {
         });
 
 });
-        
+
 
 
 /* branch */
@@ -757,12 +757,12 @@ $( document ).ready( function() {
         $('.htop .home').css({"display": "inline-block"});
     };
 
-    
+
     /* 마이페이지_Header Style */
     let container = document.getElementsByClassName('container');
     if($(container).hasClass('my')){
         $('.htop').css({"border-bottom": "1px solid rgba(0, 0, 0, 0.1)"});
-    };    
+    };
     /* 마이페이지_비회원_Header Style */
     let myPage = document.getElementsByClassName('my');
     if($(myPage).children("nav").hasClass("pnb")){
@@ -771,7 +771,7 @@ $( document ).ready( function() {
         $('.htop .store').css({"display": "none"});
     };
 
-    
+
     /* 210805_ 추가 : 고객센터_Header Style */
     /* 210813_ 제거 : 고객센터 '.htop .home').css({"display": "inline-block"}) */
 
@@ -782,7 +782,7 @@ $( document ).ready( function() {
     if($(schPage).children("section").hasClass("sch_result")){
         $('.htop h1').css({"display": "none"});
         $('.htop .search').css({"display": "none"});
-    };  
+    };
         /* 210428_수정 : 아코디언 */
         $(document).on('click','.cs .foldGroup .fold_head, .my .foldGroup .fold_head',function(e){
             $(this).toggleClass('on');
@@ -802,11 +802,11 @@ $( document ).ready( function() {
             } else {
                 $(this).siblings('.btn_x').attr('style', 'visibility: visible');
             }
-            });        
+            });
             $(this).find('.cs_search_input').on('blur', function(){
             $(this).siblings('.btn_x').attr('style', 'visibility: hidden');
             });
-        
+
             $(this).find('.btn_x').on('click touchstart', function(){
             $(this).closest('.search_wrap').find('.cs_search_input').val('');
             $(this).closest('.search_wrap').find('.btn_x').attr('style', 'visibility: hidden');
@@ -816,7 +816,7 @@ $( document ).ready( function() {
 
         /* 주문결제_accordion */
         /* 210428_수정 : 아코디언 */
-        $(document).on('click','.od .foldGroup .fold_head .fold_tit',function(e){	
+        $(document).on('click','.od .foldGroup .fold_head .fold_tit',function(e){
             $(this).parents('.foldGroup li').find('.fold_cont').slideToggle(100);
             $(this).parents('.fold_head').toggleClass('on');
 
@@ -833,7 +833,7 @@ $( document ).ready( function() {
         /* 210428_수정 : 아코디언 */
 
         /* 상품문의_accordion */
-        $(document).on('click','.pd_qnalist .foldGroup .fold_head',function(e){	
+        $(document).on('click','.pd_qnalist .foldGroup .fold_head',function(e){
             if($(this).parent().hasClass('secret_qna')){
                 mcxDialog.alert("비밀글은 열람하실 수 없습니다.", {
                     sureBtnText: "확인",
@@ -858,5 +858,5 @@ $( document ).ready( function() {
             $('footer .btn_top').css('bottom', 'clac(constant(safe-area-inset-bottom) + 6.5rem);');
             $('footer .btn_top').css('bottom', 'calc(env(safe-area-inset-bottom) + 6.5rem)');
         }
-          
+
 });

src/main/webapp/ux/pc/css/main.css

@@ -13,11 +13,11 @@
 .slide-curb {display:inline-block; vertical-align:middle; font-size:0; margin-left:5px;}
 .swiper-controls {position:relative; margin:0px; text-align:center; font-size:16px;}
 .post-visual .slide-curb {position:absolute; top:5px; right:0;}
- 
+
 .main_visual .slide-curb-play {position:relative; display:none; width:8px;height:12px;font-size:0; cursor:pointer;}
 .main_visual .slide-curb-play:after {content:""; position:absolute;top:0; left:0;  border:6px solid transparent; border-left:9px solid #888;border-right:0; cursor:pointer;}
 .main_visual .slide-curb-pause {width:8px;height:12px;font-size:0;text-align:left;}
-.main_visual .slide-curb-pause:after, 
+.main_visual .slide-curb-pause:after,
 .main_visual .slide-curb-pause:before {content:"";display:inline-block;width:2px;height:12px;background:#888;}
 .main_visual .slide-curb-pause:before {float:right;}
 .main_visual .swiper-controls .swiper-pagination {position: relative;width:auto;display: inline-block;}
@@ -32,7 +32,7 @@
 }
 .btn_shape.active:after{
 	content:"";bottom:0px;right:0px;position:absolute;height:0px;width:0;padding:0px 0px 0px 0px;background:#222222;
-	border-left:0px solid #ffffff;border-top:10px solid #222222;border-right:10px solid #f5f5f5;	
+	border-left:0px solid #ffffff;border-top:10px solid #222222;border-right:10px solid #f5f5f5;
 }
 /* 각버튼 테스트2 종료 */
 /*  각버튼 테스트  */
@@ -44,8 +44,8 @@
 }
 .test_btn:after{
 	content:"";bottom:-1px;right:-1px;position:absolute;height:0px;width:0;padding:0px 0px 0px 0px;
-	border-left:0px solid #0183fd;border-top:10px solid #0183fd;border-right:10px solid #ffffff;	
-}	
+	border-left:0px solid #0183fd;border-top:10px solid #0183fd;border-right:10px solid #ffffff;
+}
 
 
 /* main */
@@ -60,7 +60,7 @@
 
 .main_visual::before {content:'';display:block;width:100%; height:172px; position:absolute; top:-100px; left:0; background:#222222; z-index:-1;}
 .post-visual .btn {font-weight:300; border:1px solid #a7a7a7;}
-.post-visual .txtWrap{position:absolute; top:auto;bottom:100px;left:90px;right:auto;z-index:1; width: 85%;} 
+.post-visual .txtWrap{position:absolute; top:auto;bottom:100px;left:90px;right:auto;z-index:1; width: 85%;}
 .post-visual .txtWrap dl,
 .post-visual .txtWrap dl + .btn {opacity:0; transition:all 200ms ease;}
 .post-visual .txtWrap dl {color:#222; line-height:1; padding-bottom:40px;}
@@ -73,7 +73,7 @@
 .post-visual.swiper-container {margin-left:-30px;}
 .post-visual .swiper-pagination-bullets{bottom:0px;}
 .post-visual .swiper-wrapper{width:100%;height:750px; height:auto; margin:0px auto;padding-bottom:65px;filter:drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.2));}
-.post-visual .swiper-slide-active .txtWrap dl, 
+.post-visual .swiper-slide-active .txtWrap dl,
 .post-visual .swiper-slide-active .txtWrap dl + .btn {opacity:1;}
 .post-visual .swiper-slide{width:auto;}
 .post-visual .swiper-slide{
@@ -93,13 +93,13 @@
 	box-shadow:0 0px 30px rgba(0,0,0,0.20), 0 0px 30px rgba(0,0,0,0.20);
 	position:relative;
 	mask-image:
-	linear-gradient(to top right, transparent 49.5%, white 50.5%), 
-	linear-gradient(to top left, transparent 49.5%, white 50.5%), 
+	linear-gradient(to top right, transparent 49.5%, white 50.5%),
+	linear-gradient(to top left, transparent 49.5%, white 50.5%),
 	linear-gradient(white, white),
 	linear-gradient(white, white);
 	-webkit-mask-image:
-	linear-gradient(to top right, transparent 49.5%, white 50.5%), 
-	linear-gradient(to top left, transparent 49.5%, white 50.5%), 
+	linear-gradient(to top right, transparent 49.5%, white 50.5%),
+	linear-gradient(to top left, transparent 49.5%, white 50.5%),
 	linear-gradient(white, white),
 	linear-gradient(white, white);
     mask-size:86.6072% 0%, 13.3928% 21.4285%, 86.6072% 100%, 100% 78.5715%;
@@ -139,7 +139,7 @@
 	.post-visual.swiper-container {margin-left:0px;}
 	.main .post-visual .swiper-slide {padding-bottom:20px; mask-size:none;}
 	.main .post-visual .swiper-slide::before {display:block;}
-	.main .post-visual .swiper-slide img {box-shadow:0px 0px 30px rgba(0,0,0,0.2), 0px 0px 30px rgba(0,0,0,0.2);} 
+	.main .post-visual .swiper-slide img {box-shadow:0px 0px 30px rgba(0,0,0,0.2), 0px 0px 30px rgba(0,0,0,0.2);}
 	.main .post-visual .swiper-slide img::after{
 		content:'';
 		position:absolute;
@@ -196,7 +196,7 @@
     width:100%;
     height:100%;
 	z-index:-1;
-}  
+}
 
 /* main_stylereport */
 .main .wrap .content.main_stylereport {margin-top:20px;padding-bottom: 40px;}
@@ -206,7 +206,7 @@
 .main_stylereport .cont_body dt {font-size:24px; font-weight:300; margin:25px 0 17px 0; display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow:hidden; line-height: 1.2;}
 .main_stylereport .cont_body dd {font-size:16px; font-weight:200; line-height:26px; display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow:hidden;}
 @media screen and (max-width:1460px) {
-	
+
 }
 
 /* main_trendy */
@@ -222,7 +222,7 @@
 .main_trendy .item_prod {width:100%;}
 .main_trendy .swiper-controls {padding-bottom:80px;}
 .main_trendy .swiper-pagination {margin-top:60px;}
-.main_trendy .swiper-button-next, 
+.main_trendy .swiper-button-next,
 .main_trendy .swiper-button-prev {top:210px;}
 .main_trendy .swiper-button-next {right:0px;}
 .main_trendy .swiper-button-prev {left:-15px;}
@@ -266,7 +266,7 @@
 .bnnbox_crop > .bnn_half > a {display:block; position:relative; width:100%; height:0%; padding-top:26.0918%; overflow:hidden;}
 .bnnbox_crop > .bnn_half > a img {position:absolute; left:50%; right:0; top:50%; bottom:auto; transform:translate(-50%, -50%); width:auto; height:100%;}
 @media screen and (max-width:1460px) {
-	
+
 }
 
 /* main_deal */
@@ -276,7 +276,7 @@
 .main_deal .cont_head{background:#444444;width:520px;height:auto;line-height:1.2;float:left;padding:100px 0px 0 140px;position:relative;}
 .main_deal .cont_head p {color:#ffffff;}
 .main_deal .cont_head a {margin:30px 0;display:block;line-height:0;padding:0; color:#ddd; font-size:16px; font-weight:200;}
-.main_deal .cont_head a span::after{content:"〉";font-size:12px;padding-left:8px;}				
+.main_deal .cont_head a span::after{content:"〉";font-size:12px;padding-left:8px;}
 .main_deal .cont_body {width:calc(100% - 520px);float:left;background:#f5f5f5;padding-top:80px;padding-bottom:80px;padding-left:100px;padding-right:140px;}
 .main_deal .deal_progress {width:266px; position:relative; margin:95px 0 40px;    overflow: visible;}
 .main_deal .deal_progress .bar_bg {width:100%; height:4px; background:#fd4802;}
@@ -310,7 +310,7 @@
 .main_pick .cont_head {padding-bottom:60px;}
 .main_pick .cont_body {padding:0;position:relative;}
 .main_pick .cont_body .post-pick-nav {width:1250px; height:auto; background:#ffffff;margin:0 auto; cursor:pointer; padding:0 20px;}
-.main_pick .post-pick-nav .swiper-button-next, 
+.main_pick .post-pick-nav .swiper-button-next,
 .main_pick .post-pick-nav .swiper-button-prev {position:absolute; top:50%; transform:translateY(-50%); width:13px; height:24px; margin:0; background-image:url('//image.istyle24.com/Style24/images/pc/ico_arr_sm.png');}
 .main_pick .post-pick-nav .swiper-button-prev {left:0;}
 .main_pick .post-pick-nav .swiper-button-next {right:0;}
@@ -328,7 +328,7 @@
 .main_pick .post-pick-for .pick_look .swiper-slide .text_box .sub_text {margin-top:25px; font-size:18px; font-weight:300; line-height:1.2;max-width: 600px;margin: 25px auto;text-align: center;overflow: hidden;white-space: normal;overflow-wrap: break-word;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
 .main_pick .post-pick-for .pick_look .swiper-controls {position:absolute; left:0; right:0; width:100%; bottom:40px;}
 .main_pick .post-pick-for .pick_look img{width:100%; height:auto;}
-.main_pick .post-pick-for .pick_item {position: absolute;right: 0;width:61.7978%;padding: 47px 80px;top: 0;font-size:0;} 
+.main_pick .post-pick-for .pick_item {position: absolute;right: 0;width:61.7978%;padding: 47px 80px;top: 0;font-size:0;}
 .main_pick .post-pick-for .pick_item .item_prod {width:calc((100% - 40px) / 3); margin-left:20px;}
 .main_pick .post-pick-for .pick_item .item_prod:first-child {margin-left:0;}
 .main_pick .post-pick-for .pick_item .item_prod .item_state {padding:0;}
@@ -361,7 +361,7 @@
 .main_recomm .tag_list button {float:left; margin-left:12px; transition:none;}
 .main_recomm .tag_list button:first-of-type {margin-left:0}
 .main_recomm .tag_list button.active {line-height:1; background:#222222; border-color:rgb(245 245 245); position:relative; border-left:1px solid #f5f5f5; border-bottom:1px solid #f5f5f5; border-right:1px solid #f5f5f5; border-top:1px solid #f5f5f5; color:#ffffff; border: 0; position:relative; top:0; left:0; z-index:9;}
-.main_recomm .tag_list button.active:after{content:""; bottom:0px; right:0px; position:absolute; height:0px; width:0; padding:0px 0px 0px 0px; background:#222222; border-left:0px solid #ffffff; border-top:10px solid #222222; border-right:10px solid #ffffff;}	
+.main_recomm .tag_list button.active:after{content:""; bottom:0px; right:0px; position:absolute; height:0px; width:0; padding:0px 0px 0px 0px; background:#222222; border-left:0px solid #ffffff; border-top:10px solid #222222; border-right:10px solid #ffffff;}
 .main_recomm .tagitem {display:none;}
 .main_recomm .tagitem.active {display:block;}
 .main_recomm .item_prod {width:100%;}
@@ -373,7 +373,7 @@
 
 }
 
-/* main_foryou */	
+/* main_foryou */
 .main .wrap .content.main_foryou {position:relative; display:block; width:100%; height:auto; margin-top:60px; padding:120px 140px; background-color:#f5f5f5;}
 .main_foryou::after {content:''; display:block; clear:both;}
 .main_foryou .cont_head{position:relative; position:absolute; left:140px; top:120px;}
@@ -389,7 +389,7 @@
 .fy_nav .btn_shape + a {display:none;}
 .fy_nav .btn_shape.active {position:relative; background:#222222; border-color:rgb(245 245 245);}
 .fy_nav .btn_shape.active span {position:relative; color:#ffffff;}
-.fy_nav .btn_shape.active + a {display:inline-block; font-size:14px; text-align:right;position:absolute;top:50%;right:45px;transform:translateY(-50%);color:#888888;z-index:10;} 
+.fy_nav .btn_shape.active + a {display:inline-block; font-size:14px; text-align:right;position:absolute;top:50%;right:45px;transform:translateY(-50%);color:#888888;z-index:10;}
 .fy_nav .btn_shape.active + a::after {content:'';width:7px;height: 14px;display:inline-block;position:absolute;top:50%;right: -13px;transform:translateY(-50%);background:url('//image.istyle24.com/Style24/images/pc/ico_more_lg.png');background-repeat:no-repeat;background-position: 0px 50%;}
 .fy_item {display:none; position:relative; width:100%; min-height:490px; background:rgba(0,0,0,0.5);}
 .fy_item::after {content:'';display:block;clear:both;}
@@ -418,7 +418,7 @@
 }
 
 
-/* main_tv */	
+/* main_tv */
 .main .wrap .content.main_tv {padding-top:120px; padding-bottom:160px;}
 .main_tv::before {content:'';z-index:-1;display:block;width:100%;height:520px;position:absolute;top:0;left:0;background:#444444;}
 .main_tv .cont_head {padding-bottom:60px;}
@@ -473,7 +473,7 @@ header.minify .common_header.br_header::after {bottom:-565px;}
 .brand_main .post-visual .swiper-wrapper {padding-bottom:0;}
 .brand_main .post-visual .swiper-slide {position:relative; max-width:1520px; padding-left:23.6%; mask-size:86.6072% 0%, 9.3928% 21.4285%, 90.6072% 100%, 100% 78.5715%; -webkit-mask-size:86.6072% 0%, 9.3928% 21.4285%, 90.6072% 100%, 100% 78.5715%; /*transition:all 200ms ease;*/}
 .brand_main .post-visual .swiper-slide img {width:1080px; margin:0;}
-.brand_main .post-visual .swiper-slide .txtWrap {width: 30%; opacity:0; position:absolute; padding-left:0px; top:110px; bottom:auto; left:0px; right:auto; z-index:1;}
+.brand_main .post-visual .swiper-slide .txtWrap {width: 80%; opacity:0; position:absolute; padding-left:0px; top:110px; bottom:auto; left:0px; right:auto; z-index:1;}
 .brand_main .post-visual .txtWrap dt {font-size:0; padding-bottom:0;}
 .brand_main .post-visual .swiper-slide-active {opacity:1 !important;}
 .brand_main .post-visual .swiper-slide-active .txtWrap {animation-name: fade-in;animation-duration: 1.5s;animation-delay: 1s;animation-fill-mode: both;}
@@ -520,7 +520,7 @@ header.minify .common_header.br_header::after {bottom:-565px;}
 .new_item .item_prod {width:100%;}
 .new_item .swiper-controls {padding-bottom:80px;}
 .new_item .swiper-pagination {margin-top:60px;}
-.new_item .swiper-button-next, 
+.new_item .swiper-button-next,
 .new_item .swiper-button-prev {top:250px;}
 .new_item .swiper-button-next {right:0px;}
 .new_item .swiper-button-prev {left:0px;}
@@ -606,7 +606,7 @@ header.minify .common_header.br_header::after {bottom:-565px;}
 
 }
 
-/* brand_main_tv */	
+/* brand_main_tv */
 .brand_main .wrap .content.main_tv {padding-top:120px; padding-bottom:160px;}
 .brand_main .main_tv::before {background:#f5f5f5;}
 .brand_main .main_tv .cont_head p {color:#222;}
@@ -640,7 +640,7 @@ header.minify .common_header.br_header::after {bottom:-565px;}
 	.brand_main .post-visual .swiper-slide:before {display:none;}
 	.brand_main .post-visual .swiper-slide-active {z-index:8;}
 	.brand_main .post-visual .swiper-slide-active:before {display:block;}
-	.brand_main .post-visual .swiper-slide img {box-shadow:0px 0px 30px rgba(0,0,0,0.2), 0px 0px 30px rgba(0,0,0,0.2);} 
+	.brand_main .post-visual .swiper-slide img {box-shadow:0px 0px 30px rgba(0,0,0,0.2), 0px 0px 30px rgba(0,0,0,0.2);}
 	.brand_main .post-visual .swiper-slide img::after{
 		content:'';
 		position:absolute;
@@ -670,7 +670,7 @@ header.minify .common_header.br_header::after {bottom:-565px;}
 		background:#fff;
 		background:linear-gradient(0deg, #fff 104px, transparent 0);
 		z-index:1;
-	}   
+	}
 	.main .post-visual .swiper-button-prev {margin-right:600px;}
 	.main .post-visual .swiper-button-next {margin-left:595px;}
 }