/* CSS 초기화 */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, var,
b, i, u,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, section, summary,
time, mark, audio, video {
    border:0;
    font:inherit;
    vertical-align:baseline;
}

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

html, body {
    position:relative;
    height:100%;

}

/* 스냅 비활성화 상태(길이가 긴 섹션을 보고 있을 때) */
html.disable-snap, body.disable-snap {
  scroll-snap-type: none;
}


body{
    font-family: 'Pretendard';
    font-weight: 500;
    line-height: 1.2;
    font-size:14px;
    color:#050505;
}

input,button {
    font-family: 'Pretendard';
    font-size: 14px;
    font-weight: 400;
    outline:none;
    box-sizing: border-box;
}

table {
    border-collapse: collapse;
    border-collapse: separate; /* 셀 테두리 분리 */
    border-spacing: 0; /* 셀 간 간격 없앰 */
}

ul, ol{
    list-style:none;
}

img {
    width:100%;
    vertical-align: top;
    user-select: none;
}

a {
    color:#000;
    text-decoration:none;
}

button {
    border: none;
    background: none;
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

textarea {
    resize:none;
    font-family: 'Pretendard';
}

select::-ms-expand{
    display:none;
}

select {
    cursor: pointer;
}


.width-1400 {
    position:relative;
    width:1400px;
    margin:0 auto;
}

.width-1300 {
    position:relative;
    width:1300px;
    margin:0 auto;
}

.mt-05 {
    margin-top:.5rem;
}

.mt-10 {
    margin-top:1rem;
}

.mt-20 {
    margin-top:20px;
}

.mt-35 {
    margin-top:3.5rem;
}

.mb-05 {
    margin-bottom:.5rem;
}

.mb-10 {
    margin-bottom:1rem;
}

.mb-15 {
    margin-bottom:1.5rem;
}

.mb-20 {
    margin-bottom:2rem;
}

.mb-30 {
    margin-bottom:3rem;
}

.mb-40 {
    margin-bottom:4rem;
}

.mr-05 {
    margin-right:.5rem;
}

.mr-10 {
    margin-right:1rem;
}

.mr-20 {
    margin-right:2rem;
}

.d-flex {
    display:flex;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}


.overflow-hidden {
    overflow:hidden;
}

.justify-betweewn {
    justify-content: space-between;
}

.hidden {
    display:none;
}

.vc_wrap {
    position:relative;
}

/* header */

.header {
    position: fixed;
    top:20px;
    z-index:1000;
    width:100%;
}

.head-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header_logo a {
    display:block;
    width:220px;
    height:55px;
    background-image: url('/images/main/vl-logo-white.png');
    background-repeat: no-repeat;
    background-position: 0 45%;
    background-size:100%;
    flex:0 0 auto;
    cursor: pointer;
}

.gnb {
    flex:1;
    display:flex;
    align-items: center;
    justify-content: center;
}

.gnb a {
    display:flex;
    align-items: center;
    justify-content: center;
    display: inline-block;
    color:#fff;
    font-size:18px;
    padding:1rem 2.5rem;
}

.gnb-b a {
    color:#000;
}

.gnb a:hover {
    color:#77ffea;
}

.vc-link {
    margin-left:2rem;
}

.vc-link a {
    width:100%;
    min-width:160px;
    font-size:0;
    background-image: url('/images/main/vc-logo-white.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;
}

.vc-link a:hover {
    background-image: url('/images/main/vc-logo-hover.png');
}

.head-bt-area a {
    flex:0 0 auto;
    display: inline-block;
    border:1px solid rgba(255,255,255,0.5);
    border-radius: 5px;
    padding:.6rem 1.4rem;
    color:#fff;
    font-weight: 400;
    font-size:14px;
    margin-left:.2rem;
}

.head-bt-area a.h-eng {
    display: flex;
    justify-content: center;   /* 수평 중앙 정렬 */
    align-items: center;       /* 수직 중앙 정렬 */
    width: 80px;
    padding-left:0;
    padding-right:0;
    gap: 5px;
}

.lang-group {
    position:relative;
}

.lang-group .open-globe {
    display:none;
    position:absolute;
    top:40px;
    width:100%;
    border:1px solid rgba(255,255,255,0.5);
    border-radius: 5px;
    margin-left:3px;
}

.open-globe a {
    display:flex;
    border:0;
    padding:.3rem 1rem .3rem .8rem;
    font-size:.8rem;
    line-height:2;
    font-weight: 300;
    margin:0;
    align-items: center;
    gap: 5px;
}

.lang-icon {
    width:16px;
    height:16px;
    border-radius: 50px;
    border:1px solid rgba(0, 0, 0, 0.2);
}

.open-globe a:hover {
    color:#c3c6ed;
}

.lang-group.open .open-globe {
    display:block;
    z-index:1;
}

.sub-header {
    top:0;
}

/* header - dark */
.head-dark {
    top:0;
    background-color:#fff;
    padding:12px 0 10px 0;
    box-shadow: 2px 0 7px rgba(0, 0, 0, 0.1);
}

.head-dark .header_logo a {
    background-image: url('/images/main/vl-logo-black.png');
}

.head-dark .gnb a {
    color:#000;
}

.head-dark .gnb a:hover {
    color:#5e3ee7;
}

.head-dark .gnb a.active {
    color:#5e3ee7;
}

.head-dark .vc-link a {
    background-image: url('/images/main/vc-logo-black.png');
}

.head-dark .vc-link a:hover {
    background-image: url('/images/main/vc-logo-hover02.png');
}

.head-dark .head-bt-area a {
    color:#000;
    border:1px solid rgba(0, 0, 0, 0.5);
}

.floating {
    position: fixed;
    bottom: 2%;
    right: 2%;
    z-index: 2;
}

.floating ul li {
    margin-bottom:.5rem;
    text-align: center;
}

.floating ul li a {
    position:relative;
    display:inline-block;
    border-radius: 100%;
    width:75px;
    height:75px;
    font-size:0;
    text-indent: -9999;
}

.floating ul li a.contact-link {
    background-image: url('/images/main/right-icon02.png');
    background-repeat: no-repeat;
    background-position: center 50%;
    background-size:40%;
    background-color: #2d296d;
    box-shadow: 3px 3px 10px rgba(115, 99, 235, 0.4)  ;
	-webkit-box-shadow: 3px 3px 10px rgba(115, 99, 235, 0.4)  ;
	-moz-box-shadow: 3px 3px 10px rgba(115, 99, 235, 0.4)  ;
}

.floating ul li a.contact-link:hover::after {
    content: var(--tooltip-text, '문의하기');
    position:absolute;
    top:75%;
    left:50%;
    transform: translateX(-50%);
    font-size:12px;
    font-weight: 500;
    color:#2d296d;
    padding:.2rem .3rem;
    border-radius: 50px;
    background-color:#fff;
    border:1px solid #2d296d;
    white-space: nowrap;
}

.floating ul li a.gotop {
    position:relative;
    font-size:13px;
    color:#1b1b1b;
    font-weight:500;
    width:55px;
    height:55px;
    padding-top:1.7rem;
    background-color:#fff;
    box-shadow: 3px 3px 10px rgba(115, 99, 235, 0.4)  ;
	-webkit-box-shadow: 3px 3px 10px rgba(115, 99, 235, 0.4)  ;
	-moz-box-shadow: 3px 3px 10px rgba(115, 99, 235, 0.4)  ;
}

.floating ul li a.gotop::before {
    content: '';
    position:absolute;
    top:30%;
    left:41%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid black; /* 삼각형 색상 */
}

/* footer */
.footer-wrap {
    scroll-snap-align: start;
    text-align: center;
    border-top:1px solid rgba(0, 0, 0, 0.08);
}

.footer-mn {
    padding-top:1.5rem;
    align-items: center;
    justify-content: center;
}

.footer-mn li {
    position:relative;
}

.footer-mn li a {
    display: inline-block;
    color: #353535;
    font-size: 15px;
    padding-right: 2rem;
    padding-top: 4px;
}

.footer-mn li::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 13px;
    width: 4px;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50px;
}

.footer-mn li:last-child::after {
    display:none;
}

.f-cont {
    padding:.5rem 0 2rem 0;
    color:#757575;
    font-size:14px;
    line-height:1.5;
    font-weight:400;
}

.copyright {
    color:#9f9f9f;
    font-size:12px;
    padding-top:.5rem;
}

.f-cont .br {
    display:block;
}

.main-container {
    position: relative;
}

/* 각 section은 한 화면 꽉 차게 */
.main-container > section {
    min-height: 100vh;              /* 기본 한 페이지 */
    scroll-snap-align: start;       /* 스냅 정렬 기준 */
    scroll-snap-stop: normal;
    display: block;
    padding-top:100px;
}

/* main */

/* 조상에 disable-snap 붙는 경우 */
.disable-snap .main-container { scroll-snap-type: none !important; }

/* 컨테이너 자신에 disable-snap 붙는 경우 */
.main-container.disable-snap { scroll-snap-type: none !important; }


.main-wrap {
    position:relative;
    background-color:#030517;
}

.main-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/main/main-visual.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size:80%;
    z-index: 0;
  }

