issue #12 #13 Fixing couldn't install wavve app on ur762h0nd tv model.

procentric/application/lib/hoteltv.hcap.js

@@ -62,6 +62,7 @@ HotelTV.hal = (function() {
 
     const g_nativApps_info = {
         'preapp': null,
+        'generalapp': null,
     };
 
 
@@ -1520,30 +1521,104 @@ HotelTV.hal = (function() {
             }
         },
 
-        PreAppGetInfo: function(_en_show_msg) {
+        AppGetInfo: function(_en_show_msg) {
-            // if (g_nativApps_info.preapp == null) {
+            return new Promise((resolve, reject) => {
-            //     hcap.preloadedApplication.getPreloadedApplicationList({
+                hcap.application.getApplicationList({
-            //         "onSuccess": function(s) {
+                    "onSuccess": function(s) {
-            //             if (_en_show_msg == true) {
+                        if (_en_show_msg == true) {
-            //                 console.log("onSuccess : list length = " + s.list.length);
+                            console.log("onSuccess : list length = " + s.list.length);
-            //                 for (var i = 0; i < s.list.length; i++) {
+                            for (var i = 0; i < s.list.length; i++) {
-            //                     console.log(
+                                console.log(
-            //                         "list[" + i + "].id = " + s.list[i].id +
+                                    "list[" + i + "].appId = " + s.list[i].appId +
-            //                         "list[" + i + "].title = " + s.list[i].title +
+                                    "list[" + i + "].title = " + s.list[i].title +
-            //                         "list[" + i + "].iconFilePath = " + s.list[i].iconFilePath
+                                    "list[" + i + "].version = " + s.list[i].version +
-            //                     );
+                                    "list[" + i + "].valid = " + s.list[i].valid +
-            //                 }
+                                    "list[" + i + "].iconPath = " + s.list[i].iconPath
-            //             }
+                                );
-            //             if (s.result == true) {
+                            }
-            //                 g_nativApps_info.preapp = s.list;
+                        }
-            //             }
+                        if (s.result == true) {
-            //         },
+                            g_nativApps_info.generalapp = s.list;
-            //         "onFailure": function(f) {
+                            resolve({ "error": 0, "applist": g_nativApps_info.generalapp });
-            //             console.log("onFailure : errorMessage = " + f.errorMessage);
+                        }
-            //         }
+                    },
-            //     });
+                    "onFailure": function(f) {
-            // }
+                        console.log("onFailure : errorMessage = " + f.errorMessage);
+                        resolve({ "error": -1, "applist": null });
+                    }
+                });
+            });
+        },
 
+        AppInstall: function(list_app_id, _en_show_msg) {
+            return new Promise((resolve, reject) => {
+                hcap.application.installApplications({
+                    "AppList" : list_app_id,
+                    "onSuccess": function(s) {
+                        if (_en_show_msg == true) {
+                            console.log("onSuccess");
+                        }
+                        resolve({ "error": 0, "msg": "success" });
+                    },
+                    "onFailure": function(f) {
+                        console.log("onFailure : errorMessage = " + f.errorMessage);
+                        resolve({ "error": -1, "msg": f.errorMessage });
+                    }
+                });
+            });
+        },
+
+        LaunchApp: function(_name, _param) {
+            if (g_nativApps_info.generalapp != null) {
+                if (_name == "coupangplay") {
+                    for (const [key, item] of Object.entries(g_nativApps_info.generalapp)) {
+                        if (item.title.toLowerCase() == 'coupang play') {
+                            hcap.application.launchApplication({
+                                "id" : item.appId, 
+                                "onSuccess" : function() {
+                                    console.info("onSuccess");
+                                },
+                                "onFailure" : function(f) {
+                                    console.info("onFailure : errorMessage = " + f.errorMessage);
+                                }
+                            });
+                        }
+                    }
+                } else if (_name == "wavve") {
+                    for (const [key, item] of Object.entries(g_nativApps_info.generalapp)) {
+                        if (item.title.toLowerCase() == 'wavve') {
+                            hcap.application.launchApplication({
+                                "id" : item.appId, 
+                                "onSuccess" : function() {
+                                    console.info("onSuccess");
+                                },
+                                "onFailure" : function(f) {
+                                    console.info("onFailure : errorMessage = " + f.errorMessage);
+                                }
+                            });
+                        }
+                    }
+                } else if (_name == "tving") {
+                    for (const [key, item] of Object.entries(g_nativApps_info.generalapp)) {
+                        if (item.title.toLowerCase() == 'tving') {
+                            hcap.application.launchApplication({
+                                "id" : item.appId, 
+                                "onSuccess" : function() {
+                                    console.info("onSuccess");
+                                },
+                                "onFailure" : function(f) {
+                                    console.info("onFailure : errorMessage = " + f.errorMessage);
+                                }
+                            });
+                        }
+                    }
+                } 
+            } else {
+                console.log("General Application doesn't exist");
+            }
+        },
+
+        PreAppGetInfo: function(_en_show_msg) {
             return new Promise((resolve, reject) => {
                 hcap.preloadedApplication.getPreloadedApplicationList({
                     "onSuccess": function(s) {
@@ -1574,7 +1649,7 @@ HotelTV.hal = (function() {
             if (g_nativApps_info.preapp != null) {
                 if (_name == "youtube") {
                     for (const [key, item] of Object.entries(g_nativApps_info.preapp)) {
-                        if (item.title == 'YouTube') {
+                        if (item.title.toLowerCase() == 'youtube') {
                             hcap.preloadedApplication.launchPreloadedApplication({
                                 "id": item.id, // YOUTUBE
                                 "onSuccess": function() {
@@ -1588,7 +1663,7 @@ HotelTV.hal = (function() {
                     }
                 } else if (_name == "netflix") {
                     for (const [key, item] of Object.entries(g_nativApps_info.preapp)) {
-                        if (item.title == 'Netflix') {
+                        if (item.title.toLowerCase() == 'netflix') {
                             hcap.preloadedApplication.launchPreloadedApplication({
                                 "id": item.id, // NETFLIX
                                 "parameter": `{'params': {'hotel_id':${_param.hotel_name},'launcher_version':'1.0'}`,

procentric/application/lib/hoteltv.js

@@ -214,8 +214,8 @@ HotelTV.Init = async function() {
     HotelTV.ui_utils.SetBusy(true);
 
     const __ifxn_showFatalErr_Network = function() {
-        let _tmval = 10;
+        let _tmval = 30;
-        setTimeout(HotelTV.hal.Reboot, 10000);
+        setTimeout(HotelTV.hal.Reboot, 29000);
         HotelTV.ui_utils.SetBusy(false);
         HotelTV.ui_utils.ShowErrMsg(true,
             "system.error.get-devinfo",
@@ -320,8 +320,8 @@ HotelTV.Init = async function() {
                 console.log("System Need to Reboot");
                 HotelTV.ui_utils.SetBusy(false);
 
-                let _tmval = 20;
+                let _tmval = 30;
-                setTimeout(HotelTV.hal.Reboot, 20000);
+                setTimeout(HotelTV.hal.Reboot, 29000);
                 HotelTV.ui_utils.ShowErrMsg(true,
                     "system.info.change-configuration",
                     "SYSTEM INFO",
@@ -794,17 +794,50 @@ HotelTV.LoadAppFull = async function() {
 
     //STEP#03: INIT HCAP for HotelTV FullAPP
     let tmrAppAuth = setInterval(async function() {
+        let _list_install_appIDs = [];
+        let _NeedToDeleteTimer = false;
         let _foundNetflix = false;
-        let _hcapAppInfo = await HotelTV.hal.PreAppGetInfo(false);
+        let _hcapPreloadAppInfo = await HotelTV.hal.PreAppGetInfo(false);
-        HotelTV.state['hcap_app'] = _hcapAppInfo.applist;
+        let _hcapGeneralAppInfo = await HotelTV.hal.AppGetInfo(false);
-        for (_i = 0; _i < HotelTV.state['hcap_app'].length; _i++) {
+        HotelTV.state['hcap_app_preload'] = _hcapPreloadAppInfo.applist;
-            if (HotelTV.state['hcap_app'][_i].title == "Netflix") {
+        HotelTV.state['hcap_app_general'] = _hcapGeneralAppInfo.applist;
+        for (_i = 0; _i < HotelTV.state['hcap_app_preload'].length; _i++) {
+            if (HotelTV.state['hcap_app_preload'][_i].title.toLowerCase() == "netflix") {
                 console.log("Found out netflix among of pre hcap app-list.")
-                clearInterval(tmrAppAuth);
+                _foundNetflix = true;
+                _NeedToDeleteTimer = true;
             }
         }
 
-        if (_foundNetflix == false) {
+        for (_i = 0; _i < HotelTV.state['hcap_app_general'].length; _i++) {
+            if (HotelTV.state['hcap_app_general'][_i].title.toLowerCase() == "tving") {
+                if ( HotelTV.state['hcap_app_general'][_i].valid == false ){
+                    console.warn("Found out TVING but not installed...");
+                    _list_install_appIDs.push(HotelTV.state['hcap_app_general'][_i].appId);
+                }
+            } else if (HotelTV.state['hcap_app_general'][_i].title.toLowerCase() == "coupang play") {
+                if ( HotelTV.state['hcap_app_general'][_i].valid == false ){
+                    console.warn("Found out Coupang Play but not installed...");
+                    _list_install_appIDs.push(HotelTV.state['hcap_app_general'][_i].appId);
+                }
+            } else if (HotelTV.state['hcap_app_general'][_i].title.toLowerCase() == "wavve") {
+                if ( HotelTV.state['hcap_app_general'][_i].valid == false ){
+                    console.warn("Found out wavve but not installed...");
+                    _list_install_appIDs.push(HotelTV.state['hcap_app_general'][_i].appId);
+                }
+            }
+        }
+
+        if ( _list_install_appIDs.length>0 ){
+            await HotelTV.hal.AppInstall(_list_install_appIDs, false);
+        } 
+
+        if ( _foundNetflix == true && _list_install_appIDs.length==0 ){
+            console.info("Preparing APP Done...");
+            clearInterval(tmrAppAuth);
+        }
+
+        if ( _foundNetflix == false ) {
             try {
                 let siAppToken = null;
                 let siAppName = null;

procentric/application/lib/hoteltv.ui_appfull.js

@@ -502,8 +502,8 @@ HotelTV.ui_appfull = (function() {
                 _state.menu.stage.prev = _state.menu.stage.cur;
                 _state.menu.stage.cur = "external_av_hdmi";
                 _state.external_input.connected = true;
-                // NOTE: US741H0ND모델에서 HDMI셋팅 인덱스는 0부터, 이 부분은 LG에 문의 필요
+                // NOTE: UR762H0NC모델에서 HDMI셋팅 인덱스는 0부터, 이 부분은 LG에 문의 필요
-                if (_devinfo.model_name.includes("US761H0ND")) {
+                if (_devinfo.model_name.includes("US761H0ND") || _devinfo.model_name.includes("UM662H0NC")) {
                     _state.external_input.last_input.index = Number(_evt.index);
                 } else {
                     _state.external_input.last_input.index = Number(_evt.index)-1;
@@ -7080,8 +7080,8 @@ HotelTV.ui_appfull = (function() {
                             HotelTV.hal.LaunchPreApp(_program[Number(_state.menu.main.cur)].service, null);
                         } else if (_program[Number(_state.menu.main.cur)].service == "netflix") {
                             let _foundNetflix = false;
-                            for (_i = 0; _i < _state['hcap_app'].length; _i++) {
+                            for (_i = 0; _i < _state['hcap_app_preload'].length; _i++) {
-                                if (_state['hcap_app'][_i].title == 'Netflix') {
+                                if (_state['hcap_app_preload'][_i].title == 'Netflix') {
                                     _foundNetflix = true;
                                 }
                             }
@@ -7093,7 +7093,13 @@ HotelTV.ui_appfull = (function() {
                             }
                         } else if (_program[Number(_state.menu.main.cur)].service == "screenmirroring") {
                             HotelTV.hal.LaunchPreApp(_program[Number(_state.menu.main.cur)].service, null);
-                        }
+                        } else if (_program[Number(_state.menu.main.cur)].service == "coupangplay") {
+                            HotelTV.hal.LaunchApp(_program[Number(_state.menu.main.cur)].service, null);
+                        } else if (_program[Number(_state.menu.main.cur)].service == "wavve") {
+                            HotelTV.hal.LaunchApp(_program[Number(_state.menu.main.cur)].service, null);
+                        } else if (_program[Number(_state.menu.main.cur)].service == "tving") {
+                            HotelTV.hal.LaunchApp(_program[Number(_state.menu.main.cur)].service, null);
+                        } 
                     } else if (_program[Number(_state.menu.main.cur)].type.toLowerCase() == "language") {
                         console.log("Preparing language select sub menu...");
                         __uifxn_AppFull_Build_LangSel();

procentric/application/theme/HIM00001/hoteltv.app.full.ctzgen.css

@@ -114,7 +114,7 @@
     width: 620px;
     height: 830px;
     color: rgb(255, 255, 255);
-    background-color: rgba(50,40,26, 0.7);
+    background-color: rgba(0, 0, 0, 0.7);
     padding: 0px 12px 0px 12px;
     overflow: hidden;
 }

procentric/application/theme/HIM00001/hoteltv.app.full.guide.css

@@ -21,6 +21,6 @@
     font-size: 32px;
     text-align: center;
     line-height: 40px;
-    background-color: rgba(50,40,26, 0.7);
+    background-color: rgba(19, 21, 23, 0.6);
     color: rgb(255, 255, 255);
 }

procentric/application/theme/HIM00001/hoteltv.app.full.sm.css

@@ -133,7 +133,7 @@ div#sm_item_icon {
     width: 360px;
     height: 734px;
     line-height: 50px;
-    background-color: rgba(50,40,26, 0.7);
+    background-color: rgba(0, 0, 0, 0.7);
     overflow: hidden;
 }
 

procentric/application/theme/HIM00001/hoteltv.welcome.css

@@ -37,7 +37,7 @@ body {
     /* background-image: url(./images/bg_language_welcome_box.png);
     background-size: cover; */
     background-repeat: no-repeat;
-    background: linear-gradient(rgba(50,40,26,0.7),rgba(50,46,26,0.85));
+    background: linear-gradient(rgba(45,45,45,0.6),rgba(16,16,16,0.7));
     border-radius: 11px;
     filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
 }

procentric/application/theme/HLT00001/hoteltv.app.full.css

@@ -0,0 +1,105 @@
+/* STEP[#001]: Define Main */
+
+.main {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 1920px;
+    height: 1080px;
+    padding: 0px;
+    text-shadow: 0 0 10px rgba(38, 18, 18, 0.5), 0 0 10px rgba(65, 65, 65, 1);
+    z-index: 1;
+}
+
+.main ::-webkit-scrollbar {
+    display: none;
+}
+
+.control {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 1920px;
+    height: 1080px;
+    margin: 0;
+    padding: 0;
+}
+
+.control .mm .hotkey_red {
+    position: absolute;
+    width: 420px;
+    height: 56px;
+    z-index: 1;
+    display: none;
+    line-height: 50px;
+    color: rgb(235, 235, 235);
+    padding-left: 80px;
+    font-size: 30px;
+    text-shadow: 2px 2px 2px rgba(26, 26, 26, 1);
+    /* filter: drop-shadow(0 0 5px rgb(0, 0, 0)); */
+    white-space: nowrap;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+.control .mm .hotkey_green {
+    position: absolute;
+    width: 420px;
+    height: 56px;
+    z-index: 1;
+    display: none;
+    line-height: 50px;
+    color: rgb(235, 235, 235);
+    padding-left: 80px;
+    font-size: 30px;
+    text-shadow: 2px 2px 2px rgba(26, 26, 26, 1);
+    /* filter: drop-shadow(0 0 5px rgb(0, 0, 0)); */
+    white-space: nowrap;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+.control .mm .hotkey_yellow {
+    position: absolute;
+    width: 420px;
+    height: 56px;
+    z-index: 1;
+    display: none;
+    line-height: 50px;
+    color: rgb(235, 235, 235);
+    padding-left: 80px;
+    font-size: 30px;
+    text-shadow: 2px 2px 2px rgba(26, 26, 26, 1);
+    /* filter: drop-shadow(0 0 5px rgb(0, 0, 0)); */
+    white-space: nowrap;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+.control .mm .hotkey_blue {
+    position: absolute;
+    width: 420px;
+    height: 56px;
+    z-index: 1;
+    display: none;
+    line-height: 50px;
+    color: rgb(235, 235, 235);
+    padding-left: 80px;
+    font-size: 30px;
+    text-shadow: 2px 2px 2px rgba(26, 26, 26, 1);
+    /* filter: drop-shadow(0 0 5px rgb(0, 0, 0)); */
+    white-space: nowrap;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+
+/* SETP[#003-4]: Player */
+
+.player {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 1920px;
+    height: 1080px;
+}

procentric/application/theme/HLT00001/hoteltv.app.full.ctzgen.css

@@ -0,0 +1,291 @@
+.main .ctzgen {
+    position: absolute;
+    top: 2160px;
+    left: 0px;
+    width: 1920px;
+    height: 1080px;
+    background-image: url(tv:);
+    display: none;
+}
+
+.main .ctzgen .bg {
+    position: absolute;
+    top: 0px;
+    left: 0%;
+    width: 1920px;
+    height: 1080px;
+    padding: 0px;
+    overflow: hidden;
+    display: none;
+}
+
+.main .ctzgen .bg .owl-dots {
+    position: absolute;
+    top: 980px;
+    width: 100%;
+    align-content: center;
+}
+
+
+/* .main .ctzgen .bg .owl-dots .owl-dot span {
+    width: 20px;
+    height: 20px;
+} */
+
+.main .ctzgen .bg div#lst_ctzgenbg {
+    position: absolute;
+    width: 1920px;
+    height: 1080px;
+    margin: 0;
+    padding: 0;
+}
+
+.main .ctzgen .bg .owl-carousel .owl-stage-outer {
+    width: 1920px;
+    height: 1080px;
+    margin: 0;
+    padding: 0;
+}
+
+.main .ctzgen .bg .owl-carousel .owl-stage-outer .owl-stage {
+    width: 1920px;
+    height: 1080px;
+    margin: 0;
+    padding: 0;
+}
+
+.main .ctzgen .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item {
+    width: 1920px;
+    height: 1080px;
+    margin: 0;
+    padding: 0;
+}
+
+.main .ctzgen .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item>div {
+    width: 1920px;
+    height: 1080px;
+    background-image: var(--bg_noplay);
+}
+
+.main .ctzgen .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item.movieplay>div {
+    width: 1920px;
+    height: 1080px;
+    background-image: url(tv:);
+}
+
+.main .ctzgen .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item.movieplay .item .ctz_desc_frame {
+    opacity: 1;
+    animation-delay: 6s;
+    animation-name: fadeOutCtzDescFrame;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+    animation-duration: 2s;
+}
+
+@keyframes fadeOutCtzDescFrame {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+
+/* OWL Contents Menu Selector Container */
+
+.main .ctzgen .slider .owl-carousel .owl-item.active.focus div [id*="ctzgen_item_icon"] {
+    background-image: var(--icon_focus);
+}
+
+.main .ctzgen .slider .owl-carousel .owl-item.active[class*="unfocus"] div [id*="ctzgen_item_icon"] {
+    background-image: var(--icon_unfocus);
+}
+
+.main .ctzgen .slider .owl-carousel .owl-item.active.focus div [id*="ctzgen_item_title"] {
+    transform: scale(1.2);
+}
+
+.main .ctzgen .bg .owl-carousel .owl-item .ctz_desc_frame {
+    position: absolute;
+    top: 130px;
+    left: 1280px;
+    width: 620px;
+    height: 830px;
+    color: rgb(255, 255, 255);
+    background-color: rgba(0, 0, 0, 0.7);
+    padding: 0px 12px 0px 12px;
+    overflow: hidden;
+}
+
+.main .ctzgen .bg .owl-carousel .owl-item .ctz_desc_frame #ctz_title {
+    position: absolute;
+    display: flex;
+    font-size: 44px;
+    /* line-height: 44px; */
+    line-height: 1;
+    height: 115px;
+    width: 100%;
+    padding: 10px;
+    white-space: pre-wrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    /* justify-content: center; */
+    align-items: center;
+}
+
+.main .ctzgen .bg .owl-carousel .owl-item .ctz_desc_frame #ctz_thumbnail {
+    margin: 120px 10px 40px 10px;
+    height: 220px;
+    /* filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1)); */
+    /*    border: 4px solid rgb(255, 255, 255); */
+}
+
+.main .ctzgen .bg .owl-carousel .owl-item .ctz_desc_frame #ctz_thumbnail img {
+    width: auto;
+    height: 212px;
+    overflow: hidden;
+    /* border: 2px solid rgb(40, 40, 40); */
+    border: 2px solid rgb(160, 160, 160);
+}
+
+.main .ctzgen .bg .owl-carousel .owl-item .ctz_desc_frame #ctz_description {
+    position: absolute;
+    font-size: 26px;
+    width: 93%;
+    line-height: 1.2;
+    margin: 0 10px 0 10px;
+}
+
+
+
+.main .ctzgen .bg .owl-carousel .owl-item .ctz_imgvwr_frame {
+    position: absolute;
+    top: 130px;
+    width: 1920px;
+    height: 830px;
+    color: rgb(255, 255, 255);
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 0px 12px 0px 12px;
+    overflow: hidden;
+}
+
+
+
+
+
+
+
+.main .ctzgen .bg .owl-carousel .owl-item .ctz_mv_ctrl {
+    position: absolute;
+    top: 970px;
+    left: 1700px;
+    height: 54px;
+    line-height: 54px;
+    color: rgb(235, 235, 235);
+    font-size: 38px;
+    filter: drop-shadow(0 0 5px rgb(0, 0, 0));
+    white-space: nowrap;
+}
+
+.main .ctzgen .bg .owl-carousel .owl-item.movieplay .item .ctz_mv_ctrl {
+    animation-delay: 4s;
+    animation-name: moveCtzMvCtrl;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+    animation-duration: 1s;
+}
+
+@keyframes moveCtzMvCtrl {
+    from {
+        left: 1700px;
+    }
+    to {
+        left: 2220px
+    }
+}
+
+.main .ctzgen .bg .owl-carousel .owl-item .ctz_mv_ctrl::before {
+    position: absolute;
+    content: '';
+    width: 128px;
+    height: 54px;
+    margin-left: -140px;
+    background-image: url("./images/icons/icon_btn_media_play.png");
+    background-repeat: no-repeat;
+    background-position: right center;
+    background-size: contain;
+}
+
+.main .ctzgen .bg .owl-carousel .owl-item.movieplay .ctz_mv_ctrl::before {
+    animation-name: iconCtzMvCtrlBtn;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+    animation-duration: 1s;
+}
+
+@keyframes iconCtzMvCtrlBtn {
+    0% {
+        transform: rotateX(0deg);
+    }
+    50% {
+        transform: rotateX(90deg);
+        background-image: url("./images/icons/icon_btn_media_stop.png");
+    }
+    100% {
+        transform: rotateX(0deg);
+        background-image: url("./images/icons/icon_btn_media_stop.png");
+    }
+}
+
+.main .ctzgen .bg .owl-carousel .owl-item .ctz_mv_ctrl::after {
+    content: var(--playmsg);
+}
+
+.main .ctzgen .bg .owl-carousel .owl-item.movieplay .ctz_mv_ctrl::after {
+    animation-delay: 1s;
+    animation-name: msgCtzMvCtrlBtn;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+    animation-duration: 2s;
+}
+
+@keyframes msgCtzMvCtrlBtn {
+    0% {
+        opacity: 1;
+    }
+    25% {
+        opacity: 0;
+        content: var(--stopmsg);
+    }
+    50% {
+        opacity: 1;
+        content: var(--stopmsg);
+    }
+    100% {
+        opacity: 1;
+        content: var(--stopmsg);
+    }
+}
+
+.image-slider {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 480px;
+    height: 272px;
+}
+
+.main #imageGallery {
+    position: absolute;
+    top: 0px;
+    left: 0%;
+    width: 480px;
+    height: 272px;
+    padding: 0px;
+    overflow: hidden;
+}

procentric/application/theme/HLT00001/hoteltv.app.full.guide.css

@@ -0,0 +1,26 @@
+/* Brocure */
+
+.guide {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 1920px;
+    height: 1080px;
+    margin: 0;
+    padding: 0;
+    z-index: 2;
+    display: block;
+}
+
+.guide>.tips {
+    position: absolute;
+    top: 1034px;
+    left: 0px;
+    width: 1920px;
+    height: 40px;
+    font-size: 32px;
+    text-align: center;
+    line-height: 40px;
+    background-color: rgba(19, 21, 23, 0.6);
+    color: rgb(255, 255, 255);
+}

procentric/application/theme/HLT00001/hoteltv.app.full.mm.css

@@ -0,0 +1,137 @@
+/* STEP[#002]: Define MAIN-MENU BG FRAMES */
+
+.main .mm {
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+}
+
+.main .mm .bg {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    padding: 0px;
+    overflow: hidden;
+    display: none;
+}
+
+.main .mm .bg div {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .mm .bg div .item {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .mm .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item {
+    width: 100%;
+}
+
+
+/* STEP[#003]: Define MAIN-MENU SELECTOR FRAMES */
+
+.main .mm .slider {
+    position: absolute;
+    /* top: 734px; */
+    top: 884px;
+    left: 0px;
+    width: 1920px;
+    /* height: 300px; */
+    padding: 0px;
+    overflow: hidden;
+    display: none;
+}
+
+.main .mm .slider .owl-carousel.owl-theme {
+    /* height: 266px;
+    max-height: 266px; */
+    height: 100%;
+    padding-left: 0;
+    margin: 50px 0 0 0;
+}
+
+.main .mm .slider .owl-carousel.owl-theme .owl-carousel-outer {
+    /* height: 266px;
+    max-height: 266px; */
+    height: 100%;
+    padding-left: 0;
+    margin: 0;
+}
+
+div#mm_item_title {
+    position: absolute;
+    /* top: 190px; */
+    top: 22px;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    color: rgb(235, 235, 235);
+    /* font-size: 2.2vw; */
+    font-size: 34px;
+    line-height: 52px;
+    white-space: nowrap;
+    text-align: center;
+}
+
+div#mm_item_icon {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    display: block
+}
+
+
+/* OWL Main Menu Selector Container */
+
+.main .mm .slider .owl-dots {
+    position: absolute;
+    top: -45px;
+    width: 100%;
+    align-content: center;
+}
+
+.main .mm .slider .owl-theme .owl-dots .owl-dot span {
+    width: 20px;
+    height: 20px;
+    background: none;
+}
+
+.main .mm .slider .owl-theme .owl-dots .owl-dot.active span {
+    /* background: rgb(181, 218, 16); */
+    background: rgb(245, 245, 245);
+}
+
+
+/* .main .mm .slider .owl-carousel .owl-item.active.focus div {
+    transform: scale(1.14);
+} */
+
+.main .mm .slider .owl-carousel .owl-item.active.focus:after {
+    width: 336px;
+}
+
+.main .mm .slider .owl-carousel .owl-item.active[class*="unfocus"]:after {
+    width: 264px;
+}
+
+.main .mm .slider .owl-carousel .owl-item.active.focus div [id*="mm_item_icon"] {
+    background-image: var(--icon_focus);
+}
+
+.main .mm .slider .owl-carousel .owl-item.active[class*="unfocus"] div [id*="mm_item_icon"] {
+    background-image: var(--icon_unfocus);
+}
+
+.main .mm .slider .owl-carousel .owl-item.active.focus div [id*="mm_item_title"] {
+    transform: scale(1.1);
+}

procentric/application/theme/HLT00001/hoteltv.app.full.mm.flight.css

@@ -0,0 +1,194 @@
+/* =============================
+   Main Menu Flight Format
+*/
+
+.main .mm .flight {
+    position: absolute;
+    top: 120px;
+    left: 0px;
+    width: 100%;
+    height: 620px;
+    max-height: 620px;
+    padding-left: 0;
+    margin: 0;
+    background-color: rgba(0, 0, 0, .5);
+    filter: drop-shadow(4px 4px 10px rgba(255, 255, 255, 0.8));
+    overflow: hidden;
+    z-index: 1;
+    display: none;
+}
+
+.main .mm .flight .departure {
+    width: 50%;
+    height: 100%;
+    position: absolute;
+}
+
+.main .mm .flight .arrival {
+    left: 52%;
+    width: 50%;
+    height: 100%;
+    position: absolute;
+}
+
+.main .mm .flight #title {
+    font-size: 40px;
+    color: rgb(235, 235, 235);
+    height: 46px;
+}
+
+.main .mm .flight .departure #title {
+    text-align:left;
+    margin-left:10px;
+}
+
+.main .mm .flight .arrival #title {
+    text-align:right;
+    margin-right:50px;
+}
+
+.main .mm .flight table {
+    position: absolute;
+    width: 940px;
+    height: 540px;
+    margin-left: 10px;
+    margin-right: 10px;
+    color: rgb(235, 235, 235);
+    text-align: center;
+    white-space: normal;
+    word-break: break-word;
+    border-collapse: collapse;
+    display: block;
+    overflow: auto;
+}
+
+.main .mm .flight #border_table_bottom {
+    position:absolute;
+    top:560px;
+    margin-left:10px;
+    width:900px;
+    height:20px;
+    background-color: rgba(0,0,0,0.4);
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+.main .mm .flight #caution {
+    top: 590px;
+    width: 99%;
+    height:50px;
+    text-align: right;
+    color:rgb(180,180,190);
+    position: absolute;
+}
+
+
+/* .main .mm .flight table::-webkit-scrollbar {
+    display: none;
+} */
+
+.main .mm .flight table tbody#record {
+    position: absolute;
+    width: 100%;
+    height: 460px;
+    top: 52px;
+    overflow-y: scroll;
+}
+
+.main .mm .flight .tbl_header tr {
+    height: 50px;
+    max-height: 50px;
+}
+
+.main .mm .flight table #airline {
+    width: 118px;
+    max-width: 120px;
+}
+
+.main .mm .flight table #flight {
+    width: 70px;
+    max-width: 70px;
+}
+
+.main .mm .flight table #scheduled {
+    width: 128px;
+    max-width: 130px;
+}
+
+.main .mm .flight table #origin {
+    width: 88px;
+    max-width: 90px;
+}
+
+.main .mm .flight table #destination {
+    width: 122px;
+    max-width: 124px;
+}
+
+.main .mm .flight table #type {
+    width: 148px;
+    max-width: 150px;
+}
+
+.main .mm .flight table #gate {
+    width: 58px;
+    max-width: 60px;
+}
+
+.main .mm .flight table td#status {
+    width: 168px;
+    max-width: 169px;
+}
+
+.main .mm .flight table th#airline {
+    border-top-left-radius: 10px;
+}
+
+.main .mm .flight table th#status {
+    width: 168px;
+    max-width: 169px;
+    border-top-right-radius: 10px;
+}
+
+.main .mm .flight table th {
+    font-size: 20px;
+    color: rgb(235, 235, 235);
+    background: rgba(0, 0, 0, 0.4);
+}
+
+.main .mm .flight table td {
+    font-size: 20px;
+    color: rgb(235, 235, 235);
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.main .mm .flight ::-webkit-scrollbar {
+    display: block;
+    width: 20px;
+    /* 세로축 스크롤바 길이 */
+    height: 20px;
+    /* 가로축 스크롤바 길이 */
+}
+
+.main .mm .flight ::-webkit-scrollbar-track {
+    background-color: lightblue;
+}
+
+.main .mm .flight ::-webkit-scrollbar-track-piece {
+    background-color: gray;
+}
+
+.main .mm .flight ::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: rgba(0, 0, 0, 0.7);
+}
+
+.main .mm .flight ::-webkit-scrollbar-button:start {
+    background-color: orange;
+    /* Top, Left 방향의 이동버튼 */
+}
+
+.main .mm .flight ::-webkit-scrollbar-button:end {
+    background-color: orange;
+    /* Bottom, Right 방향의 이동버튼 */
+}

procentric/application/theme/HLT00001/hoteltv.app.full.mm.weather.css

@@ -0,0 +1,186 @@
+/* =============================
+   Main Menu Weather Format 
+*/
+
+.main .mm .weather {
+    position: absolute;
+    top: 200px;
+    left: 0px;
+    width: 100%;
+    height: 400px;
+    max-height: 400px;
+    padding-left: 0;
+    margin: 0;
+    background-color: rgba(235, 235, 235, .5);
+    filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.8));
+    z-index: 1;
+    display: none;
+}
+
+.main .mm .weather .location {
+    position: absolute;
+    top: 40px;
+    left: 100px;
+    font-size: 50px;
+    justify-content: center;
+    text-align: center;
+    color: rgb(235, 235, 235);
+    z-index: 1;
+    display: block;
+}
+
+.main .mm .weather .today {
+    position: absolute;
+    top: 0px;
+    left: 100px;
+    width: 320px;
+    height: 100%;
+}
+
+.main .mm .weather .today #temp_cur {
+    position: relative;
+    top: 110px;
+    font-size: 160px;
+    text-align: center;
+    color: rgb(21, 126, 251);
+}
+
+.main .mm .weather .today #temp_minmax {
+    position: relative;
+    top: 120px;
+    font-size: 50px;
+    text-align: right;
+    color: rgb(235, 235, 235);
+    display: block;
+}
+
+.main .mm .weather .today .detail {
+    position: absolute;
+    top: 40px;
+    left: 400px;
+    width: 400px;
+    height: 360px;
+    color: rgb(235, 235, 235);
+    overflow: hidden;
+    display: block;
+}
+
+.main .mm .weather .today .detail #discription {
+    height: 50px;
+    font-size: 40px;
+    text-align: center;
+    display: block;
+}
+
+.main .mm .weather .today .detail #img_status {
+    height: 160px;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center center;
+    display: block;
+}
+
+.main .mm .weather .today .detail #humidity {
+    width: 100%;
+    padding: 20px;
+    height: 40px;
+    text-align: center;
+    display: block;
+}
+
+.main .mm .weather .today .detail #wind {
+    width: 100%;
+    height: 40px;
+    text-align: center;
+    display: block;
+    margin-top: 24px;
+}
+
+.main .mm .weather .today .detail #icon {
+    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.8));
+}
+
+.main .mm .weather .forcast .daily {
+    position: absolute;
+    top: 10px;
+    left: 1000px;
+    width: 910px;
+    height: 180px;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    padding: 5px 0 0 10px;
+    color: rgb(235, 235, 235);
+}
+
+.main .mm .weather .forcast .daily ul {
+    width: 95%;
+    height: 100px;
+    list-style: none;
+}
+
+.main .mm .weather .forcast .daily li {
+    width: 150px;
+    height: 90px;
+    font-size: 24px;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: right center;
+    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.8));
+    float: left;
+    display: inline;
+    margin: 0 10px 0 10px;
+    list-style: none;
+}
+
+.main .mm .weather .forcast div#time {
+    height: 90%;
+    text-align: left;
+    color: rgb(170, 170, 170);
+}
+
+.main .mm .weather .forcast div#temp {
+    margin-top: 8px;
+    height: 30%;
+    text-align: left;
+    color: rgb(170, 170, 170);
+}
+
+.main .mm .weather .forcast .weekly {
+    position: absolute;
+    top: 200px;
+    left: 1000px;
+    width: 910px;
+    height: 190px;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    padding: 0 0 0 10px;
+    color: rgb(235, 235, 235);
+}
+
+.main .mm .weather .forcast .weekly ul {
+    width: 95%;
+    height: 100px;
+    list-style: none;
+}
+
+.main .mm .weather .forcast .weekly li {
+    width: 150px;
+    height: 90px;
+    font-size: 24px;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: right center;
+    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.8));
+    float: left;
+    display: inline;
+    margin: 0 10px 0 10px;
+    list-style: none;
+}
+
+.main .mm .weather .forcast div#date {
+    height: 90%;
+    text-align: left;
+    color: rgb(170, 170, 170);
+}

procentric/application/theme/HLT00001/hoteltv.app.full.mypage.css

@@ -0,0 +1,518 @@
+.main .mypage {
+    position: absolute;
+    top: 1080px;
+    left: 0px;
+    width: 1920px;
+    height: 1080px;
+    background-color: black;
+    display: none;
+}
+
+.main .mypage .bg {
+    position: absolute;
+    top: 0px;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    padding: 0px;
+    overflow: hidden;
+    display: block;
+}
+
+.main .mypage .bg div#lst_mypagebg {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .mypage .bg .owl-carousel .owl-stage-outer {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .mypage .bg .owl-carousel .owl-stage-outer .owl-stage {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .mypage .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .mypage .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item>div {
+    width: 1920px;
+    height: 1080px;
+    background-image: var(--bg_noplay);
+}
+
+.main .mypage .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item.movieplay>div {
+    width: 100%;
+    height: 100%;
+    background-image: url(tv:);
+}
+
+.main .mypage .bg div .item {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+
+/* STEP[#003]: Define SUB-MENU SELECTOR FRAMES */
+
+.main .mypage .slider {
+    position: absolute;
+    top: 864px;
+    left: 0px;
+    width: 1920px;
+    height: 170px;
+    padding-top: 50px;
+    overflow: hidden;
+    display: none;
+}
+
+.main .mypage .slider div {
+    height: 120px;
+    max-height: 120px;
+    padding-left: 0;
+    margin: 0;
+}
+
+div#mp_item_title {
+    position: absolute;
+    top: 40px;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    color: rgb(235, 235, 235);
+    font-size: 2.2vw;
+    white-space: nowrap;
+    text-align: center;
+}
+
+div#mp_item_icon {
+    margin: 0;
+    padding: 0;
+    display: block
+}
+
+div#lst_mypagebg div #mp_accomo_title {
+    position: absolute;
+    top: 165px;
+    left: 224px;
+    width: 1536px;
+    height: 42px;
+    line-height: 42px;
+    color: rgb(235, 235, 235);
+    font-size: 46px;
+}
+
+div#lst_mypagebg div #mp_accomo_title::before {
+    position: absolute;
+    content: '';
+    width: 48px;
+    height: 40px;
+    margin-left: -62px;
+    background-image: url("./images/icons/icon_mypage_title.png");
+    background-repeat: no-repeat;
+    background-position: right center;
+    background-size: contain;
+    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));
+}
+
+div#lst_mypagebg div #mp_accomo_infowin {
+    position: absolute;
+    top: 230px;
+    left: 160px;
+    width: 1600px;
+    height: 600px;
+    padding: 30px 10px 10px 10px;
+    color: rgb(235, 235, 235);
+    border: 1px solid rgb(28, 28, 28);
+    background-color: rgba(0, 0, 0, 0.5);
+    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.9));
+}
+
+div#lst_mypagebg div #mp_accomo_infowin .accmoinf_item {
+    font-size: 32px;
+}
+
+div#lst_mypagebg div #mp_accomo_infowin .accmoinf_item #header {
+    width: 20%;
+    height: 50px;
+    text-align: right;
+    display: inline-block;
+}
+
+div#lst_mypagebg div #mp_accomo_infowin .accmoinf_item #value {
+    width: 80%;
+    margin-left: 50px;
+}
+
+div#lst_mypagebg div #mp_hotel_infowin {
+    position: absolute;
+    top: 664px;
+    left: 190px;
+    width: 1540px;
+    height: 132px;
+    background-color: rgba(84, 84, 84, 0.9);
+    padding: 10px 11px 10px 11px;
+    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 1));
+}
+
+div#lst_mypagebg div #mp_hotel_infowin .hotelinfo_item {
+    width: 32%;
+    height: 100%;
+    display: inline-block;
+    padding: 5px;
+    font-size: 20px;
+    color: rgb(235, 235, 235);
+    text-shadow: 0 0 3px rgba(0, 0, 0, 1);
+}
+
+div#lst_mypagebg div #mp_hotel_infowin .hotelinfo_item #title {
+    display: block;
+    font-size: 26px;
+}
+
+div#lst_mypagebg div #mp_hotel_infowin .hotelinfo_item #address {
+    position: absolute;
+    width: 470px;
+    top: 60px;
+    margin-left: 26px
+}
+
+div#lst_mypagebg div #mp_hotel_infowin .hotelinfo_item #address::before {
+    position: absolute;
+    content: '';
+    width: 30px;
+    height: 26px;
+    margin-left: -32px;
+    background-image: url("./images/icons/icon_place_48x48.png");
+    background-repeat: no-repeat;
+    background-position: right center;
+    background-size: contain;
+    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 1));
+}
+
+div#lst_mypagebg div #mp_hotel_infowin .hotelinfo_item #email {
+    position: absolute;
+    width: 470px;
+    top: 60px;
+    margin-left: 32px
+}
+
+div#lst_mypagebg div #mp_hotel_infowin .hotelinfo_item #email::before {
+    position: absolute;
+    content: '';
+    width: 30px;
+    height: 26px;
+    margin-left: -36px;
+    background-image: url("./images/icons/icon_cotact_email_48x48.png");
+    background-repeat: no-repeat;
+    background-position: right center;
+    background-size: contain;
+    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));
+}
+
+div#lst_mypagebg div #mp_hotel_infowin .hotelinfo_item #phone {
+    position: absolute;
+    width: 470px;
+    top: 90px;
+    margin-left: 32px
+}
+
+div#lst_mypagebg div #mp_hotel_infowin .hotelinfo_item #phone::before {
+    position: absolute;
+    content: '';
+    width: 30px;
+    height: 26px;
+    margin-left: -36px;
+    background-image: url("./images/icons/icon_contact_phone_48x48.png");
+    background-repeat: no-repeat;
+    background-position: right center;
+    background-size: contain;
+    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));
+}
+
+div#lst_mypagebg div #mp_message_title {
+    position: absolute;
+    top: 165px;
+    left: 224px;
+    width: 1536px;
+    height: 42px;
+    line-height: 42px;
+    color: rgb(235, 235, 235);
+    font-size: 46px;
+}
+
+div#lst_mypagebg div #mp_message_title::before {
+    position: absolute;
+    content: '';
+    width: 48px;
+    height: 40px;
+    margin-left: -62px;
+    background-image: url("./images/icons/icon_cotact_email_96x96.png");
+    background-repeat: no-repeat;
+    background-position: right center;
+    background-size: contain;
+    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));
+}
+
+div#lst_mypagebg div #mp_message_table {
+    position: absolute;
+    top: 230px;
+    left: 160px;
+    width: 1600px;
+    height: 600px;
+    padding: 10px 10px 10px 32px;
+    color: rgb(235, 235, 235);
+    border: 1px solid rgb(28, 28, 28);
+    background-color: rgba(0, 0, 0, 0.5);
+    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.9));
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblhdr {
+    position: absolute;
+    width: 1580px;
+    font-size: 36px;
+    line-height: 74px;
+    display: block;
+    border-collapse: collapse;
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblhdr tr {
+    text-align: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.65);
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblhdr tr th {
+    border-bottom: 5px solid rgb(94, 94, 94, 1);
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblhdr tr>#num {
+    width: 160px;
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblhdr tr>#title {
+    width: 780px;
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblhdr tr>#from {
+    width: 300px;
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblhdr tr>#date {
+    width: 280px;
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblrec {
+    position: absolute;
+    top: 90px;
+    width: 1580px;
+    height: 478px;
+    font-size: 32px;
+    overflow: auto;
+    display: block;
+    border-collapse: separate;
+    border-spacing: 0 16px;
+    text-shadow: 0 0 5px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, 1);
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblrec tbody {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblrec tr {
+    line-height: 52px;
+    text-align: center;
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblrec tr.focus {
+    background-color: rgba(127, 127, 127, 0.9);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.65);
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblrec tr td {}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblrec tr>#num {
+    width: 160px;
+    padding-left: 90px;
+    text-align: left;
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblrec tr>#num::before {
+    position: absolute;
+    content: '';
+    background-image: url(./images/icons/icon_unread_message_48x48.png);
+    margin-top: 6px;
+    width: 42px;
+    height: 38px;
+    margin-left: -64px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    filter: drop-shadow(0 0 4px rgb(0, 0, 0));
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblrec tr>#num.read::before {
+    position: absolute;
+    content: '';
+    background-image: url(./images/icons/icon_read_message_48x48.png);
+    margin-top: 6px;
+    width: 42px;
+    height: 38px;
+    margin-left: -64px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    filter: drop-shadow(0 0 4px rgb(0, 0, 0));
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblrec tr>#title {
+    width: 780px;
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblrec tr>#from {
+    width: 300px;
+}
+
+div#lst_mypagebg div #mp_message_table>#mp_msg_tblrec tr>#date {
+    width: 280px;
+}
+
+
+/* OWL Sub Menu Selector Container */
+
+.main .mypage .slider .owl-carousel .owl-item.active.focus div [id*="mp_item_icon"] {
+    background-image: var(--icon_focus);
+}
+
+.main .mypage .slider .owl-carousel .owl-item.active[class*="unfocus"] div [id*="mp_item_icon"] {
+    background-image: var(--icon_unfocus);
+}
+
+.main .mypage .slider .owl-carousel .owl-item.active.focus div [id*="mp_item_title"] {
+    transform: scale(1.2);
+}
+
+.main .mypage .slider .owl-dots {
+    position: absolute;
+    top: -50px;
+    width: 100%;
+    align-content: center;
+}
+
+
+
+
+/**********************************************************************
+ * Replay Welcome movie
+ **********************************************************************/
+.main .mypage .bg .owl-carousel .owl-item .ctz_mv_ctrl {
+    position: absolute;
+    top: 820px;
+    left: 1700px;
+    height: 54px;
+    line-height: 54px;
+    color: rgb(235, 235, 235);
+    font-size: 38px;
+    filter: drop-shadow(0 0 5px rgb(0, 0, 0));
+    white-space: nowrap;
+}
+
+.main .mypage .bg .owl-carousel .owl-item.movieplay .item .ctz_mv_ctrl {
+    animation-delay: 4s;
+    animation-name: moveMypageMvCtrl;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+    animation-duration: 1s;
+}
+
+@keyframes moveMypageMvCtrl {
+    from {
+        left: 1700px;
+    }
+    to {
+        left: 2220px
+    }
+}
+
+.main .mypage .bg .owl-carousel .owl-item .ctz_mv_ctrl::before {
+    position: absolute;
+    content: '';
+    width: 128px;
+    height: 54px;
+    margin-left: -140px;
+    background-image: url("./images/icons/icon_btn_media_play.png");
+    background-repeat: no-repeat;
+    background-position: right center;
+    background-size: contain;
+}
+
+.main .mypage .bg .owl-carousel .owl-item.movieplay .ctz_mv_ctrl::before {
+    animation-name: iconCtzMvCtrlBtn;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+    animation-duration: 1s;
+}
+
+@keyframes iconCtzMvCtrlBtn {
+    0% {
+        transform: rotateX(0deg);
+    }
+    50% {
+        transform: rotateX(90deg);
+        background-image: url("./images/icons/icon_btn_media_stop.png");
+    }
+    100% {
+        transform: rotateX(0deg);
+        background-image: url("./images/icons/icon_btn_media_stop.png");
+    }
+}
+
+.main .mypage .bg .owl-carousel .owl-item .ctz_mv_ctrl::after {
+    content: var(--playmsg);
+}
+
+.main .mypage .bg .owl-carousel .owl-item.movieplay .ctz_mv_ctrl::after {
+    animation-delay: 1s;
+    animation-name: msgMypageMvCtrlBtn;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-fill-mode: forwards;
+    animation-duration: 2s;
+}
+
+@keyframes msgMypageMvCtrlBtn {
+    0% {
+        opacity: 1;
+    }
+    25% {
+        opacity: 0;
+        content: var(--stopmsg);
+    }
+    50% {
+        opacity: 1;
+        content: var(--stopmsg);
+    }
+    100% {
+        opacity: 1;
+        content: var(--stopmsg);
+    }
+}

procentric/application/theme/HLT00001/hoteltv.app.full.news.css

@@ -0,0 +1,43 @@
+/* 뉴스 */
+
+.news {
+    position: absolute;
+    top: 1044px;
+    left: 0;
+    width: 100%;
+    height: 36px;
+    background-color: rgba(19, 21, 23, 0.6);
+    filter: drop-shadow(0 -10px 5px rgba(0, 0, 0, 0.5));
+    display: none;
+    z-index: 1;
+}
+
+.news>.title {
+    position: absolute;
+    width: 160px;
+    color: rgb(235, 235, 235);
+    font-size: 32px;
+    line-height: 32px;
+    text-align: center;
+    border: solid rgba(0, 0, 0, 0.5);
+    margin: 0 20px 0 20px;
+    background-color: rgba(128, 128, 128, 0.3);
+}
+
+.news>.newsctz {
+    padding: 0;
+    margin: 8px 0 0 200px;
+    color: rgb(165, 175, 185);
+}
+
+.news>.newsctz #hoteltv-news-ticker li {
+    font-size: 26px;
+    line-height: 24px;
+}
+
+.news>.newsctz #hoteltv-news-ticker li img {
+    height: 34px;
+    vertical-align: top;
+    /* padding: 3px 10px 10px 0; */
+    object-fit: cover;
+}

