@charset "utf-8";
*{ list-style: none; margin: 0; padding: 0; border: 0; box-sizing: border-box; text-decoration: none; font-family: "Pretendard", sans-serif; font-weight: 400; line-height: 1; letter-spacing: -0.5px; color: #000;}
select::-ms-expand{ display: none;}
body{ -webkit-text-size-adjust: none;}


.container{}


.text{ display: flex; flex-direction: column; justify-content: center; align-items: center; grid-gap: 80px; position: fixed; z-index: 20; top: 0; bottom: 120px; left: calc(50% - 600px); text-align: center;}
.text .logo{ display: block; margin: 0 auto;}
.text .name{ display: block; margin: 0 auto;}
.text .tit{ margin-top: 20px; line-height: 1.2; font-size: 40px; font-weight: 700; color: #000;}
.text .txt{ margin-top: 30px; line-height: 1.2; font-size: 18px; font-weight: 400; color: rgba(0 0 0/60%);}
.text .btn{ display: flex; grid-gap: 10px;}
.text .btn a{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; width: 300px; height: 55px; border-radius: 5px; transition: all .2s;}
.text .btn a:nth-child(1):after{ content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(/page/naver/images/btn_bg1.png) center/cover;}
.text .btn a:nth-child(2):after{ content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(/page/naver/images/btn_bg2.png) center/cover;}
.text .btn a p{ position: relative; z-index: 10; font-size: 18px; color: #FFF;}
.text .btn a:hover{ transform: scale(0.95);}
@media(max-width: 1400px){
    .text{ position: absolute; grid-gap: 50px; left: 50px; bottom: initial; height: 100dvh;}
}
@media(max-width: 1000px){
    .text .btn a{ width: 200px;}
}
@media(max-width: 768px){
    .text{ justify-content: flex-end; grid-gap: 30px; right: 0; left: 0; padding: 100px 20px 40px 20px; background: linear-gradient(180deg, rgba(255 255 255/0%), rgba(255 255 255/80%));}
    .text .logo{ position: absolute; top: 40px; left: 50%; transform: translate(-50%,0); height: 45px;}
    .text .name{ width: auto; height: 30px;}
    .text .tit{ margin-top: 15px; font-size: 24px;}
    .text .txt{ margin-top: 15px; font-size: 14px;}
    .text .btn{ width: 100%;}
    .text .btn a{ width: 50%; height: 40px;}
    .text .btn a:nth-child(1):after{ background: url(/page/naver/images/btn_bg1.png) center/ 100% 100%;}
    .text .btn a:nth-child(2):after{ background: url(/page/naver/images/btn_bg2.png) center/ 100% 100%;}
    .text .btn a p{ font-size: 15px;}
}


.visual{ overflow: hidden; display: flex; justify-content: center; align-items: flex-end; position: fixed; top: 0; right: 0; bottom: 120px; left: 0;}
.visual img{ display: block; position: relative; z-index: 10; height: 90%; transform: translate(25%,0);}
.visual .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(/page/naver/images/bg.jpg) center/cover;}
@media(max-width: 1400px){
    .visual{ position: relative; top: initial; right: initial; bottom: initial; left: initial; width: 100%; height: 100dvh;}
}
@media(max-width: 768px){
    .visual{ padding-top: 100px;}
    .visual img{ height: 100%; transform: translate(0,0);}
}


.footer{ display: flex; justify-content: center; position: fixed; right: 0; bottom: 0; left: 0; padding: 0 50px; height: 120px;}
.footer .inner{ display: flex; justify-content: space-between; align-items: center; max-width: 1200px; width: 100%;}
.footer .fl{ display: flex; grid-gap: 80px;}
.footer .fl .row{ display: flex; flex-direction: column; grid-gap: 10px;}
.footer .fl p{ display: flex; align-items: center; font-size: 14px; color: rgba(0 0 0/80%); letter-spacing: 0;}
.footer .fl p b{ padding-right: 10px; color: rgba(0 0 0/50%);}
.footer .fl p span{ display: block; margin: 0 15px; width: 1px; height: 14px; background: #DDD;}
.footer .fr{ display: flex; flex-direction: column; align-items: flex-end; grid-gap: 10px;}
.footer .fr .menu{ display: flex; align-items: center;}
.footer .fr .menu a{ display: block; font-size: 14px; color: #333; cursor: pointer;}
.footer .fr .menu span{ display: block; margin: 0 15px; width: 1px; height: 14px; background: #DDD;}
.footer .fr .copy{ font-size: 12px; color: rgba(0 0 0/60%); letter-spacing: 0;}
@media(max-width: 1400px){
    .footer{ position: initial; padding: 50px; height: auto;}
    .footer .fl{ grid-gap: 40px;}
}
@media(max-width: 1120px){
    .footer .inner{ flex-direction: column; align-items: initial; grid-gap: 30px;}
    .footer .fr{ align-items: initial;}
}
@media(max-width: 1000px){
    .footer .inner{}
    .footer .fl{ flex-direction: column; grid-gap: 30px;}
}
@media(max-width: 768px){
    .footer{ padding: 30px 20px;}
    .footer .fl{ grid-gap: 20px;}
    .footer .fl p{ font-size: 12px;}
    .footer .fl p span{ height: 12px;}
    .footer .fr .menu a{ font-size: 12px;}
}