.slogan {
    position: relative; /* top px로 찍을 거라 relative 사용 */
    display: inline-block;               /* 가로는 왼쪽 정렬 */
    color:#fff;
    font-family: 'GmarketSans';
    font-weight: 400;
    font-size:3.7rem;
    line-height:1.3;
}

.slogan-area.en .slogan {
    font-size:46px;
    font-weight:400;
}

.slogan .br {
    display:block;
}


.main-login {
    position:fixed;
    top:165px;
    right:0;
    display:flex;
    align-items: flex-start;
    transition: transform 0.3s ease-in-out;
    z-index:9;
}

.main-login .h2-left {
    cursor: pointer;
    background-color:#fff;
    border-radius: 15px 0 0 15px;
    writing-mode: vertical-rl;
    padding:1.4rem 1.2rem;
    color:#030517;
    font-size:18px;
    font-weight: 500;
    letter-spacing: -4px;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
}

.main-login .h2-left.en {
    letter-spacing: 0;
    padding-bottom:1.1rem;
}

.main-login .h2-left img {
    width:20px;
    margin-top:7px;
}

.main-login .h2-left.en img {
    margin-top:0;
}

.login-wrap {
    width:350px;
    background-color: #fff;
    padding:1.5rem;
    border-radius: 0 0 0 15px;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
    transform: translateX(0); /* 기본 위치 */
    opacity: 1;
}

