.display-none {display: none !important;}

#landscape {visibility: hidden; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; height: 100%; background: #000;}
#landscape img {width: 100%; max-width: 400px; height: 100%; max-height: 733px;}




#ex {position: fixed; z-index: 9000; top: 0; left: 0; width: 100%; height: 100%; background: #000; cursor: pointer;}
#ex .btn_chk_again {display: flex; justify-content: space-between; align-items: center; position: absolute; bottom: 15%; left: 10%; width: 240px; height: 30px; background: #0e0e0e;}
#ex .btn_chk_again .input_wrap {display: flex; justify-content: center; align-items: center; gap: 0 12px; padding: 0 5px; box-sizing: border-box; width: 100%; }
#ex .btn_chk_again .input_wrap input {width: 16px; height: 16px;}
#ex .btn_chk_again .input_wrap label {font-size: 14px; color: #fff;}
#ex .btn_chk_again button {flex-shrink: 0; padding: 5px; width: 60px; height: 100%; background: #222; text-align: center; font-size: 14px; color: #fff;}
#ex.close {display: none;}
#ex .mb {display: none;}
#ex img {width: 100%; height: 100%; object-fit: contain;}

#ex2 {position: fixed; z-index: 9000; top: 0; left: 0; width: 100%; height: 100%; background: #000; cursor: pointer;}
#ex2.close {display: none;}
#ex2 img {width: 100%; height: 100%; object-fit: contain;}
#ex2 .mb {display: none;}

#header {display: flex; justify-content: space-between; align-items: center; position: fixed; z-index: 1000; top: 0; left: 0; right: 0; width: 100%; height: 80px; background: #0304057c; box-sizing: border-box;}
#header .logo {display: flex; align-items: center; gap: 0 10px; margin-left: 45px;}
#header .logo img {height: 30px;}
#header .logo p {display: none; font-size: 12px; font-weight: 700; color: #fff;}
#header .util {position: absolute; top: 25px; right: 60px; width: 80px; height: 30px; border: 0px solid #fff; border-radius: 15px; box-sizing: border-box; overflow: hidden; transition: all 0.3s;}
#header .util:hover {height: 90px;}
/* #header .util.on {height: auto;} */
#header .util li {display: flex; justify-content: center; align-items: center; gap: 0 12px; background: #fff; text-align: center; transition: all 0.5s;}
#header .util li + li {border-top: 1px solid #ccc;}
#header .util li + li:hover {background: #ccc;}
#header .util li a {display: flex; justify-content: center; align-items: center; height: 30px; font-size: 14px; font-weight: 700; color: #000}
#header .util li > img {width: 8px; height: 16px; filter: invert(1); transform: rotate(90deg);}



.bottom_layer {display: flex; justify-content: space-between; align-items: center; position: fixed; z-index: 1000; bottom: 0; left: 0; right: 0; padding: 10px; width: 100%; height: 80px; background-image: url(../images/bottom_bg.png); background-repeat: no-repeat; background-size: 100% 100%; background-position: 50% 100%; box-sizing: border-box;}
.bottom_layer .layer_box {}

