@import './globals.css';

@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(30px);}
    100% { opacity: 1; transform: translateY(0);}
}
/* CSS reset code */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
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,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
html, body {
    box-sizing: border-box !important;
}
div{
    box-sizing: border-box !important;
}
.section {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
}
.d-flex{
    display: flex;
}
.j-between{
    justify-content: space-between;
}
body{
    font-family: Pretendard;
}
input{
    border: none;
}
input:focus{
    border: none;
    outline: none;
}



.ir-sub{
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    color: var(--color-primary-500);
    margin-bottom: 24px;
}
.ir-title{
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    white-space: pre-line;
}

.tr:hover .text{
    color: var(--color-primary-500) !important;
}



/* 배너쪽 */
.banner-wrapper{
    background-color: var(--color-background-50);
    width: 100%;
    white-space: pre-line;
    display: flex;
    justify-content: space-between;
}
.banner-wrapper .content{
    width: 860px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 104px 0 90px;
}

.banner-wrapper .title{
    color: var(--color-grey-900);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 36px */
    margin-left: 16px;
    flex-grow: 1;
}

.banner-wrapper .img{
    width: 80px;
    height: 80px;
    content: url('data:image/svg+xml,<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M58.8464 33.8086H1V71.5445H58.8464V33.8086Z" fill="%23267DFF"/><path d="M22.9816 45.8398H36.8648L58.8464 71.549H1L22.9816 45.8398Z" fill="url(%23paint0_linear_611_2126)"/><path d="M36.8648 52.3128H22.9816L1 33.8086H58.8464L36.8648 52.3128Z" fill="white"/><path d="M36.8648 14.4766H22.9816L1 33.8101H58.8464L36.8648 14.4766Z" fill="%23267DFF"/><path opacity="0.2" d="M58.9995 48C70.0452 48 78.9996 39.0457 78.9998 28C78.9999 16.9543 70.0457 8 59 8C47.9543 8 38.9999 16.9543 38.9998 28C38.9996 39.0457 47.9538 48 58.9995 48Z" fill="%2370A9FF"/><defs><linearGradient id="paint0_linear_611_2126" x1="29.9232" y1="45.8398" x2="29.9232" y2="71.549" gradientUnits="userSpaceOnUse"><stop stop-color="%230B1C2C"/><stop offset="1" stop-color="%230052CC"/></linearGradient></defs></svg>');
}
.banner-wrapper .email{
    display: flex;
    max-width: 400px;
    width: 100%;
    height: 64px;
    padding: 17px 32px;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 10px 16px 0 rgba(11, 28, 44, 0.16);
    box-sizing: border-box;
    font-size: 20px;
}
.banner-wrapper .button{
    display: inline-flex;
    height: 64px;
    width: 127px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: var(--color-grey-900);

    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 27px */
    box-sizing: border-box;
    margin-left: 8px;
}
.banner-wrapper .content > div:nth-child(1){
    width: 40%;
}
.banner-wrapper .content > div:nth-child(2){
    width: 60%;
    display: flex;
    flex-direction: column;
}
.agree-btn{
    color: var(--color-grey-900);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 27px */
    margin-top: 16px;
    display: flex;
}
.agree-btn > div:last-child{
    margin-left: 8px;
}