/* 로그인 폼이 오른쪽으로 밀려날 때 */
.main-login.hidden .login-wrap {
    transform: translateX(100%); /* 오른쪽으로 이동 */
    opacity: 0; /* 사라짐 */
}

/* 로그인 버튼이 함께 이동하여 로그인 폼이 사라졌을 때도 딱 붙도록 조정 */
.main-login.hidden .h2-left {
    transform: translateX(0); /* 로그인 폼 너비만큼 이동 */
    transition: transform 0.3s ease-in-out;
}

/* 🔥 전체 영역도 줄여서 숨겨진 폼이 클릭되지 않도록 함 */
.main-login.hidden {
    width: 59px; /* h2-left 버튼 크기만 남기고 줄이기 */
}

.h2-top {
    font-size:23px;
    color:#0f0f0f;
    text-align: center;
    font-weight:500;
    padding:.5rem 0 1.3rem 0;
}

.main-login input {
    width:100%;
    background-color:#ededed;
    text-align: center;
    border:0;
    padding:1.1rem 0;
    border-radius: 50px;
    margin-bottom:.7rem;
    font-size:16px;
}

.main-login .form_button {
    width:100%;
    background-color:#030517;
    color:#fff;
    padding:1.1rem 0;
    border-radius: 50px;
    font-size:18px;
    margin-bottom:1rem;
}

.main-login .form_find {
    text-align: center;
    color:#5b5b5b;
    font-size:14px;
    margin-bottom:1rem;
}

.main-login .form_join {
    text-align: center;
}

.main-login .form_join a {
    display:inline-block;
    border:1px solid #030517;
    padding:.5rem 1.7rem;
    font-size:18px;
    color:#030517;
    border-radius: 50px;
    margin-bottom:.5rem;
}

/* 서비스 소개 */
.service-wrap {
    padding-bottom:3rem;
}

.section-h3 {
    text-align: center;
    font-family: 'GmarketSans';
    font-weight: 400;
    font-size:2.8rem;
    line-height:1.3;
    padding:4rem 0 4rem 0;
}

.section-h3 > span {
    display:block;
}

.service-list ul {
    display:flex;
    flex-wrap: wrap;
    column-gap: 4%;   /* 가로 간격은 % */
    row-gap: 4vh;     /* 세로 간격은 vh로 */
}

.service-list ul li {
    flex: 0 0 calc(33.333% - 4%); /* 한 줄에 3개, 가로 gap 고려 */
    background-color:#f5f5f5;
    padding:2rem 3rem;
    border-radius: 30px;
}

.service-img {
    width:47px;
}

.service-tt {
    font-size:1.4rem;
    font-weight:600;
    padding:1rem 0;
}

.service-ss {
    font-size:1rem;
    line-height: 1.3;
}

.service-ss > span {
    display:block;
}

/* 요금제 안내 */
.tab-content {
  display: none;
  overflow: hidden;
  height: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: height .30s ease, opacity .20s ease, transform .30s ease;
  will-change: height, opacity, transform;
}

