html {scroll-behavior: smooth;}
body {overflow-x: hidden;}
img { max-width:100%; } 
html, body { overscroll-behavior: none; height: 100%;margin: 0; }


/* 공통 기본값 (transform 없음) */
.main_ov {
    transform: none ;
    will-change: auto;
}

/* body.ios .main_ov,
body.ios .pc_main_hs,
body.ios .kv_bg, 
body.ios .main_ov .main_cont .cont_item {
  transform: translateZ(0);
  height: calc(var(--vh) * 100);
}
body.ios .main_hs .main_hs{
   height: calc(var(--vh) * 75);
} */

@supports (-webkit-touch-callout: none) { 
    body.ios .xScroll,
    body.ios .pc_main_hs,
    body.ios .kv_bg,
    body.ios .ios_bg,
    body.ios .main_ov,
    body.ios .main_ov .main_cont,
    body.ios .main_ov .main_cont .cont_item,
    body.ios .intro,
    body.ios .main_top,
    body.ios .main_hs .xScroll2,
    body.ios .kv_bg iframe {
        height: -webkit-fill-available;
    }

    body.ios .main_ov .main_cont{
    min-height: -webkit-fill-available;
    }

    body.ios .kv_bg iframe{
        width: 100vw;
    }
}





/* 공통적용 */
.inner { width: 90%; margin:0 auto; max-width: 1400px; } 
.bold {font-weight: 700;}
.icon {aspect-ratio: 1/1; font-size: 0; flex-shrink: 0;}
.icon img {width: 100%; height: 100%; object-fit: contain;}
.colorBlue {color: var(--mainBlue);}


/* 비메오, 유튜브 */
.video_container {position: relative; aspect-ratio: 16/9; overflow: hidden; max-width: 100%;}
.video_container iframe {width: 100%; height: 100%; }
.video_container.vtc {aspect-ratio: 9/16;}


/* padding · margin style*/
.p_tb { padding:80px 0; } 
.p_t { padding-top: 80px; } 
.p_b { padding-bottom: 80px; } 


/* width */
.w-100 {width: 100% !important;}
.w-max {width: max-content !important;}


