@charset "utf-8";
.no_scroll {overflow: hidden !important;}

#wrap{}

#header{position: fixed;left: 50%;bottom: 10px;z-index: 1000;transform: translateX(-50%);}
#header .hd_logo{line-height: 0;}
#header .hd_logo > a{display: inline-block;}
#header .hd_logo .icon_logo{display: inline-block;height: 40px;line-height: 0;}
#header .hd_logo .icon_logo svg{height: 100%;}

@media (max-width: 1600px){
    #header{bottom: 10px;}
}

@media (max-width: 1400px){
    #header{bottom: 10px;}
}
@media (max-width: 1240px){
    #header{bottom: 10px;}
}
@media (max-width: 1080px){
}
@media (max-width: 600px){
    #header{bottom: 10px;}
    #header .hd_logo .icon_logo{height: 34px;}
}
@media (max-width: 360px){
    #header .hd_logo .icon_logo{height: 30px;}
}

#container{}

#contents{}

#main{width: 100%;height: 100vh;position: relative;overflow: hidden;}
#main .main_bg_wrap{width: 100%;height: 100%;position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 1;overflow: hidden;}
#main .main_bg_wrap .bg_box{width: 100%;height: 100%;}
#main .main_bg_wrap .bg_box img{width: 100%;height: 100%; object-fit: cover;object-position: center right;}

#main .main_inner{width:100%;height: 100%;position: relative;z-index: 100;}
#main .main_inner .landing_list_box{width: 100%;height: 100%;padding: 32px;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
#main .main_inner .landing_list{width: 100%;display: flex;flex-wrap: nowrap;align-items: center;justify-content: center;column-gap: 64px;}
#main .main_inner .landing_item{width: 480px;aspect-ratio: 1 / 1;border-radius: 36px;box-shadow: 7px 10px 12px 0 rgba(0, 0, 0, 0.25);overflow: hidden;}
#main .main_inner .landing_item .item_inner{width: 100%;height: 100%;}
#main .main_inner .landing_item .item_img_box{width: 100%;height: 100%;}
#main .main_inner .landing_item .item_img_box img{width: 100%;height: 100%;object-fit: cover;object-position: center;}

@media (max-width: 1080px){
    #main .main_inner .landing_list{column-gap: 32px;}
}

@media (max-width: 768px){
    #main .main_inner .landing_list{flex-direction: column;column-gap: 0;row-gap: 24px;}
    #main .main_inner .landing_item{width: 100%;border-radius: 24px;aspect-ratio: 16 / 10;}
}
@media (max-width: 600px){
    #main .main_inner .landing_item{border-radius: 16px;aspect-ratio: 16 / 9;}
}
@media (max-width: 360px){
    #main .main_inner .landing_list{row-gap: 16px;}
}
@media (max-width: 320px){
    #main .main_inner .landing_item{aspect-ratio: 16 / 8;}
}


#layerPopup{position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99999;display: none;}
#layerPopup .popup_wrap{width: 100%;height: 100%;padding: 24px;background-color: rgba(0, 0, 0, .45);display: flex;align-items: center;justify-content: center;flex-wrap: nowrap;}
#layerPopup .popup_wrap .popup_inner{width: 100%;max-width: 1344px;margin: 0 auto;}

#layerPopup .popup_hd{display: flex;align-items: center;justify-content: flex-end;padding: 0 8px;}
#layerPopup .popup_hd #layerPopupClose{display: block;width: 32px;height: 32px;padding: 8px;position: relative;overflow: hidden;box-sizing: content-box;}
#layerPopup .popup_hd #layerPopupClose::before,
#layerPopup .popup_hd #layerPopupClose::after{content: '';display: block;width: 32px;height: 4px;border-radius: 2px;background-color: var(--color-white);position: absolute;left: 50%;top: 50%;}
#layerPopup .popup_hd #layerPopupClose::before{transform: translate(-50%, -50%) rotate(45deg);}
#layerPopup .popup_hd #layerPopupClose::after{transform: translate(-50%, -50%) rotate(135deg);}

#layerPopup .popup_bd{width: 100%;padding: 32px;background-color: #fff;border-radius: 36px;box-sizing: border-box;overflow: hidden;}
#layerPopup .popup_bd .frame_wrap{width: 100%;max-width: 100%;aspect-ratio: 16 / 9;position: relative;overflow: hidden;}
#layerPopup .popup_bd .frame_wrap .frame_box{position: absolute;left: 0;top: 0;right: 0;bottom: 0;width: 100%;height: 100%;}
#layerPopup .popup_bd .frame_wrap .frame_box #popupFrame{width: 100%;height: 100%;}