@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, ar, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; }

@font-face { font-family: 'Noto Sans TC'; font-style: normal; font-weight: 400; src: url(../vendor/fonts/NotoSansTC-Regular.woff2) format("woff2"); }

@font-face { font-family: 'Noto Sans TC'; font-style: normal; font-weight: 700; src: url(../vendor/fonts/NotoSansTC-Bold.woff2) format("woff2"); }

@-webkit-keyframes motor { 0% { background-position: 0 0; }
  100% { background-position: 0 -585px; } }

@keyframes motor { 0% { background-position: 0 0; }
  100% { background-position: 0 -585px; } }

@-webkit-keyframes motor-tb { 0% { background-position: 0 0; }
  100% { background-position: 0 -444px; } }

@keyframes motor-tb { 0% { background-position: 0 0; }
  100% { background-position: 0 -444px; } }

@-webkit-keyframes motor-sm { 0% { background-position: 0 0; }
  100% { background-position: 0 -366px; } }

@keyframes motor-sm { 0% { background-position: 0 0; }
  100% { background-position: 0 -366px; } }

@-webkit-keyframes hand { 0% { background-position: 0 0; }
  100% { background-position: 0 -780px; } }

@keyframes hand { 0% { background-position: 0 0; }
  100% { background-position: 0 -780px; } }

@-webkit-keyframes hand-tb { 0% { background-position: 0 0; }
  100% { background-position: 0 -592px; } }

@keyframes hand-tb { 0% { background-position: 0 0; }
  100% { background-position: 0 -592px; } }

@-webkit-keyframes hand-sm { 0% { background-position: 0 0; }
  100% { background-position: 0 -488px; } }

@keyframes hand-sm { 0% { background-position: 0 0; }
  100% { background-position: 0 -488px; } }