/* btn */
.btn {
    display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; border-width: 1px;
    border-color: transparent; border-style: solid; border-radius: 5px; transition: all .3s; max-width: 100%; width: max-content;
}
.btn.lg {height: 60px; font-size: 1.125rem; min-width: 150px;}
.btn.md {height: 50px; font-size: 1rem; min-width: 120px;}
.btn.sm {height: 40px; font-size: 0.875rem;}
.btn.st1 {background: var(--mainBlue); color: #fff;}
.btn.st2 {background: var(--subNavy); color: #fff;}
.btn.st3 {background: #fff; border-color: #BBC1C8; color: #7D8792; }
.btn.st4 {border-color: #fff; color: #fff;}
.btn.st5 {border-color: #fffb00; color: #fffb00;}

/* table */
.tb_box {display: flex; flex-direction: column; gap: 10px;}
.tb_box .table {width: 100%;}
.tb_box table {width: 100%;}
.tb_box .cmnt {text-align: right; font-size: 0.875rem;}
.tb_box th {background: var(--subNavy); color: #fff;}
.tb_box td, .tb_box th {padding: 10px; border: 1px solid var(--border); text-align: center; vertical-align: middle;}


/* header */
.head.on{box-shadow: 0 4px 12px rgba(0,0,0,0.08)}
#header {width: 100vw; height: 90px; z-index: 991; position: fixed; font-family: 'Pretendard', sans-serif;}
#header .inner {height: 100%; display: flex; align-items: center; gap: 20px; }
#header .hamberg {display: none;}
#header .logo {font-size: 0;}
#header .logo img {height: 38px;}
#header .nav {display: flex; align-items: center; gap: 20px; flex: 1 0 0; height: 100%;}
#header .menu {flex: 1 0 0; height: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 60px; position: relative;}
#header .menu > li {height: 100%; display: flex; align-items: center;position: relative; }
#header .logo_main{position: absolute; top: 50%; transform: translateY(-50%);}

#header .nav.on {right: 0;}

#header .menu > li > a {font-size: 1.25rem; font-weight:500; display: flex; align-items: center; line-height: 1; color: #fff; height: auto; width: 100%;}
#header .menu > li > a::after {display: none;}
#header .menu > li:hover > a {color: #c49c6d}
#header .menu > li::after {display: none;}
#header .menu .sns{display: none; align-items: center; gap: 30px; padding-top: 35px; position: relative;}
#header .menu .sns a{width: auto;}
#header .menu .sns::before{content: ''; background: #585858; width: 100%; height: 1px;position: absolute; top: 0;}
#header .logo_w{opacity: 0;}

#header .menu > li > .nav_pc{display: block;}
#header .menu > li > .nav_mo{display: none;}

/* header active */
/* #header.active {background: rgba(0,0,0,.8);} */

/* footer */
#footer {font-family: 'Pretendard', sans-serif;}
#footer .goSite {font-size: 0.875rem; position: relative;}
#footer .goSite .tit {width: 220px; padding: 10px; margin-top: 10px; position: relative; cursor: pointer;}
#footer .goSite .tit::after {
    display: block; content: ""; background: url('/static/img/select_arr_g.png') no-repeat center center / contain;
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px;
}
#footer .goSite .list {position: absolute; bottom: 100%; left: 0; width: 220px; display: none; z-index: 1; border: 1px solid #ccc;}
#footer .goSite .list a {
    width: 100%; height: 32px; padding: 10px;
    display: flex; align-items: center; background: #fff; color: #000;
    border-bottom: 1px solid #ccc;
}
#footer .goSite .list li:last-child a{border: none;}
#footer .goSite .list a:hover {background: #e9e9e9;}
.ft_top {background: #fff; padding: 20px 0; }
.ft_top .inner {display: flex; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.ft_top .logo img {height: 38px;}
.ft_top .host {display: flex; flex-wrap: wrap; gap: 20px 40px;}
.ft_top .host p {display: flex; align-items: center; gap: 15px;}
.ft_top .host .gu {
    display: flex; align-items: center; justify-content: center; color: #000; font-size: 1.125rem; font-weight: 700;
}
.ft_top .host .nae {display: flex; flex-wrap: wrap; gap: 20px;}  
.ft_top .host .nae img {height: 40px;} 

.ft_bot {background: var(--subNavy); padding: 40px 0; color: #000; border-top: 1px solid #585858;}
.ft_bot .inner {display: flex; flex-wrap: wrap; gap: 40px 20px; justify-content: space-between;border-bottom: 1px solid #a29f9e;}
.ft_bot .info .tit {font-size: 1.125rem;}
.ft_bot .info .list {font-size: 0.875rem; color: #585858; display: flex; flex-direction: column; gap: 5px; margin-top: 10px;}
.ft_bot .info .copy {font-size: 0.75rem; opacity: 0.5; margin-top: 10px; color: #B0B0B0;}
.ft_bot .sns{margin-top: 15px;padding-bottom: 15px; display: flex; gap: 20px;}
.ft_bot .btnbox {display: flex; gap: 10px;}
.ft_bot .mo_list{display: none !important;}

.family{ width: 90%;margin: 0 auto;max-width: 1400px;}
.family_select {position:relative;}
.family_select select {position: relative; appearance:none; -webkit-appearance:none;-moz-appearance:none;height:30px;padding:0 44px 0 0;border:none;background:#F7F0ED;color:#000;font-size:14px;line-height:30px;}
.family_select::after{content: '';  pointer-events: none; background: url('/static/img/ft_arrow.png') no-repeat;width: 7px;height: 5px;position: absolute;left: 110px;top: 13px;}
.family_select select:focus{outline: none;}


.mb-10{margin-bottom: 10px;}
.mb-20{margin-bottom: 20px;}
.mb-40{margin-bottom: 40px;}

.kv_bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
}
.ios_bg{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: -webkit-fill-available;
    overflow: hidden;
    z-index: 0;
}

.kv_bg iframe{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vh;
    height: 100vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
}



.ios_bg iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vh;
    height:100vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
}
body.ios .ios_bg iframe{
    height:100dvh;
    width: 177.78dvh;
}


.kv_bg.show iframe,
.ios_bg.show iframe {
    opacity: 1;
}


@media (min-aspect-ratio: 16/9) {
    .kv_bg iframe {
        height: 100vh;
        width: 100vw;
    }

}

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

    /* header */    
    #header {height: 70px;}
    #header .inner{padding: 0 40px;}
    #header .logo img {height: 36px;}
    #header .menu > li::after  {min-width: 80px;}
    /* #header .menu > li > a {font-size: 1rem;} */
    #header .submenu {min-width: 120px;}
    #header .submenu > div > a {font-size: 0.875rem;} 

}

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

    /* hedaer */  


}

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

    /* header */
    #header {background: none;}
    #header .inner {height: 100%; display: flex; align-items: center; gap: 20px; justify-content: space-between; width: 100%; max-width: inherit; padding: 0 40px;}
    #header .hamberg {display: flex; align-items: center; justify-content: center; width: 24px; aspect-ratio: 1/1; text-indent: -9999px; cursor: pointer; z-index: 999;}
    #header .hamberg span {display: block; width: 100%; height: 2px; background: #c49c6d; position: relative; transition: all .5s;}
    #header .hamberg span::before,
    #header .hamberg span::after {display: block; content: ""; width: 100%; height: 2px; background: #c49c6d; position: absolute; left: 0; transition: all .5s;}
    #header .hamberg span::before {top: -8px;}
    #header .hamberg span::after {top: 8px;}
    #header .hamberg span.on {background: #fff;background: transparent !important;}
    #header .hamberg span.on::after {transform: rotate(45deg); top: 0; background: #fff;}
    #header .hamberg span.on::before {transform: rotate(-45deg); top: 0; background: #fff;}
    #header .nav {
        position: fixed; top: 0; right: -400px; z-index: 992; width: 400px; height: 100vh; transition: all .5s;
        background: var(--subSky);  flex-direction: column; gap: 0; margin-right: 0;
    }
    body.ios #header .menu{height: -webkit-fill-available;}
    #header .hamberg.on span{background: #fff}
    #header .hamberg.on span::after{background: #fff}
    #header .hamberg.on span::before{background: #fff}
    #header .menu {order: 2; width: 100%; padding: 100px 50px 50px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 20px; overflow-y: auto; background-color: #000;}
    #header .logo {font-size: 0; z-index: 999;}
    #header .logo_main{position: absolute; top: 50%; transform: translateY(-50%);}
    #header .logo_w {opacity: 0;pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%);}
    #header .logo img {height: 34px;}

    #header .menu .sns{display: flex; height: 100%; flex-direction: column;justify-content: flex-start;align-items: start;}
    #header .menu .h_bottom{font-size: 14px; color: #B4B4B4; margin-top: 40px;}
    #header .menu .h_bottom ul li{margin: 3px 0; color: #B4B4B4;}
    #header .menu .h_bottom ul li:last-child{font-size: 13px;margin-top: 20px;}
    #header .menu .sns .sns_icon{display: flex;align-items: center;gap: 30px;position: relative;}
    #header .menu > li {height: auto; display: block; width: 100%;}
    #header .menu > li > a {padding: 0 0 15px; font-size: 35px;}

    #header .menu > li > .nav_pc{display: none;}
    #header .menu > li > .nav_mo{display: block;}

    /* padding · margin style*/
    .p_tb { padding:60px 0; } 
    .p_t { padding-top: 60px; } 
    .p_b { padding-bottom: 60px; }

    
    /* footer */

    .ft_bot .info .copy{font-size: 13px;}
    .ft_bot .sns{display: flex; margin-top: 15px; gap: 20px;padding-bottom: 15px;}
    .ft_bot .inner{width: 90%; border-bottom: 1px solid #a29f9e;}
    #footer .goSite .tit{padding: 10px; width: 150px;}
    #footer .goSite .list{width: 150px;}
    #footer .goSite .tit::after{right: 10px;}
    
}


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

    /* header */
    #header{height: 60px;}
    #header .inner{padding: 0 20px;}
    /* #header .nav {width: calc(100vw - 60px); right: calc(-100vw - 60px);} */
    #header .nav {width: calc(100vw - 0px); right: calc(-100vw - 0px);}

    /* footer */
    .ft_top .host .nae img {height: 32px;}
    .ft_top .logo img {height: 32px;}

    /* sub */
    .sub_bnn {height: 200px;}
    .sub_bnn .nav {margin-bottom: 7px;}
    .sub_bnn .tit .big {font-size: 1.75rem;}
    .ft_bot .mo_list{display: flex !important}
    .ft_bot .pc_list{display: none !important;}

    
}