@charset "utf-8";

/* 나눔스퀘어 폰트 설정 */
@font-face {
  font-family: 'NanumSquare';
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/NanumSquare/NanumSquareR.eot);
  src: url(./fonts/NanumSquare/NanumSquareR.eot?#iefix) format('embedded-opentype'),
      url(./fonts/NanumSquare/NanumSquareR.woff) format('woff'),
      url(./fonts/NanumSquare/NanumSquareR.ttf) format('truetype');
}
@font-face {
  font-family: 'NanumSquare';
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/NanumSquare/NanumSquareB.eot);
  src: url(./fonts/NanumSquare/NanumSquareB.eot?#iefix) format('embedded-opentype'),
      url(./fonts/NanumSquare/NanumSquareB.woff) format('woff'),
      url(./fonts/NanumSquare/NanumSquareB.ttf) format('truetype');
}
@font-face {
  font-family: 'NanumSquare';
  font-weight: 650;
  font-display: swap;
  src: url(./fonts/NanumSquare/NanumSquareEB.eot);
  src: url(./fonts/NanumSquare/NanumSquareEB.eot?#iefix) format('embedded-opentype'),
      url(./fonts/NanumSquare/NanumSquareEB.woff) format('woff'),
      url(./fonts/NanumSquare/NanumSquareEB.ttf) format('truetype');
}
@font-face {
  font-family: 'NanumSquare';
  font-weight: 300;
  font-display: swap;
  src: url(./fonts/NanumSquare/NanumSquareL.eot);
  src: url(./fonts/NanumSquare/NanumSquareL.eot?#iefix) format('embedded-opentype'),
      url(./fonts/NanumSquare/NanumSquareL.woff) format('woff'),
      url(./fonts/NanumSquare/NanumSquareL.ttf) format('truetype');
}

/* 셀러포탈 Noto Sans KR 폰트 설정 */
/*
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
}
*/

/* START) 기본 */
* {
  /* 모멘텀 스크롤 (스크롤 가속) */
  -webkit-overflow-scrolling: touch;

  /* 아이폰에서 버튼 여러번 클릭시 더블탭 인식으로 자동확대 방지. https://ahnheejong.name/articles/less-famous-css-properties/ */
  touch-action: manipulation;
  /*
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
   */

  /*
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
   */
}
html, body, header, section, footer, div, ul {
  /* scroll-behavior: smooth;을 주면 상품목록에서 페이지 이동시 맨위로 가는 scroll 시간이 오래걸림  */
  /* scroll-behavior: smooth; */
}
html{
  width: 100%; height: 100%;

  -webkit-backface-visibility: hidden;

  /* chrome에서 custom font가 거칠게 보이는 현상. https://stackoverflow.com/questions/10627209/font-face-for-custom-fonts-fonts-not-smooth-in-chrome */
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

body { font-family: "Apple SD Gothic", "NanumSquare", "Malgun Gothic", "맑은 고딕", "Dotum", "돋움", "굴림", Sans-serif; }
/* body { font-family: "Apple SD Gothic", "Malgun Gothic", "맑은 고딕", "Dotum", "돋움", "굴림", Sans-serif; } */
/* body { font-family: "NanumSquare", "나눔고딕", "Nanum Gothic", "Malgun Gothic", "맑은 고딕", "Dotum", "돋움", "굴림", Sans-serif; } */
/* body { font-family: "Noto Sans KR", "나눔고딕", "Nanum Gothic", "Malgun Gothic", "맑은 고딕", "Dotum", "돋움", "굴림", Sans-serif; } */
/* body { font-family: "Nanum Gothic", "Malgun Gothic", "맑은 고딕", "Dotum", "돋움", "굴림", Sans-serif; } */


h1, h2, h3, h4, h5, h6, p { margin-top: 0; margin-bottom: 0; }
hr { margin: 10px 0px; }
table, tr { width: 100%; }
table thead th { text-align: center; }
table tbody tr { text-align: center; }
ul, ol { padding: 0px; margin: 0; }
ul li { list-style-type: none; }
i { margin-left: 0.25rem; margin-right: 0.25rem;}

/* 나눔스퀘어(NanumSquare) 크롬 버그로 password에서 패스워드용 disc가 안보이는 현상 해결용 */
input[type="password"] { font-family: "나눔고딕", "Nanum Gothic", "Malgun Gothic", "맑은 고딕", "Dotum", "돋움", "굴림", Sans-serif; }

.clear:after{ content: ''; display: block; clear: both; }
/* END) 기본 */


/* 버튼 관련 설정 */
button { padding: 0.5rem; cursor: pointer; }
button:hover { opacity: 0.8; }

.btn { padding: 0.5rem 2rem; }
.btn-indigo { background: #3E50B4; color: #fff; border: 1px solid #3E50B4; }
.btn-light-indigo { background: #5B76E2; color: #fff; border: 1px solid #5B76E2; }
.btn-blue { background: #0274C3; color: #fff; border: 1px solid #0274C3; }
.btn-cyon { background: #02C3B0; color: #fff; border: 1px solid #02C3B0; }
.btn-white-cyon { background: #FFFFFF; color: #02C3B0; border: 1px solid #02C3B0; }
.btn-sky { background: #8CCBF6; color: #fff; border: 1px solid #8CCBF6; }
.btn-black { background: #212642; color: #fff; border: 1px solid #212642; }
.btn-red { background: #e12222; color: #fff; border: 1px solid #e12222; }
.btn-white { background: #FFFFFF; color: #212642; border: 1px solid #D8D8D8; font-weight: 500; }
.btn-white:hover { background: #F5F5F5; color: #333; }
.btn-kakao { background: #FFCD00; color: #fff; border: 1px solid #FFCD00; }
.btn-naver { background: #03CF5D; color: #fff; border: 1px solid #03CF5D; }

/* description 관련 title 및 내용 */
p.desc { font-size: 14px; color: #999; }

/* a 태그 통한 링크 이동 */
a.a-link { color: #5B76E2; text-decoration:none; }
/* END) Linked Market Admin */

/* Global Media Query */
/* 768px 이하 -> 모바일 */
@media (max-width: 768px) {
  /* html, body { font-size: 10px; } */
}
/* 768~1200 -> 태블릿 */
@media (min-width: 769px) {
  /* html, body { font-size: 13px; } */
}
/* 1200px 이상 -> PC */
@media (min-width: 1200px) {
  /* html, body { font-size: 16px; } */
}
/* Global Media Query */

/* Vue 용 */
[v-cloak] { display: none; }
/* Vue 용 */

/************ 여기부터 공통 ************/
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-table { display: table !important; }
.d-table-row { display: table-row !important; }
.d-table-cell { display: table-cell !important; }
.d-flex { display: flex !important; }
.flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.inline-flex { display: inline-flex !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

.gap-0 { gap: 0 !important; }
.gap-1 { gap: 1 !important; }
.gap-2 { gap: 2 !important; }
.gap-3 { gap: 3 !important; }
.gap-4 { gap: 4 !important; }
.gap-5 { gap: 5 !important; }
.gap-6 { gap: 6 !important; }
.gap-7 { gap: 7 !important; }
.gap-8 { gap: 8 !important; }
.gap-9 { gap: 9 !important; }
.gap-10 { gap: 10 !important; }
.gap-11 { gap: 11 !important; }
.gap-12 { gap: 12 !important; }
.gap-13 { gap: 13 !important; }
.gap-14 { gap: 14 !important; }
.gap-15 { gap: 15 !important; }
.gap-16 { gap: 16 !important; }
.gap-17 { gap: 17 !important; }
.gap-18 { gap: 18 !important; }
.gap-19 { gap: 19 !important; }
.gap-20 { gap: 20 !important; }

/* flex. justify-content */
.justify-content-start { justify-content: flex-start !important; }
.justify-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-around { justify-content: space-around !important; }

/* flex. align-items */
.align-items-start { align-items: flex-start !important; }
.align-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }
.align-stretch { align-items: stretch !important; }

/* flex. align-content */
.align-content-start { align-content: flex-start !important; }
.align-content-end { align-content: flex-end !important; }
.align-content-center { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }
.align-self-auto { align-self: auto !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }

/* width */
.w10 { width:10%; }
.w20 { width:20%; }
.w30 { width:30%; }
.w40 { width:40%; }
.w50 { width:50%; }
.w60 { width:60%; }
.w70 { width:70%; }
.w80 { width:80%; }
.w90 { width:90%; }
.w100 { width:100%; }
/* width */

/* color */
.clm1 { color: #3E50B4 !important; }
.cwhite { color: #fff !important; }
.corange { color: #f4a742 !important; }
.cred1 { color: #e12222 !important; }
.cblue1 { color: #1a4384 !important; }
.cgreen1 { color: #368232 !important; }
.c333 { color: #333 !important; }
.c666 { color: #666 !important; }
.c999 { color: #999 !important; }
.cbbb { color: #bbb !important; }
.ceee { color: #eee !important; }
/* color */

/* background */
.bglm1 { background: #3E50B4 !important; }
.bgwhite { background: #FFFFFF !important; }

/* Font-Size */
.f10 { font-size: 10px !important; }
.f11 { font-size: 11px !important; }
.f12 { font-size: 12px !important; }
.f13 { font-size: 13px !important; }
.f14 { font-size: 14px !important; }
.f15 { font-size: 15px !important; }
.f16 { font-size: 16px !important; }
.f17 { font-size: 17px !important; }
.f18 { font-size: 18px !important; }
.f19 { font-size: 19px !important; }
.f20 { font-size: 20px !important; }
.f24 { font-size: 24px !important; }
.f30 { font-size: 30px !important; }
.f40 { font-size: 40px !important; }
/* Font-Size */

/* Font-Weight */
.fw500 { font-weight: 500; }
.fw600 { font-weight: 600; }
.fw700 { font-weight: 700; }
.fw800 { font-weight: 800; }
.fw900 { font-weight: 900; }

/* Text-Align */
.tc { text-align:center !important; }
.tl { text-align:left !important; }
.tr { text-align:right !important; }
/* Text-Align */

/* Display */
.block { display: block !important; }
.inblock { display: inline-block !important; }
.inline { display: inline !important; }
/* Display */

/* Margin & Padding */.ma0 { margin: 0px; }
.ma0 { margin: 0px; }
.ma10 { margin: 10px; }
.ma15 { margin: 15px; }
.ma20 { margin: 20px; }
.ma30 { margin: 30px; }
.ma40 { margin: 40px; }
.ma50 { margin: 50px; }
.ma60 { margin: 60px; }
.ma70 { margin: 70px; }
.ma80 { margin: 80px; }
.ma90 { margin: 90px; }
.ma100 { margin: 100px; }

.mt0 { margin-top: 0px; }
.mt1 { margin-top: 1px; }
.mt2 { margin-top: 2px; }
.mt3 { margin-top: 3px; }
.mt4 { margin-top: 4px; }
.mt5 { margin-top: 5px; }
.mt6 { margin-top: 6px; }
.mt7 { margin-top: 7px; }
.mt8 { margin-top: 8px; }
.mt9 { margin-top: 9px; }
.mt10 { margin-top: 10px; }
.mt11 { margin-top: 11px; }
.mt12 { margin-top: 12px; }
.mt13 { margin-top: 13px; }
.mt14 { margin-top: 14px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }
.mt60 { margin-top: 60px; }
.mt70 { margin-top: 70px; }
.mt80 { margin-top: 80px; }
.mt90 { margin-top: 90px; }
.mt100 { margin-top: 100px; }
.mt110 { margin-top: 110px; }
.mt120 { margin-top: 120px; }
.mt130 { margin-top: 130px; }

.mb0 { margin-bottom: 0px; }
.mb1 { margin-bottom: 1px; }
.mb2 { margin-bottom: 2px; }
.mb3 { margin-bottom: 3px; }
.mb4 { margin-bottom: 4px; }
.mb5 { margin-bottom: 5px; }
.mb6 { margin-bottom: 6px; }
.mb7 { margin-bottom: 7px; }
.mb8 { margin-bottom: 8px; }
.mb9 { margin-bottom: 9px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mb60 { margin-bottom: 60px; }
.mb70 { margin-bottom: 70px; }
.mb80 { margin-bottom: 80px; }
.mb90 { margin-bottom: 90px; }
.mb100 { margin-bottom: 100px; }

.ml1 { margin-left: 1px; }
.ml2 { margin-left: 2px; }
.ml3 { margin-left: 3px; }
.ml4 { margin-left: 4px; }
.ml5 { margin-left: 5px; }
.ml6 { margin-left: 6px; }
.ml7 { margin-left: 7px; }
.ml8 { margin-left: 8px; }
.ml9 { margin-left: 9px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }
.ml50 { margin-left: 50px; }
.ml60 { margin-left: 60px; }
.ml70 { margin-left: 70px; }
.ml80 { margin-left: 80px; }
.ml90 { margin-left: 90px; }
.ml100 { margin-left: 100px; }

.mr1 { margin-right: 1px; }
.mr2 { margin-right: 2px; }
.mr3 { margin-right: 3px; }
.mr4 { margin-right: 4px; }
.mr5 { margin-right: 5px; }
.mr6 { margin-right: 6px; }
.mr7 { margin-right: 7px; }
.mr8 { margin-right: 8px; }
.mr9 { margin-right: 9px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.mr40 { margin-right: 40px; }
.mr50 { margin-right: 50px; }
.mr60 { margin-right: 60px; }
.mr70 { margin-right: 70px; }
.mr80 { margin-right: 80px; }
.mr90 { margin-right: 90px; }
.mr100 { margin-right: 100px; }

.pa0 { padding: 0px; }
.pa10 { padding: 10px; }
.pa15 { padding: 15px; }
.pa20 { padding: 20px; }
.pa30 { padding: 30px; }
.pa40 { padding: 40px; }
.pa50 { padding: 50px; }
.pa60 { padding: 60px; }
.pa70 { padding: 70px; }
.pa80 { padding: 80px; }
.pa90 { padding: 90px; }
.pa100 { padding: 100px; }

.pt0 { padding-top: 0px; }
.pt1 { padding-top: 1px; }
.pt2 { padding-top: 2px; }
.pt3 { padding-top: 3px; }
.pt4 { padding-top: 4px; }
.pt5 { padding-top: 5px; }
.pt6 { padding-top: 6px; }
.pt7 { padding-top: 7px; }
.pt8 { padding-top: 8px; }
.pt9 { padding-top: 9px; }
.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pt40 { padding-top: 40px; }
.pt50 { padding-top: 50px; }
.pt60 { padding-top: 60px; }
.pt70 { padding-top: 70px; }
.pt80 { padding-top: 80px; }
.pt90 { padding-top: 90px; }
.pt100 { padding-top: 100px; }

.pb0 { padding-bottom: 0px; }
.pb1 { padding-bottom: 1px; }
.pb2 { padding-bottom: 2px; }
.pb3 { padding-bottom: 3px; }
.pb4 { padding-bottom: 4px; }
.pb5 { padding-bottom: 5px; }
.pb6 { padding-bottom: 6px; }
.pb7 { padding-bottom: 7px; }
.pb8 { padding-bottom: 8px; }
.pb9 { padding-bottom: 9px; }
.pb10 { padding-bottom: 10px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb40 { padding-bottom: 40px; }
.pb60 { padding-bottom: 60px; }
.pb70 { padding-bottom: 70px; }
.pb80 { padding-bottom: 80px; }
.pb90 { padding-bottom: 90px; }
.pb100 { padding-bottom: 100px; }

.pl0 { padding-left: 0px; }
.pl10 { padding-left: 10px; }
.pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }
.pl30 { padding-left: 30px; }
.pl40 { padding-left: 40px; }
.pl50 { padding-left: 50px; }
.pl60 { padding-left: 60px; }
.pl70 { padding-left: 70px; }
.pl80 { padding-left: 80px; }
.pl90 { padding-left: 90px; }
.pl100 { padding-left: 100px; }

.pr0 { padding-right: 0px; }
.pr10 { padding-right: 10px; }
.pr15 { padding-right: 15px; }
.pr20 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.pr40 { padding-right: 40px; }
.pr50 { padding-right: 50px; }
.pr60 { padding-right: 60px; }
.pr70 { padding-right: 70px; }
.pr80 { padding-right: 80px; }
.pr90 { padding-right: 90px; }
.pr100 { padding-right: 100px; }
/* Margin & Padding */