@-webkit-keyframes scrollText { from { -webkit-transform: translateX(0%); transform: translateX(0%); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }

@keyframes scrollText { from { -webkit-transform: translateX(0%); transform: translateX(0%); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }

@-webkit-keyframes scrollText-go1 { from { -webkit-transform: translateX(-10%); transform: translateX(-10%); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }

@keyframes scrollText-go1 { from { -webkit-transform: translateX(-10%); transform: translateX(-10%); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }

@-webkit-keyframes scrollText-go4 { from { -webkit-transform: translateX(-30%); transform: translateX(-30%); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }

@keyframes scrollText-go4 { from { -webkit-transform: translateX(-30%); transform: translateX(-30%); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }

@-webkit-keyframes scrollText-go4-sm { from { -webkit-transform: translateX(-35%); transform: translateX(-35%); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }

@keyframes scrollText-go4-sm { from { -webkit-transform: translateX(-35%); transform: translateX(-35%); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }

@-webkit-keyframes scrollText-go6 { from { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }

@keyframes scrollText-go6 { from { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }

@-webkit-keyframes scrollText-go6-sm { from { -webkit-transform: translateX(-55%); transform: translateX(-55%); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }

@keyframes scrollText-go6-sm { from { -webkit-transform: translateX(-55%); transform: translateX(-55%); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }

@-webkit-keyframes scrollText-kv { from { -webkit-transform: translateX(0%); transform: translateX(0%); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }

@keyframes scrollText-kv { from { -webkit-transform: translateX(0%); transform: translateX(0%); }
  to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }

@-webkit-keyframes effects-bg { 0% { background-position: 0 0; }
  100% { background-position: -7929px 0; } }

@keyframes effects-bg { 0% { background-position: 0 0; }
  100% { background-position: -7929px 0; } }

@-webkit-keyframes effects-bg-sm { 0% { background-position: 0 0; }
  100% { background-position: -5468px 0; } }

@keyframes effects-bg-sm { 0% { background-position: 0 0; }
  100% { background-position: -5468px 0; } }

@-webkit-keyframes effects-fireworks { 0% { -webkit-transform: scale(0) translateY(0); transform: scale(0) translateY(0);
    opacity: 0; }
  40% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0);
    opacity: 1; }
  60% { -webkit-transform: scale(1) translateY(-20px); transform: scale(1) translateY(-20px);
    opacity: 1; }
  100% { -webkit-transform: scale(0) translateY(-20px); transform: scale(0) translateY(-20px);
    opacity: 0; } }

@keyframes effects-fireworks { 0% { -webkit-transform: scale(0) translateY(0); transform: scale(0) translateY(0);
    opacity: 0; }
  40% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0);
    opacity: 1; }
  60% { -webkit-transform: scale(1) translateY(-20px); transform: scale(1) translateY(-20px);
    opacity: 1; }
  100% { -webkit-transform: scale(0) translateY(-20px); transform: scale(0) translateY(-20px);
    opacity: 0; } }

@-webkit-keyframes kv-item-sm { 0% { padding-left: 6%; }
  100% { padding-left: 35%; } }

@keyframes kv-item-sm { 0% { padding-left: 6%; }
  100% { padding-left: 35%; } }

@-webkit-keyframes kv-item-xs { 0% { padding-left: 2%; }
  100% { padding-left: 55%; } }

@keyframes kv-item-xs { 0% { padding-left: 2%; }
  100% { padding-left: 55%; } }

@-webkit-keyframes kv-btn-scale { 0% { -webkit-transform: scale(1); transform: scale(1); }
  70% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  100% { -webkit-transform: scale(1); transform: scale(1); } }

@keyframes kv-btn-scale { 0% { -webkit-transform: scale(1); transform: scale(1); }
  70% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  100% { -webkit-transform: scale(1); transform: scale(1); } }

@-webkit-keyframes kv-btn-sm { 0% { left: 65%; }
  70% { left: 90%; }
  100% { left: 65%; } }

@keyframes kv-btn-sm { 0% { left: 65%; }
  70% { left: 90%; }
  100% { left: 65%; } }

@-webkit-keyframes kv-btn-xs { 0% { left: 48%; }
  70% { left: 110%; }
  100% { left: 48%; } }

@keyframes kv-btn-xs { 0% { left: 48%; }
  70% { left: 110%; }
  100% { left: 48%; } }

@-webkit-keyframes kv-btn-mblg { 0% { left: 45%; }
  60% { left: 90%; }
  100% { left: 45%; } }

@keyframes kv-btn-mblg { 0% { left: 45%; }
  60% { left: 90%; }
  100% { left: 45%; } }

@-webkit-keyframes kv-btn-mbsm { 0% { left: 40%; }
  60% { left: 90%; }
  100% { left: 40%; } }

@keyframes kv-btn-mbsm { 0% { left: 40%; }
  60% { left: 90%; }
  100% { left: 40%; } }

@-webkit-keyframes kv-btn-mbxs { 0% { left: 33%; }
  50% { left: 80%; }
  100% { left: 33%; } }

@keyframes kv-btn-mbxs { 0% { left: 33%; }
  50% { left: 80%; }
  100% { left: 33%; } }

@-webkit-keyframes pop { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  70% { -webkit-transform: translateX(5px); transform: translateX(5px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); } }

@keyframes pop { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  70% { -webkit-transform: translateX(5px); transform: translateX(5px); }
  100% { -webkit-transform: translateX(0); transform: translateX(0); } }

@-webkit-keyframes kv1 { 0% { opacity: 1; }
  50% { opacity: 1; }
  50.0001% { opacity: 0; }
  100% { opacity: 0; } }

@keyframes kv1 { 0% { opacity: 1; }
  50% { opacity: 1; }
  50.0001% { opacity: 0; }
  100% { opacity: 0; } }

@-webkit-keyframes kv2 { 0% { opacity: 0; }
  50% { opacity: 0; }
  50.0001% { opacity: 1; }
  100% { opacity: 1; } }

@keyframes kv2 { 0% { opacity: 0; }
  50% { opacity: 0; }
  50.0001% { opacity: 1; }
  100% { opacity: 1; } }

body { font-family: "Noto Sans TC", "微軟正黑體", sans-serif; color: #232731; margin: 0 auto; font-weight: 400; line-height: 1; position: relative; overflow-x: hidden; background: #869bb3; }

select, button, textarea, input { font-family: "Noto Sans TC", "微軟正黑體", sans-serif; outline: none; }

* { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

table { border-collapse: collapse; }

a, a:focus { cursor: pointer; text-decoration: none; -webkit-transition: color 300ms; transition: color 300ms; }

a:active { outline: none; }

img { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; max-width: 100%; }

.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }

@media (min-width: 768px) { .container { width: 750px; padding-right: 0px; padding-left: 0px; } }

@media (min-width: 992px) { .container { width: 970px; } }

@media (min-width: 1200px) { .container { width: 1100px; } }

.header { position: relative; background: #ffffff; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); z-index: 999; }

.header h1 { display: none; }

.navbar-hidden { display: none; }

.navbar-block { width: 100%; padding: 15px 18px; position: relative; text-align: right; }

@media (max-width: 767px) { .navbar-block { padding: 12px 14px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; min-height: 59px; } }

.navbar-block::after { content: ""; display: block; clear: both; height: 0; visibility: hidden; }

.navbar-head { float: left; display: inline-block; }

@media (max-width: 767px) { .navbar-head { position: relative; width: 100%; text-align: left; margin-top: 0; } }

.navbar-logo { position: relative; display: inline-block; width: 278px; z-index: 11; }

@media (max-width: 767px) { .navbar-logo { width: 220px; } }

.navbar-logo img { width: 100%; max-width: 100%; display: block; }

.navbar-home { width: 32px; height: 26px; background-size: 100px 50px; background-repeat: no-repeat; background-image: url("../images/icon.png"); background-position: 0 0; cursor: pointer; display: inline-block; position: absolute; top: calc(50% - 13px); right: 15px; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; }

@media (max-width: 767px) { .navbar-home { right: 0; } }

.navbar-home:hover { opacity: 0.8; }

.footer { position: fixed; bottom: 20px; z-index: 9; text-align: center; width: 100%; }

@media (max-width: 767px) { .footer { bottom: 15px; } }

.footer__item { width: 16px; height: 16px; background: #ffffff; border-radius: 16px; display: inline-block; cursor: pointer; margin-left: 16px; border: 2px solid #869bb3; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width; transition-property: width; }

.footer__item:first-child { margin-left: 0; }

.footer__item.home { border-radius: 0; }

.footer__item.active { width: 36px; }

.imgbox { display: inline-block; padding-top: 67px; text-align: center; position: relative; }

@media (max-width: 991px) { .imgbox { padding-top: 87px; } }

.imgbox img { max-width: 100%; }

@media (max-width: 991px) { .imgbox img { height: 420px; } }

.girl { position: absolute; bottom: 8%; left: 10%; z-index: 7; }

@media (max-width: 991px) { .girl { bottom: 30px; left: 15px; } }

@media (max-width: 767px) { .girl { bottom: 50px; } }

.girl::before { content: ""; background: url("../images/girl.png"); opacity: 0; }

.girl__gif { width: 224px; height: 195px; background: url("../images/motor.png"); background-size: 100% auto; background-position: 0 0; background-repeat: no-repeat; -webkit-animation: motor steps(3) 0.6s infinite; animation: motor steps(3) 0.6s infinite; }

@media (max-width: 991px) { .girl__gif { width: 170px; height: 148px; -webkit-animation: motor-tb steps(3) 0.6s infinite; animation: motor-tb steps(3) 0.6s infinite; } }

@media (max-width: 767px) { .girl__gif { width: 140px; height: 122px; -webkit-animation: motor-sm steps(3) 0.6s infinite; animation: motor-sm steps(3) 0.6s infinite; } }

.girl__hand { width: 224px; height: 195px; background: url("../images/girl.png"); background-size: 100% auto; background-position: 0 0; background-repeat: no-repeat; }

@media (max-width: 991px) { .girl__hand { width: 170px; height: 148px; } }

@media (max-width: 767px) { .girl__hand { width: 140px; height: 122px; } }

.girl__hand.active { -webkit-animation: hand steps(4) 1.5s infinite; animation: hand steps(4) 1.5s infinite; }

@media (max-width: 991px) { .girl__hand.active { -webkit-animation: hand-tb steps(4) 1.5s infinite; animation: hand-tb steps(4) 1.5s infinite; } }

@media (max-width: 767px) { .girl__hand.active { -webkit-animation: hand-sm steps(4) 1.5s infinite; animation: hand-sm steps(4) 1.5s infinite; } }

.bg.active .bg__item { -webkit-animation-play-state: running; animation-play-state: running; }

.bg__item { position: absolute; top: 0; left: 0; width: 100vw; height: 100%; overflow: hidden; }

.bg__item:first-child { z-index: 1; background: url("../images/bg3.jpg"); background-size: auto 100%; background-position: left top; background-repeat: repeat-x; -webkit-animation: effects-bg 80s linear infinite; animation: effects-bg 80s linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; }

@media (max-width: 991px) { .bg__item:first-child { -webkit-animation: effects-bg-sm 80s linear infinite; animation: effects-bg-sm 80s linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } }

.bg__item:nth-child(2) { z-index: 2; background: url("../images/bg2.png"); background-size: auto 100%; background-position: left top; background-repeat: repeat-x; -webkit-animation: effects-bg 50s linear infinite; animation: effects-bg 50s linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; }

@media (max-width: 991px) { .bg__item:nth-child(2) { -webkit-animation: effects-bg-sm 70s linear infinite; animation: effects-bg-sm 70s linear infinite; -webkit-animation-play-state: paused; animation-play-state: paused; } }

.wrap { width: 100%; height: 870px; overflow: hidden; position: relative; }

@media (max-width: 991px) { .wrap { height: 600px; } }

.wrap::before { content: ""; display: block; width: 20%; height: 80vh; position: absolute; top: 0; left: 0; z-index: 5; }

@media (max-width: 1024px) { .wrap::before { display: none; } }

.wrap::after { content: ""; display: block; width: 30%; height: 80vh; position: absolute; top: 0; right: 0; z-index: 5; }

@media (max-width: 1024px) { .wrap::after { display: none; } }

.kv { position: absolute; top: 0; left: 0; z-index: 6; width: 1920px; min-width: 1920px; height: 100%; }

@media (max-width: 991px) { .kv { width: 750px; min-width: 750px; } }

.kv::before { content: ""; display: block; width: 96px; height: 174px; background: url("../images/kv-tree.png"); background-size: 100% auto; background-position: left top; background-repeat: no-repeat; position: absolute; top: 475px; left: 100px; z-index: 6; }

@media (max-width: 991px) { .kv::before { display: none; } }

.kv::after { content: ""; display: block; width: 317px; height: 157px; background: url("../images/kv-chair.png"); background-size: 100% auto; background-position: left top; background-repeat: no-repeat; position: absolute; top: 507px; right: 250px; z-index: 6; }

@media (max-width: 991px) { .kv::after { display: none; } }

.kv.active .kv__item, .kv.active .kv__btn { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }

.kv__item { width: 100%; height: 100%; text-align: center; }

@media (max-width: 1400px) { .kv__item { text-align: left; padding-left: 15%; } }

@media (max-width: 1199px) { .kv__item { padding-left: 8%; } }

@media (max-width: 991px) { .kv__item { text-align: center; padding-left: 0; } }

@media (max-width: 767px) { .kv__item { text-align: left; padding-left: 6%; -webkit-animation: kv-item-sm 9s linear; animation: kv-item-sm 9s linear; -webkit-animation-play-state: paused; animation-play-state: paused; } }

@media (max-width: 575px) { .kv__item { padding-left: 15px; -webkit-animation-name: kv-item-xs; animation-name: kv-item-xs; } }

.kv__item .imgbox { position: relative; }

@media (max-width: 767px) { .kv__item .imgbox { padding-top: 130px; }
  .kv__item .imgbox img { height: 360px; } }

@media (max-width: 575px) { .kv__item .imgbox { padding-top: 190px; }
  .kv__item .imgbox img { height: 300px; } }

@media (max-width: 374px) { .kv__item .imgbox { padding-top: 230px; }
  .kv__item .imgbox img { height: 250px; } }

.kv__slider { width: 714px; height: 330px; position: absolute; top: 175px; left: 17px; z-index: 1; background: rgba(0, 0, 0, 0.5); border-radius: 40px; overflow: hidden; cursor: pointer; }

.kv__slider .slick-track { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }

@media (max-width: 991px) { .kv__slider { width: 444px; height: 205px; top: 155px; left: 13px; border-radius: 25px; } }

@media (max-width: 767px) { .kv__slider { width: 382px; height: 176px; top: 188px; left: 10px; border-radius: 20px; } }

@media (max-width: 575px) { .kv__slider { width: 320px; height: 146px; top: 239px; left: 8px; border-radius: 15px; } }

@media (max-width: 374px) { .kv__slider { width: 266px; height: 123px; top: 270px; left: 7px; } }

.kv__slider-item img { display: block; max-width: 100%; }

@media (max-width: 991px) { .kv__slider-item img { height: auto !important; } }

.kv__btn { width: 87px; height: 87px; background: rgba(255, 255, 255, 0.6); border-radius: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: calc(50% - 43px); right: 5%; z-index: 7; cursor: pointer; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: background; transition-property: background; }

@media (max-width: 1850px) { .kv__btn { right: 8%; } }

@media (max-width: 1800px) { .kv__btn { right: 18%; } }

@media (max-width: 1600px) { .kv__btn { right: 28%; } }

@media (max-width: 1400px) { .kv__btn { right: 38%; } }

@media (max-width: 1199px) { .kv__btn { right: 48%; } }

@media (max-width: 991px) { .kv__btn { right: 0%; } }

@media (max-width: 767px) { .kv__btn { right: auto; left: 65%; width: 60px; height: 60px; -webkit-animation: kv-btn-sm 4.5s linear; animation: kv-btn-sm 4.5s linear; -webkit-animation-play-state: paused; animation-play-state: paused; } }

@media (max-width: 575px) { .kv__btn { left: 48%; -webkit-animation: kv-btn-xs 4.5s linear; animation: kv-btn-xs 4.5s linear; -webkit-animation-play-state: paused; animation-play-state: paused; } }

@media (max-width: 480px) { .kv__btn { top: 82%; left: 45%; -webkit-animation: kv-btn-mblg 4.5s linear; animation: kv-btn-mblg 4.5s linear; -webkit-animation-play-state: paused; animation-play-state: paused; } }

@media (max-width: 413px) { .kv__btn { left: 40%; -webkit-animation: kv-btn-mbsm 4.5s linear; animation: kv-btn-mbsm 4.5s linear; -webkit-animation-play-state: paused; animation-play-state: paused; } }

@media (max-width: 374px) { .kv__btn { left: 33%; -webkit-animation: kv-btn-mbxs 4.5s linear; animation: kv-btn-mbxs 4.5s linear; -webkit-animation-play-state: paused; animation-play-state: paused; } }

.kv__btn:hover { background: #fff; }

.kv__btn:hover::before { -webkit-animation-play-state: paused; animation-play-state: paused; }

.kv__btn::before { content: ""; display: block; width: 22px; height: 36px; background: url("../images/kv-btn.png"); background-position: center center; background-size: 100% auto; background-repeat: no-repeat; -webkit-animation: kv-btn-scale 0.5s ease infinite; animation: kv-btn-scale 0.5s ease infinite; }

@media (max-width: 767px) { .kv__btn::before { width: 16px; } }

.block { position: absolute; top: 0; left: 0; z-index: 4; width: 100%; height: 100%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: left; transition-property: left; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; }

.block::-webkit-scrollbar { display: none; }

.block::before { content: ""; display: block; width: 11520px; height: 870px; background: url("../images/bg.png"); background-size: auto 100%; background-position: left top; background-repeat: repeat-x; position: absolute; bottom: 0; left: 0; z-index: 1; }

@media (max-width: 991px) { .block::before { background: url("../images/bg-tb.png"); background-size: auto 100%; background-position: left top; background-repeat: repeat-x; width: 9180px; height: 600px; } }

.item { width: 960px; min-width: 960px; height: 100%; text-align: center; position: relative; z-index: 2; }

@media (max-width: 991px) { .item--5 { text-align: right; } }

.item.one { width: 1920px; min-width: 1920px; }

@media (max-width: 991px) { .item.one { width: 750px; min-width: 750px; } }

@media (min-width: 1025px) { .item:hover .pop__block::after { -webkit-animation-play-state: running; animation-play-state: running; } }

@media (max-width: 991px) { .item.open .pop__block::after { -webkit-animation-play-state: running; animation-play-state: running; } }

.pop { display: none; background: #fff; border-radius: 27px; -webkit-box-shadow: 5px 5px 0 #cae0ee; box-shadow: 5px 5px 0 #cae0ee; padding: 15px 60px 15px 110px; position: absolute; top: 35%; left: 45%; z-index: 2; text-align: left; }

@media (max-width: 1024px) { .pop { z-index: 3; } }

@media (max-width: 991px) { .pop { top: 10%; -webkit-transform: scale(0.8); transform: scale(0.8); } }

.pop--1 { top: 250px; left: 50%; }

@media (max-width: 991px) { .pop--1 { top: 170px; left: 35%; } }

.pop--2 { top: 80px; left: 60%; padding-top: 20px; padding-bottom: 20px; }

@media (max-width: 991px) { .pop--2 { top: 40px; left: 35%; } }

.pop--2 .pop__img { left: -10px; }

.pop--3 { top: 380px; left: 8%; }

@media (max-width: 991px) { .pop--3 { top: 240px; left: 23%; } }

.pop--4 { top: 65px; left: 50%; padding-left: 130px; }

@media (max-width: 991px) { .pop--4 { top: 50px; left: 35%; } }

.pop--4 .pop__img { top: 10px; left: -5px; }

.pop--5 { top: 310px; left: 20%; }

@media (max-width: 991px) { .pop--5 { top: 220px; left: 36%; } }

.pop--5 .pop__img { top: -25px; left: 0px; }

.pop--6 { top: 220px; left: 45%; }

@media (max-width: 991px) { .pop--6 { top: 150px; left: 35%; } }

.pop--7 { top: 40px; left: 40%; padding-top: 20px; padding-bottom: 20px; padding-left: 120px; }

@media (max-width: 991px) { .pop--7 { top: 50px; left: 25%; } }

.pop--7 .pop__img { top: -15px; left: -5px; }

.pop--8 { top: 140px; left: 52%; padding-top: 20px; padding-bottom: 20px; padding-left: 200px; }

@media (max-width: 991px) { .pop--8 { top: 120px; left: 20%; } }

.pop--8 .pop__img { top: -15px; left: 0; }

.pop__block::after { content: ""; display: block; width: 26px; height: 26px; background: url("../images/pop-icon.png"); background-position: 100% auto; background-size: 100% auto; background-repeat: no-repeat; position: absolute; top: calc(50% - 13px); right: 20px; z-index: 1; -webkit-animation: pop 0.5s ease infinite; animation: pop 0.5s ease infinite; -webkit-animation-play-state: paused; animation-play-state: paused; }

.pop__block:hover::after { -webkit-animation-play-state: running; animation-play-state: running; }

.pop__img { position: absolute; top: -12px; left: -12px; z-index: 1; }

.pop__text { font-size: 1.125em; font-weight: 400; color: #606060; line-height: 1.33; }

.pop__text .red { font-size: 1.22em; color: #b83737; }

.overlay { position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: 100%; cursor: pointer; }

.overlay--1 { top: 30%; left: 0%; width: 200%; height: 60%; }

@media (max-width: 991px) { .overlay--1 { width: 250%; top: 30%; height: 60%; } }

.overlay--2 { top: 0; left: 0%; width: 125%; height: 90%; }

@media (max-width: 991px) { .overlay--2 { top: 10%; height: 80%; width: 140%; } }

.overlay--3 { top: 20%; left: -10%; width: 110%; height: 80%; }

@media (max-width: 991px) { .overlay--3 { top: 10%; height: 95%; width: 130%; } }

.overlay--4 { top: 0; left: 0%; width: 120%; height: 90%; }

@media (max-width: 991px) { .overlay--4 { top: 5%; height: 85%; width: 150%; } }

.overlay--5 { top: 10%; left: 0%; width: 100%; height: 90%; }

@media (max-width: 991px) { .overlay--5 { top: 10%; height: 90%; left: -20%; width: 120%; } }

.overlay--6 { top: 20%; left: 0%; width: 110%; height: 70%; }

@media (max-width: 991px) { .overlay--6 { top: 25%; height: 70%; } }

.overlay--7 { top: 5%; left: 0%; width: 100%; height: 90%; }

@media (max-width: 991px) { .overlay--7 { top: 10%; height: 85%; } }

.overlay--8 { top: 15%; left: 0%; width: 105%; height: 80%; }

.pause { position: fixed; left: 0; bottom: 0; opacity: 0; }