/* 열릴 때 시각 상태만 */
.tab-content.active {
  opacity: 1;
  transform: translateY(0);
}

.product-wrap {
    background-color:#f6f5fc;
    height: auto; /* 내용이 길면 자연스럽게 늘어남 */
    scroll-snap-align: start;
}

.product-tn {
    display:flex;
    justify-content: space-between;
    position:sticky;
    top:77px;
    background-color:#f6f5fc;
    padding:.5rem 0;
    margin-bottom:.5rem ;
    z-index:3;
}

.product-tab ul li {
    display:flex;
    align-items: center;
    justify-content: center;
    border:1px solid #262448;
    color:#262448;
    font-size:1rem;
    min-width:140px;
    height:45px;
    cursor: pointer;
}

.product-tab ul li.tab01 {
    border-radius: 7px 0 0 7px;
    border-right:0;
}

.product-tab ul li.tab02 {
    border-radius: 0 7px 7px 0;
}

.product-tab ul li.active {
    background-color:#262448;
    color:#fff;
}

.product-num {
    display:flex;
    font-size: 1rem;
    color: #262448;
    align-items: center;
    justify-content: flex-end;
    column-gap:1rem;
}

.pn01,
.pn02 {
    display: flex;
    align-items: center;
    column-gap:.5rem;
}

.pn-box {
    align-items: center;
    border: 1px solid #cecdd9;
    border-radius: 7px;
    background-color: #fff;
    overflow: hidden;
    height:42px;
}

.pn-box input {
    border: 0;
    width: 100px;
    padding: .5rem .7rem;
    font-size: 1.1rem;
    outline: none;
    height: 100%;
    vertical-align: top;
}

.pn-box .no-left {
    border-left:0;
}

.pn-box button {
    font-size: 1.8rem;
    color: #262448;
    border: 0;
    border-left: 1px solid #cecdd9;
    width: 39px;
    height: 100%;
    background: #fff;
    cursor: pointer;
}

.product-list {
    padding-bottom:4rem;
}

.product-list li {
    display: grid;
    grid-template-columns: 25% 75%;
    background-color:#fff;
    border-radius: 10px;
    padding:1.5rem 1.8rem;
    border:1px solid #e8e7ec;
    margin-bottom:1rem;
}

.product-list li > div {
  color:#030517;
}

.product-list li span {
    font-size:1.4rem;
}

.spec-title {
    font-weight: 600;
    font-size:1.6rem;
}

.spec-title .spec {
    display:block;
    font-size:.9rem;
    font-weight: 500;
    padding-right:.7rem;
}

.spec-box .spec-line01,
.spec-box .spec-line02 {
    display:flex;
    flex-wrap: wrap;
    gap:1.5%;
    align-items: center;
    margin-bottom:.5rem;
}

.spec-box .spec-line01 > div {
    flex: 1;
    display:flex;
    align-items: center;
    justify-content: space-between;
    background-color:#f5f4f8;
    border:1px solid #e6e5ef;
    border-radius: 7px;
    padding:.7rem;
}

.spec-box .spec-line02 {
    background-color:#f5f4f8;
    border:1px solid #e6e5ef;
    border-radius: 7px;
    padding:.7rem .7rem;
    margin-bottom:.7rem;
}

.spec-box .spec-line02 > div {
    flex: 1 ;
}

.spec-box .spec-line02 .tti {
    padding-left:0;
    flex:.47;
}

.spec-box .spec-line02 .tti .br {
    display:block;
    font-size:.9rem;
}

.spec-box .spec-line02 .ssi {
    display:flex;
    gap:1.5%
}

.spec-box .spec-line02 .ssi > div {
    flex:1;
    padding:0 1rem;
}

.spec-box .spec-line02 .ssi > div:nth-child(2) {
    padding-left:1.4rem;
}

.spec-box .spec-line02 .ssi .gpu {
    flex:.7;
}

.spec-box .spec-line02 span.ss {
  display: block;
}

.product-list li span.ss {
    font-size:.8rem;
    color:#4939a4;
}

.product-list li:hover {
    background-color:#262448;
}

.product-list li:hover > div {
  color:#fff;
}

.product-list li:hover .spec-box .spec-line01 > div,
.product-list li:hover .spec-box .spec-line02,
.product-list li:hover .spec-box .spec-line02 .ssi,
.product-list li:hover .spec-box .spec-line02 .ssi > div {
    background-color:transparent;
    border-color:rgba(255,255,255,0.3);
}

.product-list li:hover span.ss {
    color:#917ef7;
}

.ex-txt {
    padding-left:.3rem;
}




