@charset "utf-8";

/* Æò»ý±³À°ÀÌ¿ë±Ç »ó¼¼º¸±â */
:root{
    --color-lllcard: #03B7B6;
    --color-lllcard-light : #E5FDFD;
    --color-mylight: #FAA73F;
    --color-mylight-light: #FFF4DF;
    --color-security : #008E4E;
    --color-security-light : #E3F6F4;

    --color-gray-90:#141A26;
    --color-gray-60:#4A5061;
    --color-gray-0: #ffffff;

    --font-head : 48px;
    --font-head-sm : 36px;
    --font-btn: 26px;

    --font-weight-title : 'GmarketSansMedium';
    --font-weight-bold : 'GmarketSansBold';
    --font-weight-Light : 'GmarketSansLight';

    --content-inner:870px;
    --saction-gap: 80px;

    --gap-lg: 100px;
    --gap-md: 80px;
    --gap-sm: 60px;
    --gap-xs: 40px;
    --gap-xxs: 32px;

    --round-lg : 48px;
    --round-md : 32px;
    --round-sm : 24px;
    --round-max: 9999px;
}
@media all and (max-width: 780px){
    :root{
        --font-head : 36px;
        --font-head-sm : 30px;
        --font-btn: 16px;

    }
}


.view-details-fixed{
    display:none;
}
.view-details-fixed.active{
    position: fixed;
    left: 0; right: 0;
    top: 0; bottom: 0;
    z-index: 99999;

    width:100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}