/* 체크박스 */
.checkbox-wrap .checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkbox-wrap .checkmark {
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 2px solid #8a8f97;
    border-radius: 50%;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
/* 체크된 상태 */
.checkbox-wrap .checkbox:checked + .checkmark {
    border-color: var(--color-primary-500);
    background-color: var(--color-primary-500);
    box-shadow: inset 0 0 0 4px #fff;
}

.checkbox-wrap {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.checkbox-wrap .checkmark {
    width: 20px;
    height: 20px;
    box-sizing: content-box;
    display: inline-block;
    vertical-align: middle;
}


/* 배너쪽 끝 */



/* input */
.ir-search{
    display: flex;
    max-width: 416px;
    width: 100%;
    padding: 17px 70px 17px 32px;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-radius: 200px;
    background: var(--color-grey-50);
    margin-bottom: 80px;
    margin-left: auto;
    box-sizing: border-box;
    height: 64px;
    padding: 17px 32px;
    font-size: 18px;
}

/* 검색 아이콘 */
.ir-search-wrapper{
    position: relative;
}
.ir-search-wrapper i{
    padding: 17px 32px 17px;
    position: absolute;
    top: 0;
    right: 0;
    flex-shrink: 0;
    content: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14.7867" cy="14.7867" r="9.60697" stroke="%230B1C2C" stroke-width="2"/><line x1="22.5939" y1="21.1797" x2="28.1797" y2="26.7655" stroke="%230B1C2C" stroke-width="2" stroke-linecap="round"/></svg>');
}


/* 상세페이지쪽 */
/*.detail .ir-title,*/
/*.detail .ir-sub*/


.detail{
    text-align: center;
    max-width: 1064px;
    padding-top: 160px;
    padding-bottom: 160px;
}
.detail .title{
    color: var(--color-grey-900);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 48px */
}
.detail .content{
    color: var(--color-grey-400);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 30px */
    text-align: start;
    white-space: pre-line;
}
.detail .back-btn{
    display: inline-flex;
    height: 64px;
    padding: 20px 64px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 40px;
    background: var(--color-grey-900);
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 27px */
}
.detail .back-btn{
    margin-top: 80px;
}
.detail .back-btn:hover{
    color: var(--color-primary-300);
}
.detail .date{
    color: var(--color-grey-400);
    text-align: center;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 25.5px */
}
.detail .media-img{
    width: 100%;
    max-width: fit-content;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 48px 0;
    border-radius: 20px;
}

/* 푸터 */

/* 전체 푸터 컨테이너 */
.footer-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 88px 16px 120px;
    justify-content: space-between;
    color: white;

    background-color: var(--color-grey-900);
}



/* 왼쪽 로고 (데스크탑용) */
.footer-logo-desktop {
    width: 149px;
    height: auto;
    display: none;
    min-height: 56px;
}


/* 가운데 영역 */
.footer-middle {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 모바일 로고 */
.footer-logo-mobile {
    width: 124px;
    height: auto;
    margin-top: 32px;
    display: block;
}


/* 메뉴 줄 */
.footer-menu {
    display: flex;
    align-items: center;
    height: 56px;
    font-weight: 500;
}
.menu-link {
    color: #F5F9FC;
    text-decoration-line: none;
    font-size: 16px;
}
.menu-link.dim {
    opacity: 0.4;
}
.divider {
    padding: 0 16px;
    opacity: 0.4;
    font-size: 14px;
}

/* 정보 텍스트 */
.footer-info {
    margin-top: 56px;
    font-weight: 500;
    opacity: 0.8;
}
.footer-info p.mt {
    margin-top: 8px;
}
.footer-info .mt-tel {
    display: inline-block;
}

/* 카피라이트 */
.footer-copy {
    font-weight: 500;
    opacity: 0.4;
    margin-top: calc(.25rem * 8);
}

/* 오른쪽 패밀리 버튼 */
.footer-right {
    margin-top: 80px;
    font-size: 24px;
}

.family-btn {
    width: 100%;
    height: 56px;
    padding: 16px 24px;
    background: var(--color-grey-500);
    color: white;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    cursor: pointer;
}
/*.family-btn:hover {*/
/*    background: #6b7280;*/
/*}*/
.family-btn {
    width: 223px;
}




    /* 헤더 시작 */
/* 기본 레이아웃 */
.nav-item {
    position: relative;
}

.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 220px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 9px;
    display: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
}

.submenu a {
    display: block;
    padding: 0 8px;
    color: var(--color-grey-900);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 220%; /* 39.6px */
    text-decoration-line: none;
    border-radius: 6px;
}

.submenu a:hover {
    background: var(--color-grey-50);
}
.footer-select .submenu a:hover{
    color: var(--color-primary-600) !important;
}
.nav-desktop li:hover .submenu,
.lang-select:hover .submenu,
.footer-select:hover .submenu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
.lang-select,
.footer-select{
    position: relative;
}
.lang-select .submenu,
.footer-select .submenu{
    background-color: var(--color-grey-500);
    border: none;
}
.lang-select .submenu .lang{
    color: var(--color-background-50, #F5F9FC);
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 220%;
}
.lang-select .submenu .lang.active{
    color: var(--color-primary-500, #267DFF);
}
.lang-select .submenu .lang:hover{
    color: var(--color-primary-300);
}

.lang-select .submenu{
    width: 70px;
    text-align: center;
}

.lang-select .nav-btn{
    opacity: 1;
    margin-top: 10px;
}
.footer-select .submenu{
    width: 223px;
    background-color: #fff;
}
.footer-select:hover .submenu{
    opacity: 1;
}
.footer-select .submenu a{
    color: var(--color-background-500);
}
.header {
    position: fixed;
    inset: 0 0 auto 0;
    height: 80px;
    display: flex;
    align-items: center;
    z-index: 999;
    background-color: rgb(255, 255, 255);
    height: 132px;

    transition: transform 0.3s ease;
}
.header.hide {
    transform: translateY(-100%);
}
.header-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    align-items: center;
    padding-inline: calc(.25rem * 18);
}
.drawer-header{
    justify-content: space-between;
    display: flex;
    height: 80px;
}
/* 로고 */
.logo img {
    width: 100%;
    height: 100%;
}
#drawer .logo img {
    width: 124px;
}
/* 데스크탑 네비 */
.nav-desktop {
    display: none;
}
.nav-desktop li{
    align-content: center;
    position: relative;
}

.nav-btn,
.nav-link {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: #0B1C2C;
    opacity: 0.5;
    cursor: pointer;
    transition: color .2s;
    text-decoration-line: none;

    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.nav-btn:hover,
.nav-link:hover {
    color: var(--color-grey-900);
    opacity: 1;
}

/* 데스크탑 문의하기 */
.desktop-actions {
    display: none;
}


.btn-contact {
    border-radius: 999px;
    color: white;
    text-decoration: none;

    padding-inline: calc(.25rem * 8);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    height: 52px;

    place-content: center;
    background-color: var(--color-grey-400);
}
.btn-contact:hover{
    background-color: var(--color-primary-600);
}
/* 모바일 */
.mobile-actions {
    display: flex;
    gap: 12px;
    height: 52px;
}

.btn-contact-mobile {
    padding: 6px 16px;
    border-radius: 30px;
    background: var(--color-primary-500);

    color: white;
    font-size: 14px;
    text-decoration: none;
    align-content: center;

    font-style: normal;
    font-weight: 600;
    line-height: 150%;
}

.btn-menu {
    background: transparent;
    border: none;
    cursor: pointer;
}

/* 모바일 드로어 */
.drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    background: var(--color-grey-500);
    color: white;
    padding: 0 calc(.25rem * 4);
    transition: right 0.3s ease;
    z-index: 1000;
    height: 100vh;
    overflow-y: auto;
}
body.drawer-open {
    overflow: hidden;
}

.drawer.active {
    right: 0;
}

.btn-close {
    font-size: 36px;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
}

.drawer-menu {
    list-style: none;
    padding: 0;
    padding-left: calc(.25rem * 2);
}

.drawer-menu li {
    margin-bottom: 32px;
}

.drawer-menu button,
.drawer-menu a {
    font-size: 18px;
    color: white;
    background: transparent;
    border: none;
    text-decoration: none;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    padding: 0 10px 0 0;
}
/* TODO 나중에 button 태그로 하지말고 클래스로 바꾸도록 */
.drawer-menu button{
    font-weight: 700;
    font-size: 20px;
}
.drawer-menu .title{
    font-weight: 700;
    font-size: 20px;
}
.drawer-menu a:not(:last-child){
    margin-bottom: 16px;
}
#drawer .menu.active{
    color: #267DFF;
}
ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.error{
    text-align: center;
    margin-top: 360px !important;
    margin-bottom: 360px !important;
}
.error .icon{
    place-self: center;
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" fill="none"><path opacity="0.2" d="M81 60L60 81V60H81Z" fill="%23267DFF"/><path d="M78 12.75H18C16.6076 12.75 15.2723 13.3031 14.2877 14.2877C13.3031 15.2723 12.75 16.6076 12.75 18V78C12.75 79.3924 13.3031 80.7277 14.2877 81.7123C15.2723 82.6969 16.6076 83.25 18 83.25H58.7588C59.4484 83.2513 60.1315 83.1161 60.7686 82.8522C61.4058 82.5883 61.9844 82.201 62.4713 81.7125L81.7125 62.4713C82.201 61.9844 82.5883 61.4058 82.8522 60.7686C83.1161 60.1315 83.2513 59.4484 83.25 58.7588V18C83.25 16.6076 82.6969 15.2723 81.7123 14.2877C80.7277 13.3031 79.3924 12.75 78 12.75ZM17.25 78V18C17.25 17.8011 17.329 17.6103 17.4697 17.4697C17.6103 17.329 17.8011 17.25 18 17.25H78C78.1989 17.25 78.3897 17.329 78.5303 17.4697C78.671 17.6103 78.75 17.8011 78.75 18V57.75H60C59.4033 57.75 58.831 57.9871 58.409 58.409C57.9871 58.831 57.75 59.4033 57.75 60V78.75H18C17.8011 78.75 17.6103 78.671 17.4697 78.5303C17.329 78.3897 17.25 78.1989 17.25 78ZM62.25 75.5663V62.25H75.57L62.25 75.5663Z" fill="%23267DFF"/><path d="M44.6891 48.428V31.1835C44.6891 30.5912 44.9244 30.0232 45.3432 29.6043C45.762 29.1855 46.3301 28.9502 46.9224 28.9502C47.5147 28.9502 48.0828 29.1855 48.5016 29.6043C48.9205 30.0232 49.1558 30.5912 49.1558 31.1835V48.428C49.1558 49.0203 48.9205 49.5884 48.5016 50.0072C48.0828 50.426 47.5147 50.6613 46.9224 50.6613C46.3301 50.6613 45.762 50.426 45.3432 50.0072C44.9244 49.5884 44.6891 49.0203 44.6891 48.428ZM46.9224 58.1058C46.1862 58.1058 45.4666 58.3241 44.8545 58.7331C44.2423 59.1421 43.7653 59.7234 43.4835 60.4035C43.2018 61.0837 43.1281 61.8321 43.2717 62.5541C43.4153 63.2762 43.7698 63.9394 44.2904 64.46C44.811 64.9805 45.4742 65.3351 46.1963 65.4787C46.9183 65.6223 47.6667 65.5486 48.3469 65.2669C49.027 64.9851 49.6083 64.5081 50.0173 63.8959C50.4263 63.2838 50.6446 62.5642 50.6446 61.828C50.6446 60.8408 50.2525 59.894 49.5544 59.196C48.8564 58.4979 47.9096 58.1058 46.9224 58.1058Z" fill="%23267DFF"/></svg>');
}
.error .title{
    color: var(--color-grey-900);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 36px */
    margin: 16px 0;
}
.error .content{
    color: var(--color-grey-400);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 27px */
    white-space: pre-line;
}
.error .button{
    display: inline-flex;
    height: 64px;
    padding: 0 32px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 40px;
    background: var(--color-primary-500);
    margin-top: 48px;

    color: #FFF;

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 27px */
}