procentric/application/theme/HLT00001/hoteltv.app.full.sm.css

@@ -0,0 +1,174 @@
+.main .sub {
+    position: absolute;
+    top: 1080px;
+    left: 0px;
+    width: 1920px;
+    height: 1080px;
+    background-color: black;
+    display: none;
+}
+
+.main .sub .bg {
+    position: absolute;
+    top: 0px;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    padding: 0px;
+    overflow: hidden;
+    display: block;
+}
+
+.main .sub .bg div#lst_smbg {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .sub .bg .owl-carousel .owl-stage-outer {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .sub .bg .owl-carousel .owl-stage-outer .owl-stage {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .sub .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .sub .bg div .item {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+
+/* STEP[#003]: Define SUB-MENU SELECTOR FRAMES */
+
+.main .sub .slider {
+    position: absolute;
+    top: 864px;
+    left: 0px;
+    width: 1920px;
+    height: 170px;
+    padding-top: 50px;
+    overflow: hidden;
+    display: none;
+}
+
+.main .sub .slider div {
+    height: 120px;
+    max-height: 120px;
+    padding-left: 0;
+    margin: 0;
+}
+
+div#sm_item_title {
+    position: absolute;
+    top: 40px;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    color: rgb(235, 235, 235);
+    /* font-size: 2.2vw; */
+    font-size: 34px;
+    white-space: nowrap;
+    text-align: center;
+}
+
+div#sm_item_icon {
+    margin: 0;
+    padding: 0;
+    display: block
+}
+
+
+/* OWL Sub Menu Selector Container */
+
+.main .sub .slider .owl-carousel .owl-item.active.focus div [id*="sm_item_icon"] {
+    background-image: var(--icon_focus);
+}
+
+.main .sub .slider .owl-carousel .owl-item.active[class*="unfocus"] div [id*="sm_item_icon"] {
+    background-image: var(--icon_unfocus);
+}
+
+.main .sub .slider .owl-carousel .owl-item.active.focus div [id*="sm_item_title"] {
+    transform: scale(1.2);
+}
+
+.main .sub .slider .owl-dots {
+    position: absolute;
+    top: -50px;
+    width: 100%;
+    align-content: center;
+}
+
+.main .sub .slider .owl-dots .owl-dot span {
+    width: 20px;
+    height: 20px;
+}
+
+.main .sub .slider .owl-dots .owl-dot.active span {
+    background: rgb(255, 192, 0);
+}
+
+.main .sub .bg .bg_ctz_thumb_frame {
+    position: absolute;
+    top: 130px;
+    left: 1550px;
+    width: 360px;
+    height: 734px;
+    line-height: 50px;
+    background-color: rgba(0, 0, 0, 0.7);
+    overflow: hidden;
+}
+
+.main .sub .bg .bg_ctz_thumb_frame #bg_ctz_thumb_item {
+    width: 320px;
+    height: 180px;
+    float: left;
+    margin: 10px 20px 10px 20px;
+    /* filter: drop-shadow(0 0 10px rgba(235, 235, 235, 0.9));
+    border-radius: 6px; */
+    text-align: center;
+    line-height: 50px;
+    font-size: 20px;
+    color: rgb(235, 235, 235);
+    border: 1px solid rgb(160, 160, 160);
+    display: inline;
+}
+
+.main .sub .bg .bg_ctz_thumb_frame #bg_ctz_thumb_title {
+    font-size: 30px;
+    margin-left: 20px;
+    color: rgb(235, 235, 235);
+}
+
+.main .sub .bg .bg_ctz_thumb_frame #bg_ctz_thumb_morenotice {
+    font-size: 22px;
+    margin: 20px 5px 10px 20px;
+    line-height: 25px;
+    overflow-wrap: break-word;
+    color: rgb(181, 218, 16);
+    animation: bg_ctz_thumb_morenotice_blinker 2s linear infinite;
+}
+
+@keyframes bg_ctz_thumb_morenotice_blinker {
+    50% {
+        color: rgb(235, 235, 235);
+    }
+}