/* 문의하기 */
.inq-pop {
    position:absolute;
    z-index:2;
    right:1rem;
    top:1rem;
    width:209px;
}

.inquiry-wrap {
    padding:110px 0 2.5rem 0;
}

.inquiry-visual {
    position:relative;
    background-color:#262448;
    border-radius:20px;
    margin-bottom:2.5rem;
    overflow: hidden;
    color:#fff;
    padding:2rem;
}

.inquiry-visual::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: -15% 28%;
    background-size:43%;
    z-index: -1;
}

.inq-h2 {
    font-family: 'Gmarketsans';
    font-size:40px;
    font-weight: 300;
    margin-bottom:.3rem;
}

.inq-stxt {
    font-size:16px;
    font-weight:400;
}

.inquiry-table {
    border-top:1px solid #232323;
}

.inq-form {
    border-bottom:1px solid #dcdcdc;
    padding:1.5rem 1rem;
    align-items: center;
}

.inq-tit {
    font-size:20px;
    font-weight: 400;
    color:#1b1b1b;
    min-width:15%;
}

.inq-tit > span {
    font-size:18px;
    color:#da1b1b;
}

.inquiry-table.en .inq-tit {
    font-size:18px;
    min-width:18%;
}

.inquiry-table.en > span {
    font-size:16px;
}

.inq-form select,
.inq-form textarea,
.inq-form .basic-in {
    border:1px solid #ddd;
    padding:1rem;
    font-size:18px;
}

.inq-form select {
    min-width:350px;
}

.inq-form textarea {
    background-color: #f4f4f4;
    width:100%;
    min-height:170px;
}

.inq-form .basic-in {
    background-color: #f4f4f4;
    min-width:350px;
}

.inq-form .basic-in::placeholder,
.inq-form textarea::placeholder {
    color:#9e9e9e;
    font-size:17px;
}

.form_checkbox {
    flex-wrap: wrap;
    font-size:18px;
    color:#1b1b1b;
    align-items: center;
}

.inquiry-table.en .form_checkbox {
    flex-wrap: nowrap;
    align-items:flex-start;
}

.inquiry-table.en .form_checkbox input {
    margin-top:.2rem;
}

.checkbox-item {
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
}

.agree-box input,
.form_checkbox input {
    width:16px;
    height:16px;
    min-width:16px;
    min-height:16px;
    border:1px solid #9f9f9f;
    margin-right:.5rem;
}

.agree-box {
    width:100%;
    border:1px solid #ddd;
    border-radius:10px;
    overflow: hidden;
}

.all_check_area {
    border-bottom:1px solid #ddd;
    background-color:#f6f6f6;
    padding:1rem 1.5rem;
}

.check_area {
    padding:1rem 1.5rem;
}

.check-p {
    font-size:16px;
    font-weight: 400;
    color:#616161;
    margin-bottom:.5rem;
    justify-content: space-between;
}

.check-p:last-child {
    margin-bottom:0;
}

.check-p label {
    cursor: pointer;
}

.terms_show a {
    display:inline-block;
    border:1px solid #ddd;
    color:#616161;
    font-size:14px;
    padding:.15rem .6rem;
    border-radius: 5px;
    margin-left:1rem;
}

.g-recaptcha {
    margin:3rem 0;
    background-color:#030517;
    color:#fff;
    font-size: 27px;
    padding:1.5rem 7rem;
    border-radius: 15px;
}


/* 반응형 - 해상도 */
@media (max-height: 900px) {
    .section-h3 {
        padding:3rem 0 2.5rem 0;
    }
}

@media (min-height: 1000px) {
    .section-h3 {
        padding:5rem 0 4rem 0;
    }

    .service-list ul li {
        padding:3rem ;
    }

    .service-img {
        width:52px;
    }

    .service-tt {
        font-size:1.6rem;
    }

}

@media (min-height: 1200px) {
    .section-h3 {
        padding:6rem 0 5rem 0;
    }

}

@media (max-width: 1400px) {
    .width-1400 {
        width:100%;
        padding:0 2rem;
    }

    .floating {
        right:1%;
    }

    .main-wrap::before {
        background-size:100%;
    }

    .slogan {
        font-size:3.6rem;
    }
}

@media (max-width: 1300px) {
    .width-1300 {
        width:100%;
        padding:0 1rem;
    }

    .service-list ul {
        column-gap:3%;
    }

    .service-list ul li {
        flex:0 0 calc(33.333% - 3%);
        padding:2rem 2.5rem;
    }

}

