@charset "utf-8";

/******************공통*******************/
*{box-sizing:border-box;word-break: keep-all;}
a {color: inherit;text-decoration: none;}
.con-flex{display:flex;align-items:center;}
.con-flex-bet{display:flex;align-items:center;justify-content:space-between;}
.btn{display:flex;align-items: center;border-radius:30px;justify-content: center;}
.m-only{display:none;}
.videoWrapper {position: relative;width:100%;height: 100%;}
.videoWrapper video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.br-m{display:none;}


:root{
    /*색상*/
    --bk:#01011D;
    --bg1:#f2f5fa;
    --main:#4133A7;
   
    /*폰트 사이즈*/
    --page-tit:70px;
    --page-tab:24px;
    --con-tit:40px;
    --com-txt-bg:24px;
    --com-txt:20px;
    --com-txt-sm:18px;

    /*버튼*/


    /*간격*/
    --mg-bg:120px;
    --mg-mm:50px;

    
}

.inner{width:1400px;margin:0 auto;}
.tabbx{display:none;}
.tabbx.tabbx-on{display:block;}

.line {
    position: relative;
    width: 1px;
    height: clamp(6rem, 2.5889967638vw + 5.0291262136rem, 10rem);
    background-color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    z-index: 2;
}

.line::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: clamp(1rem, 1.2944983819vw + 0.5145631068rem, 3rem);
    background-color: #fff;
    animation: scrolldown 2s ease-in infinite;
}

@keyframes scrolldown{
    0% {
        top: -20%;
    }
    100% {
        top: 120%;
    }
}


/******************헤더*******************/
header{position:fixed;top:0;left:0;z-index:99;width:100%;height:90px;transition: .5s;}
header .inner{height:100%;}
header .gnb{gap:80px;}
header .gnb ul{gap:80px;font-size: var(--com-txt-sm);font-weight: 700;color:#fff;}
header .lang-wrap{position:relative;color:#fff;}
header .lang-wrap button{display:flex;width:80px;height:30px;border-radius:999px;align-items: center;justify-content: center;gap:7px;border:1px solid #fff;font-size: 14px;font-weight: 700;background:transparent;color:#fff;cursor: pointer;}
header .lang-wrap button img{transition: .3s;}
header .lang-wrap ul{display:none;position:absolute;margin-top:10px;}
header .lang-wrap li a{display:flex;width:80px;height:30px;border-radius:999px;align-items: center;justify-content: center;font-size: 14px;font-weight: 700;background:#fff;color:#000;}
header .lang-wrap li:first-child{margin-bottom:10px;}
header .lang-wrap.on button img{transform: rotate(180deg);transition: .3s;}
header h1{position:relative;z-index:9999;}


/*헤더 스크롤시 애니메이션*/
header.scr-down{transform: translateY(-100%); }
header.bg-ch{background:#000;}
header.scr-down.bg-ch{background:transparent;}

/*모바일 햄버거버튼*/
.ham-btn{width:28px;cursor: pointer;z-index:9999;}
.ham-btn>span{display:block;width:100%;height:2px;background:#fff;transition: all 0.3s;transform: rotate(0deg) translateY(0px);}
.ham-btn>span:nth-child(2){width:22px;margin:5px auto 0;}
.ham-btn>span + span{margin-top:5px;}
.ham-btn.open>span:nth-child(1){transform: rotate(45deg) translateY(5px);}
.ham-btn.open>span:nth-child(3){transform: rotate(-45deg) translateY(-5px);}
.ham-btn.open>span:nth-child(2){display: none;}
.allmenu ul>li>a{opacity: 0; transform: translateX(-20px);}
.allmenu.open ul>li>a{opacity: 1; transform: translateX(0); transition: all 1s 0.8s;}
.allmenu:after{transform: translateY(300px); opacity: 0;}
.allmenuBg {display: block;width: 46px;height: 46px;background: #f9f9f9;border-radius: 50%;position: absolute;left: calc(97% - 23px);top: 46px;z-index: 1000;transform: translate(-50%, -50%) scale(0);transition: all 0.8s ease-in-out;}
.allmenuBg.open{transform: translate(-50%, -50%) scale(150);}
.allmenu{position:fixed;right:0;top:0;z-index:2000;width:100%;height:100vh;background:#f9f9f9;transform: scale(0);}
.allmenu.open {transform: scale(1);transition: all 0s 0.8s;}
.ham-btn.open span{background:var(--bk);}
.allmenu .con-top{width:100%;height:60px;}
header .open img{content:url('../img/common/logo_hoz_bk.svg');}
.allmenu .inner{display:flex;align-items: center;}
.allmenu ul{display:flex;flex-direction: column;gap:40px;font-size: var(--com-txt-bg);font-weight: 700;}
.allmenu li{position:relative;padding-left:15px;}
.allmenu li a{color:var(--bk);font-size: 22px;}
.allmenu li a::before{display: block;content: "";width: 3px;height: 18px;background: #000;position: absolute;left: 0px;top: 0px;transform: scaleY(0);transition: all .4s;}
.allmenu li:hover a::before{transform: scaleY(1);}


/******************푸터*******************/
footer{width:100%;padding:100px 0;background:var(--bk);}
footer .info-wrap{padding:var(--mg-mm) 0;color:#fff;border-bottom:1px solid rgba(255, 255, 255, 0.20);}
footer .info-wrap ul{gap:100px;}
footer .info-wrap strong{display:block;margin-bottom:10px;font-size: var(--com-txt-bg);font-weight: 700;}
footer .info-wrap p{font-size:var(--com-txt-sm);}
footer .info-wrap img{width:180px;}
footer .copyright{padding-top:var(--mg-mm);font-size: calc(var(--com-txt-sm) - 4px);color:rgba(255, 255, 255, 0.20);}

/******************섹션*******************/