.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 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: 150px; left: 40px; width: 400px; height: 800px; color: rgb(255, 255, 255); } .main .ctzgen .bg .owl-carousel .owl-item .ctz_desc_frame #ctz_title { position: absolute; font-size: 60px; width: 1800px; padding: 10px; overflow: hidden; } .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); } .main .ctzgen .bg .owl-carousel .owl-item .ctz_desc_frame #ctz_description { position: absolute; font-size: 26px; width: 700px; line-height: 26px; margin: 0 10px 0 10px; } .main .ctzgen .bg .owl-carousel .owl-item .ctz_mv_ctrl { position: absolute; top: 870px; 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; }