마케팅 솔루션

마케팅 솔루션

image
image

Marketing total solution

/*****************************************************************************/
/**                                                                         **/
/**                              LINKOTION                                  **/
/**                                                                         **/
/**          Linkotion is a all-in-one social link template for             **/
/**                        Notion powered by Super                          **/
/**                                                                         **/
/**                         ->  linkotion.xyz  <-                           **/
/**                                                                         **/
/*****************************************************************************/

:root {
  /* Primary text color */
  --color-text-default: rgba(10, 36, 64, 1) !important;
  /* CTA bg color using gray light callout  */
  --color-bg-gray-light: rgba(10, 36, 64, 1) !important;
  /* Callout color */
  --color-bg-brown-light: rgba(233, 229, 227, 0.75) !important;
  --color-bg-orange-light: rgba(250, 235, 221, 0.75) !important;
  --color-bg-yellow-light: rgba(251, 243, 219, 0.75) !important;
  --color-bg-green-light: rgba(221, 237, 234, 0.75) !important;
  --color-bg-blue-light: rgba(221, 235, 241, 0.75) !important;
  --color-bg-purple-light: rgba(234, 228, 242, 0.75) !important;
  --color-bg-pink-light: rgba(244, 223, 235, 0.75) !important;
  --color-bg-red-light: rgba(251, 228, 228, 0.75) !important;
  --color-pill-default: rgba(206, 205, 202, 0.75) !important;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  height: 100% !important;
  opacity: 0;
  animation-duration: 2s;
  animation-fill-mode: both;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
}
/* Animation */
@keyframes fadeInUp {
  from {
    transform: translate3d(0, 40px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes fadeInUp {
  from {
    transform: translate3d(0, 40px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* Customized ackground image */
html,
body {
  background-image: url("https://i.ibb.co/PrnQQNJ/06-Wisteria-1.jpg") !important; /* Background image */
  /* Image stretched based on screen size */
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
html {
  font-size: calc(12 - 1vw) !important; /* Responsive HTML font size */
}

/** --- NOTION NAVBAR ---**/
.notion-navbar {
  display: none !important; /* Hide nav-bar */
}

/** --- MAIN CARD--- **/
/* Wrapper */
#__next {
  /* Top margin when header has no cover but has icon */
  /* margin-top: 50vh !important; */
  display: flex;
  /* Centerize main card wrapper */
  align-items: center;
  justify-content: center;
  min-height: 100%;
  min-height: 100vh;
}
#__next > div {
  /* Card width */
  width: calc(225px + 25vw) !important; /* Responsive card width */
  margin-top: 5vh !important; /* Main card top margin */
  margin-bottom: 5vh !important; /* Main card bottom margin *?
    /* Card decoration */
  background-color: #f7f7f7 !important; /* Main card color */
  border-radius: 20px !important; /* Rounded main card */
  box-shadow: 0rem 0.875rem 1.5rem 0rem rgba(32, 46, 66, 0.1) !important; /* Main card shadow */
}
/* Content */
.super-content {
  padding-bottom: 10vh !important; /* Bottom card padding */
}
.super-content.has-footer {
  padding-bottom: unset !important;
}

/** --- TEXT DECORATION --- **/
/* Global heading style */
.notion-heading .notion-semantic-string {
  line-height: 1 !important; /* Less height */
}
/* H1 heading style */
h1.notion-heading {
  text-align: center !important;
}
/* H2 heading style */
h2.notion-heading {
  text-align: center !important;
}
/* H3 heading style */
h3.notion-heading {
  font-weight: 400 !important;
  text-align: center !important;
}
/* Paragraph style */
p.notion-text__content {
  /* Centerize paragraph text */
  text-align: center;
  line-height: 0.5 !important;
}

/** --- HEADER  --- **/
/* Global styling when header has cover */
.notion-header__cover.has-cover {
  overflow: hidden;
  position: relative;
  min-height: 25vh !important;
}
/* Styling when header has cover and has icon */
.notion-header__icon-wrapper.has-cover.has-icon-image {
  top: -140px !important;
  /*! bottom: 10px; */
  padding-bottom: 100px;
}
/* Styling when header has cover but no icon */
.notion-header__content.has-cover.no-icon {
  /* Centerize page title */
  display: flex !important;
  align-content: center !important;
  justify-content: center !important;
}
/* Global styling when header has no cover */
.notion-header__cover.no-cover {
  max-height: 0px !important;
  height: 0px !important;
}
/* Styling when header has no cover but has icon */
.notion-header__icon-wrapper.no-cover.has-icon-image,
.notion-header__icon-wrapper.no-cover.has-icon {
  top: -140px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Rounded header cover image */
.notion-header__cover-image {
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}
.notion-header__icon {
  border-radius: 50% !important; /* Rounded header icon */
}
/* Centerize header icon wrapper */
.notion-header__icon-wrapper {
  margin: 0 auto !important;
  left: 0 !important;
  right: 0 !important;
}

/** --- HEADER CONTENT --- **/
/* Header side margin reduction */
.notion-header__content,
.super-content {
  padding-left: calc(env(safe-area-inset-left) + 5%) !important;
  padding-right: calc(env(safe-area-inset-right) + 5%) !important;
}
/* Reduce space from header photo to title */
.notion-header__content > div {
  margin-top: 70px !important;
}
/* Header title */
.notion-header__title {
  font-size: 1.9rem !important; /* Header - Title smaller */
  position: relative !important; /* Header - Title higher */
  margin-bottom: -20px !important;
  text-align: center !important; /* Header - Title centre */
}

/** --- CALLOUT BLOCK --- **/
/* CTA button using dark grey callout block */
.notion-callout.bg-gray-light.border > .notion-callout__icon {
  display: none !important; /* Hide callout icon */
}
.notion-callout.bg-gray-light {
  margin: 0 auto !important;
  padding: 30px 75px 30px 75px !important;
  box-shadow: 0 10px 20px -10px var(--color-bg-gray-light) !important;
  margin-top: 30px !important;
  margin-bottom: 15px !important;
  transition: 0.3s ease-in-out !important; /* CTA hover animation */
  -webkit-transition: 0.3s ease-in-out !important;
}
/* CTA button hover state */
.notion-callout.bg-gray-light:hover {
  box-shadow: 0 10px 30px -10px var(--color-bg-gray-light) !important;
  transform: scale(1.03, 1.03) !important;
}
/* Centerize CTA text */
.notion-callout.bg-gray-light.border a {
  padding: 0 !important ;
  right: 0 !important;
  left: 0 !important;
  top: 0 !important;
  justify-content: center !important;
  /* CTA text color */
  color: #ffffff !important;
}
/* Default callout text color */
p.notion-callout__content a {
  color: #000000 !important; /* Callout text color */
}
/* Callout text line-height */
.notion-text__content {
  line-height: 1.9rem !important; /* Callout text height */
}
/* Callout block default style */
.notion-callout {
  position: relative !important;
  padding: 16px 24px !important;
  border: none !important;
  border-radius: 20px !important; /* Rounded callout */
  margin-top: 12px !important;
  margin-top: 12px !important;
  transition: 0.3s ease-in-out !important; /* Callout animation */
  -webkit-transition: 0.3s ease-in-out !important;
}
.notion-callout:hover {
  transform: scale(1.02, 1.02);
}
/* Callout block text style */
.notion-callout a {
  letter-spacing: -0.5px !important;
  padding: 0 0 2px 66px !important;
  align-items: center !important;
  position: absolute !important;
  font-weight: 600 !important;
  display: flex !important;
  border: none !important;
  color: #000000 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: 0 !important;
  top: 0 !important;
}

/** --- NOTION COLUMN --- **/
/* Comparison section using to-do list in two section column */
.notion-column > .notion-to-do {
  padding-left: 2.5% !important;
  padding-right: 2.5% !important;
}
.notion-column p {
  text-align: justify !important;
  text-align-last: left !important;
}

/** --- BLOCKQUOTE BLOCK --- **/
.notion-quote {
  /* font-size: 2.2em !important; */
  opacity: 75% !important;
  font-size: 1em !important;
  text-align: center !important;
  border-left: none !important;
}
blockquote {
  padding: 1.2em 3em 1.2em 3em !important;
  line-height: 1.6 !important;
  border-left: 1px solid !important;
  position: relative !important;
}
blockquote::before,
blockquote::after {
  position: absolute !important;
  font-size: 4em !important;
  opacity: 0.25;
}
blockquote::before {
  content: open-quote !important;
  /* color:#78C0A8 !important; */
  left: 0.17em !important;
  top: -0.1em !important;
}
blockquote::after {
  content: close-quote !important;
  display: inline-block !important;
  vertical-align: bottom !important;
  margin-bottom: 10px !important;
  bottom: -0.7em !important;
  right: 0.17em !important;
}

/** --- CARD GALLERY --- **/
.notion-collection-card {
  box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.08) !important;
  border-radius: 20px !important; /* Rounded card */
  background-color: #ffffff !important; /* Card background */
  transition: 0.3s ease-in-out !important;
  -webkit-transition: 0.3s ease-in-out !important;
}
.notion-collection-card__cover img {
  border-radius: 20px !important; /* Rounded card gallery cover */
}
.notion-collection-card__cover {
  border-bottom: none !important;
  transform: translateY(-2px) !important;
  transition: 0.3s ease-in-out !important;
  -webkit-transition: 0.3s ease-in-out !important;
}
.notion-collection-card:hover {
  box-shadow: 0 20px 30px -0px rgba(0, 0, 0, 0.08) !important;
  transform: scale(1.02, 1.02) !important;
}
.notion-collection-card:hover .notion-collection-card__cover {
  transform: translateY(-15px) !important;
}
.notion-collection-card:hover .notion-property__title span {
  transform: translateY(-5px) !important;
}
div.notion-property__person {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
div.notion-property__person span.individual picture img.notion-icon {
  border-radius: 50% !important;
}
.notion-collection-card .notion-property__title {
  align-items: center !important; /* Centerize card gallery title */
  justify-content: center !important;
}
.notion-collection-card .notion-property__title span {
  align-items: center !important; /* Centerize card gallery title */
  justify-content: center !important;
  font-weight: bold !important;
  font-size: 1rem !important;
  transform: translateY(-2px) !important;
  transition: 0.3s ease-in-out !important;
  -webkit-transition: 0.3s ease-in-out !important;
}
.notion-property__title .notion-property__title__icon-wrapper {
  display: none !important; /* Hide notion card icon page */
  margin-right: 10px !important; /* Icon page spapacing */
}
h3.notion-collection__header {
  display: none !important; /* Hide card gallery title */
}
.notion-collection-gallery,
.notion-collection-list {
  padding-bottom: 0px !important;
  padding-top: 13px !important; /* Hide collection list padding */
  border-top: 0px !important; /* Hide collection list divider */
}
.notion-collection-gallery:hover > div {
  opacity: 0.5 !important;
  transition: 0.3s ease-in-out !important;
  -webkit-transition: 0.3s ease-in-out !important;
}
.notion-collection-gallery:hover > div:hover {
  opacity: 100% !important;
}

/** --- PILL --- **/
.notion-property {
  align-items: center !important; /* Centerize pill */
  justify-content: center !important;
}
.notion-pill {
  padding: 3px 6px !important;
}

/** --- CARD PAGE --- **/
.notion-page__properties {
  display: none !important; /* Hide card page properties */
}
.notion-header__content.no-icon.has-cover .notion-header__title-wrapper {
  margin-top: 20px !important; /* Page title spacing when no icon detected */
}
.notion-header__content.has-cover.has-icon.max-width,
.notion-header__icon-wrapper.has-cover.has-icon {
  top: -120px !important;
  display: flex !important;
  /* Centerize card page content */
  align-items: center !important;
  justify-content: center !important;
}

/** --- BOOKMARK --- **/
.notion-bookmark {
  border: 0 !important;
  margin-top: 13px !important;
  margin-bottom: 5px !important;
  background-color: white !important;
  border-radius: 20px !important; /* Rounded bookmark embed */
  box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.08) #e0e0e0 !important;
  transition: 0.3s ease-in-out !important;
  -webkit-transition: 0.3s ease-in-out !important;
}
.notion-bookmark:hover {
  box-shadow: 0 20px 30px -0px rgba(0, 0, 0, 0.08) !important;
  transform: scale(1.01, 1.01) !important;
}
.notion-bookmark__cover {
  height: auto !important;
}
.notion-bookmark__title {
  font-weight: bold !important;
  white-space: break-spaces !important;
  opacity: 0.75 !important;
  line-height: 1.5em !important;
  /* height: 1em !important;;       /* height is 2x line-height, so two lines will display */
  overflow: hidden !important;
  transition: 0.3s ease-in-out !important;
  -webkit-transition: 0.3s ease-in-out !important;
}
.notion-bookmark:hover .notion-bookmark__title {
  opacity: 1 !important;
}
.notion-bookmark__link img {
  filter: grayscale(100%);
  transition: 0.3s ease-in-out !important;
  -webkit-transition: 0.3s ease-in-out !important;
}
.notion-bookmark:hover .notion-bookmark__link img {
  filter: grayscale(0%);
}
.notion-bookmark__description {
  margin-top: 5px !important;
}
.notion-bookmark__link {
  margin-top: 20px !important;
  margin-bottom: 10px !important;
}
.notion-bookmark__link p {
  opacity: 0.75 !important;
}
.notion-bookmark__cover {
  width: 30% !important;
}
.notion-bookmark__cover img {
  border-radius: 20px !important; /* Rounded bookmark cover */
}

/** --- CHECKLIST --- **/
.notion-checkbox {
  border-radius: 50% !important; /* Rounded unchecked box */
  border: 2.5px solid rgba(7, 41, 74, 0.5) !important; /* Unchecked box border color */
  -webkit-background-clip: padding-box; /* for Safari */
  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
.notion-checkbox > svg {
  /* Smaller unchecked box */
  width: 0.8em !important;
  height: 0.8em !important;
  opacity: 0 !important; /* Hide default unchecked box style */
}
.notion-checkbox.checked {
  border-radius: 50% !important; /* Rounded checked box */
  background: rgba(7, 41, 74, 1) !important; /* Checked box color */
}
.notion-checkbox.checked > svg {
  width: 0.5em !important; /* Smaller checked box */
  opacity: 100% !important; /* Override default checked box style */
}
s,
strike,
del {
  text-decoration: none !important; /* Remove strikethrough */
}
.notion-to-do__title.checked {
  opacity: 1 !important; /* Less opacity for checked box */
}
.notion-to-do__icon {
  margin-right: 8px !important; /* More horizontal space for checked/unchecked box icon */
}
.notion-to-do__content {
  padding: 0px 0 !important; /* Less between vertical space */
}

/** --- TABLE --- */
.notion-collection-table__wrapper {
  margin-top: 15px !important;
}
.notion-collection-table {
  margin-bottom: 0px !important;
}

/** --- CODE BLOCK --- **/
.notion-code.no-wrap > pre {
  border-radius: 20px !important; /* Rounded code block */
}
.notion-code.no-wrap {
  font-size: 0.7rem !important; /* Smaller code block text */
  margin-top: 10px !important;
}

/** --- NOTION LIST --- **/
.notion-list-item {
  margin: 2px 0 !important;
  padding-bottom: 0px !important;
}
/* Bullet point */
.notion-bulleted-list,
.notion-numbered-list {
  margin: 0px !important;
}

/** --- NOTION DIVIDER --- **/
.notion-divider {
  border-bottom: 1px solid rgba(7, 41, 74, 0.125);
}

/** --- NOTION TOGGLE --- **/
.notion-toggle {
  padding: 10px !important;
  box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.08) !important;
  background: #ffffff !important;
  margin: 0 auto 20px !important;
  border-radius: 20px !important;
  position: relative !important;
  width: 100% !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  margin-top: 15px !important;
  margin-bottom: -0.5px !important;
}
.notion-toggle__summary {
  transition: all 0.3s ease-in-out !important;
  opacity: 0.5 !important;
}
.notion-toggle__summary:hover {
  opacity: 1 !important;
}
.notion-toggle[open] .notion-toggle__summary {
  opacity: 1 !important;
}
.notion-toggle__content {
  padding-bottom: 5px !important;
}
.notion-toggle[open] p {
  text-align: left !important;
}

/** --- IMAGE DECORATION --- **/
.notion-image {
  margin-top: 15px !important;
  margin-bottom: 0px !important;
}
.notion-image.page-width > div {
  border-radius: 20px !important; /* Rounded image block */
}

/** --- EMBED BLOCK DECORATION --- **/
.notion-embed__content {
  margin-top: 13px !important; /* More top spacing */
}
.notion-embed__container > iframe {
  border-radius: 20px !important; /* Rounded embed block */
}

/** --- TWITTER EMBED --- **/
/* Centerize twitter block */
.notion-tweet div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.twitter-tweet,
.twitter-tweet-rendered {
  margin-top: 15px !important;
  margin-bottom: 0px !important;
}

/** --- SUPER FOOTER --- **/
.super-footer {
  padding-left: calc(env(safe-area-inset-left) + 5%) !important;
  padding-right: calc(env(safe-area-inset-left) + 5%) !important;
  margin: calc(env(safe-area-inset-left) + 5%) !important;
  background-color: #ffffff !important;
}
.stack {
  border-radius: 20px !important;
}

/** --- RESPONSIVE --- **/
/*  Responsive cover image height */
@media (max-width: 3080px) {
  .notion-header__cover.has-cover {
    min-height: 400px !important;
  }
}
@media (max-width: 1680px) {
  .notion-header__cover.has-cover {
    min-height: 250px !important;
  }
}
@media (max-width: 1280px) {
  .notion-header__cover.has-cover {
    max-height: 250px !important;
  }
}
@media (max-width: 980px) {
  .notion-header__cover.has-cover {
    max-height: 200px !important;
  }
}
@media (max-width: 736px) {
  .notion-header__cover.has-cover {
    min-height: 240px !important;
  }
}

블로그만으로 마케팅하고 계셨나요?

검증된 VR투어 솔루션을 연동하여 완벽한 홈페이지를 만들어드립니다.

image

client satisfaction solution

고객 감동을 일으키는 수많은 마케팅 솔루션

디지털 시대에 맞춘 고객 경험은 고객 감동으로 이어집니다.

연동가능한 마케팅 솔루션은 계속 추가될 것입니다.

VR투어 솔루션 문의

상호명 : 빌드비전 | 사업자 번호 : 601-06-65661 | E-mail : contact@build-vision.kr | Tel : 0507-0177-2088