procentric/application/theme/HLT00001/hoteltv.app.full.tv.css

@@ -0,0 +1,352 @@
+/* TV Menu */
+
+.main .tv {
+    position: absolute;
+    top: 1080px;
+    left: 0px;
+    width: 1920px;
+    height: 1080px;
+    background: url(tv:);
+}
+
+.main .tv .bg {
+    position: absolute;
+    top: 0px;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    padding: 0px;
+    background: url(tv:);
+    /* background: url(https://cropper.watch.aetnd.com/public-content-aetn.video.aetnd.com/video-thumbnails/AETN-History_VMS/21/200/tdih-jun01-HD.jpg); */
+    overflow: hidden;
+    display: none;
+}
+
+/************************************************************/
+/* TV CATEGORY FRAME STYLE                        [ START ] */
+/************************************************************/
+.main .tv .bg #lst_tvCtgyFrm {
+    position: relative;
+    top: 0%;
+    left: 37%;
+    max-width: 26%;
+    width: 26%;
+    height: 50px;
+    margin: 0;
+    padding: 0;
+    /* background-color: red; */
+    overflow: hidden;
+}
+
+.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer .owl-stage{
+    width: 100%;
+    height: 50px;
+    margin: 0;
+    padding: 0;
+}
+
+.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer .owl-stage .owl-item .item {
+    background-color: rgba(0, 0, 0, 0.4); */
+    /* filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1)); */
+    border: solid rgb(137, 139, 129);
+    /* border-radius: 10px; */
+    /* background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(120, 120, 120, 0.7) 70%, rgba(0, 0, 0, 0.7) 85%); */
+    /* border-color: rgba(230,230,230,0.3) transparent transparent transparent; */
+    /* border-width: 50px 50px 0 0; */
+    /* box-sizing: border-box; */
+    overflow: hidden;
+}
+
+.main .tv .bg #lst_tvCtgyFrm .item #tvctg_title {
+    line-height: 50px;
+    /* padding: 0 0 0 10px; */
+    /* margin: 0 0 0px 10px; */
+    font-size: 40px;
+    text-align: center;
+    vertical-align: middle;
+    color: rgb(235, 235, 235);
+    white-space: nowrap;
+    display: none;
+}
+/************************************************************/
+/* TV CATEGORY FRAME STYLE                          [ END ] */
+/************************************************************/
+
+
+/************************************************************/
+/* TV CHANNEL FRAME STYLE                         [ START ] */
+/************************************************************/
+.main .tv .bg .chFrm {
+    position: absolute;
+    top: 82%;
+    left: 0 px;
+    width: 100%;
+    height: 134px;
+    margin: 0;
+    padding: 0;
+    color: rgba(245,245,245,1.0);
+    background-color: rgba(0,0,0,0.8);
+    display: flex;
+    overflow: hidden;
+}
+
+.main .tv .bg .chFrm .chLogo {
+    width: 15%;
+    height: 100%;
+    margin: 0;
+    padding: 10px 10px 10px 10px;
+}
+
+.main .tv .bg .chFrm .chLogo #icon{
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background-repeat: no-repeat;
+    background-color: rgba(255,255,255,1);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    border-radius: 10px;
+    border: 2px solid rgb(67, 82, 105);
+}
+
+.main .tv .bg .chFrm .chNum {
+    width: 10%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .tv .bg .chFrm .chNum #arrow_up{
+    padding: 0;
+    width: 22px;
+    height: 22px;
+    margin: 10px 0 0 86px;
+    transform: rotate(-45deg) skew(15deg, 15deg);
+    border-top: 5px #fff solid;
+    border-right: 5px #fff solid;
+    /* text-align: center; */
+    display: block;
+}
+
+.main .tv .bg .chFrm .chNum #number{
+    width: 100%;
+    height: 48%;
+    margin: 0;
+    padding: 0;
+    line-height: 64px;
+    font-size: 48px;
+    text-align: center;
+    vertical-align: middle;
+    display: block;
+    /* background-color: red; */
+}
+
+.main .tv .bg .chFrm .chNum #arrow_down{
+    width: 22px;
+    height: 22px;
+    margin: 0px 0 0 86px;
+    transform: rotate(135deg) skew(15deg, 15deg);
+    border-top: 5px #fff solid;
+    border-right: 5px #fff solid;
+    display: block;
+}
+
+.main .tv .bg .chFrm .chDesc {
+    width: 75%;
+    height: 100%;
+    margin: 0;
+    padding: 5px 0px 5px 0px;
+}
+
+.main .tv .bg .chFrm .chDesc #epg_chname{
+    width: 100%;
+    height: 34px;
+    line-height: 34px;
+    font-size: 30px;
+    margin: 0;
+    padding: 0;
+}
+
+.main .tv .bg .chFrm .chDesc #epg_title{
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    font-size: 50px;
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.main .tv .bg .chFrm .chDesc #epg_details{
+    width: 100%;
+    height: 28px;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    line-height: 28px;
+    font-size: 20px;
+    overflow: hidden;
+}
+
+.main .tv .bg .chFrm .chDesc #epg_details #tm_current{
+    width: 20%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .tv .bg .chFrm .chDesc #epg_details #tm_playing{
+    width: 20%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .tv .bg .chFrm .chDesc #epg_details #tm_chart{
+    width: 58%;
+    height: 86%;
+    margin: 0;
+    padding: 0;
+    background-color: rgba(80,80,80,0.8);
+    border-radius: 10px;
+}
+
+.main .tv .bg .chFrm .chDesc #epg_details #tm_chart .progress{
+    margin: 5px 5px 0px 5px;
+    /* padding: 14px 0px 0px 0px; */
+    height: 14px;
+    /* vertical-align: middle; */
+    background-color: rgba(245,245,245,0.8);
+    border-radius: 10px;
+}
+
+/************************************************************/
+/* TV CHANNEL FRAME STYLE                           [ END ] */
+/************************************************************/
+
+/************************************************************/
+/* TV SHORTCUT STYLE                              [ START ] */
+/************************************************************/
+.main .tv .shortcut_mode0 {
+    position: absolute;
+    top: 3%;
+    left: 87%;
+    width: 12%;
+    height: 72px;
+    /* background: rgba(0, 0, 0, 0.7); */
+    /* background-color: red; */
+    background-color: rgba(0, 0, 0, 0.8);
+    padding: 0px 0px 0px 0px;
+    border-top: 5px solid rgb(40, 40, 40);
+    border-bottom: 5px solid rgb(40, 40, 40);
+    display: none;
+    font-size: 52px;
+    line-height: 62px;
+    color: rgb(245,245,245);
+    text-align: center;
+    display: none;
+}
+
+
+.main .tv .shortcut_mode1 {
+    position: absolute;
+    top: 18%;
+    left: 75%;
+    width: 440px;
+    height: 230px;
+    background: rgba(0, 0, 0, 0.7);
+    padding: 20px 6px 20px 6px;
+    border-top: 5px solid rgba(0,0,0,0.7);
+    border-bottom: 5px solid rgba(0,0,0,0.7);
+    display: none;
+}
+
+.main .tv .shortcut_mode1 div#suggestion {
+    position: absolute;
+    width: 100%;
+    height: 84%;
+}
+
+.main .tv .shortcut_mode1 div#suggestion table {
+    width: 100%;
+    height: 100%;
+    /* padding: 3px 0px 3px 0px; */
+    border-collapse: collapse;
+}
+
+.main .tv .shortcut_mode1 .ch_list>#record {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    color: rgba(240,240,240,1);
+    overflow: scroll;
+    padding: 14px 0px 0px 0px;
+}
+
+.main .tv .shortcut_mode1 .ch_list>#record tr {
+    width: 96%;
+    display: block;
+    float: left;
+    padding: 5px 0px 5px 0px;
+    border-bottom: 1px solid rgb(67, 82, 105);
+    border-top: 1px solid rgb(67, 82, 105);
+}
+
+.main .tv .shortcut_mode1 .ch_list>#record tr.active {
+    color:rgb(255, 192, 0);
+    background-color: rgba(0,0,0,0.6);
+    border-top: 2px solid rgb(255, 192, 0);
+    border-bottom: 2px solid rgb(255, 192, 0);
+}
+
+.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem {
+    font-size: 40px;
+    line-height: 1;
+    width: 100%;
+}
+
+.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#logo {
+    width: 24%;
+    height: 40px;
+    /* height: 100%; */
+    float: left;
+    background-color: rgba(235,235,235,1);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    border-radius: 10px;
+    border: 2px solid rgb(67, 82, 105);
+    /* margin: 1%; */
+}
+
+.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#num {
+    width: 18%;
+    float: left;
+    text-align: center;
+    /* margin: 4px 0px 1px 0px; */
+    overflow: hidden;
+}
+
+.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#title {
+    width: 54%;
+    float: left;
+    text-align: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    /* margin: 4px 0px 1px 0px; */
+}
+
+/************************************************************/
+/* TV SHORTCUT STYLE                                [ END ] */
+/************************************************************/