@media (max-width: 1200px) {
    .header_logo a {
        width:200px;
    }

    .gnb a {
        padding:1rem 1.2rem;
    }

    .head-bt-area a {
        padding:.6rem 1rem;
    }

    .open-globe a {
        padding:0;
    }

    /* 서비스 소개 */
    .service-ss > span {
        display: inline;
    }

    /* footer - en*/
    .footer-cont.en .bar.en {
        display:none;
    }

    .footer-cont.en .br03.en {
        display:block;
    }

}

@media (max-width: 1100px) {

    /* 문의하기 */
    .inq-tit {
        min-width:18%;
    }

}

@media (max-width: 1024px) {
    .header_logo a {
        width:190px;
    }

    .head-bt-area a {
        font-size:13px;
        padding:.4rem .6rem;
    }

    .open-globe {
        top:35px;
    }

    .open-globe a {
        padding:0;
        font-size:12px;
    }

    .floating {
        bottom:1%;
    }

    .floating ul li {
        margin-bottom:.2rem;
    }

    .floating ul li a {
        width:60px;
        height:60px;
    }

    .floating ul li a.gotop {
        width:50px;
        height:50px;
    }

    .main-wrap::before {
        background-size:120%;
        background-position: center 0;
    }

    /* footer */
    .footer-wrap .width-1400 {
        display: block;
    }

    .footer-cont {
        padding-top:1.5rem;
        padding-left:.5rem;
    }

    /* 서비스 소개 */
    .section-h3 {
        font-size:2.6rem;
        padding:2rem 0;
    }

    .service-list ul li {
        padding:2rem 1.5rem;
        border-radius: 20px;
    }

    .service-ss {
        font-size:.9rem;
    }


    /* 문의하기 */
    .inq-tit {
        min-width:20%;
    }

    .inq-form .basic-in,
    .inq-form .job {
        width:100%;
        min-width:auto;
    }

    .inq-form .job .basic-in {
        margin-bottom:.5rem;
    }

    .inq-form .job {
        flex-direction: column;
    }

    .form_checkbox {
        width:100%;
    }



}

