.navigation {
  position: relative;
  height: 61px;
  background: url(/clova-ai/skillstore/static/img/test.png) no-repeat 50% 0;
  background-size: 375px 250px;
  -webkit-background-size: 375px 250px; }
  .navigation .btn-back {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 61px; }
    .navigation .btn-back:before {
      content: '';
      position: absolute;
      display: block;
      width: 22.5px;
      height: 20px;
      top: 50%;
      left: 20px;
      margin-top: -10px;
      background: url(/clova-ai/skillstore/static/img/sp_btn.png) -58px 0;
      background-size: 100px 100px; }
  .navigation .btn-close {
    display: block;
    position: absolute;
    top: 0;
    right: 0px;
    width: 44px;
    height: 61px; }
    .navigation .btn-close:before {
      content: '';
      position: absolute;
      width: 17.5px;
      height: 17.5px;
      top: 50%;
      right: 23px;
      margin-top: -9px;
      background: url(/clova-ai/skillstore/static/img/btn_close.png) no-repeat 0 0;
      background-size: 37px 37px;
      -webkit-background-size: 37px 37px; }
  .navigation.sub-navigation {
    background: #fff; }
    .navigation.sub-navigation .btn-back:before {
      background: url(/clova-ai/skillstore/static/img/sp_btn.png) -31px 0;
      background-size: 100px 100px; }
    .navigation.sub-navigation .btn-close:before {
      background: url(/clova-ai/skillstore/static/img/sp_btn.png) -31px -25px;
      background-size: 100px 100px; }
  .navigation.type_search {
    height: 42px;
    padding-bottom: 5px; }
    .navigation.type_search .navigation-title {
      display: block;
      width: 100%;
      padding-left: 90px;
      padding-right: 90px;
      font-size: 17px;
      line-height: 43px;
      color: #000;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      font-weight: 600;
      text-align: center; }
    .navigation.type_search .btn-back {
      height: 42px; }
      .navigation.type_search .btn-back:before {
        left: 20px; }
    .navigation.type_search .btn-search {
      display: block;
      position: absolute;
      top: 0;
      width: 41px;
      height: 42px;
      right: 51px; }
      .navigation.type_search .btn-search:before {
        content: '';
        position: absolute;
        width: 21px;
        height: 21px;
        top: 50%;
        margin-top: -11px;
        margin-left: 10px;
        background: url(/clova-ai/skillstore/static/img/btn_search.png) no-repeat 0 0;
        background-size: 21px 21px;
        -webkit-background-size: 21px 21px; }
    .navigation.type_search .btn-my {
      display: block;
      position: absolute;
      top: 0;
      width: 41px;
      height: 42px;
      right: 10px; }
      .navigation.type_search .btn-my:before {
        content: '';
        position: absolute;
        width: 21px;
        height: 21px;
        top: 50%;
        margin-top: -10px;
        margin-left: 10px;
        background: url(/clova-ai/skillstore/static/img/btn_my.png) no-repeat 0 0;
        background-size: 21px 21px;
        -webkit-background-size: 21px 21px; }
    .navigation.type_search.type_line {
      background: url(/clova-ai/skillstore/static/img/im_line.png) repeat-x 0 100%;
      background-size: 1px 1px; }

.navigation.main-nav-fixed, .navigation.search-nav-fixed, .navigation.myskills-nav-fixed {
  transform: translate3d(0, 0, 0);
  top: 0;
  left: 0;
  right: 0;
  position: relative;
  z-index: 1; }
  @supports (padding-top: constant(safe-area-inset-top)) {
    .navigation.main-nav-fixed, .navigation.search-nav-fixed, .navigation.myskills-nav-fixed {
      padding-top: constant(safe-area-inset-top); } }
  @supports (padding-top: env(safe-area-inset-top)) {
    .navigation.main-nav-fixed, .navigation.search-nav-fixed, .navigation.myskills-nav-fixed {
      padding-top: env(safe-area-inset-top); } }
  .navigation.main-nav-fixed.search-nav-fixed, .navigation.main-nav-fixed.myskills-nav-fixed, .navigation.search-nav-fixed.search-nav-fixed, .navigation.search-nav-fixed.myskills-nav-fixed, .navigation.myskills-nav-fixed.search-nav-fixed, .navigation.myskills-nav-fixed.myskills-nav-fixed {
    margin-bottom: -5px; }
  .navigation.main-nav-fixed .btn-back,
  .navigation.main-nav-fixed .btn-search,
  .navigation.main-nav-fixed .btn-my, .navigation.search-nav-fixed .btn-back,
  .navigation.search-nav-fixed .btn-search,
  .navigation.search-nav-fixed .btn-my, .navigation.myskills-nav-fixed .btn-back,
  .navigation.myskills-nav-fixed .btn-search,
  .navigation.myskills-nav-fixed .btn-my {
    top: 0; }
    @supports (padding-top: constant(safe-area-inset-top)) {
      .navigation.main-nav-fixed .btn-back,
      .navigation.main-nav-fixed .btn-search,
      .navigation.main-nav-fixed .btn-my, .navigation.search-nav-fixed .btn-back,
      .navigation.search-nav-fixed .btn-search,
      .navigation.search-nav-fixed .btn-my, .navigation.myskills-nav-fixed .btn-back,
      .navigation.myskills-nav-fixed .btn-search,
      .navigation.myskills-nav-fixed .btn-my {
        top: constant(safe-area-inset-top); } }
    @supports (padding-top: env(safe-area-inset-top)) {
      .navigation.main-nav-fixed .btn-back,
      .navigation.main-nav-fixed .btn-search,
      .navigation.main-nav-fixed .btn-my, .navigation.search-nav-fixed .btn-back,
      .navigation.search-nav-fixed .btn-search,
      .navigation.search-nav-fixed .btn-my, .navigation.myskills-nav-fixed .btn-back,
      .navigation.myskills-nav-fixed .btn-search,
      .navigation.myskills-nav-fixed .btn-my {
        top: env(safe-area-inset-top); } }

.navigation.border {
  border-bottom: #f8f8f8 1px solid; }

[lang="ja"] .navigation.type_search .btn-search:before {
  margin-top: -10px; }

[lang="ja"] .navigation.type_search .navigation-title {
  line-height: 42px; }

.layout {
  height: 100%;
  overflow: hidden;
  padding: 0; }
  .layout .contents {
    position: relative;
    top: 0;
    margin: 0;
    font-family: 'SF-UI-Display', AppleSDGothicNeo, sans-serif;
    -webkit-overflow-scrolling: touch;
    width: 100vw;
    box-sizing: border-box;
    overflow-y: auto;
    height: 90vh;
    height: calc(100vh - 47px); }
    @supports (-webkit-overflow-scrolling: touch) {
      .layout .contents {
        --contents-height: calc(100vh - 20px - 47px);
        height: var(--contents-height); } }
    @supports (height: constant(safe-area-inset-top)) {
      .layout .contents {
        --safe-area-inset-top: constant(safe-area-inset-top);
        height: calc(100vh - var(--safe-area-inset-top) - 47px); } }
    @supports (height: env(safe-area-inset-top)) {
      .layout .contents {
        --safe-area-inset-top: env(safe-area-inset-top);
        height: calc(100vh - var(--safe-area-inset-top) - 47px); } }
    .layout .contents.border {
      height: calc(100vh - 48px); }
      @supports (-webkit-overflow-scrolling: touch) {
        .layout .contents.border {
          --contents-height: calc(100vh - 20px - 48px);
          height: var(--contents-height); } }
      @supports (height: constant(safe-area-inset-top)) {
        .layout .contents.border {
          --safe-area-inset-top: constant(safe-area-inset-top);
          height: calc(100vh - var(--safe-area-inset-top) - 48px); } }
      @supports (height: env(safe-area-inset-top)) {
        .layout .contents.border {
          --safe-area-inset-top: env(safe-area-inset-top);
          height: calc(100vh - var(--safe-area-inset-top) - 48px); } }
    .layout .contents.search-nav-fixed {
      height: calc(100vh - 118px); }
      @supports (-webkit-overflow-scrolling: touch) {
        .layout .contents.search-nav-fixed {
          --contents-height: calc(100vh - 20px - 118px);
          height: var(--contents-height); } }
      @supports (height: constant(safe-area-inset-top)) {
        .layout .contents.search-nav-fixed {
          --safe-area-inset-top: constant(safe-area-inset-top);
          height: calc(100vh - var(--safe-area-inset-top) - 118px); } }
      @supports (height: env(safe-area-inset-top)) {
        .layout .contents.search-nav-fixed {
          --safe-area-inset-top: env(safe-area-inset-top);
          height: calc(100vh - var(--safe-area-inset-top) - 118px); } }
    .layout .contents.myskills-nav-fixed {
      height: calc(100vh - 99px); }
      @supports (-webkit-overflow-scrolling: touch) {
        .layout .contents.myskills-nav-fixed {
          --contents-height: calc(100vh - 20px - 99px);
          height: var(--contents-height); } }
      @supports (height: constant(safe-area-inset-top)) {
        .layout .contents.myskills-nav-fixed {
          --safe-area-inset-top: constant(safe-area-inset-top);
          height: calc(100vh - var(--safe-area-inset-top) - 99px); } }
      @supports (height: env(safe-area-inset-top)) {
        .layout .contents.myskills-nav-fixed {
          --safe-area-inset-top: env(safe-area-inset-top);
          height: calc(100vh - var(--safe-area-inset-top) - 99px); } }

[lang="ja"] .layout {
  font-family: 'SF-UI-Display', 'HiraginoSans-W3', 'Hiragino Kaku Gothic ProN', Meiryo, arial, sans-serif; }

@charset "UTF-8";
.error {
  /* 2018-03-07 bridge_JA 페이지 작업 */
  /* 20180604 error page add */ }
  .error .content {
    position: relative;
    display: block;
    text-align: center;
    padding: 72px 18px 30px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; }
    [lang="ja"] .error .content {
      font-family: 'Hiragino Kaku Gothic ProN', 'HiraginoSans-W3', Meiryo, arial, sans-serif; }
  .error h1 {
    display: block;
    width: 107px;
    height: 146px;
    margin: 0 auto 56px; }
  .error h1.clova_logo {
    background: url(/clova-ai/skillstore/static/img/im_logo_clova.png) no-repeat 0 0;
    background-size: 107px 146px;
    -webkit-background-size: 107px 146px;
    margin: 0 auto 56px; }
  .error h1.ifttt_logo {
    background: url(/clova-ai/skillstore/static/img/im_logo_ifttt.png) no-repeat 0 0;
    background-size: 107px 146px;
    -webkit-background-size: 107px 146px; }
  .error .txt_main p,
  .error .txt_sub p {
    margin: 0; }
  .error .txt_main {
    font-size: 19px;
    line-height: 28px; }
  .error .txt_main .txt_type_en {
    font-size: 20px; }
  .error .txt_sub {
    padding: 13px 0 10px;
    font-size: 15.5px;
    line-height: 23px;
    word-wrap: break-word;
    word-break: break-all;
    color: #737373; }
  .error .txt_sub .txt_type_en {
    font-size: 15px; }
  .error .btn_link {
    display: block;
    width: 100%;
    height: 68px;
    margin-top: 28px;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; }
  .error .btn_link.type_ifttt {
    position: relative;
    display: block;
    margin-top: 95px;
    text-align: center; }
  .error .btn_link.type_error {
    margin-top: 74px; }
  .error .btn_link.type_ifttt a {
    display: inline-block;
    width: calc(50% - 6px); }
  .error .btn_link.type_ifttt a + a {
    margin-left: 5px; }
  .error .btn_link.type_ifttt a.btn_left {
    border: 1px solid rgba(149, 149, 149, 0.3);
    color: #959595; }
  .error .btn_link.type_ifttt a.btn_right {
    border: 1px solid #32c864;
    background-color: #32c864;
    color: #fff; }
  .error .btn_link a {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 336px;
    height: 100%;
    border: 1px solid #32c864;
    font-size: 16px;
    line-height: 68px;
    color: #32c864;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; }
  .error .content.clova_error {
    padding-top: 194px; }
  .error .content.clova_error h1.clova_error_title {
    width: 71px;
    height: 71px;
    background: url(/clova-ai/skillstore/static/img/im_error.png) no-repeat 0 0;
    background-size: 71px 71px;
    -webkit-background-size: 71px 71px;
    margin: 0 auto 45px;
    position: relative; }
    .error .content.clova_error h1.clova_error_title .error_title_subs {
      color: #ff7b8f;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 2px solid #ff7b8f;
      box-sizing: border-box;
      line-height: 69px;
      font-size: 42px;
      font-weight: 300;
      position: absolute;
      top: 0;
      left: 0; }
  .error .content.clova_error .btn_link.type_error {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0; }
  .error .content.clova_error .btn_link.type_error a {
    max-width: 100%;
    border: 0;
    background-color: #f4f5f5;
    color: #1d90d3; }
  .error .content.clova_error .txt_main {
    color: #222; }

.request_block.blocked {
  pointer-events: none; }

@media not screen and (max-width: 767px) {
  .request_block {
    width: 1078px;
    margin: 0 auto;
    padding-top: 18px; } }

@media not screen and (max-width: 767px) {
  .pc_layout.kr .request_block {
    width: 1060px; } }

@charset "UTF-8";
.brand-name {
  display: block;
  position: relative;
  padding: 21px 20px 0;
  margin-bottom: -6px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box; }
  .brand-name-img-box {
    position: relative;
    display: block;
    overflow: hidden;
    width: 105px;
    height: 105px;
    margin-bottom: 15px; }
    .brand-name-img-box-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 105px;
      height: 105px;
      border: 0;
      background: url(/clova-ai/skillstore/static/img/im_stroke_l.png) no-repeat;
      background-size: 105px 105px; }
    .brand-name-img-box img,
    .brand-name-img-box canvas {
      display: block;
      width: 100%;
      height: 100%;
      vertical-align: top;
      border-radius: 50%;
      -webkit-border-radius: 50%; }
    .brand-name-img-box .no-image {
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 100px;
      font-size: 14px;
      font-weight: 300;
      color: #ccc; }
  .brand-name-info-box {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    margin-bottom: 9px; }
    .brand-name-info-box-btn {
      display: block;
      position: absolute;
      top: 11px;
      right: 0; }
      .brand-name-info-box-btn button {
        padding: 9px 0 11px; }
    .brand-name-info-box-text {
      display: inline-block;
      margin-right: 15px;
      vertical-align: middle;
      width: 100%; }
      .brand-name-info-box-text-title {
        max-height: 108px;
        width: calc(100% - 118px);
        display: block;
        margin-bottom: 5px;
        font-size: 28px;
        line-height: 1.3;
        color: #000;
        font-weight: 700;
        font-family: 'SF-UI-Display-Semibold', sans-serif;
        word-break-cjk: break-all;
        display: block;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; }
      .brand-name-info-box-text-company {
        display: inline-block;
        max-width: calc(100% - 118px);
        position: relative;
        font-weight: 200;
        font-family: 'SF-UI-Display', sans-serif;
        font-size: 16px;
        line-height: 20px;
        color: rgba(0, 0, 0, 0.6);
        word-break: break-all;
        display: block;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; }
      .brand-name-info-box-text.smaller .brand-name-info-box-text-title {
        font-size: 23px; }
    .brand-name-info-box-btn {
      display: inline-block;
      vertical-align: middle; }
      .brand-name-info-box-btn button {
        display: block;
        width: 98px;
        height: 40px;
        padding: 9px 0 11px;
        border: 1px solid #ccc;
        border-radius: 20px;
        font-size: 16px;
        line-height: 1.3;
        text-align: center;
        color: #ccc;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        background: none;
        -webkit-appearance: none;
        outline: none; }
      .brand-name-info-box-btn.enabled button {
        border: 1px solid #999;
        color: #999; }
  .brand-name-notice-box {
    display: block;
    padding-top: 14px; }
    .brand-name-notice-box-text {
      font-size: 16px;
      line-height: 1.6;
      color: #9c9c9c;
      word-break: break-all;
      word-wrap: break-word; }

.method-use {
  display: none; }

[lang="ja"] .brand-name-info-box-text-title,
[lang="ja"] .brand-name-info-box-text-company,
[lang="ja"] .brand-name-info-box-btn button {
  font-family: 'SF-UI-Display', 'HiraginoSans-W3', 'Hiragino Kaku Gothic ProN', Meiryo, arial, sans-serif;
  letter-spacing: -0.5px; }

[lang="ja"] .brand-name-info-box-text-title {
  font-weight: bold; }

[lang="ja"] .brand-name-info-box-btn button {
  padding: 10px 0 10px; }

@media not screen and (max-width: 767px) {
  .brand-name {
    display: table;
    width: 100%;
    padding: 0;
    table-layout: fixed; }
    .brand-name-img-box {
      display: table-cell;
      width: 190px;
      height: 190px;
      vertical-align: top; }
      .brand-name-img-box-mask {
        width: 190px;
        height: 190px;
        background-size: 190px 190px; }
      .brand-name-img-box img, .brand-name-img-box canvas {
        width: 190px;
        height: 190px; }
    .brand-name-info-box {
      display: table-cell;
      padding-left: 39px;
      vertical-align: top;
      box-sizing: border-box;
      -webkit-box-sizing: border-box; }
      .brand-name-info-box-text-title {
        width: 100%;
        margin-bottom: 0px;
        font-size: 38px;
        font-weight: 700;
        line-height: 1.2; }
      .brand-name-info-box-text-company {
        font-size: 14px;
        color: #c2c2c2; }
  .method-use {
    display: block;
    margin-top: 25px; }
    .method-use-list-box {
      display: table;
      width: calc(100% + 7px);
      height: 100%;
      table-layout: fixed;
      margin-left: -8px; }
      .method-use-list-box-list {
        display: table-cell;
        height: 100%;
        vertical-align: middle; }
        .method-use-list-box-list-bg {
          display: block;
          height: 100%;
          margin-left: 3%;
          padding: 19px 25px 18px 25px;
          font-size: 17px;
          line-height: 23px;
          font-weight: bold;
          color: #000;
          background: #eee;
          border-radius: 19px;
          vertical-align: middle;
          -moz-box-sizing: border-box;
          border-radius: 16px;
          -webkit-border-radius: 16px; }
          .ie .method-use-list-box-list-bg {
            box-sizing: border-box; }
          .method-use-list-box-list-bg:after {
            display: inline-block;
            height: 100%;
            content: '';
            vertical-align: middle; }
          .method-use-list-box-list-bg-text {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px; }
    .method-use-text {
      margin-top: 19px;
      font-weight: bold;
      font-size: 14px;
      color: #05d686; } }

.pc_layout.kr .brand-name-info-box-text-title {
  width: 100%;
  font-family: "NanumSquare", 나눔스퀘어, Nanum Barun Gothic, 나눔바른고딕, "Nanum Barun Gothic", "NanumGothic", "\B098\B214\ACE0\B515", "Apple SD Gothic Neo", Dotum, "\B3CB\C6C0", sans-serif; }

@media not screen and (max-width: 767px) {
  .pc_layout.kr .brand-name-info-box-text-title {
    font-size: 36px;
    margin-bottom: 8px; }
  .pc_layout.kr .brand-name-info-box-text-company {
    font-weight: 400; } }

@charset "UTF-8";
.skill-section-title.section-title {
  position: relative;
  display: block;
  padding: 57px 20px 0;
  line-height: 1.3; }
  .skill-section-title.section-title h3 {
    font-size: 19px;
    font-weight: 700;
    font-family: 'SF-UI-Display', sans-serif; }
  .skill-section-title.section-title .btn_push_alarm {
    display: block;
    position: absolute;
    width: 57px;
    height: 37px;
    bottom: -7.5px;
    right: 20px;
    background: url(/static/img/btn_push_default.png) no-repeat 0 0;
    background-size: 57px 37px;
    -webkit-background-size: 57px 37px; }
    .skill-section-title.section-title .btn_push_alarm.active {
      background: url(/static/img/btn_push_active.png) no-repeat 0 0;
      background-size: 57px 37px;
      -webkit-background-size: 57px 37px; }

[lang="ja"] .skill-section-title.section-title h3 {
  font-family: 'HiraginoSans-W5', 'Hiragino Kaku Gothic ProN', Meiryo, arial, sans-serif;
  letter-spacing: -0.5px;
  font-size: 18px;
  font-weight: 600; }

@media not screen and (max-width: 767px) {
  .skill-section-title.section-title span {
    font-size: 14px; }
  .skill-section-title.section-title .location {
    display: none; }
  .skill-section-title.section-title.navigator {
    padding: 0; }
    .skill-section-title.section-title.navigator .location {
      display: block;
      margin-bottom: 37px;
      font-size: 14px; }
      .skill-section-title.section-title.navigator .location > span {
        font-weight: bold;
        vertical-align: middle; }
        .skill-section-title.section-title.navigator .location > span:last-child:after {
          display: none; }
        .skill-section-title.section-title.navigator .location > span:after {
          display: inline-block;
          content: '';
          width: 6px;
          height: 11px;
          margin: 0 8px;
          background: url(/clova-ai/skillstore/static/img/icon_arrow_v2.png) no-repeat;
          background-size: 6px 11px;
          -webkit-background-size: 6px 11px;
          vertical-align: -1px; } }

.pc_layout.kr .skill-section-title h3 {
  font-family: "NanumSquare", 나눔스퀘어, Nanum Barun Gothic, 나눔바른고딕, "Nanum Barun Gothic", "NanumGothic", "\B098\B214\ACE0\B515", "Apple SD Gothic Neo", Dotum, "\B3CB\C6C0", sans-serif; }

.skill-section-notice.section-notice {
  position: relative;
  padding: 10px 20px 0;
  font-size: 16px;
  line-height: 1.6;
  color: #8a8a8a; }
  @media (-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 2.5dppx) {
    .skill-section-notice.section-notice {
      font-size: 0.9em; } }
  .skill-section-notice.section-notice:not(.off) p {
    display: block;
    display: -webkit-box;
    max-height: 128px;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; }
    .skill-section-notice.section-notice:not(.off) p > a:after {
      content: ' '; }
  .skill-section-notice.section-notice p {
    display: block;
    font-weight: 200;
    word-break: break-all; }
  .skill-section-notice.section-notice.info {
    position: relative;
    display: block;
    padding-top: 9px; }
    .skill-section-notice.section-notice.info .info-list {
      overflow: hidden; }
      .skill-section-notice.section-notice.info .info-list dt {
        float: left;
        width: 80px;
        margin-bottom: 10px;
        margin-right: 23px;
        color: #515151;
        white-space: nowrap; }
      .skill-section-notice.section-notice.info .info-list dd {
        overflow: hidden;
        margin-bottom: 10px;
        font-weight: 200;
        min-height: 25px; }
  .skill-section-notice.section-notice .section-push {
    display: block;
    width: 100%;
    margin-top: 15px;
    padding: 17px 24.5px 18.5px;
    border: 1px solid #eee;
    border-radius: 6px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; }
    .skill-section-notice.section-notice .section-push li {
      margin-top: 9px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
      .skill-section-notice.section-notice .section-push li:first-child {
        margin-top: 0; }

.skill-section-notice .btn-more {
  display: block;
  position: absolute;
  width: calc(100% - 75%);
  height: 30px;
  bottom: -42px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  z-index: 10; }
  .skill-section-notice .btn-more.off {
    display: none; }
  .skill-section-notice .btn-more:before {
    content: '';
    display: block;
    position: absolute;
    width: 26px;
    height: 25px;
    left: 50%;
    top: 3px;
    margin-left: -13px;
    background: url(/clova-ai/skillstore/static/img/sp_btn.png) no-repeat 0 0;
    background-size: 100px 100px;
    -webkit-background-size: 100px 100px; }

[lang="ja"] .section-notice p,
[lang="ja"] .section-notice.info .info-list dt,
[lang="ja"] .section-notice.info .info-list dd {
  letter-spacing: -0.5px; }

@media not screen and (max-width: 767px) {
  .skill-section-notice.section-notice {
    padding: 8px 0 0;
    font-size: 14px; }
    .skill-section-notice.section-notice .info-list dt {
      color: #000; } }

@media not screen and (max-width: 767px) {
  .pc_layout.kr .skill-section-notice p,
  .pc_layout.kr .skill-section-notice.section-notice.info .info-list dd {
    font-weight: 400; } }

.skill-detail-link {
  display: block;
  height: 78px;
  padding: 38px 0 0 22px; }
  .skill-detail-link-box {
    width: 100%;
    height: 100%;
    background: url(/clova-ai/skillstore/static/img/im_line.png) repeat-x;
    background-size: 1px 1px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; }
    .skill-detail-link-box a {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      padding: 27px 0 23px;
      font-size: 19px;
      line-height: 1.3;
      font-weight: 700;
      background: url(/clova-ai/skillstore/static/img/im_line.png) 0 100% repeat-x;
      background-size: 1px 1px;
      box-sizing: border-box;
      -webkit-box-sizing: border-box; }
      .skill-detail-link-box a:before {
        content: '';
        display: block;
        position: absolute;
        width: 8px;
        height: 14px;
        top: 32px;
        right: 20px;
        background: url(/clova-ai/skillstore/static/img/sp_btn.png) no-repeat 0 -30px;
        background-size: 100px 100px;
        -webkit-background-size: 100px 100px; }
  .skill-detail-link.type-add-line {
    padding: 17px 0 0 22px; }
    .skill-detail-link.type-add-line .skill-detail-link-box a {
      position: relative;
      padding-left: 27px;
      box-sizing: border-box;
      -webkit-box-sizing: border-box; }
      .skill-detail-link.type-add-line .skill-detail-link-box a:before {
        right: 22px; }
      .skill-detail-link.type-add-line .skill-detail-link-box a:after {
        content: '';
        display: block;
        position: absolute;
        top: 29px;
        left: 0;
        width: 21px;
        height: 20px;
        background: url(/clova-ai/skillstore/static/img/im_icon_line.png) no-repeat 0 0;
        background-size: 21px 20px;
        -webkit-background-size: 21px 20px; }

.skill-detail-link + .skill-detail-link {
  padding-top: 0; }
  .skill-detail-link + .skill-detail-link .skill-detail-link-box {
    background: none; }

[lang="ja"] .skill-detail-link-box a {
  font-size: 18px;
  font-weight: bold; }

@media not screen and (max-width: 767px) {
  .skill-detail-link {
    height: auto;
    padding: 10px 0; }
    .skill-detail-link:first-of-type {
      padding: 50px 0 10px; }
    .skill-detail-link:last-of-type {
      padding-bottom: 50px; }
    .skill-detail-link-box {
      background: none; }
      .skill-detail-link-box a {
        margin-bottom: 20px;
        padding: 0;
        font-size: 14px;
        line-height: 1.3;
        font-weight: 700;
        background: none; }
        .skill-detail-link-box a:last-child {
          margin-bottom: 0; }
        .skill-detail-link-box a:before {
          display: none; }
        .skill-detail-link-box a:after {
          content: '';
          display: inline-block;
          width: 7px;
          height: 11px;
          margin-left: 7px;
          background: url(/clova-ai/skillstore/static/img/sp_btn.png) no-repeat -14px -30px;
          background-size: 100px 100px;
          -webkit-background-size: 100px 100px;
          vertical-align: -1px; }
    .skill-detail-link.type-add-line {
      display: none; } }

@media not screen and (max-width: 767px) {
  [lang="ja"] .skill-detail-link-box a {
    font-size: 14px;
    font-weight: 700; } }

.dimed {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1; }

.popup-box {
  display: block;
  position: fixed;
  width: 332px;
  background: #fff;
  border-radius: 3px;
  z-index: 10;
  text-align: center;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  color: #000;
  max-height: 255px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto; }
  .popup-box-info {
    padding: 20px; }
    .popup-box-info strong {
      display: inline-block;
      padding: 21px 0 20px;
      font-size: 20px;
      line-height: 1.3;
      font-weight: 600; }
    .popup-box-info p {
      padding-bottom: 19px;
      font-size: 17px;
      line-height: 1.53;
      font-weight: 300; }
  .popup-box .btn-box {
    height: 75px;
    background-color: #f9fafb; }
    .popup-box .btn-box a {
      display: inline-block;
      width: 50%;
      padding: 28px 0 27px;
      text-align: center; }

@charset "UTF-8";
.sample-utterances {
  margin: 16px 0 1px 0; }

.utterance {
  width: 155px;
  height: 115px;
  position: relative;
  overflow: hidden;
  border-radius: 19px; }
  .utterance .bg,
  .utterance .content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: left; }
  .utterance .bg1 {
    opacity: 1; }
  .utterance .bg2 {
    background: #000;
    opacity: 0.5; }
  .utterance .bg3 {
    background: #848484;
    opacity: 0.4; }
  .utterance .bg4 {
    background: #ffffff;
    opacity: 0.4; }
  .utterance .bg5 {
    background: #f7f7f7;
    opacity: 1;
    border-radius: 19px; }
  .utterance .content {
    color: #fff;
    padding: 19px 25px 18px 25px;
    box-sizing: border-box;
    font-size: 17px;
    line-height: 23px;
    font-weight: 400; }
    .utterance .content span {
      display: block;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis; }
    @media (-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 2.5dppx) {
      .utterance .content {
        font-size: 0.9em; } }
  .utterance:first-of-type {
    margin-left: 22px; }
  .utterance:last-of-type {
    margin-right: 22px; }

/**
4/ #f7f7f7 opacity 100%
4/ #ffffff opacity 40%
3/ #848484 opacity 40%
2/ #000000 opacity 50%
1/ 로고 추출 컬러 opacity 100%
**/
.sample-utterances.type_vertical {
  padding: 0 20px; }
  .sample-utterances.type_vertical .utterance {
    width: 100%;
    height: auto;
    margin-top: 8px;
    box-sizing: border-box; }
    .sample-utterances.type_vertical .utterance .content {
      position: relative;
      height: auto;
      color: #818080; }
      .sample-utterances.type_vertical .utterance .content span {
        word-break: break-all; }
    .sample-utterances.type_vertical .utterance:first-of-type {
      margin-left: 0;
      margin-top: 0; }
    .sample-utterances.type_vertical .utterance:last-of-type {
      margin-right: 0; }

[lang="ja"] .content {
  font-family: 'SF-UI-Display', 'HiraginoSans-W3', 'Hiragino Kaku Gothic ProN', Meiryo, arial, sans-serif; }

[lang="ja"] .utterance .content {
  font-size: 18px;
  font-weight: 300; }

[lang="ja"] .sample-utterances {
  margin: 16px 0 5px 0; }

@charset "UTF-8";
/* common */
body,
button,
dd,
details,
dl,
dt,
fieldset,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
input,
legend,
li,
menu,
nav,
ol,
p,
section,
table,
td,
th,
ul {
  margin: 0;
  padding: 0;
  font-family: 'SF-UI-Display', 'HiraginoSans-W3', 'Hiragino Kaku Gothic ProN', Meiryo, arial, sans-serif;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
          text-size-adjust: none; }

html.block_scroll,
body.block_scroll {
  overflow: hidden; }

fieldset,
img {
  border: 0; }

img {
  vertical-align: top; }

li,
ol,
ul {
  list-style: none; }

address,
em,
i {
  font-style: normal; }

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); }

table {
  border-collapse: collapse; }

table caption {
  display: none !important; }

textarea, input {
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  border-radius: 0; }

button {
  border: 0;
  background: none;
  -webkit-appearance: none; }

/* 웹폰트 */
@font-face {
  font-family: 'SF-UI-Display';
  font-display: swap;
  src: url(/clova-ai/skillstore/static/webfont/SFUIDisplay/SF-UI-Display-Light.otf) format("opentype");
  src: url(/clova-ai/skillstore/static/webfont/SFUIDisplay/SF-UI-Display-Light.woff) format("woff"), url(/clova-ai/skillstore/static/webfont/SFUIDisplay/SF-UI-Display-Light.woff2) format("woff2");
  font-weight: 400; }

@font-face {
  font-family: 'SF-UI-Display';
  font-display: swap;
  src: url(/clova-ai/skillstore/static/webfont/SFUIDisplay/SF-UI-Display-Regular.otf) format("opentype");
  src: url(/clova-ai/skillstore/static/webfont/SFUIDisplay/SF-UI-Display-Regular.woff) format("woff"), url(/clova-ai/skillstore/static/webfont/SFUIDisplay/SF-UI-Display-Regular.woff2) format("woff2");
  font-weight: 500; }

@font-face {
  font-family: 'SF-UI-Display';
  font-display: swap;
  src: url(/clova-ai/skillstore/static/webfont/SFUIDisplay/SF-UI-Display-Semibold.otf) format("opentype");
  src: url(/clova-ai/skillstore/static/webfont/SFUIDisplay/SF-UI-Display-Semibold.woff) format("woff"), url(/clova-ai/skillstore/static/webfont/SFUIDisplay/SF-UI-Display-Semibold.woff2) format("woff2");
  font-weight: 700; }

a, img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.blind {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden; }

.text-blue {
  color: #1D92E4 !important; }

@media not screen and (max-width: 767px) {
  .mobile_only {
    display: none !important; } }

.pc_only {
  display: none; }
  @media not screen and (max-width: 767px) {
    .pc_only {
      display: block !important; } }

.mt-20 {
  margin-top: 20px !important; }

.mt-50 {
  margin-top: 50px !important; }

.mt-75 {
  margin-top: 75px !important; }

.pt-50 {
  padding-top: 50px !important; }

.pt-40 {
  padding-top: 40px !important; }

.pl-27 {
  padding-left: 27px !important; }