procentric/application/theme/HLT00001/hoteltv.app.full.widjet.css

@@ -0,0 +1,144 @@
+/* STEP[#003]: Define WIDGET FRAMES */
+
+.widjet {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    padding: 0px;
+    overflow: hidden;
+    display: none;
+    text-shadow: 0 0 10px rgba(68, 68, 68, 1), 0 0 20px rgba(10, 175, 230, 0);
+    z-index: 2;
+}
+
+.widjet .top {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100px;
+    /* background-color: rgba(0, 0, 0, 0.5); */
+    /* filter: drop-shadow(0 0px 5px rgba(0, 0, 0, 1)); */
+    padding: 0px;
+    display: none;
+}
+
+
+/* SETP[#003-1]: Hotel Logo */
+
+.widjet .top .hotellogo {
+    position: absolute;
+    width: 300px;
+    height: 80px;
+    background-image: none;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    margin: 10px 0 4px 10px;
+    display: block;
+}
+
+
+/* SETP[#003-2]: Message */
+
+.widjet .top .message {
+    position: absolute;
+    top: -11px;
+    left: 1618px;
+    height: 100px;
+    /* float: left; */
+    display: block;
+    padding: 24px 10px 10px 10px;
+}
+
+.widjet .top .message #unread_cnt {
+    /* position: relative; */
+    width: 66px;
+    height: 100%;
+    float: left;
+    background-image: url(images/icons/icon_widjet_top_message_cnt.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    padding: 4px 0px 0px 0px;
+    vertical-align: middle;
+    color: rgb(235, 235, 235);
+    font-size: 46px;
+    line-height: 52px;
+    text-align: center;
+}
+
+
+/* SETP[#003-3]: Weather */
+
+.widjet .top .weather {
+    position: absolute;
+    top: -11px;
+    left: 1370px;
+    height: 100px;
+    float: left;
+    background-image: none;
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: block;
+    margin: 7px 0px 0px 0px;
+}
+
+.widjet .top .weather #icon {
+    position: relative;
+    /* top: -10px; */
+    left: 16px;
+    width: 100px;
+    height: 100%;
+    float: left;
+    background-image: none;
+    background-size: contain;
+    background-repeat: no-repeat;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+    filter: drop-shadow(0 0px 5px rgba(0, 0, 0, 0.5));
+}
+
+.widjet .top .weather #temp {
+    position: relative;
+    left: 14px;
+    float: left;
+    font-size: 60px;
+    line-height: 100px;
+    vertical-align: middle;
+    color: rgb(235, 235, 235);
+}
+
+
+/* SETP[#003-4]: Date&Time */
+
+.widjet .top .datetime {
+    position: absolute;
+    left: 1630px;
+    width: 270px;
+    height: 60px;
+    margin: 10px 30px 10px 0;
+    color: rgb(235, 235, 235);
+}
+
+.widjet .top .datetime p {
+    margin: 0;
+    padding: 0;
+}
+
+.widjet .top .datetime .time {
+    font-size: 52px;
+    line-height: 52px;
+    padding: 5px 0;
+    text-align: right;
+    /* -webkit-text-stroke: 1px rgb(64,64,64); */
+}
+
+.widjet .top .datetime .date {
+    letter-spacing: 0.1em;
+    font-size: 24px;
+    line-height: 24px;
+    text-align: right;
+}

