@charset "utf-8";
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}


/* 초기화 */
body {margin:0;padding:0;font-size:0.75em;font-family:'Pretendard';background:#fff;overflow: hidden;}
body {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Malgun Gothic', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Pretendard';font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Pretendard';font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:keep-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {text-decoration:none; cursor: pointer!important;color:inherit;}
select{background-color: transparent; color: #000;}

*, :after, :before {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=password]{font-family: '기본 적용 폰트';}

select, select:focus, select:active { outline:none; -webkit-tap-highlight-color: transparent;}
button, button:focus, button:active { outline:none; -webkit-tap-highlight-color: transparent;}
a, a:focus, a:active { outline:none; -webkit-tap-highlight-color: transparent;}
input, input:focus, input:active { outline:none; -webkit-tap-highlight-color: transparent;}
div, div:focus, div:active{ outline:none; -webkit-tap-highlight-color: transparent;}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px transparent inset;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
}


*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;background:#141618;color:#fff;font-family:Pretendard,sans-serif;}
/* main css */
.intro{width:100%;height:100vh;height:100dvh;position:relative;overflow:hidden;background:#000;}
.lig_intro{position:absolute;top:50%;left:50%;width:0;height:0;z-index:10;}
.lig_symbol{width:200px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;z-index:2;}
.lig_letter{display:block;position:absolute;font-size:130px;font-weight:600;line-height:1;top:50%;opacity:0;}
.lig_l,.lig_g{left:50%;right:auto;transform:translate(-50%,-50%);}
.center_line{position:absolute;top:50%;left:50%;width:1px;height:0;background:rgba(255,255,255,0.8);transform:translate(-50%,-50%);z-index:5;}
.category_wrap{position:absolute;top:0;left:0;width:100%;height:100%;display:flex; z-index: 2;}
.category{width:50%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;}
.category_left{padding:0;}
.category_right{padding:0;}
.category_inner{width:max-content;position:relative;text-align:center;}
.category_title{font-size:48px;font-weight:600;line-height:1.1;display:flex;align-items:baseline;justify-content:center;white-space:nowrap;}
.category_title_rest,.left_femto{opacity:0;}
.category_sub{font-size:24px;line-height:1.45;margin-top:15px;opacity:0;transform:translateY(20px);white-space:pre-line; color: rgba(255, 255, 255, 0.8)}
.category_btn{display:inline-block;margin-top:45px;padding:14px 25px;border:1px solid rgba(255,255,255,.6);font-size:14px;opacity:0;transform:translateY(20px);transition:background .3s ease,color .3s ease; border-radius: 3px; background-color: rgba(0,0,0,0.2)}
.category_btn:hover{background:#009EA9;}
.category_btn img{height: 10px; display: inline-block; margin-left: 7px;}
.final_letter{display:inline-block;visibility:hidden;}
.main_background_wrap{width: 100%; display: inline-block; float: left; height: 100%; position: absolute; top: 0; left: 0;}
.main_background_img{width: 100%; height: 100%; display: inline-block; float: left; overflow: hidden;}
.main_background_img video{width: 100%; height: 100%; display: inline-block; float: left; object-fit: cover; object-position: left;}
.main_background_cover{width: 100%; height: 100%; display: inline-block; float: left; background:linear-gradient(to bottom,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.4) 100%); position: absolute; top: 0; left: 0; z-index: 1;}
.header_wrap{width:100%; height:100px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 50px; position: fixed; top: 0; left: 0; z-index: 3; opacity:0; transform:translateY(-100%);}
.logo{justify-self:start; height: 100%; display: flex; align-items: center; float: left; position: relative; padding: 0 15px;/*  background: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.5); */ border-radius: 0 0 3px 3px;}
.logo img{display: inline-block; float: left; height: 75px;}
.menu_wrap{justify-self:center; display:flex; align-items:center; gap:50px; float: left; height: 100%; /* margin-right: 13px; */}
.menu{display: inline-block; float: left; height: 100%; font-size: 17px; color: rgba(255, 255, 255, 0.8); line-height: 100px;}
.menu:hover{color: #fff; font-weight: 500;}
.lang_wrap{justify-self:end;display:flex;height:100%;width:27px;align-items:center;justify-content:center;position:relative;}
.lang_img{width:27px;padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.lang_img img{width:100%;display:block;opacity:0.8;}
.lang_box{position:absolute;top:80px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;background-color:rgba(0,0,0,0.8);padding:5px 10px;border-radius:5px;}
.lang_wrap.on .lang_box{opacity:1;visibility:visible;}
.lang_item{width:70px;height:35px;padding:0;border:0;background:none;color:rgba(255,255,255,0.8);font-size:13px;cursor:pointer;transition:color .3s ease;}
.lang_item:first-child{border-bottom: 1px solid rgba(255, 255, 255, 0.2)}
.lang_item:hover,.lang_item.on{color:#009EA9; font-weight: 500;}
a.menu{text-decoration:none;position:relative;}
a.menu::before{content:"";position:absolute;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid #fff;bottom: 20px; left:50%;transform:translateX(-50%) scaleY(0);transition:all .4s;}
a.menu:hover::before{transform:translateX(-50%) scaleY(1);}

/* footer */
.footer_wrap{width: 100%; display: inline-block; float: left; position: relative; background: url(../img/footer_background.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; border-top: 1px solid #5a636a;}
.footer_edge_line{position:absolute;z-index:8;top:0;width:1px;height:100%;background:#5a636a;pointer-events:none;}
.footer_edge_left{left:30px;}
.footer_edge_right{right:30px;}
.footer_background_cover{width: 100%; height: 100%; display: inline-block; float: left; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.7);}
.footer_info_wrap{width: 100%; display: flex; flex-wrap: wrap; float: left; position: relative; z-index: 2; height: 100%; padding: 0 70px;}
.footer_info_left{width: calc(100% - 400px); display: flex; float: left; height: auto; align-items: end;}
.footer_title_wrap{width: 100%; display: inline-block; float: left; margin-bottom: 30px;}
.footer_title{width: 100%; display: inline-block; float: left; font-size: 75px; font-weight: 300; color: #fff; line-height: 100%; margin-bottom: 5px;}
.footer_title:last-child{margin-bottom: 0;}
.footer_info_right{width: 400px; display: flex; float: left; height: auto; padding-top: 500px; color: #fff; justify-content: end; margin-bottom: 33px; }
.footer_info_right_inner{width: 100%; display: inline-block; float: left;}
.footer_info_menu_wrap{width: 100%; display: flex; float: left; margin-bottom: 50px; flex-wrap: wrap;}
.footer_info_menu_left{width: 50%; display: inline-block; float: left; height: auto;}
.footer_info_menu_right{width: 50%; display: inline-block; float: left; height: auto;}
.footer_info_menu{width: 100%; display: inline-block; float: left; font-size: 15px; color: rgba(255, 255, 255, 0.8); margin-bottom: 20px; font-weight: 300;}
.footer_info_menu:last-child{margin-bottom: 0;}
.footer_info_menu:hover{color: #fff;}
.footer_info_addr_wrap{width: 100%; display: inline-block; float: left; margin-bottom: 25px;}
.footer_info_addr{width: 100%; display: inline-block; float: left; font-size: 17px; font-weight: 400; color: rgba(255, 255, 255, 0.9); margin-bottom: 4px;}
.footer_info_addr:last-child{margin-bottom: 0;}
.footer_info_etc_wrap{width: 100%; display: inline-block; float: left;}
.footer_info_etc{width: 100%; display: inline-block; float: left; font-size: 17px; font-weight: 500; color: rgba(255, 255, 255, 0.9); margin-bottom: 7px; height: 33px; line-height: 33px;}
.footer_info_etc:last-child{margin-bottom: 0;}
.footer_info_etc img{width: 33px; display: inline-block; float: left; margin-right: 10px;}
.footer_info_copyright{width: 100%; display: inline-block; float: left; border-top: 1px solid #5a636a; position: relative; z-index: 2; height: 80px; line-height: 80px; color: rgba(255, 255, 255, 0.6); padding: 0 70px; font-size: 15px; font-weight: 300;}
.top_btn{width:60px; height:60px; display:flex; justify-content:center; align-items:center; position:fixed; bottom:60px; right:30px; border:1px solid #5a636a; background-color:#141618; cursor:pointer; z-index:99; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .6s ease, visibility 0s linear .6s, background-color .3s ease;}
.top_btn.on{ opacity:1; visibility:visible; pointer-events:auto; transition: opacity .6s ease, visibility 0s linear 0s, background-color .3s ease;}
.top_btn img{width:19px; display:inline-block; opacity:.6; transition:opacity .3s ease;}
.top_btn:hover{background-color:#009ea9;}
.top_btn:hover img{opacity:1;}
@media(max-width:1600px){
    .footer_info_right{width: 320px;}
    .footer_info_left{width: calc(100% - 320px);}
    .footer_title{font-size: 69px;}
}

@media(max-width:1400px){
    .footer_title{font-size: 55px;}
    .footer_info_right{padding-top: 350px;}


}
@media(max-width:1100px){
    /* main css */
    .category_left{padding:0;}
    .category_right{padding:0;}
    .category_inner{width:max-content;max-width:40vw;}
    .category_title{font-size:clamp(30px,3.45vw,38px);}
    .category_sub{font-size:18px;margin-top:20px;}
    .category_btn{margin-top:40px;padding:12px 22px;font-size:13px;}
    .lig_letter{font-size:clamp(80px,9.1vw,100px);}
    .footer_info_left{width: 100%; margin-bottom: 0; margin-top: 35px;}
    .footer_info_right{width: 100%; padding-top: 50px;}
    .footer_title{font-size: 45px;}
}
@media(max-width:767px){
    .menu_wrap{margin-right: 0;}
    .top_btn{width: 40px; height: 40px; right: 20px;}
    .top_btn img{width: 12px;}
    /* main css */
    .category_wrap{flex-direction:column;}
    .category{width:100%;height:50%;justify-content:center;padding:0;}
    .category_left{align-items:center;padding:0;}
    .category_right{align-items:center;padding:0;}
    .category_inner{width:max-content;max-width:calc(100% - 40px);}
    .category_title{font-size:clamp(26px,7vw,30px);}
    .category_sub{font-size:16px;line-height:1.5;margin-top:5px;}
    .category_btn{margin-top:20px;padding:11px 18px;font-size:12px;}
    .lig_letter{font-size:clamp(60px,16vw,75px);}
    .lig_l{left:auto;right:35px;transform:translateY(-50%);}
    .lig_g{left:35px;right:auto;transform:translateY(-50%);}
    .center_line{top:calc(50% + 25px);left:50%;width:0;height:1px;transform:translate(-50%,-50%);}
    .header_wrap{padding: 0 20px; height: 70px;}
    .logo{padding: 0;}
    .logo img{height: 45px;}
    .menu_wrap{gap: 20px;}
    .menu{line-height: 70px; font-size: 13px;}
    .lang_img{width: 20px;}
    a.menu::before{border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid #fff;}
    .category_wrap{height: calc(100vh - 50px); margin-top: 50px;}
    .lig_intro{top:calc(50% + 25px);}
    .lang_box{top: 60px; left: unset; transform: unset; right: -10px;}
    .lang_item{width: 60px;}
    .lig_symbol{width: 135px;}
    

    .footer_info_wrap{padding: 0 40px;}
    .footer_title{font-size: 27px; line-height: 140%; margin-bottom: 0;}
    .footer_info_menu{font-size: 14px; margin-bottom: 10px;}
    .footer_title_wrap{margin-bottom: 40px;}
    .footer_info_left{margin-top: 100px;}
    .footer_info_right{padding-top: 0; margin-bottom: 20px;}
    .footer_info_menu_wrap{margin-bottom: 20px;}
    .footer_info_addr{font-size: 15px; width: unset; margin-right: 15px;}
    .footer_info_addr:last-child{margin-right: 0;}
    .footer_info_etc img{width: 26px;}
    .footer_info_etc{height: 26px; line-height: 26px; font-size: 15px;}
    .footer_info_copyright{height: 50px; padding: 0 40px; font-size: 9px; line-height: 50px;}
    .footer_edge_left{left: 20px;}
    .footer_edge_right{right: 20px;}
    
}