/* ÄÁÅÙÃ÷ */
.modal-content {
    position: relative;
    max-width:1024px;
    width: 96%;
    height: 96vh;
    overflow: auto;
    background-color: #fff;
    border-radius: var(--round-lg);
    -ms-overflow-style: none;  /* IE, Edge */
    scrollbar-width: none;     /* Firefox */
    croll-behavior: smooth;

    user-select: none;  /* µå·¡±×/º¹»ç ¹æÁö */
    -webkit-user-select: none;
    -ms-user-select: none;
}
.modal-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
.modal-content img:not(.modal-ctrl-group) {
  pointer-events: none;
  -webkit-user-drag: none;
}
/* ½ºÅ©·Ñ ¹öÆ° */
.modal-ctrl-group{
    position: fixed;
    bottom:calc(2vh + 16px); left:50%;
    transform: translateX(-50%);
}
.modal-ctrl-group ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:4px;
    padding:8px;
    background-color: rgba(0,0,0,0.6);
    border:1px solid rgba(0,0,0,0.3);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(6px);
    border-radius:9999px;
}
.modal-ctrl-group ul li{
    position: relative;
}
.modal-ctrl-group a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px; height: 54px;
    padding-top:3px; line-height: 54px;
    border-radius: var(--round-max);

    color: var(--color-gray-0);
    font-size: 17px;
    font-family: 'GmarketSansMedium';
    text-align: center;
}
.modal-ctrl-group a.scroll-lllcard{background: var(--color-lllcard);}
.modal-ctrl-group a.scroll-mylight{background: var(--color-mylight);}
.modal-ctrl-group a.scroll-security{background-color:#C4FFD6; color:var(--color-security); }
.modal-ctrl-group a br{
    display:none;
}
.modal-ctrl-group .btn-point{
    position: absolute;
    right: 16px; top: -16px;
    height: 26px;
    padding:2px 12px 0 18px;
    background: rgba(0, 0, 0, 0.95);
    color: var(--color-gray-0);
    font-size:12px;
    border-radius: 99px 60px 60px 0;
}

button.view-details-close{
    position: fixed;
    top: 32px; right: 50%;
    margin-right: -496px;
    width: 54px;
    height: 54px;
    z-index: 999;
    background-color: rgba(0,0,0,0.2);
    border-radius: var(--round-max);
}

@media all and (max-width: 1024px){
	.modal-content{
        border-radius: 24px;
    }
    .modal-ctrl-group a{
        width: 160px; height: 44px;
        padding-top:3px; line-height: 44px;
        font-size: 14px;
    }
    button.view-details-close{
        width: 44px; height: 44px;
        top: 24px; right: 16px;
        margin-right:0;
    }
}
@media all and (max-width: 768px){
	.modal-content{
        border-radius: 24px;
    }
    .modal-ctrl-group ul{
        padding:6px;
        border-radius:12px;
    }
    .modal-ctrl-group a{
        width: 96px; line-height: 16px;
        font-size: 12px;
        border-radius:6px;
    }
    .modal-ctrl-group a br{
        display:block;
    }
    .modal-ctrl-group .btn-point{
        right: 3px; top: -16px;
        height: 22px;
        padding:2px 12px 0 12px;
        font-size:10px;
        border-radius:var(--round-max);
    }
}

/* Æò»ý±³À°ÀÌ¿ë±Ç ¾È³» */
#intro{
    min-height: 500px;
    background: 
        linear-gradient(30deg, rgba(3, 183, 182, 0.00) 60%, #FFA330 110%), 
        linear-gradient(340deg, rgba(0, 173, 179, 0.00) 0%, #4153B7 105%), 
        #00ADB3;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:var(--gap-sm);

    text-align: center;
    padding: var(--gap-md) var(--gap-xxs);
}
@media all and (max-width: 780px){
    #intro{
        min-height: 80vh;
    }
}


/* °øÅë */
figure{
    margin:0;
    padding:0;
}
figcaption.blind{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.section{
    padding: var(--gap-lg) var(--gap-xxs);
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap:var(--gap-md)
}
.section .title{
    font-size:var(--font-head);
    font-family: var(--font-weight-bold);
    text-align:center;
    line-height: 1.4;
}
.section .title > span{
    display: inline-block;
}
.section .btn-link{
    border-radius:var(--round-max);
    padding:0 36px; padding-top:5px;
    height: 68px; line-height: 68px;
    font-size:var(--font-btn);
    transition: all 0.3s ease;

    display: flex;
    justify-content: center;
    align-items: center;
    gap:24px;
}
.section .btn-link i.go{
    font-style: normal;
    font-family: var(--font-weight-bold);
    display: inline-block;
    transition: transform 0.3s ease;
}
/* È£¹ö½Ã GO¸¸ ¹Ù¿î½º */
.section .btn-link:hover .go {
  animation: gogo 0.4s ease infinite;
}
@keyframes gogo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media all and (max-width: 780px){
    .section .btn-link{
        padding:0 24px; padding-top:5px;
        height: 52px; line-height: 52px;
        gap:12px;
    }
}



/* Æò»ý±³À°ÀÌ¿ë±ÇÀ̶õ? */
#lllcard{
    background-color: var(--color-lllcard-light);
}
.card-container {
    position: relative;
    max-width: 500px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#card {
    width: 90%;
    transform-style: preserve-3d;
    animation: bounce-animation 4s ease-in-out infinite;
}
#shadow {
    margin-left:55px;
    width: calc(90% - 55px);
    animation: alpha-animation 4s ease-in-out infinite;
    opacity: 1;
}
@keyframes bounce-animation {
    0%, 100% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(20px);
    }
}
@keyframes alpha-animation {
    0%, 100% {
        opacity: 0.16;
    }
    50% {
        opacity: 1;
    }
}

/* Æò»ý±³À°ÀÌ¿ë±Ç »ç¿ë ¹æ¹ý */
.lllcard-step{
    background-color: var(--color-lllcard);
}
.lllcard-step .title{
    color:var(--color-gray-0)
}
/* Æò»ý±³À°ÀÌ¿ë±Ç ´©°¡ »ç¿ëÇϳª¿ä  */
.lllcard-user{
    background: linear-gradient(180deg, #EFFFFF 46.4%, #03B7B6 237.03%);
}
.lllcard-user .title{
    color:var(--color-lllcard)
}
.lllcard-user .btn-link{
    background-color: var(--color-lllcard);
    color:var(--color-gray-0);
}



/* °¡º­¿î ÇнÀÁö ¸¶À̶óÀÌÆ® */
#mylight{
    background-color: var(--color-gray-0);
}
#mylight .title span:first-child{
    font-family: var(--font-weight-Light);
    color:var(--color-gray-90)
}
#mylight .title span:nth-of-type(2),
#mylight .title span:nth-of-type(3){
    font-family: var(--font-weight-bold);
    color:var(--color-mylight)
}
@media all and (max-width: 780px){
    #mylight .title span:first-child{
        font-size:var(--font-head-sm)
    }

}

