/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } html { font-family: 'Pretendard', sans-serif; letter-spacing: -0.0325em; font-size: 18px; word-break: keep-all; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #000; } a { text-decoration: none; font-size: inherit; color: inherit; } .font-minguk { font-family: 'Pretendard', sans-serif !important; } .font-cerapro { font-family: CeraPro, 'Pretendard', sans-serif !important; letter-spacing: 0.025em; } section.brand-section-hero { height: 200vh; } .scroll-wrapper { overflow-y: hidden !important; } #main { min-height: 100vh; padding-top: 90px; } @media screen and (max-width: 1023px) { #main { padding-top: 78px; } } @media screen and (max-width: 767px) { #main { padding-top: 68px; } } .container { width: auto; padding: 0 4.16667vw; } @media screen and (max-width: 1280px) { .container { padding: 0 4.0625vw; } } @media screen and (max-width: 1023px) { .container { padding: 0 5.98958vw; } } @media screen and (max-width: 767px) { .container { padding: 0 6.93333vw; } } .c-scrollbar { width: 8px; } .c-scrollbar_thumb { width: 5px; background-color: rgba(0, 0, 0, 0.6); } @media screen and (min-width: 768px) { *[data-device="mobile"] { display: none; } } @media screen and (max-width: 767px) { *[data-device="desktop"] { display: none; } } @media screen and (orientation: portrait) { *[data-type="portrait"] { display: block; } *[data-type="landscape"] { display: none; } } @media screen and (orientation: landscape) { *[data-type="landscape"] { display: block; } *[data-type="portrait"] { display: none; } } .en .brand-more h3 { font-weight: 500 !important; } .en .brand-more-desc h4 { line-height: 1.4; } .cn .brand-more h3 { font-weight: 500 !important; } .cn .brand-more-desc h4 { line-height: 1.4; } .slick-track { opacity: 1 !important; } #header.is-open .gnb-bar { background-color: #c52922; opacity: 1; } #nav .gnb-group { width: 100%; height: 18px; position: relative; } #nav .gnb-bar { position: absolute; bottom: 0; width: auto; height: 3px; background-color: transparent; transition: opacty 0.2s, width 0.2s, transform 1000ms cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; z-index: 9; } #nav .gnb { display: flex; align-items: center; justify-content: center; } #nav .gnb > li:not(:last-of-type) { margin-right: 48px; } #nav .gnb > li > a { padding: 34px 0 35px; position: relative; z-index: 3; } #nav .gnb > li > a span { font-weight: 500; font-size: 18px; } @media screen and (max-width: 1280px) { #nav .gnb > li:not(:last-of-type) { margin-right: 40px; } #nav .gnb > li > a span { font-size: 16px; font-weight: 500; } } #nav .mobile-lang { display: none; } #nav .submenu { position: absolute; top: 0; left: 0; right: 0; height: 100vh; overflow: hidden; opacity: 0; visibility: hidden; } #nav .submenu .submenu-box { overflow: hidden; height: 0; background: #fff; width: auto; padding: 0 4.16667vw; position: relative; } #nav .submenu .submenu-box::after { content: ''; position: absolute; top: 90px; left: 0; right: 0; width: 100%; height: 1px; background: rgba(0, 0, 0, 0.1); } @media screen and (max-width: 1280px) { #nav .submenu .submenu-box::after { content: ''; position: absolute; top: 88px; } } @media screen and (max-width: 1023px) { #nav .submenu .submenu-box { border-top: none; } } #nav .submenu .submenu-layout { padding-top: 90px; } @media screen and (max-width: 1280px) { #nav .submenu .submenu-layout { padding-top: 88px; } } #nav .submenu .submenu-box-inner { padding: 22px 0 64px; } #nav .submenu .submenu-box-inner > ul { width: 520px; margin: 0 auto; } #nav .submenu .submenu-box-inner > ul > li { padding: 18px 0; } #nav .submenu .submenu-box-inner > ul > li:not(:last-of-type) { border-bottom: 1px solid #e5e5e5; } #nav .submenu .submenu-box-inner > ul > li a { display: flex; justify-content: space-between; } #nav .submenu .submenu-box-inner .label { display: inline-block; font-weight: 500; font-size: 24px; letter-spacing: -0.02em; font-family: 'Pretendard', sans-serif; transform: translate3d(0, 0, 0); position: relative; outline: none; color: #000; margin: 8px 0; } @media screen and (max-width: 1280px) { #nav .submenu .submenu-box-inner .label { font-size: 21px; } } #nav .submenu .submenu-box-inner p { font-size: 16px; line-height: 1.56; letter-spacing: -0.16px; font-weight: 400; color: #666; } @media screen and (max-width: 1280px) { #nav .submenu .submenu-box-inner p { font-size: 14px; line-height: 1.79; letter-spacing: -0.14px; } } #nav .submenu .submenu-box-inner .submenu-content .img { width: 96px; height: 96px; overflow: hidden; } @media screen and (max-width: 1280px) { #nav .submenu .submenu-box-inner .submenu-content .img { width: 80px; height: 80px; } } #nav .submenu .submenu-box-inner .submenu-content .img img { width: 100%; height: 100%; display: block; } @media screen and (max-width: 1280px) { #nav .submenu .submenu-box-inner { padding: 40px 0 80px; } #nav .submenu .submenu-box-inner > ul { width: 448px; } } #nav .submenu.__with-info .submenu-box-inner > ul { display: block; } #nav .submenu.__with-cat .submenu-box-inner > ul > li { display: flex; justify-content: space-between; } #nav .submenu.__with-cat .submenu-box-inner > ul > li .__left .cat { font-size: 14px; font-weight: 500; line-height: 1.71; letter-spacing: -0.14px; margin-bottom: 14px; color: #666; } @media screen and (max-width: 1280px) { #nav .submenu.__with-cat .submenu-box-inner > ul > li .__left .cat { font-size: 13px; line-height: 1.85; letter-spacing: -0.13px; } } #nav .submenu.__with-cat .submenu-box-inner > ul > li .__left ul { display: flex; } #nav .submenu.__with-cat .submenu-box-inner > ul > li .__left ul span { font-size: 22px; font-weight: 500; line-height: 1.36; letter-spacing: -0.22px; margin: 0; } @media screen and (max-width: 1280px) { #nav .submenu.__with-cat .submenu-box-inner > ul > li .__left ul span { font-size: 19px; font-weight: 500; line-height: 1.58; letter-spacing: -0.19px; } } @keyframes Anim { 0% { opacity: 0.4; } 100% { opacity: 1; } } #nav .submenu.__with-cat .submenu-box-inner > ul > li .submenu-content { display: none; opacity: 0.4; } #nav .submenu.__with-cat .submenu-box-inner > ul > li .submenu-content.active { display: block; opacity: 0.4; animation: Anim 0.4s ease-in-out forwards; } #nav .submenu.__with-cat .submenu-box-inner .product-list { max-width: 400px; display: flex; flex-wrap: wrap; } #nav .submenu.__with-cat .submenu-box-inner .product-list li .label { display: block; } #nav .submenu.__with-cat .submenu-box-inner .product-list li .label.split { display: flex; align-items: center; margin: 0 0.5rem; } #nav .submenu.normal .submenu-box-inner { white-space: nowrap; } #nav .submenu.normal .submenu-box-inner > ul { padding-top: 30px; } @media screen and (max-width: 1280px) { #nav .submenu.normal .submenu-box-inner > ul { padding-top: 20px; } } #nav .submenu.normal .submenu-box-inner > ul > li { margin-right: 83px; } @media screen and (max-width: 1280px) { #nav .submenu.normal .submenu-box-inner > ul > li { margin-right: 53px; } } #nav .submenu.normal .submenu-box-inner > ul > li:last-child { margin-right: 0; } #header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; } #header.transparent .header-master { background-color: rgba(255, 255, 255, 0); transition: all 100ms ease-in-out; border-bottom: none; } #header.transparent .header-master .container { position: relative; z-index: 1; } #header.transparent .header-master.transparentBG { background-color: white !important; transition: all 300ms ease-in-out; } @media screen and (max-width: 1023px) { #header.transparent .header-master.transparentBG { transition: initial; } } #header.transparent .header-master.transparentBG .brand a { background: url(../../img/common/logo.svg) 50% 50% no-repeat; background-size: cover; } #header.transparent .header-master.transparentBG #nav .gnb > li > a { color: #000; } #header.transparent .header-master.transparentBG .utils .langs .lang-selector .current .icon { background: url(../../img/icon/lang.svg) 50% 50% no-repeat; } #header.transparent .header-master.transparentBG .utils .langs .lang-selector span { color: #000; } #header.transparent .header-master.transparentBG .utils .langs .lang-selector.open span { color: #000; } #header.transparent .header-master.transparentBG .btn-toggle-menu span, #header.transparent .header-master.transparentBG .btn-toggle-menu span::before, #header.transparent .header-master.transparentBG .btn-toggle-menu span::after { background: #000; } #header.transparent .brand a { background: url(../../img/common/logo-w.svg) 50% 50% no-repeat; background-size: cover; } #header.transparent #nav .gnb > li > a { color: #fff; } @media screen and (max-width: 1023px) { #header.transparent #nav .gnb > li > a { color: #000; } } #header.transparent .utils .kgc_btn a { color: #fff; } #header.transparent .utils .langs .lang-selector .current .icon { background: url(../../img/icon/lang-w.svg) 50% 50% no-repeat; } #header.transparent .utils .langs .lang-selector span { color: #fff; } #header.transparent .utils .langs .lang-selector.open span { color: #000; } #header.transparent .utils .search a { background: url(../../img/icon/ico_search_w.svg) 50% 50% no-repeat; background-size: 24px auto; } @media screen and (max-width: 1023px) { #header.transparent .utils .search a { background: url(../../img/icon/ico_search_w.svg) 50% 50% no-repeat; } } #header.transparent .utils .search.active a { background: url(../../img/icon/ico_search_close.svg) 50% 50% no-repeat; } @media screen and (max-width: 1023px) { #header.transparent .utils .search.active a { background: url(../../img/icon/ico_search_close.svg) 50% 50% no-repeat; background-size: 32px auto; } } @media screen and (max-width: 1023px) { #header.transparent .utils .btn-toggle-menu span, #header.transparent .utils .btn-toggle-menu span::before, #header.transparent .utils .btn-toggle-menu span::after { background: #fff; } } #header.transparent.openActive { transition: 300ms all ease-in-out; } #header.transparent.openActive .brand a { background: url(../../img/common/logo.svg) 50% 50% no-repeat; background-size: cover; } #header.transparent.openActive #nav .gnb > li > a { color: #000; } #header.transparent.openActive .utils .kgc_btn a { color: #000; } #header.transparent.openActive .utils .langs .lang-selector .current .icon { background: url(../../img/icon/lang.svg) 50% 50% no-repeat; } #header.transparent.openActive .utils .langs .lang-selector span { color: #000; } #header.transparent.openActive .utils .search a { background: url(../../img/icon/ico_search.svg) 50% 50% no-repeat; } @media screen and (max-width: 1023px) { #header.transparent.openActive .utils .search a { background: url(../../img/icon/ico_search_w.svg) 50% 50% no-repeat; } } #header.transparent.openActive .utils .search.active a { background: url(../../img/icon/ico_search_close.svg) 50% 50% no-repeat; } #header.transparent.openActive::after { display: none; transition: 300ms all ease-in-out; opacity: 0; } #header.transparent.transparentActive .header-master { background-color: white; transition: 100ms all ease-in-out; border-bottom: none; } #header.transparent.transparentActive .brand a { background: url(../../img/common/logo.svg) 50% 50% no-repeat; background-size: cover; } #header.transparent.transparentActive #nav .gnb > li > a { color: #000; } #header.transparent.transparentActive .utils .kgc_btn a { color: #000; } #header.transparent.transparentActive .utils .langs .lang-selector .current .icon { background: url(../../img/icon/lang.svg) 50% 50% no-repeat; } #header.transparent.transparentActive .utils .langs .lang-selector span { color: #000; } #header.transparent.transparentActive .utils .search a { background: url(../../img/icon/ico_search.svg) 50% 50% no-repeat; } @media screen and (max-width: 1023px) { #header.transparent.transparentActive .utils .search a { background: url(../../img/icon/ico_search_w.svg) 50% 50% no-repeat; } } #header.transparent.transparentActive .utils .search.active a { background: url(../../img/icon/ico_search_close.svg) 50% 50% no-repeat; } #header.transparent.transparentActive::after { display: none; transition: 300ms all ease-in-out; opacity: 0; } #header.transparent.nav-open .brand a { background: url(../../img/common/logo.svg) 50% 50% no-repeat; background-size: cover; } #header.transparent.nav-open .utils .langs .lang-selector span { color: #000; } #header.transparent.nav-open .utils .search a { background: url(../../img/icon/ico_search.svg) 50% 50% no-repeat; } @media screen and (max-width: 1023px) { #header.transparent.nav-open .utils .search a { background: url(../../img/icon/ico_search.svg) 50% 50% no-repeat; background-size: 24px auto; } } #header.transparent.nav-open .utils .search.active a { background: url(../../img/icon/ico_search_close.svg) 50% 50% no-repeat; } #header.transparent.nav-open .utils .btn-toggle-menu span, #header.transparent.nav-open .utils .btn-toggle-menu span::before, #header.transparent.nav-open .utils .btn-toggle-menu span::after { background: #000; } #header.transparent::after { top: 0; left: 0; width: 100%; display: block; height: 90px; padding-bottom: 69px; pointer-events: none; content: ''; position: absolute; opacity: 0.3; background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0)); transition: 300ms all ease-in-out; } @media screen and (max-width: 1280px) { #header.transparent::after { height: 88px; padding-bottom: 71px; } } @media screen and (max-width: 1023px) { #header.transparent::after { height: 78px; padding-bottom: 62px; } } @media screen and (max-width: 767px) { #header.transparent::after { height: 68px; padding-bottom: 51px; } } #header .search-dimmed, #header .dimmed { position: absolute; top: 0; left: 0; right: 0; height: 100vh; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transform-origin: 50% 0%; opacity: 0; visibility: hidden; z-index: -1; cursor: pointer; } #header .dimmed.mobile { position: fixed; background: #FFF !important; opacity: 1; visibility: initial; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { #header .dimmed.mobile { visibility: visible; } } #header .header-master { height: 90px; background: #fff; display: flex; align-items: center; position: absolute; top: 0; left: 0; right: 0; z-index: 2; transform: translate3d(0, 0, 0); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } @media screen and (max-width: 1280px) { #header .header-master { height: 88px; } #header .header-master .container { padding: 0 4.16667vw; } } @media screen and (max-width: 1023px) { #header .header-master { height: 78px; } #header .header-master .container { padding: 0 5.98958vw; } } @media screen and (max-width: 767px) { #header .header-master { height: 68px; } #header .header-master .container { padding: 0 6.93333vw; } } #header .header-sub { height: 58px; -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); background-color: #f7f7f7; display: flex; align-items: center; position: absolute; top: 0; left: 0; right: 0; z-index: 1; transform: translateY(-100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; } #header .header-sub .container { height: 100%; } #header .header-master, #header .header-sub { transition: transform 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955); } #header.hide .header-master { transform: translateY(-100%); } #header.hide .header-master::after { padding-bottom: 0; } #header.hide .header-sub { transform: translateY(0%); } #header.hide::after { display: none; } #header .container { flex: 1; height: 100%; display: flex; align-items: center; } #header .header-inner { display: flex; align-items: center; flex: 1; } #header .header-inner .brand, #header .header-inner .utils { flex: 1; } #header .brand { position: relative; z-index: 3; } #header .brand a { display: block; background: url(../../img/common/logo.svg) 50% 50% no-repeat; background-size: cover; width: 192px; height: 34px; text-indent: -999em; overflow: hidden; } @media screen and (max-width: 1280px) { #header .brand a { width: 180px; height: 32px; } } @media screen and (max-width: 1023px) { #header .brand a { width: 170px; height: 30px; } } @media screen and (max-width: 767px) { #header .brand a { width: 158px; height: 28px; } } #header .utils { display: flex; align-items: center; justify-content: flex-end; } #header .utils .kgc_btn { position: relative; z-index: 999; } #header .utils .kgc_btn a { display: block; font-size: 17px; font-weight: 500; overflow: hidden; } @media screen and (max-width: 1280px) { #header .utils .kgc_btn a { font-size: 15px; font-weight: 500; } } @media screen and (max-width: 1023px) { #header .utils .kgc_btn { display: none; } } #header .utils .langs { position: relative; z-index: 999; display: flex; align-items: center; margin: 0 20px; } #header .utils .langs:hover .lang-selector .current span { width: 2em; } @media screen and (max-width: 1023px) { #header .utils .langs { display: none; } } #header .utils .langs .lang-selector { position: relative; display: flex; } #header .utils .langs .lang-selector .current { display: inline-flex; align-items: center; justify-content: center; position: relative; } #header .utils .langs .lang-selector .current span { display: block; width: 0; overflow: hidden; white-space: nowrap; transition: width 350ms ease-in-out; font-size: 17px; font-weight: 500; font-stretch: normal; line-height: normal; color: #000; } #header .utils .langs .lang-selector .current span:not(:first-of-type) { margin-left: 4px; } #header .utils .langs .lang-selector .current .icon { display: block; background: url(../../img/icon/lang.svg) 50% 50% no-repeat; width: 24px; height: 24px; } #header .utils .langs .lang-selector.open .others { opacity: 1; visibility: visible; z-index: auto; } #header .utils .langs .lang-selector .others { text-align: center; border: solid 1px #000000; background-color: #ffffff; position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 8px); opacity: 0; visibility: hidden; z-index: -1; transition: all 200ms ease; word-break: keep-all; } #header .utils .langs .lang-selector .others a { display: block; padding: 11px 20px; } #header .utils .langs .lang-selector .others a span { font-family: 'CeraPro', sans-serif; font-size: 16px; font-weight: 500; opacity: 0.4; color: #000; } #header .utils .langs .lang-selector .others a:hover { background-color: rgba(0, 0, 0, 0.05); } #header .utils .langs .lang-selector .others a:hover span { opacity: 1; } #header .utils .langs .lang-selector .others a.active { background-color: rgba(0, 0, 0, 0.05); } #header .utils .langs .lang-selector .others a.active span { opacity: 1; } #header .utils .split { padding: 0 16px; border: 1px solid #3d3; box-sizing: border-box; } @media screen and (max-width: 1023px) { #header .utils .split { display: none; } } #header .utils .split.leftSide { padding: 0 48px; } @media screen and (max-width: 1280px) { #header .utils .split.leftSide { display: none; } } #header .utils .search { position: relative; z-index: 3; } #header .utils .search a { display: block; width: 24px; height: 24px; background: url(../../img/icon/ico_search.svg) 50% 50% no-repeat; background-size: 24px auto; text-indent: -999em; overflow: hidden; } @media screen and (max-width: 1023px) { #header .utils .search a { background: url(../../img/icon/ico_search.svg) 50% 50% no-repeat; } } #header .utils .search.active a { background: url(../../img/icon/ico_search_close.svg) 50% 50% no-repeat; } @media screen and (max-width: 1023px) { #header .utils .search.active a { background: url(../../img/icon/btn-close.svg) 50% 50% no-repeat; } } @media screen and (max-width: 1023px) { #header .utils .search { position: relative; z-index: 9; } } #header .utils .search-panel { display: none; position: absolute; top: 90px; left: 0; z-index: 7; width: 100%; background: #fff; } #header .utils .search-panel::after { content: ''; display: block; position: absolute; top: -1px; left: 0; z-index: 7; width: 100%; height: 1px; border-top: 1px solid rgba(0, 0, 0, 0.1); } #header .utils .search-panel .mobile-lang { display: none; } @media screen and (max-width: 1280px) { #header .utils .search-panel { top: 88px; } #header .utils .search-panel::after { display: none; } } @media screen and (max-width: 1023px) { #header .utils .search-panel { top: 78px; z-index: 1; height: calc(var(--app-height) - 78px); } #header .utils .search-panel .mobile-lang { display: flex; } #header .utils .search-panel .panel { display: flex; height: 100%; flex-direction: column; background: #fff; border-top: 1px solid rgba(0, 0, 0, 0.1); } } @media screen and (max-width: 767px) { #header .utils .search-panel { top: 68px; height: calc(var(--app-height) - 68px); } } #header .utils .search-panel .inner { transition: opacity .7s; opacity: 0; width: 520px; margin: 0 auto; padding: 40px 0 64px; box-sizing: border-box; } @media screen and (max-width: 1280px) { #header .utils .search-panel .inner { width: 448px; } } @media screen and (max-width: 1023px) { #header .utils .search-panel .inner { padding: 48px 5.98958vw 64px; flex: 1; display: block; width: 100%; } } @media screen and (max-width: 767px) { #header .utils .search-panel .inner { padding: 40px 6.93333vw 64px; } } #header .utils .search-panel .inner .search_form { width: 100%; } #header .utils .search-panel .inner .search_form .input_box { float: none; width: 100%; border-bottom: 2px solid #000; } #header .utils .search-panel .inner .search_form .input_box .input_inner { margin-top: 14px; margin-bottom: 14px; } #header .utils .search-panel .inner .search_form .input_box input { display: block; width: 100%; font-family: 'Pretendard'; font-size: 24px; font-weight: 500; } #header .utils .search-panel .inner .search_form .input_box input::placeholder { color: #ccc; } @media screen and (max-width: 1280px) { #header .utils .search-panel .inner .search_form .input_box input { font-size: 22px; } } @media screen and (max-width: 767px) { #header .utils .search-panel .inner .search_form .input_box input { font-size: 18px; } } #header .utils .search-panel .inner .search_form .keyword-box { text-align: left; margin-top: 40px; min-height: 275px; } #header .utils .search-panel .inner .search_form .keyword-box h3 { font-family: 'Pretendard'; font-size: 16px; line-height: 1; font-weight: 500; color: #999; margin-bottom: 20px; letter-spacing: -0.16px; } #header .utils .search-panel .inner .search_form .keyword-box .keyword-list li { font-size: 22px; color: #000; padding: 8px 0; font-weight: 500; } #header .utils .search-panel .inner .search_form .keyword-box .keyword-list li:first-of-type { padding-top: 0; } #header .utils .search-panel .inner .search_form .keyword-box .keyword-list li a { letter-spacing: -0.52px; outline: none; font-weight: 500; } @media screen and (max-width: 1023px) { #header .utils .search-panel .inner .search_form .keyword-box .keyword-list li { font-size: 19px; line-height: 1.37; letter-spacing: normal; } #header .utils .search-panel .inner .search_form .keyword-box .keyword-list li a { outline: none; } } @media screen and (max-width: 767px) { #header .utils .search-panel .inner .search_form .keyword-box .keyword-list li { font-size: 17px; padding: 7px 0 6px; } } @media screen and (max-width: 1023px) { #header .utils .search-panel .inner .search_form .keyword-box { margin-top: 40px; min-height: 210px; } #header .utils .search-panel .inner .search_form .keyword-box h3 { line-height: 1; letter-spacing: -0.16px; margin-bottom: 18px; } } @media screen and (max-width: 767px) { #header .utils .search-panel .inner .search_form .keyword-box { margin-top: 36px; min-height: 200px; } #header .utils .search-panel .inner .search_form .keyword-box h3 { font-size: 14px; font-weight: 500; line-height: 1.14; letter-spacing: -0.14px; margin-bottom: 16px; } } #header .utils .search-panel .mobile-lang { border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 22px 5.98958vw; position: relative; align-items: center; justify-content: space-between; } @media screen and (max-width: 767px) { #header .utils .search-panel .mobile-lang { padding: 20px 6.93333vw; } } #header .utils .search-panel .mobile-lang::after { content: ''; width: 87.5px; height: 14px; background: url(../../img/common/logo-kgc.svg) 50% 50% no-repeat; background-size: cover; } #header .utils .search-panel .mobile-lang .lang { display: flex; font-family: 'CeraPro', sans-serif; align-items: center; } #header .utils .search-panel .mobile-lang .lang::before { content: ''; display: block; width: 23px; height: 23px; background: url(../../img/icon/lang.svg) 50% 50% no-repeat; margin-right: 10px; } @media screen and (max-width: 767px) { #header .utils .search-panel .mobile-lang .lang::before { margin-right: 8px; } } #header .utils .search-panel .mobile-lang .lang li { margin-right: 13px; } #header .utils .search-panel .mobile-lang .lang li a { font-size: 16px; font-weight: 500; display: block; position: relative; color: #888; } #header .utils .search-panel .mobile-lang .lang li.active a { color: #000; } @media screen and (max-width: 767px) { #header .utils .search-panel .mobile-lang .lang li { margin-right: 12px; } #header .utils .search-panel .mobile-lang .lang li a { font-size: 14px; } } @media screen and (max-width: 767px) { #header .header-sub { overflow: auto; } } #header .header-sub .breadcrumbs { width: 0px; white-space: nowrap; color: #666666; font-size: 13px; } @media screen and (max-width: 767px) { #header .header-sub .breadcrumbs { display: none; } } #header .header-sub .breadcrumbs a { color: #666666; } #header .header-sub .breadcrumbs .split { opacity: .5; } #header .header-sub .breadcrumbs ul { display: flex; } #header .header-sub .breadcrumbs ul li { margin-right: 8px; } #header .header-sub .breadcrumbs ul li:last-child { margin-right: 0 !important; } #header .header-sub .product-menu { margin-left: auto; margin-right: auto; font-size: 15px; } @media screen and (max-width: 1023px) { #header .header-sub .product-menu { margin: 0 auto; } } @media screen and (max-width: 767px) { #header .header-sub .product-menu { margin: 0 auto; white-space: nowrap; } } #header .header-sub .product-menu ul { display: flex; } #header .header-sub .product-menu ul li { opacity: 0.4; } #header .header-sub .product-menu ul li:not(:last-of-type) { margin-right: 40px; } @media screen and (max-width: 1023px) { #header .header-sub .product-menu ul li:not(:last-of-type) { margin-right: 26px; } } #header .header-sub .product-menu ul li:last-child { margin-right: 0 !important; } #header .header-sub .product-menu ul li a { display: block; position: relative; font-size: 15px; font-weight: 500; padding: 22px 0 21px; } #header .header-sub .product-menu ul li a span { display: block; height: 100%; } @media screen and (max-width: 1023px) { #header .header-sub .product-menu ul li a { font-size: 14px; } } #header .header-sub .product-menu ul li a:after { position: absolute; height: 3px; background: #c52922; left: 0; content: ''; bottom: 0; width: 0; transition: width 300ms ease; } #header .header-sub .product-menu ul li:hover, #header .header-sub .product-menu ul li.active { opacity: 1; } #header .header-sub .product-menu ul li:hover a:after, #header .header-sub .product-menu ul li.active a:after { width: 100%; } #header .header-sub .product-menu ul li.active.hide a:after { width: 0; } #header .btn-toggle-menu { width: 40px; height: 40px; margin-left: 8px; position: relative; text-indent: -999em; overflow: hidden; display: none; } @media screen and (max-width: 1023px) { #header .btn-toggle-menu { display: block; width: 24px; height: 24px; margin-left: 16px; z-index: 9; } } #header .btn-toggle-menu span { display: block; background: #000; width: 20px; height: 2px; position: absolute; top: 50%; left: 50%; margin-top: -1px; transform: translateX(-50%); transition: width 300ms cubic-bezier(0.165, 0.84, 0.44, 1); } #header .btn-toggle-menu span:before, #header .btn-toggle-menu span:after { content: ''; display: block; background: #000; width: 20px; height: 2px; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); transform-origin: 50% 50%; transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1); } #header .btn-toggle-menu span:after { top: 6px; } #header.nav-open .btn-toggle-menu span { width: 0px; } #header.nav-open .btn-toggle-menu span:before { transform: translateX(-50%) rotate(45deg); top: 0; } #header.nav-open .btn-toggle-menu span:after { transform: translateX(-50%) rotate(-45deg); top: 0; } #header .hover-effect > li a { transition: opacity .4s; } #header .hover-effect > li.active a { opacity: 0.4; } #header .hover-effect1 > li a, #header .hover-effect1 > li img { transition: opacity .4s; } #header .hover-effect1 > li.active a, #header .hover-effect1 > li.active img { opacity: 0.4; } #header .hover-effect2 > li > a { transition: opacity .4s; } #header .hover-effect2 > li > a.active { opacity: 0.4; } @media screen and (max-width: 1023px) { #header .brand, #header .utils { z-index: 2; } #header #nav { position: fixed; background-color: #fff; top: 0; right: 0; width: 100%; height: var(--app-height); transform: translateX(100%); transition: transform 600ms cubic-bezier(0.86, 0, 0.07, 1); } #header #nav:after { height: 78px; position: fixed; top: 0; left: 0; right: 0; background: none; content: ''; } #header #nav .nav-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; box-sizing: border-box; padding-top: 78px; overflow: auto; -webkit-overflow-scrolling: touch; } #header #nav .nav-inner .gnb-bar { display: none; } #header #nav .gnb { flex: 1; padding: 48px 5.98958vw; display: block; border-top: 1px solid rgba(0, 0, 0, 0.1); } #header #nav .gnb > li { margin-bottom: 26px; } #header #nav .gnb > li:not(:last-of-type) { margin-right: 0; } #header #nav .gnb > li > a { padding: 0; } #header #nav .gnb > li > a::before { display: none; } #header #nav .gnb > li.has-submenu > a { position: relative; display: flex; justify-content: space-between; align-items: center; } #header #nav .gnb > li.has-submenu > a:after { background: url(../../img/icon/arrow-down.svg) 50% 50% no-repeat; background-size: contain; width: 24px; height: 24px; content: ''; display: inline-block; margin-left: 10px; } #header #nav .gnb > li.has-submenu.open > a:after { transform: rotate(-180deg); } #header #nav .gnb > li > a span { font-size: 24px; line-height: 36px; } #header #nav .submenu { position: relative; top: auto; left: auto; right: auto; margin-top: 0; border-top: 0; height: auto !important; opacity: 1; visibility: visible; } #header #nav .submenu .submenu-box { height: 0; background: transparent; padding: 0 16px; } #header #nav .submenu .submenu-box::after { display: none; } #header #nav .submenu .submenu-box .submenu-layout { padding-top: 0; } #header #nav .submenu .submenu-box .submenu-box-inner { padding: 26px 0px 0; display: block; padding-right: 0; } #header #nav .submenu .submenu-box .submenu-box-inner ul { padding: 0; margin: 0; display: block; } #header #nav .submenu .submenu-box .submenu-box-inner ul li { margin: 0; } #header #nav .submenu .submenu-box .submenu-box-inner ul li:not(:last-of-type) { margin-bottom: 18px; } #header #nav .submenu .submenu-box .submenu-box-inner ul li p { display: none; } #header #nav .submenu .submenu-box .submenu-box-inner ul li .label { font-size: 19px; font-weight: 500; letter-spacing: -0.19px; line-height: 1.15; display: inline; } #header #nav .submenu.__with-info .submenu-box-inner > ul { display: block; } #header #nav .submenu.__with-info .submenu-box-inner > ul > li { border: 0; padding: 0; } #header #nav .submenu.__with-info .submenu-box-inner .submenu-content { display: none; } #header #nav .submenu.normal .submenu-box-inner > ul { display: block; } #header #nav .submenu.normal .submenu-box-inner > ul > li { border: 0; padding: 0; } #header #nav .submenu.normal .submenu-box-inner .submenu-content { display: none; } #header #nav .submenu.__with-cat .submenu-box-inner > ul { width: auto; display: flex; flex-wrap: wrap; } #header #nav .submenu.__with-cat .submenu-box-inner > ul .brand_ul { padding: 0; width: 50%; border-bottom: none; } #header #nav .submenu.__with-cat .submenu-box-inner > ul .brand_ul:not(:last-of-type) { margin-bottom: 36px; } #header #nav .submenu.__with-cat .submenu-box-inner > ul .brand_ul:nth-last-of-type(2), #header #nav .submenu.__with-cat .submenu-box-inner > ul .brand_ul:last-of-type { margin-bottom: 20px; } #header #nav .submenu.__with-cat .submenu-box-inner > ul .brand_ul .__left .split { display: none; } #header #nav .submenu.__with-cat .submenu-box-inner > ul .brand_ul .submenu-content { display: none; } #header #nav .submenu.__with-cat .submenu-box-inner > ul .label { margin: 0; } #header #nav .submenu.__with-cat .submenu-box-inner .cat { font-size: 14px; font-weight: 500; line-height: 1.29; letter-spacing: -0.14px; height: auto; margin-bottom: 18px; } #header #nav .submenu.__with-cat .submenu-box-inner .product-list > li:not(:last-of-type) { margin-bottom: 15px; } #header #nav .mobile-lang { border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 22px 5.98958vw; position: relative; display: flex; align-items: center; justify-content: space-between; } #header #nav .mobile-lang::after { content: ''; width: 87.5px; height: 14px; background: url(../../img/common/logo-kgc.svg) 50% 50% no-repeat; background-size: cover; } #header #nav .mobile-lang .lang { display: flex; font-family: 'CeraPro', sans-serif; align-items: center; } #header #nav .mobile-lang .lang::before { content: ''; display: block; width: 23px; height: 23px; background: url(../../img/icon/lang.svg) 50% 50% no-repeat; margin-right: 10px; } #header #nav .mobile-lang .lang li { margin-right: 13px; } #header #nav .mobile-lang .lang li a { font-size: 16px; font-weight: 500; display: block; position: relative; color: #888; } #header #nav .mobile-lang .lang li.active a { color: #000; } #header.nav-open #nav { transform: translateX(0%); } } @media screen and (max-width: 767px) { #header #nav { position: fixed; background-color: #fff; top: 0; right: 0; width: 100%; height: var(--app-height); transform: translateX(100%); transition: transform 600ms cubic-bezier(0.86, 0, 0.07, 1); } #header #nav:after { height: 68px; position: fixed; top: 0; left: 0; right: 0; background: none; content: ''; } #header #nav .nav-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; box-sizing: border-box; padding-top: 68px; overflow: auto; -webkit-overflow-scrolling: touch; } #header #nav .nav-inner .gnb-bar { display: none; } #header #nav .gnb { border-top: 1px solid rgba(0, 0, 0, 0.1); flex: 1; padding: 40px 6.93333vw; display: block; } #header #nav .gnb > li { margin-bottom: 24px; } #header #nav .gnb > li:not(:last-of-type) { margin-right: 0; } #header #nav .gnb > li > a { padding: 0; } #header #nav .gnb > li > a::before { display: none; } #header #nav .gnb > li.has-submenu > a { position: relative; display: flex; justify-content: space-between; align-items: center; } #header #nav .gnb > li.has-submenu > a:after { background: url(../../img/icon/arrow-down.svg) 50% 50% no-repeat; background-size: contain; width: 24px; height: 24px; content: ''; display: inline-block; margin-left: 10px; } #header #nav .gnb > li.has-submenu.open > a:after { transform: rotate(-180deg); } #header #nav .gnb > li > a span { font-size: 22px; line-height: 1.09; letter-spacing: -0.22px; } #header #nav .submenu { position: relative; top: auto; left: auto; right: auto; margin-top: 0; border-top: 0; height: auto !important; opacity: 1; visibility: visible; } #header #nav .submenu .submenu-box { height: 0; background: transparent; padding: 0 12px; } #header #nav .submenu .submenu-box::after { display: none; } #header #nav .submenu .submenu-box .submenu-layout { padding-top: 0; } #header #nav .submenu .submenu-box .submenu-box-inner { padding: 24px 0px 0; display: block; padding-right: 0; } #header #nav .submenu .submenu-box .submenu-box-inner ul { padding: 0; margin: 0; display: block; } #header #nav .submenu .submenu-box .submenu-box-inner ul li { margin: 0; } #header #nav .submenu .submenu-box .submenu-box-inner ul li:not(:last-of-type) { margin-bottom: 15px; } #header #nav .submenu .submenu-box .submenu-box-inner ul li p { display: none; } #header #nav .submenu .submenu-box .submenu-box-inner ul li .label { font-size: 17px; font-weight: 500; letter-spacing: -0.17px; line-height: 1.15; display: inline; } #header #nav .submenu.__with-info .submenu-box-inner > ul { display: block; } #header #nav .submenu.__with-info .submenu-box-inner > ul > li { border: 0; padding: 0; } #header #nav .submenu.__with-info .submenu-box-inner .submenu-content { display: none; } #header #nav .submenu.normal .submenu-box-inner > ul { display: block; } #header #nav .submenu.normal .submenu-box-inner > ul > li { border: 0; padding: 0; } #header #nav .submenu.normal .submenu-box-inner .submenu-content { display: none; } #header #nav .submenu.__with-cat .submenu-box { padding: 0 0 0 12px; } #header #nav .submenu.__with-cat .submenu-box-inner > ul { width: auto; display: flex; flex-wrap: wrap; } #header #nav .submenu.__with-cat .submenu-box-inner > ul .brand_ul { padding: 0; width: calc(50% - 6px); border-bottom: none; } #header #nav .submenu.__with-cat .submenu-box-inner > ul .brand_ul:not(:last-of-type) { margin-bottom: 32px; } #header #nav .submenu.__with-cat .submenu-box-inner > ul .brand_ul:nth-of-type(even) { padding-left: 12px; } #header #nav .submenu.__with-cat .submenu-box-inner > ul .brand_ul:nth-last-of-type(2), #header #nav .submenu.__with-cat .submenu-box-inner > ul .brand_ul:last-of-type { margin-bottom: 16px; } #header #nav .submenu.__with-cat .submenu-box-inner > ul .brand_ul .__left .split { display: none; } #header #nav .submenu.__with-cat .submenu-box-inner > ul .brand_ul .submenu-content { display: none; } #header #nav .submenu.__with-cat .submenu-box-inner > ul .label { margin: 0; } #header #nav .submenu.__with-cat .submenu-box-inner .cat { font-size: 13px; font-weight: 500; line-height: 1.38; letter-spacing: -0.13px; height: auto; margin-bottom: 16px; } #header #nav .submenu.__with-cat .submenu-box-inner .product-list > li:not(:last-of-type) { margin-bottom: 12px; } #header #nav .mobile-lang { border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 20px 6.93333vw; position: relative; display: flex; align-items: center; justify-content: space-between; } #header #nav .mobile-lang::after { content: ''; width: 87.5px; height: 14px; background: url(../../img/common/logo-kgc.svg) 50% 50% no-repeat; background-size: cover; } #header #nav .mobile-lang .lang { display: flex; align-items: center; font-family: 'CeraPro', sans-serif; } #header #nav .mobile-lang .lang::before { content: ''; display: block; width: 23px; height: 23px; background: url(../../img/icon/lang.svg) 50% 50% no-repeat; margin-right: 8px; } #header #nav .mobile-lang .lang li { margin-right: 12px; } #header #nav .mobile-lang .lang li a { font-size: 14px; font-weight: 500; display: block; position: relative; color: #888; } #header #nav .mobile-lang .lang li.active a { color: #000; } } .cn #header .utils .langs .lang-selector .others a span { word-break: keep-all; } .en #header .utils .langs:hover .lang-selector .current .__current { width: 4em; } #btn_top { cursor: pointer; z-index: 6; position: absolute; bottom: calc(100% + 24px); right: 4.16667vw; } #btn_top a { font-size: 0; width: 48px; height: 48px; overflow: hidden; background: #000; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; } #btn_top a img { pointer-events: none; width: 16.4px; height: 16.4px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); z-index: 2; } #btn_top a::before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 100%; left: 0%; background-color: #c52922; transition: top 200ms ease; } #btn_top a:hover::before { top: 0; } #btn_top.btn_top_m { display: none; } #btn_top.btn_top_m.active { display: block; } @media screen and (max-width: 1280px) { #btn_top { right: 5.98958vw; } #btn_top a { width: 44px; height: 44px; } #btn_top a img { width: 14.6px; height: 14.6px; } } @media screen and (max-width: 1023px) { #btn_top { right: 6.66667vw; } #btn_top a { width: 40px; height: 40px; } #btn_top a img { width: 14px; height: 14px; } } @media screen and (max-width: 767px) { #btn_top a { width: 36px; height: 36px; } #btn_top a img { width: 12.8px; height: 12.8px; } } #btn_top_m { display: none; } #footer { position: relative; color: #000; width: 100%; } #footer:before { content: ''; position: absolute; top: -2px; left: 0; width: 100%; height: 1px; z-index: 2; opacity: 0.1; background-color: #000; } #footer a { color: inherit; } #footer .__top { background: #fff; z-index: 3; position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } #footer .footer-top { width: 100%; padding-top: 51px; padding-bottom: 10.4167vw; } @media screen and (max-width: 1023px) { #footer .footer-top { padding-bottom: 0; } } #footer .footer-top .footer-inner { width: 100%; display: flex; flex-wrap: wrap; } #footer .footer-top .footer-inner .footer-menu .menu-top { display: flex; flex-wrap: wrap; margin-bottom: 22px; } #footer .footer-top .footer-inner .footer-menu .menu-top li { opacity: 1; transition: opacity .4s; } #footer .footer-top .footer-inner .footer-menu .menu-top li.active { opacity: 0.4; transition: opacity .4s; } #footer .footer-top .footer-inner .footer-menu .menu-top li:not(:last-of-type) { margin-right: 21px; } #footer .footer-top .footer-inner .footer-menu .menu-top li a { font-size: 30px; font-weight: 600; } #footer .footer-top .footer-inner .footer-menu .menu-top li a span { display: inline-block; position: relative; } #footer .footer-top .footer-inner .footer-menu .footer-ci ul { display: flex; } #footer .footer-top .footer-inner .footer-menu .footer-ci ul li { font-size: 20px; font-weight: 500; color: #666; transition: .4s color; } #footer .footer-top .footer-inner .footer-menu .footer-ci ul li:not(:last-of-type) { margin-right: 18px; } #footer .footer-top .footer-inner .footer-menu .footer-ci ul li:hover { color: #000; transition: .4s color; } @media screen and (max-width: 1280px) { #footer .footer-top .footer-inner .footer-menu .menu-top { margin-bottom: 18px; } #footer .footer-top .footer-inner .footer-menu .menu-top li:not(:last-of-type) { margin-right: 20px; } #footer .footer-top .footer-inner .footer-menu .menu-top li a { font-size: 27px; } #footer .footer-top .footer-inner .footer-menu .footer-ci ul li { font-size: 18px; } #footer .footer-top .footer-inner .footer-menu .footer-ci ul li:not(:last-of-type) { margin-right: 16px; } } @media screen and (max-width: 1023px) { #footer .footer-top .footer-inner .footer-menu .menu-top { margin-bottom: 16px; } #footer .footer-top .footer-inner .footer-menu .menu-top li:not(:last-of-type) { margin-right: 13px; } #footer .footer-top .footer-inner .footer-menu .menu-top li a { font-size: 24px; } #footer .footer-top .footer-inner .footer-menu .footer-ci ul li { font-size: 16px; } #footer .footer-top .footer-inner .footer-menu .footer-ci ul li:not(:last-of-type) { margin-right: 14px; } } @media screen and (max-width: 767px) { #footer .footer-top .footer-inner .footer-menu .menu-top { margin-bottom: 16px; } #footer .footer-top .footer-inner .footer-menu .menu-top li:not(:last-of-type) { margin-right: 13px; margin-bottom: 7px; } #footer .footer-top .footer-inner .footer-menu .menu-top li a { font-size: 20px; } #footer .footer-top .footer-inner .footer-menu .footer-ci ul li { font-size: 15px; } #footer .footer-top .footer-inner .footer-menu .footer-ci ul li:not(:last-of-type) { margin-right: 12px; } } #footer .footer-top .footer-inner .footer-utils { width: 254px; margin-left: auto; letter-spacing: -0.0325em; } @media screen and (max-width: 1023px) { #footer .footer-top .footer-inner .footer-utils { width: 100%; margin-top: 10.4167vw; } } @media screen and (max-width: 767px) { #footer .footer-top .footer-inner .footer-utils { width: 100%; margin-top: 12.3077vw; } } #footer .footer-top .footer-inner .footer-utils .family-site { position: relative; box-sizing: border-box; border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding: 16px 0 15px; margin-top: -15px; margin-bottom: 43px; height: 49px; font-size: 18px; font-weight: 500; color: #000; line-height: 1; letter-spacing: -0.36px; } #footer .footer-top .footer-inner .footer-utils .family-site.active .family-site-btn #line_2 { transform: translate(8794px, 11086px) !important; transition: all 300ms; } @media screen and (max-width: 1023px) { #footer .footer-top .footer-inner .footer-utils .family-site { height: 44px; padding: 14px 0 13px; margin-top: -10px; margin-bottom: 26px; letter-spacing: -0.34px; font-size: 17px; } } @media screen and (max-width: 767px) { #footer .footer-top .footer-inner .footer-utils .family-site { margin-top: 0; margin-bottom: 0; font-size: 16px; letter-spacing: -0.32px; line-height: 1.13; margin-bottom: 24px; } } #footer .footer-top .footer-inner .footer-utils .family-site::after { content: ''; display: block; position: absolute; left: 0; bottom: -1px; z-index: 7; width: 100%; height: 2px; background: #000; transition: width 200ms ease; } #footer .footer-top .footer-inner .footer-utils .family-site .family-site-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; text-transform: uppercase; font-family: 'CeraPro', sans-serif; } #footer .footer-top .footer-inner .footer-utils .family-site .family-site-btn .icon { position: relative; display: block; width: 14px; height: 14px; } #footer .footer-top .footer-inner .footer-utils .family-site .family-site-btn .icon .cls-1 { fill: #fff; opacity: 0; } #footer .footer-top .footer-inner .footer-utils .family-site .family-site-btn .icon #line_1 { transform: translate(8794px, 11086px); } #footer .footer-top .footer-inner .footer-utils .family-site .family-site-btn .icon #line_2 { transform: translate(8800px, 11080px) rotate(90deg); transition: all 300ms; } #footer .footer-top .footer-inner .footer-utils .family-site .family-site-panel { display: none; position: absolute; left: 0; top: 100%; z-index: 7; background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); width: 100%; max-height: 252px; overflow-y: auto; } #footer .footer-top .footer-inner .footer-utils .family-site .family-site-panel::-webkit-scrollbar { width: 8px; background-color: #ffffff; } #footer .footer-top .footer-inner .footer-utils .family-site .family-site-panel::-webkit-scrollbar-thumb { background-color: #aaaaaa; } @media screen and (max-width: 767px) { #footer .footer-top .footer-inner .footer-utils .family-site .family-site-panel { top: auto; bottom: 100%; } } #footer .footer-top .footer-inner .footer-utils .family-site .family-site-panel ul li { display: flex; align-items: center; justify-content: flex-start; width: 100%; } #footer .footer-top .footer-inner .footer-utils .family-site .family-site-panel ul li a { display: flex; align-items: center; width: 100%; height: 50px; line-height: 1; padding: 0 15px; font-size: 16px; letter-spacing: -0.16px; color: #000; font-weight: 500; font-family: 'Pretendard'; } #footer .footer-top .footer-inner .footer-utils .family-site .family-site-panel ul li a:hover { background: rgba(0, 0, 0, 0.05); } @media screen and (max-width: 1023px) { #footer .footer-top .footer-inner .footer-utils .family-site .family-site-panel ul li a { font-size: 15px; letter-spacing: -0.15px; height: 48px; } } @media screen and (max-width: 767px) { #footer .footer-top .footer-inner .footer-utils .family-site .family-site-panel ul li a { font-size: 14px; letter-spacing: -0.14px; height: 46px; } } @media screen and (max-width: 1023px) { #footer .footer-top .footer-inner { display: block; } } #footer .footer-bottom { padding-bottom: 49px; display: flex; justify-content: space-between; align-items: center; } #footer .footer-bottom .util-menu ul { display: flex; margin-bottom: 16px; } #footer .footer-bottom .util-menu ul li { opacity: 1; transition: .4s opacity; } #footer .footer-bottom .util-menu ul li.active { opacity: 0.4; transition: 0.4s opacity; } #footer .footer-bottom .util-menu ul li:not(:last-of-type) { margin-right: 16px; } #footer .footer-bottom .util-menu ul li a { font-size: 18px; } #footer .footer-bottom .util-menu ul li a span { display: inline-block; position: relative; color: #000; } #footer .footer-bottom .util-menu ul li:first-of-type a span { color: #c52922; } #footer .footer-bottom .util-menu .company { line-height: 1.2; letter-spacing: -0.15px; display: flex; flex-wrap: wrap; align-items: center; font-size: 15px; font-family: 500; color: #666; } #footer .footer-bottom .util-menu .split { margin: 0 0.5em; font-size: .8em; } #footer .footer-bottom .util-sns .sns { display: flex; align-items: center; } #footer .footer-bottom .util-sns .sns a { opacity: 1; transition: .4s opacity; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #222; border-radius: 50%; } #footer .footer-bottom .util-sns .sns a.active { opacity: 0.4; transition: .4s opacity; } #footer .footer-bottom .util-sns .sns a:not(:last-of-type) { margin-right: 8px; } #footer .footer-bottom .util-sns .sns a span { width: 14px; height: 14px; display: block; background: 50% 50% no-repeat; background-size: contain; } #footer .footer-bottom .util-sns .sns a.facebook span { background-image: url(../../img/icon/facebook.svg); } #footer .footer-bottom .util-sns .sns a.instagram span { background-image: url(../../img/icon/instagram.svg); } #footer .footer-bottom .util-sns .sns a.youtube span { background-image: url(../../img/icon/youtube.svg); } @media screen and (max-width: 1280px) { #footer .footer-bottom { padding-bottom: 42px; } #footer .footer-bottom .util-menu ul { margin-bottom: 14px; } #footer .footer-bottom .util-menu ul li:not(:last-of-type) { margin-right: 14px; } #footer .footer-bottom .util-menu ul li a { font-size: 16px; } #footer .footer-bottom .util-menu .company { line-height: 1.21; letter-spacing: -0.14px; font-size: 14px; } #footer .footer-bottom .util-sns .sns a { width: 36px; height: 36px; } #footer .footer-bottom .util-sns .sns a:not(:last-of-type) { margin-right: 7px; } #footer .footer-bottom .util-sns .sns a span { width: 12.6px; height: 12.6px; } } @media screen and (max-width: 1023px) { #footer .footer-bottom { display: block; padding-bottom: 36px; } #footer .footer-bottom .util-menu ul { margin-bottom: 12px; } #footer .footer-bottom .util-menu ul li:not(:last-of-type) { margin-right: 13px; } #footer .footer-bottom .util-menu ul li a { font-size: 15px; } #footer .footer-bottom .util-menu .company { line-height: 1.23; letter-spacing: -0.13px; font-size: 13px; } #footer .footer-bottom .util-sns { margin-top: 20px; } #footer .footer-bottom .util-sns .sns a { width: 33px; height: 33px; } #footer .footer-bottom .util-sns .sns a:not(:last-of-type) { margin-right: 7px; } #footer .footer-bottom .util-sns .sns a span { width: 11.5px; height: 11.5px; } } @media screen and (max-width: 767px) { #footer .footer-bottom { padding-bottom: 32px; } #footer .footer-bottom .util-menu ul li:not(:last-of-type) { margin-right: 12px; } #footer .footer-bottom .util-menu ul li a { font-size: 14px; } #footer .footer-bottom .util-sns .sns a { width: 30px; height: 30px; } #footer .footer-bottom .util-sns .sns a:not(:last-of-type) { margin-right: 7px; } #footer .footer-bottom .util-sns .sns a span { width: 10.5px; height: 10.5px; } } #footer .brand { width: 50%; } @media screen and (max-width: 1280px) { #footer .brand { width: 42.96875%; } } @media screen and (max-width: 1023px) { #footer .brand { display: none; } } #footer .brand a { display: block; background: url(../../img/common/logo-w.svg) 50% 50% no-repeat; background-size: contain; text-indent: -999em; overflow: hidden; width: 88px; height: 30px; } #footer .footer-logo { padding-top: 40px; padding-bottom: 40px; } #footer .footer-logo .logo-container { width: 100%; } #footer .footer-logo .logo-container img { display: block; width: 100%; height: 16.2500vw; object-fit: contain; } @media screen and (max-width: 1280px) { #footer .footer-logo { padding-top: 36px; } } @media screen and (max-width: 1023px) { #footer .footer-logo { padding-top: 32px; } } @media screen and (max-width: 1023px) { #footer .footer-logo { padding-top: 28px; } } /*# sourceMappingURL=style.css.map */