#drawer .drawer-menu .menu-tab{
    display: flex;
}
#drawer .drawer-menu .icon{
    transition: transform 0.3s ease;
    display: inline-block;
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M12.714 6.54767L8 11.2617L3.28596 6.54768" stroke="%23717B84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    width: 20px;
}

#drawer .drawer-menu .active .icon{
    transform: rotate(180deg);
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M12.714 6.54767L8 11.2617L3.28596 6.54768" stroke="%23267DFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

#drawer .drawer-submenu{
    color: var(--color-background-50);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 27px */

    margin-top: 40px;

}
.drawer-submenu{
    display: none;
}
#drawer li.active .drawer-submenu{
    /*display: block;*/
    display: flex;
    flex-direction: column;
}
/* active */
#drawer .drawer-menu .active .menu-tab button{
    color: #267DFF;
}

/* 헤더 끝 */


.quick-actions {
    position: fixed;
    right: 72px;
    bottom: 56px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;

    transition: opacity 220ms ease, transform 220ms ease;

    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    justify-items: right;
}

.quick-actions.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* buttons */
.quick-actions .cs-button,
.quick-actions .top-button {
    width: 64px;
    height: 64px;

    border-radius: 9999px;
    cursor: pointer;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* cs button */
.quick-actions .cs-button {
    background: #0052cc;
}

/* top button */
.quick-actions .top-button {
    background: #ffffff;
    margin-bottom: calc(.25rem * 3);
}
.quick-actions .top-button:hover {
    background: #267dffe6;
}
.quick-actions .top-button:before{
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32" fill="none"><path d="M5.6291 13.1522L15.0572 3.72406C15.5779 3.20336 16.4221 3.20336 16.9428 3.72406L26.3709 13.1522C26.8916 13.6729 26.8916 14.5171 26.3709 15.0378C25.8502 15.5585 25.006 15.5585 24.4853 15.0378L16 6.55249L7.51472 15.0378C6.99402 15.5585 6.1498 15.5585 5.6291 15.0378C5.1084 14.5171 5.1084 13.6728 5.6291 13.1522Z" fill="%23267DFF"/><path d="M14.666 27.3333V5.33333C14.666 4.59696 15.263 4 15.9994 4C16.7357 4 17.3327 4.59696 17.3327 5.33333V27.3333C17.3327 28.0697 16.7357 28.6667 15.9994 28.6667C15.263 28.6667 14.666 28.0697 14.666 27.3333Z" fill="%23267DFF"/></svg>');
    display: flex;
    justify-items: center;
    place-content: center;
    flex-wrap: wrap;
    height: 100%;
}

.quick-actions .cs-button{
    display: none;
}

.quick-actions {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(12px) scale(0.96);
    filter: blur(2px);
    transition:
            opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
            transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
            filter 260ms cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0ms linear 260ms;
    will-change: opacity, transform, filter;
}

.quick-actions.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition:
            opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
            transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
            filter 260ms cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0ms;
}

