@charset "utf-8";


/* Default */
* {margin: 0; padding: 0;}
body {font-family: 'NotoSansKR', Arial, Helvetica, sans-serif; letter-spacing: -0.01em;}
header, footer, main, section, article, aside, nav, figure, figcaption {display: block;}
address {font-style: normal;}
fieldset, hr {display: block; margin: 0; padding: 0; border: 0 none;}
img {max-width: 100%; font-size: 0; border: 0; vertical-align: middle;}

table {width: 100%; border-spacing: 0; table-layout: fixed; word-break: break-all; border-collapse: collapse;}

input, select {max-width: 100%; vertical-align: middle;}
input, select, button, textarea, optgroup {margin: 0; font-family: inherit; font-size: inherit; color: inherit; font-weight: inherit; box-sizing: border-box; outline: none;}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {position: absolute; top: 0; right: 0; width: 40px; height: 100%; opacity: 0;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 30px #fff inset;}

select {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
select::-ms-expand {display: none;}

a {text-decoration: none;}
input[type='submit'] {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
button {text-decoration: none; background: none; border: 0; outline: 0; white-space: nowrap; cursor: pointer; letter-spacing: -0.04em;}


/* select, input */
.input,
.select,
.textarea {position: relative; padding: 0; max-width: 100%; line-height: 22px; font-size: 14px; color: #303030; font-weight: 400; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 4px;}
.input.full,
.select.full,
.textarea.full {width: 100% !important;}
.input::placeholder,
.textarea::placeholder {color: #808080;}
.input:focus,
.select:focus,
.textarea:focus {}
.select option[value=""][disabled] {display: none;}
.textarea {resize: none;}
.input:disabled,
.input.disabled {}


/* checkbox - custom */
.check {position: relative; min-width: 22px; min-height: 22px;}
.check input {display: none; width: 22px; min-height: 22px;}
.check input + label {display: inline-block; padding: 0 0 0 26px; min-height: 22px; line-height: 22px; font-size: 14px; color: #303030; font-weight: 400; vertical-align: top; cursor: pointer;}

.check input[type="checkbox"] + label {background: url(../images/check_button_none.svg) 0 60% no-repeat;}
.check input[type="checkbox"]:checked + label {background: url(../images/check_button_press.svg) 0 60% no-repeat;}

.check input[type="radio"] + label {background: url(../images/radio_button_none.svg) 0 50% no-repeat;}
.check input[type="radio"]:checked + label {background: url(../images/radio_button_press.svg) 0 50% no-repeat;}


/* custom select */
.custom-select {position: relative; width: 100%;}
.select-label {position: relative; width: 100%; padding: 12px 46px 12px 12px; line-height: 22px; font-size: 14px; color: #303030; background: #fff; border: 1px solid #dedede; border-radius: 6px; box-sizing: border-box; text-align: left; cursor: pointer;}
.select-label:after {display: block; content: ''; position: absolute; top: 12px; right: 15px; transform: translateY(-50%); width: 24px; height: 24px; background: url(../images/select_arrow.svg) center center no-repeat; transform-origin: center; transform: rotate(180deg);}

.select-options-wrap {display: none; position: absolute; top: 100%; left: 0; margin: -1px 0 0; width: 100%; background-color: #fff; border: 1px solid #dedede; border-radius: 0; box-sizing: border-box;}
.select-options {list-style: none; margin: 20px 10px 20px 0; padding: 0 5px 0 15px; height: 311px; overflow-y: auto; z-index: 50;}
.select-options::-webkit-scrollbar {width: 6px; height: 6px;}
.select-options::-webkit-scrollbar-thumb {background-color: #00b6f0; border: none; border-radius: 7px; background-clip: padding-box;}
.select-options::-webkit-scrollbar-track {background-color: #f2f2f2;}

.custom-select.active .select-label {border-radius: 6px 6px 0 0;}
.custom-select.active .select-options-wrap {display: block;}

.select-options li {margin-top: 16px; padding: 0; font-size: 14px; color: #303030; font-weight: 400; cursor: pointer; outline: none;}
.select-options li:first-child {margin-top: 0;}
.select-options li[aria-selected="true"] {color: #00b6f0;}
.select-options li[aria-selected="true"] span {border-bottom: 1px solid #00b6f0;}


/* common */
.hidden {display: none !important;}
.blind {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}
.inner {margin: 0 auto; width: 1280px; max-width: 100%; box-sizing: border-box;}

html, body {width: 100%; height: 100%; overscroll-behavior: contain;}
body {overflow-y: scroll;}
html.stop-scroll {overflow-y: scroll;}
html.stop-scroll body {overflow: hidden;}

  @media (max-width: 1280px) {
    .inner {padding: 0 16px;}
    html.stop-scroll body {position: fixed; width: 100%;}
  }


/* header */
.header-wrap {position: fixed; width: 100%; z-index: 80;}
.header-wrap.hide {transform: translateY(-100%);}
.header {background-color: #00b6f0;}
.header .inner {display: flex; justify-content: space-between; align-items: center; position: relative; height: 90px;}

.header .left {display: flex; align-items: flex-start;}

.header .logo {position: relative;}
.header .logo a:before {display: block; content: ''; width: 149px; height: 42px; background: url(../images/logo_header.svg) 0 center no-repeat;}

.header .btn-site {position: relative; margin: 4px 0 0 7px;}
.header .btn-site:before {display: block; content: ''; width: 24px; height: 24px; background: url(../images/icon_site_dropdown.svg) center center no-repeat;}
.header .btn-site.active:before {transform: rotate(180deg);}

.header .search-wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.header .search-wrap .input {padding: 9px 58px 9px 20px; width: 410px; height: 40px; font-size: 12px; border: none; border-radius: 40px; box-sizing: border-box;}
.header .search-wrap .search {position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
.header .search-wrap .search:before {display: block; content: ''; width: 28px; height: 28px; background: url(../images/icon_search.svg) center center no-repeat;}

.header .util {display: flex; align-items: center; list-style: none;}
.header .util li {position: relative; margin-left: 20px; padding-left: 20px;}
.header .util li:first-child {flex-grow: 1; margin-left: 0; padding-left: 0; min-width: 0;}
.header .util li:not(:first-child) {flex-shrink: 0; margin-left: 15px;}
.header .util li:before {display: block; content: ''; position: absolute; top: 50%; left: -0.5px; transform: translateY(-50%); margin-top: 2px; width: 1px; height: 14px; background-color: #3cd0ff;}
.header .util li:first-child::before {display: none;}
.header .util li * {font-size: 14px; color: #fff; font-weight: 500;}
.header .util .user {display: flex; align-items: center; box-sizing: border-box;}
.header .util .user .name {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;}
.header .util .user .id,
.header .util .user .txt {flex-shrink: 0; white-space: nowrap;}
.header .util .user .txt {margin-left: 3px; font-weight: 400;}

.header .util .lang {position: relative; padding: 0 20px 0 30px; min-width: 110px; text-align: left;}
.header .util .lang:before {display: block; content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 24px; height: 24px; background: url(../images/icon_earth.svg) center center no-repeat;}
.header .util .lang:after {display: block; content: ''; position: absolute; top: 5px; right: 0; width: 10px; height: 10px; background: url(../images/icon_earth_arrow.svg) center center no-repeat; transform-origin: center; transition: all 0.3s;}
html.stop-scroll .header .util .lang:after {transform: rotate(90deg);}

.haeder .btn-lnb,
.header .btn-search {display: none;}

  @media (min-width: 1281px) {
    .header.hide-site .btn-site {display: none;}
    .header .right {max-width: calc(50% - 225px);}
  }
  @media (max-width: 1280px) {
    .header-wrap {position: fixed; width: 100%;}
    .header .inner {height: 56px;}
    .header .left {gap: 10px; align-items: center;}
    .header .logo {display: flex; align-items: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%;}
    .header .logo a:before {width: 94px; height: 27px; background-image: url(../images/m_logo_header.svg);}
    .header .btn-site {margin: 0;}

    .header .search-wrap {display: none; left: initial; right: 16px; transform: translate(0, -50%); width: calc(100% - 100px);}
    .header .search-wrap.active {display: block;}
    .header .search-wrap .input {padding: 9px 50px 9px 16px; width: 100%; height: 36px;}
    .header .search-wrap .search {right: 16px;}
    .header .search-wrap .search:before {width: 24px; height: 24px;}

    .header .util {display: none;}
    .header .util .user .txt {margin-left: 0;}

    .header .btn-lnb,
    .header .btn-search {display: block;}    
    .header .btn-lnb:before,
    .header .btn-search:before {display: block; content: ''; width: 24px; height: 24px; background-position: center center; background-repeat: no-repeat;} 
    .header .btn-lnb:before {background-image: url(../images/icon_lnb.svg);}
    .header .btn-search:before {background-image: url(../images/m_icon_search_white.svg);}
    
    .app .header .btn-lnb {display: none;}
    .app .header .search-wrap {width: calc(100% - 66px);}
  }


/* site */
.site ul {list-style: none;}
.site a {display: block; position: relative; padding-left: 34px; line-height: 24px; font-size: 14px; color: #303030; font-weight: 400;}
.site a:before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 24px; height: 24px; background-position: center center; background-repeat: no-repeat;}
.site a.shop:before {background-image: url(../images/atomy_shop.svg);}
.site a.ch:before {background-image: url(../images/atomy_ch.svg);}
.site a.ticket:before {background-image: url(../images/atomy_ticket.svg);}
.site a.abc:before {background-image: url(../images/atomy_abc.svg);}
.site a.mt:before {background-image: url(../images/atomy_mt.svg);}
.site a.comm:before {background-image: url(../images/atomy_comm.svg);}
.site a.global:before {background-image: url(../images/atomy_global.svg);}
.site a.aza:before {background-image: url(../images/atomy_aza.svg);}
.site a.atg:before {background-image: url(../images/atomy_atg.svg);}
.site a.ideas:before {background-image: url(../images/atomy_ideas.svg);}
.site a.gaza:before {background-image: url(../images/atomy_gaza.svg);}

.site a.disabled {color: #dedede; pointer-events: none; cursor: default;}
.site a.ticket.disabled:before {background-image: url(../images/atomy_ticket_disabled.svg);}
.site a.abc.disabled:before {background-image: url(../images/atomy_abc_disabled.svg);}
.site a.mt.disabled:before {background-image: url(../images/atomy_mt_disabled.svg);}
.site a.comm.disabled:before {background-image: url(../images/atomy_comm_disabled.svg);}

.site-dropdown {display: none; position: absolute; top: 100%; left: 0; padding: 16px; min-width: 180px; background-color: #fff; border-radius: 0 0 10px 10px; box-shadow: 0 6px 8px 0 rgb(0 0 0 / 10%); box-sizing: border-box; z-index: 5;}
.site-dropdown.active {display: block;}
.site-dropdown li {margin-top: 16px;}
.site-dropdown li:first-child {margin-top: 0;}
.site-dropdown li.mob {display: none;}

.site-tab {position: relative; background-color: #fff; border-bottom: 1px solid #dddddd; box-shadow: 0 10px 10px 0 rgb(47 59 77 / 8%); box-sizing: border-box;}
.site-tab ul {display: flex; gap: 50px; justify-content: center; align-items: center; height: 59px; box-sizing: border-box;}

  @media (min-width: 1281px) {
    .header.hide-site .site-dropdown {display: none;}
    .site-dropdown li.mob + li {margin-top: 0;}
  }
  @media (max-width: 1280px) {
    .site-dropdown {width: 160px;}
    .site-dropdown li.mob {display: block;}
    .site-tab {display: none;}
  }


/* mob lnb */
.lnb-wrap {display: none;}

  @media (max-width: 1280px) {
    .lnb-wrap {display: none; position: fixed; top: 0; left: 0; z-index: 100;}
    .lnb-wrap.active {display: block;}
    .lnb {position: fixed; top: 0; left: 0; width: 320px; max-width: calc(100% - 40px); height: 100%; background-color: #fff; overflow: hidden; overflow-y: auto;}

    .lnb-head {position: relative; padding: 40px 16px 30px; background-color: #00b6f0; box-sizing: border-box;}
    .lnb .logo {position: relative;}
    .lnb .logo:before {display: block; content: ''; width: 94px; height: 27px; background: url(../images/m_logo_header.svg) 0 center no-repeat;}
    .lnb-close {position: absolute; top: 41.5px; right: 16px;}
    .lnb-close:before {display: block; content: ''; width: 24px; height: 24px; background: url(../images/m_icon_x_white.svg) center center no-repeat;}
    .lnb .user {display: flex; position: relative; margin-top: 26px; max-width: 100%; height: 53px; box-sizing: border-box;}
    .lnb .user .name,    
    .lnb .user .id,    
    .lnb .user .txt {display: inline-block; line-height: 24px; font-size: 16px; color: #fff; font-weight: 500;} 
    .lnb .user .name {flex-shrink: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;}   
    .lnb .user .id,    
    .lnb .user .txt {flex-shrink: 0; white-space: nowrap;}
    .lnb .log-in,
    .lnb .log-out {position: absolute; left: 0; bottom: 0; font-size: 12px; color: #fff; font-weight: 400; box-sizing: border-box; z-index: 1;}
    .lnb .log-in {width: 65px; line-height: 27px; border: 1px solid #fff; border-radius: 4px;}
    .lnb .log-out {line-height: 14px; border-bottom: 1px solid #fff;}

    .lnb-body {position: relative; padding: 20px 16px 30px;}
    .lnb .site li {padding: 13px 0 10px; border-bottom: 1px solid #eee;}
    .lnb .site li:first-child {padding-top: 0;}
    .lnb .site a {padding-left: 36px; line-height: 30px;}
    .lnb .site a:before {width: 30px; height: 30px; background-size: 100% 100%;}

    .lnb .custom-select {margin-top: 30px;}
    .lnb .select-label:after {transform: rotate(0);}
    .lnb .select-options-wrap {top: initial; bottom: 100%; margin: 0 0 -1px;}
    .lnb .custom-select.active .select-label {border-radius: 0 0 6px 6px;}
    .lnb .custom-select.active .select-label:after {transform: rotate(180deg);}

    .lnb .short {margin-top: 30px;}
    .lnb .short ul {display: flex; justify-content: center; align-items: center; list-style: none;}
    .lnb .short li {flex: 1; position: relative; padding: 0 20px;}
    .lnb .short li:first-child {text-align: right;}
    .lnb .short li:before {display: block; content: ''; position: absolute; top: 50%; left: -0.5px; transform: translateY(-50%); margin-top: 2px; width: 1px; height: 10px; background-color: #dedede;}
    .lnb .short li:first-child::before {display: none;}
    .lnb .short li a {font-size: 12px; color: #808080; font-weight: 400;}
    .lnb .short li em {font-style: normal; font-weight: 500;}

    .lnb-dim {display: none; content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 50%); z-index: 99;}
    .lnb-dim.active {display: block;}
  }


/* layer */
.layer {position: relative; background-color: #fff; box-sizing: border-box; z-index: 100;}
.layer-head {display: flex; align-items: center; position: relative; padding: 10px 40px 10px 20px; height: 60px; border-bottom: 1px solid #ddd; box-sizing: border-box;}
.layer-title {font-size: 18px; color: #303030; font-weight: 500;}
.layer-close {position: absolute; top: 50%; right: 10px; transform: translateY(-50%);}
.layer-close:before {display: block; content: ''; width: 24px; height: 24px; background: url(../images/layer_close.svg) center center no-repeat;}

.layer-body {padding: 20px; max-height: calc(100% - 60px); overflow-y: auto; box-sizing: border-box;}


/* layer lang */
.layer-lang {position: fixed; top: 0; right: 0; height: 100%; visibility: hidden; transition: visibility 0.4s; z-index: 100;}
.layer-lang.active {visibility: visible;}

.layer-lang .layer {position: fixed; top: 0; right: -300px; width: 280px; height: 100%; transition: right 0.4s ease-out;}
.layer-lang.active .layer {right: 0;}

.layer-lang .layer-body {margin: 20px 10px 20px 0; padding: 0; max-height: calc(100% - 100px); overflow-y: auto; box-sizing: border-box;}
.layer-lang .layer-body::-webkit-scrollbar {width: 6px; height: 6px;}
.layer-lang .layer-body::-webkit-scrollbar-thumb {background-color: #00b6f0; border: none; border-radius: 7px; background-clip: padding-box ;}
.layer-lang .layer-body::-webkit-scrollbar-track {background-color: #f2f2f2;}

.layer-lang .area {margin-right: 18px;}
.layer-lang .area-title {padding: 0 10px 0 20px; font-size: 18px; color: #303030; font-weight: 500;}
.layer-lang ul {list-style: none; margin: 15px 0 30px; padding: 0 10px 20px 20px; border-bottom: 1px solid #f6f6f8;}
.layer-lang li {margin-top: 10px;}
.layer-lang li:first-child {margin-top: 0;}
.layer-lang .check input[type="radio"]:checked + label {position: relative; color: #00b6f0;}
/* .layer-lang .check input[type="radio"]:checked + label:before {display: block; content: ''; position: absolute; top: 100%; left: 26px; margin-top: -3px; width: calc(100% - 26px); height: 1px; background-color: #00b6f0;} */

.layer-lang-dim {display: block; content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 50%); visibility: hidden;  opacity: 0; transition: opacity 0.4s; z-index: 99;}
.layer-lang-dim.active {visibility: visible; opacity: 1;}

  @media (max-width: 1280px) {
    .layer-lang {display: none; visibility: visible;}
    .layer-lang.app-active {display: block;}
    .layer-lang .layer {right: initial; top: 56px; left: 50%; transform: translateX(-50%); width: 327px; max-width: calc(100% - 32px); max-height: calc(100% - 180px);}
    .layer-lang-dim {display: none; visibility: visible; opacity: 1;}
    .layer-lang-dim.app-active {display: block;}
  }


/* footer */
.footer {position: relative; background-color: #353536;}
.footer .inner {display: flex; justify-content: space-between; align-items: center; height: 120px;}

.footer .btn-gotop {/* display: none; */ position: fixed; right: 80px; bottom: 100px; width: 50px; height: 50px; background-color: rgb(255 255 255 / 90%); border: 1px solid #dddddd; border-radius: 10px; box-shadow: 2px 2px 8px 0 rgb(101 105 108 / 20%); box-sizing: border-box; cursor: pointer; z-index: 98;}
.footer .btn-gotop:before {display: block; content: ''; width: 100%; height: 100%; background: url(../images/icon_top_button.svg) center center no-repeat;}
.footer .btn-gotop.stop {position: absolute; bottom: 220px;}
.footer .btn-gotop span {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}

.footer .left {display: flex; gap: 20px; align-items: center;}
.footer .logo {position: relative;}
.footer .logo:before {display: block; content: ''; width: 98px; height: 29px; background: url(../images/logo_footer.svg) 0 center no-repeat;}
.footer .copy {font-size: 12px; color: #808080; font-weight: 400;}

.footer .right ul {display: flex; align-items: center; list-style: none;}
.footer .right li {position: relative; margin-left: 20px; padding-left: 20px;}
.footer .right li:first-child {margin-left: 0; padding-left: 0;}
.footer .right li:before {display: block; content: ''; position: absolute; top: 50%; left: -0.5px; transform: translateY(-50%); margin-top: 2px; width: 1px; height: 10px; background-color: #808080;}
.footer .right li:first-child::before {display: none;}
.footer .right li a {font-size: 14px; color: #808080; font-weight: 400;}

  @media (max-width: 1280px) {
    .footer .inner {height: 0;}
    .footer .left,
    .footer .right {display: none;}
    .footer .btn-gotop {right: 16px; bottom: 40px; width: 40px; height: 40px;}
    .footer .btn-gotop:before {background-size: 15px auto;}
    .footer .btn-gotop.stop {bottom: 40px;}
  }


/* main */
.container {position: relative; padding: 150px 0 50px; box-sizing: border-box;}

  @media (min-width: 1281px) {
    .container {min-height: calc(100vh - 270px); min-height: calc(100dvh - 270px);}
  }
  @media (max-width: 1280px) {
    .container {padding: 56px 0 0;}
  }


/* banner */
.banner {position: relative; padding-top: 40px;}
.banner-mob {display: none;}
.banner .inner {position: relative;}
.banner .inner:before {display: block; content: ''; padding-bottom: 28.125%;}
.banner .swiper {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px;}
.banner .swiper-slide a {display: block; height: 100%; border-radius: 20px; box-sizing: border-box; overflow: hidden;}
.banner .swiper-slide .img {display: block; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover;}

.banner .swiper-pagination-fraction {left: initial; right: 56px; bottom: 21px; width: 54px; line-height: 25px; font-size: 12px; color: #fff; font-weight: 500; background-color: rgb(0 0 0 / 30%); border-radius: 20px; z-index: 30;}

.banner .swiper-button-prev,
.banner .swiper-button-next {position: absolute; top: 50%; transform: translateY(-50%); margin: 0; width: 60px; height: 60px; background-color: #fff; border-radius: 50%; box-shadow: 2px 4px 10px 0 rgb(101 105 108 / 20%); z-index: 30;}
.banner .swiper-button-prev {left: -30px;}
.banner .swiper-button-next {right: -30px;}
.banner .swiper-button-prev:before,
.banner .swiper-button-next:before {display: block; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; width: 8px; height: 14px; background-position: center center; background-repeat: no-repeat;}
.banner .swiper-button-prev:before {background-image: url(../images/banner_prev.svg);}
.banner .swiper-button-next:before {background-image: url(../images/banner_next.svg);}
.banner .swiper-button-prev:after,
.banner .swiper-button-next:after {display: none;}
.banner .swiper-button-prev span,
.banner .swiper-button-next span {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}

.banner .swiper-controls {position: absolute; right: 22px; bottom: 21.5px; z-index: 30;}
.banner .swiper-controls button {display: block; position: relative; width: 24px; height: 24px; background-color: rgb(0 0 0 / 30%); border: 0; border-radius: 20px; cursor: pointer;}
.banner .swiper-controls button:before {display: block; content: ''; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat;}
.banner .swiper-controls button.btn-pause:before {background-image: url(../images/banner_pause.svg);}
.banner .swiper-controls button.btn-play:before {background-image: url(../images/banner_play.svg); background-position: 55% 55%;}
.banner .swiper-controls button span {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}

.ban-text {position: absolute; top: 50%; left: 0; transform: translateY(-50%); padding: 0 40px 0 6.5%; width: 100%; box-sizing: border-box;}
.ban-text-title {display: block; line-height: 54px; font-size: 42px; color: #303030; font-weight: 400;}
.ban-text-title em {font-style: normal; font-weight: 700;} 
.ban-text-span {display: block; margin-bottom: 10px; line-height: 22px; font-size: 16px; color: #303030; font-weight: 400;}
.ban-text-arrow {display: block; position: relative; margin-top: 30px;}
.ban-text-arrow:before {display: block; content: ''; width: 66px; height: 12px; background: url(../images/banner_text_arrow.svg) 0 center no-repeat;}

  @media (max-width: 1354px) {
    .banner .swiper-button-prev,
    .banner .swiper-button-next {display: none;}
  }
  @media (max-width: 1280px) {
    .banner {padding-top: 0;}
    .banner .swiper,    
    .banner .swiper-slide a {border-radius: 0;}

    .ban-text-title {line-height: 28px; font-size: 20px;}
    .ban-text-span {line-height: 20px; font-size: 14px;}
  }
  @media (max-width: 768px) {
    .banner-pc {display: none;}
    .banner-mob {display: block;}
    .banner .inner:before {padding-bottom: 55.834%;}

    .ban-text {padding: 0 24px;}
  }


/* search result */
.search-result {position: relative; background-color: #f6f6f8;}
.search-result .inner {display: flex; justify-content: center; align-items: center; height: 160px;}
.search-result .text-box .text-p {font-size: 18px;}

.search-no-result ~ .search-area {display: none;}

  @media (min-width: 1281px) {    
    .search-no-result {display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 320px); min-height: calc(100dvh - 320px);}
    .search-no-result .text-box:before {display: block; content: ''; margin: 0 auto 8px; width: 58px; height: 58px; background: url(../images/search_no_result.svg) center center no-repeat;}
  }
  @media (max-width: 1280px) {
    .search-result {background-color: #fff;}
    .search-result .inner {height: 140px;}
    .search-result .text-box .text-p {font-size: 14px;}

    .search-no-result .inner {display: flex; justify-content: center; align-items: center; height: 140px;}
    .search-no-result + .search-area .text-box:before {display: block; content: ''; margin: 0 auto 8px; width: 58px; height: 58px; background: url(../images/search_no_result.svg) center center no-repeat;}
  }


/* section */
.section {position: relative; padding-top: 100px;}
.section:last-child {padding-bottom: 100px;}

.sec-head {display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 20px;}
.sec-head .title {display: flex; gap: 10px; align-items: center; line-height: 30px;}
.sec-head .title strong {font-size: 26px; color: #303030; font-weight: 500;}
.sec-head .title span {font-size: 16px; color: #808080; font-weight: 400;}
.sec-head .more {position: relative; padding-right: 12px; font-size: 12px; color: #808080; font-weight: 400;}
.sec-head .more:after {display: block; content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin-top: 1px; width: 4px; height: 6px; background: url(../images/icon_more.svg) center center no-repeat;}

  @media (max-width: 1280px) {
    .section {padding: 30px 0; background-color: #fff; border-top: 10px solid #efefef;}
    .section:first-child {border-top: 0;}    
    .section:last-child {padding-bottom: 30px;}

    .search-area {border-top: 10px solid #efefef; box-sizing: border-box;}
    .search-no-result ~ .search-area {display: flex; justify-content: center; align-items: center; padding: 20px 16px; height: calc(100vh - 206px); height: calc(100dvh - 196px);}

    .sec-head {margin-bottom: 14px;}
    .sec-head .title strong {font-size: 18px;}
    .sec-head .title span {font-size: 14px;}
  }


/* article */
.article {display: block; position: relative; box-sizing: border-box;}
.article .image {display: block; position: relative; margin-bottom: 20px; overflow: hidden;}
.article .image:before {display: block; content: ''; padding-bottom: 58.035%;}
.article .image .img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center;}
.article .image .img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; min-height: 100%;}

.article .info {position: relative; box-sizing: border-box;}
.article .info span {margin-bottom: 14px;}
.article .info span:last-child {margin-bottom: 0 !important;}
.article .title {display: block; line-height: 1.2; font-size: 18px; color: #303030; font-weight: 500;}
.article .cate,
.article .date,
.article .number,
.article .location {display: block; position: relative; line-height: 1.2; font-size: 14px; color: #808080; font-weight: 400;}
.article .cate {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.article .location {padding-left: 24px;}
.article .location:before {display: block; content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 24px; height: 24px; background: url(../images/Icon_Location.svg) center center no-repeat;}

.sec-shop .article .image:before {padding-bottom: 100%;}
.sec-shop .article .title {font-weight: 400;}
.sec-shop .article .title em {font-style: normal; font-weight: 500;}
.sec-shop .article .price span {display: block; margin-bottom: 6px;}
.sec-shop .article .price span:last-child {margin-bottom: 0 !important;}
.sec-shop .article .price em {font-style: normal; font-weight: 500;}
.sec-shop .article .price .prc {line-height: 24px; font-size: 14px; color: #303030;}
.sec-shop .article .price .prc em {display: inline-block; margin-top: -1px; font-size: 20px; vertical-align: top;}
.sec-shop .article .price .pv {line-height: 19px; font-size: 16px; color: #00b6f0; font-weight: 500;}
.sec-shop .article .price .pv-up {position: relative; padding-left: 35px; line-height: 14px; font-size: 12px; color: #808080; text-decoration: line-through;}
.sec-shop .article .price .pv-up::before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 32px; height: 14px; background: url(../images/pv_up.svg) 0 center no-repeat; background-size: auto 14px;}

  @media (max-width: 1280px) {
    .article {min-width: 240px;}
    .article .image {margin-bottom: 10px;}
    .article .info span {margin-bottom: 4px;}
    .article .title {font-size: 14px; font-weight: 400;}
    .article .cate,
    .article .date,
    .article .number,
    .article .location {font-size: 12px;}
    .article .title + .date {margin-top: 10px;}

    .sec-shop .article {min-width: 144px;}
    .sec-shop .article .title {margin-bottom: 14px;}
    .sec-shop .article .price span {margin-bottom: 4px;}
    .sec-shop .article .price .prc {line-height: 19px; font-size: 12px;}
    .sec-shop .article .price .prc em {font-size: 16px;}
    .sec-shop .article .price .pv {line-height: 17px; font-size: 14px;}
    .sec-shop .article .price .pv-up {font-size: 12px;}
  }


/* list grid */
.grid-list ul {display: flex; gap: 20px; list-style: none;}
.grid-list li {float: none; width: calc((100% - (20px * 3)) / 4); min-width: 240px;}
.sec-shop .grid-list li {min-width: 144px;}

.grid-list .title {display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; line-height: 22px;}

  @media (max-width: 1280px) {
    .grid-list .article {padding-bottom: 18px;}
    .grid-list .title {line-height: 20px;}
    .grid-list ul {gap: 16px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;}
    .grid-list ul::-webkit-scrollbar {display: none !important; width: 0 !important; height: 0 !important;}
    .grid-list ul::-webkit-scrollbar-thumb {background: transparent !important;}
    .grid-list ul::-webkit-scrollbar-track {background: transparent !important;}
    .grid-list li {width: calc((100% - (16px * 3)) / 4);}
    
    .search-area .grid-list ul {flex-wrap: wrap;}
    .search-area .grid-list li {flex: none; width: calc(50% - 8px); min-width: inherit;}
    .search-area .grid-list .article {width: 100%; min-width: inherit;}
  }

  
/* list card */
.card-list ul {display: flex; gap: 20px; flex-wrap: wrap; list-style: none;}
.card-list li {width: calc(50% - 10px);}
.card-list .article {border: 1px solid #ddd; border-radius: 10px; overflow: hidden;}
.card-list .article .info {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; flex-direction: row-reverse; position: relative; padding: 20px;}
.card-list .article .info span {margin-bottom: 0;}
.card-list .article .info .title {flex: 1; padding-right: 10px; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;}
.card-list .article .info .date {display: flex; gap: 4px; align-items: center; margin-bottom: 10px; width: 100%; height: 30px; font-size: 14px;}
.card-list .article .info .date em {font-size: 20px; color: #303030; font-weight: 500; font-style: normal;}
.card-list .article .info .date span {color: #808080; font-weight: 400;}

.card-list .article .info .cate-label {flex: none; max-width: 30%;}
.card-list .article .info .cate {display: inline-block; padding: 0 14px; max-width: 100%; line-height: 25px; font-size: 14px; color: #1f1f1f; font-weight: 400; border-radius: 100px; box-sizing: border-box; vertical-align: top;}
.card-list .article .info .cate-red {background-color: #fbbbb4;}
.card-list .article .info .cate-yellow {background-color: #fbd368;}
.card-list .article .info .cate-green {background-color: #d9e271;}
.card-list .article .info .cate-blue {background-color: #8ad7f8;}

.card-list .article .location {float: none; position: absolute; top: 100%; right: 20px; margin-top: 10px; max-width: calc((100% - 40px) * 0.3); line-height: 24px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; box-sizing: border-box;}

.card-list .article .bottom {display: flex; justify-content: space-between; align-items: center; padding: 0 20px; height: 44px; background-color: #f6f6f8; box-sizing: border-box;}
.card-list .article .bottom span {line-height: 24px;}
.card-list .article .bottom .left {display: flex; gap: 20px; align-items: center; padding-right: 10px; max-width: 70%; box-sizing: border-box;}
.card-list .article .bottom .date,
.card-list .article .bottom .number {padding-left: 30px;}
.card-list .article .bottom .date:before,
.card-list .article .bottom .number:before {display: block; content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 24px; height: 24px; background-position: center center; background-repeat: no-repeat;}
.card-list .article .bottom .date:before {background-image: url(../images/Icon_calendar.svg);}
.card-list .article .bottom .number:before {background-image: url(../images/icon_ticket.svg);}

  @media (max-width: 1280px) {
    .card-list ul {gap: 12px;}
    .card-list li {flex: none; width: 100%;}

    .card-list .article .info {flex-direction: row; padding: 20px 16px 20px 58px;}
    .card-list .article .info .title {line-height: 24px;}
    .card-list .article .info .date {align-content: center; flex-wrap: wrap; align-content: center; position: absolute; top: 0; left: 0; width: 54px; height: 100%; text-align: center;}
    .card-list .article .info .date em {width: 100%; line-height: 1; font-size: 22px;}
    .card-list .article .info .date span {width: 100%; font-size: 10px;}
    .card-list .article .info .cate-label {width: 100%; max-width: 100%;}
    .card-list .article .info .cate {margin-bottom: 10px; padding: 0 10px; line-height: 14px; font-size: 12px;}

    .card-list .article .location {position: relative; top: inherit; right: inherit; margin-top: 0; max-width: 30%;}

    .card-list .article .bottom {padding: 0; height: 0;}
    .card-list .article .bottom .left {display: none;}
  }


/* notice */
.notice .inner {display: flex; align-items: center; height: 50px; border-bottom: 1px solid #ddd; box-sizing: border-box;}
.notice-wrap {flex: 1; position: relative; min-width: 0; height: 100%;}
.notice-item {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0s ease;}
.notice-item.active {opacity: 1; visibility: visible;}
.notice-item a {display: inline-flex; align-items: center; gap: 10px; max-width: 100%; height: 100%; font-size: 16px; text-decoration: none; box-sizing: border-box;}
.notice .cate {flex-shrink: 0; color: #303030; font-weight: 500;}
.notice .title {flex: 1; color: #808080; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

  @media (max-width: 1280px) {
    .notice .inner {height: 44px;}
    .notice a {width: 100%; font-size: 12px;}
    .notice .cate {font-weight: 400;}
  }
  @media (max-width: 768px) {
    .notice .inner {border-bottom: 0;}
  }
  


/* flex center */
.flex-center {display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 320px); min-height: calc(100dvh - 320px);}
.flex-center .button {display: flex; justify-content: center; align-items: center; margin: 20px auto 0; width: 326px; max-width: 100%; height: 47px; font-size: 16px; color: #fff; font-weight: 500; background-color: #00b6f0;}

.text-box {position: relative; line-height: 1.2; text-align: center;}
.text-box .title {display: block; font-size: 24px; color: #303030; font-weight: 400;}
.text-box .text-p {margin-top: 8px; line-height: 1.4; font-size: 16px; color: #808080; font-weight: 400;}
.text-box .text-p + .text-p {margin-top: 0;}
.text-box .text-p em {font-style: normal; color: #00b6f0; font-weight: 500;}
.text-box .text-span {display: block; margin-top: 8px; font-size: 12px; color: #808080; font-weight: 400;}

  @media (max-width: 1280px) {
    .flex-center {min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px);}
    .flex-center .button {width: 328px; height: 45px; font-size: 14px;}

    .text-box .title {font-size: 20px;}
    .text-box .text-p {font-size: 14px;}
    .text-box .text-p.mob-hide {display: none;}    

    .search-no-result ~ .section-wrap .text-box .text-p {margin-top: 0;}
  }


/* page load error */
.page-error .text-box:before {display: block; content: ''; margin: 0 auto 8px; width: 58px; height: 58px; background: url(../images/page_error.svg) center center no-repeat; tr}


/* login */
.login-box {position: relative; margin: 0 auto; padding: 60px; width: 446px; max-width: 100%; background-color: #fff; border: 1px solid #dddddd; border-radius: 15px; box-sizing: border-box;}
.login-box .title {margin-bottom: 20px; line-height: 1.2; text-align: center;}
.login-box .title strong {display: block; font-size: 24px; color: #303030; font-weight: 500;}
.login-box .title span {display: block; margin-top: 8px; font-size: 18px; color: #808080; font-weight: 400;}
.login-box .input-wrap .input {padding: 0 10px 0 38px; width: 100%; height: 44px; border: 0; border-bottom: 1px solid #dddddd; border-radius: 0;}
.login-box .input-id,
.login-box .input-pw {display: block; position: relative;}
.login-box .input-pw {margin-top: 20px;}

.login-box .input-id:before,
.login-box .input-pw:before {display: block; content: ''; position: absolute; top: 0; left: 4px; width: 24px; height: 44px; background-position: center center; background-repeat: no-repeat; z-index: 1; pointer-events: none;}
.login-box .input-id:before {background-image: url(../images/login_id.svg);}
.login-box .input-pw:before {background-image: url(../images/login_pw.svg);}

.login-box .input-wrap .input:focus {border-bottom-color: #00b6f0;}
.login-box .input-id:focus-within:before {background-image: url(../images/login_id_focus.svg);}
.login-box .input-pw:focus-within:before {background-image: url(../images/login_pw_focus.svg);}

.login-box .err-msg {display: block; margin-top: 10px; line-height: 1.6; font-size: 10px; color: #ff5b5b; font-weight: 400;}

.login-box .bottom {display: flex; justify-content: space-between; align-items: center; margin-top: 20px;}
.login-box .bottom .check input + label {padding-left: 18px; color: #808080;}
.login-box .bottom a {font-size: 14px; color: #808080; font-weight: 400;}

.login-box .button {display: flex; justify-content: center; align-items: center; margin: 20px auto 0; width: 326px; max-width: 100%; height: 47px; font-size: 16px; color: #fff; font-weight: 500; background-color: #00b6f0;}

.login-box .history-id {display: none; position: absolute; top: 100%; left: 0; margin-top: 10px; width: 100%; background-color: #fff; border: 1px solid #ddd; box-sizing: border-box; z-index: 5;}
.login-box .history-id.show {display: block;}
.login-box .history-id ul {list-style: none; margin: 20px 10px 20px 0; padding: 0 10px 0 20px; max-height: 166px; box-sizing: border-box; overflow-y: auto;}
.login-box .history-id ul::-webkit-scrollbar {width: 4px; height: 6px;}
.login-box .history-id ul::-webkit-scrollbar-thumb {background-color: #00b6f0; border: none; border-radius: 30px; background-clip: padding-box;}
.login-box .history-id ul::-webkit-scrollbar-track {background-color: #f2f2f2;}
.login-box .history-id li {display: flex; gap: 8px; align-items: center; margin-top: 12px; line-height: 24px; font-size: 14px; color: #303030; font-weight: 400;}
.login-box .history-id li:first-child {margin-top: 0 !important;}
.login-box .history-id li .text-id {cursor: pointer;}
.login-box .history-id li .delete-id {display: block; position: relative;}
.login-box .history-id li .delete-id:before {display: block; content: ''; width: 24px; height: 24px; background: url(../images/m_icon_x.svg) center center no-repeat;}

  @media (max-width: 1280px) {
    .login-box .button {height: 45px; font-size: 14px;}

    .login-box .history-id ul {max-height: 202px;}
    .login-box .history-id li {margin-top: 20px;}
  }
  @media (min-width: 1025px) {
    .login-box .history-id li .text-id:hover {color: #00B6F0;}
  }


/* mob login */
.layer-login {display: none;}

  @media (max-width: 1280px) {
    .layer-login {display: none; position: fixed; top: 0; left: 0; box-sizing: border-box; z-index: 101;}
    .layer-login.active {display: block;}

    .login {position: fixed; top: 0; left: 0; padding: 56px 16px 30px; width: 100%; height: 100%; background-color: #fff; box-sizing: border-box;}
    .login .logo {position: relative;}
    .login .logo:before {display: block; content: ''; margin: 0 auto; width: 140px; height: 40px; background: url(../images/logo_login.svg) center center no-repeat;}
    .login-close {position: absolute; top: 15px; right: 16px;}
    .login-close:before {display: block; content: ''; width: 24px; height: 24px; background: url(../images/m_icon_x.svg) center center no-repeat;}
    .login .login-box {margin-top: 40px; padding: 0; width: 327px; max-width: 100%; border: 0;}
    .login .login-box .title {margin-bottom: 40px;}
    .login .login-box .title strong {font-size: 16px;}
    .login .login-box .title span {margin-top: 0; font-size: 14px;}
    .login .login-box .bottom .check input + label,    
    .login .login-box .bottom a {font-size: 12px;}
    .login .link {margin-top: 20px;}
    .login .link ul {display: flex; align-items: center; list-style: none; width: 100%;}
    .login .link li {flex: 1; display: flex; justify-content: center; align-items: center; position: relative; min-width: 0;}
    .login .link li:before {display: block; content: ''; position: absolute; top: 50%; left: -0.5px; transform: translateY(-50%); width: 1px; height: 10px; background-color: #dedede;}
    .login .link li:first-child::before {display: none;}
    .login .link a {font-size: 12px; color: #808080; font-weight: 400;}
  }