@charset "utf-8";
/* ---------------------------------------
  COMMON
--------------------------------------- */
.inner { width: 1440px; margin: 0 auto; }
.web-view { display: block; }
.mob-view { display: none; }
.swiper-button-next, .swiper-button-prev { width: auto; height: auto; margin-top: 0; transform: translateY(-50%); }
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content:''; }
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content:''; }
.emoji { font-family: "NotoColorEmoji"; }


.scroll-down { position: absolute; bottom: 90px; left: 50%; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center; grid-row-gap: 8px; transform: translateX(-50%); }
.scroll-down p { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 700; line-height: 40px; letter-spacing: -0.03em; text-align: center; }
.interaction { width: fit-content; margin: 4px auto 0 }
.interaction p { width: 8px; height: 8px; background: transparent; border-right: 2px solid #fff; border-top: 2px solid #fff; }
.interaction p:nth-of-type(1) { bottom: -60px; animation: scrolldown01 1.2s ease-in-out infinite; }
.interaction p:nth-of-type(2) { bottom: -50px; animation: scrolldown02 1.2s ease-in-out infinite; }

@keyframes scrolldown01 {
    0% {
        transform: translateY(40%) rotate(135deg);
        opacity: 0.5;
    }
    50% {
        transform: translateY(0%) rotate(135deg);
        opacity: 1;
    }
    100% {
        transform: translateY(40%) rotate(135deg);
        opacity: 0.5;
    }
}

@keyframes scrolldown02 {
    0% {
        transform: translateY(40%) rotate(135deg);
        opacity: 1;
    }
    50% {
        transform: translateY(0%) rotate(135deg);
        opacity: 0.5;
    }
    100% {
        transform: translateY(40%) rotate(135deg);
        opacity: 1;
    }
}


/* header */
header {  position: fixed; top: 0; left: 0; width: 100%; height: 96px; background: #fff; z-index: 11; box-sizing: border-box; transition: all 0.2s; }
header .header-wrap { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 96px; background: #fff; border-bottom: 1px solid #eee; }
header .header-wrap .main-logo { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); z-index: 3; }
header .header-wrap .main-logo img { height: 40px; }

header .gnb-bg { position: absolute; top: 96px; left:0; width: 100%; height: 0; z-index: 2; background: #fff; }
header .header-wrap nav { position: absolute; text-align: center; width:100%; z-index:2; left: 0; top: 0; }
header .header-wrap nav .gnb-depth1 { position:relative; display: flex; flex-direction: row; justify-content: center; align-items: center; grid-column-gap: 80px; }
header .header-wrap nav .gnb-depth1 > li { position: relative; display:inline-block; vertical-align:top; width: 95px; margin: 0; }
header .header-wrap nav .gnb-depth1 > li > a { position: relative; display: block; padding: 37px 0; color: #333; font-size: 18px; font-weight: 600; line-height: 1.2; text-align: center; }
header .header-wrap nav .gnb-depth1 > li.on > a { color: #1A73E8;  font-weight: bold; } 
/* header .header-wrap nav .gnb-depth1 > li.on > a:before { position: absolute; bottom: 0; left: 0; display: block; content:''; clear: both; width: 100%; height: 2px; background: #fff; transform: scaleX(0); } */

header .header-wrap nav .gnb-depth2 { position: relative; display: flex; flex-direction: column; grid-column-gap: 80px; height: 0; z-index: 2; overflow: hidden; } 
header .header-wrap nav .gnb-depth2 > li { width: 95px; }
header .header-wrap nav .gnb-depth2 > li:nth-of-type(1) { margin-top: 20px; }
header .header-wrap nav .gnb-depth2 > li > a { display: block; width: 100%; padding: 11px 0; color: #777; font-size: 16px; line-height: 1.2; letter-spacing: -0.05em; text-align: center; }
header .header-wrap nav .gnb-depth2 > li.on > a { color: #333; font-weight: bold; } 

@media (hover: hover) {
  header .header-wrap nav .gnb-depth1 li a:hover { color: #1A73E8; font-weight: bold; }
  header .header-wrap nav .gnb-depth2 li a:hover { color: #333; font-weight: bold; }
  /*header .header-wrap nav ul li a:hover::before { transition: .4s; transform: scaleX(1); transform-origin: center; }*/
}

header .header-wrap .menu-trigger { position: absolute; top: 50%; right: 48px; width: 32px; height: 21px; cursor: pointer; z-index: 3; transform: translateY(-50%); text-indent: -9999px; }
header .header-wrap .menu-trigger span { position: absolute; left: 0; width: 32px; height: 3px; transition: all .4s; background-color: #333; }
header .header-wrap .menu-trigger span:nth-of-type(2) { top: 9px; }
header .header-wrap .menu-trigger span:nth-of-type(3) { top: 18px; }
header .header-wrap .menu-trigger.active span:nth-of-type(1) { background: #333; -webkit-transform: translateY(9px) rotate(-45deg); transform: translateY(9px) rotate(-45deg); }
header .header-wrap .menu-trigger.active span:nth-of-type(2) { opacity: 0; }
header .header-wrap .menu-trigger.active span:nth-of-type(3) { background: #333; -webkit-transform: translateY(-9px) rotate(45deg); transform: translateY(-9px) rotate(45deg); }


/* footer */
footer { padding: 80px 0; background: #333; }
footer .inner { position: relative; }
footer .footer-wrap { display: flex; flex-wrap: wrap; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 680px; }
footer .footer-wrap h3 { color: #fff; font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -0.04em; }
footer ul { display: flex; flex-direction: row; flex-wrap: wrap; grid-row-gap: 10px; }
footer ul:nth-of-type(1) { margin: 20px 0 28px; } 
footer ul:nth-of-type(2) { margin-bottom: 56px; }
footer ul li { position: relative; display: flex; align-items: center; }
footer ul li p { position: relative; display: flex; align-items: center; color: #aaa; font-size: 17px; font-weight: 300; line-height: 1.2; letter-spacing: -0.04em;  } 
footer ul li em { color: #fff; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -0.04em;  } 
footer ul li p:after { position: static; display: block; content:''; clear: both; width:1px; height: 10px; margin: 0 14px; background: rgba(255,255,255,0.2); }
footer ul li:nth-of-type(2) p { margin-right: 36px; }
footer ul li:nth-of-type(2) p:after, footer ul li:nth-of-type(5) p:after { display: none; } 
footer ul li a { display: flex; align-items: center; color: #aaa; font-size: 16px; line-height: 1.2; letter-spacing: -0.04em; }
footer ul li:nth-of-type(1) a { color: #ccc; }  
footer ul li:nth-of-type(1) a:after { display: block; content:''; clear: both; width:4px; height: 4px; margin: 0 10px; background: rgba(217, 217, 217, 0.3); border-radius: 100px; }
footer .footer-wrap .copy { color: #777; font-size: 14px; font-family: 'PlusJakartaSans'; line-height: 1.26; font-weight: 700; }
footer .footer-wrap .copy span { color: #aaa; font-family: 'PlusJakartaSans'; } 

footer .family, footer .footer-family a { position: absolute; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; width: 198px; padding: 14px 24px; background: transparent; color: #777; font-size: 14px;  font-family: 'PlusJakartaSans'; font-weight: bold; line-height: 1.2; font-weight: bold; border: 1px solid rgba(170, 170, 170, 0.5); border-radius: 100px; z-index: 0; }
footer .family:after { display: block; content:''; clear: both; width: 8px; height: 8px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none"><path fill="%23777" fill-rule="evenodd" d="M3 5v3h2V5h3V3H5V0H3v3H0v2h3Z" clip-rule="evenodd"/></svg>')no-repeat center; }
footer .footer-family { display: none; position: absolute; top: -142px; right: 0; display: flex; flex-wrap: wrap; flex-direction: column; transform: translateY(20%); transition: .4s; visibility: hidden; opacity: 0; z-index: 0; }
footer .footer-family.list-open { visibility: visible; opacity: 1; transform: translateY(0); }
footer .footer-family li:after { display: none; }
footer .footer-family > li a { position: relative; color: #aaa; font-size: 14px; line-height: 1.5; font-weight: bold; transition: .2s; }