@charset "utf-8";

[streamer-mode-what-is] .main-description { align-items: center; color: rgb(255, 255, 255); display: flex; flex-direction: column; gap: 12px; margin-bottom: 56px; text-align: center; }

[streamer-mode-what-is] .main-description h3 { font-size: 26px; font-weight: 500; letter-spacing: 0.7px; line-height: 32px; }

[streamer-mode-what-is] .main-description .live { align-items: center; background: rgb(244, 19, 19); border-radius: 4px; display: flex; font-size: 12px; font-weight: 500; gap: 4px; justify-content: center; letter-spacing: 0.36px; line-height: 12px; padding: 5px 12px; }

[streamer-mode-what-is] .main-description .message { color: rgb(212, 212, 212); font-size: 14px; font-weight: 400; letter-spacing: 0.42px; line-height: 20px; }

[streamer-mode-what-is] .card-step { gap: 16px; width: 100%; }

[streamer-mode-what-is] .card-step .item { background: linear-gradient(rgb(41, 41, 47), rgb(35, 37, 41) 94.74%); border-radius: var(--radius-16,16px); }

[streamer-mode-what-is] .card-step .image { padding: 12px 12px 24px; }

[streamer-mode-what-is] .card-step .image img { height: auto; width: 100% !important; }

[streamer-mode-what-is] .card-step .desc { align-items: flex-start; display: flex; flex-direction: column; gap: 16px; padding: 0px 32px 32px; }

[streamer-mode-what-is] .card-step .step { border-bottom: 2px solid rgb(84, 84, 95); color: rgb(255, 255, 255); font-size: 18px; font-weight: 500; letter-spacing: 0.54px; line-height: 24px; padding: 0px 18px 16px 0px; position: relative; }

[streamer-mode-what-is] .card-step .message { color: rgb(212, 212, 212); font-size: 14px; font-weight: 400; letter-spacing: 0.42px; line-height: 20px; width: 100%; }

[streamer-mode-what-is] .card-step .message a { color: rgb(46, 144, 250); text-decoration: none; }

@media screen and (min-width: 768px) {
  [streamer-mode-what-is].no-ambassador .card-step::before { display: none; }
  [streamer-mode-what-is] .main-description { margin-bottom: 64px; }
  [streamer-mode-what-is] .main-description h3 { font-size: 30px; line-height: 36px; }
  [streamer-mode-what-is] .card-step { position: relative; }
  [streamer-mode-what-is] .card-step::before { background: url("https://ssl.gg-global-cdn.com/bd/front/img/web/streamer_mode_how_ambassadors.webp") 0px 0px / cover no-repeat; content: ""; display: block; height: 126px; position: absolute; right: -32px; top: -140px; width: 169px; }
}

@media screen and (min-width: 1244px) {
  [streamer-mode-what-is] .main-description { gap: 24px; margin-bottom: 128px; }
  [streamer-mode-what-is] .main-description h3 { font-size: 42px; letter-spacing: 1.26px; line-height: 48px; }
  [streamer-mode-what-is] .main-description .message span { display: block; }
  [streamer-mode-what-is] .card-step::before { height: 201px; right: -26px; top: -211px; width: 270px; }
  [streamer-mode-what-is] .card-step[tp="2"] .item { display: flex; }
  [streamer-mode-what-is] .card-step[tp="2"] .item .image { flex: 0 0 auto; padding: 12px 0px 12px 12px; }
  [streamer-mode-what-is] .card-step[tp="2"] .item .image figure { height: 188px; width: 284px; }
  [streamer-mode-what-is] .card-step[tp="2"] .item .image figure img { border-bottom-left-radius: 8px; border-top-left-radius: 8px; height: inherit; width: inherit; }
  [streamer-mode-what-is] .card-step[tp="2"] .item .desc { flex: 1 1 0%; padding: 24px; }
  [streamer-mode-what-is] .card-step[tp="2"] .item:first-child .desc p { display: inline; }
  [streamer-mode-what-is] .card-step[tp="2"] .item:first-child .desc a { margin-left: 8px; }
}

div[streamer-mode-benefits] .article-content .title + .content { padding-top: 0px; }

div[streamer-mode-benefits] .article-content .benefit-wrap { display: flex; flex-direction: column; gap: 54px; margin-top: 56px; }

div[streamer-mode-benefits] .article-content .benefit-cont { display: flex; flex-direction: column; gap: 24px; }

div[streamer-mode-benefits] .article-content .benefit-cont h4 { color: rgb(255, 255, 255); font-size: 24px; font-weight: 500; letter-spacing: 0.72px; line-height: 30px; padding-bottom: 24px; }

div[streamer-mode-benefits] .article-content .benefit-cont li, div[streamer-mode-benefits] .article-content .benefit-cont p { color: rgb(212, 212, 212); font-size: 14px; font-weight: 400; letter-spacing: 0.42px; line-height: 22px; }

div[streamer-mode-benefits] .article-content .benefit-cont li { padding-left: 22px; position: relative; }

div[streamer-mode-benefits] .article-content .benefit-cont li::before { border: 2px solid rgba(212, 212, 212, 0.5); border-radius: 50%; content: ""; display: block; height: 4px; left: 8px; position: absolute; top: 8px; width: 4px; }

div[streamer-mode-benefits] .article-content .benefit-cont .image { margin: 0px auto; }

div[streamer-mode-benefits] .article-content .benefit-cont .image img { height: auto; max-width: 700px !important; width: 100% !important; }

div[streamer-mode-benefits] .article-content .benefit-cont .image.img1 { max-width: 496px !important; }

@media screen and (min-width: 768px) {
  div[streamer-mode-benefits] .article-content .benefit-wrap { gap: 64px; margin-top: 64px; }
}

@media screen and (min-width: 1244px) {
  div[streamer-mode-benefits] .article-content .benefit-wrap { gap: 128px; margin-top: 128px; }
  div[streamer-mode-benefits] .article-content .benefit-cont { flex-direction: row; margin: 0px auto; max-width: 1000px; width: 100%; }
  div[streamer-mode-benefits] .article-content .benefit-cont .desc { flex: 1 1 0%; padding-right: 72px; }
  div[streamer-mode-benefits] .article-content .benefit-cont .image { flex: 1 1 0%; }
  div[streamer-mode-benefits] .article-content .benefit-cont h4 { font-size: 28px; letter-spacing: 0.84px; line-height: 36px; }
  div[streamer-mode-benefits] .article-content .benefit-cont.img-left { flex-direction: row-reverse; }
  div[streamer-mode-benefits] .article-content .benefit-cont.img-left .desc { flex: 0 0 auto; padding: 0px 0px 0px 72px; width: 504px; }
}

[streamer-mode-faq] .faq-list { display: flex; flex-direction: column; font-size: 14px; gap: 24px; letter-spacing: 0.42px; }

[streamer-mode-faq] .faq-list .item-list h5 { color: rgb(255, 255, 255); font-size: 14px; font-weight: 500; }

[streamer-mode-faq] .faq-list .item-list p { color: rgb(212, 212, 212); }

[streamer-mode-faq] .faq-list .item-list p.list::before { content: "-"; margin-right: 2px; }

[streamer-mode-faq] .faq-list .item-list p a { color: rgb(212, 212, 212); font-weight: 400; }