#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;}


/* 인덱스 인트로 */
#index_intro {display: flex; justify-content: center; align-items: center; position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; height: 100%; padding: 0px 0; background: #000 url(../images/bg_intro.jpg) no-repeat 50% 50%; background-size: contain; box-sizing: border-box;}

#index_intro .intro_title {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%;}
#index_intro .intro_title img {filter: invert(0.8);}
#index_intro .intro_title .btn_wrap {position: relative; width: 100%; height: 100%;}
/* 비율 깨지고 버튼 유지 */
/* #index_intro .intro_title .btn_wrap button {display: block; position: absolute; width: 210px; height: 50px;}
#index_intro .intro_title .btn_wrap button.btn_left {
    top: 51.5%;
    left: 17%;
    width: 15%;
}
#index_intro .intro_title .btn_wrap button.btn_right {   
    top: 38.3%;
    right: 12.3%;
    width: 14%;
} */

/* 비율안깨지고 반반 버튼 */
#index_intro .intro_title .btn_wrap button {display: block; position: absolute; width: 50%; height: 100%; transition: all 0.5s;}
#index_intro .intro_title .btn_wrap button:hover {background: #ffffff0f;}
#index_intro .intro_title .btn_wrap button.btn_left {
    top: 0; left: 0;
}
#index_intro .intro_title .btn_wrap button.btn_right {   
    top: 0; left: 50%;
}


#index_intro .util {position: absolute; top: 25px; right: 25px; width: 80px; height: 34px; border-radius: 5px; overflow: hidden; transition: all 0.3s;}
#index_intro .util:hover {height: 102px;}
/* #index_intro .util.on {height: auto;} */
#index_intro .util li {display: flex; justify-content: center; align-items: center; gap: 0 12px; background: #000; text-align: center; transition: all 0.5s;}
#index_intro .util li + li {border-top: 1px solid #f9f9f9;}
#index_intro .util li + li:hover {background: #555;}
#index_intro .util li a {display: block; height: 34px; line-height: 34px; font-size: 16px; color: #fff}
#index_intro .util li > img {width: 8px; height: 16px; filter: invert(1); transform: rotate(90deg);}
/* .intro_lang a {font-size: 20px; font-weight: 700; color: #555; transition: all 0.3s;} */



#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: 25px; width: 80px; height: 34px; border-radius: 5px; overflow: hidden; transition: all 0.3s;}
#header .util:hover {height: 102px;}
/* #header .util.on {height: auto;} */
#header .util li {display: flex; justify-content: center; align-items: center; gap: 0 12px; background: #000; text-align: center; transition: all 0.5s;}
#header .util li + li {border-top: 1px solid #f9f9f9;}
#header .util li + li:hover {background: #555;}
#header .util li a {display: block; height: 34px; line-height: 34px; font-size: 16px; color: #fff}
#header .util li > img {width: 8px; height: 16px; filter: invert(1); transform: rotate(90deg);}


.pop-icon {position: fixed; cursor: pointer;}
.pop-icon.close {display: none;}
.pop-icon a {display: block; z-index: 10; width: 100%; height: 100%;}
.pop-icon img {width: 100%;}
.pop-icon .pop-icon-close {display: flex; justify-content: center; align-items: center; z-index: -1; position: absolute; top: 12px; right: -14px; width: 22px; height: 25px;}
.pop-icon .pop-icon-close img {width: 100%;}
#pop-sound {top: 100px; left: 45px; width: 50px; height: 50px;}
#pop-hmd {top: 160px; left: 45px; width: 50px; height: 50px;}

#pop-inq {top: 100px; right: 45px; width: 70px; height: 70px;}
#pop-news {top: 180px; right: 45px; width: 70px; height: 70px;}
#pop-feed {top: 260px; right: 45px; width: 70px; height: 70px;}


.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: 60px;  background: #0304057c;}
.bottom_layer .layer_box {}

.bottom_layer .left_box {display: flex; width: 240px; height: 30px; background: #b0b1b2; border-radius: 5px; box-sizing: border-box; overflow: hidden;}
.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 .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; width: 180px; height: 40px; background: none;}
.bottom_layer .right_box .btn_icon_wrap {display: flex; justify-content: flex-end; gap: 0 10px; width: 170px; 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 {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: 30px;}
.bottom_layer .right_box .btn_icon_wrap .btn_icon + .btn_icon img {height: 20px;}

.menu_popup {display: none; position: fixed; bottom: 65px; right: 25px;}
.menu_popup ul {display: flex; flex-direction: column; width: 155px;}
.menu_popup ul li {position: relative; z-index: 100; padding-left: 45px; background: rgba(0, 0, 0, 0.6); transition: all 0.5s;}
.menu_popup ul li:hover {background: #555;}
.menu_popup ul li:before {content: ''; position: absolute; z-index:-1; bottom: 0; left: 50%; width: 80%; height: 1px; background: #c9c9c9; transform: translateX(-50%);}
.menu_popup ul li:last-of-type:before {display: none;}
.menu_popup ul li a {display: block; height: 40px; line-height: 40px; font-size: 14px; color: #fff;}



/* video-mp3 */
.videoMp3 {position: fixed; top: -200px; left: -999999px;}

@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: 140px;}
    .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: 1120px) {
    /* .bottom_layer .center_box .point_wrap {display: none;} */
}

@media screen and (max-width: 768px) {
    #index_intro {background: #000 url(../images/bg_intro_m.jpg) no-repeat 50% 50%;background-size: contain; box-sizing: border-box;}

    #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: 12px;}

    #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: 30px;}
    .bottom_layer .left_box {width: 270px; height: 18px;}
    .bottom_layer .left_box .btn_box {font-size: 10px;}

    .bottom_layer .center_box .point_wrap .popup_dv {font-size: 10px;}
    .bottom_layer .center_box.center_box_inner .point_wrap .popup_dv {padding: 0 5px;}
    .bottom_layer .center_box.center_box_outer .point_wrap .popup_dv {padding: 0 15px;}

    .bottom_layer .right_box .btn_icon_wrap .btn_icon img {height: 14px;}
    .bottom_layer .right_box .btn_icon_wrap .btn_icon + .btn_icon img {height: 12px;}

    .menu_popup {bottom: 35px; right: 5px;}
    .menu_popup ul {width: 95px;}
    .menu_popup ul li {padding-left: 15px;}
    .menu_popup ul li a {height: 30px; line-height: 30px; font-size: 10px;}
}


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

}