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

body{background-color:#FEC95F}
#wrap{}

#header{width: 100%;display: flex;justify-content: center;position: fixed;left: 50%;top: 5%;z-index: 1000;transform: translateX(-50%);padding: 0 3%;}
#header .hd_logo{font-size:24px;font-weight:700}
#header .hd_logo > a{display: inline-block;}
#header .hd_logo .icon_logo{display: inline-block;height: 60px;line-height: 0;}
#header .hd_logo .icon_logo svg{height: 100%;}

#header .hd_inner{max-width: 1680px;display:flex;width:100%;gap: 60px;align-items: center;}
#header .hd_gnb{display:flex;gap:30px;font-size:20px;font-weight:500}
#header .hd_gnb a{position:relative;text-decoration:none;color:inherit}
#header .hd_gnb a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:currentColor;transition:width .3s ease}
#header .hd_gnb a:hover::afte.hero_inner .btn_purpler{width:100%}

@media (max-width: 1600px){
    #header{top: 3%;}
}

@media (max-width: 1400px){
    #header{top: 3%;}
}
@media (max-width: 1240px){
    #header{top: 32px;}
}
@media (max-width: 1080px){
}

@media (max-width: 768px){
    #header .hd_logo > a{letter-spacing: -2px;}
    #header .hd_inner{gap:10px;}
    #header .hd_logo{font-size:20px;font-weight:700}
    #header .hd_gnb{font-size:16px;font-weight:500;gap: 10px;}
}

@media (max-width: 600px){
    #header .hd_logo .icon_logo{height: 40px;}
    #header {
        top: 16px;margin-top: 16px;
        position: sticky;
        transform: none;
    }
}
@media (max-width: 460px){
    #header .hd_inner{flex-direction: column;align-items: flex-start;}
    #main .main_inner .landing_list_box{}
    #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;display: flex;justify-content: center;}
#main .main_inner .landing_list_box{max-width: 1680px;width: 100%;height: 100%;padding: 32px;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
#main .main_inner .landing_list_box.between{justify-content: space-between;}
#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;}

#main .main_inner .landing_list > li{position:relative}
#main .main_inner .item_img_box img.img_btn1{width: 75%;position: absolute;top: 0;right: 0;}
#main .main_inner .item_img_box img.img_btn2{width: 100%;position: absolute;bottom: 0;right: 0;}
#main .main_inner .item_img_box img{width:100%}

/* 공통 이미지 버튼 */
.item_img_box .img_btn1,
.item_img_box .img_btn2 {display: inline-block;transition:transform 0.25s ease,box-shadow 0.25s ease;}

/* hover는 a 기준으로 */
.item_inner:hover .img_btn1,
.item_inner:hover .img_btn2 {
  transform: translateY(-14px);
}

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

@media (max-width: 768px){
    #main .main_inner .landing_list{flex-direction: row;column-gap: 0;row-gap: 24px;}
    #main .main_inner .landing_item{width: 100%;border-radius: 24px;aspect-ratio: 16 / 10;}
    #main .main_inner .landing_list_box{flex-direction: column;padding: 60px 20px 32px 20px;align-items: flex-start;justify-content: start;}
    #main .main_inner .landing_list_box.between{justify-content: start;}
    #main .main_inner .img_btn1{position: static;}
    #main .main_inner .img_btn2{position: static;}
}
@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%;}

.comming_soon_wrap{width: 100%;height: 100vh;overflow: hidden;}
.comming_soon_wrap .wrap_inner{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
.comming_soon_wrap .wrap_inner p{font-size: 32px;font-weight: 500;line-height: 40px;color: #1d1d1d}

.container_bg1{position: fixed;top: 10%;right: 0;z-index:1}
.container_bg2{position: fixed;bottom: 0%;left:5%;z-index:1}

@media (max-width: 1080px){
.comming_soon_wrap .wrap_inner p{font-size: 28px;line-height: 36px;}
}
@media (max-width: 768px){
    #layerPopup .popup_bd{padding: 12px;border-radius: 16px;}
    #layerPopup .popup_bd .frame_wrap{}
    #layerPopup .popup_bd .frame_wrap {
        aspect-ratio: auto;     /* ← 이게 핵심 */
        height: 84vh;          /* 또는 100% */
        max-height: 100vh;
    }

    #layerPopup .popup_bd .frame_box,
    #layerPopup .popup_bd iframe {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 600px){
.comming_soon_wrap .wrap_inner p{font-size: 20px;line-height: 28px;}
}


.hero{}
.hero_inner{max-width:1200px}
.hero_title{font-size:64px;font-weight:800;line-height:1.2;color:#111;margin-bottom:40px}
.hero_desc{font-size:24px;line-height:1.6;color:#333;margin-bottom:60px}
.hero_btns{display:flex;gap:30px}
/* 공통 버튼 */
.hero_inner .btn{position:relative;display:inline-flex;align-items:center;justify-content: center;min-width: 140px;gap:14px;padding:26px 10px;font-size:16px;font-weight:700;border-radius:999px;text-decoration:none;color:#fff;transition:background-color .25s ease,transform .25s ease,box-shadow .25s ease}
.hero_inner .btn:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.15)}
.hero_inner .arrow{display:inline-block;font-size:18px;transition:transform .25s ease;font-weight: 400;}
.hero_inner .btn:hover .arrow{transform:translateX(6px)}
.hero_inner .btn_green{background:#2ecc71}
.hero_inner .btn_green:hover{background:#27ae60}

.hero_inner .btn_purple{background:#6c2cff}
.hero_inner .btn_purple:hover{background:#5a22d8}

.hero_inner .btn_blue{background:#3498db}
.hero_inner .btn_blue:hover{background:#2980b9}

.hero_inner .btn_orange{background:#f39c12}
.hero_inner .btn_orange:hover{background:#e67e22}


@media (max-width: 768px){
    .hero_title{font-size: 24px;margin-bottom: 20px;}
    .hero_desc{font-size: 16px;line-height: 1.4;}

    .hero_btns{display:none}
}

@media (max-width: 768px){
    .hero_title{font-size: 24px;margin-bottom: 20px;}
    .hero_desc{font-size: 16px;line-height: 1.4;}

    .hero_btns{display:none}
}