procentric/application/theme/HLT00001/hoteltv.welcome.css

@@ -0,0 +1,159 @@
+body {
+    overflow: hidden;
+}
+
+.welcome {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 1920px;
+    height: 1080px;
+    padding: 0px;
+    display: none;
+    z-index: 1;
+}
+
+.welcome .frame {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    padding: 0px;
+    background-color: rgba(0, 0, 0, 1);
+    background-image: none;
+    background-size: cover;
+    background-repeat: no-repeat;
+    display: none;
+}
+
+.welcome .frame .msgwin {
+    position: absolute;
+    top: 98px;
+    left: 519px;
+    width: 884px;
+    height: 648px;
+    padding: 0px;
+    /* background-image: url(./images/bg_language_welcome_box.png);
+    background-size: cover; */
+    background-repeat: no-repeat;
+    background: linear-gradient(rgba(45,45,45,0.6),rgba(16,16,16,0.7));
+    border-radius: 11px;
+    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
+}
+
+.welcome .frame .msgwin #hotellogo {
+    position: absolute;
+    top: 108px;
+    left: 135px;
+    width: 634px;
+    height: 270px;
+    padding: 0px;
+    background-image: none;
+    background-size: contain;
+    background-repeat: no-repeat;
+    /* background-position: center; */
+    background-position: top;
+}
+
+.welcome .frame .msgwin #guestname {
+    position: absolute;
+    top: 424px;
+    left: 0px;
+    width: 804px;
+    height: 65px;
+    padding: 0px 0px 5px 0px;
+    margin: 0px 40px 0px 40px;
+    background-image: none;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    border-bottom: solid rgb(192,192,192) 3px;
+    font-size: 65px;
+    justify-content: center;
+    text-align: center;
+    color: rgb(235, 235, 235);
+    line-height: 65px;
+    max-width: 864px;
+    display: none;
+}
+
+.welcome .frame .msgwin #welcomemsg {
+    position: absolute;
+    top: 516px;
+    left: 0px;
+    width: 804px;
+    height: 44px;
+    /* padding: 0px; */
+    margin: 0px 40px 0px 40px;
+    background-image: none;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    font-size: 33px;
+    justify-content: center;
+    text-align: center;
+    color: rgb(235, 235, 235);
+    line-height: 33px;
+    max-width: 864px;
+    display: none;
+}
+
+.welcome .frame .guide#langsel {
+    position: absolute;
+    top: 1037px;
+    left: 0px;
+    width: 1920px;
+    height: 54px;
+    background-color: rgba(0, 0, 0, 0.8);
+    display: inline-block;
+    color: rgba(200, 200, 200, 1);
+    font-size: 32px;
+    line-height: 43px;
+    text-align: center;
+    border-top: solid rgb(128, 128, 128);
+}
+
+.welcome #lst_langsel {
+    position: absolute;
+    top: 962px;
+    left: 0;
+    height: 76px;
+    line-height: 76px;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    display: none;
+}
+
+.welcome #lst_langsel .item {
+    color: rgba(200, 200, 200, 1);
+    font-size: 44px;
+    text-align: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.welcome #lst_langsel .owl-item.active.center div {
+    background-image: var(--btn_focus);
+}
+
+.welcome #lst_langsel .owl-item.active div {
+    background-image: var(--btn_unfocus);
+}
+
+.control .skip_video {
+    z-index: 10000;
+    position: absolute;
+    z-index: 10000;
+    top: 927px;
+    left: 1579px;
+    width: 246px;
+    height: 68px;
+    padding: 0px;
+    background-color: rgba(0, 0, 0, 0.0);
+    background-image: none;
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: none;
+}