CINXE.COM
현직자 피셜 네이버 비하인드, 네이버피셜
<!DOCTYPE html><html lang="ko"><head><meta charSet="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><link rel="shortcut icon" type="image/x-icon" href="https://campaign-cdn.pstatic.net/0/naverfficial/favicon/ms-icon.png"/><link rel="icon" href="https://campaign-cdn.pstatic.net/0/naverfficial/favicon/favicon.png" type="image/x-icon"/><link rel="apple-touch-icon" href="https://campaign-cdn.pstatic.net/0/naverfficial/favicon/apple-icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"/><title>현직자 피셜 네이버 비하인드, 네이버피셜</title><meta name="description" content="오프 더 레코드로 만나는 네이버의 솔직한 이야기"/><meta property="og:title" content="현직자 피셜 네이버 비하인드, 네이버피셜"/><meta property="og:description" content="오프 더 레코드로 만나는 네이버의 솔직한 이야기"/><meta property="og:image" content="https://campaign-cdn.pstatic.net/0/naverfficial/og/fficial_og.jpeg"/><meta name="next-head-count" content="11"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script><script src="https://campaign-cdn.pstatic.net/0/campaign/js/jquery/jquery-3.6.0.min.js" defer="" data-nscript="beforeInteractive"></script><script src="/_next/static/chunks/webpack-527576ff117bb29f.js" defer=""></script><script src="/_next/static/chunks/framework-64ad27b21261a9ce.js" defer=""></script><script src="/_next/static/chunks/main-04e9359c8ce3f965.js" defer=""></script><script src="/_next/static/chunks/pages/_app-c9b7ab12b56558c6.js" defer=""></script><script src="/_next/static/chunks/236-6f4192098bd5e21f.js" defer=""></script><script src="/_next/static/chunks/929-adedcb2fddaa296b.js" defer=""></script><script src="/_next/static/chunks/135-f0cc2038b25304c5.js" defer=""></script><script src="/_next/static/chunks/157-544ece278834a3b7.js" defer=""></script><script src="/_next/static/chunks/pages/index-23179b17b0275127.js" defer=""></script><script src="/_next/static/FBhxk8RwwK8TlyUGnpKti/_buildManifest.js" defer=""></script><script src="/_next/static/FBhxk8RwwK8TlyUGnpKti/_ssgManifest.js" defer=""></script><style id="__jsx-856fcb9610099c00">@charset "UTF-8"; /* Common */ body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select { margin: 0; padding: 0; font-size: inherit; font-weight: normal; } body, input, textarea, select, button, table { font-family: NanumSquareNeo, -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; color: #000; } html, body { height: 100%; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; -webkit-overflow-scrolling: touch; } fieldset, img { border: 0; vertical-align: top; } video { width: 100%; border: 0; vertical-align: top; -o-object-fit: cover; object-fit: cover; } ol, ul { list-style: none; } address, em, i { font-style: normal; } a { text-decoration: none; color: inherit; } a:active, a:focus, a:hover { text-decoration: none; } strong { font-weight: normal; } button { cursor: pointer; color: inherit; border: none; background-color: transparent; } .blind, .u_skip, .blind { overflow: hidden !important; position: absolute !important; clip: rect(0 0 0 0) !important; width: 1px !important; height: 1px !important; margin: -1px !important; } *:focus { outline: none; } textarea { border-radius: 0; -webkit-appearance: none; resize: none; } input, select { vertical-align: middle; } input[type=text]::-ms-clear { display: none; } button { padding: 0; border: none; border: 0; outline: none; outline: 0; background: none; background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; cursor: pointer; } input, select, textarea, button, a, label { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } table { width: 100%; table-layout: fixed; border-collapse: collapse; } /* 크롬의 경우 */ input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration { display: none; } @font-face { font-family: "NanumSquareNeo"; font-style: normal; src: url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot"); src: url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix") format("embedded-opentype"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff") format("woff"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff2") format("woff2"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "NanumSquareNeo"; font-style: normal; src: url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot"); src: url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot?#iefix") format("embedded-opentype"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff") format("woff"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2") format("woff2"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-cBd.ttf") format("truetype"); font-weight: 500; font-display: swap; } @font-face { font-family: "NanumSquareNeo"; font-style: normal; src: url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot"); src: url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot?#iefix") format("embedded-opentype"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff") format("woff"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff2") format("woff2"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-dEb.ttf") format("truetype"); font-weight: 800; } @font-face { font-family: "NanumSquareNeo"; font-style: normal; src: url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot"); src: url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot?#iefix") format("embedded-opentype"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff") format("woff"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff2") format("woff2"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumSquareNeo/NanumSquareNeoTTF-eHv.ttf") format("truetype"); font-weight: 900; } @font-face { font-family: "NanumHuman-L"; src: url("https://campaign-cdn.pstatic.net/0/hangeul/2022/webfont/NanumHuman/NanumHumanLight.ttf") format("truetype"), url("https://campaign-cdn.pstatic.net/0/hangeul/2022/webfont/NanumHuman/NanumHumanLight.otf") format("embedded-opentype"), url("https://campaign-cdn.pstatic.net/0/hangeul/2022/webfont/NanumHuman/NanumHumanLight.woff") format("woff"); font-weight: 300; font-display: swap; } @font-face { font-family: "NanumHuman-R"; src: url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumHuman/NanumHumanRegular.ttf") format("truetype"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumHuman/NanumHumanRegular.otf") format("embedded-opentype"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumHuman/NanumHumanRegular.woff") format("woff"); font-weight: 400; font-display: swap; } @font-face { font-family: "NanumHuman-B"; src: url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumHuman/NanumHumanBold.ttf") format("truetype"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumHuman/NanumHumanBold.otf") format("embedded-opentype"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumHuman/NanumHumanBold.woff") format("woff"); font-weight: 500; font-display: swap; } @font-face { font-family: "NanumHuman-EB"; src: url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumHuman/NanumHumanEB.ttf") format("truetype"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumHuman/NanumHumanEB.otf") format("embedded-opentype"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumHuman/NanumHumanEB.woff") format("woff"); font-weight: 700; } @font-face { font-family: "NanumHuman-H"; src: url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumHuman/NanumHumanHeavy.ttf") format("truetype"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumHuman/NanumHumanHeavy.otf") format("embedded-opentype"), url("https://campaign-cdn.pstatic.net/0/campaign/font/NanumHuman/NanumHumanHeavy.woff") format("woff"); font-weight: 900; } body.overflow { position: relative; overflow: hidden; } .wrap { min-width: 320px; min-height: 100%; } .wrap .inner { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; } .content_wrap { position: relative; background-color: #fff; } .mo_only { display: block; } .mo_show { display: block; } .pc_show { display: none; } .pc_tab { display: none; } .mo_tab { display: block; } .title_br { display: block; } .label_list { margin-top: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 3px; } .label_list .label_link { display: block; padding: 4px 9px; font-family: "NanumHuman-B"; font-size: 13px; line-height: 17px; background-color: #E9E9E9; color: #333; } .label_list .label_link:hover { background-color: rgb(199, 199, 199); } .wrap.shadow:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1150; } .wrap .header { position: fixed; top: 0; left: 0; right: 0; -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.5, 1); transition: all 0.2s cubic-bezier(0, 0, 0.5, 1); z-index: 1100; } .wrap .header .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 12px 20px; max-width: 100%; -webkit-box-sizing: boder-box; box-sizing: border-box; } .header { background-color: #DCDCDC; } .header .logo { width: 127px; height: 25px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/logo_gray.gif) no-repeat; background-size: 127px 25px; -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.5, 1); transition: all 0.2s cubic-bezier(0, 0, 0.5, 1); } .header .logo a { display: block; height: 100%; } .header .header_menu { margin-left: auto; height: 22px; font-size: 0; } .header .header_menu [class^=btn_] + [class^=btn_] { margin-left: 16px; } .header .btn_search { width: 22px; height: 22px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_search); background-repeat: no-repeat; background-position: -108px -155px; background-size: 214px auto; } .header .btn_search.active { width: 22px; height: 22px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_active_search); background-repeat: no-repeat; background-position: 0px -155px; background-size: 214px auto; } .header .btn_gnb { width: 22px; height: 22px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_gnb); background-repeat: no-repeat; background-position: -27px -155px; background-size: 214px auto; } .header .header_menu_list { display: none; } .header .header_menu_list .header_menu_link:hover { color: #444; } .header .header_menu_list .header_menu_link.active { color: #FF4600; } .header .title_box { padding: 20px; } .header .title_box .title_text { font-family: "Pretendard-B"; font-size: 26px; line-height: 34px; letter-spacing: -0.02em; } .header .title_box .accent { color: #0DA4FF; } .header.active .logo { -webkit-animation: down_text 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; animation: down_text 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; } .header.active .header_menu_item { -webkit-transform: translateY(-103%); -ms-transform: translateY(-103%); transform: translateY(-103%); -webkit-animation: down_text 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; animation: down_text 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; } .header.active .header_menu_item:nth-of-type(1) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .header.active .header_menu_item:nth-of-type(2) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .header.active .header_menu_item:nth-of-type(3) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .header.active .btn_search { -webkit-transform: translateY(-103%); -ms-transform: translateY(-103%); transform: translateY(-103%); -webkit-animation: down_text 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; animation: down_text 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; } .header.active .btn_gnb { -webkit-transform: translateY(-103%); -ms-transform: translateY(-103%); transform: translateY(-103%); -webkit-animation: down_text 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; animation: down_text 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; } .header { position: relative; } .header.fixed { background-color: #000; } .header.fixed .logo { width: 127px; height: 25px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/logo_black.gif) no-repeat; background-size: 127px 25px; } .header.fixed .logo a { display: block; height: 100%; } .header.fixed .header_menu_link { color: #fff; } .header.fixed .header_menu_link:hover { color: #999; } .header.fixed .btn_search { width: 22px; height: 22px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_search_w); background-repeat: no-repeat; background-position: -135px -155px; background-size: 214px auto; } .header.fixed .btn_search.active { width: 22px; height: 22px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/ico_close_search.png) no-repeat; background-size: 22px 22px; } .header.fixed .btn_gnb { width: 22px; height: 22px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_gnb_w); background-repeat: no-repeat; background-position: -54px -155px; background-size: 214px auto; } .header.fixed .gnb_link { color: #fff; } .header.white { background-color: #fff; } .header.white .logo { width: 127px; height: 25px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/logo_white.gif) no-repeat; background-size: 127px 25px; } .header.white .logo a { display: block; height: 100%; } .gnb_wrap.open { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 3000; background-color: rgba(0, 0, 0, 0.5); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .gnb_wrap.open .gnb { visibility: visible; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .gnb_wrap .gnb { background-color: #000; } .gnb_wrap .gnb .logo { width: 127px; height: 25px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/logo_black.gif) no-repeat; background-size: 127px 25px; } .gnb_wrap .gnb .logo a { display: block; height: 100%; } .gnb_wrap .gnb .gnb_item { color: #fff; } .gnb_wrap .gnb .btn_close { width: 24px; height: 24px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_close_w); background-repeat: no-repeat; background-position: -135px -110px; background-size: 214px auto; } .gnb_wrap .gnb .gnb_footer_text { color: #fff; } .gnb { visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; width: 100%; background-color: #fff; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; overflow-y: auto; z-index: 1200; } .gnb .gnb_inner { position: relative; padding: 18px 20px; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .gnb .gnb_list { margin-top: 64px; display: block; width: 100%; } .gnb .gnb_item { font-weight: 800; } .gnb .gnb_item:first-child { border-top: 0; } .gnb .gnb_link { padding: 15px 0; display: block; position: relative; font-size: 34px; line-height: 38px; -webkit-box-sizing: border-box; box-sizing: border-box; } .gnb .gnb_link.active { color: #FF4600; } .gnb .gnb_footer { position: absolute; bottom: 60px; left: 20px; } .gnb .gnb_footer .gnb_footer_text { display: block; font-weight: 600; font-size: 16px; line-height: 20px; } .gnb .btn_close { position: absolute; top: 14px; right: 17px; width: 24px; height: 24px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_close); background-repeat: no-repeat; background-position: -90px -65px; background-size: 214px auto; } .total_swiper { overflow: hidden; position: relative; } .total_swiper .swiper-navigation { display: none; } .total_swiper .swiper-button-prev, .total_swiper .swiper-button-next { border-radius: 50%; } .total_swiper .swiper-button-prev.swiper-button-disabled, .total_swiper .swiper-button-next.swiper-button-disabled { display: block; opacity: 1; } .total_swiper .swiper-button-prev::after, .total_swiper .swiper-button-next::after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .total_swiper .swiper-button-prev { left: 30px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .total_swiper .swiper-button-prev.swiper-button-disabled:after { -webkit-transform: translate(-50%, -50%) rotate(180deg); -ms-transform: translate(-50%, -50%) rotate(180deg); transform: translate(-50%, -50%) rotate(180deg); width: 40px; height: 40px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_total_disabled_prev); background-repeat: no-repeat; background-position: -90px -110px; background-size: 214px auto; } .total_swiper .swiper-button-next { right: 30px; } .total_swiper .swiper-button-next.swiper-button-disabled:after { -webkit-transform: translate(-50%, -50%) rotate(180deg); -ms-transform: translate(-50%, -50%) rotate(180deg); transform: translate(-50%, -50%) rotate(180deg); width: 40px; height: 40px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_total_disabled_prev); background-repeat: no-repeat; background-position: -90px -110px; background-size: 214px auto; } .total_swiper .swiper-pagination-bullets.swiper-pagination-horizontal { display: block; bottom: 51px; } .total_swiper .swiper-pagination-bullet { position: relative; padding: 5px 0; width: 42px; height: 3px; text-align: left; border-radius: 0; opacity: 1; margin-right: 20px; background-color: transparent; } .total_swiper .swiper-pagination-bullet .progress { position: absolute; bottom: 50%; left: 0; z-index: 1; width: 100%; height: 3px; background-color: #B7B7B7; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } .total_swiper .swiper-pagination-bullet .progress:hover { background-color: #858585; } .total_swiper .swiper-pagination-bullet .progress-bar { position: absolute; bottom: 50%; left: 0; z-index: 2; width: 0%; height: 3px; background-color: #111; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } .total_swiper .swiper-pagination-bullet-active { background-color: transparent; } .total_swiper .swiper-pagination-bullet-active .progress-bar { -webkit-animation: countingBar 10s ease-in 1 alternate forwards; animation: countingBar 10s ease-in 1 alternate forwards; } .total_swiper .swiper-pagination { opacity: 0; -webkit-transform: translateY(103%); -ms-transform: translateY(103%); transform: translateY(103%); -webkit-animation: up_swiper 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; animation: up_swiper 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .total_swiper .swiper-navigation [class^=swiper-button-] { opacity: 0; top: calc(50% + 30px); -webkit-animation: up_navigation 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; animation: up_navigation 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .total_swiper.ani_02 .swiper-slide-active .spot_title_wrap { -webkit-animation: left_swiper 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; animation: left_swiper 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; } .total_swiper.ani_02 .swiper-slide-active .spot_inner_swiper { -webkit-animation: left_swiper 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; animation: left_swiper 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; } .total_swiper.ani.active { opacity: 0; } .total_swiper.ani.active .spot_title_wrap { -webkit-animation: none; animation: none; } .total_swiper.ani.active .spot_title { -webkit-transform: translateY(103%); -ms-transform: translateY(103%); transform: translateY(103%); -webkit-animation: up_text 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; animation: up_text 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; } .total_swiper.ani.active .spot_title_text + .spot_title_text .spot_title { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .total_swiper.ani.active .spot_title_desc { -webkit-transform: translateY(103%); -ms-transform: translateY(103%); transform: translateY(103%); -webkit-animation: up_text 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; animation: up_text 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .total_swiper.ani.active .spot_inner_swiper { opacity: 0; -webkit-animation: up_swiper 0.6s cubic-bezier(0, 0, 0.5, 1) forwards; animation: up_swiper 0.6s cubic-bezier(0, 0, 0.5, 1) forwards; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .total_swiper .spot_title_unit_box { margin-top: 2px; } .total_swiper .spot_title_unit_box .spot_title_text { overflow: hidden; } .total_swiper .spot_title_desc_box { overflow: hidden; } .spot { padding-top: 50px; background-color: #DCDCDC; } .spot .inner { margin: 0 auto; max-width: 375px; padding: 50px 20px 58px; } .spot .spot_content { position: relative; width: 332px; height: 621px; padding-top: 50px; margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; } .spot .spot_title_wrap .spot_title_desc { display: none; } .spot .spot_title_box .point_title { font-family: "NanumHuman-B"; color: #ff4800; font-size: 14px; line-height: 21px; } .spot .spot_title_box .spot_title { display: block; font-weight: 900; font-size: 26px; line-height: 31px; letter-spacing: -0.04em; } .spot .spot_title_box .spot_title br { display: none; } .spot .spot_inner_swiper { /* 활성화된 슬라이드 */ } .spot .spot_inner_swiper.animation-active .swiper-slide-active, .spot .spot_inner_swiper.animation-active .swiper-slide-duplicate-active { -webkit-animation: lastSwiper 0.3s cubic-bezier(0, 0, 0.5, 1); animation: lastSwiper 0.3s cubic-bezier(0, 0, 0.5, 1); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .spot .spot_inner_swiper .swiper-wrapper { pointer-events: all !important; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; } .spot .spot_inner_swiper .swiper-button { display: none; } .spot .spot_inner_swiper.swiper-container { margin-top: 34px; position: relative; padding-bottom: 57px; width: 332px; height: 360px; } .spot .spot_inner_swiper .swiper-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .spot .spot_inner_swiper .swiper-slide { display: none; position: relative; width: 300px !important; height: 300px; -webkit-transition: transform 0.3s ease-in-out, z-index 0.3s ease-in-out; -webkit-transition: z-index 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: z-index 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, z-index 0.3s ease-in-out; transition: transform 0.3s ease-in-out, z-index 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25); cursor: pointer; } .spot .spot_inner_swiper .swiper-slide:active { -webkit-transition: none; transition: none; } .spot .spot_inner_swiper .swiper-slide.slide_comming:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.2); } .spot .spot_inner_swiper .swiper-slide .img_box { overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .spot .spot_inner_swiper .swiper-slide .img_box img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.3s; transition: all 0.3s; } .spot .spot_inner_swiper .swiper-slide .slide_desc_box { position: absolute; bottom: 7px; left: 10px; right: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .spot .spot_inner_swiper .swiper-slide .slide_desc_box .number { font-family: "NanumHuman-B"; font-size: 12px; line-height: 16px; } .spot .spot_inner_swiper .swiper-slide .slide_desc_box .slide_desc_title { margin-left: 14px; font-weight: 800; font-size: 10px; line-height: 13px; } .spot .spot_inner_swiper .swiper-slide .slide_desc_box .slide_desc_title .br { display: none; } .spot .spot_inner_swiper .swiper-slide-duplicate-active { -webkit-animation: none; animation: none; } .spot .spot_inner_swiper .swiper-slide-active { -webkit-animation: none; animation: none; display: block; z-index: 10; -webkit-transition: none; transition: none; } .spot .spot_inner_swiper .swiper-slide-active:hover .slide_desc_title { text-decoration: underline; text-underline-offset: 10px; } .spot .spot_inner_swiper .swiper-slide-active:hover .img_box img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .spot .spot_inner_swiper .swiper-slide-active .slide_desc_box { top: 16px; left: 16px; bottom: auto; display: block; } .spot .spot_inner_swiper .swiper-slide-active .slide_desc_box .number { display: block; font-size: 24px; line-height: 24px; color: #fff; } .spot .spot_inner_swiper .swiper-slide-active .slide_desc_box .slide_desc_title { margin: 10px 0 0 0; display: block; font-weight: 900; font-size: 28px; line-height: 36px; letter-spacing: -0.03em; color: #fff; text-align: left; } .spot .spot_inner_swiper .swiper-slide-active .slide_desc_box .slide_desc_title .br { display: block; } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide { display: block; -webkit-transform: translateY(30px) translateX(16px); -ms-transform: translateY(30px) translateX(16px); transform: translateY(30px) translateX(16px); } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide + .swiper-slide { display: block; -webkit-transform: translateY(60px) translateX(32px); -ms-transform: translateY(60px) translateX(32px); transform: translateY(60px) translateX(32px); } .spot .spot_inner_swiper .swiper-slide-next { z-index: 2; } .slide_behind.swiper-container, .slide_recode.swiper-container, [class*=slide_curation].swiper-container { overflow: visible; } .slide_behind .hover_text_box, .slide_recode .hover_text_box, [class*=slide_curation] .hover_text_box { position: absolute; bottom: 12px; left: 16px; right: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-transition: all 0.3s; transition: all 0.3s; z-index: 10; opacity: 0; } .slide_behind .hover_text_box .date, .slide_recode .hover_text_box .date, [class*=slide_curation] .hover_text_box .date { overflow: hidden; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); font-family: "NanumHuman-R"; font-size: 14px; line-height: 22px; letter-spacing: -0.02em; color: #fff; } .slide_behind .hover_text_box .detail_text, .slide_recode .hover_text_box .detail_text, [class*=slide_curation] .hover_text_box .detail_text { overflow: hidden; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); font-family: "NanumHuman-R"; font-size: 14px; line-height: 22px; letter-spacing: -0.02em; color: #fff; } .slide_behind .swiper-slide, .slide_recode .swiper-slide, [class*=slide_curation] .swiper-slide { width: 300px; } .slide_behind .swiper-slide.active:nth-of-type(1), .slide_recode .swiper-slide.active:nth-of-type(1), [class*=slide_curation] .swiper-slide.active:nth-of-type(1) { -webkit-animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; -webkit-animation-delay: 0s; animation-delay: 0s; } .slide_behind .swiper-slide.active:nth-of-type(2), .slide_recode .swiper-slide.active:nth-of-type(2), [class*=slide_curation] .swiper-slide.active:nth-of-type(2) { -webkit-animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .slide_behind .swiper-slide.active:nth-of-type(3), .slide_recode .swiper-slide.active:nth-of-type(3), [class*=slide_curation] .swiper-slide.active:nth-of-type(3) { -webkit-animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .slide_behind .swiper-slide.active:nth-of-type(4), .slide_recode .swiper-slide.active:nth-of-type(4), [class*=slide_curation] .swiper-slide.active:nth-of-type(4) { -webkit-animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .slide_behind .swiper-slide.active:nth-of-type(5), .slide_recode .swiper-slide.active:nth-of-type(5), [class*=slide_curation] .swiper-slide.active:nth-of-type(5) { -webkit-animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .slide_behind .swiper-slide.active:nth-of-type(6), .slide_recode .swiper-slide.active:nth-of-type(6), [class*=slide_curation] .swiper-slide.active:nth-of-type(6) { -webkit-animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .slide_behind .swiper-slide.active:nth-of-type(7), .slide_recode .swiper-slide.active:nth-of-type(7), [class*=slide_curation] .swiper-slide.active:nth-of-type(7) { -webkit-animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } .slide_behind .swiper-slide.active:nth-of-type(8), .slide_recode .swiper-slide.active:nth-of-type(8), [class*=slide_curation] .swiper-slide.active:nth-of-type(8) { -webkit-animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; -webkit-animation-delay: 2.1s; animation-delay: 2.1s; } .slide_behind .swiper-slide.active:nth-of-type(9), .slide_recode .swiper-slide.active:nth-of-type(9), [class*=slide_curation] .swiper-slide.active:nth-of-type(9) { -webkit-animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; -webkit-animation-delay: 2.4s; animation-delay: 2.4s; } .slide_behind .swiper-slide.active:nth-of-type(10), .slide_recode .swiper-slide.active:nth-of-type(10), [class*=slide_curation] .swiper-slide.active:nth-of-type(10) { -webkit-animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; animation: opacity 0.4s cubic-bezier(0, 0, 0.5, 1) forwards; -webkit-animation-delay: 2.7s; animation-delay: 2.7s; } .slide_behind .swiper-slide .swiper_link:hover .img_area:after, .slide_recode .swiper-slide .swiper_link:hover .img_area:after, [class*=slide_curation] .swiper-slide .swiper_link:hover .img_area:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); } .slide_behind .swiper-slide .swiper_link:hover .date, .slide_recode .swiper-slide .swiper_link:hover .date, [class*=slide_curation] .swiper-slide .swiper_link:hover .date { width: auto; height: auto; clip: auto; -webkit-clip-path: none; clip-path: none; } .slide_behind .swiper-slide .swiper_link:hover .detail_text, .slide_recode .swiper-slide .swiper_link:hover .detail_text, [class*=slide_curation] .swiper-slide .swiper_link:hover .detail_text { width: auto; height: auto; clip: auto; -webkit-clip-path: none; clip-path: none; } .slide_behind .swiper-slide .swiper_link:hover .hover_text_box, .slide_recode .swiper-slide .swiper_link:hover .hover_text_box, [class*=slide_curation] .swiper-slide .swiper_link:hover .hover_text_box { opacity: 1; } .slide_behind .swiper-slide .swiper_link:hover .text_area .item_title, .slide_recode .swiper-slide .swiper_link:hover .text_area .item_title, [class*=slide_curation] .swiper-slide .swiper_link:hover .text_area .item_title { color: rgb(255, 70, 0); text-decoration: underline; text-underline-offset: 5px; -webkit-transition: color 0.2s; transition: color 0.2s; } .slide_behind .img_area, .slide_recode .img_area, [class*=slide_curation] .img_area { position: relative; width: 100%; height: auto; padding-top: 100%; } .slide_behind .thumb_img, .slide_recode .thumb_img, [class*=slide_curation] .thumb_img { overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .slide_behind .thumb_img img, .slide_recode .thumb_img img, [class*=slide_curation] .thumb_img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .slide_behind .text_area, .slide_recode .text_area, [class*=slide_curation] .text_area { padding-top: 20px; } .slide_behind .text_area .item_title, .slide_recode .text_area .item_title, [class*=slide_curation] .text_area .item_title { font-size: 24px; line-height: 36px; } .slide_behind .text_area .item_title .accent, .slide_recode .text_area .item_title .accent, [class*=slide_curation] .text_area .item_title .accent { font-weight: 700; } .slide_behind .text_area .item_title_desc, .slide_recode .text_area .item_title_desc, [class*=slide_curation] .text_area .item_title_desc { margin-top: 12px; display: block; font-family: "NanumHuman-R"; font-size: 18px; line-height: 29px; letter-spacing: -0.02em; color: #111; } .section_recode .section_title, .section_behind .section_title { position: relative; display: inline-block; vertical-align: top; } .section_recode .section_title.active .highlight, .section_behind .section_title.active .highlight { position: relative; } .section_recode .section_title.active .highlight:after, .section_behind .section_title.active .highlight:after { -webkit-animation: underline 1s linear forwards; animation: underline 1s linear forwards; content: ""; position: absolute; bottom: -20px; left: 9px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/underline.png) no-repeat; background-size: 190px 20px; width: 190px; height: 20px; } .section_recode .swiper-navigation, .section_behind .swiper-navigation { display: none; } .section_recode .swiper-button-prev, .section_recode .swiper-button-next, .section_behind .swiper-button-prev, .section_behind .swiper-button-next { border-radius: 50%; } .section_recode .swiper-button-prev.swiper-button-disabled, .section_recode .swiper-button-next.swiper-button-disabled, .section_behind .swiper-button-prev.swiper-button-disabled, .section_behind .swiper-button-next.swiper-button-disabled { display: block; opacity: 0.5; } .section_recode .swiper-button-prev::after, .section_recode .swiper-button-next::after, .section_behind .swiper-button-prev::after, .section_behind .swiper-button-next::after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .section_recode .swiper-button-prev, .section_behind .swiper-button-prev { left: 0; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .section_recode .swiper-button-next, .section_behind .swiper-button-next { right: 0; } .section_recode .inner, .section_behind .inner { margin: 0 auto; padding: 0 20px; } .section_recode .slide_box, .section_behind .slide_box { position: relative; margin-top: 50px; } .section_recode .swiper-container.active, .section_behind .swiper-container.active { -webkit-animation: left_swiper 0.5s cubic-bezier(0, 0, 0.5, 1) forwards; animation: left_swiper 0.5s cubic-bezier(0, 0, 0.5, 1) forwards; } .section_recode .section_title, .section_behind .section_title { -webkit-transform: translateY(103%); -ms-transform: translateY(103%); transform: translateY(103%); font-weight: 900; font-size: 32px; line-height: 42px; letter-spacing: -0.03em; } .section_recode .section_title.active, .section_behind .section_title.active { -webkit-animation: up_swiper 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; animation: up_swiper 0.8s cubic-bezier(0, 0, 0.5, 1) forwards; } .section_recode .section_title .highlight, .section_behind .section_title .highlight { color: #FF4600; } .section_recode { overflow: hidden; padding: 100px 0 140px; } .section_banner { overflow: hidden; } .section_banner .banner_link { display: block; } .section_banner .banner_img_box { overflow: hidden; background-color: #fff; } .section_banner .banner_img .bg { width: 100%; margin: 0 auto; height: 240px; } .section_banner .banner_img img { width: 100%; } .section_banner .banner_slide { position: relative; } .section_banner .swiper-pagination { position: absolute; bottom: 20px; right: 50%; width: 100% !important; margin: 0; } .section_banner .swiper-pagination-bullet { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); } .section_banner .swiper-pagination-bullet-active { color: #fff; background: #fff; } .section_banner .swiper-navigation { display: none; } .section_banner .swiper-pagination { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; visibility: hidden; opacity: 0; } .section_banner .swiper-navigation { z-index: 2000; } .section_banner .swiper-button-prev, .section_banner .swiper-button-next { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; visibility: hidden; opacity: 0; border-radius: 50%; } .section_banner .swiper-button-prev.swiper-button-disabled, .section_banner .swiper-button-next.swiper-button-disabled { display: block; opacity: 1; } .section_banner .swiper-button-prev:after, .section_banner .swiper-button-next:after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .section_banner .swiper-button-prev { left: 30px; -webkit-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .section_banner .swiper-button-next { right: 30px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .section_behind { overflow: hidden; padding: 140px 0 70px; } .section_story .inner { padding: 70px 20px; } .section_story .section_title { font-weight: 900; font-size: 32px; line-height: 42px; letter-spacing: -0.03em; } .section_story .section_title .highlight { color: #FF4600; } .section_story .story_list { margin-top: 50px; display: -ms-grid; display: grid; gap: 40px 0; -ms-grid-columns: 1fr; grid-template-columns: 1fr; -ms-grid-rows: auto; grid-template-rows: auto; } .section_story .story_list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .section_story .story_list .story_item .story_link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .section_story .story_list .story_item .story_link:hover img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .section_story .story_list .story_item .story_link:hover .number { background-color: #FF4600; } .section_story .story_list .story_item .story_link:hover .story_title { color: #FF4600; text-decoration: underline; text-underline-offset: 6px; } .section_story .thumb_img { overflow: hidden; margin-right: 24px; width: 100px; height: 100px; } .section_story .thumb_img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.3s; transition: all 0.3s; } .section_story .story_text_box { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .section_story .story_text_box .number { width: 22px; height: 22px; border-radius: 50%; text-align: center; background-color: #000; -webkit-transition: all 0.3s; transition: all 0.3s; } .section_story .story_text_box .number .number_text { font-family: "NanumHuman-EB"; font-size: 13px; line-height: 22px; color: #fff; } .section_story .story_text_box .story_title { margin-top: 8px; font-size: 18px; line-height: 27px; letter-spacing: -0.04em; color: #111; -webkit-transition: color 0.2s; transition: color 0.2s; } .section_story .story_text_box .story_title .accent { font-weight: 800; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .section_story .story_text_box .story_title_desc { font-family: "NanumHuman-R"; margin-top: 8px; display: block; font-size: 14px; line-height: 22px; letter-spacing: -0.04em; color: #111; } .section_author { padding: 70px 0 140px; } .section_author .section_title { padding: 0 20px; font-weight: 900; font-size: 32px; line-height: 42px; letter-spacing: -0.03em; } .section_author .section_title .highlight { color: #FF4600; } .section_author .inner { padding: 0; } .section_author .author_list { margin-top: 50px; } .section_author .author_item:hover { border-top: 0; } .section_author .author_item:hover:before { display: none; } .section_author .author_item:hover:after { display: none; } .section_author .author_item:nth-child(4n+0) .author_link:hover { background-color: #0D74F7; } .section_author .author_item:nth-child(4n+0) .author_link:hover .name_text, .section_author .author_item:nth-child(4n+0) .author_link:hover .job_text, .section_author .author_item:nth-child(4n+0) .author_link:hover .desc_text { color: #fff; } .section_author .author_item:hover { border-top: 0; } .section_author .author_item:hover:before { display: none; } .section_author .author_item:hover:after { display: none; } .section_author .author_item:nth-child(4n+1) .author_link:hover { background-color: #F35725; } .section_author .author_item:nth-child(4n+1) .author_link:hover .name_text, .section_author .author_item:nth-child(4n+1) .author_link:hover .job_text, .section_author .author_item:nth-child(4n+1) .author_link:hover .desc_text { color: #fff; } .section_author .author_item:hover { border-top: 0; } .section_author .author_item:hover:before { display: none; } .section_author .author_item:hover:after { display: none; } .section_author .author_item:nth-child(4n+2) .author_link:hover { background-color: #7B58F6; } .section_author .author_item:nth-child(4n+2) .author_link:hover .name_text, .section_author .author_item:nth-child(4n+2) .author_link:hover .job_text, .section_author .author_item:nth-child(4n+2) .author_link:hover .desc_text { color: #fff; } .section_author .author_item:hover { border-top: 0; } .section_author .author_item:hover:before { display: none; } .section_author .author_item:hover:after { display: none; } .section_author .author_item:nth-child(4n+3) .author_link:hover { background-color: #B6FA4D; } .section_author .author_item:nth-child(4n+3) .author_link:hover .name_text, .section_author .author_item:nth-child(4n+3) .author_link:hover .job_text, .section_author .author_item:nth-child(4n+3) .author_link:hover .desc_text { color: #000; } .section_author .author_name_box { width: 110px; } .section_author .author_job_box { margin-left: 37px; } .section_author .author_job_desc { display: none; } .section_author .author_link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 16px 20px; } .section_author .author_item { position: relative; } .section_author .author_item:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background-color: #e6e6e6; } .section_author .author_item:last-child:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: #e6e6e6; } .section_author .name_text { font-family: "NanumHuman-R"; font-size: 14px; line-height: 18px; color: #111; } .section_author .job_text { font-family: "NanumHuman-R"; font-size: 14px; line-height: 18px; color: #999; } .section_author .desc_text { font-family: "NanumHuman-R"; font-size: 14px; line-height: 18px; color: #999; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .section_author .author_more_btn { position: relative; display: block; margin: 40px auto 0; padding: 0 45px 0 20px; border-radius: 100px; background-color: #eaeaea; line-height: 40px; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; } .section_author .author_more_btn:after { content: ""; position: absolute; top: 8px; right: 18px; width: 24px; height: 24px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/ico_more_btn.png) no-repeat; background-size: 24px 24px; -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); } .section_author .author_more_btn:hover { -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.5, 1); transition: all 0.2s cubic-bezier(0, 0, 0.5, 1); color: #fff; background-color: #FF4600; } .section_author .author_more_btn:hover:after { right: 14px; width: 24px; height: 24px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/ico_more_btn_white.png) no-repeat; background-size: 24px 24px; -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); } .section_footer { position: sticky; position: -webkit-sticky; left: 0; right: 0; bottom: 0; z-index: 1; background-color: #DCDCDC; } .section_footer .inner { position: relative; padding: 40px 20px 38px; -webkit-box-sizing: border-box; box-sizing: border-box; } .section_footer .footer_menu_list .menu_item { margin-top: 7px; } .section_footer .footer_menu_list .menu_item:first-child { margin-top: 0; } .section_footer .footer_menu_list .item_link { font-family: "NanumHuman-B"; font-size: 16px; line-height: 20px; color: #111; } .section_footer .footer_service { margin-top: 60px; } .section_footer .footer_service .menu_item { margin-top: 10px; } .section_footer .footer_service .menu_item:first-child { margin-top: 0; } .section_footer .footer_service .item_link { font-weight: 500; font-size: 14px; line-height: 18px; color: #111; } .section_footer .copyright { display: block; margin-top: 60px; font-family: "NanumHuman-B"; font-size: 16px; line-height: 21px; color: #111; } .section_footer .footer_logo { margin-top: 140px; } .section_footer .footer_logo .footer_logo_link { display: block; width: 280px; height: 40px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/footer_logo.png) no-repeat; background-size: 280px 40px; } .btn_top { display: none; position: fixed; bottom: 100px; right: 20px; width: 50px; height: 50px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#btn_top); background-repeat: no-repeat; background-position: -65px 0px; background-size: 214px auto; z-index: 100; } @-webkit-keyframes countingBar { 0% { width: 0; } 100% { width: 100%; } } @keyframes countingBar { 0% { width: 0; } 100% { width: 100%; } } @-webkit-keyframes lastSwiper { 0% { -webkitg-transform: translateY(60px) translateX(32px); -webkit-transform: translateY(60px) translateX(32px); transform: translateY(60px) translateX(32px); } 100% { -webkit-transform: translateY(0) translateX(0); transform: translateY(0) translateX(0); } } @keyframes lastSwiper { 0% { -webkitg-transform: translateY(60px) translateX(32px); -webkit-transform: translateY(60px) translateX(32px); transform: translateY(60px) translateX(32px); } 100% { -webkit-transform: translateY(0) translateX(0); transform: translateY(0) translateX(0); } } .spot .spot_content { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } @-webkit-keyframes ani_opacity { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes ani_opacity { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes up_text { 0% { -webkit-transform: translateY(103%); transform: translateY(103%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes up_text { 0% { -webkit-transform: translateY(103%); transform: translateY(103%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes down_text { 0% { -webkit-transform: translateY(-103%); transform: translateY(-103%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes down_text { 0% { -webkit-transform: translateY(-103%); transform: translateY(-103%); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes up_swiper { 0% { opacity: 0; -webkit-transform: translateY(103%); transform: translateY(103%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes up_swiper { 0% { opacity: 0; -webkit-transform: translateY(103%); transform: translateY(103%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes up_navigation { 0% { opacity: 0; top: calc(50% + 30px); } 100% { opacity: 1; top: 50%; } } @keyframes up_navigation { 0% { opacity: 0; top: calc(50% + 30px); } 100% { opacity: 1; top: 50%; } } @-webkit-keyframes up_pagination { 0% { opacity: 0; -webkit-transform: translateY(103%); transform: translateY(103%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes up_pagination { 0% { opacity: 0; -webkit-transform: translateY(103%); transform: translateY(103%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes left_swiper { 0% { opacity: 0; -webkit-transform: translateX(50%); transform: translateX(50%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes left_swiper { 0% { opacity: 0; -webkit-transform: translateX(50%); transform: translateX(50%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes underline { 0% { width: 0; } 100% { width: 100%; } } @keyframes underline { 0% { width: 0; } 100% { width: 100%; } } .ani { opacity: 0; } .ani.active { -webkit-animation: ani_opacity 0.4s 0.2s ease-in-out; animation: ani_opacity 0.4s 0.2s ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .container { position: relative; background-color: #fff; z-index: 10; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .sub_content .inner { padding: 0 20px; } .sub_page { background-color: #000; } .sub_page .container { background-color: #000; } .sub_page .header { background-color: #000; } .sub_page .header .logo { width: 127px; height: 25px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/logo_black.gif) no-repeat; background-size: 127px 25px; } .sub_page .header .header_menu_link { color: #fff; } .sub_page .header .header_menu_link:hover { color: #999; } .sub_page .header .btn_search { width: 22px; height: 22px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_search_w); background-repeat: no-repeat; background-position: -135px -155px; background-size: 214px auto; } .sub_page .header .btn_search.active { width: 22px; height: 22px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/ico_close_search.png) no-repeat; background-size: 22px 22px; } .sub_page .header .btn_gnb { width: 22px; height: 22px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_gnb_w); background-repeat: no-repeat; background-position: -54px -155px; background-size: 214px auto; } .sub_page .header .gnb_link { color: #fff; } .sub_page .header + .gnb_wrap .gnb { background-color: #000; } .sub_page .header + .gnb_wrap .gnb .logo { width: 127px; height: 25px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/logo_black.gif) no-repeat; background-size: 127px 25px; } .sub_page .header + .gnb_wrap .gnb .logo a { display: block; height: 100%; } .sub_page .header + .gnb_wrap .gnb .gnb_item { color: #fff; } .sub_page .header + .gnb_wrap .gnb .btn_close { width: 24px; height: 24px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_close_w); background-repeat: no-repeat; background-position: -135px -110px; background-size: 214px auto; } .sub_page .header + .gnb_wrap .gnb .gnb_footer_text { color: #fff; } .section_sub_title { padding-top: 49px; } .sub_title_box { overflow: hidden; position: sticky; top: 49px; } .sub_title_box .mo_show { display: block; } .sub_title_box .pc_show { display: none; } .sub_title_content { position: relative; z-index: 10; background-color: #fff; } .title_img { overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .sub_title_img { position: relative; width: 100%; height: 100%; padding-top: 100%; } .sub_title_img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; } .sub_title { padding-top: 60px; font-size: 32px; line-height: 45px; letter-spacing: -0.04em; font-weight: 900; color: #111; } .sub_title_desc { margin-top: 16px; font-family: "NanumHuman-R"; font-size: 18px; line-height: 29px; letter-spacing: -0.02em; color: #111; } .sub_date { display: block; margin-top: 34px; font-family: "NanumHuman-B"; font-size: 16px; line-height: 16px; color: #999; } .sub_info_wrap { margin-top: 70px; padding-top: 30px; border-top: 1px solid #ebebeb; } .sub_info_wrap .label_list { margin-top: 36px; } .sub_info .info_box { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .sub_info .info_box + .info_box { margin-top: 34px; } .sub_info .info_title { font-weight: 800; font-size: 16px; line-height: 18px; color: #999; } .sub_info .info_text { margin-top: 10px; font-weight: 700; font-size: 14px; line-height: 14px; color: #111; } .info_text_box .sub_text { font-weight: 700; font-size: 14px; line-height: 14px; color: #111; } .info_text_box .sub_text + .sub_text { margin-top: 28px; } .info_text_box .label_list { margin-top: 18px; } .info_text_box { margin-top: 90px; } .info_text_box .sub_text { font-family: "NanumHuman-R"; font-size: 16px; line-height: 29px; letter-spacing: -0.02em; color: #111; } .content_text_wrap { padding-bottom: 80px; } .content_text_box { background-color: #fff; padding-top: 100px; } .content_text_box + .content_text_box { padding-top: 120px; } .content_text_box .text_box_title { display: block; font-size: 20px; line-height: 34px; letter-spacing: -0.02em; font-weight: 800; } .content_text_box .sub_text_question { margin-top: 40px; font-size: 16px; line-height: 27px; letter-spacing: -0.02em; font-weight: 800; } .content_text_box .sub_text { margin-top: 16px; font-family: "NanumHuman-R"; font-size: 16px; line-height: 29px; letter-spacing: -0.02em; color: #111; } .content_text_box .sub_text + .sub_text { margin-top: 30px; } .content_text_box .sub_text + .sub_text_question { margin-top: 50px; } .content_text_box .img_box_wrap { margin-top: 40px; } .content_text_box .img_box_wrap + .sub_text { margin-top: 60px; } .content_text_box .img_box_wrap + .sub_text_question { margin-top: 60px; } .content_text_box .img_box img { width: 100%; vertical-align: top; } .content_text_box .img_text { margin-top: 12px; text-align: center; font-family: "NanumHuman-R"; font-size: 12px; line-height: 19px; color: #111; } .content_dsec_box { padding: 80px 0 27px; border-top: 1px solid #ebebeb; } .content_dsec_box .desc_title { font-weight: 800; font-size: 16px; line-height: 18px; letter-spacing: -0.02em; color: #999; } .tag_list { margin-top: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 6px 8px; } .tag_list .tag_link { padding: 6px 12px; border: 1px solid #111; border-radius: 50px; display: block; font-size: 14px; line-height: 18px; font-weight: 800; } .tag_list .tag_link:hover { color: #fff; background-color: #111; } .content_info_box { padding-top: 27px; } .content_info_box + .content_info_box { padding-top: 34px; } .content_info_box .info_title { font-weight: 800; font-size: 16px; line-height: 18px; letter-spacing: -0.02em; color: #999; } .content_info_box .info_box { margin-top: 16px; } .content_info_box .info_box.default_type { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .content_info_box .info_link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .content_info_box .info_link:hover .name_box { position: relative; } .content_info_box .info_link:hover .name_box:after { content: ""; position: absolute; bottom: -5px; left: -1px; right: -1px; height: 1.5px; background-color: #ff4600; width: 100%; -webkit-transition: width 0.2s cubic-bezier(0, 0, 0.5, 1); transition: width 0.2s cubic-bezier(0, 0, 0.5, 1); } .content_info_box .thumb_img { margin-right: 24px; position: relative; width: 80px; height: 80px; border-radius: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .content_info_box .thumb_img .icon_author { width: 60px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .content_info_box .icon { display: block; } .content_info_box .icon.quote-1 { width: 80px; height: 80px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#icon_quote_1); background-repeat: no-repeat; background-position: -85px 0px; background-size: 305px auto; } .content_info_box .icon.quote-2 { width: 80px; height: 80px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#icon_quote_2); background-repeat: no-repeat; background-position: 0px -85px; background-size: 305px auto; } .content_info_box .icon.quote-3 { width: 80px; height: 80px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#icon_quote_3); background-repeat: no-repeat; background-position: -85px -85px; background-size: 305px auto; } .content_info_box .icon.quote-4 { width: 80px; height: 80px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#icon_quote_4); background-repeat: no-repeat; background-position: -170px 0px; background-size: 305px auto; } .content_info_box .icon.golddol { width: 80px; height: 80px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#icon_golddol); background-repeat: no-repeat; background-position: 0px 0px; background-size: 305px auto; } .content_info_box .info_list .info_box + .info_box { margin-top: 20px; } .content_info_box .detail_text_box .name_box { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: self-end; -ms-flex-align: self-end; align-items: self-end; } .content_info_box .detail_text_box .name_box:after { content: ""; position: absolute; bottom: -5px; left: -1px; right: -1px; height: 1.5px; background-color: #ff4600; width: 0; -webkit-transition: width 0.2s cubic-bezier(0, 0, 0.5, 1); transition: width 0.2s cubic-bezier(0, 0, 0.5, 1); } .content_info_box .detail_text_box .name_box .name { font-size: 18px; line-height: 21px; letter-spacing: -0.02em; font-weight: 800; } .content_info_box .detail_text_box .name_box .job { margin-left: 7px; display: inline-block; vertical-align: top; font-size: 16px; line-height: 19px; letter-spacing: -0.02em; color: #444; } .content_info_box .detail_text_box .desc_text { font-family: "NanumHuman-L"; margin-top: 8px; font-size: 16px; line-height: 23px; color: #000; letter-spacing: -0.02em; } .content_story { padding-top: 95px; } .content_story .story_title { font-weight: 900; font-size: 20px; line-height: 30px; letter-spacing: -0.02em; color: #333; } .content_story .story_list { padding: 34px 0 144px; } .content_story .story_list .story_link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .content_story .story_list .story_link:hover img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .content_story .story_list .story_link:hover .story_title { color: #FF4600; text-decoration: underline; text-underline-offset: 6px; } .content_story .story_list .story_item + .story_item { margin-top: 45px; } .content_story .story_list .thumb_img { margin-right: 24px; overflow: hidden; width: 80px; height: 80px; } .content_story .story_list .thumb_img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.3s; transition: all 0.3s; } .content_story .story_list .story_text_box { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .content_story .story_list .story_text_box .story_title { font-size: 18px; line-height: 27px; letter-spacing: -0.02em; color: #333; -webkit-transition: color 0.2s; transition: color 0.2s; } .content_story .story_list .story_text_box .story_title .accent { font-weight: 800; } .content_story .story_list .story_text_box .story_title_desc { font-family: "NanumHuman-R"; font-size: 14px; line-height: 22px; letter-spacing: -0.02em; color: #333; } .header_progress { position: absolute; top: 0; left: 0; right: 0; height: 5px; background-color: #000; } .header_progress .progress_bar { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 5px; width: 0%; } .side_nav_box { position: fixed; bottom: 30px; right: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .side_nav_box .toggle_side_btn { position: relative; padding: 6px; -webkit-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25); background-color: #fff; width: 52px; height: 52px; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 100; } .side_nav_box .toggle_side_btn .icon { display: block; width: 40px; height: 40px; } .side_nav_box .toggle_side_btn .icon.icon_dot { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/mo_icon_dot.png) no-repeat; background-size: 40px 40px; } .side_nav_box .toggle_side_btn .icon.icon_close { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/mo_icon_close.png) no-repeat; background-size: 40px 40px; } .side_nav { opacity: 0; width: 0; margin-right: 10px; padding: 6px 13px 6px 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25); border-radius: 99px; background-color: #fff; -webkit-transform: translate(40px, 0px); -ms-transform: translate(40px, 0px); transform: translate(40px, 0px); } .side_nav .side_item_box { position: relative; height: 40px; } .side_nav .side_item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 0%; height: 40px; opacity: 0; } .side_nav .side_item + .side_item { margin-left: 6px; } .side_nav .side_item:has(.icon_like) { width: auto; } .side_nav .side_item .count { font-family: "NanumHuman-B"; font-size: 15px; line-height: 18px; } .side_nav .side_item .count.active { color: #ff4600; } .side_nav .side_text { display: none; } .side_nav .side_btn.active .icon.icon_copy { -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/mo_icon_copy_active.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn.active .icon.icon_like { -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/mo_icon_like_active.png) no-repeat; background-size: 20px 20px; } .side_nav .side_btn.active + .side_text { padding: 6px 10px; display: block; position: absolute; top: -36px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; background-color: #ff4600; border-radius: 20px; font-size: 12px; line-height: 12px; font-weight: 800; color: #fff; -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); } .side_nav .side_btn.active:has(.icon_like) + .side_text { display: none; } .side_nav .side_btn:active { border-radius: 50%; background-color: #EBEBEB; } .side_nav .side_btn:active:has(.icon_like, .icon_copy) { background: none; border-radius: 0; } .side_nav .side_btn .icon { display: block; width: 40px; height: 40px; } .side_nav .side_btn .icon.icon_next { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_next.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn .icon.icon_prev { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_prev.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn .icon.icon_share { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_share.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn .icon.icon_copy { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_copy.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn .icon.icon_like { width: 20px; height: 20px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/mo_icon_like.png) no-repeat; background-size: 20px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; } .side_nav .side_btn:has(.icon_like) { padding: 10px 3px 10px 10px; } /* 모바일 Quick Menu 기본값 */ .quick_menu_box { position: fixed; bottom: 30px; right: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; z-index: 100; } .quick_menu_box .toggle_quick_btn { position: relative; padding: 6px; -webkit-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25); background-color: #fff; width: 52px; height: 52px; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 100; } .quick_menu_box .toggle_quick_btn .icon { display: block; width: 40px; height: 40px; } .quick_menu_box .toggle_quick_btn .icon.icon_dot { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/mo_icon_dot.png) no-repeat; background-size: 40px 40px; } .quick_menu_box .toggle_quick_btn .icon.icon_close { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/mo_icon_close.png) no-repeat; background-size: 40px 40px; } .quick_menu { opacity: 0; width: 0; margin-right: 10px; padding: 6px 13px 6px 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25); border-radius: 99px; background-color: #fff; -webkit-transform: translate(40px, 0px); -ms-transform: translate(40px, 0px); transform: translate(40px, 0px); } .quick_menu .quick_menu_item_box { position: relative; height: 40px; } .quick_menu .quick_menu_item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 0%; height: 40px; opacity: 0; } .quick_menu .quick_menu_item + .quick_menu_item { margin-left: 6px; } .quick_menu .quick_menu_item:has(.icon_like) { width: auto; } .quick_menu .quick_menu_item .count { font-family: "NanumHuman-B"; font-size: 15px; line-height: 18px; } .quick_menu .quick_menu_item .count.active { color: #ff4600; } .quick_menu .quick_menu_text { display: none; } .quick_menu .quick_menu_btn.active .icon.icon_copy { -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/mo_icon_copy_active.png) no-repeat; background-size: 40px 40px; } .quick_menu .quick_menu_btn.active .icon.icon_like { -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/mo_icon_like_active.png) no-repeat; background-size: 20px 20px; } .quick_menu .quick_menu_btn.active + .quick_menu_text { padding: 6px 10px; display: block; position: absolute; top: -36px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; background-color: #ff4600; border-radius: 20px; font-size: 12px; line-height: 12px; font-weight: 800; color: #fff; -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); } .quick_menu .quick_menu_btn.active:has(.icon_like) + .quick_menu_text { display: none; } .quick_menu .quick_menu_btn:active { border-radius: 50%; background-color: #EBEBEB; } .quick_menu .quick_menu_btn:active:has(.icon_like, .icon_copy) { background: none; border-radius: 0; } .quick_menu .quick_menu_btn .icon { display: block; width: 40px; height: 40px; } .quick_menu .quick_menu_btn .icon.icon_next { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_next.png) no-repeat; background-size: 40px 40px; } .quick_menu .quick_menu_btn .icon.icon_prev { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_prev.png) no-repeat; background-size: 40px 40px; } .quick_menu .quick_menu_btn .icon.icon_share { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_share.png) no-repeat; background-size: 40px 40px; } .quick_menu .quick_menu_btn .icon.icon_copy { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_copy.png) no-repeat; background-size: 40px 40px; } .quick_menu .quick_menu_btn .icon.icon_like { width: 20px; height: 20px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/mo_icon_like.png) no-repeat; background-size: 20px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; } .quick_menu .quick_menu_btn:has(.icon_like) { padding: 10px 3px 10px 10px; } /* 모바일 Quick Menu */ .content_text_wrap .se-viewer .se-component-content { max-width: 100% !important; padding-right: 0 !important; padding-left: 0 !important; margin: 0 !important; } .content_text_wrap .se-viewer .se-component-content.se-component-content-fit { max-width: 100% !important; padding-right: 0 !important; padding-left: 0 !important; margin: 0 !important; } .page_title_wrap { padding-top: 49px; } .page_title_box .page_title { font-weight: 700; font-size: 20px; line-height: 32px; letter-spacing: -0.03em; color: #fff; } [class*=section_curation] { overflow: hidden; padding-top: 60px; } [class*=section_curation] + [class*=section_curation] { padding-top: 100px; } [class*=section_curation] .inner { margin: 0 auto; padding: 0 20px; } [class*=section_curation] [class*=slide_curation].swiper-container { overflow: visible; } [class*=section_curation] [class*=slide_curation] .swiper-slide.active:nth-of-type(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } [class*=section_curation] [class*=slide_curation] .swiper-slide.active:nth-of-type(2) { -webkit-animation-delay: 0s; animation-delay: 0s; } [class*=section_curation] [class*=slide_curation] .swiper-slide.active:nth-of-type(3) { -webkit-animation-delay: 0s; animation-delay: 0s; } [class*=section_curation] [class*=slide_curation] .swiper-slide.active:nth-of-type(4) { -webkit-animation-delay: 0s; animation-delay: 0s; } [class*=section_curation] [class*=slide_curation] .swiper-slide.active:nth-of-type(5) { -webkit-animation-delay: 0s; animation-delay: 0s; } [class*=section_curation] [class*=slide_curation] .swiper-slide.active:nth-of-type(6) { -webkit-animation-delay: 0s; animation-delay: 0s; } [class*=section_curation] [class*=slide_curation] .swiper-slide.active:nth-of-type(7) { -webkit-animation-delay: 0s; animation-delay: 0s; } [class*=section_curation] [class*=slide_curation] .swiper-slide.active:nth-of-type(8) { -webkit-animation-delay: 0s; animation-delay: 0s; } [class*=section_curation] [class*=slide_curation] .swiper-slide.active:nth-of-type(9) { -webkit-animation-delay: 0s; animation-delay: 0s; } [class*=section_curation] [class*=slide_curation] .swiper-slide.active:nth-of-type(10) { -webkit-animation-delay: 0s; animation-delay: 0s; } [class*=section_curation] .section_title { margin-bottom: 40px; font-weight: 900; font-size: 28px; line-height: 42px; letter-spacing: -0.03em; color: #111; } [class*=section_curation] .swiper_link:hover img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } [class*=section_curation] .img_area { overflow: hidden; } [class*=section_curation] .img_area img { -webkit-transition: all 0.3s; transition: all 0.3s; } [class*=section_curation] .img_area:after { display: none; } [class*=section_curation] .swiper-button-prev, [class*=section_curation] .swiper-button-next { border-radius: 50%; } [class*=section_curation] .swiper-button-prev.swiper-button-disabled, [class*=section_curation] .swiper-button-next.swiper-button-disabled { display: block; opacity: 0.5; } [class*=section_curation] .swiper-button-prev::after, [class*=section_curation] .swiper-button-next::after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } [class*=section_curation] .swiper-button-prev { left: 0; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } [class*=section_curation] .swiper-button-next { right: 0; } [class*=section_curation] .swiper-navigation { display: none; } [class*=section_curation] .slide_box { position: relative; } [class*=section_curation]:last-of-type { padding-bottom: 80px; } .pagination_wrap { text-align: center; padding-bottom: 120px; } .pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .pagination .prev { margin-right: 5px; } .pagination .prev .link { padding: 0; } .pagination .prev .link:before { content: ""; position: relative; display: block; width: 32px; height: 32px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#pagination_arrow); background-repeat: no-repeat; background-position: -255px -135px; background-size: 305px auto; z-index: 10; } .pagination .next { margin-left: 5px; } .pagination .next .link { padding: 0; } .pagination .next .link:before { content: ""; position: relative; display: block; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); width: 32px; height: 32px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#pagination_arrow); background-repeat: no-repeat; background-position: -255px -135px; background-size: 305px auto; z-index: 10; } .pagination .pagination_list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0 5px; } .pagination .item { min-width: 32px; } .pagination .item.active { background-color: #e9e9e9; border-radius: 32px; } .pagination .item.active .link { cursor: default; } .pagination .gap { font-size: 16px; line-height: 32px; } .pagination .link { position: relative; padding: 0 6px; height: 32px; display: block; font-family: "NanumHuman-B"; font-size: 16px; line-height: 32px; z-index: 1; } .pagination .link:hover { background-color: #e9e9e9; border-radius: 32px; } .page_title_box { padding: 0 20px 26px; min-height: 146px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; } .page_title_box .page_title { font-weight: 700; font-size: 20px; line-height: 32px; letter-spacing: -0.03em; color: #fff; } .content_box { padding-top: 20px; position: relative; } .content_label_list { padding: 11px 20px 11px; position: sticky; top: 49px; overflow-y: scroll; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none; background-color: #fff; z-index: 100; } .content_label_list .content_label_item:has(.btn_label.more) { display: none; } .content_label_list::-webkit-scrollbar { display: none; } .content_label_list .content_label_item { display: inline-block; vertical-align: top; } .content_label_list .content_label_item + .content_label_item { margin-left: 3px; } .content_label_list .content_label_item .ico.fold_arrow { display: block; width: 16px; height: 16px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#icon_label_fold); background-repeat: no-repeat; background-position: -276px -207px; background-size: 305px auto; } .content_label_list .btn_label { padding: 0 12px; font-family: "NanumHuman-B"; font-size: 16px; line-height: 32px; background-color: #e9e9e9; color: #111; } .content_label_list .btn_label.active { background-color: #111; color: #fff; } .content_label_list .btn_label:hover { background-color: #c7c7c7; } .content_label_list .btn_label:hover.active { background-color: #111; color: #fff; } .content_label_list.active .btn_label.fold { padding: 4px 12px 4px; } .content_inner { margin-top: 20px; padding: 0 20px; } .section_all_content { padding-bottom: 80px; } .section_all_content .content_list { display: -ms-grid; display: grid; gap: 100px 20px; -ms-grid-columns: 1fr; grid-template-columns: 1fr; -ms-grid-rows: auto; grid-template-rows: auto; } .section_all_content .content_list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .section_all_content .content_list .content_item { width: 100%; } .section_all_content .content_list .content_link:hover img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .section_all_content .content_list .content_link:hover .date { width: auto; height: auto; clip: auto; -webkit-clip-path: none; clip-path: none; } .section_all_content .content_list .content_link:hover .detail_text { width: auto; height: auto; clip: auto; -webkit-clip-path: none; clip-path: none; } .section_all_content .content_list .content_link:hover .hover_text_box { opacity: 1; } .section_all_content .content_list .content_link:hover .text_area .item_title { color: rgb(255, 70, 0); text-decoration: underline; text-underline-offset: 5px; -webkit-transition: color 0.2s; transition: color 0.2s; } .section_all_content .img_area { overflow: hidden; position: relative; width: 100%; height: auto; padding-top: 100%; } .section_all_content .thumb_img { overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .section_all_content .thumb_img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.3s; transition: all 0.3s; } .section_all_content .text_area { padding-top: 20px; } .section_all_content .text_area .item_title { font-size: 24px; line-height: 36px; } .section_all_content .text_area .item_title .accent { font-weight: 700; } .section_all_content .text_area .item_title_desc { margin-top: 12px; display: block; font-family: "NanumHuman-R"; font-size: 18px; line-height: 29px; letter-spacing: -0.02em; color: #111; } .section_all_content .label_list { margin-top: 32px; } .section_all_content .label_list .label_link { display: block; padding: 4px 9px; font-family: "NanumHuman-B"; font-size: 13px; line-height: 17px; background-color: #E9E9E9; color: #333; } .section_all_content .label_list .label_link:hover { background-color: rgb(199, 199, 199); } .author_content { padding: 0 20px; } .author_content .author_list { padding: 80px 0 120px; display: -ms-grid; display: grid; gap: 80px 20px; -ms-grid-columns: 1fr 20px 1fr; grid-template-columns: repeat(2, 1fr); -ms-grid-rows: auto; grid-template-rows: auto; } .author_content .author_list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .author_content .author_list > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .author_content .author_item { text-align: center; } .author_content .author_item .author_link { display: block; } .author_content .author_item .thumb_img { margin: 0 auto; position: relative; width: 90px; height: 90px; background-color: #e7e7e7; border-radius: 50%; } .author_content .author_item .thumb_img img { width: 70px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .author_content .author_item .thumb_img .icon_author.white { display: none; } .author_content .author_item .thumb_img.white .icon_author { display: none; } .author_content .author_item .thumb_img.white .icon_author.white { display: block; } .author_content .author_item .author_text_box { margin-top: 14px; } .author_content .author_item .author_text_box .author_name { display: block; } .author_content .author_item .author_text_box .name { font-weight: 800; font-size: 16px; line-height: 22px; letter-spacing: -0.01em; color: #111; } .author_content .author_item .author_text_box .author_desc { margin-top: 10px; display: inline-block; vertical-align: top; font-size: 14px; line-height: 20px; font-family: "NanumHuman-L"; color: #444; } .author_detail_page .header { background-color: #fff; } .author_detail_page .header .logo { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/logo_white.gif) no-repeat; background-size: 127px 25px; } .author_detail_page .header.fixed { background-color: #000; } .author_detail_page .header.fixed .logo { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/logo_black.gif) no-repeat; background-size: 127px 25px; } .author_detail_swiper { position: relative; } .author_detail_content { overflow: hidden; padding: 99px 20px 0; } .author_detail_content .swiper-wrapper .swiper-slide { margin-right: 40px; } .author_detail_content .swiper-wrapper .swiper-slide:last-child { margin-right: 0; } .author_detail_content .swiper-navigation { position: absolute; top: 430px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 94px; height: 40px; z-index: 10; -webkit-transition: all 0.3s; transition: all 0.3s; } .author_detail_content .swiper-button-prev, .author_detail_content .swiper-button-next { border-radius: 50%; width: 40px; height: 40px; } .author_detail_content .swiper-button-prev.swiper-button-disabled, .author_detail_content .swiper-button-next.swiper-button-disabled { display: block; opacity: 0.5; } .author_detail_content .swiper-button-prev::after, .author_detail_content .swiper-button-next::after { content: ""; position: absolute; top: 0; width: 40px; height: 40px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_swiper_next); background-repeat: no-repeat; background-position: 0px -110px; background-size: 214px auto; } .author_detail_content .swiper-button-prev { bottom: 60px; left: 0; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .author_detail_content .swiper-button-next { bottom: 60px; right: 0; } .author_box { position: relative; text-align: center; } .author_box .thumb_img { display: inline-block; vertical-align: top; position: relative; width: 120px; height: 120px; background-color: #e7e7e7; border-radius: 50%; } .author_box .thumb_img img { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .author_box .detail_text_box { padding-bottom: 140px; margin-top: 12px; } .author_box .detail_text_box .author_name { display: block; } .author_box .detail_text_box .name { font-weight: 900; font-size: 22px; line-height: 31px; letter-spacing: -0.01em; color: #111; } .author_box .detail_text_box .author_desc { margin-top: 4px; display: inline-block; vertical-align: top; font-size: 16px; line-height: 22px; letter-spacing: -0.01em; color: #111; font-weight: bold; } .author_box .detail_text_box .author_detail_desc { margin-top: 24px; font-weight: 400; font-size: 16px; line-height: 25px; letter-spacing: -0.02em; color: #272424; font-family: "NanumHuman-L"; } .author_detail_list { border-top: 1px solid #EBEBEB; padding-top: 42px; padding-bottom: 120px; } .author_detail_list .author_item + .author_item { margin-top: 40px; } .author_detail_list .item_img { margin-right: 24px; overflow: hidden; width: 80px; height: 80px; } .author_detail_list .item_img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.3s; transition: all 0.3s; } .author_detail_list .item_link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .author_detail_list .item_link:hover img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .author_detail_list .item_link:hover .item_text_box .item_title { color: rgb(255, 70, 0); text-decoration: underline; text-underline-offset: 5px; -webkit-transition: color 0.2s; transition: color 0.2s; } .author_detail_list .item_text_box { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: left; } .author_detail_list .item_text_box .item_title { font-size: 18px; line-height: 27px; letter-spacing: -0.02em; color: #333; -webkit-transition: color 0.2s; transition: color 0.2s; } .author_detail_list .item_text_box .item_title .accent { font-weight: 800; } .author_detail_list .item_text_box .item_title_desc { font-family: "NanumHuman-R"; font-size: 14px; line-height: 22px; letter-spacing: -0.02em; color: #333; } .no-scroll { overflow: hidden; } .wrap.open:before { content: ""; visibility: visible; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background-color: rgba(0, 0, 0, 0.5); } .search_box { display: none; } .search_box.open { display: block; position: relative; width: 100%; background-color: #000; overflow-y: auto; z-index: 1100; } .search_input_box { position: relative; } .search_input_box input:-webkit-autofill, .search_input_box input:-webkit-autofill:hover, .search_input_box input:-webkit-autofill:focus, .search_input_box input:-webkit-autofill:active { -webkit-background-clip: text; -webkit-text-fill-color: #fff !important; -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; -webkit-box-shadow: inset 0 0 80px 80px #222 !important; box-shadow: inset 0 0 80px 80px #222 !important; } .search_inner { padding: 45px 20px 0; } .search_inner .input_search { width: 100%; padding: 17px 52px 17px; background-color: #222; -webkit-box-sizing: border-box; box-sizing: border-box; border: 0; font-weight: 500; font-size: 16px; line-height: 18px; letter-spacing: -0.03em; color: #fff; } .search_inner .input_search input::-webkit-input-placeholder, .search_inner .input_search textarea::-webkit-input-placeholder { color: #999999; opacity: 1; } .search_inner .input_search input::-moz-placeholder, .search_inner .input_search textarea::-moz-placeholder { color: #999999; opacity: 1; } .search_inner .input_search input:-ms-input-placeholder, .search_inner .input_search textarea:-ms-input-placeholder { color: #999999; opacity: 1; } .search_inner .input_search input::-ms-input-placeholder, .search_inner .input_search textarea::-ms-input-placeholder { color: #999999; opacity: 1; } .search_inner .input_search input::placeholder, .search_inner .input_search textarea::placeholder { color: #999999; opacity: 1; } .search_inner .input_search input::-webkit-input-placeholder, .search_inner .input_search textarea::-webkit-input-placeholder { color: #999999; } .search_inner .input_search input::-moz-placeholder, .search_inner .input_search textarea::-moz-placeholder { color: #999999; } .search_inner .input_search input:-ms-input-placeholder, .search_inner .input_search textarea:-ms-input-placeholder { color: #999999; } .search_inner .input_search input::-ms-input-placeholder, .search_inner .input_search textarea::-ms-input-placeholder { color: #999999; } .search_inner .search_btn { padding: 14px; position: absolute; left: 0; top: 0; } .search_inner .search_btn .icon_search { display: block; width: 24px; height: 24px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#mo_icon_search); background-repeat: no-repeat; background-position: -165px -116px; background-size: 214px auto; } .search_inner .search_btn_delete { padding: 16px; position: absolute; right: 0; top: 0; } .search_inner .search_btn_delete .icon_search_delete { display: block; width: 20px; height: 20px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#mo_icon_search_delete); background-repeat: no-repeat; background-position: -162px -155px; background-size: 214px auto; } .search_inner .search_btn_delete:hover .icon_search_delete { display: block; width: 20px; height: 20px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#mo_icon_search_delete_hover); background-repeat: no-repeat; background-position: -194px 0px; background-size: 214px auto; } .search_inner .search_result_text { margin: 30px 0 48px; text-align: center; font-size: 14px; line-height: 15px; color: #999; } .keyword_box { margin-top: 50px; margin-bottom: 60px; } .keyword_box .keyword_title { font-family: "NanumHuman-B"; font-size: 14px; line-height: 15px; color: #777; } .keyword_box .keyword_list { margin-top: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 4px; } .keyword_box .keyword_list .btn_label { padding: 0 10px; font-family: "NanumHuman-B"; font-size: 14px; line-height: 29px; color: #fff; background-color: #333; } .keyword_box .keyword_list .btn_label:hover { background-color: #ff4600; } .keyword_box .keyword_list .btn_label.active .item_label { display: block; background-color: #ff4600; } .keyword_box .keyword_list .btn_label.fold { padding: 6px 10px; } .keyword_box .keyword_list:not(.active) .item_label:nth-child(n+11) { display: none; } .keyword_box .keyword_list:not(.active) .item_label:has(.btn_label.more) { display: block; } .keyword_box .keyword_list .item_label .ico.fold_arrow { display: block; width: 16px; height: 17px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#icon_keyword_fold); background-repeat: no-repeat; background-position: -255px -207px; background-size: 305px auto; } .search .section_footer { position: static; } .search .header { position: static; top: 0; -webkit-animation: none; animation: none; opacity: 1; background-color: #000; } .search .header .header_wrap { position: fixed; left: 0; right: 0; z-index: 4000; background-color: #000; } .search .header .search_box { padding-top: 49px; } .search .header .logo { width: 127px; height: 25px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/logo_black.gif) no-repeat; background-size: 127px 25px; } .search .header .logo a { display: block; height: 100%; } .search .header .header_menu_link { color: #fff; } .search .header .header_menu_link:hover { color: #999; } .search .header .btn_search { pointer-events: none; width: 22px; height: 22px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_search_w); background-repeat: no-repeat; background-position: -135px -155px; background-size: 214px auto; } .search .header .btn_search.active { width: 22px; height: 22px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/ico_close_search.png) no-repeat; background-size: 22px 22px; } .search .header .btn_gnb { width: 22px; height: 22px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_gnb_w); background-repeat: no-repeat; background-position: -54px -155px; background-size: 214px auto; } .search .header .gnb_link { color: #fff; } .search .header + .gnb_wrap .gnb { background-color: #000; } .search .header + .gnb_wrap .gnb .logo { width: 127px; height: 25px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/logo_black.gif) no-repeat; background-size: 127px 25px; } .search .header + .gnb_wrap .gnb .logo a { display: block; height: 100%; } .search .header + .gnb_wrap .gnb .gnb_item { color: #fff; } .search .header + .gnb_wrap .gnb .btn_close { width: 24px; height: 24px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_close_w); background-repeat: no-repeat; background-position: -135px -110px; background-size: 214px auto; } .search .header + .gnb_wrap .gnb .gnb_footer_text { color: #fff; } .search:before { display: none; } .search_no_box { padding: 100px 20px 200px; text-align: center; } .search_no_box .result_text { font-weight: 500; font-size: 18px; line-height: 29px; letter-spacing: -0.03em; color: #111; } .search_no_box .result_text .accent { font-weight: 900; } .search_no_box .other_link { margin-top: 24px; display: inline-block; vertical-align: top; padding: 0 18px 0 20px; font-weight: 800; font-size: 15px; line-height: 40px; background-color: #eaeaea; border-radius: 100px; -webkit-box-sizing: border-box; box-sizing: border-box; } .search_no_box .other_link:after { content: ""; margin: 8px 0 0 4px; display: inline-block; vertical-align: top; width: 24px; height: 24px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_link_arrow); background-repeat: no-repeat; background-position: -165px 0px; background-size: 214px auto; } .search_no_box .other_link:hover { color: #fff; background-color: #ff4600; } .search_no_box .other_link:hover:after { width: 24px; height: 24px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_link_arrow_hover); background-repeat: no-repeat; background-position: -165px -29px; background-size: 214px auto; } .search_content .highlight { color: #FF4600; } .search_content .search_content_inner { padding: 40px 20px 60px; } .search_content .search_result_list { display: -ms-grid; display: grid; gap: 60px 0; -ms-grid-columns: 1fr; grid-template-columns: 1fr; -ms-grid-rows: auto; grid-template-rows: auto; } .search_content .search_result_list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .search_content .search_result_list .result_item { position: relative; } .search_content .search_result_list .result_item .result_item_link { display: block; } .search_content .search_result_list .result_item .result_item_link:hover img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .search_content .search_result_list .result_item .result_item_link:hover .thumb_text_box .item_title { color: rgb(255, 70, 0); text-decoration: underline; text-underline-offset: 5px; -webkit-transition: color 0.2s; transition: color 0.2s; } .search_content .thumb_text_box { display: -webkit-box; display: -ms-flexbox; display: flex; } .search_content .thumb_text_box .text_box { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-right: 52px; } .search_content .thumb_text_box .item_title { font-size: 18px; line-height: 27px; font-weight: 800; letter-spacing: -0.04em; color: #111; } .search_content .thumb_text_box .title_desc { font-family: "NanumHuman-R"; margin-top: 8px; display: block; font-size: 14px; line-height: 22px; color: #111; } .search_content .thumb_text_box .thumb_box { overflow: hidden; width: 100px; height: 100px; } .search_content .thumb_text_box .thumb_box img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.3s; transition: all 0.3s; } .search_content .label_result_list { margin-top: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 3px; } .search_content .label_result_list .label_link { display: block; padding: 4px 9px; font-family: "NanumHuman-B"; font-size: 13px; line-height: 17px; background-color: #E9E9E9; color: #333; } .search_content .label_result_list .label_link:hover { background-color: rgb(199, 199, 199); } .search_content .item_label_text { margin-top: 16px; font-family: "NanumHuman-R"; font-size: 14px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } /** * Swiper 8.3.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2022 Vladimir Kharlampidi * * Released under the MIT License * * Released on: July 6, 2022 */ @font-face { font-family: "swiper-icons"; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #007aff; } .ffswiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; } .swiper-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-pointer-events.swiper-vertical { -ms-touch-action: pan-x; touch-action: pan-x; } .swiper-slide { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transition-property: height, -webkit-transform; transition-property: height, -webkit-transform; transition-property: transform, height; transition-property: transform, height, -webkit-transform; } .swiper-backface-hidden .swiper-slide { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 3D Effects */ .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper { -webkit-perspective: 1200px; perspective: 1200px; } .swiper-3d .swiper-wrapper, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-cube-shadow { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } /* CSS Mode */ .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-horizontal.swiper-css-mode > .swiper-wrapper { -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; } .swiper-vertical.swiper-css-mode > .swiper-wrapper { -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; } .swiper-centered > .swiper-wrapper::before { content: ""; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-ordinal-group: 10000; -ms-flex-order: 9999; order: 9999; } .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { -webkit-margin-start: var(--swiper-centered-offset-before); margin-inline-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { -webkit-margin-before: var(--swiper-centered-offset-before); margin-block-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } .swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; } .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } .swiper-virtual.swiper-css-mode .swiper-wrapper::after { content: ""; position: absolute; left: 0; top: 0; pointer-events: none; } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { height: 1px; width: var(--swiper-virtual-size); } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { width: 1px; height: var(--swiper-virtual-size); } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev.swiper-button-hidden, .swiper-button-next.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none; } .swiper-navigation-disabled .swiper-button-prev, .swiper-navigation-disabled .swiper-button-next { display: none !important; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: "prev"; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: "next"; } .swiper-button-lock { display: none; } :root { /* --swiper-pagination-color: var(--swiper-theme-color); --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-width: 8px; --swiper-pagination-bullet-height: 8px; --swiper-pagination-bullet-inactive-color: #000; --swiper-pagination-bullet-inactive-opacity: 0.2; --swiper-pagination-bullet-opacity: 1; --swiper-pagination-bullet-horizontal-gap: 4px; --swiper-pagination-bullet-vertical-gap: 6px; */ } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 300ms opacity; transition: 300ms opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 10px; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(0.33); -ms-transform: scale(0.33); transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(0.66); -ms-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(0.33); -ms-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(0.66); -ms-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(0.33); -ms-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-vertical > .swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 8px; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; -webkit-transition: 200ms top, 200ms -webkit-transform; transition: 200ms top, 200ms -webkit-transform; transition: 200ms transform, 200ms top; transition: 200ms transform, 200ms top, 200ms -webkit-transform; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 200ms left, 200ms -webkit-transform; transition: 200ms left, 200ms -webkit-transform; transition: 200ms transform, 200ms left; transition: 200ms transform, 200ms left, 200ms -webkit-transform; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 200ms right, 200ms -webkit-transform; transition: 200ms right, 200ms -webkit-transform; transition: 200ms transform, 200ms right; transition: 200ms transform, 200ms right, 200ms -webkit-transform; } /* Progress */ .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } /* Scrollbar */ .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled { display: none !important; } .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-vertical > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-vertical { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } /* Preloader */ :root { /* --swiper-preloader-color: var(--swiper-theme-color); */ } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { -webkit-animation: swiper-preloader-spin 1s infinite linear; animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @-webkit-keyframes swiper-preloader-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* a11y */ .swiper .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-free-mode > .swiper-wrapper { -webkit-transition-timing-function: cubic-bezier(0, 0.87, 0, 2.15); transition-timing-function: cubic-bezier(0, 0.87, 0, 2.15); margin: 0 auto; } .swiper-grid > .swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; } .swiper-grid-column > .swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .swiper-fade.swiper-free-mode .swiper-slide { -webkit-transition-timing-function: cubic-bezier(0, 0.87, 0, 2.15); transition-timing-function: cubic-bezier(0, 0.87, 0, 2.15); } .swiper-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; transition-property: opacity; -webkit-transition-timing-function: cubic-bezier(0, 0.87, 0, 2.15); transition-timing-function: cubic-bezier(0, 0.87, 0, 2.15); z-index: 1; } .swiper-fade .swiper-slide .swiper-slide { pointer-events: auto; } .swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; z-index: 10; } .swiper-cube { overflow: visible; } .swiper-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-cube.swiper-rtl .swiper-slide { -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev, .swiper-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-cube .swiper-slide-shadow-top, .swiper-cube .swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: 0.6; z-index: 0; } .swiper-cube .swiper-cube-shadow:before { content: ""; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; -webkit-filter: blur(50px); filter: blur(50px); } .swiper-flip { overflow: visible; } .swiper-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-flip .swiper-slide-shadow-top, .swiper-flip .swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-creative .swiper-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; -webkit-transition-property: opacity, height, -webkit-transform; transition-property: opacity, height, -webkit-transform; transition-property: transform, opacity, height; transition-property: transform, opacity, height, -webkit-transform; } .swiper-cards { overflow: visible; } .swiper-cards .swiper-slide { -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; } @media screen and (min-width: 375px){ .section_footer .footer_logo .footer_logo_link { width: 335px; height: 50px; background-size: 335px 50px; } .spot .spot_content { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @media screen and (min-width: 692px){ .mo_only { display: none; } } @media screen and (min-width: 768px){ .pc_tab { display: block; } .title_br { display: none; } .wrap .header .inner { padding: 20px 60px; max-width: 100%; } .header .inner { padding: 20px 30px; max-width: 100%; } .header .title_box { padding: 24px 30px; } .header .title_box .title_text { font-size: 34px; line-height: 44px; } .gnb { width: 67%; } .gnb .gnb_header { display: none; } .gnb .gnb_list { margin-top: 110px; } .total_swiper .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 51px; } .total_swiper .spot_title_unit_box { margin-top: 6px; } .spot { padding-top: 65px; } .spot .inner { max-width: 100%; padding: 50px 30px 58px; } .spot .spot_content { height: 916px; } .spot .spot_title_wrap { width: 315px; padding-top: 0; padding-bottom: 50px; margin-right: 7px; } .spot .spot_title_wrap .spot_title_desc { display: block; font-family: "NanumHuman-B"; margin-top: 24px; font-size: 14px; line-height: 24px; letter-spacing: -0.04em; color: #111; } .spot .spot_title_box .spot_title { font-size: 42px; line-height: 50px; color: #111; } .spot .spot_title_box .spot_title br { display: block; } .spot .spot_inner_swiper.swiper-container { margin-top: 0; position: static; width: 386px; height: 418px; padding-bottom: 100px; } .spot .spot_inner_swiper .swiper-slide { width: 350px !important; height: 350px; } .spot .spot_inner_swiper .swiper-slide .slide_desc_box { bottom: 9px; right: 12px; left: 12px; } .spot .spot_inner_swiper .swiper-slide .slide_desc_box .number { font-size: 14px; line-height: 18px; } .spot .spot_inner_swiper .swiper-slide .slide_desc_box .slide_desc_title { margin-left: 16px; font-size: 12px; line-height: 16px; } .spot .spot_inner_swiper .swiper-slide-active .slide_desc_box { top: 18px; left: 23px; } .spot .spot_inner_swiper .swiper-slide-active .slide_desc_box .number { font-size: 26px; line-height: 26px; } .spot .spot_inner_swiper .swiper-slide-active .slide_desc_box .slide_desc_title { margin: 11px 0 0 0; font-size: 26px; line-height: 34px; } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide { -webkit-transform: translateY(34px) translateX(18px); -ms-transform: translateY(34px) translateX(18px); transform: translateY(34px) translateX(18px); } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide + .swiper-slide { -webkit-transform: translateY(68px) translateX(36px); -ms-transform: translateY(68px) translateX(36px); transform: translateY(68px) translateX(36px); } .slide_behind .swiper-slide, .slide_recode .swiper-slide, [class*=slide_curation] .swiper-slide { width: 314px; } .slide_behind .img_area, .slide_recode .img_area, [class*=slide_curation] .img_area { padding-top: 100%; } .section_recode .section_title.active .highlight:after, .section_behind .section_title.active .highlight:after { bottom: -25px; left: 8px; background-size: 190px 20px; width: 190px; height: 20px; } .section_recode .inner, .section_behind .inner { padding: 0 60px; } .section_story .inner { padding: 70px 60px; } .section_story .story_list { gap: 60px 20px; -ms-grid-columns: 1fr 20px 1fr; grid-template-columns: repeat(2, 1fr); -ms-grid-rows: auto; grid-template-rows: auto; } .section_story .story_list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .section_story .story_list > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .section_story .story_list .story_item .story_link { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .section_story .thumb_img { margin-right: 37px; width: 130px; height: 130px; } .section_author .section_title { padding: 0; } .section_author .inner { padding: 0 60px; } .section_author .author_name_box { width: 160px; } .section_author .author_job_box { width: 180px; } .section_author .author_job_desc { margin-left: 30px; display: block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .section_author .author_link { padding: 15px 30px 14px; } .section_author .name_text { font-size: 16px; line-height: 20px; } .section_author .job_text { color: #111; } .section_footer .inner { padding: 40px 60px 30px; } .section_footer .footer_content { display: -webkit-box; display: -ms-flexbox; display: flex; } .section_footer .footer_menu_list { margin-right: 238px; } .section_footer .footer_service { margin-top: 0; } .section_footer .footer_logo .footer_logo_link { width: 708px; height: 105px; background-size: 708px 105px; } .section_footer .footer_logo { margin-top: 158px; } .sub_content .inner { padding: 0 60px; } .section_sub_title { padding-top: 65px; } .section_sub_title .inner { padding: 0 60px; } .sub_title_box { top: 65px; } .sub_title_box .mo_show { display: none; } .sub_title_box .pc_show { display: block; } .sub_title_img { padding-top: 45.9%; } .sub_title { padding-top: 100px; font-size: 44px; line-height: 62px; } .sub_title_desc { margin-top: 20px; font-size: 20px; line-height: 32px; } .sub_info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .sub_info .info_box { -webkit-box-flex: 0; -ms-flex: 0 1 50%; flex: 0 1 50%; } .sub_info .info_box + .info_box { margin-top: 0; } .info_text_box .sub_text + .sub_text { margin-top: 34px; } .info_text_box .sub_text { font-size: 18px; line-height: 34px; } .content_text_wrap { padding-bottom: 100px; } .content_text_box + .content_text_box { padding-top: 100px; } .content_text_box .text_box_title { font-size: 24px; line-height: 41px; } .content_text_box .sub_text_question { margin-top: 50px; font-size: 18px; line-height: 30px; } .content_text_box .sub_text { margin-top: 20px; } .content_text_box .sub_text + .sub_text_question { margin-top: 60px; } .content_text_box .img_box_wrap { margin-top: 50px; } .content_text_box .img_box_wrap + .sub_text_question { margin-top: 50px; } .content_text_box .img_text { margin-top: 10px; } .content_dsec_box { padding: 100px 0 30px; } .content_info_box { padding-top: 30px; } .content_info_box + .content_info_box { padding-top: 60px; } .content_story { padding-top: 120px; } .content_story .inner { padding: 0 60px; } .content_story .story_list { padding: 50px 0 160px; } /* 모바일 Quick Menu (min-width: 768px) */ .quick_menu { padding: 8px 18px 8px 8px; } .quick_menu .quick_menu_item_box { height: 49px; } .quick_menu .quick_menu_item { height: 49px; } .quick_menu .quick_menu_item + .quick_menu_item { margin-left: 7px; } .quick_menu .quick_menu_btn.active .icon.icon_copy { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/tb_icon_copy_active.png) no-repeat; background-size: 48px 48px; } .quick_menu .quick_menu_btn.active .icon.icon_like { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/tb_icon_like_active.png) no-repeat; background-size: 24px 24px; } .quick_menu .quick_menu_btn .icon { width: 48px; height: 48px; } .quick_menu .quick_menu_btn .icon.icon_next { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/tb_side_icon_next.png) no-repeat; background-size: 48px 48px; } .quick_menu .quick_menu_btn .icon.icon_prev { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/tb_side_icon_prev.png) no-repeat; background-size: 48px 48px; } .quick_menu .quick_menu_btn .icon.icon_share { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/tb_side_icon_share.png) no-repeat; background-size: 48px 48px; } .quick_menu .quick_menu_btn .icon.icon_copy { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/tb_side_icon_copy.png) no-repeat; background-size: 48px 48px; } .quick_menu .quick_menu_btn .icon.icon_like { width: 24px; height: 24px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/tb_side_icon_like.png) no-repeat; background-size: 24px 24px; } .quick_menu .quick_menu_btn:has(.icon_like) { padding: 12px 3.5px 12px 6.5px; } .quick_menu_box .toggle_quick_btn { padding: 8px; width: 64px; height: 64px; } .quick_menu_box .toggle_quick_btn .icon { width: 48px; height: 48px; } .quick_menu_box .toggle_quick_btn .icon.icon_dot { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/mo_icon_dot.png) no-repeat; background-size: 48px 48px; } .quick_menu_box .toggle_quick_btn .icon.icon_close { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/mo_icon_close.png) no-repeat; background-size: 48px 48px; } /* 모바일 Quick Menu */ /* 마크업 GAP 이 있으나 미사용으로 보여 소스엔 남기고 주석 처리 .side_nav_box .toggle_side_btn .icon { width: 48px; height: 48px; } .side_nav_box .toggle_quick_btn .icon.icon_dot { background: url(../img/mo/tb_icon_dot.png) no-repeat; background-size: 48px 48px; } .side_nav_box .toggle_side_btn .icon.icon_close { background: url(../img/mo/mo_icon_close.png) no-repeat; background-size: 48px 48px; } */ .side_nav { padding: 8px 18px 8px 8px; } .side_nav .side_item_box { height: 49px; } .side_nav .side_item { height: 49px; } .side_nav .side_item + .side_item { margin-left: 7px; } .side_nav .side_btn.active .icon.icon_copy { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/tb_icon_copy_active.png) no-repeat; background-size: 48px 48px; } .side_nav .side_btn.active .icon.icon_like { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/tb_icon_like_active.png) no-repeat; background-size: 24px 24px; } .side_nav .side_btn .icon { width: 48px; height: 48px; } .side_nav .side_btn .icon.icon_next { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/tb_side_icon_next.png) no-repeat; background-size: 48px 48px; } .side_nav .side_btn .icon.icon_prev { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/tb_side_icon_prev.png) no-repeat; background-size: 48px 48px; } .side_nav .side_btn .icon.icon_share { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/tb_side_icon_share.png) no-repeat; background-size: 48px 48px; } .side_nav .side_btn .icon.icon_copy { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/tb_side_icon_copy.png) no-repeat; background-size: 48px 48px; } .side_nav .side_btn .icon.icon_like { width: 24px; height: 24px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/tb_side_icon_like.png) no-repeat; background-size: 24px 24px; } .side_nav .side_btn:has(.icon_like) { padding: 12px 3.5px 12px 6.5px; } [class*=section_curation] + [class*=section_curation] { padding-top: 120px; } [class*=section_curation] .inner { padding: 0 60px; } [class*=section_curation] .section_title { font-size: 32px; line-height: 41px; } .pagination_wrap { padding-bottom: 140px; } .page_title_box { min-height: 166px; padding: 0 60px 23px; } .content_label_list { top: 65px; padding: 11px 60px; } .content_inner { margin-top: 40px; padding: 0 60px; } .section_all_content { padding-bottom: 100px; } .section_all_content .content_list { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); -ms-grid-rows: auto; grid-template-rows: auto; } .section_all_content .content_list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .section_all_content .content_list > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } .section_all_content .img_area { padding-top: 100%; } .author_content { padding: 0 60px; } .author_content .author_list { gap: 100px 30px; -ms-grid-columns: 1fr 30px 1fr 30px 1fr; grid-template-columns: repeat(3, 1fr); -ms-grid-rows: auto; grid-template-rows: auto; } .author_content .author_list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .author_content .author_list > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .author_content .author_list > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 5; } .author_detail_content { padding: 65px 116px 0; } .author_detail_content .swiper-wrapper .swiper-slide { margin-right: 206px; } .author_detail_content .swiper-navigation { width: 100%; top: 268px; } .author_detail_content .swiper-button-prev { left: -56px; } .author_detail_content .swiper-button-next { right: -56px; } .author_box { text-align: left; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 80px 0 60px; } .author_box .thumb_img { margin-right: 30px; width: 140px; height: 140px; } .author_box .thumb_img img { width: 120px; height: 120px; } .author_box .detail_text_box { padding: 0; margin: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .author_box .detail_text_box .author_desc { font-size: 14px; line-height: 20px; } .author_box .detail_text_box .author_detail_desc { margin-top: 20px; font-size: 14px; line-height: 24px; color: #444; } .author_detail_list .author_item + .author_item { margin-top: 34px; } .search_inner { padding: 46px 60px 0; } .search_inner .input_search { padding: 22px 72px; font-size: 20px; line-height: 22px; } .search_inner .search_btn { padding: 16px 18px; } .search_inner .search_btn .icon_search { width: 34px; height: 34px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#pc_icon_search); background-repeat: no-repeat; background-position: -255px -96px; background-size: 305px auto; } .search_inner .search_btn_delete { padding: 21px 24px; } .search_inner .search_btn_delete .icon_search_delete { width: 24px; height: 24px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#pc_icon_search_delete); background-repeat: no-repeat; background-position: 0px -235px; background-size: 305px auto; } .search_inner .search_btn_delete:hover .icon_search_delete { width: 24px; height: 24px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#pc_icon_search_delete_hover); background-repeat: no-repeat; background-position: -29px -235px; background-size: 305px auto; } .search_inner .search_result_text { margin: 42px 0 60px; } .keyword_box { margin-bottom: 60px; } .search_no_box { padding: 100px 20px 240px; } .search_content .search_content_inner { padding: 60px 60px 84px; } .search_content .search_result_list .result_item { min-height: 197px; } .search_content .thumb_text_box { display: inline-block; vertical-align: top; } .search_content .thumb_text_box .text_box { margin-right: 0; display: inline-block; vertical-align: top; } .search_content .thumb_text_box .item_title { font-size: 22px; line-height: 33px; } .search_content .thumb_text_box .title_desc { font-size: 16px; line-height: 27px; } .search_content .thumb_text_box .thumb_box { position: absolute; top: 0; right: 0; width: 197px; height: 197px; } .search_content .label_text_box { width: calc(100% - 247px); } .search_content .label_result_list { margin-top: 20px; } .search_content .item_label_text { margin-top: 28px; } } @media screen and (hover: hover) and (pointer: fine) and (min-width: 1024px){ .section_recode .swiper-button-prev:hover:after, .section_recode .swiper-button-next:hover:after, .section_behind .swiper-button-prev:hover:after, .section_behind .swiper-button-next:hover:after { width: 40px; height: 40px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_swiper_hover_next); background-repeat: no-repeat; background-position: -120px -45px; background-size: 214px auto; } [class*=section_curation] .swiper-button-prev:hover:after, [class*=section_curation] .swiper-button-next:hover:after { width: 40px; height: 40px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_swiper_hover_next); background-repeat: no-repeat; background-position: -120px -45px; background-size: 214px auto; } .author_detail_content .swiper-button-prev:hover:after, .author_detail_content .swiper-button-next:hover:after { width: 40px; height: 40px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_swiper_hover_next); background-repeat: no-repeat; background-position: -120px -45px; background-size: 214px auto; } } @media screen and (hover: none) and (min-width: 1024px){ .section_recode .swiper-button-prev:active:after, .section_recode .swiper-button-next:active:after, .section_behind .swiper-button-prev:active:after, .section_behind .swiper-button-next:active:after { width: 40px; height: 40px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_swiper_hover_next); background-repeat: no-repeat; background-position: -120px -45px; background-size: 214px auto; } .btn_top:active:active { width: 60px; height: 60px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#btn_hover_top); background-repeat: no-repeat; background-position: -170px -85px; background-size: 305px auto; } [class*=section_curation] .swiper-button-prev:active:after, [class*=section_curation] .swiper-button-next:active:after { width: 40px; height: 40px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_swiper_hover_next); background-repeat: no-repeat; background-position: -120px -45px; background-size: 214px auto; } .author_detail_content .swiper-button-prev:active:after, .author_detail_content .swiper-button-next:active:after { width: 40px; height: 40px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_swiper_hover_next); background-repeat: no-repeat; background-position: -120px -45px; background-size: 214px auto; } } @media screen and (min-width: 1024px){ .mo_show { display: none; } .pc_show { display: block; } .mo_tab { display: none; } .wrap .header .inner { padding: 0 60px; height: 65px; } .header .header_menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header .btn_search:hover { width: 22px; height: 22px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_hover_search); background-repeat: no-repeat; background-position: -81px -155px; background-size: 214px auto; } .header .btn_search.active { width: 22px; height: 22px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_active_search); background-repeat: no-repeat; background-position: 0px -155px; background-size: 214px auto; } .header .btn_gnb { display: none; } .header .header_menu_list { margin-right: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; } .header .header_menu_list .header_menu_link { display: block; padding: 0 20px; font-weight: 800; font-size: 14px; line-height: 65px; } .header .inner { padding: 20px 40px; max-width: 100%; } .header .logo { width: 140px; height: 28px; background-size: 140px 28px; } .header .title_box { padding: 32px 40px; } .header .title_box .title_text { font-size: 48px; line-height: 62px; } .header.fixed .logo { width: 140px; height: 28px; background-size: 140px 28px; } .header.fixed .btn_search:hover { width: 22px; height: 22px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_hover_search); background-repeat: no-repeat; background-position: -81px -155px; background-size: 214px auto; } .header.fixed .btn_search.active:hover { width: 22px; height: 22px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/ico_close_search.png) no-repeat; background-size: 22px 22px; } .header.white .logo { width: 140px; height: 28px; background-size: 140px 28px; } .gnb_wrap { display: none; } .gnb_wrap .gnb .logo { width: 140px; height: 28px; background-size: 140px 28px; } .total_swiper .swiper-navigation { display: block; } .total_swiper .swiper-button-prev, .total_swiper .swiper-button-next { width: 40px; height: 40px; } .total_swiper .swiper-button-prev::after, .total_swiper .swiper-button-next::after { width: 40px; height: 40px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_total_active_next); background-repeat: no-repeat; background-position: -45px -110px; background-size: 214px auto; } .total_swiper .swiper-button-prev:hover:after, .total_swiper .swiper-button-next:hover:after { width: 40px; height: 40px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_swiper_hover_next); background-repeat: no-repeat; background-position: -120px -45px; background-size: 214px auto; } .total_swiper .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 37px; } .total_swiper .swiper-pagination-bullet { width: 80px; height: 4px; } .total_swiper .swiper-pagination-bullet .progress { height: 4px; } .total_swiper .swiper-pagination-bullet .progress-bar { height: 4px; } .spot .spot_content { padding-top: 0; width: 100%; position: relative; height: 643px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .spot .spot_title_wrap { width: 350px; margin-right: 54px; } .spot .spot_title_wrap .spot_title_desc { font-size: 16px; line-height: 26px; } .spot .spot_title_box .point_title { font-size: 16px; line-height: 24px; } .spot .spot_title_box .spot_title { font-size: 48px; line-height: 57px; letter-spacing: -0.04em; } .spot .spot_title_box .spot_title { font-size: 56px; line-height: 64px; letter-spacing: -0.04em; } .spot .spot_inner_swiper.swiper-container { width: 433px; height: 449px; } .spot .spot_inner_swiper .swiper-slide { width: 405px !important; height: 405px; } .spot .spot_inner_swiper .swiper-slide .slide_desc_box { bottom: 4px; right: 15px; left: 15px; } .spot .spot_inner_swiper .swiper-slide .slide_desc_box .number { font-size: 12px; line-height: 15px; } .spot .spot_inner_swiper .swiper-slide .slide_desc_box .slide_desc_title { margin-left: 22px; font-size: 11px; line-height: 14px; } .spot .spot_inner_swiper .swiper-slide-active .slide_desc_box { top: 22px; left: 26px; } .spot .spot_inner_swiper .swiper-slide-active .slide_desc_box .number { font-size: 28px; line-height: 28px; } .spot .spot_inner_swiper .swiper-slide-active .slide_desc_box .slide_desc_title { margin: 11px 0 0 0; font-size: 28px; line-height: 36px; } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide { -webkit-transform: translateY(22px) translateX(14px); -ms-transform: translateY(22px) translateX(14px); transform: translateY(22px) translateX(14px); } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide:hover { -webkit-transform: translateY(27px) translateX(19px); -ms-transform: translateY(27px) translateX(19px); transform: translateY(27px) translateX(19px); } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide + .swiper-slide { -webkit-transform: translateY(44px) translateX(28px); -ms-transform: translateY(44px) translateX(28px); transform: translateY(44px) translateX(28px); } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide + .swiper-slide:hover { -webkit-transform: translateY(49px) translateX(33px); -ms-transform: translateY(49px) translateX(33px); transform: translateY(49px) translateX(33px); } .slide_behind .swiper-slide, .slide_recode .swiper-slide, [class*=slide_curation] .swiper-slide { width: 288px; } .section_recode .swiper-navigation, .section_behind .swiper-navigation { position: absolute; top: -80px; right: 30px; display: block; width: 90px; height: 40px; } .section_recode .swiper-button-prev, .section_recode .swiper-button-next, .section_behind .swiper-button-prev, .section_behind .swiper-button-next { width: 40px; height: 40px; } .section_recode .swiper-button-prev::after, .section_recode .swiper-button-next::after, .section_behind .swiper-button-prev::after, .section_behind .swiper-button-next::after { width: 40px; height: 40px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_swiper_next); background-repeat: no-repeat; background-position: 0px -110px; background-size: 214px auto; } .section_banner .banner_img .bg { width: 100%; height: 240px; } .section_banner .swiper-navigation { display: block; } .section_banner:hover { display: block; } .section_banner:hover .swiper-button-prev, .section_banner:hover .swiper-button-next { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; visibility: visible; opacity: 1; } .section_banner:hover .swiper-pagination { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; visibility: visible; opacity: 1; } .section_banner .swiper-button-prev, .section_banner .swiper-button-next { margin-top: 0; top: 50%; width: 40px; height: 40px; } .section_banner .swiper-button-prev:after, .section_banner .swiper-button-next:after { width: 40px; height: 40px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_banner_swiper_next); background-repeat: no-repeat; background-position: -120px 0px; background-size: 214px auto; } .section_banner .swiper-button-prev:hover:after, .section_banner .swiper-button-next:hover:after { width: 40px; height: 40px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_banner_swiper_hover_next); background-repeat: no-repeat; background-position: -45px -65px; background-size: 214px auto; } .section_story .thumb_img { margin-right: 40px; width: 140px; height: 140px; } .section_story .story_text_box .story_title { font-size: 20px; line-height: 30px; } .section_story .story_text_box .story_title_desc { margin-top: 10px; font-size: 16px; line-height: 26px; } .section_author .author_name_box { width: 200px; } .section_author .author_job_box { width: 213px; } .section_author .author_job_desc { margin-left: 256px; } .section_author .author_link { padding: 16px 30px; } .section_author .author_more_btn { margin: 50px auto 0; } .section_footer .inner { padding: 60px 60px 30px; } .section_footer .footer_content_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; } .section_footer .copyright { margin: 0 0 0 112px; } .section_footer .footer_logo .footer_logo_link { width: 800px; height: 119px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/footer_logo.png) no-repeat; background-size: 800px 119px; } .section_footer .footer_logo { margin-top: 202px; } .btn_top { bottom: 100px; right: 30px; width: 60px; height: 60px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#btn_top); background-repeat: no-repeat; background-position: -65px -170px; background-size: 305px auto; } .sub_content .inner { padding: 0 60px 0 214px; } .sub_page .header .logo { width: 140px; height: 28px; background-size: 140px 28px; } .sub_page .header .btn_search:hover { width: 22px; height: 22px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_hover_search); background-repeat: no-repeat; background-position: -81px -155px; background-size: 214px auto; } .sub_page .header + .gnb_wrap .gnb .logo { width: 140px; height: 28px; background-size: 140px 28px; } .section_sub_title .inner { padding: 0 60px 0 214px; } .sub_title_content { position: relative; } .sub_title { padding-top: 120px; font-size: 50px; line-height: 70px; } .sub_title { padding-top: 130px; } .sub_title_desc { margin-top: 14px; font-size: 20px; line-height: 32px; } .sub_info_wrap { padding: 0; margin: 0; border-top: 0; display: block; position: absolute; left: 30px; top: 386px; z-index: 30; } .sub_info .info_box { -webkit-box-flex: 0; -ms-flex: 0; flex: 0; } .sub_info .info_box + .info_box { margin-top: 36px; } .sub_info { display: block; } .sub_info + .info_box { margin-top: 36px; } .info_text_box .label_list { margin-top: 36px; } .info_text_box .label_list .label_item { float: none; } .info_text_box .label_list .label_item + .label_item { margin: 4px 0 0 0; } .content_text_box .img_box_wrap + .sub_text_question { margin-top: 60px; } .content_story .story_list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 50px 90px; } .content_story .story_list .story_item { -webkit-box-flex: 1; -ms-flex: 1 1 calc(50% - 45px); flex: 1 1 calc(50% - 45px); } .content_story .story_list .story_item + .story_item { margin-top: 0; } .side_nav_box { display: block; opacity: 0; position: fixed; bottom: auto; right: auto; left: 30px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .side_nav_box .toggle_side_btn { display: none; } /* 모바일 Quick Menu (min-width: 1024px) */ .quick_menu_box .toggle_quick_btn { display: none; } /* 모바일 Quick Menu */ .side_nav { opacity: 1; width: 100%; display: block; padding: 0; display: inline-block; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; background-color: transparent; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } .side_nav .side_item_box { width: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: auto; } .side_nav .side_item_box:hover:has(.icon_like) + .count { -webkit-transition: color 0.3s cubic-bezier(0, 0, 0.5, 1); transition: color 0.3s cubic-bezier(0, 0, 0.5, 1); color: #FF4600; } .side_nav .side_item { width: 40px; height: 40px; opacity: 1; } .side_nav .side_item + .side_item { display: block; height: auto; margin: 6px 0 0 0; } .side_nav .side_item:has(.icon_like) { width: 40px; } .side_nav .side_item .count { display: block; text-align: center; font-size: 14px; line-height: 17px; color: #000; } .side_nav .side_text { display: block; opacity: 0; margin: 0 0 0 10px; position: static; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); font-weight: 800; font-size: 12px; line-height: 12px; letter-spacing: -0.02em; color: #ff4600; white-space: nowrap; } .side_nav .side_btn.active + .side_text { opacity: 1; position: static; top: auto; left: auto; -webkit-transform: none; -ms-transform: none; transform: none; background: none; border-radius: 0; -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); overflow: visible; width: auto; height: auto; clip: auto; -webkit-clip-path: none; clip-path: none; } .side_nav .side_btn.active:has(.icon_like) + .side_text { display: none; } .side_nav .side_btn .icon { width: 40px; height: 40px; } .side_nav .side_btn .icon.icon_next { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_next.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn .icon.icon_prev { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_prev.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn .icon.icon_share { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_share.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn .icon.icon_copy { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_copy.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn .icon.icon_like { width: 40px; height: 40px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_like.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn:has(.icon_like) { padding: 0; } .side_nav .side_btn:hover + .side_text { opacity: 1; -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); overflow: visible; width: auto; height: auto; clip: auto; -webkit-clip-path: none; clip-path: none; color: #FF4600; } .side_nav .side_btn:hover .icon { -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); transition: all 0.3s cubic-bezier(0, 0, 0.5, 1); display: block; width: 40px; height: 40px; } .side_nav .side_btn:hover .icon.icon_next { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_next_hover.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn:hover .icon.icon_prev { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_prev_hover.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn:hover .icon.icon_share { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_share_hover.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn:hover .icon.icon_copy { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_copy_hover.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn:hover .icon.icon_like { width: 40px; height: 40px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_like_hover.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn:active { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } .side_nav .side_btn.active .icon.icon_copy { background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_selected.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn.active .icon.icon_like { width: 40px; height: 40px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/pc/side_icon_like_active.png) no-repeat; background-size: 40px 40px; } .side_nav .side_btn.active:has(.icon_like) + .side_text { opacity: 0; } .page_title_wrap { padding-top: 65px; } [class*=section_curation] { padding-top: 80px; } [class*=section_curation] .inner { padding: 0 60px; } [class*=section_curation] .swiper-button-prev, [class*=section_curation] .swiper-button-next { width: 40px; height: 40px; } [class*=section_curation] .swiper-button-prev::after, [class*=section_curation] .swiper-button-next::after { width: 40px; height: 40px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_swiper_next); background-repeat: no-repeat; background-position: 0px -110px; background-size: 214px auto; } [class*=section_curation] .swiper-navigation { position: absolute; top: -80px; right: 0; display: block; width: 90px; height: 40px; } .content_label_list { padding: 11px 60px; display: -webkit-box; display: -ms-flexbox; display: flex; overflow-y: visible; white-space: normal; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 3px; } .content_label_list .content_label_item + .content_label_item { margin: 0; } .content_inner { padding: 0 60px; } .section_all_content .content_list { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); -ms-grid-rows: auto; grid-template-rows: auto; } .section_all_content .content_list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .section_all_content .content_list > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } .section_all_content .content_list > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 3; } .author_content .author_list { gap: 100px 40px; -ms-grid-columns: 1fr 40px 1fr 40px 1fr 40px 1fr; grid-template-columns: repeat(4, 1fr); -ms-grid-rows: auto; grid-template-rows: auto; } .author_content .author_list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .author_content .author_list > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .author_content .author_list > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 5; } .author_content .author_list > *:nth-child(4) { -ms-grid-row: 1; -ms-grid-column: 7; } .author_detail_page .header .logo { background-size: 140px 28px; } .author_detail_page .header.fixed .logo { background-size: 140px 28px; } .author_detail_content { padding: 65px 202px 0; } .author_detail_content .swiper-wrapper .swiper-slide { margin-right: 404px; } .author_detail_content .swiper-navigation { top: 300px; } .author_detail_content .swiper-button-prev { left: -154px; } .author_detail_content .swiper-button-next { right: -154px; } .author_box { padding: 100px 0 60px; } .author_box .thumb_img { margin-right: 40px; width: 160px; height: 160px; } .author_box .thumb_img img { width: 140px; height: 140px; } .author_box .detail_text_box .name { font-size: 26px; line-height: 35px; } .author_box .detail_text_box .author_desc { font-size: 16px; line-height: 22px; } .author_box .detail_text_box .author_detail_desc { font-size: 16px; line-height: 26px; } .search_inner { max-width: 620px; margin: 0 auto; padding: 46px 0px 0; } .keyword_box { margin-bottom: 68px; } .search .header .search_box { padding-top: 65px; } .search .header .logo { width: 140px; height: 28px; background-size: 140px 28px; } .search .header .btn_search:hover { width: 22px; height: 22px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-mo.png#ico_hover_search); background-repeat: no-repeat; background-position: -81px -155px; background-size: 214px auto; } .search .header + .gnb_wrap .gnb .logo { width: 140px; height: 28px; background-size: 140px 28px; } .search_no_box .result_text { font-size: 24px; line-height: 38px; } .search_no_box .other_link { margin-top: 28px; } .search_content .search_content_inner { padding: 80px 60px 80px; } .search_content .search_result_list .result_item { min-height: 220px; } .search_content .thumb_text_box .thumb_box { width: 220px; height: 220px; } .search_content .label_text_box { width: calc(100% - 320px); } } @media screen and (min-width: 1024px) and (hover: hover) and (pointer: fine){ .btn_top:hover { width: 60px; height: 60px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#btn_hover_top); background-repeat: no-repeat; background-position: -170px -85px; background-size: 305px auto; } } @media screen and (min-width: 1200px){ .spot .spot_content { height: 621px; } .spot .spot_title_wrap { width: 366px; margin-right: 95px; } .spot .spot_title_wrap .spot_title_desc { font-size: 18px; line-height: 29px; } .spot .spot_inner_swiper.swiper-container { width: 464px; height: 480px; } .spot .spot_inner_swiper .swiper-slide { width: 432px !important; height: 432px; } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide { -webkit-transform: translateY(24px) translateX(16px); -ms-transform: translateY(24px) translateX(16px); transform: translateY(24px) translateX(16px); } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide:hover { -webkit-transform: translateY(29px) translateX(21px); -ms-transform: translateY(29px) translateX(21px); transform: translateY(29px) translateX(21px); } .slide_behind.swiper-container, .slide_recode.swiper-container, [class*=slide_curation].swiper-container { overflow: hidden; } .slide_behind .swiper-slide, .slide_recode .swiper-slide, [class*=slide_curation] .swiper-slide { width: 308px; } .section_recode .swiper-navigation, .section_behind .swiper-navigation { top: auto; bottom: 0; right: auto; left: 62px; } .section_recode .inner, .section_behind .inner { padding: 0; } .section_recode .content_box, .section_behind .content_box { padding: 0 31px 0 62px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .section_recode .content_box .slide_box, .section_behind .content_box .slide_box { position: static; margin-top: 0; width: calc(100% - 368px); } .section_recode .section_title .title_br, .section_behind .section_title .title_br { display: block; } .section_story .section_title { font-size: 32px; line-height: 42px; } .section_story .story_list { gap: 70px 20px; } .section_story .thumb_img { margin-right: 45px; width: 180px; height: 180px; } .section_author .section_title { font-size: 32px; line-height: 42px; } .section_author .author_list { margin-top: 70px; } .section_footer .inner { padding: 60px 62px 30px; } .sub_content .inner { padding: 0 0 0 92px; max-width: 892px; margin: 0 auto; } .section_sub_title .inner { padding: 0 0 0 92px; max-width: 892px; margin: 0 auto; } .content_text_wrap { padding-bottom: 169px; } .content_text_box + .content_text_box { padding-top: 120px; } .content_text_box .img_box_wrap { margin-top: 60px; } .content_story .inner { padding: 0 62px; } [class*=section_curation] .inner { padding: 0 62px; } [class*=section_curation] .section_title { font-size: 34px; line-height: 44px; } .pagination_wrap { padding-bottom: 189px; } .page_title_box { padding: 54px 62px 78px; } .author_content { padding: 0 62px; } .author_content .author_list { gap: 100px 84px; -ms-grid-columns: 1fr 84px 1fr 84px 1fr 84px 1fr; grid-template-columns: repeat(4, 1fr); -ms-grid-rows: auto; grid-template-rows: auto; } .author_content .author_list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .author_content .author_list > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .author_content .author_list > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 5; } .author_content .author_list > *:nth-child(4) { -ms-grid-row: 1; -ms-grid-column: 7; } .author_detail_content { padding: 65px 246px 0; max-width: 1200px; margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; } .author_detail_content .swiper-button-prev { left: -184px; } .author_detail_content .swiper-button-next { right: -184px; } .search_content .search_content_inner { padding: 80px 62px 80px; } } @media screen and (min-width: 1440px){ .wrap .header .inner { padding: 0 62px; } .spot .spot_content { height: 756px; } .spot .spot_title_wrap { width: 470px; margin-right: 117px; } .spot .spot_title_wrap .spot_title_desc { font-size: 20px; line-height: 32px; } .spot .spot_title_box .point_title { font-size: 18px; line-height: 27px; } .spot .spot_title_box .spot_title { font-size: 68px; line-height: 81px; } .spot .spot_inner_swiper.swiper-container { width: 580px; height: 600px; } .spot .spot_inner_swiper .swiper-slide { width: 540px !important; height: 540px; } .spot .spot_inner_swiper .swiper-slide .slide_desc_box { bottom: 7px; right: 20px; left: 20px; } .spot .spot_inner_swiper .swiper-slide .slide_desc_box .number { font-size: 14px; line-height: 18px; } .spot .spot_inner_swiper .swiper-slide .slide_desc_box .slide_desc_title { margin-left: 32px; font-size: 12px; line-height: 16px; } .spot .spot_inner_swiper .swiper-slide-active .slide_desc_box { top: 30px; left: 34px; } .spot .spot_inner_swiper .swiper-slide-active .slide_desc_box .number { font-size: 36px; line-height: 36px; } .spot .spot_inner_swiper .swiper-slide-active .slide_desc_box .slide_desc_title { margin: 16px 0 0 0; font-size: 36px; line-height: 47px; } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide { -webkit-transform: translateY(30px) translateX(20px); -ms-transform: translateY(30px) translateX(20px); transform: translateY(30px) translateX(20px); } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide:hover { -webkit-transform: translateY(35px) translateX(25px); -ms-transform: translateY(35px) translateX(25px); transform: translateY(35px) translateX(25px); } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide + .swiper-slide { -webkit-transform: translateY(60px) translateX(40px); -ms-transform: translateY(60px) translateX(40px); transform: translateY(60px) translateX(40px); } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide + .swiper-slide:hover { -webkit-transform: translateY(65px) translateX(45px); -ms-transform: translateY(65px) translateX(45px); transform: translateY(65px) translateX(45px); } .section_recode .section_title.active .highlight:after, .section_behind .section_title.active .highlight:after { bottom: -20px; left: 9px; background-size: 250px 20px; width: 250px; height: 20px; } .section_recode .content_box .slide_box, .section_behind .content_box .slide_box { position: static; margin-top: 0; width: calc(100% - 448px); } .section_recode .section_title, .section_behind .section_title { font-size: 42px; line-height: 54px; } .section_recode { padding: 160px 0; } .section_behind { padding: 160px 0 90px; } .section_story .inner { padding: 90px 62px; } .section_story .section_title { font-size: 42px; line-height: 54px; } .section_story .story_text_box .story_title { font-size: 24px; line-height: 36px; } .section_story .story_text_box .story_title_desc { font-size: 18px; line-height: 29px; } .section_author { padding: 90px 0 160px; } .section_author .section_title { font-size: 42px; line-height: 54px; } .section_footer .copyright { margin: 0 0 0 337px; } .btn_top { right: 62px; } .sub_content .inner { padding: 0; max-width: 812px; } .section_sub_title .inner { padding: 0; max-width: 812px; } .sub_title_img { padding-top: 39.6%; } .sub_title { padding-top: 140px; } .content_text_box .img_box_wrap + .sub_text_question { margin-top: 80px; } .content_story .inner { max-width: 1148px; margin: 0 auto; padding: 0 42px; } .content_story .story_list { padding: 50px 0 200px; } .pagination_wrap { padding-bottom: 180px; } .content_box { padding: 60px 62px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .content_label_list { width: 120px; padding: 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; display: block; overflow-y: visible; white-space: normal; top: 105px; left: 0; } .content_label_list.active { padding-bottom: 50px; } .content_label_list.active .content_label_item { display: block; } .content_label_list:not(.active) .content_label_item:nth-child(n+12) { display: none; } .content_label_list:not(.active) .content_label_item:has(.btn_label.more) { display: block; } .content_label_list .content_label_item + .content_label_item { margin: 3px 0 0 0; } .content_label_list .content_label_item { display: block; } .content_inner { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0; margin-top: 0; margin-left: 223px; } .author_content .author_list { -ms-grid-columns: (1fr)[5]; grid-template-columns: repeat(5, 1fr); -ms-grid-rows: auto; grid-template-rows: auto; } .author_content .author_list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .author_content .author_list > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } .author_content .author_list > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 3; } .author_content .author_list > *:nth-child(4) { -ms-grid-row: 1; -ms-grid-column: 4; } .author_content .author_list > *:nth-child(5) { -ms-grid-row: 1; -ms-grid-column: 5; } .author_detail_content { padding: 65px 113px 0; max-width: 1316px; margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; } .author_detail_content .swiper-wrapper .swiper-slide { margin-right: 348px; } .author_detail_content .swiper-button-prev { left: -113px; } .author_detail_content .swiper-button-next { right: -113px; } .author_detail_list { display: -ms-grid; display: grid; gap: 34px 68px; -ms-grid-columns: 1fr 68px 1fr; grid-template-columns: repeat(2, 1fr); -ms-grid-rows: auto; grid-template-rows: auto; } .author_detail_list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .author_detail_list > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .author_detail_list .author_item + .author_item { margin-top: 0; } .search_inner { max-width: 633px; } .keyword_box { margin-bottom: 66px; } .search_no_box { padding: 100px 20px 300px; } .search_content .search_result_list { gap: 100px 80px; -ms-grid-columns: 1fr 80px 1fr; grid-template-columns: repeat(2, 1fr); -ms-grid-rows: auto; grid-template-rows: auto; } .search_content .search_result_list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .search_content .search_result_list > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .search_content .search_result_list .result_item { min-height: 224px; } .search_content .thumb_text_box .thumb_box { width: 224px; height: 224px; } .search_content .label_text_box { width: calc(100% - 274px); } } @media screen and (min-width: 1919px){ .wrap .header .inner { padding: 0 82px; max-width: 1920px; margin: 0 auto; } .total_swiper .swiper-button-prev::after, .total_swiper .swiper-button-next::after { width: 50px; height: 50px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#pc_ico_total_active_next); background-repeat: no-repeat; background-position: -255px 0px; background-size: 305px auto; } .total_swiper .swiper-button-prev:hover:after, .total_swiper .swiper-button-next:hover:after { width: 50px; height: 50px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#pc_ico_swiper_hover_next); background-repeat: no-repeat; background-position: -193px -170px; background-size: 305px auto; } .total_swiper .swiper-button-prev { left: 50px; } .total_swiper .swiper-button-prev.swiper-button-disabled:after { width: 58px; height: 58px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#pc_ico_total_disabled_prev); background-repeat: no-repeat; background-position: -130px -170px; background-size: 305px auto; } .total_swiper .swiper-button-next { right: 50px; } .total_swiper .swiper-button-next.swiper-button-disabled:after { width: 58px; height: 58px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#pc_ico_total_disabled_prev); background-repeat: no-repeat; background-position: -130px -170px; background-size: 305px auto; } .total_swiper .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 76px; } .spot .inner { margin: 0 auto; max-width: 1920px; } .spot .spot_content { height: 1026px; } .spot .spot_title_wrap { width: 488px; margin-right: 149px; } .spot .spot_title_wrap .spot_title_desc { font-size: 24px; line-height: 38px; } .spot .spot_title_box .point_title { font-size: 22px; line-height: 33px; } .spot .spot_title_box .spot_title { font-size: 84px; line-height: 101px; } .spot .spot_inner_swiper.swiper-container { width: 710px; height: 734px; } .spot .spot_inner_swiper .swiper-slide { width: 662px !important; height: 662px; } .spot .spot_inner_swiper .swiper-slide .slide_desc_box { bottom: 11px; right: 24px; left: 24px; } .spot .spot_inner_swiper .swiper-slide .slide_desc_box .number { font-size: 16px; line-height: 21px; } .spot .spot_inner_swiper .swiper-slide .slide_desc_box .slide_desc_title { margin-left: 41px; font-size: 14px; line-height: 18px; } .spot .spot_inner_swiper .swiper-slide-active .slide_desc_box { top: 36px; left: 40px; } .spot .spot_inner_swiper .swiper-slide-active .slide_desc_box .number { font-size: 48px; line-height: 48px; } .spot .spot_inner_swiper .swiper-slide-active .slide_desc_box .slide_desc_title { margin: 28px 0 0 0; font-size: 48px; line-height: 62px; } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide { -webkit-transform: translateY(36px) translateX(24px); -ms-transform: translateY(36px) translateX(24px); transform: translateY(36px) translateX(24px); } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide:hover { -webkit-transform: translateY(41px) translateX(29px); -ms-transform: translateY(41px) translateX(29px); transform: translateY(41px) translateX(29px); } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide + .swiper-slide { -webkit-transform: translateY(72px) translateX(48px); -ms-transform: translateY(72px) translateX(48px); transform: translateY(72px) translateX(48px); } .spot .spot_inner_swiper .swiper-slide-active + .swiper-slide + .swiper-slide:hover { -webkit-transform: translateY(77px) translateX(53px); -ms-transform: translateY(77px) translateX(53px); transform: translateY(77px) translateX(53px); } .slide_behind .swiper-slide, .slide_recode .swiper-slide, [class*=slide_curation] .swiper-slide { width: 418px; } .section_recode .swiper-navigation, .section_behind .swiper-navigation { left: 82px; } .section_recode .inner, .section_behind .inner { margin: 0 auto; max-width: 1920px; } .section_behind { padding: 160px 0 160px; } .section_story .inner { padding: 80px 82px 98px; margin: 0 auto; max-width: 1920px; } .section_story .story_list { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); -ms-grid-rows: auto; grid-template-rows: auto; } .section_story .story_list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .section_story .story_list > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } .section_story .story_list > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 3; } .section_story .thumb_img { margin-right: 40px; width: 196px; height: 196px; } .section_author { padding: 96px 0 160px; } .section_author .inner { padding: 0 82px; margin: 0 auto; max-width: 1920px; } .section_footer .inner { padding: 60px 82px 30px; margin: 0 auto; max-width: 1920px; } .btn_top { right: 50px; } .sub_content .inner { max-width: 864px; } .section_sub_title .inner { max-width: 864px; } .sub_title { padding-top: 170px; font-size: 58px; line-height: 81px; } .sub_info_wrap { left: 50px; top: 418px; } .content_text_wrap { padding-bottom: 120px; } .content_text_box + .content_text_box { padding-top: 160px; } .content_text_box .text_box_title { font-size: 30px; line-height: 51px; } .content_text_box .img_box_wrap + .sub_text_question { margin-top: 70px; } .content_story .inner { max-width: 1310px; padding: 0 62px; } [class*=section_curation] { padding-top: 100px; } [class*=section_curation] + [class*=section_curation] { padding-top: 140px; } [class*=section_curation] .inner { padding: 0 82px; max-width: 1920px; margin: 0 auto; } [class*=section_curation] .section_title { margin-bottom: 50px; font-size: 42px; line-height: 54px; letter-spacing: -0.03em; } [class*=section_curation]:last-of-type { padding-bottom: 83px; } .pagination_wrap { padding-bottom: 200px; } .page_title_box { padding: 0px 82px 25px; min-height: 206px; max-width: 1920px; margin: 0 auto; } .content_box { max-width: 1920px; margin: 0 auto; padding: 80px 82px 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .content_inner { margin-left: 315px; } .section_all_content .content_list { gap: 120px 20px; } .author_content { max-width: 1920px; margin: 0 auto; padding: 80px 82px 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .author_content .author_list { -ms-grid-columns: (1fr)[6]; grid-template-columns: repeat(6, 1fr); -ms-grid-rows: auto; grid-template-rows: auto; } .author_content .author_list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .author_content .author_list > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } .author_content .author_list > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 3; } .author_content .author_list > *:nth-child(4) { -ms-grid-row: 1; -ms-grid-column: 4; } .author_content .author_list > *:nth-child(5) { -ms-grid-row: 1; -ms-grid-column: 5; } .author_content .author_list > *:nth-child(6) { -ms-grid-row: 1; -ms-grid-column: 6; } .search_inner { max-width: 864px; } .search_no_box .result_text { font-size: 28px; line-height: 45px; } .search_content .search_content_inner { padding: 100px 82px; max-width: 1920px; margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; } .search_content .search_result_list .result_item { min-height: 238px; } .search_content .thumb_text_box .thumb_box { width: 238px; height: 238px; } .search_content .label_text_box { width: calc(100% - 298px); } } @media screen and (min-width: 1920px){ .section_recode .content_box, .section_behind .content_box { position: relative; padding-left: 82px; } .section_recode .content_box .slide_box, .section_behind .content_box .slide_box { position: static; margin-top: 0; width: calc(100% - 446px); } .author_detail_content .swiper-wrapper .swiper-slide { margin-right: 832px; } } @media (orientation: landscape) and (max-width: 1024px){ .gnb .gnb_footer { bottom: 15px; } } @media (hover: hover) and (pointer: fine){ .btn_top:hover { width: 60px; height: 60px; background-image: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/sp-pc.png#btn_hover_top); background-repeat: no-repeat; background-position: -170px -85px; background-size: 305px auto; } } @media (hover: none){ .btn_top:active { width: 50px; height: 50px; background: url(https://campaign-cdn.pstatic.net/0/naverfficial/1108/img/mo/btn_hover_top.png) no-repeat; background-size: 50px 50px; } } .recommend_image_swiper .swiper-slide{display:block!important}</style></head><body><div id="__next"><div class="wrap"><header class="header ani active"><div class="header_progress" style="display:none"><span class="progress_bar"></span></div><div class="inner"><h1 class="logo"><a href="/"><span class="blind">네이버 피셜</span></a></h1><div class="header_menu"><ul class="header_menu_list"><li class="header_menu_item"><a class="header_menu_link " href="/contentsAll">모든 콘텐츠</a></li><li class="header_menu_item"><a class="header_menu_link " href="/curation">큐레이션</a></li><li class="header_menu_item"><a class="header_menu_link " href="/writers">필진</a></li></ul><button type="button" class="btn_search "><span class="blind">검색</span></button><button type="button" class="btn_gnb"><span class="blind">검색</span></button></div></div><div class="search_box"><div class="search_inner"><div class="search_input_box"><button type="submit" class="search_btn"><i class="icon_search"></i></button><label for="type_search" class="blind">키워드 검색</label><input id="type_search" class="input_search" type="search" placeholder="키워드로 검색해보세요!" value=""/><button type="button" class="search_btn_delete"><i class="icon_search_delete"></i></button></div><div class="keyword_box" style="display:block"><em class="keyword_title">Popular Keyword</em><div class="keyword_list_box"><div class="keyword_list"></div></div></div><p class="search_result_text">0<!-- -->건이 검색되었습니다.</p></div></div></header><div class="gnb_wrap"><div class="gnb"><div class="gnb_inner"><div class="gnb_header"><h2 class="logo"><a href="/"><span class="blind">네이버 피셜</span></a></h2></div><ul class="gnb_list"><li class="gnb_item"><a class="gnb_link " href="/contentsAll">모든 콘텐츠</a></li><li class="gnb_item"><a class="gnb_link " href="/curation">큐레이션</a></li><li class="gnb_item"><a class="gnb_link " href="/writers">필진</a></li></ul><div class="gnb_footer"><a href="https://navercorp.com/" target="_blank" class="gnb_footer_text">© NAVER Corp.</a></div><button type="button" class="btn_close"><span class="blind">메뉴 닫기 버튼</span></button></div></div></div><div class="container"><div class="content_wrap"><div class="content"><div class=""></div><section class="section_story" id="popular_secion"></section></div></div></div> <div style="display:none"><button type="button" class="btn_top"><span class="blind">맨 위로 가기</span></button></div><footer class="section_footer" style="display:none"><div class="inner"><div class="footer_content_wrap"><div class="footer_content"><ul class="footer_menu_list"><li class="menu_item"><a target="_blank" class="item_link" href="https://www.instagram.com/naver_official/">INSTAGRAM</a></li><li class="menu_item"><a target="_blank" class="item_link" href="https://recruit.navercorp.com/main.do">NAVER CAREERS</a></li><li class="menu_item"><a target="_blank" class="item_link" href="https://tv.naver.com/playnaver">NAVER TV</a></li><li class="menu_item"><a target="_blank" class="item_link" href="https://blog.naver.com/naver_diary">NAVER DIARY</a></li></ul><div class="footer_service"><ul class="service_list"><li class="menu_item"><a target="_blank" class="item_link" href="https://help.naver.com/service/30016/category/5993?lang=ko">고객센터</a></li></ul></div></div><div class="copyright"><a href="https://navercorp.com/" target="_blank">© NAVER Corp.</a></div></div><div class="footer_logo"><a class="footer_logo_link" href="/"><span class="blind">NAVERFFICIAL</span></a></div></div></footer></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"FBhxk8RwwK8TlyUGnpKti","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>