:root {
  --arrow-bg: rgba(0, 0,0, 0.3);
  --arrow-icon: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg);
  --option-bg: black;
  --select-bg: rgba(255, 255, 255, 0.2);
}
@charset "UTF-8";
@import url("https://fastly.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard-jp.css");
@import url("https://fastly.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard-jp-dynamic-subset.css");
@import url("https://fastly.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable-jp-dynamic-subset.css");
@import url("https://fastly.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable-jp.css");

@import url('https://webfontworld.github.io/sebang/SebangGothic.css');

/* 비즈고딕 - 일본 */
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap');


/* 영어 - 세방고딕 */
@font-face {
  font-family: 'SebangGothic';
  font-weight: 400;
  font-style: normal;
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/sebang/SebangGothicRegular.eot');
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/sebang/SebangGothicRegular.eot?#iefix') format('embedded-opentype'),
    url('https://fastly.jsdelivr.net/gh/webfontworld/sebang/SebangGothicRegular.woff2') format('woff2'),
    url('https://fastly.jsdelivr.net/gh/webfontworld/sebang/SebangGothicRegular.woff') format('woff'),
    url('https://fastly.jsdelivr.net/gh/webfontworld/sebang/SebangGothicRegular.ttf') format("truetype");
  font-display: swap;
}

@font-face {
  font-family: 'SebangGothic';
  font-weight: 700;
  font-style: normal;
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/sebang/SebangGothicBold.eot');
  src: url('https://fastly.jsdelivr.net/gh/webfontworld/sebang/SebangGothicBold.eot?#iefix') format('embedded-opentype'),
    url('https://fastly.jsdelivr.net/gh/webfontworld/sebang/SebangGothicBold.woff2') format('woff2'),
    url('https://fastly.jsdelivr.net/gh/webfontworld/sebang/SebangGothicBold.woff') format('woff'),
    url('https://fastly.jsdelivr.net/gh/webfontworld/sebang/SebangGothicBold.ttf') format("truetype");
  font-display: swap;
}

* {
  /*font-family: "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;*/
  font-family: 'BIZ UDPGothic', sans-serif;
  scroll-behavior: smooth;
  color: #151515;
}

/* 전체 : 스크롤 바 변경 */
body::-webkit-scrollbar {
  width: 6px;  /* 스크롤바의 너비 */
}
body::-webkit-scrollbar-thumb {
  height: 30%; /* 스크롤바의 길이 */
  background: #C3CDE8; /* 스크롤바의 색상 */
  border-radius: 10px;
}
body::-webkit-scrollbar-track {
  background: rgba(33, 122, 244, .1);  /*스크롤바 뒷 배경 색상*/
}

html,
body {
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
  font-family: 'BIZ UDPGothic', sans-serif;
  display: flex;
  flex-direction: column;
  height: auto;
}


button {
  background: inherit;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  cursor: pointer;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  box-shadow: 0 0 0 1000px white inset;
}

input:focus {
  outline: none;
}

ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  color: #151515;
  padding: 0;
  margin: 0;
  font-family: 'BIZ UDPGothic', sans-serif;
}

a {
  text-decoration: none;
  color: #151515;
}

a:hover {
  color: #151515;
  text-decoration: none !important
}

a:visited,
a:focus,
a:active {
  text-decoration: none;
}
.footer a:hover {
  text-decoration:underline!important;
}
p {
  padding: 0;
  margin: 0;
}

video {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}


.Wrap {}

.container {
  width: 100% !important;
}

.row {
  margin: 0 !important;
  /* display: flex; */
}

.navbar-default {
  background-image: none !Important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

.description {
  border-bottom: none !important;
}

/* alret button */
.alert-dismissible .close {
  position: relative !important;
  top: 0 !important;
  right: 0 !important;
  color: inherit !important;
  width: auto !important;
  height: auto !important;
}

/* 드롭다운 setting*/
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
  background-color: #E6EFFC !important;
  font-weight: 500;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  background-color: #E6EFFC!important;
  font-weight:500;
}

/* container */
.container {
  padding-left: 0;
  padding-right: 0;
}

/* 전체를 감싸는 div*/
#top-wrapper {
  display: flex;
  width: 100%;
  flex: auto;
}

/* main */
#contents-wrapper {
  width: 100%;
  background: #fff;
}


/* 주문하기 페이지 - side menu */
#sideMenu {
  flex: initial;
  width: 100%;
  height: 150px;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 100;
  border-radius: 0;
  margin: 0;
  transition: 0.3s;
  box-shadow: 0px 0 6px rgb(0 0 0 / 8%);
}



#sideMenu::-webkit-scrollbar {
  width: 5px;
  /* 스크롤바의 너비 */
}

#sideMenu::-webkit-scrollbar-thumb {
  height: 10%;
  /* 스크롤바의 길이 */
  background: #dddddd;
  /* 스크롤바의 색상 */

  border-radius: 10px;
}

#sideMenu::-webkit-scrollbar-track {
  background: rgb(69 123 200 / 38%);
  /*스크롤바 뒷 배경 색상*/
}

#sideMenu.off {
  flex: 0 0 100px;
  width: 100px;
  overflow-x: hidden;
}

#sideMenu.off div.logoWrapper {
  width: 81%;
  margin: auto;
  height: 60px;
  padding: 9px 22px;
  cursor: pointer;
  background-color: #fff;
  border-radius: 0 0px 26px 28px;
}

#sideMenu.off .menuIcon {
  width: 27px;
  height: 28px;
}

/* 주문하기 페이지 - side menu : background 이미지 */

#sideMenu.off .menuList.active::before {
  content: '';
  background-image: url('https://storage.perfectcdn.com/gz2yx6/fakyugbtlo4na8il.png') !important;
  width: 84%;
  height: 94px;
  left: 3px;
  z-index: -1;
  position: absolute;
}

#sideMenu div.menuBackground {
  width:100%;
  height:100%;
}

#sideMenu div.logoWrapper {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 93.2%;
  margin: 40px auto;
  height: 88px;
  cursor: pointer;
  z-index: 99999999999;
}

#sideMenu div.logoWrapper .logo {
  padding-right: 31px;
  padding-left: 10px;
  display: flex;
}

#sideMenu.off div.logoWrapper {
  width: 80%;
}

#sideMenu div.logoWrapper a.logo img {
  height: 38px;
  width: 100%;
  margin-top: 9px;
}

#sideMenu.off div.logoWrapper a.logo img {
  width: 100%;
}

#sideMenu div.menuWrapper div.menuList {
  display: flex;
  align-items: center;
  width: auto;
  height: auto;
  padding: 0;
}

#sideMenu div.menuWrapper div.menuList:nth-child(6) span {
  /* font-family: 'SebangGothic';*/
}

#sideMenu div.menuWrapper div.menuList a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  width: 100%;
  padding-top: 6px;
}

#sideMenu div.menuWrapper div.menuList:first-child {}

#sideMenu div.menuWrapper div.menuList.active {
  position: relative;
}

#sideMenu div.menuWrapper div.menuList.active i,
#sideMenu div.menuWrapper div.menuList.active span {
  color: #1EA041;
  font-weight: 700;
}

#sideMenu div.menuWrapper div.menuList a span {
  font-size: 15px;
  font-weight: 600;
  color: #1C3B55;
  padding-left: 0;
  padding-top: 3px;
}

#sideMenu.off div.menuWrapper div.menuList a span {
  display: none;
}

#sideMenu div.menuWrapper div.menuList a i {
  font-size: 24px;
  color: #fff;
  margin-right: 8px;
}

#sideMenu div.menuWrapper div.menuList a div.menuIcon {
  width: 24px;
  height: 24px;
  display: none;
}

#sideMenu div.menuWrapper div.menuList a div.menuIcon img {
  width: 24px;
}

#sideMenu div.menuWrapper div.menuList.active img {
  width: 100% !important
}


/* header */

header.header {
  width: 100%;
  position: sticky;
  top: 0;
  background: #fff;
  margin: auto;
  margin-top: 0;
  z-index: 9999;
  height: 130px;
  display: flex;
  align-items: center;
}
header.header.box-shadow {
  box-shadow: 0px 0px 8px #6d6d6d63;
}
@media(max-width:950px){
  header.header {
    height: 80px;

  }
}

header div.headerContents {
  width: 100%;
  position: relative;
}

header div.contents a.logo {
}
header div.menuWrapper {
}
/* 스크롤 내릴시 백그라운드 보이기 */
header.header.marginTop {
  position: fixed!important;
  width: 100%;
  max-width: calc(100% - 80px);
  background: rgba(255, 255, 255, 0.918)!important;
  height: 125px;
  margin: auto;
  top: 34px;
  left: 40px;
  z-index:9;
}
header.marginTop div.contents a.logo {
  position: absolute;
  top: 46px;
  left: 68px;
}
header.marginTop div.menuWrapper {
  position: absolute;
  top: 43px;
  right: 152px;
}


header.header.down {
  backdrop-filter: blur(15px);
  background-color: #fff !important;
  z-index: 999999999999999;
  box-shadow: 0 1px 4px #00000029 !important;
}


header.header.down a {
  color: #000;
}

header.header.down .menuWrapper a {
  color: #000 !important;
}

header.header.down .menuWrapper .preview {
  color: #000 !important;
}

header div.contents {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 1600px;
  margin: 0 auto;
  justify-content: space-between;
}

header div.contents a {
  color: #fff;
  /* margin-bottom: 6px; */
}

/* 로그인시 주문페이지 header :마이페이지/로그아웃/memefree */
#sideMenu .contents.auth {
  position: relative;
  max-width: 1600px;
  padding: 0;
}

header div.contents a.logo img {
  width: 100%;
}
header div.contents a.logo img.mobile {
  display:none;
}
@media (max-width:950px) {
  header div.contents a.logo img.pc {
    width: 100%;
    display:none!important;
  }
  header div.contents a.logo img.mobile {
    display:block;
    width:auto;
    height: 40px;
  }
}
@media (max-width: 360px){
  header div.contents a.logo img.mobile {
    height: 30px;
  }
}
@media (max-width: 300px){
  header div.contents a.logo img.mobile {
    height: 24px;
  }
}
header div.contents a.logo img header div.contents div.menuWrapper {
  display: flex;
  align-items: center;
  height: 100%;
}

/* 비회원 menu */
header div.contents div.menuWrapper ul {
  display: flex;
  align-items: center;
  height: 100%;
  list-style: none;
  gap: 6px;
}

header div.contents div.menuWrapper ul li {
  position: relative;
  height: auto;
  transition: 0.2s;
  border: 1px solid #1E3069;
  border-radius: 10px;
  background: #1E3069;
}
@media (max-width:950px){
  header div.contents div.menuWrapper ul li {
    border-radius:5px;
  }
}
header div.contents div.menuWrapper ul li:hover {
  background: #6CBBD0;
  border: 1px solid #6CBBD0;
}
header div.contents div.menuWrapper ul li:focus {

}

header div.contents div.menuWrapper ul li:last-child {
}

header div.contents div.menuWrapper ul li+li::before {
  width: 1px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: '';
}

header div.contents div.menuWrapper ul li button.preview {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  width: auto;
  height: auto;
  line-height: 0;
  display: block;
  width: 100%;
  color: #fff!important;
  padding: 26px 30px;
}

header div.contents div.menuWrapper ul li:hover,
header div.contents div.menuWrapper ul li.active {
  background: #6CBBD0;
  border: 1px solid #6CBBD0;
  transition: all linear 0.1s;
}
/*
header div.contents div.menuWrapper ul li.active a {
color: #FF8013 !important;
}

header div.contents div.menuWrapper ul li button:hover {
color: #FF8013 !important;
}

header div.contents div.menuWrapper ul li a:hover {
color: #FF8013 !important;
}
*/


header div.contents div.menuWrapper ul li a {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  display: block;
  width: auto;
  height: auto;
  text-align: center;
  vertical-align: middle;
  line-height: 0;
  width: 100%;
  padding: 26px 30px;
  color: #fff!important;
}

header div.contents div.menuWrapper ul li a:hover {
  text-decoration: none;
}

@media (max-width:950px) {
  header div.contents div.menuWrapper ul li button.preview {
    width:90px;
    padding:21px 1px;
  }
  header div.contents div.menuWrapper ul li a {
    width:90px;
    padding:21px 1px;
  }
  header div.menuWrapper {
    top:87px;
  }
  header.marginTop div.menuWrapper {
    top:48px;
  }
  /* header 위치 */
  header div.contents a.logo {
    top:65px;
    left:35px;
  }
  header div.menuWrapper {
    top:67px;
    right:110px;
  }
  /* 스크롤 내릴 시 header 위치 */
  header.marginTop div.contents a.logo {
    top:31px;
    left:33px;
  }
  header.marginTop div.menuWrapper {
    top:33px;
    right:112px;
  }
  header.header.marginTop {
    top:34px;
    height: 100px;
  }
}
@media (max-width:700px) {
  /* header 위치 */
  header.header.marginTop {
    top:14px;
    height:100px;
    left:15px;
    max-width: calc(100% - 30px);
    z-index: 9999;
  }
  header div.contents a.logo {
    top:45px;
    left:0;
  }
  header.marginTop div.contents a.logo {
    top: 31px;
    left: 23px;
  }
  header div.menuWrapper {
    top:50px;
    right:75px;
  }
  header.marginTop div.menuWrapper {
    top: 36px;
    right: 52px;
  }
  header div.contents div.menuWrapper ul {
    gap:3px;
  }
  header div.contents div.menuWrapper ul li button.preview {
    font-size:12px;
    width:70px;
    padding:17px 1px;
  }
  header div.contents div.menuWrapper ul li a {
    font-size:12px;
    width:70px;
    padding:17px 1px;
  }
}
@media (max-width:440px){
  header div.contents div.menuWrapper ul li button.preview {
    font-size:11px;
    font-weight:500;
    width:60px;
    padding:14px 1px;
  }
  header div.contents div.menuWrapper ul li a {
    font-size:11px;
    font-weight:500;
    width: 60px;
    padding:14px 1px;
  }
}
/* 회원 header */
#sideMenu div.sideMenuIcon {
  cursor: pointer;
}

#sideMenu div.sideMenuIcon img {
  width: 30px;
}


#sideMenu div.menuWrapper:last-child {
  justify-content: right;
  padding-top: 12px;
}

#sideMenu div.moMenuWrapper {
  display: none;
}

/* 보유 포인트 */
#sideMenu div.userPoint {
  /* background: #f8f8f8; */
  /* border-radius: 5px !important; */
  /* padding: 3px 17px; */
  /* border-radius: 24px; */
  /* margin-right: 0px; */
  /* background-color: #1EA041; */
}

#sideMenu div.userPoint a {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

/* 유저 아이디 */
#sideMenu p.userId {
  color: #0B67CE;
  font-size: 16px;
  font-weight: 500;
}
/* 유저 아이콘 말풍선 */
.speech-bubble {
  position: absolute;
  right: -17px;
  bottom: 13px;
  background: #1EA041;
  border-radius: 0.2em;
  width: 62px;
  padding: 10px 0px;
  margin: 18px 0;
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 200%;
  text-shadow: 0 -0.05em 0.1em rgb(0 0 0 / 30%);
  opacity: 0;
  transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.5s;
  transform: translateY(10px);
}
.speech-bubble p {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}

.speech-bubble:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #1EA041;
  border-bottom: 0;
  margin-left: -11px;
  margin-bottom: -6px;
}

/* 유저 아이콘 */
#sideMenu div.userImage {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  width: 30px;
  height: 30px;
  position: relative;
  border-radius: 100%;
  cursor: pointer;
  text-align: center;
  z-index: 0;
}

#sideMenu div.userImage:hover:after {
  transition-delay: 100ms;
}
#sideMenu div.userImage:hover {}

#sideMenu div.userImage:hover i {}

#sideMenu div.userImage i {
  font-size: 38px;
  z-index: 9999999999;
  color: #1C3B55;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  display: flex;
}

#sideMenu div.contents div.menuWrapper div.userImage.active {
  background-color: #000;
  transition: 0.4s;
}

#sideMenu div.contents div.menuWrapper div.userImage.active i {}

#sideMenu div.contents div.menuWrapper div.moMenu {
  display: none;
}

/* 내정보 메뉴 */
#sideMenu div.userImage div.userInfoMenu {
  display: none;
  width: 110px;
  position: absolute;
  top: calc(100% + 10px);
  right: -1px;
  background-color: #000;
  border-radius: 5px;
  z-index: 9999;
}

#sideMenu div.userImage div.userInfoMenu div.list {
  text-align: center;
}

#sideMenu div.userImage div.userInfoMenu div.list {}

#sideMenu div.userImage div.userInfoMenu div.list:hover {}

#sideMenu div.userImage div.userInfoMenu div.list+div.list {}

#sideMenu div.userImage div.userInfoMenu div.list a {
  font-weight: 700;
  color: #fff;
  padding: 20px;
  display: block;
  box-sizing: border-box;
}
#sideMenu div.userImage div.userInfoMenu div.list:nth-of-type(1) a:hover {
  background:#1EA041;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
}
#sideMenu div.userImage div.userInfoMenu div.list:nth-of-type(2) a:hover {
  background:#1EA041;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
}

/*- - - - - - - - - header 테블릿, 모바일 ver - - - - - - s - - - - - - -*/
@media (max-width: 1630px) {
  header div.contents {
    width: 90%;
  }
}

@media (max-width: 768px) {
  header div.contents div.menuWrapper ul {
  }

  header div.contents div.menuWrapper ul li {
    margin-right: 0;
  }

  header div.contents a.logo img {

  }
}

@media (max-width: 420px) {

  /* header */
  header.header {

  }

  header div.contents div.menuWrapper ul li button.preview {
    font-size: 12px;
  }

  header div.contents div.menuWrapper ul li a {
    font-size: 12px;
  }

}

@media (max-width:360px) {
  header div.menuWrapper {
    top:35px;
    right:75px;
  }
  header div.contents div.menuWrapper ul {
    display: flex;
    gap: 4px;
  }
  header.marginTop div.menuWrapper {
    top:21px;
    right:52px;
  }
}




/*- - - - - - - - - header 테블릿, 모바일 ver - - - - - - e - - - - - - -*/



@media (max-width: 1630px) {
  #sideMenu div.logoWrapper {
    width: 97%;
  }
}

@media (max-width: 1130px) {
  #sideMenu {
    height: 54px;
    flex: initial;
  }

  #sideMenu div.menuBackground {
    display: none;
  }

  #sideMenu .contents.auth {
    position: relative;
    max-width: 100%;
    padding: 0;
    height: 70px;
    background: #fff;
    box-shadow: 0px 2px 6px #00000029;
  }

  #sideMenu div.moMenuWrapper {
    display: flex !important;
  }

  #sideMenu div.menuWrapper:last-child {
    width: 92%;
    padding-top:26px;
    margin:auto;
    justify-content: space-between;
  }


  /* 모바일 사이드 메뉴 */

  #sideMenu .moMenuWrap {
    display: block !important;
  }

  /* 모바일 사이드 메뉴 로고 */
  #sideMenu div.moMenuWrapper div.moMenuLogo {
    display: flex;
    align-items: center;
  }
  #sideMenu div.moMenuWrapper div.moMenuLogo img {
    width: 100%;
    height: 35px;
  }
  /* 모바일 사이드 메뉴 flex - 오른쪽 */
  #sideMenu div.moMenuWrapper div.MomenuFlex {
    display: flex;
    align-items: center;
    gap:18px;
  }

  #sideMenu .moMenuWrap.on::after {
    display: block;
    content: '';
    background-color: #000;
    position: absolute;
    top: 62px;
    left: 0;
    width: 100%;
    height: 300vh;
    opacity: 0.7;
    z-index: -1;
  }

  #sideMenu .bar-back {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffd803;
    position: fixed;
    top: 15px;
    right: 35px;
    cursor: pointer;
    display: none;
  }

  #sideMenu div.menuWrapper p.userId {
    display: none;
  }

  .bar-back.on {
    display: block;
  }

  .bar {
    display: block;
    width: 33px;
    height: 22px;
    position: relative;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 999999999999999
  }

  .bar span {
    display: block;
    width: 21px;
    height: 2px;
    background: #333;
    position: absolute;
  }

  .bar span:first-child {
    top: 2px;
    width: 14px;
    right: 12px;
    opacity: 1;
    transition: 0.3s;
  }

  .bar span:nth-child(2) {
    top: 10px;
    transition: 0.5s;
  }

  .bar span:nth-child(3) {
    top: 10px;
    transition: 0.5s;
  }

  .bar span:last-child {
    top: 18px;
    width: 14px;
    right: 12px;
    opacity: 1;
    transition: 0.3s;
  }

  .bar.on {
    position: relative;
    top: 0;
  }

  .bar.on span:first-child {
    opacity: 0;
  }

  .bar.on span:nth-child(2) {
    top: 10px;
    transform: rotate(-135deg);
  }

  .bar.on span:nth-child(3) {
    top: 10px;
    transform: rotate(135deg);
  }

  .bar.on span:last-child {
    opacity: 0;
  }

  .bar.on span:first-child {
    opacity: 0;
  }

  .bar.on span:nth-child(2) {
    top: 12px;
    left: 6px;
    width: 15px;
    transform: rotate(-135deg);
    background-color: #333;
  }

  .bar.on span:nth-child(3) {
    top: 12px;
    left: 6px;
    width: 15px;
    transform: rotate(135deg);
    background-color: #333;
  }

  .bar.on span:last-child {
    opacity: 0;
  }


  #sideMenu .barBack.on {
    border-radius: 50%;
    position: relative;
    top: 0;
    right: 9px;
    cursor: pointer;
    display: block;
    width: 33px;
    height: 33px;
    border: 3px solid #333;
    z-index: 999999999;
  }


  #sideMenu nav.navigation {
    display: block;
    float: right;
    position: fixed;
    top: 0;
    width: 100%;
    right: 0;
    height: 103%;
    color: #333;
    padding: 15px 0 0 0;
    z-index: 10;
    transition: 0.5s;
    opacity: 0;
    visibility: hidden;
    position: absolute;
  }

  #sideMenu nav.on {
    opacity: 1;
    height: 100%;
    top: 55px !important;
    visibility: visible;
    position: absolute;
    width: 100%;
    right: 0;
  }

  #sideMenu nav strong,
  nav .menuName {
    font-size: 17px;
    position: relative;
    display: block;
    text-align: center;
    padding: 30px 0;
    z-index: 999;
  }

  #sideMenu .menuNameMo {
    color: #000;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.4px;
    position: relative;
  }

  #sideMenu .userImageMo {
    width: 100%;
    text-align: center;
  }

  #sideMenu .userImageMo img {
    width: 65px;
    height: 65px;
    border-radius: 100%;
  }

  #sideMenu .userImageMo strong {
    font-size: 14px;
    font-weight: 300;
    position: relative;
    display: block;
    text-align: center;
    padding: 4px 0 20px;
    z-index: 999;
    color: #fff;
  }

  /* 모바일버전 사이드메뉴 wrap */

  #sideMenu .menuListWrap {
    display: flex;
    position: absolute !important;
    height: auto;
    background: linear-gradient(to right, #1EA041, #0B67CE );
    flex-wrap: wrap;
    width: 100%;
    box-shadow: inset 0px 3px 10px #00000012;
    padding: 21px 30px 24px;
    gap: 7px;
    align-items: center;
    justify-content: center;
    top: 14px;
    padding-bottom: 50px;
  }

  #sideMenu .menuListMo {
    flex: 1 1 calc(25% - 20px);
    background: #fff;
    width: 100%;
    display: flex;
    border-radius: 5px;
    height: 76px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  #sideMenu .menuListMo a {
    width: 100%;
  }

  #sideMenu .menuListWrap .menuIconMo i {
    font-size: 28px;
    color: #000;
  }

  /* 모바일 hover */
  #sideMenu .menuListMo:hover {}

  #sideMenu .menuIconMo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  #sideMenu .menuListMo:last-of-type {}

  #sideMenu .menuIconMo img {
    width: 28px;
  }
}

@media (max-width: 500px) {
  #sideMenu div.menuWrapper:last-child {
    width:90%;
  }
  #sideMenu div.moMenuWrapper div.moMenuLogo {
    padding-left: 10px;
  }
  #sideMenu .menuNameMo {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  #sideMenu .menuListMo {
    flex: 1 1 calc(30% - 20px);
    padding: 0 10px;
  }

  #sideMenu .menuListWrap {
    padding: 21px 25px 24px;
  }
}

@media (max-width: 315px) {
  #sideMenu .menuListMo {
    flex: 1 1 calc(40% - 20px);
  }
}

#sideMenu .menuListMo.active {
  background: #000;
  border: 1px solid #fff;
}

#sideMenu .menuListMo:hover .menuNameMo {
  color: #676767;
}

#sideMenu .menuListMo.active .menuNameMo {
  color: #fff;
}
#sideMenu .menuListMo.active i {
  color:#fff;
}
/*- - - - - - - - - sideMenu 테블릿, 모바일 ver - - - - e - - - - - - - - -*/

/* 로그인 페이지 */
#sign {}

#sign div.container {
  height: 100vh;
  width: 100%;
  max-width: 100%;
  display: flex;
  background: #fff;
}

#sign div.container div.loginContainer {
  width: 100%;
  max-width: 100%;
  background: #818181;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(2000px);
  transition: all 1s;
  background: #fff;
}
#sign div.container div.loginContainer::after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  border-width: 20px;
  border-image: linear-gradient(45deg, #1EA041 0%, #0B67CE 100%) 1;
  border-style: inset;
  border: 3px solid linear-gradient(45deg, #1EA041 0%, #0B67CE 100%) 1;
}

#sign div.container div.back {
  position: absolute;
  top: 25px;
  left: 25px;
  background: #00000034;
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 9;
  cursor: pointer;
}

#sign div.container div.back span {
  display: flex;
  color: #fff;
  font-weight: 700;
  justify-content: right;
  padding-top: 5px;
}

#sign div.container div.loginWrapper {
  width: 100%;
  max-width: 414px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

#sign div.container div.loginWrapper form {
  width: 100%;
}

@media (max-width: 500px) {
  #sign div.container div.loginWrapper {
    padding: 0 20px;
  }
}

@media (max-width: 360px) {
  #sign div.container div.loginWrapper {
    padding: 0 10px;
  }
}

@media (max-width: 330px) {
  #sign div.container div.loginWrapper {
    padding: 0;
  }
}

#sign div.container div.loginWrapper h2 {
  text-align: left;
  padding-bottom: 32px;
  color: #222;
}

/* 로그인 input width값 */
#sign div.container .loginLeftWrapper {
  position: relative;
  color: #fff;
  width: 100%;
}

/* 로그인 input 간격 조절 */
#sign .checkBoxWrapper {
  display: flex;
  justify-content: space-between;
  align-items: inherit;
  margin-bottom: 25px;
}

#sign .checkBoxWrapper .checkBoxText {
  display: flex;
  align-items: baseline;
}

#sign div.container div.loginWrapper label {
  display: flex;
  position: relative;
  color: #222;
  font-weight: 400;
}

#sign div.container div.loginWrapper .checkBoxText {
  align-items: center;
}

#sign input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
  margin-top: 0 !important;
}

#sign div.container div.loginWrapper label:first-child a {
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  position: relative;
}

#sign div.container div.loginWrapper label:nth-child(2) a {
  color: #fff;
  font-size: 20px;
  margin-left: 20px;
}

#sign div.container div.loginWrapper div.loginImgWrapper {}

/* 비밀번호를 잊으셨나요? */
#sign div.container div.loginWrapper a.findPasswordLink {
  color: #222;
  margin-left: auto;
  padding-right: 10px;
}

/* 회원가입 */
#sign div.container div.loginWrapper a.signUp {
  color: #222;
}

#sign div.container div.loginWrapper a.signUp::before {
  display: inline-block;
  content: '';
  background-color: #444;
  width: 1px;
  height: 11px;
  margin-right: 6px;
}

/* 로그인 input */
#sign input#username,
#sign input#password {
  width: 100%;
  height: 50px;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: none;
  border-radius: 5px;
  margin-bottom: 11px;
  padding: 0;
  padding-left: 21px;
  padding-top: 0px;
  padding-bottom: 1px;
  font: normal normal normal 20px/29px Noto Sans KR;
  letter-spacing: 0px;
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff !important;
  padding: 0px 22px;
  border: 1px solid #EDEDED;
}

#sign input#password {
  margin-bottom: 12px !Important;
}

#sign input#username,
#sign input#password {
  font-size: 14px;
}

#sign input#username:active,
#sign input#password:active {
  font-size: 14px;
}

#sign input#username:focus,
#sign input#password:focus {
  font-size: 14px;
}

/* 로그인 버튼 */
#sign div.container div.loginWrapper div.loginBottomWrapper {}

#sign div.container div.loginWrapper button.loginButton {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  border-radius: 5px;
  background: #000;
  height: 49px;
  padding: 0;
  width: 100%;
}

/* 로그인 오른쪽 이미지 */
#sign div.container div.loginImgInner {}

#sign div.container div.loginImgInner img.animation {
  animation: step01 2s ease-in-out infinite;
  width: 35%;
}

#sign div.container div.loginImgWrapper {
  width: 680px;
  max-width: 680px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: start;
  transform: translateX(-1000px);
  transition: all 1s;
  background-color: #fff;
  padding-right: 30px;
  padding-top: 20px;
  z-index: 9;
}
/* 로그인 모달 이미지 띄우기 */
#sign div.container div.loginImgWrapper img.loginBg {
  width:100%;
  height:auto;
}
#sign div.container div.loginImgWrapper img.loginContents {
  position:absolute;
  top:33%;
  left:15%;
  width:75%;
}
#sign div.container div.loginImgWrapper img.loginBgAbsolute {
  width:200px;
  position:absolute;
  bottom:45px;
  right:-91px;
}
#sign ul.loginMove {
  width: 180px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#sign ul.loginMove li {
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  padding-left: 21px;
  cursor: pointer;
  align-items: start;
  overflow: hidden;
}

#sign ul.loginMove li:hover {
  background-color: #fff;
  box-shadow: 6px 6px 10px #00000029;
}

#sign ul.loginMove li a {
  font-size: 20px;
  width: 100%;
  font-weight: 400;
  display: flex;
  justify-content: start;
  align-items: center;
}

#sign ul.loginMove li.active a {
  font-weight: 600;
}

#sign ul.loginMove li.active {
  background-color: #fff;
  box-shadow: 6px 6px 10px #00000029;
}

#sign div.container div.textWrapper {
  text-align: center;

}

#sign div.container div.textWrapper h3 {
  font-size: 49px;
  z-index: 99999999;
}

#sign div.container div.textWrapper h5 {
  font-size: 22px;
  padding-top: 12px;
  position: relative;
}

#sign div.container div.textWrapper p {
  font-size: 17px;
  padding-top: 24px;
  line-height: 1.2;
}

#sign div.container div.textWrapper h3::after {
  display: block;
  content: "";
  height: 10px;
  width: 100%;
  border-radius: 30px;
  background-color: #ffe6b2;
  margin: -14px auto 0;
  z-index: -9999;
}

/* 로그인 alert 박스 */
#sign .alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #468847;
  width: 100%;
  font-size: 14px;
}

#sign .alert-dismissible .close {
  position: relative !important;
  top: -6px !important;
  right: -21px !important;
  color: inherit !important;
  width: auto !important;
  height: auto !important;
}

@media (max-width: 1700px) {
  #sideMenu div.logoWrapper {
    width: 93%;
  }
}

/*- - - - - - - - - 로그인 페이지 태블릿, 모바일 ver - - - - - - s - - - - - - -*/

@media (max-width: 1530px) {
  #sign div.container div.textWrapper h3 {
    font-size: 35px;
  }
}

@media (max-width: 1100px) {}

@media (max-width: 850px) {
  #sign div.container {
    flex-direction: column;
  }

  #sign div.container div.loginImgWrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 20px;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }
  #sign div.container div.loginImgWrapper img.loginBg {display:none;}
  #sign div.container div.loginImgWrapper img.loginContents {display:none;}
  #sign div.container div.loginImgWrapper img.loginBgAbsolute {display:none;}

  #sign div.container div.back {
    position: static;
    padding: 5px 10px;
    border-radius: 5px;
    width: 43px;
  }

  #sign div.container div.back img {
    width: 100%;
  }

  #sign div.container div.back span {
    display: none;
  }

  #sign ul.loginMove {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: auto;
    gap: 8px;
  }

  #sign ul.loginMove li {
    overflow: hidden;
    cursor: pointer;
    height: 100%;
    padding: 10px 15px;
    border-radius: 30px;
  }

  #sign ul.loginMove li a {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 14px;
  }

  #sign div.container div.loginContainer {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
}

@media (max-width: 768px) {

  #sign input#username,
  #sign input#password {
    width: 100%;
  }

  #sign div.container .loginLeftWrapper {
    width: 100%;
  }
}

@media (max-width: 360px) {
  #sign div.container {
    background: #fff;
  }

  #sign div.container div.loginContainer {
    width: 100%;
    max-width: 100%;
    margin: auto;
  }

  #sign input#username,
  #sign input#password {
    width: 100%;
    height: 45px;
  }

  #sign form {
    width: 80%;
    max-width: 80%;
  }

  #sign .checkBoxText {
    align-items: end;
    display: flex;
    font-size: 12px;
  }

  #sign div.container div.loginWrapper a.findPasswordLink {
    font-size: 12px;
  }

  #sign div.container div.loginWrapper a.signUp {
    font-size: 12px;
  }
}

@media (max-width: 294px) {
  #sign div.container div.loginContainer {
    width: 100%;
    max-width: 100%;
    margin: auto;
  }

  #sign form {
    width: 80%;
    max-width: 80%;
  }

  #sign .checkBoxText {
    align-items: end;
    display: flex;
    font-size: 11px;
  }

  #sign div.container div.loginWrapper a.findPasswordLink {
    font-size: 11px;
  }

  #sign div.container div.loginWrapper a.signUp {
    font-size: 11px;
  }
}



/*- - - - - - - - - 로그인 페이지 태블릿, 모바일 ver - - - - - - e - - - - - - -*/

/* 회원가입 */

#signup {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 80px 0;
}
@media (max-width:768px){
  #signup {
    padding:76px 0;
  }
}
#signup div.signup_wrapper {
  width: 100%;
  height: 100%;
  flex: 1;
}

#signup div.formWrapper .topBox {
  text-align: center;
}

#signup div.formWrapper .topBox h2 {
  font-size: 72px;
  font-weight: 600;
  color: #1E3069;
  margin-bottom: 32px;
  text-align: center;
}
@media (max-width:768px){
  #signup div.formWrapper .topBox h2 {
    font-size:36px;
  }
}
#signup div.formBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  max-width:100%;
  height: 100%;
}

#signup div.formWrapper {
  background: #fff;
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  margin: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* padding: 50px 0; */
}
@media(max-width:768px){
  #signup div.formWrapper {
    max-width:90%;
  }
}


#signup div.imgWrapper div.textWrapper {
  text-align: center;
}

#signup div.imgWrapper div.textWrapper h3 {
  font-size: 49px;
  z-index: 99999999
}

#signup div.imgWrapper div.textWrapper h5 {
  font-size: 22px;
  padding-top: 12px;
  position: relative;
}

#signup div.imgWrapper div.textWrapper h3::after {

  display: block;
  content: "";
  height: 10px;
  width: 100%;
  border-radius: 30px;
  background-color: #ffe6b2;
  margin: -14px auto 0;
  z-index: -9999;
}

#signup div.imgWrapper div.textWrapper p {
  font-size: 17px;
  padding-top: 24px;
  line-height: 1.2;
}

#signup .back {
  position: absolute;
  top: 25px;
  left: 25px;
  background: #00000034;
  padding: 5px 10px;
  border-radius: 5px;
}

#signup .back span {
  display: flex;
  padding-left: 3px;
  padding-top: 2px;
  color: #fff;
}

#signup div.formWrapper form {
  width: 414px;
  margin: 0 auto;
  padding-top: 17px;
  z-index:9;
}
@media(max-width:768px){
  #signup div.formWrapper form {
    width:100%;
  }
}

#signup div.formWrapper p.title::after {
  display: block;
  content: '';
  width: 364px;
  height: 1px;
  background-color: #707070;
  margin: 0 auto;
  margin-top: 20px;
}

#signup div.inputWrapper+div.inputWrapper {
  margin-top: 16px;
}

#signup div.inputWrapper label {
  font-size: 15px;
  font-weight: 400;
  color: #222;
  margin-bottom: 5px;
}
@media (max-width:768px){
  #signup div.inputWrapper label {
    font-size:12px;
  }
}

#signup div.inputWrapper input {
  width: 100%;
  min-height: 44px;
  background: #fff;
  border: 2px solid #6BBBD0;
  border-radius: 10px;
  font-size: 14px;
  padding: 0 22px;
}
@media (max-width:768px){
  #signup div.inputWrapper input {
    height:36px;
    border-radius: 5px;
    min-height: 36px;
  }
}

#signup div.inputWrapper input:focus {}

#signup div.checkBoxWrapper {
  display: flex;
  align-items: center;
  margin: 18px 0 30px;
  color: #222;
  justify-content: center;
}

#signup div.checkBoxWrapper p {
  font-size:14px;
}
@media(max-width:768px){
  #signup div.checkBoxWrapper p {
    font-size:12px;
  }
}
#signup div.capchaWrapper {
  margin-bottom: 16px;
  color: #fff;
}

#signup div.checkBoxWrapper a {
  margin-left: 10px;
  color: #222;
  text-decoration: underline;
  text-underline-position: under;
  font-size:14px;
}
@media (max-width:768px){
  #signup div.checkBoxWrapper a {
    font-size:12px;
  }
}

#signup div.checkBoxWrapper a:hover {
  text-decoration: underline !important;
}

#signup button.signupButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 45px;
  background: #1E3069;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  padding-left: 0;
}

@media(max-width:768px){
  #signup button.signupButton {
    font-size:12px;
    min-height:36px;
    border-radius: 5px;
    height: 36px;
  }
}
#signup .captcha {
  margin-left: 0;
}

/* 회원가입 체크박스 크기 조절 */
#signup input.terms-accept-checkbox {
  transform: scale(1.2);
  margin-right: 8px;
  align-items: center;
  display: flex;
  margin-bottom: 3px;
}

#signup input[type="checkbox"] {
  padding: 0;
  margin: 0;
  margin-right: 8px;
  margin-bottom: 2px;
}

/* 회원가입 alert 박스 */
#signup .alert-dismissible .close {
  position: relative !important;
  top: -2px !important;
  right: -15px !important;
}


/* - - - - - - - - - - - - - - - # 회원가입 mobile ver : s - - - -  - - - - - - - - - -*/
@media(max-width: 1245px) {
  #signup div.imgWrapper div.textWrapper h3 {
    font-size: 39px;
  }

  #signup div.imgWrapper div.textWrapper h5 {
    font-size: 17px;
  }
}

@media(max-width: 850px) {
  #signup {
  }

  #signup div.formBox {
    width: 100%;
    max-width: 100%;
    background: #fff;
  }

  #signup div.imgWrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 20px;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }

  #signup ul.loginMove {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: auto;
    gap: 8px;
  }

  #signup ul.loginMove li {
    cursor: pointer;
    height: 100%;
    padding: 10px 15px;
    border-radius: 30px;
  }

  #signup ul.loginMove li a {
    font-size: 14px;
  }

  #signup div.imgWrapper {}
  #signup img.signupContents {display:none;}
  #signup img.signupBg {display:none;}
  #signup {
  }



  #signup .back {
    position: static;
    width: 43px;
  }

  #signup .back img {
    width: 100%;
  }

  #signup .back span {
    display: none;
  }
}

@media(max-width: 540px) {
  #signup div.formWrapper form {
  }

  #signup div.formWrapper {
    width: 100%;
    max-width: 90%;
    margin: auto;
  }
}

@media(max-width: 450px) {
  #signup div.checkBoxWrapper {
    font-size: 11px;
    flex-wrap: wrap;
  }

  #signup input[type="checkbox"] {
    margin-right: 6px;
  }

  #signup input.terms-accept-checkbox {
    transform: scale(1);
  }
}


/* - - - - - - - - - - - - - - - #회원가입 mobile ver : e - - - -  - - - - - - - - - -*/






/* 비밀번호 찾기 */
#resetPassword {
  width: 100%;
  max-width: 900px;
  padding: 210px 0 80px;
  margin: 0 auto;
  min-height: 64.8vh;
  height: 100%;
}

#resetPassword .topBox {
  text-align: center;
}

#resetPassword .topBox p {
  font-size: 24px;
  font-weight: 500;
  color: #707070;
}

#resetPassword .topBox p:after {
  display:
    block;
  content:
    '';
  background-color: #707070;
  width: 368px;
  height: 1px;
  margin: 0 auto;
  margin-top: 24px;
}

#resetPassword div.formWrapper {
  background: #f8f8f8;
  border-radius: 5px;
  padding: 38px 36px;
}

#resetPassword div.inputWrapper {
  margin-bottom: 16px;
}

#resetPassword div.inputWrapper label {
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 13px;
  padding-top: 30px;
}

#resetPassword .formWrapper form {
  width: 45%;
  margin: 0 auto;
}

#resetPassword .form-group {
  display: flex;
  justify-content: center;
}

#resetPassword div.inputWrapper input {
  width: 100%;
  height: 50px;
  background: #fff;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  padding: 0 17px;
  border: 1px solid #EDEDED;
}

#resetPassword div.capchaWrapper {
  margin-bottom: 16px;
}

#resetPassword div.inputWrapper input:focus {
  border: 1px solid #1EA041;
}

#resetPassword button.resetPasswordButton {
  width: 100%;
  height: 48px;
  background: #1EA041;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  color: #fff;
}

/* 비밀번호 찾기 경고창 */
#resetPassword .alert-danger {
  margin-top: 15px;
  margin-bottom: 0;
}

/* 비밀번호 찾기 alert 박스 */
#resetPassword .alert-dismissible .close {
  position: relative !important;
  top: -3px !important;
  right: -20px !important;
  color: inherit !important;
  width: auto !important;
  height: auto !important;
}


/* - - - - - - - - - - - - - - - #resetPassword mobile ver : s - - - -  - - - - - - - - - -*/

@media (max-width: 930px) {
  #resetPassword {
    max-width: 90%;
    padding: 170px 0 80px;
  }

  #resetPassword div.inputWrapper label {
    font-size: 14px;
  }

  #resetPassword div.formWrapper {
    padding: 38px 165px;
    max-width:90%;
    margin:auto;
  }

  #resetPassword .topBox p:after {
    width: 100%;
  }

  #resetPassword .formWrapper form {
    width: 96%;
  }
}

@media(max-width:650px) {
  #resetPassword div.formWrapper {
    padding: 38px 15px;
  }

  #resetPassword .topBox p {
    font-size: 16px;
  }
}


/* FAQ */
#faq {

}

#faq.authPage {

}


#faq .even figure {
  margin-right: 32px;
}

#faq figure.active {
  background-color: #1EA041;
  transition: all linear 0.6s;
}

#faq figure.active strong {
  color: #fff !important;
}

#faq figure.active div {
  display: block;
  color: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 300;
  transition: linear 0.4s;
}

#faq figure.active span.faqStrong {
  display: block;
  font-size: 20px;
  font-weight: 500;
  padding-bottom: 5px;
  color: #fff;
}

#faq .even figure strong,
#faq .odd figure strong {
  font-size: 20px;
  color: #000;
  font-weight: 400;
  cursor: pointer;
  width: 100%;
  display: block;
}

#faq .odd {}

#faq figure div {
  display: none;
}

#faq .even figure strong::after,
#faq .odd figure strong::after {
  content: "\e942";
  display: inline-block;
  font-family: xeicon !important;
  float: right;
  font-size: 23px;
  color: #000;
}

#faq figure.active strong::after,
#faq figure.active strong::after {
  color: #fff;
}

#faq div.wrapper {

}
/**/
@media (max-width:1650px) {

}
#faq div.wrapper.authPage {
  max-width: 100%;
  min-height: 68vh;
  height: 100%;
}

#faq div.wrapper div.faqFilterWrapper {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  gap: 6px;
}

#faq div.wrapper div.faqFilterWrapper div.faqFilterBox {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #F4F4F4;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  background-color: #F4F4F4;
  padding: 10px 25px;
  color: #C9C9C9;
  border-radius: 5px;
}

#faq div.wrapper div.faqFilterWrapper div.faqFilterBox.active {
  background: #0B67CE;
  color: #fff;
  font-weight: 600;
}

#faq div.wrapper div.faqFilterWrapper div.faqFilterBox+div.faqFilterBox {}

#faq div.wrapper div.faqListWrapper {}

/* - - - - - - - - - - - - - - - #faq mobile ver : s - - - -  - - - - - - - - - -*/
@media (max-width: 1630px) {
  #faq.authPage {
    max-width: 100%;
    margin: auto;
  }
}

@media (max-width: 1300px) {
  #faq .menu-1 {
    display: block !Important;
  }

  #faq .even figure {
    margin-right: 0;
  }
}

@media (max-width: 1130px) {
  #faq.authPage div.mobileTitle {
    max-width: 100% !important;
    margin: 0 auto 50px;
  }

  #faq div.mobileTitle {
    display: none;
  }
}

@media (max-width: 700px) {
  #faq div.mobileTitle {
    display: none;
  }

  #faq.authPage div.mobileTitle {
    margin: 0 auto 28px;
  }

  #faq figure.active div {
    font-size: 11px;
  }

  #faq,
  #faq.authPage {
    padding: 28px 10px 100px 10px !important;
  }

  #faq div.wrapper {
    padding: 33px 16px;
    padding-left: 16px !important;
    overflow: auto;
    height: auto !important;
    min-height: auto;
    margin-top: 100px;
    max-width: calc(100% - 50px);
  }

  #faq div.wrapper.authPage {
    width: 100%;
    margin: 20px auto;
    max-width: 98%;
    padding: 33px 16px;
  }

  #faq div.wrapper div.faqFilterWrapper {
    margin-bottom: 16px;
    padding-left: 0;
    flex-wrap: wrap;
    gap: 5px;
  }

  #faq div.wrapper div.faqFilterWrapper div.faqFilterBox {
    font-size: 13px;
    padding: 9px 11px;
  }

  #faq div.wrapper div.faqFilterWrapper div.faqFilterBox+div.faqFilterBox {
    margin-left: 0;
  }

  #faq .menu-1 {
    display: block !Important;
  }

  #faq .even figure {
    margin-right: 0;
  }

  #faq .even figure strong,
  #faq .odd figure strong {
    font-size: 12px;
  }

  #faq figure.active span.faqStrong {
    font-size: 14px;
  }

  #faq .even figure strong::after,
  #faq .odd figure strong::after {
    font-size: 16px;
  }

  #faq figure.active strong {
    color: #fff !important;
    font-size: 14px !important;
  }

  #faq figure div {
    font-size: 10px;
    padding: 12px;
  }

  #faq figure {
    /* padding: 15px 12px; */
  }
}

@media (max-width: 300px) {
  #faq div.wrapper div.faqFilterWrapper div.faqFilterBox {}

  #faq div.wrapper div.faqFilterWrapper div.faqFilterBox+div.faqFilterBox {
    margin-left: 0;
  }

  #faq div.wrapper div.faqFilterWrapper {
    padding-left: 0;
    margin-bottom: 16px;
  }

  #faq .even figure strong {
    font-size: 10px;
  }

  #faq .even figure strong::after,
  #faq .odd figure strong::after {
    font-size: 12px;
  }

  #faq figure.active strong {
    font-size: 11px !important;
  }

  #faq figure.active div {
    font-size: 10px;
  }
}

/* - - - - - - - - - - - - - - - #faq mobile ver : s - - - -  - - - - - - - - - -*/


/* 주문하기 */
#neworder {
  width: 100%;
  height:100%;
  background-color: transparent;
}

#neworder .btn-default {
  background-color: #999999;
  padding: 10px;
  margin-left: 8px;
  border-radius: 5px;
}

#neworder .input-group button {
  border: none;
  height: 40px;
}

#neworder .input-group-btn:last-child>.btn {}



#neworder section {}

#neworder section a.sectionTitle {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 13px;
  color: #000;
  display: block;
}

#neworder div.rightWrapper section.noticeWrapper p.sectionTitle {
  display: inline-block;
  border: 1px solid #f4f4f4;
  background-color: #000;
  padding: 10px 20px;
  border-radius: 28px;
  color: #fff;
}

#neworder section div.sectionContents {
  width: 100%;
}
@media (min-width: 1400px){
  #neworder section div.sectionContents {
    flex: 1;
    padding: 40px 20px 40px 20px;
    border: 1px solid #EEEEEE;
    border-radius: 15px;
    box-shadow: 0px 5px 5px #FAFAFA;
    background: #FFFFFF;
  }
}



/* 주문하기 토스트 메세지 */
#neworder .toastWrapper {
  display: flex;
  gap: 12px;
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 284px;
  height: 72px;
  background: #3B3B3B;
  box-shadow: 6px 9px 1px #00000060;
  border-radius: 5px;
  padding: 6px 6px 6px 41px;
  align-items: center;
  z-index: 10;
}
#neworder .toastWrapper::after {
  content: '';
  display: block;
  width: 8px;
  position: absolute;
  top: 3px;
  left: 5px;
  height: 90%;
  background-color: #6DFF00;
  border-radius: 5px;
}
#neworder .toastWrapper img {
  height:auto;
}
#neworder .toastWrapper.error::after {
  background-color: #D9A20E;
}

#neworder .toastWrapper.success p {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
#neworder .toastWrapper.error {
  background: #3B3B3B;
}
#neworder strong.errorMessageTitle {
  color:#fff!important;
  font-size:15px!important;
  font-weight:500;
}

#neworder p.errorMessageContents {
  color:#fff;
  font-size:12px;
  font-weight:400;
}
#neworder .closeButton {
  width: 32px;
  height: 32px;
  cursor: pointer;
}

/* 주문하기 탭 */
#neworder .tabArea {
  align-items: center;
  background: #ffffff 0% 0% no-repeat padding-box;
  display: flex;
  flex-direction: column;
  flex: 0.35;
  padding: 50px 20px 50px 20px;
}
@media (max-width:1750px){
  #neworder .tabArea {
    padding: 50px 30px 50px 50px;
  }
}
#neworder .sectionTabWrapper {
  display: flex;
  border-bottom: 1px solid #F4F4F4;
  margin-bottom: 24px;
  gap: 10px;
}

#neworder .sectionTabWrapper .sectionTab {
  cursor: pointer;
  transition: 0.2s;
  font-weight: 500;
  font-size: 17px;
  padding: 12px 20px;
  border-radius: 5px;
  background-color: #F4F4F4;
  color: #C9C9C9;
}

#neworder .sectionTabWrapper .sectionTab.active {
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  padding: 12px 20px;
  border-radius: 5px;
  background-color: #1EA041;
}
@media (max-width:450px) {
  #neworder .sectionTabWrapper .sectionTab {
    font-size:16px;
  }
  #neworder .sectionTabWrapper .sectionTab.active {
    font-size:16px;
  }
}




#neworder div.tabWrapper div.tab:nth-child(1) {
  background: #F4F4F4;
  border: 1px solid transparent;
  color: #9f9d9d;
}

#neworder div.tabWrapper div.tab:nth-child(2) {
  background: #F4F4F4;
  border: 1px solid transparent;
  color: #9f9d9d;
}

#neworder div.tabWrapper div.tab:nth-child(3) {
  background: #F4F4F4;
  border: 1px solid transparent;
  color: #9f9d9d;
}

#neworder div.tabWrapper div.tab:nth-child(4) {
  background: #F4F4F4;
  border: 1px solid transparent;
  color: #9f9d9d;
}

#neworder div.tabWrapper div.tab:nth-child(5) {
  background: #F4F4F4;
  border: 1px solid transparent;
  color: #9f9d9d;

}

#neworder div.tabWrapper div.tab:nth-child(6) {
  background: #F4F4F4;
  border: 1px solid transparent;
  color: #9f9d9d;
}

#neworder div.tabWrapper div.tab .tabIcon {
  display: inline;
  padding-right: 4px;
}

#neworder div.tabWrapper div.tab .tabIcon img {
  width: 22px;
}

#neworder div.tabWrapper div.tab.active {
  font-weight: 700;
}




/* 자동주문 - 공지사항 */
#neworder .autoDescriptionWrapper {
  display: flex;
  position: relative;
  background-color: #1ea04126;
  border-radius: 4px;
  padding: 18px 20px;
  margin-bottom: 24px;
}

#neworder .autoDescriptionWrapper strong {
  display: inline;
  font-size: 14px;
  color: #000;
}

#neworder .autoDescriptionWrapper .idStrong {
  font-weight: 800;
}

#neworder .autoDescriptionWrapper i {
  display: flex;
  padding-top: 4px;
  padding-right: 10px;
  color: #000;
}


/* 주문하기 form */
#neworder section.orderWrapper div.formWrapper {}

#neworder section.orderWrapper div.formWrapper div.inputWrapper+div.inputWrapper {
  margin-top: 12px;
}

/* 주문하기 - 상품선택 셀렉트박스  */
#neworder section.orderWrapper div.formWrapper div.inputWrapper+div.inputWrapper .select2-container .select2-selection--single .select2-selection__rendered {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.select2-container--default .select2-results>.select2-results__options {
  max-height: 320px;
  overflow-y: auto !important;
}

#neworder section.orderWrapper div.formWrapper div.inputWrapper+div.inputWrapper .moveDiv {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 1px 5px;
  font-size: 12px;
  border-radius: 5px;
  text-align: center;
  vertical-align: middle;
  align-items: center;
  margin-bottom: 5px;
  margin-left: 9px;
  cursor: pointer;
  display: none;
}

#neworder section.orderWrapper .select2-container .select2-selection--single {
  border-radius: 5px;
  background-color: #F4F4F4;
  border: none;
  box-shadow: none;
}


#neworder section.orderWrapper .form-control {
  border-radius: 5px;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

#neworder #field-orderform-fields-delay {
  background: url(https://storage.perfectcdn.com/gz2yx6/zpju4jm5eb616qa6.png) no-repeat 96%;
  display: block;
  appearance: none;
}

#neworder .form-control:focus {
  border: 1px solid #1EA041;
  border-color: #1EA041;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#neworder .select2-hidden-accessible:focus {
  border: none !important;
}

#neworder section.orderWrapper div.formWrapper div.inputWrapper label {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}



#neworder section.orderWrapper .control-label {
  font-size: 14px;
  /* padding-bottom: 12px; */
}


#neworder section.orderWrapper div.formWrapper div.inputWrapper input:disabled {
  background: #9F9F9F;
  height: 44px;
  font-size: 18px;
  color: #fff;
  padding-left: 21px;
}

#neworder #fields {
  margin-top: 16px;
}

#neworder .help-block {
  font-weight: 600;
  color: #1EA041;
  margin-bottom: 0px !important;
}

#neworder .form-group__checkbox {
  display: flex;
  gap: 8px;
}

/* #neworder - 자동주문 - 구매수량*/
#neworder .col-md-6 {
  margin-bottom: 0px;
  padding-right: 5px;
  padding-left: 0 !important;
}

#neworder .col-md-6:last-of-type {
  padding-right: 0;
}

#neworder #order_old_posts {
  display: none;
}

#neworder .col-md-6 label {
  font-size: 14px;
}

/* 주문하기 버튼 */
button.orderButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background: #1EA041;
  border: none;
  border-radius: 5px;
  color: #fff;
  margin-top: 16px;
  font-size: 16px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  right: 17px !important;
}


/* 유저 counter */
#neworder div.rightWrapper section.counterWrapper {
  display: flex;
  gap: 28px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 32px 0;
}

/* 유저 counter box*/
#neworder div.rightWrapper section.counterWrapper div.counterBox {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  width: 170px;
  height: 135px;
  border-radius: 5px;
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

#neworder div.rightWrapper section.counterWrapper div.counterBox p.numberText {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 8px;
  text-align: center;
}

#neworder div.rightWrapper section.counterWrapper div.counterBox p.numberText::after {
  content: "";
  display: block;
  background-color: #000;
  height: 1px;
  width: 23px;
  margin: 10px auto;
}

#neworder div.rightWrapper section.counterWrapper div.counterBox p.title {
  font-size: 14px;
  text-align: center;
}

/* 24 시간 주문*/
#neworder div.rightWrapper section.smallBoxWrapper {
  display: flex;
  gap: 28px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 32px 0;
}

#neworder div.rightWrapper section div.smallBox {
  gap: 5px;
  display: flex;
  flex-direction: row !important;
  flex: 1;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 16px;
  width: 170px;
  height: 50px !important;
  border-radius: 20px;
  border: 1px solid #008BFF;
  box-shadow: 0px 0px 20px #00000029;

}

/* 가동 확인시간 */
#neworder div.rightWrapper section.confirmTimeWrapper {
  display: flex;
  justify-content: left;
  align-items: center;
  margin: 0 0 32px 0;
  border-radius: 45px;
  border: none;
  color: #fff;
  letter-spacing: 1.2px;
  padding: 0;
}

#neworder .confirmBottom {
  flex: 1;
  display: flex;
  color: #fff;
  text-align: center;
  font-size: 13px;
  padding: 0;
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

#neworder .confirmBottomDiv {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background-color: #0B67CE;
  border: none;
  color: #fff;
  letter-spacing: 1.2px;
  padding: 14px 0;
  margin: 0;
  padding: 0;
  height: 44px;
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

#neworder .confirmTop {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: end;
  margin: 0 0 0 0;
  background: transparent linear-gradient(90deg, #008BFF 0%, #008BFF 100%) 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 8px #00000021;
  border: none;
  color: #fff;
  letter-spacing: 1.2px;
  padding: 4px 0 8px;
  height: 33px;
  font-size: 12px;
}

#neworder div.rightWrapper section.confirmTimeWrapper p.timerText {
  font-size: 14px;
  color: #fff;
}

#neworder span.timer {
  color: #fff;
  animation-name: timer;
  animation-duration: 1s;
  animation-timing-function: linear;
}

@keyframes timer {
  from {
    color: blue;
    transform: rotate(1 turn);
  }

  to {
    color: yellow;
    transform: translateX(30px)
  }
}

#neworder figure.figure {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 100%;
  margin-right: 7px;
  width: 35px !important;
  height: 35px !important;
  background-color: #fff;
  padding: 0;
  margin-bottom: 0;
}

#neworder img.figureImg {
  position: relative;
  background: currentColor;
  background-color: #fff;
  width: 20px;
  margin-top: 7px;
  margin-left: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 공지사항 */
#neworder div.rightWrapper section.noticeWrapper {
  margin: 0 0 0 0;
  background: #fff;
  border-radius: 5px;
  padding: 25px 20px;
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

#neworder div.rightWrapper section.noticeWrapper div.sectionContents {
  max-height: 100px;
  overflow-y: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #f4f4f4;
  padding: 12px 22px;
  border-radius: 5px;
  line-height: 1.6;
}

#neworder div.rightWrapper section.noticeWrapper div.sectionContents * {
  color: inherit;
}

#neworder .noticeContentsWrapper {
  background-color: #fff;
  margin-top: 5px;
  border-radius: 5px;
  overflow: auto;
  padding: 0px 0 4px 0px;
  border: 1px solid #D8D8D8;
  height: 150px;
  transition: padding 0.3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#neworder .noticeContentsWrapper p {
  font-size: 14px;
  line-height: 1.82;
  -webkit-user-select: none;
  font-weight: 600;
}

#neworder .noticeTab {
  padding: 12px 27px;
  border-radius: 5px;
  background-color: #F4F4F4;
  color: #C9C9C9;
  cursor: pointer;
}

#neworder .noticeTab.active {
  background-color: #0B67CE;
  color: #fff;
}

#neworder .noticeContentsWrapper::-webkit-scrollbar {
  width: 3px;
  /* 스크롤바의 너비 */
}

#neworder .noticeContentsWrapper::-webkit-scrollbar-thumb {
  height: 10%;
  /* 스크롤바의 길이 */
  background: #1971ea;
  /* 스크롤바의 색상 */

  border-radius: 10px;
}

#neworder .noticeContentsWrapper::-webkit-scrollbar-track {
  background: rgba(33, 122, 244, .1);
  /*스크롤바 뒷 배경 색상*/
}

/* drible text-effect */
.button {
  --font-size: 16px;
  --duration: .44s;
  --move-hover: -4px;
  --font-shadow:
    var(--font-size);
  font-weight: 500;
  line-height: var(--font-size);
  border-radius: 24px;
  display: block;
  outline: none;
  text-decoration: none;
  font-size: var(--font-size);
  letter-spacing: 0.5px;
  background: var(--background);
  color: var(--text);
  transform: translateY(var(--y)) translateZ(0);
  transition: transform var(--duration) ease, box-shadow var(--duration) ease;
}

/* 주문하기 페이지 버튼 */
.button .sectionTab div {
  display: flex;
  overflow: hidden;
  text-shadow: 0 var(--font-shadow) 0 #ccc;
}

.button .sectionTab.active div {
  display: flex;
  overflow: hidden;
  text-shadow: 0 var(--font-shadow) 0 #fff;
}

.button .noticeTab div {
  display: flex;
  overflow: hidden;
  text-shadow: 0 var(--font-shadow) 0 #ccc;
}

.button .noticeTab.active div {
  display: flex;
  overflow: hidden;
  text-shadow: 0 var(--font-shadow) 0 #fff;
}

/* 주문내역 페이지 버튼 */

.button .statusButton div {
  display: flex;
  overflow: hidden;
  text-shadow: 0 var(--font-shadow) 0 #ccc;
}

.button .statusButton.active div {
  display: flex;
  overflow: hidden;
  text-shadow: 0 var(--font-shadow) 0 #fff;
}

/* top 계정정보, hot 해시태그 페이지 버튼 */
.button .tab div {
  display: flex;
  overflow: hidden;
  text-shadow: 0 var(--font-shadow) 0 #ccc;
}

.button .tab.active div {
  display: flex;
  overflow: hidden;
  text-shadow: 0 var(--font-shadow) 0 #fff;
}

/* faq 페이지 버튼 */

.button .faqFilterBox div {
  display: flex;
  overflow: hidden;
  text-shadow: 0 var(--font-shadow) 0 #ccc;
}

.button .faqFilterBox.active div {
  display: flex;
  overflow: hidden;
  text-shadow: 0 var(--font-shadow) 0 #fff;
}

/* 자동주문,분할주문 페이지 버튼 */

.statusButton div {
  display: flex;
  overflow: hidden;
  text-shadow: 0 var(--font-shadow) 0 #ccc !important;
}

.statusButton.active div {
  display: flex;
  overflow: hidden;
  text-shadow: 0 var(--font-shadow) 0 #fff;
}

.button div span {
  display: block;
  backface-visibility: hidden;
  font-style: normal;
  transition: transform var(--duration) ease;
  transform: translateY(var(--m)) translateZ(0);
}

.button div span:nth-child(1) {
  transition-delay: 0.05s;
}

.button div span:nth-child(2) {
  transition-delay: 0.1s;
}

.button div span:nth-child(3) {
  transition-delay: 0.15s;
}

.button div span:nth-child(4) {
  transition-delay: 0.2s;
}

.button div span:nth-child(5) {
  transition-delay: 0.25s;
}

.button div span:nth-child(6) {
  transition-delay: 0.3s;
}

.button div span:nth-child(7) {
  transition-delay: 0.35s;
}

.button div span:nth-child(8) {
  transition-delay: 0.4s;
}

.button div span:nth-child(9) {
  transition-delay: 0.45s;
}

.button div span:nth-child(10) {
  transition-delay: 0.5s;
}

.button div span:nth-child(11) {
  transition-delay: 0.55s;
}

.button:hover {
  --y: var(--move-hover);
}

.button:hover span {
  --m: calc(var(--font-size) * -1);
}





#neworder figure {
  cursor: pointer;
  padding: 17px 32px;
  background-color: #FAFAFA;
  margin-bottom: 12px;
  border-radius: 10px;
  transition: linear 0.4s;
}

#neworder .active strong {
  font-size: 20px;
  color: #fff;
}

#neworder strong {
  width: 100%;
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: #9F9F9F;
}

#neworder figure div {
  display: none;
}

#neworder figure strong::after {
  content: "\e942";
  display: inline-block;
  font-family: xeicon !important;
  float: right;
  font-size: 23px;
}

#neworder figure.active {
  background-color: #008BFF;
  transition: all ease-in-out 0.4s;
}

#neworder figure.active div {
  display: block;
  color: #333;
  background-color: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 400;
  cursor: auto;
  transition: all ease-in-out 0.4s;
}

#neworder figure div {
  display: none;
}


/* 설명 */
#neworder div.rightWrapper section.itemDescriptionWrapper div.sectionContents p {
  font-size: 13px;
}

#neworder .sec7Container img {
  width: 100%;
}

#neworder .itemDescriptionWrapper {
  margin: 32px 0 0 0;
  background: #fff;
  border-radius: 5px;
  padding: 24px 26px 24px 32px;
  display: block;
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

#neworder .sectionTitle {
  font-size: 16px;
  margin-bottom: 16px;
  display: block;
  font-weight: 500;
  color: #000;
}

#neworder .noticeWrapper {}

#neworder .noticeWrapper .noticeTabWrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#neworder .input-group {
  padding-top: 12px;
  max-width: 100%;
  display: flex;
  position: relative;
}

/* - - - - - - - - - - - - - - - #neworder mobile ver : s - - - -  - - - - - - - - - -*/

@media (max-width:1800px) {
  #neworder .confirmBottomDiv {
    font-size: 12px;
  }
}

@media (max-width:1700px) {
  #neworder div.rightWrapper section.confirmTimeWrapper {
    display: inherit;
  }

  #neworder .confirmTop {
    text-align: center;
  }

  #neworder .confirmBottom {
    display: block;
    text-align: center;
  }

  #neworder img.figureImg {
    margin-left: 0;
    border-radius: 0;
  }

  #neworder .confirmBottomDiv {
    margin-bottom: 10px;
    padding:10px;
  }
}

@media (max-width: 1630px) {
  #neworder div.wrapper {
    padding: 0;
  }
}

@media (max-width: 1500px) {
  #neworder div.rightWrapper section.counterWrapper {
    flex-wrap: wrap;
  }

  #neworder div.rightWrapper section.counterWrapper div.counterBox {
    flex: auto;
    flex-wrap: wrap;
  }

  #neworder .confirmTop {
    text-align: center;
  }

  #neworder figure.figure {
    display: inline-block;
    width: 30px !important;
    height: 30px !important;
    margin-right: 5px;
    font-size: 11px;
  }

  #neworder .confirmBottom {
    font-size: 12px;
    text-align: center;
    display: block;
    padding: 0;
    margin-top: 10px;
  }

  #neworder img.figureImg {
    position: relative;
    background-color: #fff;
    width: 15px;
    margin-top: 0px;
    margin-left: 0;
    font-size: 11px;
  }
}

@media (max-width: 1120px) {
  #neworder div.wrapper {
    display: block;
  }

  #neworder .tabArea {
    padding: 36px 31px 13px;
    box-shadow: none;
  }

  #neworder div.tabWrapper {
    /* width: 100%; */
    /* justify-content: center; */
    /* display: grid; */
    grid-template-columns: 1fr 1fr;
    /* gap: 6px; */
    /* box-shadow: none; */
  }

  #neworder div.tabWrapper div.tab {
    margin-bottom: 0;
    width: 100%;
    flex-direction: column;
    font-size: 13px;
    border: 1px solid #f4f4f4;
    box-shadow: none;
  }

  #neworder .sectionTabWrapper {
    display: flex;
    border-bottom: 1px solid transparent;
    margin-bottom: 16px;
    gap: 10px;
  }

  #neworder section.orderWrapper {
    margin-right: 0;
    padding: 9px 31px 50px;
    box-shadow: none;
    height: auto;
  }

  #neworder div.rightWrapper section.counterWrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 32px 0 32px 0;
  }

  #neworder div.rightWrapper section.counterWrapper div.counterBox {
    width: auto;
  }

  #neworder section.orderWrapper div.formWrapper div.inputWrapper+div.inputWrapper .moveDiv {
    display: inline-block;
  }

  #neworder .toastWrapper {
    width: 94.7%;
    margin: 32px auto 0;
    height: 32px;
  }

  #neworder .help-block {
    margin-bottom: 15px !important;
  }

  #neworder select#field-orderform-fields-delay {
    margin-bottom: 15px;
  }
}

@media (max-width: 992px) {
  #neworder .col-md-6 {
    padding-right: 0;
  }
}

@media (max-width: 960px) {
  #neworder div.tabWrapper div.tab {
    width: 100%;
  }
}

@media (max-width: 768px) {
  #neworder section {
    background: #fff;
  }

  #neworder div.wrapper {
    display: block;
    padding: 35px 0px !important;
  }

  #neworder .tabArea {
    padding: 25px 31px 35px;
  }

  #neworder div.tabWrapper div.tab {
    display: flex;
    gap: 10px;
    width: 100%;
    box-shadow: none;
  }

  #neworder section.orderWrapper .sectionTabWrapper .sectionTab {
    font-size: 16px;
    margin-right: 13px;
  }

  #neworder section.orderWrapper .sectionTabWrapper .sectionTab.active {
    font-size: 16px;
  }

  #neworder section.orderWrapper {
    margin-right: 0;
    margin-bottom: 26px;
    /* border: 1px solid #ddd; */
    padding: 50px 31px 50px;
    height: auto;
  }

  #neworder div.rightWrapper {
    margin-right: 0;
    /* padding: 50px 31px 50px; */
  }

  #neworder div.rightWrapper section.counterWrapper {
    margin: 0 0 28px 0;
  }

  #neworder div.rightWrapper section.confirmTimeWrapper {
    margin: 0 0px 28px 0;
    font-size: 12px;
  }

  #neworder div.rightWrapper section.noticeWrapper {
    margin: 0 0 0 0;
  }

  #neworder .itemDescriptionWrapper {
    margin: 28px 0 15px 0;
    font-size: 12px;
  }

  #neworder .noticeContentsWrapper p {
    font-size: 10px;
  }

  #neworder section.orderWrapper div.tabWrapper div.tab .tabIcon {
    display: block;
    padding-right: 0;
  }

  #neworder section.orderWrapper div.tabWrapper div.tab {
    display: inline-block;
    padding: 5px 0;
    margin-right: 4px;
    cursor: pointer;
    background-color: #F4F4F4;
    border-radius: 5px;
    height: 44px;
    font-size: 10px;
    font-weight: 600;
    width: 66px;
    color: #C9C9C9;
    height: 49px;
    padding-left: 2px;
    text-align: center;
  }

  #neworder figure {
    padding: 12px;
  }

  #neworder strong {
    font-size: 15px;
  }

  #neworder .active strong {
    font-size: 17px;
  }

  #neworder figure strong::after {
    font-size: 16px;
  }

  #neworder figure div {
    width: auto;
    padding: 12px;
  }

  #neworder .autoDescriptionWrapper {
    padding: 18px 10px;
    margin-bottom: 24px;
  }

  #neworder .autoDescriptionWrapper strong {
    font-size: 11px;
  }

  #neworder .autoDescriptionWrapper i {
    padding-top: 4px;
    padding-right: 6px;
  }

  #neworder figure.active div {
    font-size: 10px !important;
    padding: 12px;
  }

  #neworder section.orderWrapper div.tabWrapper div.tab .tabIcon img {
    width: 22px;
    height: 25px;
    padding-bottom: 3px;
  }

  #neworder section.orderWrapper div.tabWrapper div.tab:nth-child(4) img {
    padding: 4px 0;
  }

  #neworder section.orderWrapper div.tabWrapper div.tab.active {
    font-size: 10px;
  }

  #neworder section.orderWrapper div.formWrapper div.inputWrapper+div.inputWrapper {
    padding-bottom: 0;
  }

  #neworder div.rightWrapper section.counterWrapper div.counterBox p.numberText {
    font-size: 20px;
  }

  #neworder div.rightWrapper section.counterWrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  #neworder div.rightWrapper section.counterWrapper div.counterBox {
    height: 136px;
    width: auto;
  }

  #neworder .noticeTab {
    font-size: 14px;
  }

  #neworder .linkGuideWrapper {
    padding-top: 16px;
  }

  #neworder .menu-1 ul>li {
    transition: linear 0.4s;
  }

  #neworder .menu-1 ul>li>p {
    color: #9F9F9F;
    font-size: 14px;
    font-weight: 400;
    padding-left: 12px;
  }

  #neworder .menu-1 ul>li i {
    float: right;
    padding-right: 28px;
    font-size: 24px;
    color: #9F9F9F;
  }

  #neworder .menu-1 ul>li.active>p:not(:only-child) {
    font-size: 14px;
    color: #fff;
    padding-bottom: 12px;
  }

  #neworder .menu-1 ul>li.active {
    padding: 16px 10px;
  }

  #neworder .menu-1 ul>li.active i {
    padding-right: 0;
  }

  #neworder .menu-1 ul>li.active .menu-1-body__content {
    font-size: 10px;
  }

  #neworder .menu-1 ul>li.active>div {
    width: auto;
    padding: 13px 15px;
  }

  /* 에러메시지 */
  #neworder .toastWrapper.error {
    margin: 32px auto 0;
    top: 0;
  }

  #neworder .toastWrapper.success {
    margin: 32px auto 0;
    top: 0;
  }
}

@media (max-width: 360px) {}

@media (max-width: 500px) {
  #neworder .confirmBottomDiv {
    font-size: 10px;
    margin-bottom: 10px;
  }

  #neworder .confirmBottomDiv {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 20px #00000029;
    border-radius: 5px;
    border: none;
    color: #fff;
    letter-spacing: 1.2px;
    margin: 0;
    padding: 10px;
    height: 44px;
    margin-bottom: 10px;
  }

  #neworder .noticeContentsWrapper {
    padding: 5px 5px 15px 10px;
  }
}

@media (max-width: 350px) {
  #neworder .noticeWrapper .noticeTabWrapper {
    display: block;
  }

  #neworder .noticeTab:first-of-type {
    width: 115px;
    margin-bottom: 10px;
  }

  #neworder .noticeTab:last-of-type {
    width: auto;
  }
}

@media (max-width: 360px) {
  #neworder section.orderWrapper .sectionTabWrapper .sectionTab.active {
    padding: 10px;
    font-size: 13px;
  }

  #neworder section.orderWrapper .sectionTabWrapper .sectionTab {
    padding: 10px;
    font-size: 13px;
  }

  #neworder section.orderWrapper {
    padding: 50px 31px 50px;
  }

  #neworder div.rightWrapper {
    /* padding: 19px 31px 50px; */
  }

  #neworder .confirmBottomDiv {
    border-radius: 5px;
  }
}

@media (max-width: 280px) {
  #neworder figure {
    padding: 12px 7px;
  }

  #neworder strong {
    font-size: 10px;
  }

  #neworder figure strong::after {
    font-size: 8px;
  }

  #neworder .itemDescriptionWrapper {
    padding: 24px 18px 24px 14px;
  }

  #neworder section.orderWrapper div.tabWrapper div.tab {
    margin-right: 0;
  }
}






/* - - - - - - - - - - - - - - - #neworder mobile ver : e - - - -  - - - - - - - - - -*/

/* 주문 내역 모바일 타이틀 안보이게 하기 */
#orders div.mobileTitle {
  display: none;
}


/* 주문 내역 */
#orders {
  width: 100%;
  background-color: #fff;
}

#orders .wrapper {
  background-color: #fff;
}


/* 주문 내역 총합 */
#orders div.totalWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 32px;
}

#orders div.totalWrapper div.totalBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  border: 1px solid #008BFF;
  border-radius: 25px;
  padding: 39px 10px;
  box-shadow: 0px 0px 20px #00000029;
  height: 135px;
}

#orders div.totalWrapper div.totalBox+div.totalBox {
  margin-left: 32px;
}

#orders div.totalWrapper div.totalBox p.count {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 9px;
  text-align: center;
}
#orders div.totalWrapper div.totalBox p.count::after {
  display:block;
  content:'';
  background-color:#000;
  width:20px;
  height:1px;
  margin: 7px auto;
}

#orders div.totalWrapper div.totalBox p.name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-align: center;
}

/* 주문내역 - 검색 filter */
#orders div.orderHistoryWrapper {
  height: auto;
  padding: 30px 0;
  margin-bottom: 60px;
  margin-left: 32px;
  background-color: #fff;
  margin-right: 56px;
}

/* option focus 시 border 없애기 */
#orders .orderHistoryWrapper button,
#orders .orderHistoryWrapper a,
#orders .orderHistoryWrapper select{
  outline:0;
}
#drip-feed .filterWrapper button, 
#drip-feed .filterWrapper a,
#drip-feed .filterWrapper select {
  outline:0;
}
#subscriptions .filterWrapper button, 
#subscriptions .filterWrapper a, 
#subscriptions .filterWrapper select {
  outline:0;
}
#orders .orderHistoryWrapper button, #orders .orderHistoryWrapper a, #orders .orderHistoryWrapper select {
  outline: 0;
}
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
#orders #history-search {
  margin-bottom:0;
}
#orders .btn-default {
  border-radius: 0;
  border: none!important;
  background-color: #fff;
  padding: 0px 18px;
  background-image: none;
  height: 34px!important;
  display: flex;
  align-items: center;
  box-shadow: none!important;
  background: transparent;
}
#orders .input-group .form-control {
  width: 350px;
  max-width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  height: 34px;
  padding: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: #9F9F9F;
}
#orders select, #drip-feed select, #subscriptions select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background-color: #fff;
  width: 156px;
  max-width: 100%;
  height: 34px;
  border-radius: 4px;
  border: none;
  padding-left: 11px;
  color: #9F9F9F;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  color: #5D5D5D;
}
#orders div.orderHistoryWrapper div.filterWrapper {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  background: #F4F5F7;
  height: 64px;
  padding: 0 4px;
  gap: 11px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
}

#orders div.orderHistoryWrapper div.filterWrapper div.statusButtonWrapper {
  display: flex;
  align-items: center;
  margin-right: auto;
  gap: 6px;
}

#orders .input-group .form-control:first-child {
  border-radius: 20px 0 0 20px;
}
#orders .btn-default {
  border-radius: 0 20px 20px 0;
  background-color: #fff;
  border-right: 1px solid #DBDBDB!important;
  border-top: 1px solid #DBDBDB!important;
  border-bottom: 1px solid #DBDBDB!important;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  padding: 9px 18px;
  height: 43px!important;
}
#orders .input-group .form-control {
  width: 350px;
  max-width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  height: 34px;
  padding: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: #9F9F9F;
}

#orders .btn-default {
  border-radius: 0 20px 20px 0;
  background-color: #fff;
  border-right: 1px solid #DBDBDB;
  border-top: 1px solid #DBDBDB;
  border-bottom: 1px solid #DBDBDB;
  border-left: none;
}
#orders div.orderHistoryWrapper div.filterWrapper div.statusButtonWrapper div.statusButton {
  border: 1px solid #F4F4F4;
  border-radius: 10px;
  padding: 10px 22px;
  cursor: pointer;
  background: #F4F4F4;
}

#orders div.orderHistoryWrapper div.filterWrapper div.statusButtonWrapper div.statusButton + div.statusButton {
  margin-left: 8px;
}

#orders div.orderHistoryWrapper div.filterWrapper div.statusButtonWrapper div.statusButton.active {
  background: #000;
}

#orders div.orderHistoryWrapper div.filterWrapper div.statusButtonWrapper div.statusButton a {
  font-size: 14px;
  color: #C9C9C9;
  font-weight: 500;
}
#orders div.orderHistoryWrapper div.filterWrapper div.statusButtonWrapper div.statusButton.active a {
  color:#fff;
  font-weight: 600;

}
#orders i {
  color: #9F9F9F;
  font-size: 20px;
}

#orders .table > thead > tr > th {
  border-top: 2px solid #008BFF!important;
  border-bottom: 1px solid #008BFF;
  padding: 12px 10px;
  font-size: 13px;
  align-items: center;
  vertical-align: middle;
  text-align: center;
}
#orders .width-40 {
  width: 31% !important;
  word-break: break-all;
  min-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#orders .table > tbody > tr > td {
  text-align: center!important;
}
#orders .btn-default {
  border-radius: 0 20px 20px 0;
  background-color: #fff;
  border-right: 1px solid #DBDBDB!important;
  border-top: 1px solid #DBDBDB!important;
  border-bottom: 1px solid #DBDBDB!important;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  padding: 9px 18px;
}

#orders div.orderListWrapper {
  display:flex;
  flex-direction: column;
}
/* order 리스트 */
#orders div.orderList {
  width: 100%;
  max-width: 100%;
  margin: 0;
  width: 100%;
  display: table;
  border-collapse: collapse;
  border: none;
  table-layout:fixed;
}
/* order 리스트 타이틀 */
#orders div.orderList div.orderTitle {
  display: table;
  border: none;
  background-color: #fff;
  padding: 13px 25px;
  height: 70px;
  cursor: pointer;
  position: relative;
  align-items: center;
  border: 1px solid #ddd;
  align-items: center;
  width: 100%;
  align-items: center;
  margin: auto;
  text-align: center;
}
#orders div.orderList div.orderTitle:hover {
  background-color:#E6EFFC;
}
#orders div.orderList div.orderTitle.active {
  background-color: #0067CE;
}
#orders div.orderList div.orderTitle.active strong {
  color:#fff;
}
#orders div.orderList div.orderTitle.active::after {
  color:#fff!important;
  display: table-cell;
  vertical-align: middle;
}
/* 타이틀 옆 화살표 */
#orders div.orderList div.orderTitle::after {
  font-size: 20px;
  font-family: xeicon!important;
  content: "\e942";
  right: 15px;
  bottom: auto;
  transition: all 0.2s ease-in-out;
  transform: rotate(0deg);
  color: #222;
  display: table-cell!important;
  vertical-align: middle!important;
  width: auto;
}
#orders div.orderList.active .orderTitle::after {
  bottom: 30px;
  transform: rotate(180deg);
}
@media (max-width:1300px){
  #orders div.orderList div.orderTitle::after {
    position:absolute;
    transform:translate(-50%,-50%);
    top:50%;
  }
}

#orders div.orderList div.orderId {
  display: table-cell!important;
  vertical-align: middle;
  text-align: left;
  padding-left: 24px;
  width: 15%;
}
#orders img {
  width:auto;
  height:auto;
}
#orders div.orderList div.orderId strong + strong{
  color: #9F9F9F;
  margin-left: 8px;
  font-size: 14px;
  padding-left: 0;
}
#orders div.orderList div.orderDate {
  flex: 1 1 500px;
  align-items: center;
  display: table-cell;
  vertical-align: middle;
  width: 35%;
}
#orders div.orderList div.orderService {
  flex: 1 1 353px;
  text-align: right;
  display: flex;
  justify-content: flex-end!important;
  justify-content: normal;
  display: table-cell;
  /* display: table-row; */
  vertical-align: middle;
  width: 26%;
}
#orders div.orderList div.orderDate div.orderDateBox {
  display: flex;
  align-items: center;
  flex: 1 1 22%;
  justify-content: flex-start;
}
#orders div.orderList div.orderStatusJJin {
  flex: 1 1 156px;
  justify-content: flex-end;
  display: table-cell;
  vertical-align: middle;
  width: 10%;
  text-align: left;
}
#orders div.orderList div.orderDate span#copyLink {
  position: relative;
  color: #608AFF;
  text-decoration: underline;
  font-size: 14px;
  font-weight: 600;
  max-width: 400px;
  display: block;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-align: left;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#orders div.orderList div.orderTitle.active div.orderDate span#copyLink {
  color: #fff;
}
/* order 복사하기 */
#orders #orderCopy {
  position: relative;
  border: 1px solid #608AFF;
  background-color:#fff;
  padding: 6px 5px;
  margin-left: 10px;
  z-index: 0;
  border-radius: 3px;
  color: #608AFF;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  cursor: pointer;
}
@media (max-width:1690px) {
  #orders div.orderList div.orderDate span#copyLink {
    max-width:300px;
  }
}
#orders div.orderList div.orderStatus {
  flex: 1 1 auto;
  /* text-align: right; */
  /* margin-right: 17px; */
  display: table-cell;
  /* display: table-row; */
  vertical-align: middle;
  text-align: right;
  width: 10%;
}
/* 타이틀 서비스명 , 상태 */
#orders div.orderTitleServiceBox {
  /* display: flex; */
  /* gap: 100px; */
  /* flex: 0 0 100px!important; */
  text-align: left;
  /* vertical-align: super; */
}
#orders div.orderTitleServiceBox strong {/* display: flex; *//* align-items: center; */}
#orders div.orderTitleServiceBox strong + strong {}


/* order 리스트 컨텐츠 */
#orders div.orderList div.orderContents {
  background: #fff;
  line-height: 24px;
  color: #222;
  border-top: 0;
  padding: 4px 0 0;
  overflow:hidden;
  opacity:0;
  height:0;
  transition:linear .3s;
}
#orders div.orderList div.orderContents.active {
  overflow: visible;
  opacity: 1;
  height: 240px;
  max-height: 100%;
  margin-bottom: 10px;
}
#orders div.orderList div.orderContents strong {
  color:#5D5D5D;
  font-size:12px;
  font-weight:600;
}

/* 복사하기 2 */
#orders span#orderCopy2 {
  position: relative;
  border: 1px solid #608AFF;
  background-color: #fff;
  padding: 6px 5px;
  margin-left: 10px;
  z-index: 0;
  border-radius: 3px;
  color: #608AFF;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  cursor: pointer;
}
#orders div.orderList div.orderContents.active strong.orderList {
  color:#fff;
}
/* 아코디언 컨텐츠 펼치기 */
#orders div.orderList.active .orderContents {
  opacity: 1;
  max-height: 100%;
  height: 185px;
  transition: all 0.3s ease-in-out;
  overflow: visible;
}


#orders div.orderList div.orderContents ul {
  border: 1px solid #ddd;
  background: #E6EFFC;
  padding: 8px 16px 8px;
}
#orders div.orderList div.orderContents li{
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}
#orders div.orderList div.orderContents a.orderLinkCopy {
  position: relative;
  color: #608AFF;
  text-decoration: underline;
  font-size: 14px;
  font-weight: 600;
  max-width: 600px;
  display: block;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-align: left;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width:1100px) {
  #orders div.orderList div.orderContents a.orderLinkCopy {
    max-width:400px;
  }
}
@media (max-width:850px) {
  #orders div.orderList div.orderContents a.orderLinkCopy {
    max-width:200px;
  }
}
@media (max-width:360px) {
  #orders div.orderList div.orderContents a.orderLinkCopy {
    max-width:100px;
  }
}
/* 상태값에 따른 색 변경 */
#orders div.orderList strong.orderList {
  color:#fff;
  font-size:12px;
  padding: 0 5px 0px;
  border-radius:3px;
  display:flex;
  align-items:center;
  display: inline-flex;
  height:22px;
  line-height: 1.2;
}
/* 완료됨 */
#orders div.orderList strong.orderList.blue {
  background-color:#253858;
  display: inline-flex;
  justify-content: end;
}
/* 취소됨 */
#orders div.orderList strong.orderList.red {
  background-color:#D92F0E;
}
/* 대기중 */
#orders div.orderList strong.orderList.yellow {
  background-color:#9F9F9F;
}
/* 진행중 */
#orders div.orderList strong.orderList.green {
  background-color:#608AFF;
}
/* 일부완료됨 */
#orders div.orderList strong.orderList.Orange {
  background-color:#FDA412;
}
/* 처리중 */
#orders div.orderList strong.orderList.purple {
  background-color:#B512FD;
} 
#orders .input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap;
  width: 100%;
  max-width: 49px;
}
#orders .input-group-btn {
  background-image: url(https://storage.perfectcdn.com/7mcojg/wg1gqtjxsupdhwht.png);
  background-repeat: no-repeat;
  padding: 0;
  background-position: center;
}
#orders .btn-default {
  border-radius: 0;
  border:none!important;
  background-color: #fff;
  padding: 0px 18px;
  background-image: none;
  height: 34px!important;
  display: flex;
  align-items: center;
  box-shadow: none!important;
  background: transparent;
}

/* - - - - - - - - - - - - - - - - - - #orders mobile ver : e - - - - - - - - - - - - - -  - - - -*/

@media (max-width:768px){
  #orders .wrapper {
    padding: 0 25px 100px 25px!important;
    margin: 0;
  }
  #orders div.orderHistoryWrapper {
    width: 100%;
    height: auto;
    margin-bottom: 40px;
    overflow-x: hidden;
    margin: 0;
  }
}
/* - - - - - - - - - - - - - - - #subscriptions mobile ver : e - - - -  - - - - - - - - - -*/

/* 분할주문 모바일 title 안보이게 하기 */
#drip-feed div.mobileTitle {
  display: none;
}

/* 분할주문 */
#drip-feed {
  width: 100%;
  max-width: 100%;
  margin: auto;
}

#drip-feed .table>thead {
  border-top: 2px solid #ccc !important;
  border-bottom: 1px solid #ccc !important;
}

#drip-feed .table>thead>tr>th {
  border-bottom: 1px solid #ccc !important;
  text-align: center;
}

#drip-feed .wrapper {

  background: #fff;
}

#drip-feed tbody {
  text-align: center;
}

/* 분할주문 - 검색 filter */
#drip-feed div.filterWrapper {
  display: flex;
  align-items: center;
  margin-bottom: 21px;
  padding-left: 28px;
  padding-right: 28px;
  flex-wrap: wrap;
  gap: 6px;
}

#drip-feed div.filterWrapper div.statusButtonWrapper {
  display: flex;
  align-items: center;
  margin-right: auto;
}

#drip-feed div.filterWrapper div.statusButtonWrapper div.statusButton {
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 4px 8px;
  cursor: pointer;
}

#drip-feed div.filterWrapper div.statusButtonWrapper div.statusButton+div.statusButton {}

#drip-feed div.filterWrapper div.statusButtonWrapper div.statusButton.active {
  background: #d9d9d9;
}

#drip-feed div.filterWrapper div.statusButtonWrapper div.statusButton a {
  font-size: 14px;
  color: #222;
}


#drip-feed div.filterWrapper div.statusButtonWrapper {
  display: flex;
  align-items: center;
  margin-right: auto;
  gap: 6px;
}

#drip-feed div.filterWrapper div.statusButtonWrapper div.statusButton {
  border: 1px solid #F4F4F4;
  background-color: #f4f4f4;
  border-radius: 5px;
  padding: 10px 22px;
  cursor: pointer;
}

#drip-feed div.filterWrapper div.statusButtonWrapper div.statusButton+div.statusButton {}

#drip-feed div.filterWrapper div.statusButtonWrapper div.statusButton.active {
  background: #0B67CE;
}

#drip-feed div.filterWrapper div.statusButtonWrapper div.statusButton a {
  font-size: 14px;
  color: #C9C9C9
}

#drip-feed div.filterWrapper div.statusButtonWrapper div.statusButton.active a {
  color: #fff;
  font-weight: 600;
}

#drip-feed table.table {
  min-width: 1500px;
}

#drip-feed tr:nth-child(even) {
  background-color: #1ea0411a;
}

#drip-feed .table>tbody>tr>td {
  border-top: 1px solid transparent;
  padding: 16px 0;
}

#drip-feed .input-group .form-control:first-child {
  border-radius: 5px 0 0 5px;
}

#drip-feed .btn-default {
  border-radius: 0 5px 5px 0;
  background-color: #fff;
  border-right: 1px solid #DBDBDB !important;
  border-top: 1px solid #DBDBDB !important;
  border-bottom: 1px solid #DBDBDB !important;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  padding: 9px 18px;
}

#drip-feed .input-group .form-control {
  width: 352px;
}

#drip-feed .btn-default {
  border-radius: 0 5px 5px 0;
  background-color: #fff;
  border-right: 1px solid #DBDBDB;
  border-top: 1px solid #DBDBDB;
  border-bottom: 1px solid #DBDBDB;
  border-left: none;
  height: 38px;
  display: flex;
  align-items: center;
  background-image: none;
}

#drip-feed div.orderHistoryWrapper div.filterWrapper div.statusButtonWrapper div.statusButton {
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 10px 22px;
  cursor: pointer;
}

#drip-feed i {
  color: #AFAFAF;
  font-size: 20px;
}

#drip-feed .table>thead>tr>th {
  padding: 12px 10px;
}

/* - - - - - - - - - - - - - - - #drip-feed mobile ver : s - - - -  - - - - - - - - - -*/
@media (max-width: 1670px) {
  #drip-feed {
    /* max-width: 95%; */
  }
}

@media (max-width: 1130px) {
  #drip-feed .wrapper {
    margin: 28px auto 50px;
  }

  #drip-feed div.mobileTitle {
    font-size: 17px;
    display: flex;
    padding: 0;
    max-width: 100%;
    margin: 50px auto 0;
    border-radius: 5px;
    background: transparent;
    justify-content: left;
    background-image: none;
  }

  #drip-feed div.mobileTitle strong {
    color: #000;
    font-weight: 700;
  }

  #drip-feed .wrapper {
    margin: 20px auto 120px;
  }
}

@media (max-width: 768px) {
  #drip-feed div.mobileTitle {
    margin: 28px auto 0;
  }
}

/* - - - - - - - - - - - - - - - #drip-feed mobile ver : s - - - -  - - - - - - - - - -*/


/* - - - - - - - - - - - - - - - #addfunds mobile ver : e - - - -  - - - - - - - - - -*/

/* 탑계정 모바일 타이틀 안보이게 하기 */
div.mobileTitle {
  display: none;
}

/* top - account / 계정 정보 */

#top-account {
  border-radius: 5px;
  padding: 32px 0 41px 0;
  max-width: 93%;
  margin: 50px auto 120px;
  background: #fff;
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

#top-account .updateDate {
  padding-bottom: 12px;
  padding-left: 18px;
}

#top-account div.tabWrapper {
  display: flex;
  align-items: center;
  margin-bottom: 33px;
  padding-left: 16px;
  gap: 6px;
}

#top-account div.tabWrapper div.tab {
  border-radius: 5px;
  padding: 9px 14px;
  cursor: pointer;
  background-color: #F4F4F4;
  color: #C9C9C9;
  font-weight: 500;
  border: 1px solid #f4f4f4;
}

#top-account div.tabWrapper div.tab.active {
  background: #000;
  color: #fff;
  font-weight: 600;
}

#top-account div.tabWrapper div.tab+div.tab {}

#top-account div.contents {}

#top-account div.contents p.title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-left: 16px;
}

#top-account div.contents div.tableWrapper {
  width: 100%;
  overflow-y: auto;
}

#top-account div.contents div.tableWrapper div.tableHeaderWrapper {
  display: flex;
  position: sticky;
  top: 0;
  background: #fff;
  border-top: 2px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  z-index: 10;
  font-weight: 700;
}

#top-account div.contents div.tableWrapper div.tableDataRow {
  display: flex;
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  background-size: 300% 100%;
}

#top-account div.contents div.tableWrapper div.tableDataRow:hover {
  background-color: #008BFF;
  background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
  box-shadow: 0 4px 15px 0 rgb(65 132 234 / 75%);
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  background-position: 100% 0;
}

#top-account div.contents div.tableWrapper div.tableDataRow:hover .account,
#top-account div.contents div.tableWrapper div.tableDataRow:hover .ranking,
#top-account div.contents div.tableWrapper div.tableDataRow:hover .follower,
#top-account div.contents div.tableWrapper div.tableDataRow:hover .follow,
#top-account div.contents div.tableWrapper div.tableDataRow:hover .post,
#top-account div.contents div.tableWrapper div.tableDataRow:hover .dailyPostCount,
#top-account div.contents div.tableWrapper div.tableDataRow:hover .averageLike,
#top-account div.contents div.tableWrapper div.tableDataRow:hover .score {
  color: #fff;
}


#top-account div.contents div.tableWrapper div.tableDataRow+div.tableDataRow {}

#top-account div.contents div.tableWrapper div.ranking {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 80px;
  padding: 8px;
}

#top-account div.contents div.tableWrapper div.score {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 80px;
  padding: 8px;
}

#top-account div.contents div.tableWrapper div.hashtag {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 150px;
  padding: 11px;
}

#top-account div.contents div.tableWrapper div.account {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 150px;
  padding: 11px;
}

#top-account div.contents div.tableWrapper div.follower {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 150px;
  padding: 11px;
}

#top-account div.contents div.tableWrapper div.follow {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 150px;
  padding: 11px;
}

#top-account div.contents div.tableWrapper div.post {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 150px;
  padding: 11px;
}

#top-account div.contents div.tableWrapper div.dailyPostCount {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 150px;
  padding: 11px;
}

#top-account div.contents div.tableWrapper div.averageLike {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 150px;
  padding: 11px;
}

#top-account div.contents div.tableWrapper div.increaseRate {
  display: flex;
  align-items: flex-start;
  flex: 0 0 555px;
  padding: 8px;
  text-align: left;
  /* align-items: center; */
  justify-content: center;
}

#top-account .tableDataRow:nth-child(even) {
  background-color: #F2FCFF;
}


@media (max-width:1600px) {
  #top-account {
    width: 97%;
    margin: 0px auto 60px;
    border-radius: 5px;
    padding: 32px 0 60px 0;
    margin-top: 50px;
    background: #fff;
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  #top-account div.contents {
    width: 100%;
  }
}

/* 모바일 title 사이즈*/
@media (max-width: 1130px) {
  div.mobileTitle {
    font-size: 17px;
    display: flex;
    max-width: 90%;
    margin: auto;
    padding: 50px 0 0;
    border-radius: 5px;
    background: transparent; justify-content: left;
    background-image: none;
  }

  div.mobileTitle strong {
    color: #000;
    font-weight: 700;
    font-size: 19px;
  }

  #top-account {
    margin-top: 20px;
  }
}

@media (max-width: 768px) {
  div.mobileTitle {
    max-width: 89%;
    padding: 50px 0 20px;
    margin: auto;
  }
}


@media (max-width: 768px) {
  #top-account {
    width: 89%;
    overflow-x: scroll;
    padding: 16px 0px 0 58px;
    margin-bottom: 50px;
    padding: 32px 0 41px 0;
    margin-top: 20px;
  }

  #top-account div.tabWrapper {
    display: flex;
    align-items: center;
    margin-bottom: 33px;
    padding-left: 16px;
    width: 100%;
    flex-wrap: wrap;
  }

  #top-account div.tabWrapper div.tab {
    margin-bottom: 10px;
  }

  #top-account div.contents {
    width: 1400px;
  }
}

@media (max-width: 434px) {
  #top-account div.tabWrapper div.tab:last-of-type {
    margin-left: 0 !important;
  }
}

@media (max-width: 327px) {
  #top-account div.tabWrapper div.tab {
    margin-left: 10px;
    font-size: 13px;
  }

  #top-account div.tabWrapper div.tab:last-of-type {
    margin-left: 10px !important;
  }

  #top-account div.tabWrapper {
    padding-left: 4px;
  }

  #top-account .updateDate {
    font-size: 13px;
  }

  #top-account div.contents p.title {
    font-size: 19px;
  }

  #top-account div.tabWrapper div.tab+div.tab {
    margin-left: 10px;
  }
}

/* - - - - - - - - - - - - - - - #top-account mobile ver : e - - - -  - - - - - - - - - -*/



/* hot 해시태그 */

#hot-hashtag {
  padding: 32px 0 41px 0;
  max-width: 93%;
  margin: 50px auto 120px;
  border-radius: 5px;
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  background: #fff;
}

#hot-hashtag .updateDate {
  padding-bottom: 12px;
  padding-left: 18px;
}

#hot-hashtag div.tabWrapper {
  display: flex;
  align-items: center;
  margin-bottom: 33px;
  padding-left: 16px;
  gap: 6px;
}

#hot-hashtag div.tabWrapper div.tab {
  border-radius: 5px;
  padding: 9px 14px;
  cursor: pointer;
  background-color: #F4F4F4;
  color: #C9C9C9;
  font-weight: 500;
  border: 1px solid #f4f4f4;
}

#hot-hashtag div.tabWrapper div.tab.active {
  background: #000;
  color: #fff;
  font-weight: 600;
}

#hot-hashtag div.tabWrapper div.tab+div.tab {}

#hot-hashtag div.contents {}

#hot-hashtag div.contents p.title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-left: 16px;
}

#hot-hashtag div.contents div.tableWrapper {
  width: 100%;
  max-height: 200vh;

}

#hot-hashtag div.contents div.tableWrapper div.tableHeaderWrapper {
  display: flex;
  position: sticky;
  top: 0;
  background: #fff;
  border-top: 2px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  z-index: 10;
  font-weight: 700;
}

#hot-hashtag div.contents div.tableWrapper div.tableDataWrapper {}

#hot-hashtag div.contents div.tableWrapper div.tableDataRow {
  display: flex;
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  background-size: 300% 100%;

}

#hot-hashtag div.contents div.tableWrapper div.tableDataRow:hover {
  background-color: #008BFF;
  background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
  box-shadow: 0 4px 15px 0 rgb(65 132 234 / 75%);
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  background-position: 100% 0;
}

#hot-hashtag div.contents div.tableWrapper div.tableDataRow:hover .hashtag,
#hot-hashtag div.contents div.tableWrapper div.tableDataRow:hover .ranking,
#hot-hashtag div.contents div.tableWrapper div.tableDataRow:hover .increaseRate {
  color: #fff;
}

#hot-hashtag div.contents div.tableWrapper div.tableDataRow+div.tableDataRow {}

#hot-hashtag div.contents div.tableWrapper div.ranking {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 80px;
  padding: 8px;
}

#hot-hashtag div.contents div.tableWrapper div.hashtag {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 150px;
  padding: 11px;
  cursor: pointer;
}

#hot-hashtag div.contents div.tableWrapper div.increaseRate {
  display: flex;
  align-items: flex-start;
  flex: 0 0 42%;
  padding: 8px;
  text-align: left;
  justify-content: center;
}

#hot-hashtag .tableDataRow:nth-child(even) {
  background-color: #F2FCFF;
}


/* - - - - - - - - - - - - - - - #hot-hashtag mobile ver : s - - - -  - - - - - - - - - -*/
@media (max-width: 1630px) {
  #hot-hashtag {
    max-width: 90%;
  }
}

@media (max-width: 1130px) {
  #hot-hashtag {
    margin: 20px auto 120px;
  }
}

@media (max-width: 768px) {
  #hot-hashtag {
    width: 89%;
    margin: auto;
  }

  #hot-hashtag div.contents div.tableWrapper div.increaseRate {
    display: flex;
    align-items: flex-start;
    flex: 0 0 42%;
    padding: 8px;
    text-align: left;
    justify-content: center;
  }

  #hot-hashtag div.tabWrapper div.tab.active {
    font-size: 13px;
  }

  #hot-hashtag div.tabWrapper div.tab+div.tab {
    margin-left: 5px;
    font-size: 13px;
  }

  #hot-hashtag div.contents div.tableWrapper div.increaseRate {
    text-align: center;
  }

  #hot-hashtag div.contents div.tableWrapper div.hashtag {
    text-align: center;
  }

  #hot-hashtag div.tabWrapper div.tab {
    font-size: 13px;
    padding: 9px 3px;
  }
}

@media (max-width: 343px) {
  #hot-hashtag div.contents div.tableWrapper {
    font-size: 12px;
  }
}

@media (max-width: 280px) {
  #hot-hashtag div.tabWrapper div.tab {
    padding: 9px 3px;
  }

  #hot-hashtag .updateDate {
    font-size: 12px;
  }

  #hot-hashtag div.contents div.tableWrapper div.tableHeaderWrapper {
    font-size: 12px;
  }

  #hot-hashtag div.contents div.tableWrapper div.increaseRate {
    font-size: 12px;
  }

  #hot-hashtag div.contents div.tableWrapper div.hashtag {
    font-size: 12px;
  }
}

/* - - - - - - - - - - - - - - - #hot-hashtag mobile ver : e - - - -  - - - - - - - - - -*/





/* 추천인 */
#affiliates {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 30px;
  margin-bottom: 40px;
}
#affiliates div.affiliates_order_wrapper {
  display:flex;
  flex:1;
}

/* 추천인 타이틀 */
#affiliates div.well div.table ul.affiliates_well_wrapper {
  display: flex;
  justify-content: space-between;
  height: 40px;
  align-items: center;
  padding-left: 10px;
}
#affiliates div.well div.table ul.affiliates_well_wrapper li {
  flex: 1;
  font-size: 14px;
  color: #5D5D5D;
  font-weight: 600;
}
#affiliates div.well div.table ul.affiliates_well_wrapper li + li {
  text-align:center;
}
#affiliates div.wrapper {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  padding-left: 40px;
  padding-top: 30px;
  padding-right: 40px;
}

/* 추천인 콘텐츠 */
#affiliates div.well div.table ul.affiliates_well_contents_wrapper {
  display: flex;
  justify-content: space-between;
  background-color:#fff;
  height: 40px;
  align-items: center;
  padding-left: 10px;
  border: 1px solid #ddd;
}
#affiliates div.well div.table ul.affiliates_well_contents_wrapper li {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #5D5D5D;
}
#affiliates div.well div.table ul.affiliates_well_contents_wrapper li + li {
  text-align:center;
}
#affiliates div.well div.table div.affiliates_payment_amout {
  display: inline;
  padding: 6px 25px;
  background: #608AFF;
  color: #fff;
  border-radius: 3px;
}
/* 추천인 지급상태 */
#affiliates div.affiliates_list {
  display: inline;
  padding: 5px 6px;
  font-size: 12px;
  color: #fff;
  background-color: #000;
  font-weight: 500;
  border-radius: 3px;
}
/* 완료 */
#affiliates div.affiliates_list.blue {
  background-color: #253858;
}
/* 대기 */
#affiliates div.affiliates_list.gray {
  background-color:#9F9F9F;
}
/* 거절 */
#affiliates div.affiliates_list.red {
  background-color:#D92F0E;
}
#affiliates div.wrapper section+section {
  margin-top: 16px;
  /* padding: 30px 36px 42px; */
  background: #F4F5F7;
  padding: 16px 12px;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
}
#affiliates div.wrapper section+section strong.bottomSectionTitle {
  font-size: 14px;
  color: #5D5D5D;
  font-weight: 600;
}
#affiliates div.wrapper section div.contentBox {
  border-radius: 10px;
  /* padding: 34px 32px; */
}

#affiliates div.wrapper section div.contentBox+div.contentBox {

}

/* 제목 */
#affiliates div.wrapper section div.contentBox p.mainTitle {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

#affiliates div.wrapper section div.contentBox p.description {
  font-size: 16px;
} 

/* 링크 복사 */
#affiliates div.wrapper section.middleSection {
  display: flex;
  flex-wrap: wrap;
  gap:16px;

}

#affiliates div.wrapper section.middleSection div.contentBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}
/* 추천인 안내 */
#affiliates div.affiliates_Convention_Wrapper {
  flex: 1;
  background: #F4F5F7;
  padding: 16px 20px;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
}
/* 추천인 안내 타이틀 */
#affiliates strong.affiliates_Convention_Strong {
  margin-bottom: 14px;
  display: block;
}
/* 추천인 안내 콘텐츠 */
#affiliates div.affiliates_Convention_Wrapper div.affilates_Contents {
  background: #fff;
  border: 1px solid #ddd;
  padding:16px;
}
#affiliates div.affiliates_Convention_Wrapper div.affiliates_strong_contents {

}
#affiliates div.affiliates_Convention_Wrapper div.affiliates_strong_contents strong {
  color: #5D5D5D;
  font-size: 13px;
  font-weight: 600;
}

/* 추천인 첫번째 섹션 */
#affiliates div.wrapper section.middleSection div.contentBox ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 27px;
}
#affiliates div.wrapper section.middleSection div.contentBox ul>li {    
  display: flex;
  justify-content: space-between;
  position:relative;
}
#affiliates div.wrapper section.middleSection div.contentBox ul>li::after {
  /* content: ''; */
  display: flex;
  position: absolute;
  width: 100%;
  background: #ebebeb;
  height: 1px;
  top: 30px;
  max-width: 100%;
}
/* 마지막 최소 지급액만 선택하여 가상선택자 없애기 */
#affiliates div.wrapper section.middleSection div.contentBox li + li + li::after {
  display:none;
}

#affiliates div.wrapper section.middleSection div.contentBox div.copyWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}


#affiliates div.wrapper section.middleSection div.contentBox div.copyWrapper p.link {
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 0;
  width: auto;
  padding-right: 10px;
  min-width: initial;
  color: #5D5D5D;
  font-weight: 600;
}

#affiliates div.wrapper section.middleSection div.contentBox div.copyWrapper div.copyButton {
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  cursor: pointer;
  color: #608AFF;
  padding: 3px 5px;
  display: flex;
  justify-content: center;
  border: 1px solid #608AFF;
  border-radius: 3px;
}


#affiliates div.wrapper section.middleSection div.contentBox div.copyWrapper div.copyButton:hover {
  background-color: #E6EFFC;
}

#affiliates div.wrapper section.middleSection div.contentBox p.price {
  font-size: 12px;
  font-weight: 700;
  color: #5D5D5D;
}


#affiliates div.wrapper section.middleSection div.contentBox p.title {
  font-size: 12px;
  font-weight:600;
  color: #5D5D5D;
  background: #E6EFFC;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  border-radius: 3px;
  height: 24px;
}
/* 추천인 안내 */ 
#affiliates div.affiliatesInfoWrapper {

}
#affiliates div.affiliatesInfoWrapper small.description {
  color: #3B3B3B;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.5;
  display: block;
}
#affiliates div.affiliatesInfoWrapper p.mainTitle {
  color: #5D5D5D;
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 20px;
}
#affiliates div.wrapper section.middleSection div.contentBox div.affiliatesInfoWrapper p.mainTitle {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}
#affiliates div.wrapper section.middleSection div.contentBox div.affiliatesInfoWrapper p.description {
  font-size: 14px;
  line-height: 1.3;
}
/* 추천 내역 */
#affiliates div.wrapper section.bottomSection div.contentBox {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 23px;
  border: none;
  margin-top: 16px;
  padding: 0;
}

#affiliates div.wrapper section.bottomSection div.contentBox div.historyBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  position: relative;
  gap: 9px;
  /* border: 1px solid #000; */
  padding: 18px;
  background: #fff;
  height: auto;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
}
#affiliates .historyBox .btn-xs {
  margin-top: 19px;
  height: auto;
  padding: 6px 14px!important;
  font-size: 14px;
  border-radius: 5px!important;
  color: #fff;
  background-color: #000!important;
  line-height: 1.5;
}
#affiliates .historyBox .btn-xs:hover {
  background-color: #008BFF!important;
  border:1px solid #008BFF!important;
}
#affiliates div.wrapper section.bottomSection div.contentBox div.historyBox::after {
  display:block;
  /* content:''; */
  background-color:#008BFF;
  height:1px;
  width:100%;
  position:absolute;
  top:50%;
}
#affiliates div.wrapper section.bottomSection div.contentBox div.historyBox::before {
  display:block;
  content:'';
  background-color:#F2FCFF;
  height:50px;
  width:100%;
  position:absolute;
  top:50%;	
  z-index:-1
}

#affiliates div.wrapper section.bottomSection div.contentBox div.historyBox+div.historyBox {
  /* margin-left: 16px; */
}

#affiliates div.wrapper section.bottomSection div.contentBox div.historyBox p.title {
  font-size: 12px;
  font-weight: 500;
  color: #5D5D5D;
}

#affiliates div.wrapper section.bottomSection div.contentBox div.historyBox p.price {
  font-size: 24px;
  color: #5D5D5D;
  font-weight: 700; 
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  text-align: center;
}
/* 추천인 지급날짜 */


/* - - - - - - - - - - - - - - - #affiliates  mobile ver : s - - - -  - - - - - - - - - -*/



/* - - - - - - - - - - - - - - - #affiliates  mobile ver : e - - - -  - - - - - - - - - -*/


/* 마이페이지 */
#account {
  width: 100%;
  padding-right: 56px;
  overflow: hidden;
  padding-bottom:100px;
}
@media (max-width:990px){
  #account {
    padding-right: 0;
  }
}
#account select#timezone {
  width: 100%;
  border: 1px solid #EDEDED;
  height: 48px;
}
#account div.wrapper {
  display: flex;
  /* gap: 20px; */
  padding-bottom: 10px;
}

#account div.wrapper div.contentsBox {
  flex: 1;
  padding: 30px 10px 10px 40px;
}
#account .contentsBox.three {
  width: 100%;
  background-color: #F4F5F7;
  padding-top: 0;
  height: auto;
  max-height: 100%;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  margin-bottom: 0;
  padding-top: 20px!important;
  margin-top: 104px!important;
  padding-left: 10px!important;
  /* padding-right: 10px!important; */
  /* margin-left: 20px; */
  /* margin-right: 314px; */
}
@media(max-width:990px){
  #account .contentsBox.three {
    /* padding: 20px!important; */
    padding: 20px 10px!important;
    margin-top: 50px!important;
  }
}
#account .contentsBox.four {
  padding-left: 10px!important;
  padding-right: 10px!important;
}
#account .contentsBox.first {
  height: 500px;
}
#account div.mypageTitle {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}
#account div.mypageTitle small {}
#account div.mypageTitle strong {
  font-size:20px;
}
#account .inputWrapper {
  width: 100%;
  background-color: #F4F5F7;
  padding-top: 16px;
  height: 116px;
  max-height: 100%;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  margin-bottom: 0;
  padding: 18px 10px 10px;
}
#account div.wrapper div.contentsBox p.title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 14px;
}

/* 마이페이지 - 비밀번호 변경 */
#account div.wrapper div.contentsBox div.inputWrapper+div.inputWrapper {
  margin-top: 16px;
}

#account div.wrapper div.contentsBox div.inputWrapper label {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}

#account div.wrapper div.contentsBox div.inputWrapper input {
  height: 44px;
  width: 100%;
  border-radius: 5px;
  border: 1px solid #EDEDED;
  font-size: 15px;
  display: block;
  padding-left: 9px;
  font-weight: 500;
  width: 100%;
  max-width: 100%;
  margin: auto;
}


#account div.wrapper div.contentsBox button {
  width: 100%;
  height: 50px;
  background: #0067CE;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-top: 16px;
  padding-left: 0;
}
#account .contentsBox.three button {
  margin-top: 0;
}
#account div.wrapper div.contentsBox button:hover {
  background-color:#8A98C0;
}

#account div.wrapper div.contentsBox div.inputWrapper input:hover {
  background-color:#E6EFFC;
}
#account div.wrapper div.contentsBox div.inputWrapper input:focus{
  border:1px solid #608AFF;
}

#account div.wrapper div.contentsBox div.inputWrapper input:focus{
  border:1px solid #008BFF;
}


/* 마이페이지 - 즐겨찾기 설정, API Key, 표준시간 설정 */
#account div.wrapper div.rightSection {
  flex: 1;
  margin-left: 16px;
}

#account div.wrapper div.rightSection div.contentsBox+div.contentsBox {
  margin-top: 16px;
  background-color: #F4F5F7;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  border-radius: 5px;
}
#account input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background-color: #fff;
  width: 100%;
  max-width: 100%;
  height: 44px;
  border-radius: 4px;
  border: none;
  padding-left: 11px;
  color: #9F9F9F;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  color: #5D5D5D;
}

/* 주문 링크 alert  */
#neworder .alert-danger {
  position: relative;
  background-color: #FF6200;
  border-radius: 40px;
  font-size: 16px;
  padding: 10px 21px;
}
#neworder .close {
  position: absolute !important;
  top: -15px!important;
  right: 8px!important;
  color: inherit!important;
  width: 50px!important;
  height: 72px!important;
}

@media (max-width:768px) {
  #account {
    margin:0;
    padding:0;
  }
  #account div.wrapper {
    display:block;
    padding:20px 16px;
  }
}




/* - - - - - - - - - - - - - - - #account  mobile ver : e - - - -  - - - - - - - - - -*/


/* - - - - - - - - - - - - - - - footer  mobile ver : s - - - -  - - - - - - - - - -*/

@media (max-width: 992px) {
  #account div.wrapper {
    display: block;
  }

  #account div.wrapper div.rightSection {
    /* margin-left: 0; */
    margin-right: 20px;
  }

  #account div.wrapper {
    display: block;
    padding: 20px 25px;
    padding-bottom: 120px;
  }

  #account div.wrapper div.rightSection {
    margin: 0;
    padding: 0;
  }

  #account div.wrapper div.contentsBox.two {
    margin-top: 28px;
  }

  #account div.wrapper div.rightSection div.contentsBox+div.contentsBox {
    margin-top: 28px;
    padding: 20px 0;
  }

  #account div.wrapper div.contentsBox p.title {
    text-align: center;
  }

  #account div.wrapper div.contentsBox.four {
    margin-bottom: 40px;
  }

  #account div.wrapper div.contentsBox {
    margin-bottom: 24px;
    padding: 0;
  }
}

/* - - - - - - - - - - - - - - - footer  mobile ver : e - - - -  - - - - - - - - - -*/


/* footer */
footer {
  width: 100%;
  background: #1E3069;
  padding-top: 70px;
  padding-bottom: 60px;
}
@media (max-width:768px){
  footer {
    padding-top:40px;
    padding-bottom:40px;
  }
}
footer div.section_wrapper {
  width:100%;
  max-width:1600px;
  margin:auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width:1600px){
  footer div.section_wrapper {
    max-width:90%;
  }
}
@media (max-width:768px){
  footer div.section_wrapper {
    flex-direction:column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}
footer div.terms_wrapper {

  display: flex;

  flex-direction: column;
}
footer div.terms_wrapper a {
  color: #fff;
  font-size: 14px;
}
@media (max-width:400px){
  footer div.terms_wrapper a {
    font-size:11px;
  }
}
footer div.terms_wrapper strong {
  color: #fff;
  margin-top: 25px;
}
@media (max-width:400px){
  footer div.terms_wrapper strong {
    font-size:11px;
  }
}
footer div.information_wrapper {
  text-align: right;
}
@media (max-width:768px){
  footer div.information_wrapper {
    text-align:left;
  }
}
footer div.information_wrapper p {
  color: #fff;
  font-size: 14px;
}
@media(max-width:400px){
  footer div.information_wrapper p {
    font-size:11px;
  }
}
footer div.information_wrapper p.address {
  margin-top: 12px;
}


footer div.contents {
  width: 100%;
  padding: 40px 0 60px;
}

footer p.tel {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 7px;
  display: block;
}

footer a.kakaoButton {
  display: inline-flex;
  align-items: center;
  height: 80px;
  background: #3ace01;
  border-radius: 60px;
  font-size: 26px;
  font-weight: 700;
  color: #2B2024;
  padding: 0 40px;
  margin-bottom: 20px;
  cursor: pointer;
  display: none;
}

footer div.textWrapper {
  padding: 0 0 30px;
}

footer div.textWrapper div.textRow {
  display: flex;
  align-items: center;
}

footer div.textWrapper div.textRow+div.textRow {
  margin-top: 4px;
}

footer div.textWrapper div.textRow span.text {
  font-size: 13px;
  color: #fff;
}

footer div.textWrapper div.textRow span.text+span.text {
  margin-left: 10px;
}

footer div.policyWrapper {
  display: flex;
  align-items: center;
}

footer div.policyWrapper a.policy {
  font-size: 13px;
  color: #fff;
  cursor: pointer;
}

footer div.policyWrapper a.policy+a.policy {
  margin-left: 16px;
}


/* - - - - - - - - - - - - - - - footer  mobile ver : s - - - -  - - - - - - - - - -*/
@media (max-width: 1600px) {
  footer div.contents {
    max-width: 97% !important;
    margin: auto;
    padding: 40px 0 40px 0 !important;
  }
}

@media (max-width: 768px) {
  footer div.contents {
    margin: auto !important;
    width: 95%;
    padding: 28px 0 28px 0 !important
  }

  footer p.tel {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 7px;
  }

  footer a.kakaoButton {
    height: 50px;
    font-size: 20px;
    padding: 0 22px;
    margin-bottom: 6px;
  }

  footer div.textWrapper div.textRow {
    display: block;
  }

  footer div.textWrapper div.textRow span.text {
    font-size: 10px;
  }

  footer div.policyWrapper a.policy {
    font-size: 10px;
  }

  footer div.textWrapper div.textRow span.text:last-child {
    display: block;
    margin-left: 0 !important;
  }
}


/* - - - - - - - - - - - - - - - footer  mobile ver : e - - - -  - - - - - - - - - -*/


/* floating button - 카카오톡 문의하기 */
#floating-button {
  z-index: 99!important;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 44px;
  position: fixed;
  right: 20px;
  bottom: 40px;
  background: #fff;
  border-radius: 32px;
  cursor: pointer;
  z-index: 100;
  box-shadow: 4px 4px 10px rgb(128 128 128 / 24%);
  animation: bounce 3s ease-in-out infinite;
  -webkit-animation: bounce ease-in-out 3s infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

@-webkit-keyframes bounce {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

#floating-button img {
  display: block;
  vertical-align: middle;
  width: 64px;
  background: #3ace01;
  border-radius: 50%;
  padding: 13px;
}
#floating-button strong {
  width: 100%;
  font-size: 20px;
  padding-left: 20px;
  padding-right: 12px;
}
#floating-button p.text {
  font-size: 11px;
  font-weight: 500;
  color: #2B2024;
  display: block;
  align-items: center;
  text-align: center;
  padding-bottom: 10px;
  line-height: 1.2;
}

/* - - - - - - - - - - - - - - - #floating-button  mobile ver : s - - - -  - - - - - - - - - -*/

@media(max-width:600px) {
  #floating-button img {
    display: flex;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 11px;
  }

  #floating-button {
    width: 56px;
    height: auto;
    right: 29px;
    bottom: 83px;
  }
  #floating-button strong {
    display:none;
  }
}


/* - - - - - - - - - - - - - - - #floating-button  mobile ver : e - - - -  - - - - - - - - - -*/
.moMenuWrap {
  display: none;
}


@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

.test_obj {
  position: relative;
  animation: fadeInLeft 1s;
}




/* 서비스 이용약관 */
#terms {
  max-width: 90%;
  margin: auto;
  padding: 90px 0;
}

/* 개인정보 처리방침 */
#personPolicy {
  max-width: 90%;
  margin: auto;
  padding: 90px 0;
}

#personPolicy h4 span {
  font-size: 15px;
  font-weight: 400;
}
/* 특정 상거래에 관한 표기 */
#specific {
  max-width:90%;
  margin:auto;
  padding:90px 0;
}
@media (max-width:1000px){
  #terms {
    max-width:80%;
  }
  #personPolicy {
    max-width:80%;
  }
  #specific {
    max-width:80%;
  }
}
/* 결제창 */
/* 포인트 충전 - 결제창 */
#payment {
}

#payment p.title {
  text-align: center;
  margin-bottom: 25px;
  color: #1C3B55;
  font-size: 18px;
  font-weight: 600;
}
@media 

  /* 포인트 충전 - 결제창 - 충전금액 */
  #payment div.priceWrapper {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

#payment div.priceWrapper div.priceBox {

}

#payment div.priceWrapper div.priceBox p.price {
  font-size: 15px;
  color: #9F9F9F;
  margin-left: 6px;
  font-weight: 500;
}

#payment div.priceWrapper div.priceBox p.price.on {
  color: #484848;
}

#payment div.priceWrapper div.priceBox p.border {
  display: block;
  background-color: #9F9F9F;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  margin-bottom: -10px
}

#payment div.priceWrapper div.deleteButton {
  flex: 0 0 auto;
  cursor: pointer;
  margin-left: auto;
  align-items: center;
}

#payment div.priceWrapper div.deleteButton i {
  display: flex;
  font-size: 23px;
  justify-content: center;
  align-items: center;
  color: #9F9F9F;
}

#payment div.priceWrapper div.deleteButton i:active {
  color: #008BFF;
}

/* 포인트 충전 - 결제창 - 입금자명 입력 */
#payment div.userNameWrapper {}

#payment div.userNameWrapper p.userNameLabel {
  color: #1C3B55;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

#payment div.userNameWrapper span.subTitle {

}

#payment div.userNameWrapper input {
  height: 38px;
  width: 100%;
  border-radius: 5px;
  border: 1px solid #EDEDED;
  font-size: 15px;
  font-weight: 500;
  padding-left: 9px;
}

#payment div.userNameWrapper input:focus {
  border: 1px solid #008BFF;
}

#payment div.userNameWrapper input::placeholder {
  color: #9F9F9F;
  font-weight: 500;
}

/* 포인트 충전 - 경제창 - 현금영수증/세금계산서 */
#payment div.taxWrapper {
  display: flex;
  gap: 9px;
}

#payment div.taxWrapper label {
  display: flex;
  flex: 1;
}

#payment p.taxWrapperTitle {
  color: #1C3B55;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

#payment input.inputBox {
  display: none;
}

#payment div.taxWrapper .taxBox.on {
  background-color: #008BFF;
  border: 1px solid #008BFF;
  color: #fff;
}

#payment div.taxInvoiceWrapper {
  margin-top: 20px;
}

#payment div.taxWrapper .taxBox {
  height: 48px;
  border: 1px solid #484848;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
}

/* 포인트 충전 - 결제창/ 현금영수증 선택 시 ->> 휴대전화번호 */
#payment div.phoneNumberWrapper {}

#payment div.phoneNumberWrapper input.phoneNumber:focus {
  border: 1px solid #008BFF;
}

#payment div.phoneNumberWrapper input.phoneNumber {
  width: 100%;
  font-size: 15px;
  height: 55px;
  border: 1px solid #EDEDED;
  border-radius: 5px;
  padding-left: 10px;
  margin-top: 20px;
}

#payment div.phoneNumberWrapper input.phoneNumber::placeholder {
  color: #9F9F9F;
  font-weight: 500;
}

#payment p.description {
  font-size: 11px;
  font-weight: 500;
  color: #1C3B55;
  margin-top: 9px;
  margin-bottom: 29px;
}

/* 포인트 충전 - 경제창 - 신용카드 */
#payment div.taxInvoiceWrapper {}

#payment div.taxInvoiceWrapper div.taxInvoiceRow {
  display: flex;
  gap: 7px;
}

#payment div.taxInvoiceWrapper div.taxInvoiceRow input:focus {
  border: 1px solid #008BFF;
}

#payment div.taxInvoiceWrapper div.taxInvoiceRow+div.taxInvoiceRow {
  margin-top: 7px;
}

#payment div.taxInvoiceWrapper div.taxInvoiceRow input {
  width: 50%;
  height: 44px;
  border: 1px solid #EDEDED;
  border-radius: 5px;
  padding-left: 10px;
}

#payment div.taxInvoiceWrapper div.taxInvoiceRow:last-child input {
  width: 100%;
}

#payment div.taxInvoiceWrapper div.taxInvoiceRow input::placeholder {
  color: #9F9F9F;
  font-weight: 500;
  font-size: 14px;
}

/* 포인트 충전 - 결제창 - 금액추가버튼 */

#payment div.priceButtonWrapper {
  display: flex;
  align-items: center;
  /* margin-bottom: 28px; */
  /* margin-top: 30px; */
  gap: 5px;
}

#payment div.priceButtonWrapper div.priceButton {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 48px;
  border: 1px solid #484848;
  cursor: pointer;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
}

#payment div.priceButtonWrapper div.priceButton:active {
  background-color: #008BFF;
  color: #fff;
  border: 1px solid#008BFF;
}

#payment div.priceButtonWrapper div.priceButton+div.priceButton {
}

/* 포인트 충전 - 결제창 - 휴대폰입력 */
#payment div.phoneWrapper {
  margin-bottom: 24px;
}

#payment div.phoneWrapper p.phoneTitle {
  font-size: 16px;
  margin-bottom: 4px;
}

#payment div.phoneWrapper input {
  width: 100%;
  height: 36px;
  border: 1px solid #d9d9d9;
  padding: 0 8px;
}

/* 포인트 충전 - 결제창 - 결제버튼 */
#payment div.paymentButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  border-radius: 5px;
  background: #008BFF;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  margin-top: 28px;
}

#payment div.paymentButton.disabled {
  background-color: #9F9F9F;
}

#payment div.paymentButton div.paymentPrice {
  display: flex;
  align-items: center;
  margin-right: 4px;
}

#payment div.paymentButton div.paymentPrice p {
  color: #FAE300;
}

/* payment-success - 신청완료 팝업창*/

#payment-success {}

#payment-success div.successWrap {}

#payment-success div.successWrap div.succesTop {
  background-color: #148BFF;
  padding: 32px 24px;
}

#payment-success div.successWrap div.succesTop p {
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

#payment-success div.successWrap div.succesContentsTop {
  padding: 32px 24px 24px;
}

#payment-success div.successWrap div.succesContentsTop h3 {
  font-size: 18px;
  color: #1C3B55;
  font-weight: 500;
}

#payment-success div.successWrap div.succesContentsTop dl {
  width: 100%;
}

#payment-success div.successWrap div.succesContentsTop dl::after {
  content: "";
  display: block;
  clear: both;
}

#payment-success div.successWrap div.succesContentsTop dl dt {
  font-size: 15px;
  font-weight: 400;
  line-height: 2.1;
  width: 20%;
  float: left;
  width: 35%;
}

#payment-success div.successWrap div.succesContentsTop dl dd {
  font-size: 15px;
  font-weight: 700;
  float: right;
  width: 65%;
  line-height: 2.1;
  text-align: right;
}

#payment-success div.successWrap div.succesContentsBottom {
  padding: 32px 24px;
  background-color: #148BFF;
}

#payment-success div.successWrap div.succesContentsBottom ul {}

#payment-success div.successWrap div.succesContentsBottom ul li {
  color: #fff;
  line-height: 1.6;
}

#payment-success div.successWrap div.succesContentsBottom ul li:before {
  content: '•';
  display: inline-block;
  font-size: 15px;
  padding-right: 6px
}

#payment-success div.successWrap div.succesContentsBottom ul li.none:before {
  color: transparent;
}

#payment-success div.successWrap div.succesBottom {
  padding: 24px 24px 32px 24px
}

#payment-success div.successWrap div.succesBottom button {
  padding: 0;
  background-color: #148BFF;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1.2px;
}


.modal-bg {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 1999999999;
}

.modal-wrap {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: #fff;
  z-index: 1000;
}

/* capcha */
.captcha {
  display: flex;
  justify-content: center;
}


/* frame */
div.frameFix {}
@media (max-width:450px) {
  div.frameFix {
    position:initial;
    z-index:999;
  }
  div.frameFix.frameBottomWrapper {
    position:initial;
  }
}
div.frameFix > div.top {
  height:40px;
  position:absolute;
  top:0;
  left:0;
}
/* auth */
div.frameFix.auth > div.top {
  height:25px;
  position:absolute;
  top:0;
  left:0;
}
div.frameFix > div.left {
  height:40px;
  position:absolute;
  top:0;
  left:0;
}
/* auth */
div.frameFix.auth > div.left {
  height:25px;
  position:absolute;
  top:0;
  left:0;
}
div.frameBody {
  line-height: 0;
  position: fixed;
  z-index: 0;
  top: -1px;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index:0;
}

/* auth */
div.frameFix.auth div.frameBody {
  z-index: 999!important;
}
div.frameFix.auth div.frameBorder {
  z-index:999;
}
div.frameBody.zIndex {
  z-index:9!important;
}
@media (max-width:450px) {

  div.frameBody.zIndex {
    z-index: 999!important;
  }
  div.frameBody {
    z-index: 999!important;
  }
}
div.frameBody path{
  /*fill: #5e00e7;*/
}
div.frameBorder {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

div.frameBorder::after {right:0;  background: transparent linear-gradient(360deg, #1EA041 0%, #1EA041 26%, #0B67CE 67%, #0B67CE 100%) 0% 0% no-repeat padding-box;}
div.frameBorder::before {left:0;  background: transparent linear-gradient(180deg, #1EA041 0%, #1EA041 26%, #0B67CE 67%, #0B67CE 100%) 0% 0% no-repeat padding-box;}
div.frameBorder::after, 
div.frameBorder::before {
  position: absolute;
  top: 0;
  width: 40px;
  height: 100%;
  content: '';
}
/* auth */
.frameFix.auth div.frameBorder::after, .frameFix.auth div.frameBorder::before {
  position: absolute;
  top: 0;
  width: 20px;
  height: 100%;
  content: '';
}
@media (max-width:1100px) {
  .frameFix.auth div.frameBorder::after, .frameFix.auth div.frameBorder::before {
    width:12px!important;
  }
}
.frameFix svg:not(:root) {
  width: 100%;
  height: 35px;
  border-width: 20px;
  border-image: linear-gradient(45deg, #1EA041 0%, #0B67CE 100%) 1;
  background: linear-gradient(to right, #1EA041, #0B67CE );
  border-style: unset;
}
.frameFix.auth svg:not(:root) {
  height:20px;
}
@media (max-width:1120px) {
  .frameFix.auth svg:not(:root) {
    height:12px!important;
  }
}
/*bottom*/
div.frameBody.frameBottom {
  transform: scaleY(-1);
  position:absolute;
  bottom: -1px;
}
div.frameBody.frameBottom.displayNone {
  position:sticky;
}
div.frameBottomWrapper.bottomAuth {display: block!important;}
div.frameBottomWrapper.bottomAuth div.frameBody {
  position: sticky;
}

div.frameBody.frameBottom.zIndex svg:not(:root) {
  border-image: linear-gradient(45deg, #0B67CE 0%, #1EA041 100%) 1;
  background: linear-gradient(to right, #0B67CE, #1EA041);
  border-style: unset;
  transform: scaleY(-1);
}
/* auth */
div.frameFix.auth div.frameBody.frameBottom.zIndex svg:not(:root) {
  height:20px;
}
div.frameFix.auth div.frameBody.frameBottom {
  position: fixed;
}
.bottomAuth div.frameBody.frameBottom.zIndex svg:not(:root) {
  height: 20px;
}
@media (max-width:1130px) {
  .bottomAuth div.frameBody.frameBottom.zIndex svg:not(:root) {
    height:12px;
  }
}
/* 모바일 프레임 */
@media (max-width:700px) {
  svg:not(:root) {
    height: 15px!important;
  }
  div.frameBorder::after, div.frameBorder::before {
    width:15px!important;
  }
}

.tile {
  margin-top: 40px;
  opacity: 0;
}

@keyframes fadeUp {
  from{
    opacity :0;
    transform :translateY(50%);
  }
  to{
    opacity :1;
    transform :translateY(0);
  }
}

.inView {
  opacity: 0;
  animation: fadeUp 2s both;
}
.fade-class {
  position: relative;
  top: 30px;
  opacity: 0;
  transition: top .8s ease-in-out, opacity .5s ease-in-out;
}
.fade-in {
  transition: top .8s ease-in-out, opacity .5s ease-in-out;
  top: 0px;
  opacity: 1;
}

.clipText {
  position:relative;overflow:hidden;
  margin:2rem auto; padding:1rem;
}

.clipText .on{animation:cliptext 1s ease-in-out both;}

@keyframes cliptext {
  0%{
    clip-path:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
    transform:translateY(100%);
  }
  95%{
    transform:translateY(0%);
  }
  100%{
    clip-path:polygon(0% 00%, 100% 0%, 100% 100%, 0% 100%);
  }
}


/* 로딩화면 */
div.loading {
  position: absolute;
  bottom: 0;
  background: #fff;
  width: 100%;
  height: 100%;
  z-index: 99;
  transition:ease-in-out 0.8s;
  visibility:visible;
  z-index: 999999;
}

div.loading img {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  visibility:visible;
  width: 100%;
  max-width: 700px!important;
}
div.loading.block {
  height:0;
  visibility:hidden;
}
div.loading.block img {
  visibility:hidden;
  width: 100%;
  max-width: 50%;
  height:100%;
}



/* ----------------------------------------neworder 다시 시작 ------------------------------------- */
div.mobileFixMenu {
  position: fixed!important;
  bottom: 0;
  display:flex;
  justify-content:center;
  width:100%;
  display:none;
}
@media (max-width:768px) {
  div.mobileFixMenu {
    display: flex;
    background-color: #fff;
    box-shadow: 1px 1px 5px gray;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    height: 70px;
    align-items: center;
    justify-content: space-around;
    z-index: 99;
    padding-bottom: 9px;
  }
  div.mobileFixMenu a {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  div.mobileFixMenu img {
    width:38px;
  }
  div.mobileFixMenu a.active span {
    color:#608AFF;
    font-weight:600;
  }
  div.mobileFixMenu span.menuNameMo {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #B2B7C3;
  }
  span.menuNameMobile_fix {
    font-size:11px;
    color: #5D5D5D;
    font-weight: 500;
  }
}
/* ---------------------------------------neworder header---------------------------------------*/
header.authHeader {
  position: fixed;
  width: 100%;
  height: 64px;
  z-index: 90;
  top: 0;
  background: #fff;
  padding-left: 19px;
  border-bottom: 1px solid #00000029;
}
header.authHeader div.contents {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  justify-content: flex-start;
  padding: 0;
}
header.authHeader div.contents a.logo {
  width: 220px;
  position: initial;
}
header.authHeader div.contents a.logo img.logo_pc {
  width: 140px;
  display: block;
}
header.authHeader div.contents a.logo img.logo_mobile {
  display:none;
}
@media(max-width:330px){
  header.authHeader div.contents a.logo img.logo_pc {
    display:none;
  }
  header.authHeader div.contents a.logo img.logo_mobile {
    display:block;
    width:auto;
    height: 26px;
  }
}
header div.contents a.logo img {
  width: 180px;
  height: auto;
}
header.authHeader div.confirmBottomDiv.pc {
  color: #909090;
  font-size: 12px;
  font-weight: 400;
}
header.authHeader div.userMobileWrapper {
  display: none;
}
.moMenuWrap {
  display: none;
}
header.authHeader div.confirmBottomDiv.mobile {
  display: none;
}
/*--------------sidemenu-------------------*/

/* 주문하기 페이지 - side menu */
#sideMenu {
  flex: 0 0 232px;
  height: calc(100vh - 56px);
  position: fixed;
  top: 65px;
  left:0;
  background: white;
  z-index: 999;
  transition: 0.3s;
  overflow-x:hidden;
  overflow-y: auto;
  border: 1px solid #ececec;
  border-top: 1px solid transparent;
  width:232px;
}
@media(min-width:770px){
  #main{
    width:calc(100vw - 232px);
    float:right;
    margin-top:64px;
    background:#FAFAFA;
  }
}


@media (max-width:1100px){
  #sideMenu {
    margin: 0;
  }
}
#sideMenu::-webkit-scrollbar {
  width: 5px;  /* 스크롤바의 너비 */
}

#sideMenu::-webkit-scrollbar-thumb {
  height: 10%; /* 스크롤바의 길이 */
  background: #dddddd; /* 스크롤바의 색상 */
  border-radius: 10px;
}

#sideMenu::-webkit-scrollbar-track {
  background: rgb(69 123 200 / 38%);  /*스크롤바 뒷 배경 색상*/
}

#sideMenu.off {
  flex: 0 0 100px;
  width: 100px;
  overflow-x: hidden;
}
#sideMenu.off div.logoWrapper {
  width: 81%;
  margin: auto;
  height: 60px;
  padding: 9px 22px;
  cursor: pointer;
  background-color: #fff;
  border-radius: 0 0px 26px 28px;
}
#sideMenu.off .menuIcon {
  width: 27px;
  height: 28px;
}

/* 주문하기 페이지 - side menu : background 이미지 */

#sideMenu.off .menuList.active::before {
  content: '';
  background-image: url('https://storage.perfectcdn.com/gz2yx6/fakyugbtlo4na8il.png')!important;
  width: 84%;
  height: 94px;
  left: 3px;
  z-index: -1;
  position: absolute;
}

#sideMenu div.logoWrapper {
  display: flex;
  align-items: center;
  justify-content:center;
  width: 100%;
  margin: auto;
  height: 60px;
  padding: 0px 41px;
  cursor: pointer;
  background-color: #fff;
}
#sideMenu div.menuWrapper {
  display:flex;
  flex-direction:column;
  padding-left: 16px;
  padding-top: 26px;
  padding-right:16px;
  padding-bottom:30px;
}
a.user_testfree, button.user_testfree {
  position: relative;
  width: 100%;
  background: linear-gradient(to right, #0B67CE, #6CBBD0);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  padding: 10px;
  margin-bottom: 10px !important;
  cursor: pointer;
  display:flex;
  justify-content:center;
  max-width:90%;
  margin:auto
}
/* 로그인 auth 시 사이드 메뉴 */
#sideMenu div.userWrapper {
  position:relative;
  display:flex;
  flex-direction:row;
  gap: 12px;
  margin-bottom:30px;
}
#sideMenu div.userWrapper::after {
  content:'';
  display:block;
  width: 100%;
  height:1px;
  background-color:#ddd;
  position:absolute;
  bottom:-16px;
}
/* 로그인 auth 시 사이드 메뉴 - 서비스 정상 가동중 */
#sideMenu div.menuWrapper div.confirmTop {
  display: flex;
  background-color: #e5e5e596;
  padding: 10px;
  margin-bottom: 30px;
  gap: 7px;
  margin-left: -20px;
}
#sideMenu div.menuWrapper div.confirmTop p.timerText {
  font-size:13px;
}
/* 로그인 auth 시 사이드 메뉴 - 유저이미지 */
#sideMenu div.userWrapper div.userImage {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}
#sideMenu div.userWrapper div.userImage img {
  width: 100%;
  max-width: 36px;
  border-radius: 50px;
  background-color: #fff;
  border: 1px solid #ddd;
}
/* 로그인 auth 시 사이드 메뉴 - 아이디,포인트 */
#sideMenu div.userWrapper div.userContentsWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px
}
/* 로그인 auth 시 사이드 메뉴 - 아이디 */
#sideMenu div.userWrapper div.userContentsWrapper div.userId {
  position: relative;
  display: flex;
  align-items: end;
  gap: 5px;
  justify-content: flex-start;
  cursor: pointer;
  border-radius: 3px;
  width: 100%;
  max-width: 100%;
  text-align: left;
}
#sideMenu div.userWrapper div.userContentsWrapper div.userId:hover {
  background-color:#E6EFFC;
}
#sideMenu div.userWrapper div.userContentsWrapper div.userId i {
  font-size: 19px;
}
#sideMenu div.userWrapper div.userContentsWrapper div.userId p {
  font-size: 14px;
  color: #608AFF;
  font-weight: 600;
  cursor: pointer;
}
#sideMenu div.userWrapper div.userContentsWrapper div.userId.active {
  background-color: #253858;
  padding-left: 4px;
}
#sideMenu div.userWrapper div.userContentsWrapper div.userId.active i,
#sideMenu div.userWrapper div.userContentsWrapper div.userId.active p{
  color:#fff;
}
/* 로그인 auth 시 사이드 메뉴 - 포인트 */
#sideMenu div.userWrapper div.userContentsWrapper div.userPoint {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#sideMenu div.userWrapper div.userContentsWrapper div.userPoint.mobile {
  display:none;
}
#sideMenu div.userWrapper div.userContentsWrapper div.userPoint a {
  font-size: 12px;
  color: #6d6d6f;
  font-weight: 700;
}
#sideMenu div.userWrapper div.userContentsWrapper div.userPoint span.userPointSpan {
  background: #0067CE;
  border-radius: 4px;
  padding: 4px 6px;
  max-width: 100%;
  display: flex;
  justify-content: center;
  line-height: 1.2;
}
#sideMenu div.userWrapper div.userContentsWrapper div.userPoint span.userPointSpan a {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
/* 로그인 auth 시 사이드 메뉴 - userInfoMenu */
#sideMenu div.userWrapper div.userContentsWrapper div.userInfoMenu {
  display:none;
}
#sideMenu div.userWrapper div.userContentsWrapper div.userInfoMenu.active {
  display: flex;
  position: absolute;
  z-index: 99;
  background-color: #fff;
  height: auto;
  width: 100%;
  max-width: 100%;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #ddd;
  top: 23px;
  left: 0;
}
#sideMenu div.userWrapper .userInfoMenu.active div.list {
  padding: 7px 10px 0 10px;
  display: flex;
  flex-direction: column;
}
#sideMenu div.userWrapper .userInfoMenu.active div.list + div.list {
  padding: 5px 5px 7px 10px;
}
#sideMenu div.userWrapper div.userContentsWrapper div.userInfoMenu.active a {
  font-size: 13px;
  color: #5D5D5D;
  font-weight: 500;
  margin-bottom: 4px;
}

#sideMenu a.sideMenuLink_a {
  padding-left: 17px;
  display: flex;
  align-items: center;
  height: 42px;
}
#sideMenu a.sideMenuLink_a {
  margin-bottom: 4px;
}
#sideMenu a.sideMenuLink_a:last-child {
  margin-bottom:0;
}
/* 단일메뉴 active */
#sideMenu a.sideMenuLink_a.active{
  color: #608AFF;
  background-color: #E6EFFC;
  border-radius: 5px;
  position: relative;
  font-weight: 700;
}
#sideMenu a.sideMenuLink_a.active::before {
  display:block;
  content:'';
  position:absolute;
  left:0;
  width:5px;
  height:20px;
  background-color:#608AFF;
}
#sideMenu a.sideMenuLink_a:hover {
  background-color:#E6EFFC;
}
#sideMenu a.sideMenuLink_a:nth-of-type(1)  {
  position:relative;
}
#sideMenu a.sideMenuLink_a:nth-of-type(1)::after {
  display: block;
  content: "";
  width: 100%;
  position: absolute;
  top: -10px;
  left: 0;
  border-top: 1px solid #ddd;
}
#sideMenu .menuWrapper a {
  color: #5D5D5D;
  font-size: 14px;
  border-radius: 5px;
  font-weight: 500;
}
/* 로그인 auth 시 사이드 메뉴 - 서비스 실시간 감지중 */
#sideMenu div.confirmTop {
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 230px;
  max-width: 100%;
  margin-right: -20px;
  background: #E6EFFC;
  padding: 16px 10px 30px 10px;
}
#sideMenu div.confirmTop p.timerText {
  font-size: 12px;
  color: #0078D0;
  font-weight: 500;
}
#sideMenu div.confirmTop div.timerConfirm {
  font-size: 12px;
  color: #0078D0;
  font-weight: 400;
}
#sideMenu div.confirmTop span.timer {
  font-size: 12px;
  color: #0078D0;
  font-weight: 400;
}
/* sidemenu 아코디언 리스트 */
#sideMenu .menuWrapper div.menu-0,
#sideMenu .menuWrapper div.menu-1,
#sideMenu .menuWrapper div.menu-2
{
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
#sideMenu .menuWrapper div.menu-1 {
  margin-bottom:20px;
}
#sideMenu .menuWrapper div.menu-3 {
  margin-top:20px;
}
#sideMenu .sideMenuContents {
  display:flex;
  flex-direction:column;
  height:auto;
  opacity:1;
  padding-top: 2px;
  gap:4px;
}
/* 사이드메뉴 컨텐츠 */
#sideMenu .sideMenuContents a {
  padding-left: 17px;
  display: flex;
  align-items: center;
  height: 42px;
  font-weight: 500;
}
#sideMenu .sideMenuContents a:hover {
  background-color:#E6EFFC;
}
/* 사이드메뉴 active 시 */
#sideMenu .sideMenuContents a.active {
  color:#608AFF;
  background-color:#E6EFFC;
  border-radius:5px;
  position:relative;
  font-weight: 600;
}
.sideMenuContents a.active::after {
  display:block;
  content:'';
  position:absolute;
  left:0;
  width:5px;
  height:20px;
  background-color:#608AFF;
}

/* 사이드메뉴 이미지 */
#sideMenu .menuWrapper .sideMenuContents img {
  width:19px;
  height:auto;
}
/* 밑줄 없애기 */
#sideMenu .menuWrapper a:visited,
#sideMenu .menuWrapper a:focus,
#sideMenu .menuWrapper a:hover {
  text-decoration:none;
}
#sideMenu .menuWrapper a img {
  width:19px;
  height:auto;
  margin-right:12px;
}

#open-login-modal-1 > img

#open-login-modal-1 > img,
#open-login-modal-2 > img,
#open-login-modal-3 > img,{
  width:0px;
  height:auto;
  margin-right:0px;
}
/* 접었다 펼치기 ! */
div.menu-0 .sideMenuContents,
div.menu-1 .sideMenuContents,
div.menu-2 .sideMenuContents {
  height: auto;
  opacity: 1;
  overflow: visible;
  transition: ease-out .4s;
}
div.menu-0.active .sideMenuContents,
div.menu-1.active .sideMenuContents,
div.menu-2.active .sideMenuContents
{
  height: 0!important;
  opacity: 0!important;
  overflow: hidden;
}
.sideMenuTitle {
  position: relative;
  display: flex;
  color: #333;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  height: 30px;
  align-items: center;
  /* margin-bottom: 10px; */
}
.sideMenuTitle::before {
  content: "\e942";
  font-family: xeicon!important;
  display: flex;
  width: 16px;
  justify-content: flex-start;
  align-items: center;
  font-size: 13px;
  transform: rotate(0deg);
  transition: cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.3s;
  height: 15px;
}
div.menu-0.active .sideMenuTitle::before,
div.menu-1.active .sideMenuTitle::before,
div.menu-2.active .sideMenuTitle::before {
  transform: rotate(-90deg);
  height: auto;
  align-items: center;
  position:relative;
  bottom:3px;
}


#sideMenu.off div.logoWrapper {
  width: 80%;
  padding: 0;
}

#sideMenu div.logoWrapper a.logo img {
  height: 25px;
  width: auto;
}

#sideMenu.off div.logoWrapper a.logo img {
  width: 100%;
}

#sideMenu div.menuWrapper div.menuList {
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 10px 0;
  margin-left: 30px;
}

#sideMenu div.menuWrapper div.menuList a {
  display: flex;
  align-items: center;
  padding-left: 13px;
  text-decoration: none;
  width:100%;
  padding-top: 6px;
}

#sideMenu div.menuWrapper div.menuList:first-child {
  margin-top: 37px;
}


#sideMenu div.menuWrapper div.menuList.active::before {
  content:'';
  background-image: url(https://storage.perfectcdn.com/gz2yx6/wlknhsjnd5pxzy3s.png);
  width: 84%;height: 94px;
  left: 3px;
  z-index:-1;
  position:absolute;
  background-repeat: no-repeat;
}

#sideMenu div.menuWrapper div.menuList.active {
  position:relative;
}
#sideMenu div.menuWrapper div.menuList.active i,
#sideMenu div.menuWrapper div.menuList.active span {
  color: #1C3B55;
  font-weight:600;
}
#sideMenu div.menuWrapper div.menuList a span {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  padding-left: 9px;
  padding-top: 0;
}

#sideMenu.off div.menuWrapper div.menuList a span {
  display: none;
}

#sideMenu div.menuWrapper div.menuList a i {
  font-size: 24px;
  color: #fff;
  margin-right: 8px;
}

#sideMenu div.menuWrapper div.menuList a div.menuIcon {
  width: 32px;
  height: 32px;
}

#sideMenu div.menuWrapper div.menuList a div.menuIcon img {
  width: 90%;
}

#sideMenu div.menuWrapper div.menuList.active img {
  width:90%!important
}
/*-----------------------------------neworder 다시  --------------------------------------*/
#neworder section {
  background:transparent;
  padding: 2px 40px 24px 32px;
}
#neworder div.wrapper {
  display: flex;
  padding: 28px 0 60px;
}
/* 주문하기 내용*/
#neworder section.orderWrapper {
  flex: 1;
  height: 100%;
  position: relative;
  max-width: 100%;
}
#neworder section.orderWrapper div.orderTitleWrapper {
}
#neworder section.orderWrapper div.orderTitleWrapper p.orderTitleContents {
  font-size: 11px;
  color: #3B3B3B;
  font-weight: 600;
}
#neworder section.orderWrapper div.orderTitleWrapper strong.orderTitle {
  font-size: 20px;
  color: #3B3B3B;
  font-weight: 600;
  padding-bottom: 20px;
}
#neworder section.orderWrapper div.tabWrapper {
  display: flex;
  padding-bottom: 15px;
  position: relative;
  flex-wrap: wrap;
  gap: 6px;
}

#neworder section.orderWrapper div.tabWrapper div.tab.korea-instagram.active:hover p {
  color:#fff;
  border:none;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.popular {
  background-color:#4FA1B6;
}
#neworder section.orderWrapper div.tabWrapper div.tab.popular:hover {
  background-color:#4FA1B6;
  opacity:0.5;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.InstaEdit {
  background-color:#8814f6;
}
#neworder section.orderWrapper div.tabWrapper div.tab.InstaEdit:hover {
  background-color:#8814f6;
  opacity:0.5;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.japan-facebook{
  position:relative;
  border: 2px solid #608AFF;
  background-color: #608AFF;
}

#neworder section.orderWrapper div.tabWrapper div.tab.active.thread:hover{
  background-color: #000;
  opacity:0.5;
}
#neworder section.orderWrapper div.tabWrapper div.tab.thread:hover {
  background-color: #000;
  opacity:0.5;
}
#neworder section.orderWrapper div.tabWrapper div.tab.japan-facebook:hover {
  position:relative;
  border: 2px solid #608AFF;
  background-color: #608AFF;
  opacity:0.5;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.korea-facebook{
  position:relative;
  border: 2px solid #608AFF;
  background-color: #fff;
}
#neworder section.orderWrapper div.tabWrapper div.tab.korea-facebook:hover {
  position:relative;
  border: 2px solid #608AFF;
  background-color: #608AFF;
  opacity:0.5;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.youtube{
  position:relative;
  border: 2px solid #608AFF;
  background-color: #E60000;
}
#neworder section.orderWrapper div.tabWrapper div.tab.youtube:hover {
  position:relative;
  border: none;
  background-color: #E60000;
  opacity:0.5;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.ticktalk{
  position:relative;
  border: 2px solid #608AFF;
  background-color: #000;
}
#neworder section.orderWrapper div.tabWrapper div.tab.ticktalk:hover {
  position:relative;
  border: none;
  background-color: #000;
  opacity:0.5;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.twitter {
  position:relative;
  border:2px solid #608aff;
  background-color:#60D3FF;
}
#neworder section.orderWrapper div.tabWrapper div.tab.twitter:hover {
  border:none;
  opacity:0.5;
  background-color:#60d3ff;
  position:relative;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.etc{
  position:relative;
  border: 2px solid #608AFF;;
  background-color: #B5BFDB;
}
#neworder section.orderWrapper div.tabWrapper div.tab.etc:hover {
  position:relative;
  border: none;
  background-color: #B5BFDB;
  opacity:0.5;
}
#neworder section.orderWrapper div.tabWrapper div.tab {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 152px;
  height: 36px;
  cursor: pointer;
  background-color: #F4F4F4;
  color: #C9C9C9;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  border-radius: 12px;
  flex-direction: row-reverse;
  /* gap: 3px; */
  position: relative;
  padding: 8px;
}

#neworder div.formWrapper.InstaEdit div.inputWrapper:nth-child(1) {
  background: rgb(201 149 251);
  background: linear-gradient(107deg, rgb(192 126 255 / 62%) 31%, rgba(244,223,255,1) 100%);
  border: 1px solid #eac1ff;
  box-shadow: 1px 1px 1px 0px #dbdbdb;

}
#neworder section.orderWrapper div.formWrapper.Thread div.inputWrapper:nth-child(1) {
  background: #d3d0d0;
  border: 1px solid #d1d1d1;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  border-radius: 3px;
}
#neworder section.orderWrapper div.formWrapper.Thread div.inputServicesWrapper {
  background-color: #ececec;
  border: 1px solid #ececec;
  padding: 12px 14px 10px 12px;
}
#neworder div.formWrapper.popular div.inputWrapper:nth-child(1) {
  border: 1px solid #A3D6E3;
  padding-bottom: 16px;
  border-radius: 3px;
  padding-top: 12px;
  padding-left: 13px;
  background-color: #A3D6E3;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
}

#neworder section.orderWrapper div.formWrapper.popular div.inputServicesWrapper {
  background-color: #DEF6FC;
  border: 1px solid #DEF6FC;
  padding: 12px 14px 10px 12px;
}
#neworder section.orderWrapper div.tabWrapper div.tab div.tabImg {
  display: flex;
  flex-direction: row;
  /* width: 100%; */
  justify-content: center;
  position: relative;
  align-items: center;
  top: 0;
  left: 2px;
}
#neworder section.orderWrapper div.tabWrapper div.tab div.tabImg img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  /* max-width: 44px; */
  /* top: 2px; */
  width: 26px;
  height: 26px;
}

.tabImg.active img.active {
  display: flex!important;
}
.tabImg.active img.noneActive {
  display: none!important;
}
.tabImg img.active {
  display: none!important;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active::after{
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  border-radius: 10px;
}
#neworder section.orderWrapper div.tabWrapper div.tab::after {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0px solid #fff;
  border-radius: 12px;
}
#neworder section.orderWrapper div.tabWrapper div.tab.korea-facebook.active::after {
  border: 2px solid #0019B8!important;
}
#neworder section.orderWrapper div.tabWrapper div.tab.korea-instagram.active::after {
  border: 2px solid #A400F9!important;
}
#neworder section.orderWrapper div.tabWrapper div.tab.korea-facebook:hover::after {
  border:none!important;
}
#neworder section.orderWrapper div.tabWrapper div.tab.korea-instagram:hover::after {
  border:none!important;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active p.tabName {
  color: #fff;
  font-size: 11px;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.korea-facebook p.tabName {
  color:#0019B8;
  font-weight:700;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.korea-instagram p.tabName {
  color:#A400F9;
  font-weight: 700;
}
#neworder section.orderWrapper div.tabWrapper div.tab p.tabName {
  text-align:left;
  width:100%;
  font-size: 11px;
  color: #9F9F9F;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active {
  /* margin-left: -10px; */
  z-index: 1;
  border: 2px solid #608AFF;
  position: relative;
}
#neworder section.orderWrapper div.tabWrapper div.tab:hover p.tabName{
  color:#fff;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.korea-facebook:hover p.tabName {
  color:#fff;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.japan-instagram {
  border: 2px solid #608AFF;
  z-index: 1;
  background: #C75CFF;
}
#neworder section.orderWrapper div.tabWrapper div.tab:hover{
  color:#fff;
}
#neworder section.orderWrapper div.tabWrapper div.tab.japan-instagram:hover {
  position: relative;
  background: #fff;
  border: 1px solid #608AFF;
  border: none;
  background: #C75CFF;
  opacity:0.5;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.korea-instagram{
  z-index: 1;
  background: #fff;
} 
#neworder section.orderWrapper div.tabWrapper div.tab.korea-instagram:hover {
  position: relative;
  background: #C75CFF;
  border: 2px solid #608AFF;
  opacity:0.5;
  border:none;
}

#neworder section.orderWrapper div.tabWrapper div.tab.korea-instagram.active:hover p {
  color:#fff;
  border:none;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.thread {
  background-color:#000;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.japan-facebook{
  position:relative;
  border: 2px solid #608AFF;
  background-color: #608AFF;
}
#neworder section.orderWrapper div.tabWrapper div.tab.japan-facebook:hover {
  position:relative;
  border: 2px solid #608AFF;
  background-color: #608AFF;
  opacity:0.5;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.korea-facebook{
  position:relative;
  border: 2px solid #608AFF;
  background-color: #fff;
}
#neworder section.orderWrapper div.tabWrapper div.tab.korea-facebook:hover {
  position:relative;
  border: 2px solid #608AFF;
  background-color: #608AFF;
  opacity:0.5;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.youtube{
  position:relative;
  border: 2px solid #608AFF;
  background-color: #E60000;
}
#neworder section.orderWrapper div.tabWrapper div.tab.youtube:hover {
  position:relative;
  border: none;
  background-color: #E60000;
  opacity:0.5;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.ticktalk{
  position:relative;
  border: 2px solid #608AFF;
  background-color: #000;
}
#neworder section.orderWrapper div.tabWrapper div.tab.ticktalk:hover {
  position:relative;
  border: none;
  background-color: #000;
  opacity:0.5;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.twitter {
  position:relative;
  border:2px solid #608aff;
  background-color:#60D3FF;
}
#neworder section.orderWrapper div.tabWrapper div.tab.twitter:hover {
  border:none;
  opacity:0.5;
  background-color:#60d3ff;
  position:relative;
}
#neworder section.orderWrapper div.tabWrapper div.tab.active.etc{
  position:relative;
  border: 2px solid #608AFF;
  background-color: #324d99;
}
#neworder section.orderWrapper div.tabWrapper div.tab.etc:hover {
  position:relative;
  border: none;
  background-color: #B5BFDB;
  opacity:0.5;
}
/*-----------------------------------------formwrapper--------------------------------------------*/
#neworder section.orderWrapper div.formWrapper div.inputWrapper div.servicesWrapper {
  padding-left: 0;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
  gap: 6px;
}
#neworder section.orderWrapper div.formWrapper div.inputServicesWrapper div.servicesWrapper {
  padding-left: 3px;
  flex-wrap: wrap;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
  gap: 6px;
}
#neworder section.orderWrapper div.formWrapper div.inputWrapper label.servicesOne {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1px;
  padding-top: 7px;
  color: #3B3B3B;
}
#neworder section.orderWrapper div.formWrapper div.inputWrapper div.servicesWrapper img {
  width: 36px;
}
#neworder section.orderWrapper div.formWrapper div.inputWrapper label {
  font-size: 14px;
  font-weight: 700;
  padding-top: 6px;
  color: #222;
  margin-bottom: 0;
  section.orderWrapper div.formWrapper div.inputWrapper div.servicesWrapper {
    padding-left: 0;
    display: flex;
    margin-bottom: 11px;
    align-items: center;
    gap: 6px;
  };
}
#neworder section.orderWrapper div.formWrapper div.inputWrapper+div.inputWrapper .moveDiv {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 1px 5px;
  font-size: 12px;
  border-radius: 5px;
  text-align: center;
  vertical-align: middle;
  align-items: center;
  margin-bottom: 5px;
  margin-left: 9px;
  cursor: pointer;
  display: none;
}
#neworder div.formWrapper div.inputWrapper:nth-child(1) {
  padding-top: 12px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 16px;
  border-radius: 3px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
}
#neworder section.orderWrapper div.formWrapper div.inputServicesWrapper {
  padding: 12px 14px 10px 12px;
  height: 99px;
  border-radius: 3px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
}

#neworder div.formWrapper.japan-instagram div.inputWrapper:nth-child(1) {
  background-color: #E9BEFF;
  border: 1px solid #E9BEFF;
}
#neworder section.orderWrapper div.formWrapper.japan-instagram div.inputServicesWrapper {
  background-color: #F4DEFF;
  border: 1px solid #F4DEFF;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  height: 99px;
  border-radius: 3px;
}
@media(max-width:760px){
  #neworder section.orderWrapper div.formWrapper.japan-instagram div.inputServicesWrapper {
    height: 120px;
  }
}
#neworder div.formWrapper.korea-instagram div.inputWrapper:nth-child(1) {
  background-color: #E9BEFF;
  border: 1px solid #E9BEFF;
}
#neworder section.orderWrapper div.formWrapper.korea-instagram div.inputServicesWrapper {
  background-color: #F4DEFF;
  border: 1px solid #F4DEFF;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
}
#neworder div.formWrapper.japan-facebook div.inputWrapper:nth-child(1) {
  background-color: #A2BAFF;
  border: 1px solid #A2BAFF;
}
#neworder section.orderWrapper div.formWrapper.japan-facebook div.inputServicesWrapper {
  background-color: #CCD9FF;
  border: 1px solid #CCD9FF;
  padding: 12px 14px 10px 12px;

}
#neworder div.formWrapper.korea-facebook div.inputWrapper:nth-child(1) {
  background-color: #A2BAFF;
  border: 1px solid #A2BAFF;
}
#neworder section.orderWrapper div.formWrapper.korea-facebook div.inputServicesWrapper {
  background-color: #CCD9FF;
  border: 1px solid #CCD9FF;
  padding: 12px 14px 10px 12px;

}
#neworder div.formWrapper.youtube div.inputWrapper:nth-child(1) {
  background-color: #ffb0b0;
  border: 1px solid #ffb0b0;
}
#neworder section.orderWrapper div.formWrapper.youtube div.inputServicesWrapper {
  background-color: #ffdcdc;
  border: 1px solid #ffdcdc;

}
#neworder div.formWrapper.tiktok div.inputWrapper:nth-child(1) {
  background-color: #CBCBCB;
  border: 1px solid #CBCBCB;
}
#neworder section.orderWrapper div.formWrapper.tiktok div.inputServicesWrapper {
  background-color: #E0E0E0;
  border: 1px solid #E0E0E0;
}
#neworder div.formWrapper.twitter div.inputWrapper:nth-child(1) {
  background-color: #B3EAFF;
  border: 1px solid #B3EAFF;
}
#neworder section.orderWrapper div.formWrapper.twitter div.inputServicesWrapper {
  background-color: #E2F7FF;
  border: 1px solid #E2F7FF;
}
#neworder div.formWrapper.gitar div.inputWrapper:nth-child(1) {
  background-color: #C3CDE8;
  border: 1px solid #C3CDE8;
}
#neworder section.orderWrapper div.formWrapper.gitar div.inputServicesWrapper {
  background-color: #E1E6F4;
  border: 1px solid #E1E6F4;

}



#neworder section.orderWrapper div.inputWrapper div#services {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
#neworder section.orderWrapper div.inputWrapper div#services div.serviceTab {
  position: relative;

  background: #FAFAFA;
  border: none;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 600;
  color: #5d5d5d;
  padding: 12px;
  cursor: pointer;
  box-shadow: inset 0 3px 6px #BCBCBC29;
}
#neworder section.orderWrapper div.inputWrapper div#services div.serviceTab.active {
  background: #0078D0;
  color: #fff;
  background: #0067CE;
}
#neworder section.orderWrapper div.formWrapper div.inputServicesWrapper span.selection {
  width: 100%;
  position: relative;
  max-width: 100%;
}
#neworder section.orderWrapper div.formWrapper div.inputServicesWrapper span.select2-selection {
  border-radius: 3px;
  width: 100%;
  max-width: 100%;
  max-height: 42px;
  margin: auto;
  background-color: #FAFAFA;
  box-shadow: inset 0 3px 6px #BCBCBC29;
  cursor: pointer;
  display: flex;
  border-radius: 18px;
  align-items: center;
  font-weight: 600;
  border: none;
  height: auto;
  padding: 15px;
}
#neworder section.orderWrapper div.formWrapper div.inputWrapper+div.inputWrapper .select2-container .select2-selection--single .select2-selection__rendered {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
#neworder section.orderWrapper div.formWrapper div.inputWrapper+div.inputWrapper .select2-container .select2-selection--single .select2-selection__rendered span {
  color:#222;
  font-size:14px;
}
.select2-container .select2-selection__text {
  font-size:14px;
}
/* 구매금액 */
#neworder section.orderWrapper div.chargeWrapper div.inputWrapper {
  background: #fff!important;
  border: none!important;
  box-shadow: none!important;
  padding: 0;
}
/* 드롭다운 메뉴 */
.select2-container--open .select2-dropdown {
  left: 0!important;
  top: 2px;
  max-width: auto;
  min-width: 100%;
}
#neworder section.orderWrapper div.formWrapper div.inputServicesWrapper span.select2-selection:hover {
  background: #E6EFFC;
}
.select2-container--open .select2-selection {
  background-color: #0067CE!important;
}
.select2-container--open .select2-selection span {
  color: #fff!important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #fff transparent!important;
}

#neworder #fields {
  display: flex;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
#neworder #fields div.order-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 100%;
  gap: 12px;
}

/* 게시물 링크를 입력해주세요 */
#neworder #fields div.form-group#order_link {
  width: 100%;
  background-color: #F4F5F7;
  padding-top: 16px;
  height: 130px;
  max-height: 100%;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  margin-bottom: 0;
  padding-left: 12px;
  padding-right: 12px;
}
/* 작업할 수량을 입력해주세요 */
#neworder #fields div.form-group#order_quantity {
  width: 100%;
  height: auto;
  background-color: #F4F5F7;
  padding-top: 16px;
  height: 130px;
  max-height: 100%;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  margin-bottom: 0;
  padding-left: 12px;
  padding-right: 12px;
}
#neworder #fields div.form-group#order_link input.form-control {
  max-width: 100%;
}
#neworder section.orderWrapper div.formWrapper div.inputWrapper input {
  width: 100%;
  height: 32px;
  /* background-color: #fff; */
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  font-size: 13px;
  padding: 0 12px;
  margin: auto;
  max-width: 100%;
}
/*small 태그 */
#neworder .help-block {
  font-weight: 600;
  color: #ADADAD;
  margin-bottom: 0px!important;
  display: flex;
  justify-content: start;
  font-size:11px;
}
/* 반복주문 togglebutton */
#neworder #fields #dripfeed {
  display: flex;
  width: 100%;
}
#neworder #fields #dripfeed div.form-group#order_check {
  width: 100%;
}
#neworder .form-group__checkbox {
  display: flex;
  align-items: center;
  gap: 14px;
}
#dripfeed-options div.dripfeed-wrapper .form-group + .form-group .servicesWrapper label.control-label {
  padding-bottom: 0;
  padding-left: 0;
}
#neworder section.orderWrapper div.formWrapper div.inputWrapper label {
  font-size: 14px;
  font-weight: 700;
  padding-top: 6px;
}
div#order_check .form-group:last-child label.control-label {
  padding-bottom: 10px;
}
#neworder input#field-orderform-fields-check {
  transform: scale(1.7);
  margin-right: 5px;
  margin-left: 12px;
  cursor: pointer;
}
#neworder input#field-orderform-fields-check {
  appearance: none;
  outline: none;
  position: relative;
  padding:2px 5px 2px 5px;
  border: none;
  background: #f7f7f7;
  border-radius: 15px;
  width: 35px;
  height: 15px;
  min-height: auto;
  box-shadow: inset 1px 1px 2px #dadada;
}
#neworder input#field-orderform-fields-check::before {
  content: "";
  position: absolute;
  top: 2.4px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: scale(1);
  background-color: white;
  box-shadow: 1px 1px 2px #a1a1a1;
  transition: left 250ms linear;
}
#neworder input#field-orderform-fields-check:checked {
  background-color: #0067CE;
  border-color: #0067CE;
  box-shadow: none;
  cursor: pointer;
}
#neworder input#field-orderform-fields-check:checked:hover {
  background: #173959;
}
#neworder input#field-orderform-fields-check:hover {
  background: #E6EFFC;
}
#neworder input#field-orderform-fields-check:checked::before {
  background-color: gray;
  left: 15px;
  top: 2.4px;
  height: 12px;
  width: 12px;
  box-shadow: none;
}
#neworder section.orderWrapper div.formWrapper div.inputWrapper label.form-group__label-title {
  padding-top: 0px;
}

/* 반복주문 활성화 */
#neworder #fields #dripfeed div.depend-fields#dripfeed-options div.dripfeed-wrapper {
  display: flex;
  width: 100%;
  gap: 12px;
}
#neworder #fields #dripfeed div.depend-fields#dripfeed-options div.form-group {
  width: 100%;
}
#neworder #fields #dripfeed div.depend-fields#dripfeed-options div.dripfeed-wrapper:nth-child(1) {
  width: 100%;
}
#neworder #fields #dripfeed div.depend-fields#dripfeed-options {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
#neworder #fields #dripfeed div.depend-fields#dripfeed-options div.dripfeed-wrapper:nth-child(1) {
  width: 100%;
}
#neworder #fields #dripfeed div.depend-fields#dripfeed-options div.form-group:nth-of-type(1), #neworder #fields #dripfeed div.depend-fields#dripfeed-options div.form-group:nth-of-type(2) {
  background-color: #F4F5F7;
  padding-top: 16px;
  height: 116px;
  max-height: 100%;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  margin-bottom: 0px;
  padding-left: 12px;
  padding-right: 12px;
}
#neworder section.orderWrapper div.formWrapper div.inputWrapper div.servicesWrapper {
  padding-left: 0;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
  gap: 6px;
}
div#order_check .form-group:last-child label.control-label {
  padding-bottom: 10px;
}
input#field-orderform-fields-total-quantity {

  background: #E6EFFC!important;

}
/* 가위 */
#neworder div.gawi img {
  width: 100%;
  max-width: 100%;
}
/* 구매 금액 영역 */
#neworder section.orderWrapper div.chargeWrapper {
  /*display: grid;*/
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
#neworder section.orderWrapper div.formWrapper div.inputWrapper label.chargeLabel {
  margin-bottom: 4px;
}
#neworder section.orderWrapper div.formWrapper div.inputWrapper input:disabled {
  background: #D8D8D8;
  height: 38px;
  font-size: 18px;
  color: #222;
  font-weight: 600;
  padding-left: 15px;
  cursor: auto;
}
button.orderButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 38px;
  background: #253858;
  border: none;
  border-radius: 5px;
  color: #fff;
  margin-top: 12px;
  font-size: 14px;
  padding-left: 0;
  background: transparent linear-gradient(90deg, #369E44 0%, #3065CC 100%) 0% 0% no-repeat padding-box;
  background: #0067CE;
}
#neworder section.orderWrapper div.formWrapper section.counterWrapper {
  display: flex;
  background-color: #F4F5F7;
  padding: 0;
  gap: 6px;
  padding: 12px 4px;
  border-radius: 3px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
}
#neworder section.orderWrapper div.formWrapper section.counterWrapper div.counterBox {
  background: #E9E6FD;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 3px;
  gap: 10px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
}
#neworder section.orderWrapper div.formWrapper section.counterWrapper div.counterBox p.numberText {
  font-size: 15px;
  color: #253858;
  font-weight: 900;
}
#neworder section.orderWrapper div.formWrapper section.counterWrapper div.counterBox p.title {
  color: #253858;
  font-size: 12px;
  font-weight: 600;
}
/* 주문하기 오른쪽 */
#neworder div.rightWrapper {
  flex: 1;
  margin-right: 60px;
  max-width: 50%;
}
#neworder div.rightWrapper section.noticeWrapper {
  margin: 0 0 10px 0;
  background-color: #F4F5F7;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  padding: 12px 12px 16px 12px;
}

#neworder .noticeWrapper .noticeTabWrapper {
  display: flex;
  padding-bottom: 11px;
  align-items: center;
  position: relative;
}
#neworder .noticeTab {
  margin-right: 10px;
  border-radius: 30px;
  background-color: #F4F4F4;
  color: #5D5D5D;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
}
#neworder .noticeWrapper .noticeTabWrapper::after {
  display: block;
  content: '';
  position: absolute!important;
  bottom: -0.9px;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: #B5BFDB;
  z-index: 1;
}
#neworder .noticeTab.active::after {
  display: block;
  content: '';
  position: absolute!important;
  bottom: -12.4px;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #608AFF;
  z-index: 9;
}
#neworder .noticeTab.active {
  background-color: #0067CE;
  color: #fff;
  font-weight: 700;
  position: relative;
}
#neworder .noticeContentsWrapper div.noticeContents span.button {
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  padding: 2px 6px!important;
  border-radius: 3px;
}
#neworder .noticeContentsWrapper span.proceeding {
  background: #608AFF;
}
#neworder .noticeContentsWrapper span.success {
  background: #253858;
}
#neworder .noticeContentsWrapper span.operation { background:#FFA412;}
#neworder .noticeContentsWrapper div.noticeContents {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding-left: 12px;
  padding: 4px 6px 5px;
  font-size: 13px;
  border-bottom: 1px solid #D8D8D8;
  color: #222;
  font-weight: 500;
}
#neworder .noticeContentsWrapper div.noticeContents:hover {
  background:#E6EFFC;
}
#neworder .noticeContentsWrapper div.noticeContents span {
  color:#222;
}
@media (max-width:1750px) {
  #neworder div.rightWrapper {
    /* padding: 44px 50px 40px 34px; */
  }
}
/* 주문링크 확인방법 */
#neworder div.rightWrapper section.noticeWrapper {
  margin: 0 0 10px 0;
  background-color: #F4F5F7;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  padding: 12px 12px 16px 12px;
}
#neworder .linkGuideWrapper {
  display: none;
}
#neworder div.linkGuideWrapper ul.linkGuideContents {
  display: flex;
  gap: 18px;
}
#neworder div.linkGuideWrapper ul.linkGuideContents div.linkGuideSnsBox {
  flex: 1;
}
#neworder div.linkGuideWrapper ul.linkGuideContents div.linkTitle {
  display: flex;
  justify-content: center;
  text-align: center;
}
#neworder div.linkGuideWrapper ul.linkGuideContents div.linkTitle strong {
  color: #5D5D5D;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  margin-top: 24px;
}
#neworder div.linkGuideWrapper ul.linkGuideContents div.linkTitle img {
  padding-right: 4px;
}
#neworder div.linkGuideWrapper ul.linkGuideContents div.linkGuideBox {
  padding-bottom: 4px;
}
#neworder div.linkGuideWrapper ul.linkGuideContents div.linkGuideBox li {
  background: #fff;
  display: flex;
  padding: 11px 0;
  color: #5D5D5D;
  font-weight: 500;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 13px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  cursor: pointer;
}
/* 모달창 */
#neworder div.linkGuideWrapper div.linkModal {
  display: none;
  z-index: 9999;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
#neworder div.modalBox {
  position: relative;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  width: 440px;
  height: auto;
  text-align: center;
  border: 1px solid #8A98C0;
  border-radius: 10px;
}
#neworder div.modalContents {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 27px 12px;
  border-bottom: 1px solid #8A98C0;
  gap: 6px;
  background: #3B3B3B;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
#neworder div.modalContents p {
  color: #8A98C0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
}
#neworder div.modalContents i {
  font-size: 42px;
  position: absolute;
  right: 11px;
  top: 13px;
  color: #8A98C0;
  cursor: pointer;
}
#neworder div.linkModal div.modalImgWrapper {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
#neworder div.modalImgWrapper p {
  color: #fff;
  text-align: left;
  width: 100%;
  font-weight: 700;
  max-width: 90%;
  margin: auto;
  font-size: 20px;
  padding: 18px 0;
}
#neworder div.modalImgWrapper {
  max-height: 733px;
  height: 100%;
  padding-bottom: 32px;
  background: #3B3B3B;
}
#neworder div.modalBoxImgDiv {
  height: 100%;
  width: auto;
  max-width: 90%;
  margin: auto;
  background: #fff;
  border: 1px solid #E4E4E4;
  border-radius: 5px;
  min-height: 50px;
  overflow-y: auto;
  max-height: 50vh;
}
#neworder img.modalBoxImg {
  width: 100%;
  max-width: 100%;
  overflow: clip;
}
/* 모달창 - 스크롤 바 */
div.modalBoxImgDiv::-webkit-scrollbar {
  width: 4px;
  height: 3px;
}
div.modalBoxImgDiv::-webkit-scrollbar-track {
  background-color: #DFDFDF;
  padding: 2px;
  background-clip: content-box;
  border: 1px solid rgba(0, 0, 0, 0);
}
div.modalBoxImgDiv::-webkit-scrollbar-thumb {
  background-color: #BDBDBD;
  border-radius: 30px
}
div.modalBoxImgDiv::-webkit-scrollbar-track-piece {
  background:#fff;
  height:100%;
}

#neworder .itemDescriptionWrapper {
  margin: 10px 0 0 0;
  background: #F4F5F7;
  border-radius: 5px;
  padding: 19px 12px 20px 12px;
  display: block;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
}
#neworder .sectionTitle {
  font-size: 14px;
  margin-bottom: 16px;
  display: block;
  font-weight: 700;
  color: #5D5D5D;
}
#neworder .itemDescriptionFlexBox {
  border: 1px solid #F4F5F7;
  padding: 16px;
  background: #fff;
}
#neworder div.itemCounterDescriptionWrapper {
  display: flex;
  width: 100%;
  gap: 10px;
  padding-bottom: 20px;
  flex-wrap: wrap;
}
#neworder div.itemCounterDescriptionWrapper span {
  display: flex;
  border-radius: 3px;
  align-items: center;
  height: 28px;
  max-height: 100%;
  justify-content: center;
  padding: 0 10px;
}
#neworder div.itemCounterDescriptionWrapper strong {
  font-size: 13px;
  font-weight: 600;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#neworder div.itemCounterDescriptionWrapper span.start {
  background: #FEE8E2;
  width: auto;
  max-width: 100%;
  padding: 7px 10px;
  align-items: center;
  justify-content: center;
}

#neworder div.itemCounterDescriptionWrapper span.start strong {
  color: #D92F0E;
}
#neworder div.itemCounterDescriptionWrapper span.work {
  width: auto;
  max-width: 100%;
  background: #E9E6FD;
  padding: 7px 10px;
}
#neworder div.itemCounterDescriptionWrapper span.work strong {
  color: #382C89;
}
#neworder div.itemCounterDescriptionWrapper span.minimum {
  background: #46526C;
}
#neworder div.itemCounterDescriptionWrapper span.minimum strong {
  color: #fff;
}
#neworder div.itemCounterDescriptionWrapper span.maximum {
  background: #46526C;
}
#neworder div.itemCounterDescriptionWrapper span.maximum strong {
  color: #fff;
}
#neworder .sectionContents {
  font-size: 13px;
}

/* 자동주문 - 공지사항 */
#neworder .autoDescriptionWrapper {
  display: flex;
  background-color: #5D5D5D;
  border-radius: 2px;
  padding: 10px 12px 10px;
  margin-bottom: 10px;
  position: relative;
  right: 0;
  bottom: 0;
  width: 100%;
  flex-direction: column;
  justify-content: center;
}
#neworder div.autoImgBox {
  display: flex;
  justify-content: center;
}
#neworder div.autoStrongBox {
  text-align:center;
}
#neworder .autoDescriptionWrapper strong {
  display: inline;
  font-size: 11px;
  color: #fff;
  font-weight: 400;
}
/* 자동주문 - divWrapper */
#neworder #fields div.autoFieldsWrapper {
  width:100%;
  max-width:100%;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* 자동주문 - 자동작업할 아이디를 입력해주세요 */
#neworder #fields div#order_username {
  width:100%;
  background-color: #F4F5F7;
  padding-top: 16px;
  height: 116px;
  max-height: 100%;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  margin-bottom: 0;
  padding-left: 12px;
  padding-right: 12px;
} 


/* 자동주문 - 주문 이후 자동작업할 게시물 수를 입력해주세요. */
#neworder #fields div#order_posts {
  width:100%;
  background-color: #F4F5F7;
  padding-top: 16px;
  height: 116px;
  max-height: 100%;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  margin-bottom: 0;
  padding-left: 12px;
  padding-right: 12px;
}
/* 자동주문 - 구매하실 수량을 입력해주세요. */
#neworder #fields div#order_min {
  width:100%;
  background-color: #F4F5F7;
  padding-top: 16px;
  height: 116px;
  max-height: 100%;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  /* margin-bottom: 4px; */
  margin-bottom: 0;
  /* margin-left: 12px; */
  padding-left: 12px;
  padding-right: 12px;
}

/* 자동주문 - 작업시간 */
#neworder #fields div#order_delay {
  width:100%;
  margin-bottom: 0;
}
#neworder #fields div#order_delay .row {
  /* display:flex; */
}
#neworder #fields div#order_delay .col-md-6:nth-child(1) {
  background-color: #F4F5F7;
  padding-top: 16px;
  height: 116px;
  max-height: 100%;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  margin-bottom: 4px;
  width: 100%;
  padding-top: 16px;
  padding-right: 0;
  margin-bottom: 0;
  padding-left: 12px!important;
  padding-right: 12px;
}
#neworder #fields div#order_delay .col-md-6:nth-child(2){
  background-color: #F4F5F7;
  height: 116px;
  max-height: 100%;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  margin-bottom: 4px;
  width: 50%;
  padding-top: 16px;
  padding-right: 0;
}
#neworder #fields div#order_delay .input-group {
  padding-top: 0;
  margin: auto;
  max-width: 96%;
  width:100%;
}
/* 게시물 발행 후 작업 시간을 지정해주세용 */
#neworder #field-orderform-fields-delay {
  background: url(https://storage.perfectcdn.com/gz2yx6/zpju4jm5eb616qa6.png) no-repeat 100%;
  display: block;
  appearance: none;
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 3px;
  background-color: #fff;
  max-width: 100%;
  margin: auto;
  border: 1px solid #d9d9d9;
}
#neworder div.orderExit {
  width: 100%;
  background-color: #FAFAFA;
  box-shadow: inset 0 3px 6px #BCBCBC29;
  padding: 10px;
  height: 112px;
  max-height: 100%;
  border-radius:5px;
  margin-bottom: 21px;
}
#neworder div.orderExit input#field-orderform-fields-expiry {
  max-width: 100%;
  width: 100%;
  margin-right: 40px;
  /* margin-left: 15px; */
  border: 1px solid #d9d9d9;
}
#neworder .input-group-btn:last-child > .btn {
  position: initial;
}
#neworder section.orderWrapper div.formWrapper div.inputWrapper input {
  width: 100%;
  height: auto;
  background-color: #FAFAFA;
  box-shadow: inset 0 3px 6px #BCBCBC29;
  padding:15px;
  border-radius:15px;
  font-size: 13px;
  margin: auto;
  max-width: 100%;
}
input#field-orderform-fields-expiry {
  background-image: url(https://storage.perfectcdn.com/7mcojg/r0ey5qzco99d2458.png);
  background-repeat: no-repeat;
  background-position: 97%;
}
#neworder .input-group button {
  border: none;
  height: 32px;
  width: auto;
  margin: 0;
  padding: 0;
  background-color: #F4F5F7;
  background: #F4F5F7;
  box-shadow: none;
}

#neworder span.input-group-btn img {
  position: absolute;
  right: 8px;
  z-index: 8;
  top: 3px;
}
#neworder svg:not(:host).svg-inline--fa, svg:not(:root).svg-inline--fa {
  display:none;
}



/*주문내역 모달*/
.modal {
  position: fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width: 300px;
  height: 72px;
  display: none;
  background-color: #3B3B3B;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  box-shadow: 6px 9px 1px #00000060;
  gap:12px;
}
.modal:before {
  display:block;
  content:'';
  position:absolute;
  width:8px;
  height:93%;
  background-color:#C2D90E;
  left:4px;
  border-radius:20px;
}
.modal p {
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
}


/* 분할주문 */
#drip-feed {
  width: 100%;
}
#drip-feed a {
  color: #2fa4e7;
  text-decoration: underline;
}
#drip-feed .table > thead {
  border-top: 2px solid #008BFF!important;
  border-bottom: 1px solid #008BFF!important;
}
#drip-feed .table > thead > tr > th {
  border-bottom: 1px solid #008BFF!important;
  text-align:center;
}
#drip-feed .wrapper {
  background-color: #fff;
}
#drip-feed div.wrapper div.dripFeedWrapper {
  height: auto;
  padding: 30px 0 100px;
  margin-bottom: 60px;
  margin-left: 32px;
  margin-right: 56px;
}
@media (max-width: 768px) {
  #drip-feed .wrapper {
    margin: 0;
    max-width: 100%;
    padding: 0 16px 0 16px;
  }
  #drip-feed div.wrapper div.dripFeedWrapper {
    margin:0;
  }
  #drip-feed div.filterWrapper {
    margin-bottom: 18px;
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 12px;
    height: auto;
  }
  #orders select, #drip-feed select, #subscriptions select {
    width: 120px;
  }
  #drip-feed .input-group .form-control {
    width: auto;
  }
}
#drip-feed tbody {
  text-align:center;
}

/* 분할주문 - 검색 filter */
#drip-feed div.filterWrapper {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  background: #F4F5F7;
  height: 64px;
  padding: 0 4px;
  gap: 11px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
}

/* 분할주문 - 검색 */
#drip-feed .input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
#drip-feed form {
  margin-bottom:0;
}
#drip-feed span.input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap;
  width: 100%;
  max-width: 49px;
  background-image: url('https://storage.perfectcdn.com/7mcojg/wg1gqtjxsupdhwht.png');
  background-repeat: no-repeat;
  background-position: center center;
}
#drip-feed button.btn.btn-default {
  border-radius: 0;
  border: none!important;
  padding: 0px 18px;
  background-image: none;
  height: 34px!important;
  display: flex;
  align-items: center;
  box-shadow: none!important;
  background: transparent;
}
#drip-feed div.input-group i {
  color: #AFAFAF;
  font-size: 20px;
}
#drip-feed input.form-control {
  width: 350px;
  max-width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  height: 34px;
  padding: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: #9F9F9F;
}

#account .alert-success {
  margin-left: 40px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  margin-top: 20px;
}
@media (max-width:768px) {
  #account .alert-success {
    margin-left:0;
    width:97%;
    margin:30px auto 0;
    flex-wrap: wrap;
    padding-right: 19px;
  }
}
#account .alert-success span {
  color: #686868;
}

#drip-feed .input-group .form-control:first-child {
  border-radius: 20px 0 0 20px;
}
#drip-feed .btn-default {
  border-radius: 0 20px 20px 0;
  background-color: #fff;
  border-right: 1px solid #DBDBDB!important;
  border-top: 1px solid #DBDBDB!important;
  border-bottom: 1px solid #DBDBDB!important;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  padding: 9px 18px;
}
#drip-feed .input-group .form-control {
  width: auto;
}

#drip-feed .btn-default {
  border-radius: 0 20px 20px 0;
  background-color: #fff;
  border-right: 1px solid #DBDBDB;
  border-top: 1px solid #DBDBDB;
  border-bottom: 1px solid #DBDBDB;
  border-left: none;
  height:43px;
}
#drip-feed div.orderHistoryWrapper div.filterWrapper div.statusButtonWrapper div.statusButton {
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 10px 22px;
  cursor: pointer;
}

#drip-feed i {
  color: #AFAFAF;
  font-size: 20px;
}
@media (max-width:768px){

  #drip-feed div.filterWrapper {
    margin-bottom:18px;
    flex-wrap:wrap;
    padding-top: 10px;
    padding-bottom: 12px;
    height: auto;
  }
  #drip-feed .input-group .form-control {
    width:auto;
  }
}
@media (max-width:350px){
  #drip-feed div.filterWrapper>div {
    width: 100%;
  }
  #drip-feed .filterWrapper select {
    width:100%;
  }
}
#drip-feed .table > thead > tr > th {
  padding:8px 0;
}
/* 분할주문내역 리스트 */
#drip-feed div.dripFeedListWrapper {
  display:flex;
  flex-direction:column;
}
#drip-feed div.dripFeedListWrapper div.dripFeedList {
  max-width: 100%;
  margin: 0;
  width: 100%;
  display: table;
  border-collapse: collapse;
  border: none;
  table-layout: fixed;
}
/* 분할주문내역 리스트 타이틀 */
#drip-feed div.dripFeedListWrapper div.dripFeedList div.dripFeedTitle {
  display: table;
  border: none;
  background-color: #fff;
  padding: 13px 25px;
  height: 70px;
  cursor: pointer;
  position: relative;
  align-items: center;
  border: 1px solid #ddd;
  align-items: center;
  width: 100%;
  align-items: center;
  margin: auto;
  text-align: center;
}
#drip-feed div.dripFeedListWrapper div.dripFeedList div.dripFeedTitle:hover {
  background-color:#E6EFFC;
}
/* active */
#drip-feed div.dripFeedListWrapper div.dripFeedList div.dripFeedTitle.active {
  background-color: #0067CE;
}
#drip-feed div.dripFeedListWrapper div.dripFeedList div.dripFeedTitle.active strong {
  color:#fff!important;
}
#drip-feed div.dripFeedListWrapper div.dripFeedTitle::after {
  font-size: 20px;
  font-family: xeicon!important;
  content: "\e942";
  transition: all 0.2s ease-in-out;
  transform: rotate(0deg);
  color: #222;
  display: table-cell!important;
  vertical-align: middle!important;
}
#drip-feed div.dripFeedListWrapper div.dripFeedTitle.active::after {
  color: #fff;
}
@media (max-width:1300px){
  #drip-feed div.dripFeedListWrapper div.dripFeedTitle::after {
    position:absolute;
    top:50%;
    transform:translate(-50%,-50%);
    right:13px;
  }
}
#drip-feed div.dripFeedListWrapper div.dripFeedList div.dripFeedTitle div.dripFeedId{
  max-width: 100%;
  display: table-cell!important;
  vertical-align: middle;
  text-align: left;
  padding-left: 24px;
  width: 15%;
}
#drip-feed div.dripFeedListWrapper div.dripFeedList div.dripFeedTitle div.dripFeedId strong + strong {
  color: #9F9F9F;
  margin-left: 8px;
  font-size: 14px;
  padding-left: 0;
}
#drip-feed div.dripFeedListWrapper div.dripFeedList div.dripFeedTitle div.dripFeedDate {
  max-width: 100%;
  gap: 100px;
  display: table-cell;
  vertical-align: middle;
  width: 35%;
}
#drip-feed div.dripFeedListWrapper div.dripFeedList div.dripFeedTitle div.dripFeedDate div.dripFeedDateBox {
  display: flex;
  align-items: center;
}
#drip-feed span#dripFeedcopyLink {
  position: relative;
  color: #608AFF;
  text-decoration: underline;
  font-size: 14px;
  font-weight: 600;
  max-width: 400px;
  display: block;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-align: left;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#drip-feed span#dripFeedCopy {
  position: relative;
  border: 1px solid #608AFF;
  background-color: #fff;
  padding: 6px 5px;
  margin-left: 10px;
  z-index: 0;
  border-radius: 3px;
  color: #608AFF;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  cursor: pointer;
}
#drip-feed .dripFeedTitle.active span#dripFeedcopyLink {
  color:#fff;
}
@media (max-width:1750px) {
  #drip-feed span#dripFeedcopyLink {
    max-width:300px;
  }
}
@media (max-width:1550px) {
  #drip-feed span#dripFeedcopyLink {
    max-width:200px;
  }
}
#drip-feed div.dripFeedService {
  text-align: left;
  display: table-cell;
  vertical-align: middle;
  width: 26%;
}
#drip-feed div.dripFeedStatusJJin {
  display: table-cell;
  vertical-align: middle;
  width: 10%;
  text-align: left;
}
#drip-feed div.dripFeedTitleServiceBox {
  display: flex;
  gap: 100px;
  align-items:center;
}
#drip-feed div.dripFeedList strong.dripFeedList {
  color:#fff;
  font-size:12px;
  padding:3px 5px 2px;
  border-radius:3px;
  background-color: #253858;
  display: inline-flex;
  align-items:center;
  justify-content: end;
  height: 23px;
}
/* 완료됨 */
#drip-feed div.dripFeedList strong.dripFeedList.blue {
  background-color:#253858;
}
/* 취소됨 */
#drip-feed div.dripFeedList strong.dripFeedList.red {
  background-color:#D92F0E;
}
/* 대기중 */
#drip-feed div.dripFeedList strong.dripFeedList.yellow {
  background-color:#9F9F9F;
}
/* 진행중 */
#drip-feed div.dripFeedList strong.dripFeedList.green {
  background-color:#608AFF;
}
/* 일부완료됨 */
#drip-feed div.dripFeedList strong.dripFeedList.Orange {
  background-color:#FDA412;
}
/* 처리중 */
#drip-feed div.dripFeedList strong.dripFeedList.purple {
  background-color:#B512FD;
} 

#drip-feed div.dripFeedStatus {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  width: 10%;
}

#drip-feed div.dripFeedContents {
  background: #fff;
  line-height: 24px;
  color: #222;
  border-top: 0;
  padding: 4px 0 0;
  overflow: hidden!important;
  opacity: 0;
  height: 0;
  transition: linear .3s;
}
#drip-feed div.dripFeedContents.active {
  overflow: visible;
  opacity: 1;
  height: 270px;
  max-height: 100%;
  margin-bottom: 5px;
}
#drip-feed div.dripFeedContents strong {
  color: #5D5D5D;
  font-size: 12px;
  font-weight: 600;
}
#drip-feed div.dripFeedContents strong.dripFeed_Service {

}
@media (max-width:400px) {
  #drip-feed div.dripFeedContents strong.dripFeed_Service {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width:360px) {
  #drip-feed div.dripFeedContents strong.dripFeed_Service {
    width:170px;
  }
}
#drip-feed div.dripFeedContents ul {
  border: 1px solid #ddd;
  background: #E6EFFC;
  padding: 8px 16px 8px;
}
#drip-feed div.dripFeedContents ul li {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}
#drip-feed a#dripFeedCopy_Link {
  position: relative;
  color: #608AFF;
  text-decoration: underline;
  font-size: 14px;
  font-weight: 600;
  max-width: 600px;
  display: block;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-align: left;
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width:1100px) {
  #drip-feed a#dripFeedCopy_Link {
    max-width:400px;
  }
}
@media (max-width:850px) {
  #drip-feed a#dripFeedCopy_Link {
    max-width:200px;
  }
}
@media (max-width:360px) {
  #drip-feed a#dripFeedCopy_Link {
    max-width:100px;
  }
}
#drip-feed span#dripFeedCopy2 {
  position: relative;
  border: 1px solid #608AFF;
  background-color: #fff;
  padding: 6px 5px;
  margin-left: 10px;
  z-index: 0;
  border-radius: 3px;
  color: #608AFF;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  display: flex; 
  align-items: center;
  cursor: pointer;
}
#drip-feed div.dripFeedContents ul li {}

@media (max-width:1750px){
  #drip-feed div.dripFeedListWrapper div.dripFeedList div.dripFeedTitle div.dripFeedDate {
    width:30%;
  }
}
@media (max-width:1750px) {
  #orders div.orderList div.orderDate {
    width:30%;
  }
}
@media (max-width:1750px) {
  /* orders */
  #orders div.orderList div.orderDate span#copyLink {
    max-width:300px;
  }

  #orders div.orderList div.orderService {
    width:25%;
  }
  #orders div.orderList div.orderStatusJJin {
    width:10%;
    text-align:center;
  }
  #orders div.orderList div.orderStatus {
    width:15%;
  }
  #orders div.orderList div.orderTitle::after {
    width:auto;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
  }
  /* drip-feed */

  #drip-feed div.dripFeedService {
    width:25%;
  }
  #drip-feed div.dripFeedStatusJJin {
    width:10%;
    text-align:center;
  }
  #drip-feed div.dripFeedStatus {
    width:15%;
  }

}

@media (max-width:1550px) {
  #orders div.orderList div.orderDate span#copyLink {
    max-width:200px;
  }
  #orders div.orderTitleServiceBox {
    text-align:left;
  }
}
@media (max-width:1300px) {
  #orders div.orderList div.orderDate span#copyLink {
    max-width:500px;

  }
  #orders div.orderList div.orderTitle {
    display:flex;
    flex-direction:column;
    height:auto;
    padding: 13px 50px 13px 20px;
    gap: 6px;
  }
  #orders div.orderList div.orderId {
    width:100%;
    padding-left:0;
    flex:initial;
    width:100%;
    text-align:left;
  }
  #orders div.orderList div.orderDate {
    width: 100%;
    flex: initial;
  }
  #orders div.orderList div.orderService {
    width: 100%;
    flex: initial;
  }
  #orders div.orderList div.orderStatusJJin {
    width: 100%;
    flex: initial;
    text-align: left;
  }
  #orders div.orderList div.orderStatus {
    width:100%;
    flex:initial;
    text-align: left;
  }
  #drip-feed div.dripFeedListWrapper div.dripFeedList div.dripFeedTitle {
    display:flex;
    flex-direction:column;
    height:auto;
    padding: 13px 50px 13px 20px;
    gap: 6px;
  }
  #drip-feed div.dripFeedListWrapper div.dripFeedList div.dripFeedTitle div.dripFeedId {
    width:100%;
    padding-left:0;
    flex:initial;
    width:100%;
    text-align:left;
  }
  #drip-feed div.dripFeedListWrapper div.dripFeedList div.dripFeedTitle div.dripFeedDate {
    width: 100%;
    flex: initial;
  }
  #drip-feed div.dripFeedService {
    width: 100%;
    flex: initial;
    text-align:left;
  }
  #drip-feed div.dripFeedStatusJJin {
    width: 100%;
    flex: initial;
    text-align: left;
  }
  #drip-feed div.dripFeedStatus {
    width: 100%;
    flex: initial;
    text-align: left;
  }
  #subscriptions .wrapper .subscriptionWrapper div.subscriptionList div.subscriptionTitle {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 13px 50px 13px 20px;
    gap: 6px;
  }
  #subscriptions .wrapper .subscriptionWrapper div.subscriptionTitle div.subscriptionId {
    padding-left: 0;
    flex: initial;
    width: 100%;
    text-align: left;
  }
  #subscriptions .wrapper .subscriptionWrapper div.subscriptionTitle div.subscriptionDate {
    width: 100%;
    flex: initial;
    text-align:left;
  }
  #subscriptions div.subscription_Service {
    width: 100%;
    flex: initial;
    text-align:left;
  }
  #subscriptions div.subscription_Status_JJin {
    width:100%;
    flex:initial;
    text-align:left;
  }
  #subscriptions .wrapper .subscriptionWrapper div.subscriptionTitle div.subscriptionStatus {
    width:100%;
    flex:initial;
    text-align:left;
  }
  #subscriptions .wrapper .subscriptionWrapper .subscriptionTitle::after {
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    right: 13px;
  }
}
@media (max-width:970px) {
  #orders div.orderList div.orderDate span#copyLink {
    max-width:300px;

  }

}
@media (max-width:768px){
  #orders a.orderLinkCopy {
    position: relative;
    color: #608AFF;
    text-decoration: underline;
    font-size: 14px;
    font-weight: 600;
    max-width: 300px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-align: left;
  }
  #drip-feed a#dripFeedCopy_Link {
    position: relative;
    color: #608AFF;
    text-decoration: underline;
    font-size: 14px;
    font-weight: 600;
    max-width: 300px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-align: left;
  }
}
@media (max-width:500px) {
  #orders div.orderList div.orderDate span#copyLink {
    max-width:200px;

  }
  #orders a.orderLinkCopy {
    max-width:200px;
  }
  #drip-feed a#dripFeedCopy_Link {
    max-width:200px;
  } 
}
@media (max-width:400px) {
  #subscriptions .wrapper .subscriptionWrapper .subscriptionTitle::after {
    right: 0;
  }
  #subscriptions .wrapper .subscriptionWrapper div.subscriptionTitle div.subscriptionId strong {
    font-size:12px!important;
  }
  #subscriptions .wrapper .subscriptionWrapper div.subscriptionTitle div.subscriptionDate strong.subscription_link {
    font-size:12px!important;
  }
  #drip-feed .orderTitleServiceBox strong {
    font-size:12px!important;
  }
  #subscriptions .subscription_serviceBox strong {
    font-size:12px!important;
  }

  #subscriptions .wrapper .subscriptionWrapper div.subscriptionTitle div.subscriptionStatus strong {
    font-size:12px!important;
  }

  #orders a.orderLinkCopy {
    max-width:100px;
  }
  #drip-feed a#dripFeedCopy_Link {
    max-width:100px;
  }
}
@media (max-width:375px) {
  #orders div.orderList div.orderDate span#copyLink {
    max-width:150px;
  }
  #drip-feed span#dripFeedcopyLink {
    max-width:150px;
  }
}
@media (max-width: 768px) {
  #subscriptions strong.subscription_service {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #orders div.orderHistoryWrapper div.filterWrapper>div {
    width:100%;
    max-width:100%;
  }
  #orders .orderHistoryWrapper select {
    width:100%;
    max-width:100%;
  }
}
@media (max-width:330px){
  #subscriptions strong.subscription_service {
    width:150px;
  }
  #orders div.orderList div.orderDate span#copyLink {
    max-width:130px;
  }
  #drip-feed span#dripFeedcopyLink {
    max-width:130px;
  } 
}
@media (max-width:310px) {
  #drip-feed span#dripFeedcopyLink {
    max-width:100px;
  }
}
@media (max-width:303px) {
  #orders div.orderList div.orderDate span#copyLink {
    max-width:110px;
  }
}
@media (max-width:290px) {
  #drip-feed div.dripFeedContents strong.dripFeed_Service {
    width:150px;
  }
  #drip-feed a#dripFeedCopy_Link {
    max-width: 90px;
  }
}
@media (max-width:282px) {
  #orders div.orderList div.orderDate span#copyLink {
    max-width:100px;
  }
  #drip-feed span#dripFeedcopyLink {
    max-width:100px;
  }
}

/* 자동주문 */
#subscriptions {
  width: 100%;
}
#subscriptions form {
  margin-bottom:0;
}
#subscriptions .wrapper {
  background-color: #fff;
}

#subscriptions .wrapper .subscriptionWrapper {
  height: auto;
  padding: 30px 0;
  margin-bottom: 60px;
  margin-left: 32px;
  margin-right: 56px;
}
#subscriptions .wrapper .subscriptionWrapper div.subscriptionList {
  max-width: 100%;
  margin: 0;
  width: 100%;
  display: table;
  border-collapse: collapse;
  border: none;
  table-layout: fixed;

}
/* subscription title */
#subscriptions .wrapper .subscriptionWrapper div.subscriptionList div.subscriptionTitle {
  display: table;
  background-color: #fff;
  padding: 13px 25px;
  height: 70px;
  cursor: pointer;
  position: relative;
  align-items: center;
  border: 1px solid #ddd;
  width: 100%;
  margin: auto;
  text-align: center;
}


#subscriptions .wrapper .subscriptionWrapper div.subscriptionList div.subscriptionTitle.active {
  background-color: #0067CE;
}
#subscriptions .wrapper .subscriptionWrapper div.subscriptionList div.subscriptionTitle.active strong {
  color:#fff!important;
}
#subscriptions .wrapper .subscriptionWrapper div.subscriptionList div.subscriptionTitle.active span {
  color:#fff;
  font-size: 14px;
}
#subscriptions .wrapper .subscriptionWrapper div.subscriptionList div.subscriptionTitle.active::after {
  color:#fff!important;
}
#subscriptions .wrapper .subscriptionWrapper div.subscriptionTitle div.subscriptionId {
  max-width: 100%;
  display: table-cell!important;
  vertical-align: middle;
  text-align: left;
  padding-left: 24px;
  width: 15%;
}
#subscriptions .wrapper .subscriptionWrapper div.subscriptionTitle div.subscriptionId strong + strong {
  color: #9F9F9F;
  margin-left: 8px;
  font-size: 14px;
  padding-left: 0;
}
#subscriptions .wrapper .subscriptionWrapper div.subscriptionTitle div.subscriptionDate {
  max-width: 100%;
  display: table-cell;
  vertical-align: middle;
  width: 20%;
}
#subscriptions div.subscription_Service {
  text-align: left;
  display: table-cell;
  vertical-align: middle;
  width: 30%;
  font-size: 14px;
}
#subscriptions div.subscription_Status_JJin {
  display: table-cell;
  vertical-align: middle;
  width: 15%;
  text-align: center;
}
#subscriptions .wrapper .subscriptionWrapper div.subscriptionTitle div.subscriptionDate div.sub_flex {
  display:flex;
  align-items:center;
  gap:10px;
}
#subscriptions .wrapper .subscriptionWrapper div.subscriptionTitle div.subscriptionDate strong.subscription_link {
  position: relative;
  color: #608AFF;
  text-decoration: underline;
  font-size: 14px;
  font-weight: 600;
}
#subscriptions .wrapper .subscriptionWrapper span#subscriptionCopy {
  position: relative;
  border: 1px solid #608AFF;
  background-color: #fff;
  padding: 4px 5px;
  z-index: 0;
  border-radius: 3px;
  color: #608AFF;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  cursor: pointer;
  line-height: 1;
  height: 25px;
}

#subscriptions .wrapper .subscriptionWrapper div.subscriptionTitle div.subscriptionStatus {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  width: 15%;
}
/* 상태 */
#subscriptions strong.subscriptionList {
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  color: #fff!important;
  padding: 2px 5px;
  display: inline-flex;
  align-items: center;
  height: 20px;
  line-height: 1;
}
#subscriptions div.subscriptionContents strong.subscriptionsList {
  font-size: 12px;
  padding: 6px 9px;
  color:#fff;
}
/*만료됨*/
#subscriptions strong.subscriptionList.gray {
  background-color:#9F9F9F;
}
/* 활성화됨 */
#subscriptions strong.subscriptionList.green {
  background-color:#BC07FF;
}
/* 취소됨 */
#subscriptions strong.subscriptionList.red {
  background-color:#D92F0E;
}
/* 완료됨 */
#subscriptions strong.subscriptionList.blue {
  background-color:#253858;
}
/* 일시정지됨 */ 
#subscriptions strong.subscriptionList.purple {
  background-color:#806859;
}

/* subscription contents */
#subscriptions .wrapper .subscriptionWrapper div.subscriptionContents {
  background: #fff;
  line-height: 24px;
  color: #222;
  border-top: 0;
  padding: 4px 0 0;
  overflow: hidden!important;
  opacity: 0;
  height: 0;
  transition: linear .3s;
}
#subscriptions .wrapper .subscriptionWrapper div.subscriptionContents ul {
  border: 1px solid #ddd;
  background: #E6EFFC;
  padding: 8px 16px 8px;
}
#subscriptions .wrapper .subscriptionWrapper div.subscriptionContents ul>li {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}
#subscriptions .wrapper .subscriptionWrapper div.subscriptionContents ul>li strong {
  color: #5D5D5D;
  font-size: 12px;
  font-weight: 600;
}
#subscriptions span#subscriptionCopy2 {
  position: relative;
  border: 1px solid #608AFF;
  background-color: #fff;
  padding: 4px 5px;
  z-index: 0;
  border-radius: 3px;
  color: #608AFF;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  cursor: pointer;
  line-height: 1;
  height: 25px;
}
#subscriptions .wrapper .subscriptionWrapper div.subscriptionContents.active {
  overflow: visible;
  opacity: 1;
  height: 277px;
  max-height: 100%;
  margin-bottom: 5px;
}
#subscriptions .wrapper .subscriptionWrapper .subscriptionTitle::after {
  font-size: 20px;
  font-family: xeicon!important;
  content: "\e942";
  transition: all 0.2s ease-in-out;
  transform: rotate(0deg);
  color: #222;
  display: table-cell!important;
  vertical-align: middle!important;
}
/* 자동주문 - 검색 filter */
#subscriptions div.filterWrapper {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  background: #F4F5F7;
  height: 64px;
  padding: 0 4px;
  gap: 11px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
}
#orders select,
#drip-feed select,
#subscriptions select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background-color: #fff;
  width: 156px;
  max-width: 100%;
  height: 34px;
  border-radius: 4px;
  border: none;
  padding-left: 11px;
  color: #9F9F9F;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  color: #5D5D5D;
}
@media (max-width:768px) {
  #orders select,
  #drip-feed select,
  #subscriptions select {
    width:120px;
  }
}
#subscriptions .input-group {
  position: relative;
  display: table;
  border-collapse: separate;
  width: auto;
}
#subscriptions .input-group-btn {
  z-index: 9;
  position: relative;
  font-size: 0;
  white-space: nowrap;
  width: 100%;
  max-width: 49px;
  background-image: url(https://storage.perfectcdn.com/7mcojg/wg1gqtjxsupdhwht.png);
  background-position: center center;
  width: auto;
  background-repeat: no-repeat;
}
#subscriptions table thead {
  border-top: 2px solid #008BFF;
  border-bottom: 1px solid #008BFF;
}

#subscriptions .table > thead > tr > th {
  text-align: center;
  border-bottom: 1px solid #008BFF;
}
#subscriptions  .table > tbody > tr > td {
  text-align: center;
} 
#subscriptions tr:nth-child(even) {
  background-color:#F2FCFF;
}

#subscriptions .btn-xs, .btn-group-xs > .btn {
  height: auto;
  padding: 4px 9px 2px!important;
  font-size: 14px;
  border-radius: 5px!important;
  color: #fff;
  background-color: #608AFF!important;
  line-height: 1.6;
  border: 1px solid #608aff;
}
#subscriptions .table > tbody > tr > td:last-child {
  padding: 10px;
}
#subscriptions .btn-xs:hover {
  background-color: #008BFF!important;
}
#subscriptions .btn-primary {
  color: #fff;
  background-color: #000;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  outline: none;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 3px!important;
  height: 20px;
}

#subscriptions .btn-default.cancel {
  background-color: #fff !important;
  border-left: 1px solid;
  border-color: #000 !important;
  color: #000;
}


#subscriptions .btn-default.cancel:hover {
  background:#000!important;
  color: #fff;
}



#subscriptions .input-group .form-control:first-child {
  border-radius: 20px 0 0 20px;
  border-right: none;
}
#subscriptions .btn-default {
  border-radius: 0 20px 20px 0;
  background-color: #fff;
  border-right: 1px solid #DBDBDB!important;
  border-top: 1px solid #DBDBDB!important;
  border-bottom: 1px solid #DBDBDB!important;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  padding: 9px 18px;
}
#subscriptions button.btn {  
  border-radius: 0;
  border: none!important;
  padding: 0px 18px;
  background-image: none;
  height: 34px!important;
  width: 36px;
  display: flex;
  align-items: center;
  box-shadow: none!important;
  background: transparent!important;
  display: flex;
  align-items: center;
  box-shadow: none!important;
}
#subscriptions .input-group .form-control {
  max-width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  height: 34px;
  padding: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: #9F9F9F;
  width: 152px;
}

#subscriptions .btn-default {
  background-color: #fff !important;
  border-left: 1px solid;
  border-color: #000 !important;
  color: #000;
  font-size: 12px;
  border-radius: 3px!important;
  padding: 3px 10px 2px!important;
  line-height: 1.6;
}

#subscriptions div.orderHistoryWrapper div.filterWrapper div.statusButtonWrapper div.statusButton {
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 10px 22px;
  cursor: pointer;
}

#subscriptions i {
  color: #AFAFAF;
  font-size: 20px;
}

/* 포인트 충전 */
#addfunds {
  width: 100%;
  margin-bottom: 40px;
}
#addfunds div.wrapper {margin-right: 60px;}

#addfunds div.wrapper #payment small {
  font-size:11px;
  font-weight:500;
}
#addfunds section+section {
  margin-top: 16px;
  margin-bottom: 60px;
}

#addfunds section div.contentsBox {
  padding: 30px 32px 40px 32px;
}
#addfunds section div.contentsBox:nth-child(2){
  padding:0;
}
#addfunds section div.contentsBox:nth-child(2) .title {
  padding: 32px 0 12px 32px;
}

#addfunds section div.contentsBox:nth-child(2) .table > thead > tr > th {
  vertical-align: bottom;
  border-top:1px solid #008BFF;
  border-bottom: 1px solid #008BFF;
  text-align: center;
  border: none;
}
#addfunds section div.contentsBox:nth-child(2) .table > thead > tr {

}
#addfunds section div.contentsBox:nth-child(2) .table > thead > tr > th:nth-child(1){
  width:16%
}
#addfunds .table {
  text-align:center
}
#addfunds tbody tr {
  border:1px solid #ddd;
}
#addfunds div.contentsBox div.historyWrapper div.paymentChargeContents {
  display: inline-flex;
  background: #608AFF;
  align-items: center;
  justify-content: center;
  padding: 3px 15px;
  font-size: 14px;
  color: #fff;
  border-radius: 3px;
}
#addfunds section div.contentsBox+div.contentsBox {
  /* margin-left: 16px; */
}

#addfunds section div.contentsBox p.title.smallTitle {
  font-size: 20px;
  color: #5D5D5D;
  font-weight: 600!important;
  margin-bottom: 20px;
  text-align: left;
}
#addfunds section div.contentsBox div.paymentWrapper p.title {
  font-size: 14px;
  color: #3B3B3B;
  font-weight: 600;
}


/* 포인트 충전 - 안내 */
#addfunds section div.contentsBox p.description {
  /* font-size: 14px; */
}

#addfunds section div.contentsBox p.description+p.description {
  margin-top: 4px;
}

/* 포인트 충전 - 충전 & 내역 */
#addfunds section.bottomSection {
  display: flex;
}

#addfunds section.bottomSection div.contentsBox {
  flex: 1;
  height: auto;
  padding-bottom:5px;
}

/* 포인트 충전 - 충전*/
#addfunds section.bottomSection div.contentsBox div.methodWrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}
#addfunds section.bottomSection div.contentsBox:nth-child(1) {

}
#addfunds section.bottomSection div.contentsBox:nth-child(2) {
  height: auto;
  margin-top: 28px;
  /* margin-right: 40px; */
  background-color: #F4F5F7;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  padding-bottom: 5px;
}
#addfunds section.bottomSection div.contentsBox:nth-child(2) tr:nth-child(even) {
  background-color:#fff;
}
#addfunds section.bottomSection div.contentsBox:nth-child(2) .table > tbody > tr > td {
  padding: 10px 8px;
  border: none;
  font-size: 14px;
  vertical-align: middle;
}
#addfunds section.bottomSection div.contentsBox:nth-child(2) tbody div.paymentLoopIndex {
  display: inline-flex;
  padding: 0px 5px;
  background: #608AFF;
  color: #fff;
  font-size: 11px;
  text-align: center;
  border-radius: 2px;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  line-height: 1;
}
.nowrap {
  white-space: inherit!important;
  font-size: 12px;
}
#addfunds section.bottomSection div.contentsBox div.methodWrapper+div.methodWrapper {
  margin-left: 16px;
}

#addfunds section.bottomSection div.contentsBox div.methodWrapper div.methodBox {
  display: flex;
  align-items: center;
  border-radius: 15px;
  cursor: pointer;
  margin-bottom: 20px;
  height: 90px;
  max-height: 90px;
  width:100%;
  position:relative;
  color:white;
}

#addfunds section.bottomSection div.contentsBox div.methodWrapper div.methodBox {
  background:#1e3069;
}
#addfunds section.bottomSection div.contentsBox div.methodWrapper div.methodBox:nth-child(2n) {
  background: linear-gradient(to right, #1e3069, 50%, #6cc4db);
}

#addfunds section.bottomSection div.contentsBox div.methodWrapper div.methodBox.active {
  background: #0067CE;
}
#addfunds section.bottomSection div.contentsBox div.methodWrapper div.methodBox.active p.methodName {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
}
#addfunds section.bottomSection div.contentsBox div.methodWrapper div.methodBox+div.methodBox {
}
/*paypal radio 제거 */
#addfunds .methodBox.paypal .form-group {
  display:none;
}
#addfunds section.bottomSection div.contentsBox div.methodWrapper div.icon {

}
#addfunds section.bottomSection div.contentsBox div.methodWrapper div.icon img {
  width:100%;
}

#addfunds section.bottomSection div.contentsBox div.methodWrapper .methodBox:nth-child(2) .icon img {
  width: 81%;
  padding-left: 20px;
}
#addfunds section.bottomSection div.contentsBox div.methodWrapper p.methodName {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  position:relative;
  left:10%;
}

/* 자동주문 - 공지사항 */

#addfunds .autoDescriptionWrapper strong {
  display:inline;
  font-size: 14px;
  font-weight: 500;
  color: #000;
}
#addfunds .autoDescriptionWrapper .idStrong {
  font-weight:700;
  font-size:15px;
}
#addfunds span.idSpan1 {
  padding-bottom: 7px;
  display: block;
}
#addfunds span.idSpan2 {
  display: block;
  padding-bottom: 7px;
}
#addfunds .autoDescriptionWrapper i {
  display: flex;
  padding-top: 4px;
  padding-right: 10px;
  color: #000;
}
@media (max-width:1300px) {
  #addfunds div.wrapper {
    padding-left: 30px;
    margin-top: 30px;
    margin-right: 30px;
  }
  /* 주문 페이지 */
  #addfunds section.bottomSection {
    display:block;
  }
  #addfunds section.bottomSection div.contentsBox:nth-child(1) {
    /* height:auto; */
    padding: 0;
  }
  #addfunds section.bottomSection div.contentsBox div.methodWrapper div.methodBox {
    height:auto;
  }
  #addfunds section div.contentsBox+div.contentsBox {
    margin-left: 0;
    margin-top: 16px;
  }
}
@media (max-width:768px) {
  #addfunds div.wrapper {
    margin:0;
    padding:0;
  }
  /* 주문페이지 - 포인트충전 page */
  #addfunds {
    padding: 14px 16px 50px!important;
  }
  body #wrapper .wrapper {
    padding-left:0;
    width:100%;
    overflow:scroll;
  }

  #addfunds section div.contentsBox p.title {
    font-size:20px;
  }
  #addfunds section div.contentsBox {
    padding: 29px 12px 40px 12px;
    margin-bottom:28px;
  }
  #addfunds section div.contentsBox+div.contentsBox {
    margin-left:0;
  }
  #addfunds section.bottomSection {
    display: block;
  }
  #addfunds section.bottomSection div.contentsBox div.methodWrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin-bottom: 14px;
  }
  #addfunds section.bottomSection div.contentsBox div.methodWrapper div.methodBox {

    margin-bottom: 0;

  }
  #addfunds section.bottomSection div.contentsBox {
    height:100%!important;
  }
  #addfunds section.bottomSection div.contentsBox div.methodWrapper .methodBox:nth-child(2) .icon img {
    width: 75%;
    padding-left:0;
  }
  #addfunds section div.contentsBox:nth-child(2) .table > thead > tr > th {
    font-size:12px;
    width: 16%;
  }

  #addfunds section.bottomSection div.contentsBox div.methodWrapper div.icon {
    vertical-align: middle;
    text-align: center;
  }
  #addfunds section.bottomSection div.contentsBox div.methodWrapper p.methodName {
    font-size: 20px;
    font-weight: 700;
    color: white;
  }
  #addfunds section.bottomSection div.contentsBox div.methodWrapper div.methodBox+div.methodBox {
    margin-left:0;
  }
}
.btn-primary:hover {
  color: #ffffff;
  background-color: #008BFF;;
  border-color: #008BFF;;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #ffffff;
  background-color: #008BFF;;
  border-color: #008BFF;;
}

/* 포인트 충전 - 내역*/
#addfunds section.bottomSection div.contentsBox div.historyWrapper {
  width: 100%;
  max-width: 94%;
  margin: auto;
  background: #fff;
  margin-top: 15px;
}
#addfunds thead {
  background:#F4F5F7;
}
#addfunds wrapper {
  margin-top:56px;
}
/* 포인트 충전 - 추천인 */

.table > thead > tr > th {font-size: 14px;color: #5D5D5D;font-weight: 600;border-bottom: none;}
.well {
  padding: 19px;
  background-color: #F4F5F7;
  border-radius: 5px;
  margin-top: 28px;
  flex: 1;
  width: 100%;
  border: none;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
}

/* 포인트 충전 - 결제창 */
#payment {

}
#payment input:hover {
  background-color:#E6EFFC;
}
/* 타이틀 */
#payment div.paymentWrapper div.titleFlexWrapper {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-bottom: 2px;
}
#payment div.paymentWrapper strong.paymentTitle {
  font-size: 19px;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  margin-top: 50px;
  display:none;
}
#payment div.paymentWrapper div.titleFlexWrapper p.title {
  font-size: 14px;
  color: #3B3B3B;
  font-weight: 600;
  margin: 0;
}
#payment div.paymentWrapper div.titleFlexWrapper span.titleVat {
  font-size: 11px;
  color: #9F9F9F;
  font-weight: 600;
}
/* 신용카드 일때 숨기기 */
#payment div.cardNone {
  display:none;
  margin-top: 20px;
}

#payment p.title {
  text-align: center;
  margin-bottom: 25px;
  color: #1C3B55;
  font-size: 18px;
  font-weight: 600;
}

/* 이미지 크롭 */
#payment img.imgCrop {
  margin: 28px 0 24px;
  width:100%;
}
/* 포인트 충전 - 결제창 - 충전금액 */
#payment div.paymentDescription {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  gap:12px;
}
#payment div.addfunds_receiptWrapper {
  margin-top: 12px;
  display: none;
}

p.addfunds_inputWrapper_title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #3b3b3b;
  margin-bottom: 2px;
}
div.addfunds_receiptInputWrapper {
  margin-top: 12px;
}
div.addfunds_requiredInputWrapper {
  margin-bottom: 20px;
}

div.addfunds_inputWrapper {
  width: 100%;
}

div.addfunds_inputWrapper ~ div.addfunds_inputWrapper {
  margin-top: 12px;
}

div.addfunds_receiptButtonWrapper {
  display: flex;
  align-items: center;
  gap: 9px;
}

div.addfunds_receiptButton {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 100%;
  height: 38px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 13px;
  color: #5d5d5d;
  line-height: 1;
  cursor: pointer;
}
div.addfunds_receiptButton.active {
  background: #0067ce;
  border-color: #0067ce;
  color: #fff;
}
#addfunds .autoDescriptionWrapper {
  position: relative;
  background-color: #F4F5F7;
  border-radius:5px;
  padding: 18px 19px;
  display: none;
  flex: 1;
  width: 50%;
  max-width: 49%;
}
#addfunds .autoDescriptionWrapper p.autoTitle {
  color:#5d5d5d;
  margin-bottom:15px;
  font-size:13px;
  font-weight:600;
}
#addfunds .autoDescriptionWrapper 
#addfunds .autoDescriptionWrapper>p {color:#5D5D5D}
#addfunds .autoDescriptionWrapper>div {
  background-color:#fff;
  border:1px solid #D8D8D8;
  padding:16px;
}
#addfunds .autoDescriptionWrapper div.autoContents  {
  display:flex;
}
#addfunds .autoDescriptionWrapper div.autoContents p {
  color:#5D5D5D;
  font-size:13px;
}
#payment div.paymentDescription div.paymentFlexWrapper {
  width: 50%;
  max-width:50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex:1;
}
/* 충전 금액 */
#payment div.paymentDescription div.paymentFlexWrapper div.paymentChargeContents {
  display:flex;
  justify-content:space-between;
  width:100%;
  padding-bottom: 10px;
}
#payment div.paymentDescription div.paymentFlexWrapper div.paymentChargeContents p {
  color: #5D5D5D;
  font-size: 12px;
  font-weight: 600;
}
/* vat */
#payment div.paymentDescription div.paymentFlexWrapper div.paymentVatContents {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 12px;
}
#payment div.paymentDescription div.paymentFlexWrapper div.paymentVatContents p {
  color: #5D5D5D;
  font-size: 12px;
  font-weight: 700;
}

/* 총 결제 금액 */
#payment div.paymentDescription div.paymentFlexWrapper div.paymentTotalContents {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 0px;
}
#payment div.paymentDescription div.paymentFlexWrapper div.paymentVatContents::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -16px;
  width: 100%;
  height: 1px;
  background-color: #253858;
}
#payment div.paymentDescription div.paymentFlexWrapper div.paymentTotalContents strong {
  font-size: 20px;
  font-weight: 700;
  color: #000;
}
#payment div.paymentChargeWrapper {
  display: flex;
  gap: 12px;
}
#payment input#amount {
  background: #E6EFFC;
  display: flex;
  position: relative;
  align-items: center;
  flex: 1;
  border: 1px solid #ddd;
  padding: 6.5px;
  border-radius: 5px;
  font-size: 15px!important;
  padding-left: 12.5px;
}
#payment input#amount:focus {
  box-shadow:none;
}
#payment input#amount::placeholder {
  font-size:15px!important;
}
#payment .paypalPriceWrapper {
  display:none;
  flex: 1;
  position:relative;
}
#payment .paypalPriceWrapper .deleteButton {
  position: absolute;
  top: 54%;
  right: -4px;
  transform: translate(-50%, -50%);
}
#payment .paypalPriceWrapper i.xi-close-circle-o {
  color: #5D5D5D;
  font-size: 23px;
  cursor: pointer;
}
#payment div.priceWrapper {
  display: flex;
  align-items: center;
  flex: 1;
}

#payment div.priceWrapper div.priceBox {
  background: #E6EFFC;
  display: flex;
  position: relative;
  align-items: center;
  flex: 1;
  border: 1px solid #ddd;
  padding: 6.5px;
  border-radius: 5px;
  height: 38px;
}

#payment div.priceWrapper div.priceBox p.price {
  font-size: 15px;
  color: #9F9F9F;
  margin-left: 6px;
  font-weight: 500;
}
@media (max-width:768px){
  #payment div.priceWrapper div.priceBox p.price {
    font-size:12px;
  }
}
#payment div.priceWrapper div.priceBox p.price.on {
  color:#484848;
}

#payment div.priceWrapper div.priceBox p.border {
  display:block;
  background-color:#9F9F9F;
  width:100%;
  height:1px;
  position:absolute;
  bottom:0;
  margin-bottom:-10px
}

#payment div.priceWrapper div.deleteButton {
  flex: 0 0 auto;
  cursor:pointer;
  margin-left: auto;
  align-items: center;
} 
#payment div.priceWrapper div.deleteButton i {
  display: flex;
  font-size: 23px;
  justify-content: center;
  align-items: center;
  color:#5D5D5D;
}
#payment div.priceWrapper div.deleteButton i:active {
  color:#008BFF;
}
/* 포인트 충전 - 결제창 - 입금자명 입력 */
#payment div.cardNoneFlexWrapper {
  width: 100%;
  /*display: grid;*/
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
#payment div.userNameWrapper {
  flex: 1;
  width: 100%;
}
/* 포인트 충전 - 현금 영수증 - 세금 계산서 */
#payment div.taxFlexWrapper {
  flex:1;
  width:100%;
}
#payment div.userNameWrapper p.userNameLabel {
  color: #3B3B3B;
  font-size: 14px;
  font-weight: 600;
  /* margin-bottom: 12px; */
  margin-bottom: 2px;
}
#payment div.userNameWrapper span.subTitle {
  color: #ADADAD;
  font-size: 11px;
  font-weight: 500;
  display: block;
  margin-top: 4px;
  margin-bottom: 0;
}
#payment input {
  height: 38px;
  width: 100%;
  border-radius: 5px;
  border: 1px solid #EDEDED;
  font-size: 12px;
  font-weight: 500;
  padding-left: 9px;
  border: 1px solid #ddd;
}
#payment div.userNameWrapper input:focus {
  border: 1px solid #253858;
}
#payment div.userNameWrapper input::placeholder{
  color:#9F9F9F;
  font-weight:500;
  font-size:15px!important;
}

/* 포인트 충전 - 경제창 - 현금영수증/세금계산서 */
#payment div.taxWrapper {
  display:flex;
  gap:9px;
}
#payment div.taxWrapper label {
  display: flex;
  flex: 1;
}
#payment div.taxWrapper label:hover {
  background:#E6EFFC
}
#payment p.taxWrapperTitle {
  color: #3B3B3B;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}
#payment input.inputBox {
  display:none;
}
#payment div.taxWrapper .taxBox.on {
  background-color: #0067CE;
  border: 1px solid #0067CE;
  color: #fff;
}
#payment div.taxInvoiceWrapper {
  /* margin-top:20px; */
}
#payment div.taxWrapper .taxBox {
  height: 38px;
  border: 1px solid #253858;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  color:#5D5D5D;
}
/* 포인트 충전 - 결제창/ 현금영수증 선택 시 ->> 휴대전화번호 */
#payment div.phoneNumberWrapper {
}
#payment div.phoneNumberWrapper input.phoneNumber:focus {
  border: 1px solid #253858;
}
#payment div.phoneNumberWrapper input.phoneNumber {
  width: 100%;
  font-size: 12px;
  height: 38px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding-left: 10px;
  margin-top: 8px;
}
#payment div.phoneNumberWrapper input.phoneNumber::placeholder {
  color:#9F9F9F;
  font-weight:500;
  font-size:15px!important;
}
#payment p.description {
  font-size:11px;
  font-size: 11px;
  font-weight:500;
  color: #ADADAD;
  margin-top: 4px;
  /* margin-bottom:29px; */
}

/* 포인트 충전 - 경제창 - 신용카드 */
#payment div.taxInvoiceWrapper {
}
#payment div.taxInvoiceWrapper div.taxInvoiceRow {
  display: flex;
  gap: 7px;
}
#payment div.taxInvoiceWrapper div.taxInvoiceRow input:focus {
  border: 1px solid #253858;
}
#payment div.taxInvoiceWrapper div.taxInvoiceRow+div.taxInvoiceRow {
  margin-top:7px;
}
#payment div.taxInvoiceWrapper div.taxInvoiceRow input {
  width: 100%;
  height: 38px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding-left: 10px;
  font-size: 12px!important;
  /* font-size: 20px; */
}
#payment input::placeholder {
  font-size:12px!important;
}
#payment div.taxInvoiceWrapper div.taxInvoiceRow:last-child input{
  width:100%;
}
#payment div.taxInvoiceWrapper div.taxInvoiceRow input::placeholder {
  color:#9F9F9F;
  font-weight:500;
  font-size:15px!important;
  line-height:1.5!important;
}
#payment div.taxInvoiceWrapper input::placeholder {
  font-size:15px!important;
}
/* 포인트 충전 - 결제창 - 금액추가버튼 */

#payment div.priceButtonWrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
}

#payment div.priceButtonWrapper div.priceButton {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  flex: 1;
  letter-spacing:-1px;
  height: 38px;
  border: 1px solid #ddd;
  letter-spacing:-1px;
  cursor: pointer;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  color: #253858;
  font-weight: 600;
  text-align: center;
}
#payment div.priceButtonWrapper div.priceButton:hover {
  background-color:#E6EFFC
}
#payment div.priceButtonWrapper div.priceButton:active {
  background-color:#E6EFFC;
  color:#253858;
  border:1px solid#608AFF;
}
#payment div.priceButtonWrapper div.priceButton+div.priceButton {
}

/* 포인트 충전 - 결제창 - 휴대폰입력 */
#payment div.phoneWrapper {
  margin-bottom: 24px;
}

#payment div.phoneWrapper p.phoneTitle {
  font-size: 16px;
  margin-bottom: 4px;
}

#payment div.phoneWrapper input {
  width: 100%;
  height: 36px;
  border: 1px solid #d9d9d9;
  padding: 0 8px;
}

/* 포인트 충전 - 결제창 - 결제버튼 */
#payment button.orderPaypalButton.btn.btn-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 38px;
  border-radius: 5px;
  background-color: #0067CE;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
  opacity:1;
  display:none;
  border-color: #0067CE;
}
#payment button.orderPaypalButton.btn.btn-primary.disabled {
  background-color: #9F9F9F;
  border-color: #9F9F9F;
}
#payment div.paymentButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 38px;
  border-radius: 5px;
  background: #0067CE;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
}
#payment div.paymentButton.disabled {
  background-color:#9F9F9F;
}
#payment div.paymentButton b {
  color: #fff;
  font-weight: 800;
  padding-right: 3px;
}
#payment div.paymentButton div.paymentPrice {
  display: flex;
  align-items: center;
  margin-right: 4px;
}

#payment div.paymentButton div.paymentPrice p {
  color: #FAE300;
}

/* payment-success - 신청완료 팝업창*/

#payment-success {}
#payment-success div.successWrap {}
#payment-success div.successWrap div.succesTop {
  background-color: #E6EFFC;
  padding: 32px 24px;
}
#payment-success div.successWrap div.succesTop p {
  text-align: center;
  color: #5D5D5D;
  font-size: 18px;
  font-weight: 700;
}
#payment-success div.successWrap div.succesContentsTop {
  padding: 32px 24px 24px;
}
#payment-success div.successWrap div.succesContentsTop h3 {
  font-size: 18px;
  color: #1C3B55;
  font-weight: 600;
  color: #5D5D5D;
  margin-bottom: 10px;
}
#payment-success div.successWrap div.succesContentsTop dl {
  width:100%;
}
#payment-success div.successWrap div.succesContentsTop dl::after{
  content: "";
  display: block;
  clear: both;
}

#payment-success div.successWrap div.succesContentsTop dl dt {
  font-size: 15px;
  font-weight: 400;
  line-height: 2.1;
  width: 20%;
  float: left;
  width: 35%;
}
#payment-success div.successWrap div.succesContentsTop dl dd {
  font-size:15px;
  font-weight:700;
  float: right;
  width: 65%;
  line-height: 2.1;
  text-align: right;
}

#payment-success div.successWrap div.succesContentsBottom {
  padding: 32px 24px;
  background-color: #E6EFFC;
}
#payment-success div.successWrap div.succesContentsBottom ul {
  color: #fff;
  font-weight: 500;
}
#payment-success div.successWrap div.succesContentsBottom ul li {
  color: #fff;
  line-height: 1.6;
  color: #5D5D5D;
  font-weight: 500;
}
#payment-success div.successWrap div.succesContentsBottom ul li:before {
  content:'•';
  display:inline-block;
  font-size:15px;
  padding-right:6px
}
#payment-success div.successWrap div.succesContentsBottom ul li.none:before {
  color:transparent;
}
#payment-success div.successWrap div.succesBottom {
  padding: 24px 24px 32px 24px
}
#payment-success div.successWrap div.succesBottom button {
  padding: 0;
  background-color: #253858;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1.2px;
}

#addfunds .tel_description {
  border: 1px solid #E6EFFC;
  margin-top: 60px;
  padding: 20px;
  background-color: #E6EFFC;
  border-radius: 5px;
  display: flex;
  gap: 15px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  flex-direction: column;
  display: none;
}
#addfunds .tel_description .tel_title {
  margin-bottom:10px;
}
#addfunds .tel_description .tel_contents {
  background-color:#fff;
  padding:10px;
  border-radius:2px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
}
#addfunds .tel_title strong {
  color:#222;
  font-size:14px;
}
#addfunds .tel_contents p {
  color:#222;
  font-size:14px;
}
#addfunds .tel_contents  b {
  color:#222;
  font-size:14px;
}
/* faq */

/* FAQ */
#faq {
  width: 100%;
  min-height:100vh;
  height:100%;
  padding: 50px 75px 50px 75px;
}

#faq figure {
  /* padding: 13px 32px; */
  background-color: #FAFAFA;
  margin-bottom: 8px;
  color: #5d5d5d;
  padding: 10px 32px 10px 32px;
  cursor: pointer;
  box-shadow: inset 0 3px 6px #BCBCBC29;
  border-radius: 15px;
  border: 0;
}
#faq .even figure {
  /* margin-right: 40px; */
}
#faq figure.active {
  background-color: #FAFAFA;
  transition: all linear 4s;
  border: navajowhite;
}

figure.active {}
#faq figure.active strong {
  color: #ffffff;
  /* padding: 10px; */
  transition: 0.5s;
  background:#1e3069;
  color: #fff;
}
#faq figure.active div {
  display:block;
  color: #5D5D5D;
  background-color: #E6EFFC;
  /* border-radius: 10px; */
  padding: 14px 16px;
  /* margin-top: 10px; */
  font-size: 13px;
  font-weight: 500;
  transition: linear 0.4s;
  margin-top: 4px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  border: none;
  border-radius: 5px;
}
#faq figure.active span.faqStrong {
  color:#000!important;
  display:block;
  font-size:16px;
  font-weight:500;
  padding-bottom:5px;
}

#faq .even figure strong,
#faq .odd figure strong {
  font-size: 16px;
  /* color: #5D5D5D; */
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  display: block;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 16px;
  transition: 0.5s;
  border-radius: 5px;
} 
#faq .odd {
}
#faq figure div {
  display: none;
}
#faq .even figure strong::after,
#faq .odd figure strong::after {
  content: "\e942";
  display:inline-block;
  font-family: xeicon!important;
  float:right;
  font-size:23px;
}

#faq div.wrapper {
  max-width: 100%;
  padding: 50px;
  background:white;
  height:100%;
  box-shadow:0px 5px 5px rgba(0,0,0,0.3);
}

#faq div.faqTitle {
  display:flex;
  flex-direction:column;
}
#faq div.faqTitle small {
  font-size: 11px;
  font-weight: 600;
  color: #3B3B3B;
}
#faq div.faqTitle strong {
  font-size: 20px;
  color: #5D5D5D;
  font-weight: 700;
  padding-bottom: 20px;
}
#faq div.wrapper div.faqFilterWrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 19px;
}

#faq div.wrapper div.faqFilterWrapper div.faqFilterBox {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  cursor: pointer;
  background-color:#FAFAFA;
  padding: 12px
    font-size: 14px;
  border-radius: 15px;
  color: #5d5d5d;
  font-weight: 600;
  box-shadow:inset 0 3px 6px #BCBCBC29;
}

#faq div.wrapper div.faqFilterWrapper div.faqFilterBox.active {
  background:#1e3069;
  color: white;
  padding:12px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 15px;
  box-shadow:inset 0px 3px 6px #BCBCBC29;
}

#faq div.wrapper div.faqFilterWrapper div.faqFilterBox+div.faqFilterBox {
}

#faq div.wrapper div.faqListWrapper {

}
/*--------------------neworder 반응형 ------------------------*/
@media (max-width:1730px) {
  #neworder #fields div.autoFieldsWrapper {
    display:flex;
    flex-direction:column;
  }
  #neworder section.orderWrapper div.formWrapper div.inputWrapper input {
    max-width: 100%;
  }
  /* 자동주문 - 최소/최대 */
  #neworder #fields div#order_min {
    height: auto;
    padding-bottom: 20px;
  }
  #neworder #order_min input#order_count {
    max-width:100%!important;
    width:100%!important;
    margin-left:0!important;
    /* margin-right: 10px!important; */
  }
  #neworder #fields #order_min div.row {
    display:flex;
    width:100%;
    max-width: 100%;
    margin: auto;
    /* gap: 3px; */
  }
  #neworder #fields div#order_min .col-md-6{
    margin-left: 0;
    margin-right: 10px;
  }
  #neworder #fields div#order_min .col-md-6 + .col-md-6 {
    margin-left:0;
    margin-right:0;
  }
  /* 게시물 발행 작업 시간 */
  #neworder #field-orderform-fields-delay {
    max-width: 100%;
  }
}
@media (max-width:1530px) {
  #neworder section.orderWrapper div.tabWrapper {
    flex-wrap : wrap;
    padding-bottom:12px;
  }
  #neworder .autoDescriptionWrapper {
    position:relative;
    margin-top:16px;
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
}
@media (max-width:1400px) {
  #neworder div.wrapper {
    display: block;
    /* margin-left: 0; */
  }
  /* 서비스 종류 선택 padding-left */
  #neworder section.orderWrapper div.inputWrapper div#services {
    padding-left: 0;
  }
  #neworder section {
    padding:2px 29px 24px 32px;
  }
  #neworder section.orderWrapper {
    height: 100%;
    position: relative;
    max-width: 100%;
    width: 100%;

  }
  /* min,max */
  #neworder #fields div#order_min .col-md-6 {
    margin-left: 0;
    margin-right: 10px;
    width: 100%;
    /* margin: auto; */
  }
  #neworder #fields div#order_min .col-md-6+ .col-md-6 {
    margin-right:0;
  }
  /* 주문탭 오른쪽 section */
  #neworder div.rightWrapper {
    padding-left:32px;
    max-width:100%;
    margin-right: 29px;
  }
  #neworder div.rightWrapper section.counterWrapper {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 32px 0 32px 0;
  }
  #neworder div.rightWrapper section.counterWrapper div.counterBox {
    width:auto;
  }
  #neworder section.orderWrapper div.formWrapper div.inputWrapper+div.inputWrapper .moveDiv {
    display: inline-flex;
    padding: 2px 5px 1px;
    align-items: center;
    font-weight: 600;
    border-radius: 3px;
    margin: 0;
  }

  #neworder .help-block {
    margin-bottom: 5px!important;
    padding-left: 3px;
  }
  #neworder select#field-orderform-fields-delay {
    margin-bottom:15px;
    max-width: 100%;
  }

}
@media (max-width:1000px) {
  #neworder #fields div.autoFieldsWrapper {
    display:flex;
    flex-direction:column;
  }

}
@media (max-width: 768px){
  #sideMenu {
    display: none;
  }
  header.authHeader div.confirmBottomDiv.pc {
    display:none;
  }
  header.authHeader div.confirmBottomDiv.mobile {
    display: block;
    font-size: 12px;
    color: #909090;
    padding-right: 8px;
    position: relative;
    z-index: -9;
    max-width: 95%;
    margin: auto;
  }
  header.authHeader {
    position: sticky;
    height: auto;
    padding-bottom: 12px;
    padding-top: 16px;
    z-index: 99;
    top: 0;
    padding-left: 19px;
  }
  header.authHeader div.contents {
    justify-content: space-between;
    height: auto;
    /* padding-bottom: 20px; */
    max-width: 95%;
  }
  header.authHeader div.userMobileWrapper {
    display: flex;
    gap: 16px;
  }
  header div.userPoint.mobile a {
    background: #000;
    color: #fff;
    padding: 2px 10px 1px;
    display: flex;
    line-height: 1.4;
    font-size: 14px;
    font-weight: 600;
    border-radius: 3px;
    align-items: center;
  }
  /* 모바일 사이드 메뉴 */
  .moMenuWrap {
    display:block;

  }
  .moMenuWrap.on::after {
    display: block;
    content: '';
    background-color: #000;
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 300vh;
    opacity: 0.7;
    z-index: -1;
  }
  .bar-back {
    width:40px;
    height:40px;
    border-radius:50%;
    background:#ffd803;
    position:fixed;
    top:15px;
    right:35px;
    cursor:pointer;
    display:none;
  }
  header div.contents div.menuWrapper p.userId {
    display:none;
  }
  .bar-back.on {display:block;}
  .bar {display:block; width:33px;height:22px;position:relative;top:0;right:0;cursor:pointer;}
  .bar span {display:block;width:21px;height:2px;background:#333;position:absolute;}
  .bar span:first-child {top:2px;width:14px;right:12px;opacity:1;transition:0.3s;}
  .bar span:nth-child(2) {top:10px;transition:0.5s;}
  .bar span:nth-child(3) {top:10px;transition:0.5s;}
  .bar span:last-child {top:18px;width:14px;right:12px;opacity:1;transition:0.3s;}
  .bar.on {position:relative;top:0;}
  .bar.on span:first-child {opacity:0;}
  .bar.on span:nth-child(2) {top:10px;transform:rotate(-135deg);}
  .bar.on span:nth-child(3) {top:10px;transform:rotate(135deg);}
  .bar.on span:last-child {opacity:0;}
  .bar.on span:first-child {opacity:0;}
  .bar.on span:nth-child(2) {top:12px;left:6px;width:15px;transform:rotate(-135deg);background-color: #fff;}
  .bar.on span:nth-child(3) {top:12px;left:6px;width:15px;transform:rotate(135deg);background-color: #fff;}
  .bar.on span:last-child {opacity:0;}


  .barBack.on {
    border-radius: 50%;
    position: relative;
    top: -80px;
    right: 60px;
    cursor: pointer;
    display: block;
    width: 33px;
    height: 33px;
    border: 3px solid #333;
    z-index: 999;
  }
  .barBack.on span {
    border:1px solid #333;
  }



  nav.navigation {
    display: block;
    background-color: #fff;
    float: right;
    position: fixed;
    top: 0;
    width: 90%;
    left: -800px;
    min-height:103%;
    height: auto;
    overflow-y:scroll;
    color: #333;
    padding: 15px 0 0 0;
    z-index: 10;
    transition: 0.5s;
    opacity: 0;
    overflow-x: hidden;
    padding-left:16px;
    padding-right: 16px;
  }


  /* 로그인 auth 시 사이드 메뉴 - 유저이미지 - 모바일 */
  nav.navigation div.userWrapper div.userImage {}
  nav.navigation div.userWrapper div.userImage img {
    width: 100%;
    max-width: 50px;
    border-radius: 50px;
    border: 1px solid #ddd;
  }
  nav.navigation div.userWrapper div.userContentsWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px
  }

  nav.navigation div.userWrapper div.userContentsWrapper div.userId {
    position: relative;
    display: flex;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: 100%;
  }
  nav.navigation div.userWrapper div.userContentsWrapper div.userId p {
    font-size: 14px;
    color: #608AFF;
    font-weight: 600;
  }
  nav.navigation div.userWrapper div.userContentsWrapper div.userPoint {}
  nav.navigation div.userWrapper div.userContentsWrapper div.userPoint a {
    background-color: #000;
    color: #fff;
    padding: 2px 7px;
    border-radius: 3px;
    margin-left:0;
    height: 20px;
    justify-content: center;
  }
  /* nav wrapper */
  nav.navigation div.userWrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-bottom: 30px;
  }
  nav.navigation .userWrapper::after {
    display: block;
    content: '';
    width: 104%;
    height: 1px;
    position: absolute;
    bottom: -15px;
    left: -15px;
    background-color: #ddd;
  }
  nav.navigation::-webkit-scrollbar {
    width: 9px;  /* 스크롤바의 너비 */
  }

  nav.navigation::-webkit-scrollbar-thumb {
    height: 20%; /* 스크롤바의 길이 */
    background: #e6e6e6; /* 스크롤바의 색상 */

    border-radius: 10px;
  }

  nav.navigation::-webkit-scrollbar-track {
    background: rgb(218 227 240 / 31%);  /*스크롤바 뒷 배경 색상*/
  }



  nav.on {
    left:0;
    opacity:1;
  }
  nav strong, nav .menuName {
    font-size:14px;
    position:relative;
    display:block;
    text-align:center;
    padding:30px 0;
    z-index:999;
  }

  .menuNameMo {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #5D5D5D;
  }
  .userImageMo {
    width:100%;
    text-align:center;
  }
  .userImageMo img {
    width: 65px;
    height: 65px;
    border-radius:100%;
  }
  .userImageMo strong {
    font-size: 14px;
    font-weight: 300;
    position: relative;
    display: block;
    text-align: center;
    padding: 4px 0 20px;
    z-index: 999;
    color:#fff;
  }


  .menuListMo:last-of-type {
    padding-bottom:100px;
  }
  .menuIconMo img {
    width: 28px;
  }

  /* flex */
  nav.navigation .sideMenuContents {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  nav.navigation .sideMenuContents a {
    color: #5D5D5D;
    font-size: 12px;
  }
  nav.navigation a {
    display: flex;
    align-items: center;
    height: 42px;
    color: #5D5D5D;
    font-weight: 600;
    gap: 5px;
    padding-left: 16px;
  }
  nav.navigation a.sideMenuLink_a {
    margin-bottom:-2px;
  }
  nav.navigation a.sideMenuLink_a:nth-of-type(1) {
    margin-top: 25px;
    position:relative;
  }
  nav.navigation a.sideMenuLink_a:nth-of-type(1)::after {
    display: block;
    content: "";
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ddd;
  }
  nav.navigation a:hover {
    background-color: #E6EFFC;
    border-radius: 5px;
  }
  nav.navigation a.sideMenuLink_a {
    display: flex;
    align-items: center;
    height: 42px;
    padding-left: 16px;
    color: #5D5D5D;
    font-size: 14px;
  }
  nav.navigation a:visited,
  nav.navigation a:focus,
  nav.navigation a.active {
    text-decoration:none;
  }
  nav.navigation a.active {
    color: #608AFF;
    background-color: #E6EFFC;
    border-radius: 5px;
    position: relative;
    font-weight: 600;
  }
  nav.navigation a.active::before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    width: 5px;
    height: 20px;
    background-color: #608AFF;
  }
  nav.navigation img {
    width:26px;
    max-width:100%;
    height: auto;
  }

  nav.navigation menu-0,
  nav.navigation menu-1,
  nav.navigation menu-2 {
    margin-bottom:10px;
  }
  /* 모바일 메뉴 유저 로그아웃 버튼들 */
  .menuList.menuUserLogout {
    margin-right: 16px;
    position: relative;
    margin-top: 25px;
    margin-bottom: 50px;
  }
  .menuList.menuUserLogout::before {
    display: block;
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ddd;
  }
  .menuList.menuUserLogout a {
    margin-bottom:6px;
    margin-right: 0;
  }
  div#menuPathname.active {
    color: #608AFF;
    background-color: #E6EFFC;
    border-radius: 5px;
    position: relative;
    font-weight: 600;
  }

  div#menuPathname.active span {
    color: #608AFF;
  }
  div#menuPathname.active::after {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top:11px;
    width: 5px;
    height: 20px;
    background-color: #608AFF;
  }
  /* 마이페이지 */
  #account div.wrapper div.contentsBox {
    margin-bottom:24px;
    padding: 00px 0px 20px;
  }



  #neworder div.wrapper {

  }
  /* 주문페이지 - 주문하기 page */
  #neworder section {

  }
  #neworder div.wrapper {
    display: block;
    padding: 24px 28px 90px!important;
    margin: 0;
  }
  #neworder section.orderWrapper .sectionTabWrapper .sectionTab {
    font-size:16px;
    margin-right:13px;
  }
  #neworder section.orderWrapper .sectionTabWrapper .sectionTab.active {
    font-size:16px;
  }
  /* 서비스 선택 */
  #neworder section.orderWrapper div.inputWrapper div#services {
    /* display: grid;*/
    gap: 5px;
    padding-left: 0;
    grid-template-columns: 1fr 1fr;
    margin-right: 0;
  }
  #neworder section.orderWrapper {
    margin-right:0;
    margin-bottom: 26px;
    padding: 0;
  }
  #neworder div.rightWrapper {
    margin-right:0;
  }
  #neworder div.rightWrapper section.counterWrapper {
    margin: 0 0 28px 0;
  }
  #neworder div.rightWrapper section.confirmTimeWrapper {
    margin: 0 0px 28px 0;
    font-size: 12px;
  }
  #neworder div.rightWrapper section.noticeWrapper {
    margin: 0 0 0 0;
  }
  #neworder .itemDescriptionWrapper {
    margin: 20px 0 40px 0;
    font-size: 12px;
  }
  #neworder .noticeContentsWrapper p {
    font-size: 10px;
  }
  /* 주문하기 tab wrapper */
  #neworder section.orderWrapper div.tabWrapper {
    padding-bottom:18px;
    margin-left: 0;
    /* display: grid; */
  }

  #neworder section.orderWrapper div.tabWrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  @media (min-width: 768px) {
    #neworder section.orderWrapper div.tabWrapper {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (min-width: 1024px) {
    #neworder section.orderWrapper div.tabWrapper {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 12px;
    }
  }
  #neworder section.orderWrapper div.tabWrapper div.tab .tabIcon {
    display:block;
    padding-right:0;
  }

  #neworder section.orderWrapper div.tabWrapper div.tab {

    width: 100%;

  }
  #neworder figure {
    padding: 12px;
  }
  #neworder strong {
    font-size:15px;
  }
  #neworder .active strong {
    font-size:17px;
  }
  #neworder figure strong::after {
    font-size:16px;
  }
  #neworder figure div {
    width:auto;
    padding:12px;
  }
  #neworder .autoDescriptionWrapper {
    padding: 18px 10px;
  }
  #neworder .autoDescriptionWrapper strong {
    font-size: 11px;
  }
  #neworder .autoDescriptionWrapper i {
    padding-top: 4px;
    padding-right: 6px;
  }


  #neworder figure.active div {
    font-size:10px!important;
    padding: 12px;
  }

  #neworder section.orderWrapper div.tabWrapper div.tab .tabIcon img {
    width: 22px;
    height: 25px;
    padding-bottom: 3px;
  }
  #neworder section.orderWrapper div.tabWrapper div.tab:nth-child(4) img {
    padding: 4px 0;
  }
  #neworder section.orderWrapper div.tabWrapper div.tab.active {
    font-size:10px;
  }
  #neworder section.orderWrapper div.formWrapper div.inputWrapper+div.inputWrapper {
    padding-bottom:0;
  }
  #neworder div.rightWrapper section.counterWrapper div.counterBox p.numberText {
    font-size: 20px;
  }
  #neworder div.rightWrapper section.counterWrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #neworder div.rightWrapper section.counterWrapper div.counterBox {
    height: 136px;
    width: auto;
  }
  #neworder .noticeTab {
    font-size:14px;
  }
  #neworder .linkGuideWrapper {
    padding-top: 16px;
  }
  /* 게시물 링크 / 구매하실 수량 풀기 */
  #neworder #fields div.order-wrapper {
    display: flex;
    width:100%;
    max-width:100%;
    flex-wrap:wrap;
  }
  #neworder #fields #dripfeed div.depend-fields#dripfeed-options div.dripfeed-wrapper {
    flex-direction:column;
  }

  #neworder #fields div.form-group#order_link input.form-control {
    max-width: 100%;
  }
  #neworder #fields div.form-group#order_quantity input.form-control {
    max-width: 100%;
  }
  #neworder #fields #dripfeed div.depend-fields#dripfeed-options div.form-group:nth-of-type(1) input.form-control, #neworder #fields #dripfeed div.depend-fields#dripfeed-options div.form-group:nth-of-type(2) input.form-control {
    max-width: 100%!important;
  }
  /* 에러메시지 */ 
  #neworder .toastWrapper.error {
    margin:32px auto 0;
  }

  /* 구매금액 grid 풀기 */
  #neworder section.orderWrapper div.chargeWrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  /* 보유 포인트 */
  #neworder section.orderWrapper div.formWrapper section.counterWrapper div.counterBox {
    padding:12px 0;
  }
  /* right section과의 간격 */
  #neworder section.orderWrapper {
    margin-bottom:20px;
  }
  #neworder div.rightWrapper {
    padding-left:0;
  }
  /* 자동 주문 grid 풀기 */
  #neworder #fields div.autoFieldsWrapper {
    display:flex;
    flex-direction:column;
  }
  #neworder section.orderWrapper div.formWrapper div.inputWrapper input {
    max-width: 100%;
  }
  #neworder #fields div#order_min {
    height:auto!important;
    padding-bottom: 0;
  }
  #neworder #order_min .col-md-6:nth-child(1) input {
    max-width:96.7%!important;
    margin-left:auto!important;
  }
  #neworder #order_min .col-md-6:nth-child(2) input {
    max-width:96.7%!important;
    margin-right:auto!important;
  }
  #neworder .help-block {
    margin-bottom:5px!important;
  }
  #neworder select#field-orderform-fields-delay {
    max-width: 100%;
    background: url(https://storage.perfectcdn.com/gz2yx6/zpju4jm5eb616qa6.png) no-repeat 98%;
    background-color:#fff;
  }
  /* 자동 작업 종료 날짜 */
  #neworder div.orderExit .input-group {
    max-width:100%;
    display:flex;
  }
  #neworder div.orderExit input#field-orderform-fields-expiry {
    max-width: 100%;
    background-position: 98%;
  }
  #neworder span.input-group-btn img {
    position:absolute;
    right:8px;
    top:4px;
  }
}
@media (max-width:600px) {
  /* 주문링크 확인방법 flex-direction: column; */
  #neworder div.linkGuideWrapper ul.linkGuideContents {
    flex-direction:column;
  }
  #neworder div.linkGuideWrapper ul.linkGuideContents div.linkTitle {
    justify-content:flex-start;
    text-align:left;
  }
  #neworder div.linkGuideWrapper ul.linkGuideContents div.linkTitle strong {
    margin-top:0;
  }
  #neworder .linkInsta strong {
    margin-top:24px;
  }


}
@media (max-width:550px) {
  /*공지사항*/
  #neworder .noticeWrapper .noticeTabWrapper {
    display:grid;
    grid-template-columns:1fr 1fr;
    text-align:center;
  }
  #neworder .noticeTab {
    margin-bottom:21px;
  }
  #neworder .noticeTab + .noticeTab + .noticeTab {
    margin-bottom:0;
  }
  #neworder .noticeTab + .noticeTab + .noticeTab + .noticeTab{
    margin-bottom:0;
  }
  #neworder div.modalImgWrapper div.modal_overflow p {
    font-size:15px;
  }
  #neworder div.instagramTip div.modalBox_instagramTip strong {
    font-size:13px;
  }
  #neworder div.optimization div.modalBox_optimization strong {
    font-size:13px;
  } 
}
@media (max-width:500px) {
  #neworder div.linkModal div.modalBox {
    width:90%!important;
  }
  #neworder div.modalBox_optimization {
    width:90%!important;
  }
  #neworder div.modalBox_optimization br {
    display:none;
  }
  #neworder div.modalBox_instagramTip {
    width:90%!important;
  }
  #neworder div.modalBox_instagramTip br {
    display:none;
  }

  #neworder div.modalContents p {
    font-size:13px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #neworder div.modalContents {
    gap:8px;
    justify-content:flex-start;
    align-items:center;
  }
  #neworder div.modalContents i {
    font-size:37px;
    right:3px;
    top:16px;
  }

}
@media (max-width:400px) {
  .select2-container .select2-selection__text {
    font-size:12px;
  } 
  #neworder section.orderWrapper div.formWrapper div.inputServicesWrapper {
    height:auto!important;
  }
}
@media (max-width:360px) {
  #neworder .itemDescriptionFlexBox {
    padding:9px 6px 9px;
  }
  #neworder div.itemCounterDescriptionWrapper {
    gap:5px;
  }
  #neworder div.itemCounterDescriptionWrapper span.work {
    height:auto;
  }
  #neworder section.orderWrapper div.formWrapper div.inputServicesWrapper span.select2-selection {
    max-height:100%;
    height:auto;
  }
}
@media (max-width:350px) {
  #neworder .noticeTab {
    font-size:11px;
  }
  #neworder div.instagramTip div.linkGuideBox_instagramTip li {
    font-size:11px;
  }
  #neworder div.optimization div.linkGuideBox_optimization li {
    font-size:11px;
  }
}
@media (max-width:330px) {
  #neworder section.orderWrapper div.tabWrapper div.tab {
    width: 100%;
    height: auto;
  }
}
@media (max-width:400px){
  #orders div.orderList div.orderStatus strong {
    font-size: 12px;
  }
  #orders div.orderList div.orderId strong {
    font-size: 12px;
  }
}
@media (max-width: 300px) {
  #orders div.orderList div.orderContents strong.order_Service {
    width: 170px;
  }
  #orders div.orderList div.orderContents strong {
    font-size: 12px;
  }
  #orders div.orderTitleServiceBox strong {
    font-size: 12px;
  }
  #orders div.orderList div.orderStatus {
    width: 100%;
    flex: initial;
    text-align: left;
  }
  #orders span#orderCopy2 {
    font-size: 12px;
    height: 22px;
  }
  #orders span#orderCopy {
    font-size: 12px;
    height: 22px;
  }
}
@media (max-width:768px){
  #orders div.orderHistoryWrapper div.filterWrapper {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    padding: 0 11px;
    width: 100%;
    flex-wrap: wrap;
    height: auto;
    padding-top: 10px;
    padding-bottom: 12px;
  }
  #orders .orderHistoryWrapper select {
    width: 100%;
    max-width: 100%;
  }
  #drip-feed .wrapper {
    margin: 0;
    max-width: 100%;
    padding: 0 25px 0 25px;
  }
}
@media (max-width:360px){
  .barBack.on {
    right:40px;
  }
}

@media (max-width: 310px){
  #faq div.wrapper div.faqFilterWrapper div.faqFilterBox {
    padding: 9px 16px;
    font-size: 14px;
  }
  #faq div.wrapper div.faqFilterWrapper div.faqFilterBox+div.faqFilterBox {
    margin-left:0;
  }
  #faq div.wrapper div.faqFilterWrapper {
    padding-left:0;
    margin-bottom:16px;
  }
  #faq .even figure strong {
    font-size:10px;
  }
  #faq .even figure strong::after, #faq .odd figure strong::after {
    font-size:12px;
  }
  #faq figure.active strong {
    font-size:11px!important;
  }
  #faq figure.active div {
    font-size:10px;
  }
  #orders div.totalWrapper div.totalBox p.count {
    font-size:16px;
  }
  #orders div.totalWrapper div.totalBox p.name {
    font-size:14px;
  }
  #addfunds section.bottomSection div.contentsBox div.methodWrapper p.methodName {
    font-size:16px;
    font-weight:500;
  }
  .bar {
    width: 23px;
    height: 22px;
  }
  .bar span:first-child {
    width: 14px;
    right: 12px;
  }
  .bar span:nth-child(2) {
    top: 8px;
  }
  .bar span:nth-child(3) {
    top: 8px;
  }
  .bar span:last-child {
    top:14px;
    width:14px;
    right:12px;
  }



  header div.contents div.menuWrapper div.userPoint {
    padding:5px 13px;
  }
  .bar span {
    width:12px;
  }
  .menuIconMo img {
    width:22px;
  }
  .menuNameMo {
    font-size:12px;
  }
  #neworder figure {
    padding:12px 7px;
  }
  #neworder strong {
    font-size:10px;
  }
  #neworder figure strong::after {
    font-size:8px;
  }    
  #hot-hashtag div.contents div.tableWrapper {
    font-size:12px;
  }
  #affiliates div.wrapper section.middleSection div.contentBox div.copyWrapper p.link {
    padding-left: 12px;
    margin-right:0;
  }
  #affiliates div.wrapper section.middleSection div.contentBox div.copyWrapper div.copyButton {
    font-size: 13px;
    padding: 5px 8px;
  }
  main section.section3 div.contents div.counterBox p.description {
    font-size:12px;
  }
  #neworder .itemDescriptionWrapper {
    padding: 24px 18px 24px 14px;
  }
  #neworder section.orderWrapper div.tabWrapper div.tab{
    margin-right:0;
  }
  /* 포인트결제창 - 충전금액BOX*/
  #payment div.priceButtonWrapper div.priceButton {
    font-size: 11px;
  }
}
@media (max-width: 1500px)
  #subscriptions div.filterWrapper {
    flex-wrap: wrap;
    gap: 9px;
}
@media(max-width:1300px){
  #subscriptions .wrapper .subscriptionWrapper div.subscriptionList div.subscriptionTitle {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 13px 50px 13px 20px;
    gap: 6px;
  }
  #subscriptions .wrapper .subscriptionWrapper div.subscriptionTitle div.subscriptionId {
    padding-left: 0;
    flex: initial;
    width: 100%;
    text-align: left;
  }
  #subscriptions .wrapper .subscriptionWrapper div.subscriptionTitle div.subscriptionDate {
    width: 100%;
    flex: initial;
    text-align:left;
  }
  #subscriptions div.subscription_Service {
    width: 100%;
    flex: initial;
    text-align:left;
    /* font-size: 14px; */
  }
  #subscriptions div.subscription_Status_JJin {
    width:100%;
    flex:initial;
    text-align:left;
  }
  #subscriptions .wrapper .subscriptionWrapper div.subscriptionTitle div.subscriptionStatus {
    width:100%;
    flex:initial;
    text-align:left;
    font-size: 14px;
  }
  #subscriptions .wrapper .subscriptionWrapper .subscriptionTitle::after {
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    right: 13px;
  }
}
@media (max-width:768px){
  #subscriptions {
    width:100%;
  }
  #subscriptions .wrapper {
    margin:0;
    padding: 0 28px 0 28px;
  }
  #subscriptions .wrapper .subscriptionWrapper {
    margin:0;
  }
  #subscriptions table {
    width:1600px;
    max-width:1600px;
  }
  #subscriptions div.filterWrapper {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }
  #subscriptions div.filterWrapper div.statusButtonWrapper div.statusButton + div.statusButton {
    margin-left: 8px;
    margin-bottom: 9px;
  }
  #subscriptions div.filterWrapper div.statusButtonWrapper {    
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: auto;
  }
  #subscriptions div.filterWrapper div.statusButtonWrapper div.statusButton.active {
    background: #000;
    padding: 8px 22px;
    margin-bottom: 10px;
    margin-left: 8px;
  }
  #subscriptions form {
    display:block;
  }
  #subscriptions .input-group .form-control {
    width: 100%;
  }
  #subscriptions div.filterWrapper {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }
  #subscriptions div.filterWrapper div.statusButtonWrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: auto;
  }

}
@media(max-width:380px){
  #subscriptions div.filterWrapper {
    height: auto;
    padding-top: 10px;
    padding-bottom: 12px;
  }
  #subscriptions div.filterWrapper div.statusButtonWrapper {
    width: 100%;
  }
  #subscriptions .filterWrapper select {
    width: 100%;
  }
}
@media (max-width:1899px){
  #addfunds section.bottomSection div.contentsBox div.methodWrapper div.methodBox {
    height: 314px;
    width: 100%;
  }
}
@media (max-width:600px) {
  #affiliates .well {
    margin-left:0;
  }
  #payment div.paymentChargeWrapper {
    flex-wrap:wrap;
    flex-direction:column;
  }
  #payment div.cardNoneFlexWrapper {
    flex-direction:column;
    display:flex;
  }
  #payment div.paymentDescription {
    flex-direction:column;
    position:relative;
  }
  #addfunds .autoDescriptionWrapper {
    width:100%;
    max-width:100%;
  }
  #payment div.paymentDescription div.paymentFlexWrapper {
    width:100%;
    max-width:100%;
  }
  #addfunds section.bottomSection div.contentsBox div.methodWrapper div.methodBox {
    height:64px;
  }
  #addfunds section.bottomSection div.contentsBox div.methodWrapper p.methodName {
    font-size: 18px;
  }
  #addfunds section.bottomSection div.contentsBox div.methodWrapper div.methodBox.active p.methodName {
    font-size:20px;
  }
}
@media (max-width:520px){
  #addfunds .tel_description {
    flex-direction: column;

    gap: 5px;
    position:relative;

  }
}
@media (max-width:768px){
  #faq.authPage {
    margin:0;
    height: 100%;
  }
  #faq{
    padding:100px 0px 100px!important
  } #faq.autoPage {
    padding: 28px 30px 100px!important;
  }
  #faq div.wrapper {
    padding: 33px 16px;
    overflow: auto;
    height: auto!important;
    max-width: 90%;
    min-height: auto;
    margin: 0 auto 32px;
  }

  #faq div.wrapper.authPage{
    width: 100%;
    margin: 0 0 32px;
    padding-right: 10px;
    padding-left:10px;
    min-height: 100%;
  }

  #faq div.wrapper div.faqFilterWrapper {
    margin-bottom: 16px;
    padding-left:0;
    flex-wrap: wrap;
    gap: 5px;
  }
  #faq div.wrapper div.faqFilterWrapper div.faqFilterBox {
    font-size:13px;
    padding: 9px 11px;
  }
  #faq div.wrapper div.faqFilterWrapper div.faqFilterBox+div.faqFilterBox {
    margin-left:0;
  }
  #faq .menu-1 {
    display:block!Important;
  }
  #faq .even figure {
    margin-right: 0;
  }
  #faq .even figure strong, #faq .odd figure strong {
    font-size: 12px;
  }
  #faq figure.active span.faqStrong {
    font-size: 14px;
  }
  #faq .even figure strong::after, #faq .odd figure strong::after {
    font-size: 16px;
  }
  #faq figure.active strong {
    color: #fff!important;
    font-size: 14px!important;
  }
  #faq figure div {
    font-size:10px;
    padding: 12px;
  }
  #faq figure {
    /* padding: 15px 12px; */
  }
  #affiliates {
    padding: 16px 20px 120px;
    margin: 0;
  }
  #affiliates .well {
    margin-left:0!important;
  }
  #affiliates div.wrapper {
    padding:0;
  }
  #affiliates div.wrapper section div.contentBox p.mainTitle {
    font-size:20px;
    margin-bottom: 12px;
  }
  #affiliates div.wrapper section div.contentBox {
    padding: 0 0 5px;
  }
  #affiliates div.wrapper section.middleSection {
    display:block;
  }
  #affiliates div.wrapper section div.contentBox+div.contentBox {
    margin-left:0;
  }
  #affiliates div.wrapper section.middleSection div.contentBox div.copyWrapper div.copyButton {
    font-size: 11px;
    padding: 3px 8px;
    height: 24px;
    height: auto;
  }
  #affiliates div.wrapper section.middleSection div.contentBox {
    margin-bottom:16px;
    padding: 12px 0 22px;
  }
  #affiliates div.wrapper section.middleSection div.contentBox p.title {
    text-align:center;
    height: auto;
    margin-right: 10px;
    padding: 2px 0;
  }
  #affiliates div.wrapper section.middleSection div.contentBox p.price {
    text-align:center;
  }
  #affiliates div.wrapper section.middleSection div.contentBox div.copyWrapper {
    justify-content: center;
  }
  #affiliates div.wrapper section.bottomSection div.contentBox div.historyBox p.title {
    font-size:12px;
    text-align:center;
  }
  #affiliates div.wrapper section div.contentBox p.description {
    font-size: 14px;
  }

}

@media (max-width:360px) {
  #affiliates div.wrapper section.middleSection div.contentBox div.copyWrapper p.link {
    cursor: pointer;
    margin-top: 0;
    width: auto;
    padding-right: 10px;
    min-width: initial;
    color: #5D5D5D;
    font-weight: 600;
    position: relative;
    color: #608AFF;
    text-decoration: underline;
    font-size: 14px;
    font-weight: 600;
    max-width: 120px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-align: left;
    font-size: 11px;
  }
}

@media(max-width:600px) {

  #affiliates .bottomSection {
    overflow-x:auto;
  }
  #affiliates .bottomSection .contentBox {
    width:auto;
  }

}

@media (max-width:1540px){
  #affiliates {
    flex-direction:column;
    gap:0;
  }
  #affiliates div.wrapper {
    width:100%;
    max-width:100%;
  }
  #affiliates div.affiliates_order_wrapper {
    margin-left:40px;
    max-width:100%;
    height:auto;
  }
  #affiliates .well {
    width:100%;
    max-width:100%;
    margin-left:0;
    height:auto;
    margin-top: 16px;
  }
}
@media (max-width: 1000px) {
  #affiliates div.wrapper section.middleSection {
    flex-direction:column;
  }
}
@media (max-width:768px) {
  #affiliates div.affiliates_order_wrapper {
    margin-left:0;
  }
}
@media (max-width:870px){
  #affiliates div.wrapper section div.contentBox:last-of-type {
    margin-left: 0!important;
    margin-top: 12px;
  }
}
@media (max-width:600px){
  #affiliates div.wrapper section.bottomSection div.contentBox {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
}

#payment {
  /* padding: 16px; */
}

#payment div.inputWrapper {
  display: flex;
  flex-direction: column;
}

#payment div.inputWrapper label {
  margin-bottom: 4px;
}

#payment input {
  width: 100%;
  height: auto;
  background-color: #FAFAFA;
  box-shadow: inset 0 3px 6px #BCBCBC29;
  padding: 15px;
  border-radius: 15px;
  font-size: 13px;
  margin: auto;
  max-width: 100%;
}

#payment div.cardInfoWrapper {
  display: flex;
  width: 100%;
  margin: 16px 0;
}

#payment div.cardInfoWrapper div.inputWrapper {
  flex: 1;
}

#payment div.cardInfoWrapper div.inputWrapper~div.inputWrapper {
  margin-left: 16px;
}

#payment div.cardInfoWrapper div.inputDateWrapper {
  display: flex;
}

#payment div.cardInfoWrapper div.inputDateWrapper input {
  flex:1;
}

#payment div.buttonWrapper {
  display: flex;
  justify-content: flex-end;
}

#payment div.buttonWrapper div.button {
  position: relative;
  width: 50%;
  border-radius: 15px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  padding: 15px;
  margin-top: 10px !important;
  cursor: pointer;
  display: flex;
  justify-content: center;
  max-width: 90%;
  margin: auto;
}

#payment div.buttonWrapper div.button ~ div.button {
  margin-left: 8px;
}


/* 공통 */
section.section {
  width:100%;
  height:100%;
}
/* 공통 - title */
section.section h4.title_description {
  color:#1E3069;
  font-size: 30px;
  font-weight:600;
  letter-spacing: -0.4px;
  line-height:1.3;
  margin-bottom: 30px;
}
@media (max-width:768px){
  section.section h4.title_description {
    font-size:5vw;
    margin-bottom: 20px;
  }
}


section.section p.title_sub_description {
  color:#151515;
  font-size:16px;
  font-weight:500;
  line-height:1.5;
  letter-spacing: -0.4px;
  margin-bottom: 60px;
}
@media (max-width:768px){
  section.section p.title_sub_description {
    font-size: 14px;
    margin-bottom: 30px;
  }
}
@media (max-width:360px){
  section.section p.title_sub_description {
    font-size:11px;
  }
  section.section p.title_sub_description br{
    display:none;
  }
}
section.section button.snstomo_button {
  width: 146px;
  background: #6CBBD0;
  padding-left: 0;
  text-align: center;
  height: 55px;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  letter-spacing: 0.5px;
}
@media (max-width:768px){
  section.section button.snstomo_button {
    width: 28%;
    height: 100%;
    padding: 13px 0;
    font-size: 2vw;
    border-radius: 5px;
  }
}
@media (max-width:400px){
  section.section button.snstomo_button {
    font-size:12px;
  }
}
img {
  width: auto;
  height: auto;
}
section.section div.section_wrapper {}

/* section01 */
section#section01 {
  margin-top:170px;
  position: relative;
  max-width: 1600px;
  margin: 170px auto 0;
}
@media (max-width:1400px){
  section#section01 {max-width:90%;margin: 109px auto 0;}
}
@media (max-width:768px){
  section#section01 {
    margin: 55px auto 0;
  }
}
/* section01 - title */
section#section01 div.section01_title_box_wrapper {text-align: center;}
section#section01 div.section01_title_box_wrapper h3 {font-size: 36px;font-weight: 600;margin-bottom: 18px;}
@media (max-width:768px){
  section#section01 div.section01_title_box_wrapper h3 {
    font-size: 21px;
    margin-bottom: 10px;
  }
}
@media (max-width:460px){
  section#section01 div.section01_title_box_wrapper h3 {
    font-size: 4vw;
  }
}
section#section01 div.section01_title_box_wrapper h1 {
  color: #1E3069;
  font-weight: 600;
  font-size: 72px;
  margin-bottom: 25px;
}
@media (max-width:768px){
  section#section01 div.section01_title_box_wrapper h1 {
    font-size: 46px;
    margin-bottom: 20px;
  }
}
@media (max-width:460px){
  section#section01 div.section01_title_box_wrapper h1  {
    font-size: 36px;
  }
}
section#section01 div.section01_title_box_wrapper p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
@media (max-width:768px){
  section#section01 div.section01_title_box_wrapper p {
    font-size: 15px;
  }
}
@media (max-width:460px){
  section#section01 div.section01_title_box_wrapper p {
    font-size: 15px;
  }
}
/* section01 - sub */
section#section01 div.section01_sub_box_wrapper {
  display: flex;
  margin: auto;
  justify-content: center;
  gap: 110px;
  margin-top: 190px;
  align-items: center;
}
@media (max-width:1400px){
  section#section01 div.section01_sub_box_wrapper {
    gap: 60px;
    margin-top: 84px;
  }
}
@media (max-width:768px){
  section#section01 div.section01_sub_box_wrapper {
    flex-direction:column;
    gap: 30px;
  }
}


/* section01 - left - sub */
section#section01 div.section01_sub_box_wrapper div.section01_left_sub_box {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 0px 40px #1E30694D;
  height: 100%;
  width: 526px;
  padding: 60px 13px;
}
@media (max-width:1400px){
  section#section01 div.section01_sub_box_wrapper div.section01_left_sub_box {
    padding: 10px 5px 10px 5px;
  }
}
@media (max-width:768px){
  section#section01 div.section01_sub_box_wrapper div.section01_left_sub_box {
    width:100%;
    border-radius: 10px;
  }
}
section#section01 div.section01_sub_box_wrapper div.section01_left_sub_box strong {
  color: #1E3069;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  width: 100%;
  display: block;
  margin-bottom: 30px;
}
@media (max-width:460px){
  section#section01 div.section01_sub_box_wrapper div.section01_left_sub_box strong {
    font-size:18px;
  }
}
section#section01 div.section01_sub_box_wrapper div.section01_left_sub_box img {}

/* section01 -left- sub - sub_img_box_wrapper */
section#section01 div.section01_sub_box_wrapper div.section01_left_sub_box div.sub_img_box_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 62px;
}
@media (max-width:1400px){
  section#section01 div.section01_sub_box_wrapper div.section01_left_sub_box div.sub_img_box_wrapper {
    padding: 0 13%;
  }
}
@media (max-width:768px){
  section#section01 div.section01_sub_box_wrapper div.section01_left_sub_box div.sub_img_box_wrapper {
    padding: 0 12%;
  }
}
@media (max-width:460px){
  section#section01 div.section01_sub_box_wrapper div.section01_left_sub_box div.sub_img_box_wrapper {
    padding: 0 11%;
  }
}
section#section01 div.section01_sub_box_wrapper div.section01_left_sub_box div.sub_img_box_wrapper div.sub_img_box {
  text-align: center;
  margin-top: 14px;
}
section#section01 div.img_sub_img_div {
  padding:0 95px;
}
section#section01 div.img_sub_img_div img {
  width:100%;
}
@media (max-width:460px){
  section#section01 div.img_sub_img_div {
    padding:0 60px;
  }
}

section#section01 div.section01_sub_box_wrapper div.section01_left_sub_box div.sub_img_box_wrapper div.sub_img_box p.sub_description_p {
  color: #1E3069;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}
@media (max-width:460px){
  section#section01 div.section01_sub_box_wrapper div.section01_left_sub_box div.sub_img_box_wrapper div.sub_img_box p.sub_description_p {
    font-size:13px;
  }
}
section#section01 div.section01_sub_box_wrapper div.section01_left_sub_box div.sub_img_box_wrapper div.sub_img_box strong.sub_description_strong {
  width: 100%;
  font-size: 24px;
  margin-bottom: 0;
}
@media (max-width:460px){
  section#section01 div.section01_sub_box_wrapper div.section01_left_sub_box div.sub_img_box_wrapper div.sub_img_box strong.sub_description_strong {
    font-size:16px;
  }
}

/* section01 -right- sub */
section#section01 div.section01_sub_box_wrapper div.section01_right_sub_box {

}
@media (max-width:768px){
  section#section01 div.section01_sub_box_wrapper div.section01_right_sub_box {
    width:100%;
  }
}
/* section01 -right- sub - button */
section#section01 div.section01_sub_box_wrapper div.section01_right_sub_box button.snstomo_preview {
}


/* section02 */
section#section02 {
  max-width: 1600px;
  width: 100%;
  margin: 168px auto 0;
}
@media (max-width:1400px){
  section#section02 {
    max-width:90%;
    margin: 84px auto 0;
  }
}
/* section02 - top */
section#section02 div.section02_top_sub_box_wrapper {
  display: flex;
  gap: 74px;
  align-items: center;
}
@media (max-width:768px){
  section#section02 div.section02_top_sub_box_wrapper {
    flex-direction:column;
    gap: 39px;
  }
}

/* section02 - top - left  */
section#section02 div.section02_top_sub_box_wrapper div.section02_left_sub_box {
  text-align: right;
}
/* section02 - top - left - button */
section#section02 div.section02_top_sub_box_wrapper button.snstomo_preview {}

/* section02 - top - right  */
section#section02 div.section02_top_sub_box_wrapper div.section02_right_sub_box {}
/* section02 - top - right  - grid  */
section#section02 div.section02_top_sub_box_wrapper div.section02_right_sub_box div.section02_grid_box_wrapper{}
section#section02 div.section02_top_sub_box_wrapper div.section02_right_sub_box div.section02_grid_box_wrapper ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width:360px){
  section#section02 div.section02_top_sub_box_wrapper div.section02_right_sub_box div.section02_grid_box_wrapper ul {
    display:flex;
    flex-direction:column;
  }
}
section#section02 div.section02_top_sub_box_wrapper div.section02_right_sub_box div.section02_grid_box_wrapper ul li.grid_box {}

/* section02 - top - right  - grid - img */
section#section02 div.section02_top_sub_box_wrapper div.section02_right_sub_box div.section02_grid_box_wrapper ul li.grid_box div.grid_img_box {
  border: 1px solid #6BBBD0;
  border-radius: 20px;
  padding: 21px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media (max-width:768px){
  section#section02 div.section02_top_sub_box_wrapper div.section02_right_sub_box div.section02_grid_box_wrapper ul li.grid_box div.grid_img_box {
    padding: 21px 15px 18px;
    border-radius: 10px;
  }
}
section#section02 div.section02_top_sub_box_wrapper div.section02_right_sub_box div.section02_grid_box_wrapper ul li.grid_box div.grid_img_box img {
  width: 100%;
  max-width: 50px;
  height: 100%;
  max-height: 50px;
}

/* section02 - top - right  - grid - description */
section#section02 div.section02_top_sub_box_wrapper div.section02_right_sub_box div.section02_grid_box_wrapper ul li.grid_box div.grid_img_box strong.grid_title {
  color: #1E3069;
  font-size: 24px;
  font-weight: 600;
  margin-top: 4px;
  margin-bottom: 12px;
}
@media (max-width:768px){
  section#section02 div.section02_top_sub_box_wrapper div.section02_right_sub_box div.section02_grid_box_wrapper ul li.grid_box div.grid_img_box strong.grid_title {
    font-size:3vw
  }
}
@media (max-width:360px){
  section#section02 div.section02_top_sub_box_wrapper div.section02_right_sub_box div.section02_grid_box_wrapper ul li.grid_box div.grid_img_box strong.grid_title {
    font-size:14px;
    margin-bottom:10px;
  }
}
section#section02 div.section02_top_sub_box_wrapper div.section02_right_sub_box div.section02_grid_box_wrapper ul li.grid_box div.grid_img_box p.grid_sub {
  color: #151515;
  line-height: 1.5;
  font-weight: 500;
}
@media (max-width:768px){
  section#section02 div.section02_top_sub_box_wrapper div.section02_right_sub_box div.section02_grid_box_wrapper ul li.grid_box div.grid_img_box p.grid_sub {
    font-size:2vw;
  }
}
@media (max-width:360px){
  section#section02 div.section02_top_sub_box_wrapper div.section02_right_sub_box div.section02_grid_box_wrapper ul li.grid_box div.grid_img_box p.grid_sub {
    font-size:11px;
  }
}

/* section02 - bottom */

section#section02 div.section02_bottom_sub_box_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 132px;
  box-shadow: 0px 0px 40px #1E30694D;
  border-radius: 20px;
  max-width: 85%;
  margin: 168px auto 0;
  padding: 63px;
}
@media(max-width:1400px){
  section#section02 div.section02_bottom_sub_box_wrapper {
    max-width:100%;
    gap: 50px;
    padding: 40px;
    margin-top: 84px;
  }
}
@media (max-width:768px){
  section#section02 div.section02_bottom_sub_box_wrapper {
    flex-direction:column-reverse;
    align-items: inherit;
    border-radius: 10px;
    padding: 20px 22px;
    gap: 30px;
  }
}


/* section02 - bottom - left */
section#section02 div.section02_bottom_sub_box_wrapper div.sub_left_box {}
section#section02 div.section02_bottom_sub_box_wrapper div.sub_left_box h3 {
  font-size: 30px;
  line-height: 1.5;
  color: #1E3069;
  letter-spacing: -0.4px;
  margin-bottom: 24px;
}
@media (max-width:1400px){
  section#section02 div.section02_bottom_sub_box_wrapper div.sub_left_box h3 {
    font-size:1.9vw;
  }
}
@media (max-width:768px){
  section#section02 div.section02_bottom_sub_box_wrapper div.sub_left_box h3 {
    font-size:3vw;
  }
}

/* section02 - bottom - left - button */
section#section02 div.section02_bottom_sub_box_wrapper div.sub_left_box button.snstomo_siginup {
  background: #1E3069;
}
@media (max-width:1400px){
  section#section02 div.section02_bottom_sub_box_wrapper div.sub_left_box button.snstomo_siginup {
    width: 33%;
  }
}

/* section02 - bottom - rught */
section#section02 div.section02_bottom_sub_box_wrapper div.sub_right_box {}
section#section02 div.section02_bottom_sub_box_wrapper div.sub_right_box img {max-width: 275px;height: auto;}
@media (max-width:768px){
  section#section02 div.section02_bottom_sub_box_wrapper div.sub_right_box img {
    max-width:100%;
  }
}

/* section03 */
section#section03 {
  margin-top: 258px;
  max-width: 1600px;
  margin: 208px auto 0;
}
@media(max-width:1400px){
  section#section03 {
    margin:84px auto 0;
    max-width: 90%;
  }
}

/* section03  - top */
section#section03 div.section03_top_sub_box_wrapper {
  display: flex;
  align-items: center;
  gap: 50px;
  justify-content: center;
}
@media (max-width:1400px){
  section#section03 div.section03_top_sub_box_wrapper {
    max-width:100%;
    gap: 40px;
  }
}
@media (max-width:768px){
  section#section03 div.section03_top_sub_box_wrapper {
    flex-direction:column;
    gap: 30px;
    align-items: baseline;
  }
}

/* section03  - top - left */
section#section03 div.section03_top_sub_box_wrapper div.section03_top_sub_left_box{
  display: flex;
}
section#section03 div.section03_top_sub_box_wrapper div.section03_top_sub_left_box img{
  max-width: 560px;
  box-shadow: 0px 0px 40px #1E30694D;
  border-radius: 20px;
}
@media(max-width:768px){
  section#section03 div.section03_top_sub_box_wrapper div.section03_top_sub_left_box img {
    border-radius:10px;
    width: 100%;
    max-width: 100%;
  }
}

/* section03  - top - right */
section#section03 div.section03_top_sub_box_wrapper div.section03_top_sub_right_box{
}
section#section03 div.section03_top_sub_box_wrapper div.section03_top_sub_right_box h4{}
section#section03 div.section03_top_sub_box_wrapper div.section03_top_sub_right_box p{
  margin-bottom: 0;
}

/* section03  - bottom */
section#section03 div.section03_bottom_sub_box_wrapper {text-align: center;margin-top: 208px;}
@media(max-width:768px){
  section#section03 div.section03_bottom_sub_box_wrapper {
    margin-top:84px;
  }
}
section#section03 div.section03_bottom_sub_box_wrapper h4{margin-bottom: 20px;}
section#section03 div.section03_bottom_sub_box_wrapper p {
}

/* section03  - bottom - img */
section#section03 div.section03_bottom_sub_box_wrapper  div.section03_bottom_img_box_wrapper {}
section#section03  div.section03_bottom_sub_box_wrapper  div.section03_bottom_img_box_wrapper ul {
  display: flex;
  justify-content: center;
  gap: 20px;
}
@media (max-width:1400px){
  section#section03 div.section03_bottom_sub_box_wrapper div.section03_bottom_img_box_wrapper ul {

    gap: 10px;
  }
}
@media (max-width:600px){
  section#section03 div.section03_bottom_sub_box_wrapper div.section03_bottom_img_box_wrapper ul {
    display:grid; 
    grid-template-columns:1fr 1fr; 
  }
}
section#section03 div.section03_bottom_sub_box_wrapper  div.section03_bottom_img_box_wrapper ul li.section03_img_box {
  height: 638px;
  background-size: cover;
  width: 325px;
  display: flex;
  align-items: flex-start;
  justify-content: end;
  flex-direction: column;
  background-blend-mode: multiply;
  padding: 30px 20px;
  border-radius:20px;
  border: 1px solid #E3E3E3;
  background-position: center;
}
@media (max-width:768px){
  section#section03 div.section03_bottom_sub_box_wrapper div.section03_bottom_img_box_wrapper ul li.section03_img_box {
    width:100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
}
@media(max-width:600px){
  section#section03 div.section03_bottom_sub_box_wrapper div.section03_bottom_img_box_wrapper ul li.section03_img_box {
    height: 160px;
    border-radius: 10px;
    padding: 16px 6px 16px 10px;
  }
}
section#section03 div.section03_bottom_sub_box_wrapper div.section03_bottom_img_box_wrapper ul li.section03_img_box:nth-child(1){
  background-image: linear-gradient(180deg, #1E306900 0%, #2b4392c2 87%, #465994ef 100%) , url('https://teriwoo0519.cafe24.com/tomo/1_20.webp');
}
section#section03 div.section03_bottom_sub_box_wrapper div.section03_bottom_img_box_wrapper ul li.section03_img_box:nth-child(2){
  background-image:linear-gradient(180deg, #1E306900 0%, #2b4392c2 87%, #465994ef 100%) ,url('https://teriwoo0519.cafe24.com/tomo/1_21.webp');

}
section#section03 div.section03_bottom_sub_box_wrapper div.section03_bottom_img_box_wrapper ul li.section03_img_box:nth-child(3){
  background-image:linear-gradient(180deg, #1E306900 0%, #2b4392c2 87%, #465994ef 100%) ,url('https://teriwoo0519.cafe24.com/tomo/1_13.webp');
}
section#section03 div.section03_bottom_sub_box_wrapper div.section03_bottom_img_box_wrapper ul li.section03_img_box:nth-child(4){
  background-image:linear-gradient(180deg, #1E306900 0%, #2b4392c2 87%, #465994ef 100%) ,url('https://teriwoo0519.cafe24.com/tomo/1_10.webp');
}

/* section03  - bottom - img - description */
section#section03  div.section03_bottom_sub_box_wrapper  div.section03_bottom_img_box_wrapper ul li.section03_img_box p.img_box_small {
  color: #fff;
  text-align: left;
  margin-bottom: 8px;
  font-size: 17px;
}
@media(max-width:1400px){
  section#section03 div.section03_bottom_sub_box_wrapper div.section03_bottom_img_box_wrapper ul li.section03_img_box p.img_box_small {
    font-size:1vw;
  }
}
section#section03 div.section03_bottom_sub_box_wrapper  div.section03_bottom_img_box_wrapper ul li.section03_img_box strong.img_box_strong {
  color: #fff;
  text-align: left;
  font-size:13px;
}
@media(max-width:1400px){
  section#section03 div.section03_bottom_sub_box_wrapper div.section03_bottom_img_box_wrapper ul li.section03_img_box strong.img_box_strong {
    font-size:1.1vw
  }
}
@media(max-width:768px){
  section#section03 div.section03_bottom_sub_box_wrapper div.section03_bottom_img_box_wrapper ul li.section03_img_box p.img_box_small {
    font-size: 13px;
  }
  section#section03 div.section03_bottom_sub_box_wrapper  div.section03_bottom_img_box_wrapper ul li.section03_img_box strong.img_box_strong  {
    font-size: 12px;
  }
  section#section03 div.section03_bottom_sub_box_wrapper div.section03_bottom_img_box_wrapper ul li.section03_img_box strong.img_box_strong br {
    display:none;
  }
}


/* section04 */ 
section#section04 {
  margin-top: 158px;
  max-width: 1600px;
  margin: 158px auto 0;
}
@media (max-width:1400px){
  section#section04 {
    max-width:90%;
  }
}
@media (max-width:768px) {
  section#section04 {
    margin: 84px auto 0;
  }
}
/* section04  - top */ 
section#section04 div.section04_top_sub_box_wrapper {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 110px;
  padding: 0px 119px;
}
@media (max-width:1400px){
  section#section04 div.section04_top_sub_box_wrapper {
    width:100%;
    max-width:100%;
    padding:0;
    gap: 40px;
  }
}
@media(max-width:768px){
  section#section04 div.section04_top_sub_box_wrapper {
    flex-direction:column;
  }
}
/* section04  - top - left  */ 
section#section04 div.section04_top_sub_box_wrapper div.section04_top_left_box {
  text-align: right;
}
section#section04 div.section04_top_sub_box_wrapper div.section04_top_left_box h4 {}
section#section04 div.section04_top_sub_box_wrapper div.section04_top_left_box p {}

/* section04  - top - left - button*/ 
section#section04 div.section04_top_sub_box_wrapper div.section04_top_left_box button.snstomo_detail {}


/* section04  - top - right */ 
section#section04 div.section04_top_sub_box_wrapper div.section04_top_right_box {
  /* width: 100%; */
  display: flex;
  justify-content: end;
}
@media (max-width:1400px){
  section#section04 div.section04_top_sub_box_wrapper div.section04_top_right_box {
    display:flex;
    justify-content:end;
    /* width: 100%; */
  }
}
section#section04 div.section04_top_sub_box_wrapper div.section04_top_right_box img {
  width: 560px;
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0px 0px 40px #1E30694D;
}
@media (max-width:768px){
  section#section04 div.section04_top_sub_box_wrapper div.section04_top_right_box img {
    width: 100%;
    border-radius:10px;
  }
}

/* section04  - bottom */ 
section#section04 div.section04_bottom_sub_box_wrapper {
  max-width: 1600px;
  margin: 158px auto;
}
@media (max-width:1400px){
  section#section04 div.section04_bottom_sub_box_wrapper {
    max-width: 100%;
  }
}
@media(max-width:768px){
  section#section04 div.section04_bottom_sub_box_wrapper {
    margin: 84px auto 54px;
  }
}
section#section04 div.section04_bottom_sub_box_wrapper div.section04_grid_box_wrapper {}
section#section04 div.section04_bottom_sub_box_wrapper div.section04_grid_box_wrapper ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 0 115px;
}
@media (max-width:1400px){
  section#section04 div.section04_bottom_sub_box_wrapper div.section04_grid_box_wrapper ul  {
    padding:0;
  }
}
@media (max-width:768px){
  section#section04 div.section04_bottom_sub_box_wrapper div.section04_grid_box_wrapper ul  {
    grid-template-columns:1fr 1fr;
  }
}
section#section04 div.section04_bottom_sub_box_wrapper div.section04_grid_box_wrapper ul li.grid_box {
  box-shadow: 0px 0px 20px #6BBBD04D;
  border: 1px solid #6BBBD0;
  border-radius: 20px;
  text-align: center;
  padding: 77px;
}
@media (max-width:1400px){
  section#section04 div.section04_bottom_sub_box_wrapper div.section04_grid_box_wrapper ul li.grid_box {
    padding:77px 0;
  }
}
@media (max-width:768px){
  section#section04 div.section04_bottom_sub_box_wrapper div.section04_grid_box_wrapper ul li.grid_box {
    padding:45px 0;
  }
}
section#section04 div.section04_bottom_sub_box_wrapper div.section04_grid_box_wrapper ul li.grid_box img{
  max-width: 80px;
  max-height: 80px;
}
@media (max-width:768px){
  section#section04 div.section04_bottom_sub_box_wrapper div.section04_grid_box_wrapper ul li.grid_box img {
    max-width:50px;
    max-height:50px;
  }
}
section#section04 div.section04_bottom_sub_box_wrapper div.section04_grid_box_wrapper ul li.grid_box p.sns_description {
  color: #1E3069;
  font-size: 16px;
  font-weight: 600;
  padding-top: 10px;
}
@media(max-width:400px){
  section#section04 div.section04_bottom_sub_box_wrapper div.section04_grid_box_wrapper ul li.grid_box p.sns_description {
    font-size:12px;
  }
}

/* section05 */
section#section05 {max-width: 1400px;margin: auto;}
@media(max-width:1400px){
  section#section05 {
    max-width:90%;
  }
}
/* section05 - swiper */
section#section05 div.swiper {}
section#section05 div.swiper div.swiper-wrapper {}
section#section05 div.swiper div.swiper-wrapper div.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 70px;
  padding-top: 51px;
  padding-bottom: 210px;
}
@media(max-width:768px){
  section#section05 div.swiper div.swiper-wrapper div.swiper-slide {
    gap:30px;
    padding-bottom: 50px;
    flex-direction: column;
  }
}
section#section05 div.swiper div.swiper-wrapper div.swiper-slide div.swiper_img_wrapper {
  box-shadow: 0px 0px 40px #1E306933;
  border-radius: 20px;
  position: relative;
}
section#section05 div.swiper div.swiper-wrapper div.swiper-slide div.swiper_img_wrapper img {
  max-width: 200px;
  max-height: 200px;
}
@media(max-width:400px){
  section#section05 div.swiper div.swiper-wrapper div.swiper-slide div.swiper_img_wrapper img {
    max-width:156px;
    max-height:156px;
  }
}

section#section05 div.swiper div.swiper-wrapper div.swiper-slide div.swiper_img_box_bottom {
  background: #1E3069;
  padding: 25px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
section#section05 div.swiper div.swiper-wrapper div.swiper-slide div.swiper_img_box_bottom p {
  color: #fff;
  text-align: center;
}

section#section05 div.swiper div.swiper-wrapper div.swiper_contents_wrapper {width: auto;}
@media(max-width:1400px){
  section#section05 div.swiper div.swiper-wrapper div.swiper_contents_wrapper {
    width:500px;
  }
}
@media (max-width:1000px){
  section#section05 div.swiper div.swiper-wrapper div.swiper_contents_wrapper {
    width:300px;
  }
}
@media (max-width:768px){
  section#section05 div.swiper div.swiper-wrapper div.swiper_contents_wrapper {
    width:auto;
    max-width:90%;
    margin:auto;
    text-align: center;
  }
}

section#section05 div.swiper div.swiper-wrapper div.swiper_contents_wrapper strong{
  font-size: 16px;
  font-weight: 500;
  line-height:1.7;
}
@media (max-width:400px){
  section#section05 div.swiper div.swiper-wrapper div.swiper_contents_wrapper strong {
    font-size:12px;
  }
}
@media(max-width:768px){
  section#section05 div.swiper div.swiper-wrapper div.swiper_contents_wrapper strong br{
    display:none; 
  }
}

section#section05 .swiper-button-prev {
  color:#1E3069;
  transform: translateY(calc(-50% - 50px));
}

section#section05 .swiper-button-next {
  color:#1E3069;
  transform: translateY(calc(-50% - 50px));
}
@media (max-width:1000px){
  section#section05 .swiper-button-prev {
    transform: translateY(calc(-50% - 100px));
  }
  section#section05 .swiper-button-next {
    color:#1E3069;
    transform: translateY(calc(-50% - 100px));
  }
}
@media(max-width:768px){
  section#section05 .swiper-button-prev {
    transform: translateY(calc(-50% - 90px));
  }
  section#section05 .swiper-button-next {
    transform: translateY(calc(-50% - 90px));
  }
}
@media(max-width:400px) {
  section#section05 .swiper-button-prev {
    transform: translateY(calc(-50% - 100px));
  }
  section#section05 .swiper-button-next {
    transform: translateY(calc(-50% - 100px));
  }
}




#login-modal {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  z-index:1000;
}

div.loginModal_header {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 10px 20px;
}
#resetPassword div.loginModal_header {
  justify-content: flex-start;
  width: 100%;
  padding: 0;
  width: 90%;
  padding-bottom: 20px;
}
@media (min-width: 768px) {
  div.loginModal_header  {
    position: absolute;
    top: 25px;
    left: 25px;
    padding: 0;
    z-index: 5;
  }
}

div.loginModal_header div.backIcon {
  width: 43px;
  height: 33px;
  background: #00000034;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
}
@media (min-width: 768px) {
  div.loginModal_header div.backIcon  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: initial;
    height: initial;
  }
}

div.loginModal_header div.backIcon img {
  width: 100%;
}
@media (min-width: 768px) {
  div.loginModal_header div.backIcon img  {
    width: 38px;
    height: 38px;
  }
}

div.loginModal_header div.backIcon p {
  display: none;
}
@media (min-width: 768px) {
  div.loginModal_header div.backIcon p  {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-top: 5px;
  }
}

div.loginModal_main {
  width: 100%;
  height: 100%;
  flex: 1;
}
@media (min-width: 768px) {
  div.loginModal_main  {
    display: flex;
  }
}

div.loginModal_leftWrapper, div.loginModal_rightWrapper {
  height: 100%;
}



@media (max-width:1600px){

}
/* 로그인 모달 back */
div.back {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #1E3069;
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 10px;
  border-radius: 5px;
  z-index: 999;
  cursor:pointer;
}
div.back img {

}
div.back a {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
@media (max-width:768px){
  div.back img {
    width:25px;
  }
}
div.back p {
  color: #fff;
  padding-top: 10px;
  font-weight: 600;
  font-size: 14px;
}
@media (max-width:768px){
  div.back p {
    display:none;
  }
}
div.loginModal_rightWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 20px;
  width: 100%;
}
@media (min-width: 768px) {
  div.loginModal_rightWrapper  {

  }
}
@media (max-width:375px){
  div.loginModal_rightWrapper {
    margin-top:22px;
  }
}


div.loginModal_rightWrapper_contents {
  width: 100%;
  max-width: 414px;
  padding: 0 32px;
}
@media (max-width:768px){
  div.loginModal_rightWrapper_contents {
    max-width:100%;
    padding:0;
  }
}
p.loginModal_rightWrapper_contents_title {
  font-size: 72px;
  font-weight: 600;
  color: #1E3069;
  margin-bottom: 32px;
  text-align: center;
}
@media (max-width:768px){
  p.loginModal_rightWrapper_contents_title {
    font-size:36px;
  }
}
div.loginModal_rightWrapper_inputWrapper ~div.loginModal_rightWrapper_inputWrapper {
  margin-top: 20px;
}

div.loginModal_rightWrapper_inputWrapper label {
  font-size: 15px;
  font-weight: 400;
  color: #222;
  margin-bottom: 5px;
}
@media (max-width:768px){
  div.loginModal_rightWrapper_inputWrapper label {
    font-size:12px;
  }
}

div.loginModal_rightWrapper_inputWrapper input {
  width: 100%;
  min-height: 44px;
  background: #fff;
  border: 2px solid #6BBBD0;
  border-radius: 10px;
  font-size: 14px;
  padding: 0 22px;
}
@media (max-width:768px){
  div.loginModal_rightWrapper_inputWrapper input {
    padding: 0 20px;
    font-size:11px;
    border-radius: 5px;
    min-height: 36px;
  }
}

div.loginModal_rightWrapper_inputWrapper input:autofill,
div.loginModal_rightWrapper_inputWrapper input:autofill:focus,
div.loginModal_rightWrapper_inputWrapper input:autofill:active {
  background: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

@media (hover: hover) {
  div.loginModal_rightWrapper_inputWrapper input:autofill:hover {
    background: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
  }
}

div.loginModal_rightWrapper_autoWrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 18px 0 30px;
}
@media (max-width:768px){
  div.loginModal_rightWrapper_autoWrapper {
    margin:13px 0 20px;
  }
}

div.loginModal_rightWrapper_autoWrapper label {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  font-size: 14px;
  color: #151515;
  font-weight: 500;
}
@media(max-width:768px){
  div.loginModal_rightWrapper_autoWrapper label {
    font-size:12px;
  }
}
#remember {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #898989;
  margin: 0 4px 0 0;
}
div.signin_etc {
  display: flex;
  text-align: center;
  justify-content: center;
  width: 100%;
  margin-top: 50px;
}
@media (max-width:768px){
  div.signin_etc {
    margin-top:30px;
  }
}
a.login_findPassword {color: #151515;font-size: 14px;font-weight: 600;}


a.login_signup {
  display: flex;
  align-items: center;
  margin-left: 6px;
  color: #151515;
  font-size: 14px;
  font-weight: 600;
}
@media (max-width:768px){
  a.login_findPassword {
    font-size:12px;
  }
  a.login_signup {
    font-size:12px;
  }
}


a.login_signup::before{
  display: inline-block;
  width: 1px;
  height: 11px;
  background: #444;
  margin-right: 6px;
  content: '';
}

div.captcha {
  display: flex;
  justify-content: center;
}

#login-modal button.loginButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 45px;
  background: #1E3069;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  padding-left: 0;
}
@media (max-width:768px){
  #login-modal button.loginButton {
    font-size:12px;
    border-radius: 5px;
    min-height: 36px;
    height: 36px;
  }
}

/* ---------------- Start reset password ---------------- */
#resetpassword {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  margin-top: 70px;
}
@media(min-width: 1024px) {
  #resetpassword {
    padding: 0;
  }
}

div.resetpassword_wrapper {
  width: 100%;
  background: #f8f8f8;
  border-radius: 5px;
}
@media(min-width: 1024px) {
  div.resetpassword_wrapper {
    max-width: 800px;
  }
}

div.resetpassword_contentsWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 36px 16px;
}
@media(min-width: 768px) {
  div.resetpassword_contentsWrapper {
    max-width: 370px;
    margin: 0 auto;
  }
}

p.resetpassword_title {
  width: 100%;
  border-bottom: 1px solid #c9c9c9;
  font-size: 16px;
  font-weight: 700;
  color: #707070;
  text-align: center;
  padding-bottom: 8px;
  margin-bottom: 28px;
}
@media(min-width: 768px) {
  p.resetpassword_title {
    font-size: 36px;
    width: 100%;
  }
}

div.resetpassword_inputWrapper {
  width: 100%;
  margin-bottom: 16px;
}

label.resetpassword_input_label {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}

input.resetpassword_input {
  width: 100%;
  min-height: 36px;
  background:#fff;
  border: 1px solid #ededed;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  font-size: 15px;
  font-weight: 500;
  color: #5d5d5d;
  padding: 0 8px;
}

@media (hover: hover) {
  input.resetpassword_input:hover {
    background: #E6EFFC;
  }
}

input.resetpassword_input:focus {
  border-color: #1E3069;
}

button.resetpassword_button {
  width: 100%;
  height: 45px;
  background: #1E3069;
  border:none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  padding-left: 0;
}

/* ---------------- End reset password ---------------- */
#order_comment {
  width:100%;
}
#payment{
  height:auto;
}
@media(max-width:760px){
  #payment{
    height:100%px;
    padding:25px;
    background:#FAFAFA;
    margin:0 auto;
    box-shadow:0px 5px 5px rgba(0,0,0,0.4);
  }
  #addfunds .tel_description{
    margin-top:20px;
  }
}
.button.cancel, .button.active{
  border: none;
  border-radius:3px;
  padding : 15px 10px 15px 10px !important;
  color:white;
}
.button.cancel{
  background: linear-gradient(to right, #9b111e, #d1180b);
}
.button.active{
  margin-left:3px !important;
  background: linear-gradient(to right, #0B67CE, #6CBBD0);
}

.logo-wrapper{
  margin-bottom:20px;
}
.logo-wrapper img{
  width:50px;
}
.explain-wrapper{
  margin-top:20px;
  justify-content:space-between;
  display:flex;
}

.explain-wrapper img{
  width:49%;
}
@media(max-width:900px){
  .pc-popup{
    display:none;
  }
}
.pc-popup{
  background-image:url('https://teriwoo0519.cafe24.com/tomo/pc-popup.webp');
  height:250px;
  display:none;
}
.mobile-popup{
  position:fixed;
  width:480px;
  height:690px;
  z-index:9999;
  top:45%;
  left:50%;
  transform:translate(-50%, -55%);
  display:none;
}
.mobile-popup img{
  width:100% !important;
}
#popup-close{
  position:absolute;
  top:10px;
  right:10px;
  width:120px;
  height:40px;
  color:black;
  background-color:white;
  background:white !important;
  border-radius:5px !important;
  z-index:99;
  transition:all 0.3s ease-in-out;
  font-weight:600;
  border:none;

}	
#popup-close:hover{
  background-color:gray;
  background:gray !important;
}

#mobile-popup-close{
  color:black;
  background-color:white;
  background:white !important;
  z-index:999;
  transition:all 0.3s ease-in-out;
  font-weight:600;
  border:none;
  border-top:2px solid rgba(0,0,0,0.3);

}	
#mobile-popup-close:hover{
  background-color:gray;
  background:gray !important;
}

.btn-wrap{
  position:fixed;
  bottom:50px;
  right:50px;
  z-index:90;

}
.btn-wrap a{
  width:auto;
  height:auto;
  display:flex;
  align-items:center;
  cursor:pointer;
  transition:all 0.3s ease-in-out;
}

.btn-wrap a:hover{
  transform:translateY(-10px);
}
.btn-wrap a.line-wrap{
  margin-top:35px;
}
.btn-wrap a.signup-wrap{
  margin-top:35px;
}
.btn-wrap a p{
  width:300px;
  border-radius:15px;
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #222;
  padding: 0 12px 0 20px;
  line-height:40px;
  height:40px;
  box-shadow:0px 3px 3px rgba(0,0,0,0.3);
  margin-right:20px;
  display: table-cell;
  vertical-align: middle;
  background:white;

}
@media(max-width:760px){
  .btn-wrap a p{
    display:none;
  }
  #pc-popup{
    display:none;
  }
  .btn-wrap{
    bottom:120px;
    right:10px;

  }

  .btn-wrap a{
    position:absolute;
  }
  .btn-wrap a.signup-wrap{
    bottom:120px;
  }
  .btn-wrap a.question-wrap{
    bottom:42.5px;
  }

  .mobile-popup{

    position:fixed;

    width:90vw;

    height:80vh;
    z-index:9999;

    top:50%;

    left:50%;

    transform:translate(-50%, -50%);

  }
}
.btn-wrap img{
  width:65px;
  margin:0 auto;
  display:block;
  border-radius:50%;
  padding:8px;
  position:absolute;
  right:0;
  box-shadow:0px 5px 5px rgba(0,0,0,0.3);
}
.btn-wrap img.question, .btn-wrap img.signup{
  width:65px;
  margin:0 auto;
  display:block;
  border-radius:50%;
  padding:2px;
  position:absolute;
  right:0;
  box-shadow:0px 5px 5px rgba(0,0,0,0.3);
}
.btn-wrap img.line{
  background: #3ace01;
}
.btn-wrap img.question{
  background: #1e3069;
}
.btn-wrap img.signup{
  background: #6cc4db;
}
.method-wrap{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  height:850px;
  width:540px;
  z-index:9999;
  box-shadow:0px 10px 10px rgba(0 ,0 ,0 ,0.7);
  display:none;
  background:white;
}

@media(max-width:1440px){
  .method-wrap{
    height:95vh;
    max-height:95vh;
    width:450px;
  }
}

@media(max-width:760px){
  .method-wrap{
    height:90vh;
    max-height:95vh;
    width:90vw;
  }
}
.method-wrap a{
  background:black;
  color:white;
  height:40px;
  width:100%;
  text-align:center;
  cursor:pointer;
  font-weight:600;
  font-size:16px;
  display:block;
  transition:all 0.3s ease-in-out;
  line-height:40px;
  vertical-align:middle;
}
.method-wrap a:hover{
  color:blue;
}
.method-wrap img{
  max-width:100%;
  max-height:100%;
}
.swiper-pagination {
  width: 100%;
  background-color: rgba(0, 0, 0, .5);
  bottom:0 !important;
}

.swiper-pagination-bullet {
  width: calc(100% / 5) !important;
  margin: 0 !important;

  line-height: 40px !important;
  height: 40px !important;
  border-radius: 0 !important;
  background-color: none !important;

}



.swiper-pagination-bullet span{
  color: #fff;
}
.mainSwiper > div > div > div > img{
  width:100% !important;
}
#main-swiper-pagination{
  display:block;
  text-align:center;
  align-items:center;
  justify-content:center;
}

.main-swiper-pagination .swiper-pagination-bullet {
  width: 10px !important;
  margin:0px 10px 0px 10px !important;

  line-height: 0px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background-color: none !important;
}
.welcome-popup{
  position:fixed;
  top:45%;
  left:50%;
  transform:translate(-50%, -50%);
  width:480px;
  height:800px;
  z-index:9999;
  box-shadow:0px 10px 10px rgba(0 ,0 ,0 ,0.7);
  background:white;
  display:none;

}
.welcome-popup img{
  width:480px;
}
@media(max-width:1440px){
  .welcome-popup{
    height:90vh;
    max-height:90vh;
    width:420px;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
  }
  .welcome-popup img{
    width:420px;
  }
}

@media(max-width:760px){
  .welcome-popup{
    height:auto;
    max-height:95vh;
    width:90vw;
  }
  .welcome-popup img{
    width:90vw;
  }

}

.welcome-btn-wrap{
  display:flex;
}





/*------------------------------------------------------------------------------------------*/
#newOrder {
  width: 100%;
}

div.newOrder_inputWrapper.services .select2-container {
  display: none !important;
}

@media (min-width: 1400px) {
  div.newOrder_wrapper {
    display: flex;
    height: auto;
    padding: 20px;
  }
}

div.newOrder_orderWrapper {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #EEEEEE;
  border-radius:15px;
  box-shadow:0px 5px 5px #FAFAFA;
  background:#FFFFFF;
}
@media (min-width: 1400px) {
  div.newOrder_orderWrapper {
    flex: 1;
    margin: 0 30px 0 0;
    padding:40px 20px 40px 20px;

  }
}
@media (max-width:1400px){
  div.newOrder_wrapper {padding: 15px 10px 30px 10px;}
}

div.newOrder_autoNoticeWrapper {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 2px;
  background: #5d5d5d;
  padding: 18px 10px;
  margin-bottom: 10px;
}

div.newOrder_autoNoticeWrapper img {
  display: block;
  width: 24px;
  height: 24px;
}

div.newOrder_autoNoticeWrapper p {
  font-size: 11px;
  font-weight: 400;
  color: #fff;
  text-align: center;
}

div.newOrder_snsTabWrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 18px;
}
@media (min-width: 768px) {
  div.newOrder_snsTabWrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  div.newOrder_snsTabWrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
  }
}

div.newOrder_snsTab {
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
  background: #FAFAFA;
  border: 2px solid transparent;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: #5d5d5d;
  padding: 3px 4px 3px 8px;
  cursor: pointer;
  box-shadow:inset 0 2px 4px #BCBCBC29;
}
@media (min-width: 1024px) {
  div.newOrder_snsTab {
    width: 150px;
  }
}

div.newOrder_snsTab.active {
  border: 2px solid #608aff;
  box-shadow: 0 0 0 1px #fff inset;
  color: #fff;
}
@media (hover: hover) {
  div.newOrder_snsTab:hover {
    border: 2px solid #608aff;
    box-shadow: 0 0 0 1px #fff inset;
    color: #fff;
  }
}
div.newOrder_snsTab.thread:hover {
  background-color:#000;
}
div.newOrder_snsTab.thread.active {
  background-color:#000;
}
div.newOrder_snsTab.japan-instagram.active {
  background: #C75CFF;
}
div.newOrder_snsTab.active p {
  color:#fff;
}
@media (hover: hover) {
  div.newOrder_snsTab.japan-instagram:hover {
    background: #C75CFF;
  }
}
div.newOrder_snsTab:hover p {
  color:#fff;
}
div.newOrder_snsTab.popular.active{
  background: #4FA1B6;
}
@media (hover: hover) {
  div.newOrder_snsTab.popular:hover {
    background: #4FA1B6;
  }
}

div.newOrder_snsTab.japan-facebook.active {
  background: #608AFF;
}
@media (hover: hover) {
  div.newOrder_snsTab.japan-facebook:hover {
    background: #608AFF;
  }
}

div.newOrder_snsTab.youtube.active {
  background: #E60000;
}
@media (hover: hover) {
  div.newOrder_snsTab.youtube:hover {
    background: #E60000;
  }
}

div.newOrder_snsTab.tiktok.active {
  background: #000;
}
@media (hover: hover) {
  div.newOrder_snsTab.tiktok:hover {
    background: #000;
  }
}

div.newOrder_snsTab.twitter.active {
  background: #60D3FF;
}
@media (hover: hover) {
  div.newOrder_snsTab.twitter:hover {
    background: #60D3FF;
  }
}

div.newOrder_snsTab.etc.active{
  background: #324d99;
}
@media (hover: hover) {
  div.newOrder_snsTab.etc:hover {
    background: #324d99;
  }
}


p.newOrder_snsTabName {
  margin-right: auto;
  color: #9F9F9F;
}

div.newOrder_snsTab img {
  display: block;
  width:26px;
  height:26px;
}

#order-form.japan-instagram div.newOrder_inputWrapper{
  /*background: #F4DEFF;
  border: 1px solid #F4DEFF;*/
  background: white;
  border:none;
}
#order-form.japan-instagram div.newOrder_inputWrapper.services {
  /*background: #E9BEFF;
  border: 1px solid #E9BEFF;*/
  background: white;
  border:none;
}
#order-form.thread div.newOrder_inputWrapper {
  background: #ececec;
  border: 1px solid #E0E0E0;
}
#order-form.popular div.newOrder_inputWrapper{
  background: #DEF6FC;
  border: 1px solid #DEF6FC;
}
#order-form.popular div.newOrder_inputWrapper.services {
  background: #A3D6E3;
  border: 1px solid #A3D6E3;
}

#order-form.japan-facebook div.newOrder_inputWrapper{
  background: #CCD9FF;
  border: 1px solid #CCD9FF;
}
#order-form.japan-facebook div.newOrder_inputWrapper.services {
  background: #A2BAFF;
  border: 1px solid #A2BAFF;
}

#order-form.youtube div.newOrder_inputWrapper{
  background: #ffdcdc;
  border: 1px solid #ffdcdc;
}
#order-form.youtube div.newOrder_inputWrapper.services {
  background: #ffb0b0;
  border: 1px solid #ffb0b0;
}

#order-form.tiktok div.newOrder_inputWrapper{
  background: #E0E0E0;
  border: 1px solid #E0E0E0;
}
#order-form.tiktok div.newOrder_inputWrapper.services {
  background: #CBCBCB;
  border: 1px solid #CBCBCB;
}

#order-form.twitter div.newOrder_inputWrapper{
  background: #E2F7FF;
  border: 1px solid #E2F7FF;
}
#order-form.twitter div.newOrder_inputWrapper.services {
  background: #B3EAFF;
  border: 1px solid #B3EAFF;
}

#order-form.etc div.newOrder_inputWrapper{
  background: #E1E6F4;
  border: 1px solid #E1E6F4;
}
#order-form.etc div.newOrder_inputWrapper.services {
  background: #C3CDE8;
  border: 1px solid #C3CDE8;
}
#order-form.thread div.newOrder_inputWrapper.services {
  background: #d3d3d3;
  border: 1px solid #CBCBCB;
}

div.newOrder_inputWrapper {
  width: 100%;
  /*border-radius: 3px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;*/
  padding: 12px 8px 16px 8px;
  border-radius:0px;
  box-shadow: none;
}

div.newOrder_inputWrapper.services {
  margin-bottom: 12px;
  margin-top:12px;
}

div.newOrder_inputWrapper.fields {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;

}

div.newOrder_inputWrapper_titleImage {
  display: flex;
  gap: 6px;
  margin-bottom: 11px;
}

div.newOrder_inputWrapper_titleImage img {
  width: 36px;
  height: 25px;
}

label.newOrder_inputWrapper_title {
  display: flex;
  gap:6px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 17px;
  font-weight: 700;
  color: black;
  margin-bottom:0px;
}

#orderform-category {
  display: none;
}
#order_delay select#field-orderform-fields-delay {
  line-height: 1.2;
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
  font-weight: 500;
  color: #222;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 3px;

}
#order_comment_person {
  display: flex;
  align-items: center;
}

#order_check div.form-group__checkbox {
  display: flex;
  align-items: center;
} 

#order_check input#field-orderform-fields-check, #order_check span.checkmark {

}

#dripfeed-options {
  margin-top: 16px;
}

#order_min div.row {
  display: flex;
  margin: 0;
}

#order_min div.row div.col-md-6, #order_delay_expiry div.col-md-6{
  flex: 1;
  padding: 0;
}

#order_min div.row div.col-md-6 ~ div.col-md-6 {
  margin-left: 10px;
}

#order_old_posts {
  display: none;
}

@media (min-width: 992px) {
  #order_delay div.row div.col-md-6, #order_delay_expiry div.col-md-6 {
    width: 100%;
    float:initial;
  }
}

#newOrder-services {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}
@media (min-width: 1024px) {
  #newOrder-services {
    display: flex;
    flex-wrap: wrap;
  }
}


div.newOrder_serviceTab {
  background: #FAFAFA;;

  border:0;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 600;
  color: #5d5d5d;
  padding: 12px;
  cursor: pointer;
  box-shadow: inset 0 3px 6px #BCBCBC29;
}
@media(max-width:760px){
  div.newOrder_orderWrapper{
    box-shadow:none;
    border:none;
  }
  div.newOrder_serviceTab {
    background: #FAFAFA;;
    border:0;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    color: #5d5d5d;
    padding: 10px 5px 10px 5px;
    cursor: pointer;
    box-shadow: inset 0 3px 6px #BCBCBC29;
    height:60px;
    align-items:center;
    vertical-align:middle;
    justify-content:center;
    display:flex;
  }
}


div.newOrder_serviceTab.active {
  background: #1E3069;
  color: #fff;
}

a.newOrder_moveButton {
  background: #000;
  border-radius: 3px;
  font-weight: 600;
  color: #fff;
  padding: 2px 5px 1px;
}
@media (min-width: 1400px) {
  a.newOrder_moveButton {
    display: none;
  }
}
/* 주문하기 select box */
#neworder span.select2-selection.select2-selection--single.form-control {
  border-radius: 3px;
  width: 100%;
  max-width: 100%;
  max-height: 32px;
  margin: auto;
  background-color: #fff;
  display: flex;
  align-items: center;
  font-weight: 600;
  border: 1px solid #d9d9d9;
  height: auto;
  line-height:1;
}
/* 주문하기 select box active */
#neworder .span.select2.select2-container.select2-container--default.select2-container--below.select2-container--open .select2-selection.select2-selection--single.form-control {
  background-color: #0067ce;
  color: #fff;
  line-height: 1;
}
#neworder span.select2.select2-container.select2-container--default.select2-container--below.select2-container--open .select2-selection.select2-selection--single.form-control {
  background-color:#0067ce!important;
}
/* 주문하기 select box arrow */
#neworder .select2-container--default .select2-selection--single .select2-selection__arrow {
  right:12px;
}
#neworder .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #fff transparent;
  border-width: 0 4px 5px 4px;
}
/* 주문하기 select box 드롭다운 배경 */
span.select2-dropdown.dropdown-menu.select2-dropdown--below {
  background-color:#fff;
}
span.select2-dropdown.dropdown-menu.select2-dropdown--below {
  background-color: #fff;
}
span.select2-results {
  background-color:#fff;
}
span.select2-dropdown.dropdown-menu.select2-dropdown--below span.select2-selection__text {
  color: #222;
  font-weight: 500;
}
.dropdown-menu {
  background-color:#fff!important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #ffffff;
  background-color: #E6EFFC!important;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #E6EFFC!important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  text-decoration: none;
  color: #ffffff;
  background-color: #E6EFFC!important;
}

/* 주문하기 select box font */
#neworder span.selection__text {
  color:#222;
  font-weight: 500;
}
#neworder .select2-container .select2-selection__text {
  line-height: 1.2;
}
/* 주문하기 select box font active */
.select2-container--open .select2-selection__rendered span.select2-selection__text {
  color:#fff;
}   

#orderform-service {
  /*color: #333;
  border-radius: 3px;
  width: 100%;
  max-width: 100%;
  min-height: 32px;
  margin: auto;
  background-color: #fff;
  display: flex;
  align-items: center;
  font-weight: 600;
  border: 1px solid #d9d9d9;
  height: auto;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;*/
  align-items: center;
  text-align:center;
  width: 100%;
  max-width: 100%;
  height:auto !important;
  /* Reset */
  appearance: none;
  border-radius:18px;
  border: 0;
  outline: 0;
  font: inherit;
  /* Personalize */
  padding:15px;
  font-weight:600;
  color: #5d5d5d;
  background: var(--arrow-icon) no-repeat right 0.8em center/1.4em, linear-gradient(to left, var(--arrow-bg) 3em, var(--select-bg) 3em);
  background-color: #FAFAFA;
  box-shadow: inset 0 3px 6px #BCBCBC29;
  cursor: pointer;

}

#orderform-serviceselect::-ms-expand {
  display: none;
}
#orderform-serviceselect:focus {
  outline: none;
}
#orderform-serviceselect option {
  color: inherit;
  background-color: var(--option-bg);
}
#orderform-service:focus {
  box-shadow: none;
  outline: 0;
}
@media(max-width:760px){
  #orderform-service {
    border-radius:18px;
    border: 0;
    outline: 0;
    font-weight:normal;
    font-size: 12px;
    /* Personalize */
    padding:15px 8px 15px 8px;
    color: #5d5d5d;
    background:none;
    background-color: #FAFAFA;
    box-shadow: inset 0 3px 6px #BCBCBC29;
  }

  #orderform-serviceselect::-ms-expand {
    display: none;
  }
  #orderform-serviceselect:focus {
    outline: none;
  }
  #orderform-serviceselect option {
    color: inherit;
    background-color: var(--option-bg);
    font-size:12px;
  }
  #orderform-service:focus {
    box-shadow: none;
    outline: 0;
  }
}
#fields {
  margin-top: 12px;
}

#fields input, input.form-control {
  min-height: 32px;
  border: 1px solid #d9d9d9;
  border-radius: 18px;
  box-shadow: inset 0 3px 6px #BCBCBC29;
  font-size: 13px;
  padding: 15px;
  height: auto;
  background-color: #FAFAFA !important;
}

#fields div.newOrder_inputWrapper ~ div.newOrder_inputWrapper {
  margin-top: 12px;
}

#fields input:disabled, .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  background: #d8d8d8;
  border: 1px solid #d9d9d9;
  color: #222;
}

small.help-block.min-max {
  font-size: 11px;
  font-weight: 600;
  color: #adadad;
  margin: 5px 0;
  padding-left: 3px;
}


div.newOrder_customComment_resetButton {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 3px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  font-size: 14px;
  font-weight: 700;
  color: #5d5d5d;
  gap: 3px;
  padding: 10px;
  margin-left: auto;
  cursor: pointer;
}
div.newOrder_customComment_deleteButton {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 3px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  font-size: 14px;
  font-weight: 700;
  color: #5d5d5d;
  gap: 3px;
  padding: 10px;
  margin-left: auto;
  cursor: pointer;
}

div.newOrder_customComment_deleteButton img {
  width:auto;
}
div.newOrder_customComment_resetButton img {
  width: 16px;
  height: 16px;
}
/* custom comment title */
@media(max-width:400px){
  div#order_comment div.newOrder_inputWrapper_titleImage {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  div.newOrder_customComment_deleteButton {
    margin-left:0;
  }
  div.newOrder_customComment_resetButton {
    margin-left:0;
  }
}
div.newOrder_customComment_categoryWrapper {
  display: flex;
  width: 100%;
  border-bottom: 1px dashed #d8d8d8;
  gap: 4px;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

div.newOrder_customComment_category {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: 36px;
  background: #d8d8d8;
  border: 1px solid #fff;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  font-size: 14px;
  font-weight: 600;
  color: #adadad;
  gap: 4px;
  padding: 8px 0;
  cursor: pointer;
}
div.newOrder_customComment_category:hover {
  background: #E6EFFC;
}

div.newOrder_customComment_category.active {
  background: #253858;
  color: #fff;
}
div.newOrder_customComment_category.active:hover {
  background: #253858;
}

div.newOrder_customComment_category img {
  display: block;
  width: 20px;
  height: 20px;
}

div.newOrder_customComment_category img.active {
  display: none;
}

div.newOrder_customComment_subCategoryWrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

div.newOrder_customComment_subCategory {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  font-size: 13px;
  color: #333;
  padding: 0 9px;
  cursor: pointer;
}

@media (hover: hover) {
  div.newOrder_customComment_subCategory:hover {
    background: #E6EFFC;
  }
}

@media (hover: hover) {
  div.newOrder_customComment_subCategory.active {
    background: #8A98C0;
    color: #fff;
  }
}
@media (hover: hover) {
  div.newOrder_customComment_subCategory.active:hover {
    background: #8A98C0;
    color: #fff;
  }
}

#fields #order_delay_expiry div.input-group {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

#fields #field-orderform-fields-expiry {
  flex: 1;
  width: 100%;
}

#fields span.newOrder_expiry_icon {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  right: calc(32px + 12px);
  transform: translateY(-50%);
  background-image: url('https://storage.perfectcdn.com/7mcojg/r0ey5qzco99d2458.png');
  background-repeat : no-repeat;
  background-size : cover;
  z-index: 5;
}

#fields #order_delay_expiry span.input-group-btn {
  display: block;
  flex: 0 0 32px;
  height: 32px;
}

#fields #order_delay_expiry span.input-group-btn button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

#fields #order_delay_expiry span.input-group-btn button > img{
  width: 24px;
  height: 24px;
}

#fields #order_delay_expiry span.input-group-btn button:hover, 
#fields #order_delay_expiry span.input-group-btn button:focus {
  box-shadow: none !important;
  outline: none !important;
}

#fields #order_delay_expiry span.input-group-btn button svg {
  display: none;
}

img.newOrder_division {
  width: 100%;
  margin: 28px 0 12px;
}

div.newOrder_paymentWrapper {
  width: 100%;
  background: #fff;
}
@media (min-width: 1024px) {
  div.newOrder_paymentWrapper {
    display: flex;
  }
}

div.newOrder_paymentContents, div.newOrder_userInfoWrapper {
  flex: 1;
}

div.newOrder_userInfoWrapper {
  display: flex;
  background: #f4f5f7;
  border-radius: 3px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  padding: 12px 6px;
  margin: 20px 0 0 0;
}
@media (min-width: 1024px) {
  div.newOrder_userInfoWrapper {
    margin: 0 0 0 10px;
  }
}

div.newOrder_userInfoBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  background: #e9e6fd;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  padding: 12px 0;
}

div.newOrder_userInfoBox ~ div.newOrder_userInfoBox {
  margin-left: 6px;
}

p.newOrder_userInfoBox_title {
  font-size: 12px;
  font-weight: 600;
  color: #253858;
  margin-bottom: 10px;
}

p.newOrder_userInfoBox_count {
  font-size: 15px;
  font-weight: 900;
  color: #253858;
}

label.newOrder_paymentLabel {
  font-size: 14px;
  font-weight: 700;
  color: #222;
  margin: 6px 0 4px;
}

button.newOrder_orderButton {
  width: 100%;
  min-height: 38px;
  background: #1E3069;
  border:none;
  border-radius: 5px;
  font-size: 14px;
  color: #fff;
  margin-top: 12px;
  padding-left: 0;
}

div.newOrder_rightWrapper {
  width: 100%;
}
@media (min-width: 1400px) {
  div.newOrder_rightWrapper {
    flex: 1;
  }
}

div.newOrder_noticeWrapper {
  background: #F4F5F7;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  padding: 12px 12px 16px 12px;
  margin-bottom: 20px;
}

div.newOrder_noticeTabWrapper {
  display: flex;
  border-bottom: 1px solid #B5BFDB;
  padding-bottom: 10px;
  margin-bottom: 5px;
}
@media (min-width: 768px) {
  div.newOrder_noticeTabWrapper {
    display:inline-flex;
    width: 100%;
  }
}

div.newOrder_noticeTab {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  position: relative;
  background: #f4f4f4;
  color: #5d5d5d;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700; 
  padding: 4px 10px;
  cursor: pointer;
}
@media (min-width: 768px) {
  div.newOrder_noticeTab {
    flex: 0 1 auto;
  }
}

div.newOrder_noticeTab.active {
  background: #0B67CE;
  color: #fff;
}

div.newOrder_noticeTab.active::after {
  width: 100%;
  height: 2px;
  position: absolute;
  top: calc(100% + 10px);
  background: #608AFF;
  content: '';
}

div.newOrder_noticeTab ~ div.newOrder_noticeTab  {
  margin-left: 10px;
}

div.newOrder_noticeListWrapper {
  max-height: 150px;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 5px;
  user-select: none;
  overflow-y: auto;
}

div.newOrder_noticeListWrapper div.noticeContents {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: #222;
  gap: 3px;
  padding: 4px 6px 5px;
}

@media (hover: hover) {
  div.noticeContents:hover {
    background: #E6EFFC;
  }
}

div.newOrder_noticeListWrapper span.button {
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  transition: all 0.44s ease;
}

div.newOrder_noticeListWrapper span.button.proceeding {
  background: #608aff;
}

div.newOrder_noticeListWrapper span.button.success {
  background: #253858;
}

div.newOrder_noticeListWrapper span.button.operation {
  background: #FFA412;
}

div.newOrder_noticeListWrapper span.button:hover {
  transform: translateY(-4px) translateZ(0);
}

div.noticeContents ~ div.noticeContents {
  border-top: 1px solid #d8d8d8;
}

div.newOrder_orderLinkGuideWrapper {
  display: none;
  flex-direction: column;
  padding-top: 16px; 
}
@media (min-width: 768px) {
  div.newOrder_orderLinkGuideWrapper {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  div.newOrder_orderLinkGuideContents {
    flex: 1;
  }
}

div.newOrder_orderLinkGuideContents ~ div.newOrder_orderLinkGuideContents {
  margin-top: 18px;
}
@media (min-width: 768px) {
  div.newOrder_orderLinkGuideContents ~ div.newOrder_orderLinkGuideContents {
    margin: 0 0 0 18px;
  }
}

div.newOrder_orderLinkGuideTitleWrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  div.newOrder_orderLinkGuideTitleWrapper {
    justify-content: center;
  }
}

div.newOrder_orderLinkGuideTitleWrapper img {
  width: 24px;
  margin-right: 4px;
}

div.newOrder_orderLinkGuideTitleWrapper p {
  font-size: 13px;
  font-weight: 600;
  color: #5d5d5d;
  letter-spacing: -0.5px;
}

div.newOrder_orderLinkGuideBox {
  background: #fff;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  font-size: 13px;
  font-weight: 500;
  color: #5d5d5d;
  padding: 11px 12px;
  cursor: pointer;
}

div.newOrder_orderLinkGuideBox ~ div.newOrder_orderLinkGuideBox {
  margin-top: 4px;
}

#newOrder-orderlink-guide-modal {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.6);
  z-index: 150;
}

div.orderLinkGuideModal_wrapper {
  width: 90%;
  max-width: 438px;
  height: auto;
  border: 1px solid #8a98c0;
  border-radius: 10px;
  background: #3B3B3B;
}

div.orderLinkGuideModal_titleWrapper {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #8a98c0;
  padding: 27px 16px;
}

div.orderLinkGuideModal_titleWrapper img {
  width: 20px;
  margin-right: 8px;
}

div.orderLinkGuideModal_titleWrapper p {
  font-size: 13px;
  font-weight: 600;
  color: #8A98C0;
  letter-spacing: 2px;  
}
@media (min-width: 768px) {
  div.orderLinkGuideModal_titleWrapper p {
    font-size: 14px;
  }
}


div.orderLinkGuideModal_closeButton {
  width: 36px;
  height: 36px;
  margin-left: auto;
  cursor: pointer;
}

div.orderLinkGuideModal_closeButton i.xi-close-min {
  font-size: 37px;
  color: #8a98c0;
}

div.orderLinkGuideModal_closeButton i.xi-close-min::before {
  content:"\e922";
}

div.orderLinkGuideModal_contents {
  padding: 18px 12px;
}

div.orderLinkGuideModal_contents p {
  font-size: 20px;
  font-weight: 700;
  color:#fff;
  margin-bottom: 18px;
}

div.orderLinkGuideModal_contents_imageWrapper {
  width: 100%;
  max-height: 50vh;
  border-radius: 5px;
  overflow-x: hidden;
  overflow-y: auto;
}

div.orderLinkGuideModal_contents img {
  width: 100%;
}


div.newOrder_descriptionWrapper {
  flex: 1;
  width: 100%;
  margin-bottom: 20px;
  padding: 20px 0px 20px 0px;
}

@media (min-width:1400px){
  div.newOrder_descriptionWrapper {
    width:100%;
    padding:0;
    margin-bottom:0;
  }
}
#newOrder_description {
  width: 100%;

  /*background: #f4f5f7;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #dbdbdb;
  padding: 20px 12px;*/
  background: #FFFFFF;
  border-radius: 0px;
  box-shadow: none;
  padding:0px;

}

p.newOrder_descriptionTitle {
  font-size: 14px;
  font-weight: 700;
  color: #5d5d5d;
  margin-bottom: 16px;
}

div.newOrder_descriptionContents {
  width: 100%;
  background: #fff;
  border: 1px solid #F4F5F7;
  padding: 16px;
  box-shadow:0px 3px 6px #FAFAFA;
  border-radius:18px;
}
@media(max-width:760px){
  div.newOrder_descriptionContents {
    width: 100%;
    background: #fff;
    border: 1px solid #F4F5F7;
    box-shadow:0px 3px 6px #FAFAFA;
    padding: 10px;
  }
}

div.newOrder_descriptionLabelWrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

div.newOrder_descriptionLabel {
  display: flex;
  align-items: center;
  border-radius: 3px;
  padding: 7px 10px;
}

div.newOrder_descriptionLabel img {
  display: block;
  width: 18px;
  height: 18px;
}

div.newOrder_descriptionLabel p {
  font-size: 13px;
  font-weight: 600;
}

div.newOrder_descriptionLabel.startTime {
  background: #FEE8E2;
}
div.newOrder_descriptionLabel.startTime p {
  color: #D92F0E;
}
div.newOrder_descriptionLabel.startTime span.newOrder_descriptionLabelText {
  color: #D92F0E;
}

div.newOrder_descriptionLabel.workSpeed {
  background: #E9E6FD;
}
div.newOrder_descriptionLabel.workSpeed p {
  color: #382C89;
}
div.newOrder_descriptionLabel.workSpeed span.newOrder_descriptionLabelText {
  color: #382C89;
}

div.newOrder_descriptionLabel.min, div.newOrder_descriptionLabel.max {
  background: #46526C;
}
div.newOrder_descriptionLabel.min p, div.newOrder_descriptionLabel.max p {
  color: #fff;
}
div.newOrder_descriptionLabel.min span, div.newOrder_descriptionLabel.max span {
  color:#fff;
}

div.newOrder_descriptionText {
  font-size: 13px;
}
/*-------------------------------------------------------------------------------------*/


div.nav_menuGroup.active div.nav_menuSubWrapper {
  height: 0;
  opacity: 0;
  transition: ease-out .4s;
  overflow:hidden;
}

div.nav_menuGroup:last-of-type {
  border-bottom: 1px solid #ddd;
  padding-bottom: 14px;
}

div.nav_contents > div.nav_menuWrapper > a.nav_menu:first-of-type {
  margin-top: 14px;
}

a.nav_menu {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  border-radius: 5px;
  font-size: 14px;
  padding: 6px 16px;
}

a.nav_menu ~ a.nav_menu {
  margin-top: 2px;
}

@media (hover: hover) {
  a.nav_menu:hover {
    background: #E6EFFC;
  }
}

a.nav_menu.active {
  position: relative;
  background: #E6EFFC;
  font-weight: 600!important;
  color: #608AFF!important;
}


p.nav_menuTitle {
  position: relative;
  display: flex;
  color: #333;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  height: 30px;
  align-items: center;
}
.nav_menuGroup a.nav_menu:first-of-type {
  margin-top: 0;
}
a.nav_menu:first-of-type {
  margin-top:14px;
}

p.nav_menuTitle::before {
  font-family: xeicon;
  width: auto;
  height: auto;
  font-size: 13px;
  transition: cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.3s;
  content: "\e942";
}

div.nav_menuGroup.active p.nav_menuTitle::before {
  transform: rotate(-90deg);
}

div.nav_researchWrapper {
  width: 100%;
  background: #e7e7e7;
  padding: 13px;
  margin-bottom: 10px;
}



div.nav_contents_userInfo {
  flex: 1;
}

p.nav_contetns_loginText {
  font-size: 13px;
  font-weight: 600;
  width: 100%;
}
@media (max-width:500px){
  p.nav_contetns_loginText {
    width:100%;
  }
}
@media (min-width: 1024px) {
  p.nav_contetns_loginText {
    font-size: 12px;
  }
}
a.notauthButton {
  position: relative;
  width: 100%;
  background: linear-gradient(to right, #0B67CE, #6CBBD0);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  color: #fff!important;
  text-align: center;
  padding: 10px;
  margin-bottom: 10px !important;
  cursor: pointer;
  display: flex;
  justify-content: center;
  max-width: 100%;
  margin: auto;
}
a.notauthButton:hover {
  background: linear-gradient(to right, #0B67CE, #6CBBD0);
}

a.notauthButton img {
  display:none !important;
}
#tutorial3 #open-login-modal-3 img{
	width:0px !important;
  display:none !important;
  
}

/*---------*/
#payment-sucees {
  width: 100%;
}

div.paymentSuccess_wrapper {
  width: 100%;
}

p.paymentSuccess_title {
  width: 100%;
  background: #E6EFFC;
  font-size: 18px;
  font-weight: 700;
  color: #5d5d5d;
  text-align: center;
  padding: 32px 16px;
}

div.paymentSuccess_contentsWrapper {
  display: none;
  background: #fff;
  width: 100%;
}

div.paymentSuccess_contents {
  padding: 20px 16px;
}

p.paymentSuccess_contents_title {
  font-size: 19px;
  font-weight: 700;
  color: #333;
  margin-bottom: 13px;
}

div.paymentSuccess_row {
  display: flex;
  align-items: center;
}

div.paymentSuccess_row ~ div.paymentSuccess_row {
  margin-top: 8px;
}

p.paymentSuccess_row_title {
  font-size: 15px;
  font-weight: 400;
  color: #222;
  margin-right: auto;
}

p.paymentSuccess_row_text {
  font-size: 15px;
  font-weight: 700;
  color: #222;
}

div.paymentSuccess_noticeWrapper {
  width: 100%;
  background: #E6EFFC;
  padding: 32px 16px;
  margin-bottom: 24px;
}

div.paymentSuccess_notice_row {
  display: flex;
}

div.paymentSuccess_notice_row ~ div.paymentSuccess_notice_row {
  margin-top: 4px;
}

p.paymentSuccess_notice_row_numbering, p.paymentSuccess_notice_row_text {
  font-size: 15px;
  font-weight: 500;
  color: #5d5d5d;
}
.paymentSuccess_notice_row:nth-of-type(1) p.paymentSuccess_notice_row_text {
  font-size: 17px;
  font-weight: 700;
  color: #e52626;
  line-height: 1.3;
}
p.paymentSuccess_notice_row_numbering {
  margin-right: 4px;
}

div.paymentSuccess_closeButtonWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 16px;
}

div.paymentSuccess_closeButton {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 44px;
  background: #253858;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}
.mobile-popup-wrap{

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9990;
  display:none;
}
.mobile-popup .welcome-btn-wrap{
  bottom:0;
  position:relative;
}
#pc-line-wrap{
  height:60px;
}
.mobile-line-banner{
  display:none;
}
@media(max-width:600px){
  .mobile-line-banner{
    display:block;
  }
  #pc-line-wrap{
    display:none;
  }
}
.tutorial-btn {
  position: fixed;
  left: 50px;
  bottom: 50px;
}
@media (max-width: 767.98px) {
  aside .user-info .balance-wrap .balance {
    font-size: 18px;
  }
}

body.tutorial .tutorial-control .close-btn[data-day] {
  font-size: 18px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial-control .close-btn[data-day] {
    font-size: 15px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control .close-btn[data-day] {
    font-size: 12px;
  }
}

.floating {
  font-size: 20px;
}

@media (max-width: 991.98px) {
  .floating {
    font-size: 15px;
  }
}

@media (max-width: 767.98px) {
  .floating {
    font-size: 11px;
  }
}

body.tutorial .tutorial-control .nav {
  font-size: 20px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial-control .nav {
    font-size: 17px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control .nav {
    font-size: 14px;
  }
}

aside .user-info .user-menu .username {
  font-size: 20px;
}

@media (max-width: 991.98px) {
  aside .user-info .user-menu .username {
    font-size: 19px;
  }
}

@media (max-width: 767.98px) {
  aside .user-info .user-menu .username {
    font-size: 18px;
  }
}

.tutorial-btn {
  position: fixed;
  left: 50px;
  bottom: 50px;
}
@media (max-width: 767.98px) {
  aside .user-info .balance-wrap .balance {
    font-size: 18px;
  }
}

body.tutorial .tutorial-control .close-btn[data-day] {
  font-size: 18px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial-control .close-btn[data-day] {
    font-size: 15px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control .close-btn[data-day] {
    font-size: 12px;
  }
}

.floating {
  font-size: 20px;
}

@media (max-width: 991.98px) {
  .floating {
    font-size: 15px;
  }
}

@media (max-width: 767.98px) {
  .floating {
    font-size: 11px;
  }
}

body.tutorial .tutorial-control .nav {
  font-size: 20px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial-control .nav {
    font-size: 17px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control .nav {
    font-size: 14px;
  }
}

aside .user-info .user-menu .username {
  font-size: 20px;
}

@media (max-width: 991.98px) {
  aside .user-info .user-menu .username {
    font-size: 19px;
  }
}

@media (max-width: 767.98px) {
  aside .user-info .user-menu .username {
    font-size: 18px;
  }
}

body.tutorial .tutorial > .tutorial-wrap .content {
  font-size: 22px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial > .tutorial-wrap .content {
    font-size: 18px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial > .tutorial-wrap .content {
    font-size: 13px;
  }
}

body.tutorial .tutorial-control .close-btn {
  font-size: 22px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial-control .close-btn {
    font-size: 19px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control .close-btn {
    font-size: 16px;
  }
}

aside ~ main > * .inner-wrap > h3 {
  font-size: 24px;
}

@media (max-width: 991.98px) {
  aside ~ main > * .inner-wrap > h3 {
    font-size: 21px;
  }
}

@media (max-width: 767.98px) {
  aside ~ main > * .inner-wrap > h3 {
    font-size: 18px;
  }
}

body.tutorial .tutorial > .tutorial-wrap .num {
  font-size: 30px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial > .tutorial-wrap .num {
    font-size: 24px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial > .tutorial-wrap .num {
    font-size: 18px;
  }
}

.mobile-nav > * a,
.mobile-nav > * button,
aside footer .information *,
aside footer .open-btn,
aside .navbar > ul > li .sub-menu li a,
aside .navbar > ul > li > a,
aside .user-info .balance-wrap .balance + a,
aside .user-info .balance-wrap > a:first-child,
header .inner-wrap .search-wrap .toggle-wrap .close-btn,
header .inner-wrap .balance-wrap a,
header .inner-wrap .balance-wrap .balance::before,
.popup-wrap.bank-change-1 .inner .detail span,
.popup-wrap.bank-change-2 .inner .detail span,
.popup-wrap.notice .inner .detail span,
.popup-wrap.notification .inner .detail span,
.popup-wrap.login-required .inner .detail span,
.popup-wrap.bank-change-1 .inner .detail h4,
.popup-wrap.bank-change-2 .inner .detail h4,
.popup-wrap.notice .inner .detail h4,
.popup-wrap.notification .inner .detail h4,
.popup-wrap.login-required .inner .detail h4,
.popup-wrap.bank-change-1 .inner .content,
.popup-wrap.bank-change-2 .inner .content,
.popup-wrap.notice .inner .content,
.popup-wrap.notification .inner .content,
.popup-wrap.login-required .inner .content,
.toast-wrap,
input[type="checkbox"] + label,
input[type="checkbox"] + .checkmark {
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
}

.popup-wrap.event-feb .inner .today-hidden,
body.tutorial .tutorial > .tutorial-wrap .content,
body.tutorial .tutorial > .tutorial-wrap .num,
body.tutorial .tutorial-control .close-btn,
body.tutorial .tutorial-control .nav,
aside ~ main > * .inner-wrap > h3,
aside .user-info .user-menu ul li a,
aside .user-info .user-menu .username,
.popup-wrap.login-required .inner .button-wrap .signup-btn,
.popup-wrap.login-required .inner .button-wrap .signin-btn,
.popup-wrap.bank-change-1 .inner .button-wrap a.option,
.popup-wrap.bank-change-2 .inner .button-wrap a.option,
.popup-wrap.notice .inner .button-wrap a.option,
.popup-wrap.notification .inner .button-wrap a.option,
.popup-wrap.login-required .inner .button-wrap a.option,
.popup-wrap.bank-change-1 .inner .button-wrap .confirm-btn,
.popup-wrap.bank-change-1 .inner .button-wrap .close-btn,
.popup-wrap.bank-change-2 .inner .button-wrap .confirm-btn,
.popup-wrap.bank-change-2 .inner .button-wrap .close-btn,
.popup-wrap.notice .inner .button-wrap .confirm-btn,
.popup-wrap.notice .inner .button-wrap .close-btn,
.popup-wrap.notification .inner .button-wrap .confirm-btn,
.popup-wrap.notification .inner .button-wrap .close-btn,
.popup-wrap.login-required .inner .button-wrap .confirm-btn,
.popup-wrap.login-required .inner .button-wrap .close-btn,
.popup-wrap.bank-change-1 .inner h3,
.popup-wrap.bank-change-2 .inner h3,
.popup-wrap.notice .inner h3,
.popup-wrap.notification .inner h3,
.popup-wrap.login-required .inner h3,
.floating {
  font-family: "Pretendard Variable", "Pretendard JP Variable", sans-serif;
}

aside .user-info .balance-wrap .balance,
header .inner-wrap .balance-wrap .balance {
  font-family: "Century Gothic", sans-serif;
}

@keyframes floating-animation {
  0% {
    transform: translateX(calc(100% + 40px));
  }
  60% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes floating-animation-2 {
  0% {
    transform: translateY(calc(100% + 20px));
  }
  60% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes section-3-animation {
  0% {
    transform: translate(0, 0);
  }
  60% {
    transform: translate(0, -20px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes userForm-checkbox-animation {
  0% {
    width: 0;
    height: 0;
  }
  50% {
    width: 0;
    height: 8px;
  }
  100% {
    width: 11px;
    height: 8px;
  }
}

@keyframes userForm-checkbox-mobile-animation {
  0% {
    width: 0;
    height: 0;
  }
  50% {
    width: 0;
    height: 6px;
  }
  100% {
    width: 9px;
    height: 6px;
  }
}

@keyframes userForm-checkbox2-animation {
  0% {
    width: 0;
    height: 0;
  }
  100% {
    width: 12px;
    height: 0;
  }
}

@keyframes userForm-checkbox2-mobile-animation {
  0% {
    width: 0;
    height: 0;
  }
  100% {
    width: 10px;
    height: 0;
  }
}

@keyframes tabHover-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.7;
  }
}

@keyframes toast-animation {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.9);
  }
  30%,
  70% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 0) scale(1);
  }
}

aside .user-info .balance-wrap .balance {
  font-size: 16px;
}

@media (max-width: 991.98px) {
  aside .user-info .balance-wrap .balance {
    font-size: 17px;
  }
}

@media (max-width: 767.98px) {
  aside .user-info .balance-wrap .balance {
    font-size: 18px;
  }
}

body.tutorial .tutorial-control .close-btn[data-day] {
  font-size: 18px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial-control .close-btn[data-day] {
    font-size: 15px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control .close-btn[data-day] {
    font-size: 12px;
  }
}

.floating {
  font-size: 20px;
}

@media (max-width: 991.98px) {
  .floating {
    font-size: 15px;
  }
}

@media (max-width: 767.98px) {
  .floating {
    font-size: 11px;
  }
}

body.tutorial .tutorial-control .nav {
  font-size: 20px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial-control .nav {
    font-size: 17px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control .nav {
    font-size: 14px;
  }
}

aside .user-info .user-menu .username {
  font-size: 20px;
}

@media (max-width: 991.98px) {
  aside .user-info .user-menu .username {
    font-size: 19px;
  }
}

@media (max-width: 767.98px) {
  aside .user-info .user-menu .username {
    font-size: 18px;
  }
}

body.tutorial .tutorial > .tutorial-wrap .content {
  font-size: 22px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial > .tutorial-wrap .content {
    font-size: 18px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial > .tutorial-wrap .content {
    font-size: 13px;
  }
}

body.tutorial .tutorial-control .close-btn {
  font-size: 22px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial-control .close-btn {
    font-size: 19px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control .close-btn {
    font-size: 16px;
  }
}

aside ~ main > * .inner-wrap > h3 {
  font-size: 24px;
}

@media (max-width: 991.98px) {
  aside ~ main > * .inner-wrap > h3 {
    font-size: 21px;
  }
}

@media (max-width: 767.98px) {
  aside ~ main > * .inner-wrap > h3 {
    font-size: 18px;
  }
}

body.tutorial .tutorial > .tutorial-wrap .num {
  font-size: 30px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial > .tutorial-wrap .num {
    font-size: 24px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial > .tutorial-wrap .num {
    font-size: 18px;
  }
}

.mobile-nav > * a,
.mobile-nav > * button,
aside footer .information *,
aside footer .open-btn,
aside .navbar > ul > li .sub-menu li a,
aside .navbar > ul > li > a,
aside .user-info .balance-wrap .balance + a,
aside .user-info .balance-wrap > a:first-child,
header .inner-wrap .search-wrap .toggle-wrap .close-btn,
header .inner-wrap .balance-wrap a,
header .inner-wrap .balance-wrap .balance::before,
.popup-wrap.bank-change-1 .inner .detail span,
.popup-wrap.bank-change-2 .inner .detail span,
.popup-wrap.notice .inner .detail span,
.popup-wrap.notification .inner .detail span,
.popup-wrap.login-required .inner .detail span,
.popup-wrap.bank-change-1 .inner .detail h4,
.popup-wrap.bank-change-2 .inner .detail h4,
.popup-wrap.notice .inner .detail h4,
.popup-wrap.notification .inner .detail h4,
.popup-wrap.login-required .inner .detail h4,
.popup-wrap.bank-change-1 .inner .content,
.popup-wrap.bank-change-2 .inner .content,
.popup-wrap.notice .inner .content,
.popup-wrap.notification .inner .content,
.popup-wrap.login-required .inner .content,
.toast-wrap,
input[type="checkbox"] + label,
input[type="checkbox"] + .checkmark {
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
}

.popup-wrap.event-feb .inner .today-hidden,
body.tutorial .tutorial > .tutorial-wrap .content,
body.tutorial .tutorial > .tutorial-wrap .num,
body.tutorial .tutorial-control .close-btn,
body.tutorial .tutorial-control .nav,
aside ~ main > * .inner-wrap > h3,
aside .user-info .user-menu ul li a,
aside .user-info .user-menu .username,
.popup-wrap.login-required .inner .button-wrap .signup-btn,
.popup-wrap.login-required .inner .button-wrap .signin-btn,
.popup-wrap.bank-change-1 .inner .button-wrap a.option,
.popup-wrap.bank-change-2 .inner .button-wrap a.option,
.popup-wrap.notice .inner .button-wrap a.option,
.popup-wrap.notification .inner .button-wrap a.option,
.popup-wrap.login-required .inner .button-wrap a.option,
.popup-wrap.bank-change-1 .inner .button-wrap .confirm-btn,
.popup-wrap.bank-change-1 .inner .button-wrap .close-btn,
.popup-wrap.bank-change-2 .inner .button-wrap .confirm-btn,
.popup-wrap.bank-change-2 .inner .button-wrap .close-btn,
.popup-wrap.notice .inner .button-wrap .confirm-btn,
.popup-wrap.notice .inner .button-wrap .close-btn,
.popup-wrap.notification .inner .button-wrap .confirm-btn,
.popup-wrap.notification .inner .button-wrap .close-btn,
.popup-wrap.login-required .inner .button-wrap .confirm-btn,
.popup-wrap.login-required .inner .button-wrap .close-btn,
.popup-wrap.bank-change-1 .inner h3,
.popup-wrap.bank-change-2 .inner h3,
.popup-wrap.notice .inner h3,
.popup-wrap.notification .inner h3,
.popup-wrap.login-required .inner h3,
.floating {
  font-family: "Pretendard Variable", "Pretendard JP Variable", sans-serif;
}

body .tutorial-control {
  display: none;
}

body .tutorial-wrap {
  display: none;
}

body.tutorial::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100;
}

body.tutorial .tutorial-control {
  display: flex;
  position: fixed;
  top: 30px;
  right: 100px;
  z-index: 9999;
  transition: top 0.3s, transform 0.3s;
  width:300px;

}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control {
    top: 30px;
    right:30px;
    width:300px;
    background:rgba(0,0,0,0.4);
    border-radius:15px;
    box-shadow:0px 3px 6px rgba(0,0,0,0.3);
  }
}

body.tutorial .tutorial-control .nav {
  font-weight: 500;
  display: flex;
  align-items: center;
  color: #ffffff;
  transition: font 0.3s;
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control .nav {
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    margin-bottom: 30px;
  }
}

body.tutorial .tutorial-control .nav .prev,
body.tutorial .tutorial-control .nav .next {
  position: relative;
  width: 70px;
  margin: 0 15px;
  padding:10px;
  border-radius:5px;
  font-size:22px;
  vertical-align:middle;
  align-items:center;
  text-align:center;
  box-shadow:0px 5px 5px rgba(0,0,0,0.3);
  background:white;
  color:black;
  transition: width 0.3s, height 0.3s, margin 0.3s;
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control .nav .prev,
  body.tutorial .tutorial-control .nav .next {
    width: 70px;
    font-size:18px;
    font-weight:600;
    margin: 0 8px;
    padding:5px;
    border-radius:12px;

  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control .nav .prev.next,
  body.tutorial .tutorial-control .nav .next.next {
    margin-right: -7px;
  }
}

body.tutorial .tutorial-control .nav .current {
  color: #6cc4db;

}

body.tutorial .tutorial-control .close-btn {
  font-weight: 600;
  background-color: #6cc4db;
  color: #ffffff;
  padding:10px;
  border-radius:5px;
  box-shadow:0px 5px 5px rgba(0,0,0,0.3);
  vertical-align:middle;
  align-items:center;
  text-align:center;
  width:70px;
  transition: font 0.3s, padding 0.3s, border 0.3s;
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control .close-btn {
    font-family: "Noto Sans", sans-serif;
    font-weight: 600;
    padding: 5px;
    font-size:18px;
    border-radius: 12px;
    position: relative;
    /*right: 0;
    bottom: 0;
    transform: translate(0, 100%);*/
  }
}

body.tutorial .tutorial-control .close-btn[data-day] {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(0, 100%);
  background-color: rgba(0, 0, 0, 0);
  white-space: nowrap;
  padding: 10px 0 5px;
}

body.tutorial .tutorial-control .close-btn[data-day].hidden {
  display: none;
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control .close-btn[data-day] {
    right: 70px;
  }
}

body.tutorial .tutorial-control .close-btn[data-day]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
}

body.tutorial .tutorial {
  position: relative;
  z-index: 100;
}

body.tutorial .tutorial > .tutorial-wrap {
  display: block;
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border: 3px solid #6cc4db;
  transition: border 0.3s;
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial > .tutorial-wrap {
    border-width: 1px;
  }
}

body.tutorial .tutorial > .tutorial-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

body.tutorial .tutorial > .tutorial-wrap .num {
  position: absolute;
  right: 0px;
  top: -3px;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #6cc4db;
  transition: font 0.3s, left 0.3s, top 0.3s, transform 0.3s, background 0.3s,
    color 0.3s, width 0.3s, height 0.3s;
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial > .tutorial-wrap .num {
    background-color: #ffffff;
    color: #ff0000;
    left: -1px;
    top: 0;
    transform: translate(0, -100%);
    width: 25px;
    height: 25px;
  }
}

body.tutorial .tutorial > .tutorial-wrap .content {
  color: #ffffff;
  word-break: keep-all;
  text-align: left;
  position: absolute;
  top: -8px;
  left: 0;
  transform: translate(0, -100%);
  transition: font 0.3s, left 0.3s, top 0.3s, transform 0.3s;
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial > .tutorial-wrap .content {
    left: 5px;
    top: calc(100% + 5px);
    transform: translate(0, 0);
  }
}

aside .user-info .balance-wrap .balance {
  font-size: 16px;
}

@media (max-width: 991.98px) {
  aside .user-info .balance-wrap .balance {
    font-size: 17px;
  }
}

@media (max-width: 767.98px) {
  aside .user-info .balance-wrap .balance {
    font-size: 18px;
  }
}

body.tutorial .tutorial-control .close-btn[data-day] {
  font-size: 18px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial-control .close-btn[data-day] {
    font-size: 15px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control .close-btn[data-day] {
    font-size: 12px;
  }
}

.floating {
  font-size: 20px;
}

@media (max-width: 991.98px) {
  .floating {
    font-size: 15px;
  }
}

@media (max-width: 767.98px) {
  .floating {
    font-size: 11px;
  }
}

body.tutorial .tutorial-control .nav {
  font-size: 20px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial-control .nav {
    font-size: 17px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control .nav {
    font-size: 14px;
    margin-right:20px;
  }
}

aside .user-info .user-menu .username {
  font-size: 20px;
}

@media (max-width: 991.98px) {
  aside .user-info .user-menu .username {
    font-size: 19px;
  }
}

@media (max-width: 767.98px) {
  aside .user-info .user-menu .username {
    font-size: 18px;
  }
}

body.tutorial .tutorial > .tutorial-wrap .content {
  font-size: 22px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial > .tutorial-wrap .content {
    font-size: 18px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial > .tutorial-wrap .content {
    font-size: 13px;
  }
}

body.tutorial .tutorial-control .close-btn {
  font-size: 22px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial-control .close-btn {
    font-size: 19px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial-control .close-btn {
    font-size: 16px;
  }
}

aside ~ main > * .inner-wrap > h3 {
  font-size: 24px;
}

@media (max-width: 991.98px) {
  aside ~ main > * .inner-wrap > h3 {
    font-size: 21px;
  }
}

@media (max-width: 767.98px) {
  aside ~ main > * .inner-wrap > h3 {
    font-size: 16px;
  }
}

body.tutorial .tutorial > .tutorial-wrap .num {
  font-size: 24px;
}

@media (max-width: 991.98px) {
  body.tutorial .tutorial > .tutorial-wrap .num {
    font-size: 20px;
  }
}

@media (max-width: 767.98px) {
  body.tutorial .tutorial > .tutorial-wrap .num {
    font-size: 14px;
  }
}

input[type="checkbox"] + label,
input[type="checkbox"] + .checkmark,
.toast-wrap,
.popup-wrap.bank-change-1 .inner .content,
.popup-wrap.bank-change-2 .inner .content,
.popup-wrap.notice .inner .content,
.popup-wrap.notification .inner .content,
.popup-wrap.login-required .inner .content,
.popup-wrap.bank-change-1 .inner .detail h4,
.popup-wrap.bank-change-2 .inner .detail h4,
.popup-wrap.notice .inner .detail h4,
.popup-wrap.notification .inner .detail h4,
.popup-wrap.login-required .inner .detail h4,
.popup-wrap.bank-change-1 .inner .detail span,
.popup-wrap.bank-change-2 .inner .detail span,
.popup-wrap.notice .inner .detail span,
.popup-wrap.notification .inner .detail span,
.popup-wrap.login-required .inner .detail span,
header .inner-wrap .balance-wrap .balance::before,
header .inner-wrap .balance-wrap a,
header .inner-wrap .search-wrap .toggle-wrap .close-btn,
aside .user-info .balance-wrap .balance + a,
aside .user-info .balance-wrap > a:first-child,
aside .navbar > ul > li > a,
aside .navbar > ul > li .sub-menu li a,
aside footer .open-btn,
aside footer .information *,
.mobile-nav > * a,
.mobile-nav > * button {
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
}

.popup-wrap.event-feb .inner .today-hidden,
.floating,
.popup-wrap.bank-change-1 .inner h3,
.popup-wrap.bank-change-2 .inner h3,
.popup-wrap.notice .inner h3,
.popup-wrap.notification .inner h3,
.popup-wrap.login-required .inner h3,
.popup-wrap.bank-change-1 .inner .button-wrap .confirm-btn,
.popup-wrap.bank-change-1 .inner .button-wrap .close-btn,
.popup-wrap.bank-change-2 .inner .button-wrap .confirm-btn,
.popup-wrap.bank-change-2 .inner .button-wrap .close-btn,
.popup-wrap.notice .inner .button-wrap .confirm-btn,
.popup-wrap.notice .inner .button-wrap .close-btn,
.popup-wrap.notification .inner .button-wrap .confirm-btn,
.popup-wrap.notification .inner .button-wrap .close-btn,
.popup-wrap.login-required .inner .button-wrap .confirm-btn,
.popup-wrap.login-required .inner .button-wrap .close-btn,
.popup-wrap.bank-change-1 .inner .button-wrap a.option,
.popup-wrap.bank-change-2 .inner .button-wrap a.option,
.popup-wrap.notice .inner .button-wrap a.option,
.popup-wrap.notification .inner .button-wrap a.option,
.popup-wrap.login-required .inner .button-wrap a.option,
.popup-wrap.login-required .inner .button-wrap .signup-btn,
.popup-wrap.login-required .inner .button-wrap .signin-btn,
aside .user-info .user-menu .username,
aside .user-info .user-menu ul li a,
aside ~ main > * .inner-wrap > h3,
body.tutorial .tutorial-control .nav,
body.tutorial .tutorial-control .close-btn,
body.tutorial .tutorial > .tutorial-wrap .num,
body.tutorial .tutorial > .tutorial-wrap .content {
  font-family: "Pretendard Variable", "Pretendard JP Variable", sans-serif;
}
.services-2 {
  background-color: white;
}

#tutorial1 a, #tutorial2 a, #tutorial3 a{
  height:100%;
  width:100%;
  font-size:14px !important;
  color:white !important;
  background:#1e3069;
  margin-top:10px;
  font-weight:600 !important;
  display:block;
  padding:10px !important;
  text-align:center;
  justify-content:center;
}
.timer-wrap{
  text-align:center;
  justify-content:center;
  align-items:center;
}
.confirmTop > div > div > p{
  font-size:10px;
}
#layout > header > div > div.userMobileWrapper > div > nav > div.mobile-information-wrap > div > div.tel_contents > div > p > strong, #layout > header > div > div.userMobileWrapper > div > nav > div.mobile-information-wrap > div > div.tel_contents > div > p > a > strong{
  padding:0px;
  display:inline;
}
#layout > header > div > div.userMobileWrapper > div > nav > div.mobile-information-wrap > div > div.tel_contents > div> p > a{
  height:auto !important;
  padding-left:0px !important;
  margin-bottom:0px !important;
}
.methodImg{
  position:relative;
  width:40px;
  height:40px;
  left:10px;
}

.pc-vertical-slider-banner {
  margin: 0 auto;
  width: 100%;
  margin-left:20px;
  height: 60px;
  background-color: #3E3E3E;
}

.pc-vertical-scrollBox {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: #FFF;
  border: none;
  box-sizing: border-box;
}

.pc-vertical-scrollGroup {
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  z-index: 0;
}

.pc-vertical-scrollGroup .pc-verticalscrollItem {
  width: 100%;
  padding: 0;
  margin: 0 auto;
  border: none;
}
.pc-vertical-scrollItem img{
  height:60px;
}
@media(max-width:760px){
  .pc-vertical-slider-banner{
    display:none;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

#main-right-menu-tab ul {
  list-style: none;
}

#main-right-menu-tab .tabs {
  width: 100%;
  height: 60px;
  margin: auto;
  display: flex;
  align-items: center;
  overflow: hidden;
}

#main-right-menu-tab .tabs li {
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  font-size:15px;	
  font-weight:600;
  justify-content: center;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  transition: .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  opacity:0.8;
  cursor: pointer;
  box-shadow: inset 0 3px 6px #BCBCBC29;
}
#main-right-menu-tab .tabs li.tabs-one{
  background-color: rgba(25,25,112);
}
#main-right-menu-tab .tabs li.tabs-two{
  background-color: rgba(0,0,139);
}
#main-right-menu-tab .tabs li.tabs-three{
  background-color: rgba(0,0,205);
}
#main-right-menu-tab .tabs li.tabs-four{
  background-color: rgba(65,105,225);
}

#main-right-menu-tab .tabs li:hover {
  color: #ffffff;
  position: relative;
  z-index: 1;
  opacity:1;
}

#main-right-menu-tab .active {
  color: #ffffff !important;
  opacity:1 !important;
  position: relative;
  z-index: 1;
}

#main-right-menu-tab .contents {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}
@media(max-width:760px){
  #main-right-menu-tab .tabs li {
    font-size:12px;
    text-align:center;
    padding:2px;
    font-weight:500;
  }
}
#main-right-menu-tab .box {
  gap: 20px;
  background: white;
  padding: 16px;
  box-shadow: 0px 3px 6px #FAFAFA;
  width: 100%;
  animation: moving 1s ease;
  -webkit-animation: moving 1s ease;
}

#main-right-menu-tab .box.tabs-one {
  border:2px solid rgba(25,25,112);
}

#main-right-menu-tab .box.tabs-two {
  border:2px solid rgba(0,0,139);
}

#main-right-menu-tab .box.tabs-three {
  border:2px solid rgba(0,0,205);
}
#main-right-menu-tab .box.tabs-four {
  border:2px solid rgba(65,105,225);
}


#main-right-menu-tab .box img {
  width: 50%;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

#main-right-menu-tab .box h3 {
  color: #151515;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  margin-bottom: 20px;
}

#main-right-menu-tab .box p {
  color: #151515;
  opacity: .5;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
}

#main-right-menu-tab .show {
  display: flex !important;
}

#main-right-menu-tab .hide {
  display: none !important;
}

@keyframes moving {
  from {
    /* transform: translateX(-50px);
    -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    -o-transform: translateX(-50px);*/
    opacity: 0;
  }

  to {
    /*transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);*/
    opacity: 1;
  }
}

.container {
  margin: 24px auto;
  max-width: 960px;
}

.table {
  border-collapse: collapse;
  width: 100%;
}

.table--bordered {
  border: 1px solid #d7d7d7;
}

.table--shaded {
  border-bottom: 2px solid #c6d5e3;
}

.table__head {
  border-bottom: 2px solid #c6d5e3;
  color: #7196b9;
}
.table--shaded .table__head {
  background: #f7fafc;
}

.table__row:not(:last-of-type) {
  border-bottom: 1px solid #eaeaea;
}

.table__cell {
  padding: 16px 12px 14px;
}
.table__head .table__cell {
  padding: 10px 12px 8px;
}
.table--bordered .table__cell:not(:last-of-type) {
  border-right: 1px solid #eaeaea;
}
.table__head .table__cell {
  font-weight: 700;
}

.table__cell--checkbox {
  max-width: 25px;
  padding: 16px 0 14px 12px;
}
.table__head .table__cell--checkbox {
  padding: 10px 0 8px 12px;
}

.table__cell--no-wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table__cell--remainder {
  width: 99%;
}

.UserTable__name {
  max-width: 200px;
}
.ex-login-checkbox{
  text-align:right;
  justify-content:end;
  padding-right:20px;
}

.timerText, .timerConfirm{
  font-size:10px;

}

.form-group div.radio {
  display:none;
}
/* Bootstrap row */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.75rem; /* Negative margin to counter padding */
  margin-left: -0.75rem;
}

/* Bootstrap col-2 */
.col-2 {
  flex: 0 0 auto;
  width: 16.666667%; /* 2/12 of the total grid */
}

/* Media query for responsiveness */
@media (min-width: 576px) {
  .col-2 {
    flex: 0 0 auto;
    width: 16.666667%;
  }
}

@media (min-width: 768px) {
  .col-2 {
    flex: 0 0 auto;
    width: 16.666667%;
  }
}

@media (min-width: 992px) {
  .col-2 {
    flex: 0 0 auto;
    width: 16.666667%;
  }
}

@media (min-width: 1200px) {
  .col-2 {
    flex: 0 0 auto;
    width: 16.666667%;
  }
}

@media (min-width: 1400px) {
  .col-2 {
    flex: 0 0 auto;
    width: 16.666667%;
  }
}
@media(min-width:960px){
  .m-w-1080{
  	max-width:1080px !important;
  }
}