@media (max-width: 900px) {
    .pc-head {
        display:none;
    }

    .header_logo a {
        width:230px;
    }

    #menu-toggle {
        display:block;
        position:relative;
        top: 0;
        right: 0;
        background: none;
        border: none;
        cursor: pointer;
        padding: 7px;
        z-index:10;
    }

    #menu-toggle.menu-open {
        position:fixed;
        right:1.5rem;
        top:1.2rem;
    }

    .line {
        width: 2.2rem;
        height: 3px;
        background-color: white;
        margin: 7px 0;
        transition: all 0.3s ease;
    }

    .head-dark .menu-open .line,
    .menu-open .line {
        background-color: white;
    }

    .header_logo.open-logo a {
        background:url('/images/main/vl-logo-white.png');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position:center 40%;
    }

    .head-dark .line {
        background-color:#000;
    }

    /* Position each line initially */
    .line.top {
        transform-origin: 43% 50%;
    }

    .line.middle {
        transform-origin: center;
    }

    .line.bottom {
        transform-origin: 43% 50%;
    }

    /* When the menu is active (hamburger to X) */
    .menu-open .line.top {
        transform:rotate(45deg) translate(7px, 9px);
    }

    .menu-open .line.middle {
        opacity: 0;
    }

    .menu-open .line.bottom {
        transform:rotate(-45deg) translate(3px, -5px);
    }

    /* 메뉴 열릴 때 */
    .mobile-head.active {
        transform: translateX(0);
        opacity: 1;
    }

    .mobile-head {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100vh;
        background-color:#fff;
        z-index:9;
        display: flex;
        flex-direction: column;

        /* 슬라이드 애니메이션 */
        transform: translateX(100%);
        opacity: 0;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    .mhead-top {
        position:relative;
        padding:1.5rem;
        background-color:#030517;
    }

    .mhead-top .lang-group {
        margin-right:4rem;
        margin-top:.3rem;
    }

    .mo-top {
        display:flex;
        justify-content: space-between;
    }

    .mobile-head .h-eng {
        display:inline-block;
        border:1px solid rgba(255,255,255,0.5);
        color:#fff;
        border-radius: 50px;
        font-size:16px;
        font-weight: 300;
        padding:.5rem 1rem;
    }

    .open-globe a {
        font-size:14px;
        color:#fff;
        padding-left:.4rem;
    }

    .open-globe,
    .lang-group.open .open-globe {
        display: block;
    }

    .open-globe a:hover {
        color:#c3c6ed;
    }

    .lang-icon {
        width:20px;
        height:20px;
    }

    .m-login {
        margin-top:6rem;
        align-items: center;
    }

    .m-log-bt01 {
        position:relative;
        display:inline-block;
        color:#fff;
        font-size:1.8rem;
    }

    .m-log-bt01::after {
        position:absolute;
        top:11px;
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        border-top: 3px solid white;
        border-right: 3px solid white;
        border-radius: 3px;
        transform: rotate(45deg);
        margin-left: 5px;
    }

    .m-log-bt02 {
        display:inline-block;
        color:#030517;
        background-color:#fff;
        border-radius: 5px;
        font-size:1.4rem;
        padding:.6rem 1.2rem;
    }

    .m-gnb li a {
        display:block;
        font-size:2rem;
        border-bottom:1px solid #ccc;
        padding:2rem 1.4rem;
    }

    .m-gnb li a.vc-link {
        margin:0;
    }


    /* 플로팅 메뉴 */
    .floating ul li a.video-link:hover::after,
    .floating ul li a.contact-link:hover::after {
        display:none;
    }

    .main-login {
        top:135px;
    }

    .slogan {
        font-size:3rem;
    }

    .main-wrap::before {
        background-size:130%;
        background-position: 10% top;
    }

    /* 서비스 소개 */
    .section-h3 {
        font-size:2.3rem;
    }

    .service-list ul {
        row-gap: 3vh;
    }

    .service-list ul li {
        flex: 0 0 calc(50% - 4%); /* 한 줄에 3개, 가로 gap 고려 */
    }

    .service-ss {
        font-size:1.1rem;
    }

    /* 요금제 안내 */
    .product-tn {
        flex-direction: column;
        align-items: center;
        row-gap: 1.4rem;
    }

    .product-tab {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .product-tab ul {
        display: flex;
        justify-content: center;
        padding: 0;
        margin: 0;
    }

    .product-num {
        justify-content: center;
        width: 100%;
    }

    .product-list li {
        grid-template-columns:1fr;
        padding:1rem 1.3rem;
    }

    .spec-title {
        margin-bottom:.5rem;
    }

    .spec-title .spec {
        display:inline;
    }



    /* 문의하기 */
    .inq-form {
        flex-direction: column;
        align-items: flex-start;
    }

    .inq-form select {
        width:100%;
        min-width:auto;
    }

    .inq-tit {
        min-width:auto;
        margin-bottom:.7rem;
    }


}


@media (max-width: 768px) {

    .slogan {
        font-size:2.7rem;
    }

    .main-wrap::before {
        background-size:150%;
        background-position: 0 top;
    }

    /* 서비스 소개 */
    .section-h3 {
        font-size:2rem;
    }

    .service-ss {
        font-size:1rem;
    }

    /* 요금제 안내 */
    .spec-title .spec {
        font-size:.8rem;
    }

    /* 문의하기 */
    .inq-h2 {
        font-size:38px;
    }

}


@media (max-width: 700px) {
    .slogan {
        font-size:2.5rem;
    }

    .slogan .br {
        display:inline;
    }
}

@media (max-width: 650px) {
    .width-1400 {
        padding:0 1.5rem;
    }

    .header_logo a {
        width:200px;
    }

    .m-gnb li a {
        font-size:1.7rem;
        padding-top:1.6rem;
        padding-bottom:1.6rem;
    }

    .m-log-bt01,
    .m-free a {
        font-size:1.5rem;
    }

    .m-log-bt01::after {
        top:7px;
    }

    .m-log-bt02 {
        font-size:1.2rem;
    }

    .main-login {
        display:none;
    }

    /* 서비스 소개 */
    .section-h3 {
        font-size:1.7rem;
    }

    /* 요금제 안내 */
    .pn-box input {
        width:100px;
        padding:.3rem .7rem;
    }

    .pn-box button {
        font-size:1.4rem;
        width:34px;
    }



    /* 문의하기 */
    .inquiry-table.en .checkbox-item {
        font-size:16px;
    }

}


@media (max-width: 550px) {

    .floating ul li a {
        width:55px;
        height:55px;
    }

    .floating ul li a.contact-link {
        background-size:45%;
        background-position: center 46%;
    }

    .floating ul li a.gotop {
        width:45px;
        height:45px;
        font-size:11px;
        padding-top:1.4rem;
    }

    /* 서비스 소개 */
    .section-h3 > span {
        display:inline;
    }

    .service-list ul li {
        flex:0 0 100%;
        padding:1.5rem 2rem;
    }

    /* 요금제 안내 */
    .section-h3 {
        padding:1rem 0;
    }

    .product-num {
        flex-direction: column;
        align-items: center;
        row-gap: .4rem;
    }

    .product-tn {
        row-gap:.7rem;
    }

    .pn01,
    .pn02 {
        width: 100%;
        justify-content: center;
    }

    .pn-box {
        height:37px;
    }

    .pn-box input {
        width:120px;
        padding-top:0;
        padding-bottom:0;
        font-size:1rem;
    }

    .pn-box button {
        height:100%;
    }

    .product-num .label {
        display:inline;
        min-width:55px;
        font-size:.9rem;
    }

    .spec-box .spec-line02 {
        background-color:#fff;
        border:0;
        display:block;
        padding:0;
    }

    .spec-box .spec-line02 .tti {
        padding-bottom:.5rem;
    }

    .spec-box .spec-line02 .tti .br {
        display:inline;
    }

    .spec-box .spec-line02 .ssi {
        background-color:#f5f4f8;
        border:1px solid #e6e5ef;
        border-radius: 7px;
        padding:.7rem;

    }


    /* footer */
    .f-cont {
        padding-right:2.5rem;
    }

    .main-wrap::before {
        background-size:200%;
    }


    /* 문의하기 */
    .inquiry-visual {
        border-radius: 25px;
    }

}

@media (max-width: 480px) {
    .mobile-head .h-eng a {
        font-size:16px;
    }

    .tday {
        font-size:16px;
    }

    .footer_logo {
        width:170px;
    }

    .f-cont .br03 {
        display:block;
    }

    .f-cont .bar {
        display:none;
    }

    .footer-cont {
        padding-top:1rem;
    }

    /* 요금제 안내*/
    .spec-title .spec {
        display:block;
        padding-right:0;
    }

    .spec-box .spec-line01 .spec-credit {
        flex: 0 0 100%;
        margin-top:.5rem;
    }

    .spec-box .spec-line02 .ssi {
        display:block;
        padding:0;
        border:0;
        background-color:#fff;
    }

    .spec-box .spec-line02 .ssi > div {
        display:flex;
        align-items: center;
        justify-content: space-between;
        background-color:#f5f4f8;
        border:1px solid #e6e5ef;
        padding:.7rem;
        border-radius: 7px;
        margin-bottom:.5rem;
    }

    .spec-box .spec-line02 .ssi > div:nth-child(2) {
        padding-left:.7rem;
    }

    .spec-box .spec-line02 span.ss {
        display:inline;
    }


    .ex-txt {
        font-size:.8rem;
    }


    /* 문의하기 */
    .inq-stxt .br {
        display:block;
    }

    .all_check_area,
    .check_area {
        padding:1rem;
    }

    .terms_show a {
        margin-left:.2rem;
    }

    .g-recaptcha {
        font-size:25px;
    }

}

@media (max-width: 430px) {

    #menu-toggle.menu-open {
        right:.2rem;
        top:1rem;
    }

    .mhead-top .lang-group {
        margin-right:2rem;
        margin-top:.4rem;
    }

    .mobile-head .h-eng {
        font-size:14px;
        padding:.5rem .7rem;
        width:75px;
    }

    .lang-icon {
        width:18px;
        height:18px;
    }

    .m-login {
        margin-top:3rem;
    }

    .m-log-bt01 {
        font-size:1.3rem;
    }

    .m-log-bt01::after {
        width:10px;
        height:10px;
        top:5px;
    }

    .m-log-bt02 {
        font-size:1rem;
    }

    .m-gnb li a {
        font-size:1.5rem;
    }

    .logo-slide > div img {
        height:50px;
    }

    /* 서비스 소개 */
    .section-h3 {
        font-size:1.5rem;
    }


    /* 문의하기 */
    .inq-h2 {
        font-size:35px;
        margin-bottom:.5rem;
    }

    .inq-stxt {
        font-size:14px;
    }

    .check-p {
        flex-direction: column;
        align-items: flex-start;
    }

    .terms_show {
        margin-top:.5rem;
        margin-left:1.3rem;
    }
}

@media (max-width: 420px) {

    .main-wrap::before {
        background-size:250%;
    }

    .header_logo a {
        width:180px;
    }

    .slogan {
        font-size:2.2rem;
    }
}

@media (max-width: 400px) {

    /* 문의하기 */
    .g-recaptcha {
        font-size:20px;
    }
}

@media (max-width: 360px) {


    .slogan {
        font-size:2rem;
    }

    /* 서비스 소개 */
    .section-h3 {
        font-size:1.4rem;
    }

    /* 문의하기 */
    .inq-h2 {
        font-size:32px;
    }

    .inq-stxt {
        font-size:13px;
    }

}