issue #11 #12 임피리얼 펠리스와 광화문을 같이 지원하기 위하여 theme스킴 적용.

procentric/application/theme/HIM00001/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/HIM00001/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(50,40,26, 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/HIM00001/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(50,40,26, 0.7);
+    color: rgb(255, 255, 255);
+}

procentric/application/theme/HIM00001/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/HIM00001/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/HIM00001/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/HIM00001/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: 506px;
+    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/HIM00001/hoteltv.app.full.news.css

@@ -0,0 +1,43 @@
+/* 뉴스 */
+
+.news {
+    position: absolute;
+    top: 1044px;
+    left: 0;
+    width: 100%;
+    height: 36px;
+    background-color: rgba(77, 40, 21, 0.7);
+    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/HIM00001/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(50,40,26, 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/HIM00001/hoteltv.app.full.tv.css

@@ -0,0 +1,246 @@
+/* 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:);
+    overflow: hidden;
+    display: none;
+}
+
+.main .tv .bg div#lst_tvCtgbg {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .tv .bg .owl-carousel .owl-stage-outer {
+    width: 780px;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item .item {
+    position: absolute;
+    top: 116px;
+    /* left: 80px;
+    width: 1840px; */
+    height: 844px;
+    margin: 20px 20px 20px 20px;
+    padding: 5px 20px 5px 20px;
+    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%); */
+    overflow: hidden;
+}
+
+.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_title {
+    line-height: 100px;
+    padding: 0;
+    margin: 0 0 10px 0;
+    font-size: 80px;
+    color: rgb(235, 235, 235);
+    white-space: nowrap;
+}
+
+.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist {
+    max-width: 680px;
+    height: 640px;
+    font-size: 32px;
+    overflow: hidden;
+}
+
+.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame {
+    height: 110px;
+    margin: 10px 0 10px 0;
+    z-index: 1;
+}
+
+.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame .tvch_epg {
+    float: left;
+    margin: 0 0 0 186px;
+}
+
+.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused .tvch_epg {
+    margin: 0 0 0 210px;
+}
+
+.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_title {
+    font-size: 32px;
+    width: 468px;
+    color: rgb(255, 255, 255);
+    border-bottom: solid;
+    border-bottom-color: rgba(94, 90, 86, 0.8);
+    white-space: nowrap;
+    display: block;
+    overflow: hidden;
+}
+
+.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused #tvch_epg_title {
+    border-bottom-color: rgb(181, 218, 16);
+    color: rgb(181, 218, 16);
+    font-size: 40px;
+}
+
+.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_title::before {
+    content: attr(ch_num);
+    font-size: 32px;
+    text-align: left;
+    margin: 20px 10px 0 0;
+    padding: 0 5px 0 5px;
+    color: rgb(10, 10, 10);
+    background-color: rgba(210, 210, 210, 1);
+    text-shadow: 0 0 5px rgba(68, 68, 68, 1), 0 0 20px rgba(10, 175, 230, 0);
+    border-radius: 5px;
+}
+
+.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_info {
+    color: rgb(235, 235, 235);
+}
+
+.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_logo {
+    width: 176px;
+    height: 110px;
+    background-color: rgba(255, 255, 255, 1);
+    border-radius: 10px;
+}
+
+.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused #tvch_logo {
+    border: solid rgb(181, 218, 16);
+    transform: scale(1.14);
+    transform-origin: 2% 48%;
+    z-index: 2;
+}
+
+.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_arrow_up {
+    width: 30px;
+    height: 30px;
+    margin: 10px 0 0 70px;
+    transform: rotate(-45deg) skew(15deg, 15deg);
+    border-top: 5px #fff solid;
+    border-right: 5px #fff solid;
+}
+
+.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_arrow_down {
+    width: 30px;
+    height: 30px;
+    margin: 10px 0 0 70px;
+    transform: rotate(135deg) skew(15deg, 15deg);
+    border-top: 5px #fff solid;
+    border-right: 5px #fff solid;
+}
+
+/*************************/
+/* STYLE for TV Shortcut */
+/*************************/
+.main .tv .shortcut {
+    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);
+}
+
+.main .tv .shortcut div#suggestion {
+    position: absolute;
+    width: 100%;
+    height: 84%;
+}
+
+.main .tv .shortcut div#suggestion table {
+    width: 100%;
+    height: 100%;
+    /* padding: 3px 0px 3px 0px; */
+    border-collapse: collapse;
+}
+
+.main .tv .shortcut .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 .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 .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 .ch_list>#record tr>.scitem {
+    font-size: 40px;
+    line-height: 1;
+    width: 100%;
+}
+
+.main .tv .shortcut .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 .ch_list>#record tr>.scitem>#num {
+    width: 18%;
+    float: left;
+    text-align: center;
+    /* margin: 4px 0px 1px 0px; */
+    overflow: hidden;
+}
+
+.main .tv .shortcut .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; */
+}

procentric/application/theme/HIM00001/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: left center;
+    margin: 10px 0 4px 20px;
+    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/HIM00001/hoteltv.welcome.css

@@ -0,0 +1,192 @@
+body {
+    overflow: hidden;
+}
+
+.welcome {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 1920px;
+    height: 1080px;
+    padding: 0px;
+    display: none;
+    z-index: 1;
+}
+
+.startup {
+    top: 0px;
+    left: 0px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    padding: 0px;
+    /* background-image: url(./images/hoteltv_service_preparing.png); */
+    background-image: url(./images/hoteltv_service_preparing_joson.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.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(50,40,26,0.7),rgba(50,46,26,0.85));
+    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;
+}
+
+#debugwin {
+    z-index: 10000;
+    position: absolute;
+    top: 11px;
+    bottom: 22px;
+    right: 11px;
+    font-size: 12px;
+    background-color: rgba(18, 18, 18, 0.3);
+    text-align: left;
+    color: rgb(235, 235, 235);
+    line-height: 24px;
+    padding-left: 5px;
+    padding-top: 5px;
+    display: inline-flex;
+    max-width: 500px;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    display: none;
+}