/* ¸¶À̶óÀÌÆ® ÇнÀÁö ¸¸³ªº¸¼¼¿ä! */
.mylight-edu{
    background-color: var(--color-mylight);
}
.mylight-edu .title{
    color:var(--color-gray-90)
}
.mylight-edu .title p{
    font-size:var(--font-head-sm);
    font-family: var(--font-weight-Light);
    margin-bottom:12px;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-wrap: wrap;
    gap:4px;
}
.mylight-edu .title p span{
    display: inline-block;
    font-size:27px;
    color: #FF6A00;
    padding:5px 24px 0 24px;
    background-color: var(--color-gray-0);
    border-radius: 999px;
}
.mylight-edu .btn-link{
    background-color: var(--color-gray-0);
    color:var(--color-mylight);
}
/* ¸¶À̶óÀÌÆ® 5°¡Áö ÈùÆ® */
.mylight-hint{
    background: linear-gradient(0deg, #4C3091 50%, var(--color-mylight) 100%);
}
.mylight-hint .title{
    color:var(--color-gray-0)
}
.mylight-hint .title strong{
    color:#FFEA00;
}
.mylight-hint .title p{
    font-size:var(--font-head-sm);
    font-family: var(--font-weight-Light);
    margin-bottom:12px;
}
.mylight-hint .title p span{
    display: inline-block;
}
.mylight-hint figure a{
    display: block;
}
.mylight-hint .btn-link{
    background-color: var(--color-mylight);
    color:var(--color-gray-0);
}
@media all and (max-width: 530px){
    .mylight-edu .title p{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        gap:8px;
        margin-bottom:32px;
    }
    .mylight-hint .title p{
        margin-bottom:32px;
    }
}

/* ÁÁÀºÀÏÀÚ¸® Æò»ý±³À°ÀÌ¿ë±Ç »ç¿ë ±â°ü ¼±Á¤ */
#security{
    background-color: var(--color-gray-0);
    min-height: auto;
    padding: var(--gap-md) 0;
    padding-bottom:0;
}
#security .grouping{
    width: 100%;
    max-width:1024px;
}
.text-marquee {
  background: var(--color-security); /* ³ì»ö ¹Ú½º */
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  height: 90px;
  margin-top:-1px;
}
.text-marquee .track {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 15s linear infinite;
}
.text-marquee span {
    display: inline-block;
    padding-right: var(--gap-lg); 
    padding-top:36px;
    color: var(--color-gray-0);
    font-size: 56px;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media all and (max-width: 780px){
    .text-marquee {
        height: 60px;
    }
    .text-marquee span {
        padding-top:24px;
        font-size: 40px;
    }
}

/* Çʼö °æºñÀ̼öÁõ ÃëµæÇϼ¼¿ä! */
.security-info{
    min-height: auto;
    padding: var(--gap-sm) var(--gap-xxs);
}
/* ÀϹݰæºñ½ÅÀÓ±³À°À» ½ÅûÇϼ¼¿ä! */
.security-step{
    background-color: var(--color-security);
}
.security-step .title{
    color:var(--color-gray-0)
}
.security-step .title p{
    font-size:var(--font-head-sm);
    font-family: var(--font-weight-Light);
    margin-bottom:12px;
}
.security-step .title p span{
    display: inline-block;
}
.security-step .btn-link{
    background-color: var(--color-gray-0);
    color:var(--color-security);
    margin-bottom:var(--gap-md)
}


@media all and (max-width: 530px){
    .security-step .title{
        margin-bottom:32px;
    }
}








/* ¹ÝÀÀÇü À̹ÌÁö on/off */
.view-pc{
    display: block;
}
.view-mobile{
    display: none;
}
@media all and (max-width: 780px){
    .view-pc{
        display: none;
    }
    .view-mobile{
        display: block;
    } 
}