.bottom_layer .left_box {display: flex; flex-shrink: 0; margin-left: 50px; width: 100px; height: 30px; background: #b0b1b2; border-radius: 5px; box-sizing: border-box; overflow: hidden; opacity: 0;}
.bottom_layer .left_box .btn_box {display: flex; justify-content: center; align-items: center; width: 100%; font-size: 14px; font-weight: 400; color: #000; cursor: pointer;}
.bottom_layer .left_box .btn_box.active {background: #e9ebeb; border-radius: 5px; font-weight: 600;}


.bottom_layer .center_box {width: 100%; max-width: 100%; height: 40px; border-radius: 10px;}


.bottom_layer .center_box .point_wrap {display: flex; justify-content: center; align-items: center; height: 100%; box-sizing: border-box;}
.bottom_layer .center_box .point_wrap .popup_dv {display: flex; align-items: center; position: relative; z-index: 200; padding: 0 20px; height: 100%; box-sizing: border-box; font-size: 14px; font-weight: 400; color: #fff; cursor: pointer; transition: all 0.5s;}
.bottom_layer .center_box.center_box_outer .point_wrap .popup_dv {padding: 0 45px;}
.bottom_layer .center_box .point_wrap .popup_dv:hover {color: #a8a8a8;}


.bottom_layer .center_box_inner .point_wrap .popup_dv {text-align: center;}
.bottom_layer .center_box_outer .point_wrap .popup_dv {text-align: center;}
.bottom_layer .center_box_inner .point_wrap .popup_dv.active {text-decoration: underline; color: #00B4CB;}

.bottom_layer .center_box .point_wrap .popup_dv::after {content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 15px; background: #fff; transform: translateY(-50%);}
.bottom_layer .center_box .point_wrap .popup_dv:last-of-type:after {display: none;}

.bottom_layer .right_box {display: flex; justify-content: flex-end; flex-shrink: 0; margin-right: 50px; height: 40px; background: none;}
.bottom_layer .right_box .btn_icon_wrap {display: flex; justify-content: flex-end; gap: 0 20px; width: 100px; height: 100%;}
.bottom_layer .right_box .btn_icon_wrap .btn_icon {display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 100%; border-radius: 5px; }
.bottom_layer .right_box .btn_icon_wrap .btn_icon:after {display: none; content: ''; position: absolute; top: 50%; right: -5px; width: 2px; height: 50%; background: #fff; transform: translateY(-50%);}
.bottom_layer .right_box .btn_icon_wrap .btn_icon + .btn_icon:after {display: none;}
.bottom_layer .right_box .btn_icon_wrap .btn_icon img {height: 40px;}
.bottom_layer .right_box .btn_icon_wrap .btn_icon + .btn_icon img {height: 40px;}

.menu_popup {display: none; position: fixed; bottom: 90px; right: 60px;}
.menu_popup ul {display: flex; flex-direction: column; justify-content: center; width: 100px; border: 1px solid #fff; box-shadow: 5px 5px 10px #00000059;border-radius: 10px; text-align: center; box-sizing: border-box; overflow: hidden;}
.menu_popup ul li {position: relative; z-index: 100; background: rgba(0, 0, 0, 0.6); transition: all 0.5s;}
/* .menu_popup ul li:hover {text-decoration: underline;} */
/* .menu_popup ul li:last-of-type:before {display: none;} */
.menu_popup ul li a {display: block; position: relative; height: 50px; line-height: 50px; font-size: 16px; color: #eee; transition: all 0.3s;}
.menu_popup ul li a:before {content: ''; position: absolute; z-index:-1; bottom: 14px; left: 50%; width: 0%; height: 1px; background: #fff; transform: translateX(-50%); transition: all 0.3s;}
.menu_popup ul li a:hover:before {width: 50%;}
.menu_popup ul li a:hover {color: #fff;}






/* 비디오 팝업 */
.btn_video_open {
    display: none; position: fixed; top: 100px; left: 40px; width: 338px; height: 120px; background: url(../images/video_action_btn2.png); overflow: hidden; cursor: pointer; 
    -webkit-animation: rainbow-ani 1s infinite steps(64);
    animation: rainbow-ani 1s infinite steps(64);
    transform: scale(0.7);
    transform-origin: left top;
}
.btn_video_open.active {display: block;}
/* .btn_video_open img {height: 100%;} */
@-webkit-keyframes rainbow-ani {
    100% {
    	background-position: -21632px 0;
    }
}
@keyframes rainbow-ani {
    100% {
    	background-position: -21632px 0;
    }
}

  

.iframe_box {visibility: hidden; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 3000; top: 0; left: 0; width: 100%; height: 100%; background: #00000091; opacity: 0; transition: all 0.3s;}
.iframe_box.active {visibility: visible; opacity: 1;}
.iframe_box iframe {width: 100%; max-width: 1200px; height: 100%; max-height: 700px; background: #000; border-radius: 10px;}

.media_wrap {display: flex; gap: 0 20px; padding: 50px 30px; width: 100%; height: 100%; box-sizing: border-box;}
.pop_close {position: fixed; z-index: 500; top: 20px; right: 20px; width: 20px; height: 20px;}
.pop_close img {width: 100%; height: 100%;}
/* .media_wrap .left_box {position: relative; flex-shrink: 0; width: 100%; max-width: 490px; background: #000;} */
.media_wrap .left_box {position: relative; width: 100%; max-width: 930px; background: #000;}
.media_wrap .left_box #mvImg {display: none; position: absolute; z-index: 0; top: 50%; left: 50%; padding: 0; width: 100%; height: 100%; box-sizing: border-box; object-fit: contain; color: #fff; transform: translate(-50%, -50%);}
.media_wrap .left_box #mvImg.active {display: block;}
.media_wrap .left_box video {width: 100%; height: 100%; object-fit: contain;}
.media_wrap .left_box #mvFrame {display: none;}
.media_wrap .left_box #mvFrame.active {display: block;}
.media_wrap .right_box {flex-shrink: 0; width: 100%; max-width: 210px;}
.media_wrap .right_box > h3 {padding-bottom: 15px; border-bottom: 2px solid #fff; box-sizing: border-box; font-size: 26px; font-weight: 700; color: #fff;}
.media_wrap .right_box .video_scroll_box {position: relative; margin-top: 15px; height: 100%; max-height: calc(100% - 50px); overflow: auto;}
.media_wrap .right_box .video_scroll_box::-webkit-scrollbar {width: 4px;}
.media_wrap .right_box .video_scroll_box::-webkit-scrollbar-thumb {width: 4px; background: #FFFFFF; border-radius: 2px;}
.media_wrap .right_box .video_scroll_box::-webkit-scrollbar-track {width: 4px; background: #444444;}
.media_wrap .right_box .video_scroll_box p {display: none; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px 0; width: 100%; height: 100%; font-size: 16px; color: #fff;}
.media_wrap .right_box .video_scroll_box p.active {display: flex;}
.media_wrap .right_box .video_scroll_box p img {width: 58px; height: 58px;}
.media_wrap .right_box .video_scroll_box .video_wrap {display: none; flex-wrap: wrap; gap: 10px 10px; padding-right: 10px; box-sizing: border-box;}
.media_wrap .right_box .video_scroll_box .video_wrap.active {display: flex;}
/* .media_wrap .right_box .video_scroll_box .video_wrap li {width: calc(50% - 5px);} */
.media_wrap .right_box .video_scroll_box .video_wrap li {flex-shrink: 0; width: 200px;}
.media_wrap .right_box .video_scroll_box .video_wrap li a {display: flex; flex-direction: column; width: 100%; height: 100%;}
.media_wrap .right_box .video_scroll_box .video_wrap .thumb_box {position: relative; width: 100%; height: 100px; overflow: hidden;}
.media_wrap .right_box .video_scroll_box .video_wrap li .thumb_box:after {content: ''; position: absolute; z-index: 300; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/play.png) no-repeat; background-size: 40px 40px; background-position: 50% 50%; opacity: 0; transition: all 0.2s;}
.media_wrap .right_box .video_scroll_box .video_wrap li .thumb_box:before {content: ''; position: absolute; z-index: 250; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; transition: all 0.2s;}
.media_wrap .right_box .video_scroll_box .video_wrap li.active .thumb_box:after {opacity: 1; transition: all 0.2s;} 
.media_wrap .right_box .video_scroll_box .video_wrap li.active .thumb_box:before {opacity: 0.6; transition: all 0.2s;}
.media_wrap .right_box .video_scroll_box .video_wrap .thumb_box img {width: 100%; height: 100%; object-fit: cover; transition: all 0.5s;}
.media_wrap .right_box .video_scroll_box .video_wrap .thumb_box:hover img {transform: scale(1.1);}
.media_wrap .right_box .video_scroll_box .video_wrap .txt_wrap {display: flex; flex-direction: column; margin-top: 10px;}
.media_wrap .right_box .video_scroll_box .video_wrap .txt_wrap .video_tit {margin-bottom: 10px; font-size: 14px; font-weight: 600; color: #fff; word-break: keep-all;}
.media_wrap .right_box .video_scroll_box .video_wrap .txt_wrap .video_tit img {margin-left: 4px; width: 6px; height: 7px;}
.media_wrap .right_box .video_scroll_box .video_wrap li.active .txt_wrap .video_tit img {display: none;}
.media_wrap .right_box .video_scroll_box .video_wrap .txt_wrap .video_txt {font-size: 12px; color: #A7A9AC; word-break: keep-all;}



@media screen and (max-width: 1368px) {
    /* .bottom_layer .left_box {width: 220px; height: 28px;} */
    .bottom_layer .left_box .btn_box {font-size: 12px;}

    .bottom_layer .center_box_inner {max-width: 800px;}
    .bottom_layer .center_box .point_wrap {justify-content: center;}
    /* .bottom_layer .center_box .point_wrap .popup_dv {width: 18%; font-size: 12px;} */
    /* .bottom_layer .center_box .point_wrap .popup_dv {font-size: 12px;} */

    /* .bottom_layer .right_box .btn_icon_wrap {width: 10px;} */
    /* .bottom_layer .right_box .btn_icon_wrap .btn_icon img {height: 25px;}
    .bottom_layer .right_box .btn_icon_wrap .btn_icon + .btn_icon img {height: 16px;} */
}

@media screen and (max-width: 999px) {
    #header .util {right: 28px; height: 25px;}
    #header .util:hover {height: 75px;}
    #header .util li a {height: 25px; font-size: 12px;}

    .bottom_layer .left_box {margin-left: 18px;}
    .bottom_layer .right_box {margin-right: 18px;}
    .bottom_layer .right_box .btn_icon_wrap {width: auto; gap: 0 15px;}
    .bottom_layer .right_box .btn_icon_wrap .btn_icon img {height: 30px;}
    .bottom_layer .right_box .btn_icon_wrap .btn_icon + .btn_icon img {height: 30px;}
    .menu_popup {right: 30px;}
    .menu_popup ul {width: 74px;}
    .menu_popup ul li a {height: 40px; line-height: 40px; font-size: 14px;}
    
    .btn_video_open {left: 40px;}
    
    .iframe_box {}
    .iframe_box iframe {width: 100%; max-width: 1000px; max-height: 500px; border-radius: 0;}
    /* .media_wrap::-webkit-scrollbar {width: 4px;}
    .media_wrap::-webkit-scrollbar-thumb {width: 4px; background: #FFFFFF; border-radius: 2px;}
    .media_wrap::-webkit-scrollbar-track {width: 4px; background: #444444;}
    .media_wrap {flex-direction: column; gap: 20px 0; overflow: auto;}
    .media_wrap .left_box {max-width: 100%;}
    .media_wrap .left_box video {max-height: 300px;} */
    
    .media_wrap {transform: scale(0.5);}
    .media_wrap .right_box .video_scroll_box .video_wrap {justify-content: center;}
}

@media screen and (max-width: 768px) {

    #ex .pc {display: none;}
    #ex .mb {display: block;}
    #ex .btn_chk_again {width: 205px;}
    #ex .btn_chk_again .input_wrap label {font-size: 12px;}
    #ex .btn_chk_again .input_wrap input {width: 13px; height: 13px;}
    #ex .btn_chk_again button {width: 50px; font-size: 12px;}
    #ex2 .pc {display: none;}
    #ex2 .mb {display: block;}


    #header {height: 40px;}
    #header .logo img {height: 15px;}
    #header .util {top: 9px; width: 60px; height: 20px;}
    #header .util li > img {width: 6px; height: 12px;}
    #header .util li a {height: 20px; line-height: 20px; font-size: 10px;}

    #pop-sound {top: 50px; width: 30px; height: 30px;}
    #pop-hmd {top: 90px; width: 30px; height: 30px;}
    #pop-inq {top: 50px; width: 50px; height: 50px;}
    #pop-news {top: 100px; width: 50px; height: 50px;}
    #pop-feed {top: 150px; width: 50px; height: 50px;}

    .bottom_layer {height: 60px;}
    .bottom_layer .left_box {display: none;}
    /* .bottom_layer .left_box {width: 270px; height: 18px;} */
    .bottom_layer .left_box .btn_box {font-size: 10px;}

    .bottom_layer .center_box .point_wrap {justify-content: center;}
    .bottom_layer .center_box .point_wrap .popup_dv {padding: 0 10px; font-size: 12px;}
    .bottom_layer .center_box.center_box_outer .point_wrap .popup_dv {padding: 0 10px;}

    .bottom_layer .right_box {margin-right: 0;}
    .bottom_layer .right_box .btn_icon_wrap {gap: 0 10px; width: auto;}
    .bottom_layer .right_box .btn_icon_wrap .btn_icon img {height: 26px;}
    .bottom_layer .right_box .btn_icon_wrap .btn_icon + .btn_icon img {height: 26px;}

    .menu_popup {right: 5px; bottom: 70px;}
    
    /* .media_wrap {transform: scale(0.6);} */
    /* .menu_popup {bottom: 55px; right: 5px;}
    .menu_popup ul {width: 65px;}
    .menu_popup ul li a {height: 30px; line-height: 30px; font-size: 10px;} */
    .media_wrap .left_box {flex-shrink: 1;}

    .btn_video_open {top: 60px; left: 10px; height: 120px; transform: scale(0.5);}
}


@media screen and (max-width: 470px) {
    .bottom_layer .center_box .point_wrap .popup_dv {font-size: 10px;}
    .bottom_layer .center_box .point_wrap {justify-content: flex-start;}

    /* .media_wrap {padding: 50px 3%;}
    .media_wrap .right_box > h3 {font-size: 20px;}
    .media_wrap .right_box .video_scroll_box .video_wrap .txt_wrap .video_tit {font-size: 13px;}
    .media_wrap .right_box .video_scroll_box .video_wrap .txt_wrap .video_txt {font-size: 11px;} */
}


@media screen and (max-height: 490px) {
    /* .iframe_box iframe {height: 100% !important;} */

}


@media (orientation: portrait) {
    #landscape {visibility: visible !important;}

}