.quick-actions.is-visible {
    animation: quickActionsPop 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.none-list{
    border-bottom: 1px solid var(--color-grey-100);
    width: 100%;
    padding: 160px 0;
    justify-items: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.none-list .icon{
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" fill="none"><path opacity="0.2" d="M78 18V81C78 81.7956 77.6839 82.5587 77.1213 83.1213C76.5587 83.6839 75.7957 84 75 84H21C20.2044 84 19.4413 83.6839 18.8787 83.1213C18.3161 82.5587 18 81.7956 18 81V18C18 17.2044 18.3161 16.4413 18.8787 15.8787C19.4413 15.3161 20.2044 15 21 15H36C34.0485 17.5943 32.9954 20.7537 33 24V27H63V24C63.0046 20.7537 61.9515 17.5943 60 15H75C75.7957 15 76.5587 15.3161 77.1213 15.8787C77.6839 16.4413 78 17.2044 78 18Z" fill="%23267DFF"/><path d="M62.25 57.0001C62.25 57.5968 62.0129 58.1691 61.591 58.5911C61.169 59.013 60.5967 59.2501 60 59.2501H36C35.4033 59.2501 34.831 59.013 34.409 58.5911C33.9871 58.1691 33.75 57.5968 33.75 57.0001C33.75 56.4033 33.9871 55.831 34.409 55.4091C34.831 54.9871 35.4033 54.7501 36 54.7501H60C60.5967 54.7501 61.169 54.9871 61.591 55.4091C62.0129 55.831 62.25 56.4033 62.25 57.0001ZM60 42.7501H36C35.4033 42.7501 34.831 42.9871 34.409 43.4091C33.9871 43.831 33.75 44.4033 33.75 45.0001C33.75 45.5968 33.9871 46.1691 34.409 46.591C34.831 47.013 35.4033 47.2501 36 47.2501H60C60.5967 47.2501 61.169 47.013 61.591 46.591C62.0129 46.1691 62.25 45.5968 62.25 45.0001C62.25 44.4033 62.0129 43.831 61.591 43.4091C61.169 42.9871 60.5967 42.7501 60 42.7501ZM80.25 18.0001V81.0001C80.25 82.3924 79.6969 83.7278 78.7123 84.7124C77.7277 85.6969 76.3924 86.2501 75 86.2501H21C19.6076 86.2501 18.2723 85.6969 17.2877 84.7124C16.3031 83.7278 15.75 82.3924 15.75 81.0001V18.0001C15.75 16.6077 16.3031 15.2723 17.2877 14.2877C18.2723 13.3032 19.6076 12.7501 21 12.7501H34.9387C36.555 10.8679 38.5589 9.35736 40.8133 8.32176C43.0676 7.28616 45.5192 6.75 48 6.75C50.4808 6.75 52.9324 7.28616 55.1867 8.32176C57.4411 9.35736 59.445 10.8679 61.0612 12.7501H75C76.3924 12.7501 77.7277 13.3032 78.7123 14.2877C79.6969 15.2723 80.25 16.6077 80.25 18.0001ZM35.25 24.0001V24.7501H60.75V24.0001C60.75 20.6185 59.4067 17.3755 57.0156 14.9844C54.6245 12.5934 51.3815 11.2501 48 11.2501C44.6185 11.2501 41.3755 12.5934 38.9844 14.9844C36.5933 17.3755 35.25 20.6185 35.25 24.0001ZM75.75 18.0001C75.75 17.8011 75.671 17.6104 75.5303 17.4697C75.3897 17.3291 75.1989 17.2501 75 17.2501H63.8737C64.784 19.3839 65.2521 21.6802 65.25 24.0001V27.0001C65.25 27.5968 65.0129 28.1691 64.591 28.591C64.169 29.013 63.5967 29.2501 63 29.2501H33C32.4033 29.2501 31.831 29.013 31.409 28.591C30.9871 28.1691 30.75 27.5968 30.75 27.0001V24.0001C30.7479 21.6802 31.216 19.3839 32.1262 17.2501H21C20.8011 17.2501 20.6103 17.3291 20.4697 17.4697C20.329 17.6104 20.25 17.8011 20.25 18.0001V81.0001C20.25 81.199 20.329 81.3897 20.4697 81.5304C20.6103 81.671 20.8011 81.7501 21 81.7501H75C75.1989 81.7501 75.3897 81.671 75.5303 81.5304C75.671 81.3897 75.75 81.199 75.75 81.0001V18.0001Z" fill="%23267DFF"/></svg>');
}

@keyframes quickActionsPop {
    0%   { transform: translateY(12px) scale(0.94); }
    60%  { transform: translateY(-2px) scale(1.02); }
    100% { transform: translateY(0) scale(1); }
}

.news-img{
    width: 100%;
    max-width: fit-content;
}

/* 태블릿 이상에서 row 배치 */
@media (min-width: 768px) {
    .footer-wrap {
        flex-direction: row;
        padding-left: 32px;
        padding-right: 32px;
    }
    .footer-right {
        margin-top: 0;
    }
}

@media (min-width: 1280px) {
    .footer-wrap {
        gap: 100px;
        padding-left: 72px;
        padding-right: 72px;
    }
    .nav-desktop {
        display: block;
    }
    .nav-desktop ul {
        display: flex;
        gap: calc(.25rem * 1);
    }
    .desktop-actions {
        display: flex;
        align-items: center;
        gap: 18px;
    }
    .mobile-actions {
        display: none;
    }
    .section {
        max-width: 1280px;
    }
    .footer-logo-desktop {
        display: block;
    }
    .footer-logo-mobile {
        display: none;
    }
}

/* 중단점 합치기*/
@media screen and (max-width: 1279px) {
    .section {
        padding-inline: calc(.25rem * 8);
    }
    .banner-wrapper .content,
    .header-container{
        padding-inline: calc(.25rem * 8);
    }
    .header{
        height: 80px;
    }
    .btn-contact-mobile{
        padding-inline: calc(.25rem * 6);
        font-size: 16px;
    }
    .header{
        transform: translateY(0);
    }
    #drawer{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        scrollbar-width: none;
    }
    .drawer-lang{
        display: flex;
        color: var(--color-background-50);
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 24px */

        margin-left: calc(.25rem * 10);
        margin-bottom: calc(.25rem * 14);
        margin-top: calc(.25rem * 38);
        font-size: 20px;
    }
    .drawer-lang > span{
        width: 4px;
        height: 4px;
        aspect-ratio: 1/1;
        border-radius: 300px;
        background-color: #717B84;
        place-self: center;
        margin: 0 16px;
    }
    .drawer-lang .lang.active{
        color: #267DFF;
    }
}
@media screen and (max-width: 639px) {
    .section{
        padding-inline: calc(.25rem * 4) !important;
        flex-direction: column !important;
    }
    .banner-wrapper .content,
    .header-container{
        padding-inline: calc(.25rem * 4);
    }
    .ir-title{
        font-size: 24px !important;
    }
    .ir-sub{
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }


    .ir-search {
        margin-bottom: 24px !important;
        /*margin-top: 40px !important;*/
        max-width: 100% !important;
        height: 56px !important;
        padding: 16px 24px !important;
    }
    .ir-search-wrapper i{
        width: 24px !important;
        height: 24px !important;
    }
    .banner-wrapper .content{
        flex-direction: column;
        align-items: center;
    }
    .banner-wrapper .title {
        font-size: 18px;
        white-space: initial;
        flex-grow: 0;
    }
    .banner-wrapper .content > div:nth-child(1){
        width: 100% !important;
        justify-content: center;
        align-items: center;
    }
    .banner-wrapper .content > div:nth-child(2){
        width: 100%;
    }
    .banner-wrapper .content > div:nth-child(2) > div:nth-child(1){
        position: relative;
    }
    .banner-wrapper .content > div:nth-child(2) > div:nth-child(1) > input{
        max-width: none;
        height: 56px;
        padding: 16px 24px;
    }
    .banner-wrapper .content > div:nth-child(2) > div:nth-child(1) > div{
        position: absolute;
        height: 40px;
        right: 8px;
        top: 8px;

        width: fit-content;
        padding: 8px 16px;
        font-size: 14px;
    }
    .banner-wrapper .content > div:nth-child(2) .agree-btn{
        justify-content: center;
    }
    .logo img{
        width: 124px;
    }
    .banner-wrapper .img{
        width: 56px;
        height: 56px;
        margin-bottom: 16px;
    }
    .ir-search{
        font-size: 16px;
    }
    .banner-wrapper .email{
        font-size: 16px;
    }
    .error{
        margin-top: 250px !important;
        margin-bottom: 250px !important;
    }
    .family-btn {
        width: 100% !important;
    }
    .detail .back-btn:hover{
        color: #ffffff;
    }
    .detail .content{
        font-size: 16px;
        font-weight: 400;
    }

    .quick-actions .cs-button,
    .quick-actions .top-button {
        width: 56px;
        height: 56px;
        align-content: center;
        text-align: center;
    }

    .quick-actions .cs-button .text {
        display: none;
    }
    .quick-actions .cs-button.active {
        width: 220px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-inline: calc(.25rem * 6);

        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
    }
    .quick-actions .cs-button.active .text {
        display: block;
    }
    .quick-actions .cs-button {
        display: block;
    }
    .quick-actions {
        right: 16px;
    }

    .footer-select .submenu{
        left: auto;
        right: 0;
    }
    .footer-menu .menu-link {
        font-size: 14px;
    }
}