@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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, shops, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, shops, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; overflow-x: hidden; background-color: #000000; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .gh__header { display: block; } section h2 { text-transform: uppercase; } .active { display: block; } .small { font-size: .9rem; } .flex-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #brand #logo { display: block; width: 120px; height: 32px; background-image: url(http://www.garmin.com.tw/m/buzz/minisite/images/garmin_logo_on_b.svg); background-size: 120px 32px; position: absolute; top: 30px; left: 40px; z-index: 5; display: none; } #menu-bar { font-weight: 300; font-size: 15px; line-height: 1.7; color: #ececee; background-color: #1f2029; overflow: hidden; background-position: center; background-repeat: repeat; background-size: 4%; height: 100vh; width: 100%; } .section-center { position: relative; top: 0; left: 0; display: block; width: 100%; padding: 0; margin: 0; z-index: 3; text-align: center; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } h1 { font-weight: 800; font-size: 7vw; line-height: 1; color: #ffffff; text-align: center; -webkit-text-stroke: 2px #ffffff; text-stroke: 2px #ffffff; -webkit-text-fill-color: transparent; text-fill-color: transparent; color: transparent; } label { display: none; position: relative; overflow: hidden; } input { display: none; } nav { width: 100%; height: 65px; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; position: fixed; top: 0; z-index: 15; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; background: black; } nav .pt-5 { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: center; padding-right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 20px; } nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } nav ul li { list-style: none; } nav #menu { padding-right: 0px; margin-top: 20px; } nav #brand #logo { display: block; width: 120px; height: 32px; background-image: url(http://www.garmin.com.tw/m/buzz/minisite/images/garmin_logo_on_w.svg); background-size: 120px 32px; position: absolute; top: 15px; left: 20px; z-index: 200; } nav ul .home a { margin: 0 10px 0 0; display: inline-block; } nav ul .icon-home::after { display: none; } nav .icon-home a:after, nav .icon-home a:hover { width: 0; height: 0; border: 0; z-index: -1; } nav ul li a { text-decoration: none; display: block; font-size: 1.1rem; margin: 5px 30px 0 30px; line-height: 1.2; position: relative; z-index: 1; text-align: center; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-image: -webkit-gradient(linear, left top, right top, from(#70c6ff), color-stop(50%, #70c6ff), color-stop(50%, #fff)); background-image: -webkit-linear-gradient(left, #70c6ff, #70c6ff 50%, #fff 50%); background-image: -o-linear-gradient(left, #70c6ff, #70c6ff 50%, #fff 50%); background-image: linear-gradient(to right, #70c6ff, #70c6ff 50%, #fff 50%); background-size: 200% 100%; background-position: 100%; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } nav ul li a span { display: none; font-size: 0.8rem; } nav ul li a:before { display: block; content: ''; width: 0; height: 4px; bottom: 5px; left: 0; bottom: -19px; z-index: 0; position: absolute; background: #70c6ff; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } nav ul li a:hover { background-position: 0%; } nav ul li a:hover:before { width: 100%; } nav ul li a.active { color: #70c6ff; } nav ul li a.active:before { content: ''; display: block; position: absolute; left: 0%; bottom: -19px; width: 100%; height: 5px; background-image: -webkit-gradient(linear, left top, right top, from(#70c6ff), color-stop(50%, #70c6ff), color-stop(50%, #70c6ff)); background-image: -webkit-linear-gradient(left, #70c6ff, #70c6ff 50%, #70c6ff 50%); background-image: -o-linear-gradient(left, #70c6ff, #70c6ff 50%, #70c6ff 50%); background-image: linear-gradient(to right, #70c6ff, #70c6ff 50%, #70c6ff 50%); } nav ul .home a:hover:before, nav ul .home a.active:before { display: none; } @media screen and (max-width: 991px) { label { display: block; position: relative; overflow: hidden; } #menu-bar { font-weight: 300; font-size: 15px; line-height: 1.7; color: #ececee; background-color: #1f2029; overflow: hidden; background-position: center; background-repeat: repeat; background-size: 4%; height: 100vh; width: 100%; } [type="checkbox"]:checked, [type="checkbox"]:not(:checked) { position: absolute; left: -9999px; } .menu-icon:checked + label, .menu-icon:not(:checked) + label { position: fixed; top: 63px; right: 75px; display: block; width: 30px; height: 30px; padding: 0; margin: 0; cursor: pointer; z-index: 10; } .menu-icon:checked + label:before, .menu-icon:not(:checked) + label:before { position: absolute; content: ''; display: block; width: 30px; height: 20px; z-index: 20; top: 0; left: 0; border-top: 2px solid #ececee; border-bottom: 2px solid #ececee; -webkit-transition: border-width 100ms 1500ms ease, top 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease, -webkit-transform 200ms cubic-bezier(0.23, 1, 0.32, 1); transition: border-width 100ms 1500ms ease, top 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease, -webkit-transform 200ms cubic-bezier(0.23, 1, 0.32, 1); -o-transition: border-width 100ms 1500ms ease, top 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1); transition: border-width 100ms 1500ms ease, top 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1); transition: border-width 100ms 1500ms ease, top 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 200ms cubic-bezier(0.23, 1, 0.32, 1); } .menu-icon:checked + label:after, .menu-icon:not(:checked) + label:after { position: absolute; content: ''; display: block; width: 22px; height: 2px; z-index: 20; top: 10px; right: 4px; background-color: #ececee; margin-top: -1px; -webkit-transition: width 100ms 1750ms ease, right 100ms 1750ms ease, margin-top 100ms ease, -webkit-transform 200ms cubic-bezier(0.23, 1, 0.32, 1); transition: width 100ms 1750ms ease, right 100ms 1750ms ease, margin-top 100ms ease, -webkit-transform 200ms cubic-bezier(0.23, 1, 0.32, 1); -o-transition: width 100ms 1750ms ease, right 100ms 1750ms ease, margin-top 100ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1); transition: width 100ms 1750ms ease, right 100ms 1750ms ease, margin-top 100ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1); transition: width 100ms 1750ms ease, right 100ms 1750ms ease, margin-top 100ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 200ms cubic-bezier(0.23, 1, 0.32, 1); } .menu-icon:checked + label:before { top: 10px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); height: 2px; background-color: #ececee; border-width: 0; -webkit-transition: border-width 100ms 340ms ease, top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms 500ms ease, -webkit-transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1); transition: border-width 100ms 340ms ease, top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms 500ms ease, -webkit-transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1); -o-transition: border-width 100ms 340ms ease, top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms 500ms ease, transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1); transition: border-width 100ms 340ms ease, top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms 500ms ease, transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1); transition: border-width 100ms 340ms ease, top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms 500ms ease, transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1); } .menu-icon:checked + label:after { width: 30px; margin-top: 0; right: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: width 100ms ease, right 100ms ease, margin-top 100ms 500ms ease, -webkit-transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1); transition: width 100ms ease, right 100ms ease, margin-top 100ms 500ms ease, -webkit-transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1); -o-transition: width 100ms ease, right 100ms ease, margin-top 100ms 500ms ease, transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1); transition: width 100ms ease, right 100ms ease, margin-top 100ms 500ms ease, transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1); transition: width 100ms ease, right 100ms ease, margin-top 100ms 500ms ease, transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1); } .nav { position: fixed; right: 20px; top: 20px; display: block; width: 80px; height: 80px; padding: 0; margin: 0; z-index: 9; overflow: hidden; -webkit-box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.3); background-color: #193e56; -webkit-animation: border-transform 7s linear infinite; animation: border-transform 7s linear infinite; -webkit-transition: top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1), height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 250ms 1100ms ease; transition: top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1), height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 250ms 1100ms ease; -o-transition: top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms 1100ms ease, width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1), height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1); transition: top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms 1100ms ease, width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1), height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1); transition: top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms 1100ms ease, width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1), height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 250ms 1100ms ease; } .no-scroll { overflow-y: hidden; } @-webkit-keyframes border-transform { 0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } } @keyframes border-transform { 0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } } .menu-icon:checked ~ .nav { -webkit-animation-play-state: paused; animation-play-state: paused; top: 50%; right: 50%; -webkit-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); width: 200%; height: 200%; -webkit-transition: top 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), width 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1), height 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 250ms 700ms ease; transition: top 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), width 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1), height 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 250ms 700ms ease; -o-transition: top 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms 700ms ease, width 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1), height 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1); transition: top 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms 700ms ease, width 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1), height 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1); transition: top 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms 700ms ease, width 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1), height 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 250ms 700ms ease; background-image: url(../images/map-menu.jpg); background-repeat: repeat; background-size: 70%; background-position: center; } .nav ul { position: absolute; top: 50%; left: 0; display: block; width: 100%; padding: 0; margin: 0; z-index: 6; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); list-style: none; } .nav ul li { position: relative; display: block; width: 100%; padding: 0; margin: 10px 0; text-align: center; list-style: none; pointer-events: none; opacity: 0; visibility: hidden; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: all 250ms linear; -o-transition: all 250ms linear; transition: all 250ms linear; } .nav ul li:nth-child(1) { -webkit-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms; } .nav ul li:nth-child(2) { -webkit-transition-delay: 150ms; -o-transition-delay: 150ms; transition-delay: 150ms; } .nav ul li:nth-child(3) { -webkit-transition-delay: 100ms; -o-transition-delay: 100ms; transition-delay: 100ms; } .nav ul li:nth-child(4) { -webkit-transition-delay: 50ms; -o-transition-delay: 50ms; transition-delay: 50ms; } .nav ul li a { font-size: 5vh; margin: 1vh; line-height: 1.2; font-weight: 800; display: inline-block; position: relative; color: #829cad; -webkit-transition: all 250ms linear; -o-transition: all 250ms linear; transition: all 250ms linear; } .nav ul li a:hover { text-decoration: none; color: #ffffff; } .nav ul li a:after { display: none; position: absolute; top: 50%; content: ''; height: 1vh; margin-top: 2.5vh; width: 0; left: 0; background-color: #3f8cbf; opacity: 1; -webkit-transition: width 250ms linear; -o-transition: width 250ms linear; transition: width 250ms linear; } .nav ul li a:hover:after { width: 100%; } .menu-icon:checked ~ .nav ul li { pointer-events: auto; visibility: visible; opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 350ms ease, -webkit-transform 250ms ease; transition: opacity 350ms ease, -webkit-transform 250ms ease; -o-transition: opacity 350ms ease, transform 250ms ease; transition: opacity 350ms ease, transform 250ms ease; transition: opacity 350ms ease, transform 250ms ease, -webkit-transform 250ms ease; } .menu-icon:checked ~ .nav ul li:nth-child(1) { -webkit-transition-delay: 1400ms; -o-transition-delay: 1400ms; transition-delay: 1400ms; } .menu-icon:checked ~ .nav ul li:nth-child(2) { -webkit-transition-delay: 1480ms; -o-transition-delay: 1480ms; transition-delay: 1480ms; } .menu-icon:checked ~ .nav ul li:nth-child(3) { -webkit-transition-delay: 1560ms; -o-transition-delay: 1560ms; transition-delay: 1560ms; } .menu-icon:checked ~ .nav ul li:nth-child(4) { -webkit-transition-delay: 1640ms; -o-transition-delay: 1640ms; transition-delay: 1640ms; } .logo { position: absolute; top: 60px; left: 50px; display: block; z-index: 11; -webkit-transition: all 250ms linear; -o-transition: all 250ms linear; transition: all 250ms linear; } .logo img { height: 26px; width: auto; display: block; } .menu-icon:checked + label, .menu-icon:not(:checked) + label { right: 45px; top: 55px; } .nav ul li a { font-size: 8vh; } } .pc, #hero .mobile { display: block; } .mobile { display: none; } #hero { line-height: 0; height: 50vw; overflow: hidden; position: relative; z-index: 2; background: #000000; } #hero .scroll-down-link { position: absolute; bottom: 3%; left: 48%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 100; cursor: default; height: 40px; width: 80px; color: #000000; text-align: center; font-size: 70px; text-decoration: none; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4); -webkit-animation: fade_move_down 2s ease-in-out infinite; animation: fade_move_down 2s ease-in-out infinite; display: block; } #hero .scroll-down-arrow { background-image: url(../images/scroll.svg); background-size: contain; background-repeat: no-repeat; } #hero video { width: 100%; height: auto; z-index: 1; } @media (min-width: 1024px) { section.hero { height: 48vw; } } @media (min-width: 768px) { #hero video { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } @media (max-width: 767px) { #hero { height: 80vw; } #hero video { min-width: 155% !important; min-height: 100%; margin: 0 auto; z-index: 1; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @media (max-width: 599px) { #hero { height: 500px; } #hero video { min-width: 190% !important; min-height: 100%; margin: 0 auto; z-index: 1; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @media (max-width: 414px) { #hero { height: 550px; } #hero video { min-width: 240% !important; min-height: 100%; margin: 0 auto; z-index: 1; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } .big-button { display: inline-block; position: relative; background: none; border: none; color: #fff; font-size: 20px !important; cursor: pointer; margin: 20px 0; background-color: #2b80b9; } #open-the-door { position: relative; height: auto; padding: 5vw 0 5vw 0; z-index: 2; background-color: #000; } #open-the-door .container { line-height: 0; overflow: hidden; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-align: left; margin: 0 auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100% !important; } #open-the-door .container div { width: 50%; } #open-the-door .text { padding: 0 7%; } #open-the-door h2 { color: #fff; font-size: 4rem; line-height: 1; } #open-the-door h3 { color: #fff; font-size: 4rem; line-height: 1; margin-bottom: 30px; } #open-the-door p { color: #fff; font-size: 1.2rem; margin-bottom: 30px; } #open-the-door p span { margin: 0; padding: 0; display: inline; color: #8fd2ff; } #open-the-door .color-word { color: #fff; } #open-the-door .color-word :hover { color: #8fd2ff; } #open-the-door .text-link { color: #ffffff; display: block; font-size: 1.4rem; margin: 20px 0 20px 0; } #open-the-door .text a:hover { color: #8fd2ff; cursor: pointer; -webkit-text-decoration: underline 2px solid #8fd2ff; text-decoration: underline 2px solid #8fd2ff; } #open-the-door .bg { height: 60vh; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; background-position: center center; background-size: cover; } #open-the-door video { width: 40vw; } #open-the-door .big-button { margin: 10px 0; } #open-the-door .container .big-button div, #journey-of-souls .container .big-button div { width: 100%; padding: 1em 4em; color: #fff; } span { display: block; padding: 25px 80px; } .big-button::before, .big-button::after { content: ""; width: 0; height: 2px; position: absolute; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; background: #fff; } span::before, span::after { content: ""; width: 2px; height: 0; position: absolute; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; background: #fff; } .big-button:hover { background-color: #64b4e9; text-decoration: none !important; } .big-button:hover::before, .big-button:hover::after { width: 100%; left: 0; } .big-button:hover span::before, .big-button:hover span::after { height: 100%; } /*----- .big-button1 -----*/ .btn-1::before, .btn-1::after { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .btn-1 span::before, .btn-1 span::after { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .btn-1::before { right: 0; top: 0; } .btn-1::after { left: 0; bottom: 0; } .btn-1 span::before { left: 0; top: 0; } .btn-1 span::after { right: 0; bottom: 0; } .btn-1:hover::before, .btn-1:hover::after { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .btn-1:hover span::before, .btn-1:hover span::after { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } #view { height: 40vh; position: relative; width: 100%; z-index: 1; overflow: hidden; } #view :after { content: ""; background: rgba(0, 0, 0, 0.2); width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #fullScreen { top: 0; left: 0; width: 100%; position: fixed; z-index: -1; overflow: hidden; background-color: #000; } #fullScreen img { width: 100vw; } #journey-of-souls { position: relative; height: auto; padding: 5vw 0 5vw 0; z-index: 2; background-color: #000; width: 100%; } #journey-of-souls .container { line-height: 0; overflow: hidden; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-align: left; margin: 0 auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } #journey-of-souls .container div { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 50%; padding: 0 7%; } #journey-of-souls h2 { color: #fff; font-size: 5rem; line-height: 1; } #journey-of-souls h3 { color: #fff; font-size: 2.5rem; line-height: 1.4; margin-bottom: 30px; } #journey-of-souls p { color: #fff; font-size: 1.2rem; margin-bottom: 30px; } #journey-of-souls a, #journey-of-souls a:link, #journey-of-souls a:visited { color: #fff; } #journey-of-souls-kol { position: relative; height: 54vh; z-index: 2; background-image: url(../images/kol.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } #journey-of-souls-kol .flex-box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } #journey-of-souls-kol .link { background: rgba(25, 25, 25, 0.7); width: 30%; height: 18vh; padding: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-bottom: 1px solid #666666; } #journey-of-souls-kol .link div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0; margin: 0; } #journey-of-souls-kol .link ul, #journey-of-souls-kol .link li { list-style: none; margin: 0; padding: 0; } #journey-of-souls-kol .link img { margin-right: 30px; } #journey-of-souls-kol .link h2 { color: #fff; margin: 0; font-size: 2.5rem; } #journey-of-souls-kol .link p { color: #fff; margin: 0; font-size: 1.2rem; } #journey-of-souls-kol .link span { font-size: .9rem; } #journey-of-souls-kol a:last-child { border-bottom: none; } #outdoor-spirit { position: relative; height: auto; padding: 5vw 0 5vw 0; z-index: 2; background-color: #000; width: 100%; background-image: url(../images/map-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } #outdoor-spirit .flex-box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #outdoor-spirit .container { width: 100%; } #outdoor-spirit h3 { color: #fff; font-size: 2.5rem; line-height: 1; margin-bottom: 30px; text-align: center; } #outdoor-spirit p { color: #fff; font-size: 1.2rem; margin-bottom: 30px; text-align: center; } #outdoor-spirit .product { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 5vw 10vw; } #outdoor-spirit .product a:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -webkit-animation-duration: .6s; animation-duration: .6s; } #outdoor-spirit .product div { max-width: calc(100% / 3); padding: 0 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #outdoor-spirit .product div img { max-width: 400px; margin-bottom: 0; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #outdoor-spirit .product div h2 { color: #fff; font-weight: bold; } #outdoor-spirit .product div h3 { color: #fff; font-size: 1.5em; line-height: 1.4; margin-bottom: 30px; text-align: center; } #outdoor-spirit .product div p { font-size: 1.2em; margin-bottom: 0; } #outdoor-spirit .product div hr { display: none; } #outdoor-spirit .product div hr.active { opacity: 1; width: 60%; height: 5px; margin-top: -5px; -webkit-animation: grow-menu 1s ease-out .5s both; animation: grow-menu 1s ease-out .5s both; -webkit-animation-delay: 1s; animation-delay: 1s; border-color: #2b80b9; background-color: #2b80b9; display: block; } @-webkit-keyframes grow-menu { 0% { width: 0; } to { width: 60%; } } @keyframes grow-menu { 0% { width: 0; } to { width: 60%; } } @-webkit-keyframes probig { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes probig { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } } #outdoor-spirit .big-button { margin: 0; font-size: 16px !important; background-color: #555555; } #outdoor-spirit .big-button :hover { background-color: #555555; } #outdoor-spirit .big-button div { width: 100%; max-width: 100%; padding: .5em 2em; color: #fff; } p[data-id="footer"] { text-align: center; font-size: .8rem !important; color: #ffffff; background-color: #000000; padding: 25px; margin: 0; z-index: 10; position: relative; bottom: 0; } /* Fade */ .hvr-fade { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); overflow: hidden; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: color, background-color; -o-transition-property: color, background-color; transition-property: color, background-color; } .hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active { background-color: #5b5b5b !important; color: white; } html:lang(en-HK) #open-the-door h3, html:lang(en-SG) #open-the-door h3, html:lang(en-MY) #open-the-door h3, html:lang(en-PH) #open-the-door h3, html:lang(en-IN) #open-the-door h3, html:lang(ko-KR) #open-the-door h3, html:lang(vi-VN) #open-the-door h3, html:lang(id-ID) #open-the-door h3, [data-locale=th-TH] #open-the-door h3 { font-size: 2rem; } html:lang(en-HK) #open-the-door p, html:lang(en-SG) #open-the-door p, html:lang(en-MY) #open-the-door p, html:lang(en-PH) #open-the-door p, html:lang(en-IN) #open-the-door p, html:lang(ko-KR) #open-the-door p, html:lang(vi-VN) #open-the-door p, html:lang(id-ID) #open-the-door p, [data-locale=th-TH] #open-the-door p { font-size: 1rem; } html:lang(en-HK) #open-the-door .text, html:lang(en-SG) #open-the-door .text, html:lang(en-MY) #open-the-door .text, html:lang(en-PH) #open-the-door .text, html:lang(en-IN) #open-the-door .text, html:lang(ko-KR) #open-the-door .text, html:lang(vi-VN) #open-the-door .text, html:lang(id-ID) #open-the-door .text, [data-locale=th-TH] #open-the-door .text { width: 52%; } html:lang(en-HK) #open-the-door .video_bc, html:lang(en-SG) #open-the-door .video_bc, html:lang(en-MY) #open-the-door .video_bc, html:lang(en-PH) #open-the-door .video_bc, html:lang(en-IN) #open-the-door .video_bc, html:lang(ko-KR) #open-the-door .video_bc, html:lang(vi-VN) #open-the-door .video_bc, html:lang(id-ID) #open-the-door .video_bc, [data-locale=th-TH] #open-the-door .video_bc { width: 48%; } html:lang(en-HK) #outdoor-spirit p, html:lang(en-SG) #outdoor-spirit p, html:lang(en-MY) #outdoor-spirit p, html:lang(en-PH) #outdoor-spirit p, html:lang(en-IN) #outdoor-spirit p, html:lang(ko-KR) #outdoor-spirit p, html:lang(vi-VN) #outdoor-spirit p, html:lang(id-ID) #outdoor-spirit p, [data-locale=th-TH] #outdoor-spirit p { font-size: 1rem; } html:lang(en-HK) #outdoor-spirit .product div h2, html:lang(en-SG) #outdoor-spirit .product div h2, html:lang(en-MY) #outdoor-spirit .product div h2, html:lang(en-PH) #outdoor-spirit .product div h2, html:lang(en-IN) #outdoor-spirit .product div h2, html:lang(ko-KR) #outdoor-spirit .product div h2, html:lang(vi-VN) #outdoor-spirit .product div h2, html:lang(id-ID) #outdoor-spirit .product div h2, [data-locale=th-TH] #outdoor-spirit .product div h2 { font-size: 1.4rem; margin-bottom: 20px; } html:lang(en-HK) #outdoor-spirit .product div hr.active, html:lang(en-SG) #outdoor-spirit .product div hr.active, html:lang(en-MY) #outdoor-spirit .product div hr.active, html:lang(en-PH) #outdoor-spirit .product div hr.active, html:lang(en-IN) #outdoor-spirit .product div hr.active, html:lang(ko-KR) #outdoor-spirit .product div hr.active, html:lang(vi-VN) #outdoor-spirit .product div hr.active, html:lang(id-ID) #outdoor-spirit .product div hr.active, [data-locale=th-TH] #outdoor-spirit .product div hr.active { opacity: 1; width: 90%; } @-webkit-keyframes grow-menu { 0% { width: 0; } to { width: 90%; } } @keyframes grow-menu { 0% { width: 0; } to { width: 90%; } } html:lang(id-ID) #open-the-door h2, html:lang(vi-VN) #open-the-door h2, [data-locale=th-TH] #open-the-door h2 { font-size: 3.2rem; } html:lang(id-ID) #open-the-door .text, html:lang(vi-VN) #open-the-door .text, [data-locale=th-TH] #open-the-door .text { width: 60%; } html:lang(id-ID) #open-the-door .video_bc, html:lang(vi-VN) #open-the-door .video_bc, [data-locale=th-TH] #open-the-door .video_bc { width: 40%; } html:lang(id-ID) #open-the-door video, html:lang(vi-VN) #open-the-door video, [data-locale=th-TH] #open-the-door video { width: 30vw; } html:lang(vi-VN) #outdoor-spirit .product div h2 { font-size: 1.2rem; } [data-locale=th-TH] body { width: 100vw; } [data-locale=th-TH] #open-the-door .container { width: 100% !important; } [data-locale=th-TH] #open-the-door .text { width: 45%; } [data-locale=th-TH] #open-the-door .video_bc { width: 40%; } [data-locale=th-TH] #open-the-door h2 { font-size: 3rem; margin: 0; line-height: 1.2 !important; } [data-locale=th-TH] #open-the-door .big-button div { padding: initial; } [data-locale=th-TH] #open-the-door .big-button div span { padding: 15px 30px; } [data-locale=th-TH] #open-the-door .container .big-button div, [data-locale=th-TH] #journey-of-souls .container .big-button div { padding: initial; } [data-locale=th-TH] #outdoor-spirit { padding: 0 0 5vw 0; } [data-locale=th-TH] #outdoor-spirit h3 { margin: 0 auto 30px auto; } [data-locale=th-TH] #outdoor-spirit .container { width: 100% !important; } [data-locale=th-TH] #outdoor-spirit .text { width: 80%; padding: 0; } [data-locale=th-TH] #outdoor-spirit .product { padding: 0; } [data-locale=th-TH] #outdoor-spirit .big-button div { padding: initial; } [data-locale=th-TH] #outdoor-spirit .big-button div span { padding: 15px 30px; } html:lang(en-HK) #outdoor-spirit { padding: 5vw 0 0 0; } html:lang(en-HK) #outdoor-spirit .product { -ms-flex-wrap: wrap; flex-wrap: wrap; } html:lang(en-HK) #outdoor-spirit .product div { max-width: calc(100% / 2); -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 100px; padding: 0 80px; } html:lang(en-HK) #outdoor-spirit .product .big-button div { width: 100%; max-width: 100% !important; margin-bottom: 0 !important; padding: 1em 2em; color: #fff; } @media (min-width: 2000px) and (max-width: 2560px) { #open-the-door video { width: 40vw; } } @media (max-width: 1800px) { #open-the-door h2 { font-size: 3.5rem; } html:lang(en-HK) #open-the-door .text, html:lang(en-SG) #open-the-door .text, html:lang(en-MY) #open-the-door .text, html:lang(en-PH) #open-the-door .text, html:lang(en-IN) #open-the-door .text, html:lang(ko-KR) #open-the-door .text, html:lang(vi-VN) #open-the-door .text, html:lang(id-ID) #open-the-door .text, [data-locale=th-TH] #open-the-door .text { width: 52%; } html:lang(en-HK) #open-the-door .video_bc, html:lang(en-SG) #open-the-door .video_bc, html:lang(en-MY) #open-the-door .video_bc, html:lang(en-PH) #open-the-door .video_bc, html:lang(en-IN) #open-the-door .video_bc, html:lang(ko-KR) #open-the-door .video_bc, html:lang(vi-VN) #open-the-door .video_bc, html:lang(id-ID) #open-the-door .video_bc, [data-locale=th-TH] #open-the-door .video_bc { width: 48%; } [data-locale=th-TH] #open-the-door .text { width: 40%; } [data-locale=th-TH] #open-the-door .video_bc { width: 40%; } [data-locale=th-TH] #open-the-door h2 { font-size: 3rem; } } @media (max-width: 1680px) { #open-the-door .text { padding: 0 6%; } #open-the-door img { max-width: 700px; } #open-the-door h3 { font-size: 3.5rem; } #open-the-door video { width: 45vw; } #journey-of-souls h2 { font-size: 4.5rem; } html:lang(en-HK) #open-the-door .text, html:lang(en-SG) #open-the-door .text, html:lang(en-MY) #open-the-door .text, html:lang(en-PH) #open-the-door .text, html:lang(en-IN) #open-the-door .text, html:lang(ko-KR) #open-the-door .text, html:lang(ko-KR) #open-the-door .text, html:lang(vi-VN) #open-the-door .text, html:lang(id-ID) #open-the-door .text, [data-locale=th-TH] #open-the-door .text { width: 55%; } html:lang(en-HK) #open-the-door .video_bc, html:lang(en-SG) #open-the-door .video_bc, html:lang(en-MY) #open-the-door .video_bc, html:lang(en-PH) #open-the-door .video_bc, html:lang(en-IN) #open-the-door .video_bc, html:lang(ko-KR) #open-the-door .video_bc, html:lang(ko-KR) #open-the-door .video_bc, html:lang(vi-VN) #open-the-door .video_bc, html:lang(id-ID) #open-the-door .video_bc, [data-locale=th-TH] #open-the-door .video_bc { width: 45%; } html:lang(en-HK) #outdoor-spirit .product div h2, html:lang(en-SG) #outdoor-spirit .product div h2, html:lang(en-MY) #outdoor-spirit .product div h2, html:lang(en-PH) #outdoor-spirit .product div h2, html:lang(en-IN) #outdoor-spirit .product div h2, html:lang(ko-KR) #outdoor-spirit .product div h2, html:lang(ko-KR) #outdoor-spirit .product div h2, html:lang(vi-VN) #outdoor-spirit .product div h2, html:lang(id-ID) #outdoor-spirit .product div h2, [data-locale=th-TH] #outdoor-spirit .product div h2 { font-size: 1.1rem; text-align: center; } html:lang(vi-VN) #outdoor-spirit .product { padding: 5vw 5vw; } [data-locale=th-TH] #open-the-door .text { width: 50%; padding: 0 3% 0 6%; } [data-locale=th-TH] #open-the-door .video_bc { width: 40%; } [data-locale=th-TH] #open-the-door h2 { font-size: 2.5rem; } [data-locale=th-TH] #open-the-door h3 { font-size: 1.5rem; } [data-locale=th-TH] #open-the-door p { margin-bottom: 20px; } [data-locale=th-TH] #open-the-door .big-button span { font-size: 18px; padding: 20px 50px; } } @media (max-width: 1600px) { #open-the-door .text { padding: 0 5%; } [data-locale=th-TH] #outdoor-spirit .product div p { font-size: 1em; margin-bottom: 0; } [data-locale=th-TH] #outdoor-spirit .product div img { max-width: 320px; } } @media (min-width: 1441px) and (max-width: 1640px) { #open-the-door h2 { font-size: 3.2rem; } #journey-of-souls h2 { font-size: 4.2rem; } #open-the-door .container .text { width: 55%; } #open-the-door .container .video_bc { width: 45%; } #open-the-door video { width: 40vw; } [data-locale=th-TH] #open-the-door .text { width: 50%; } [data-locale=th-TH] #open-the-door .video_bc { width: 40%; } } @media (max-width: 1440px) { #open-the-door h2 { font-size: 3rem; } #open-the-door h3 { font-size: 2.5rem; } #open-the-door p { font-size: 1rem; } #journey-of-souls h2, #outdoor-spirit h2 { font-size: 5rem; } #journey-of-souls p, #outdoor-spirit p { font-size: 1rem; } #open-the-door img { max-width: 600px; } #open-the-door .text-link, #journey-of-souls-kol .link p { font-size: 1rem; } #open-the-door .text-link { font-size: 1.3rem; } #journey-of-souls h3 { margin-bottom: 0px; } #journey-of-souls h2 { font-size: 4.2rem; } #outdoor-spirit .product div img { max-width: 320px; } #outdoor-spirit .product div h2 { font-size: 1.8rem; } .big-button { font-size: 20px !important; } #outdoor-spirit .product { padding: 5vw 5vw; } #outdoor-spirit .product div hr { opacity: 1; width: 70%; height: 5px; margin-top: -5px; } #open-the-door .container div { width: auto; } #open-the-door .container .text { width: 55%; } #open-the-door .container .video_bc { width: 45%; } #open-the-door video { width: 40vw; } [data-locale=th-TH] #open-the-door .text { width: 43%; } [data-locale=th-TH] #open-the-door .video_bc { width: 40%; } [data-locale=th-TH] #open-the-door h2 { font-size: 2.2rem; } [data-locale=th-TH] #open-the-door p { font-size: 1rem; } html:lang(en-HK) #outdoor-spirit .product div img { max-width: 360px; } @-webkit-keyframes grow-menu { 0% { width: 0; } to { width: 70%; } } @keyframes grow-menu { 0% { width: 0; } to { width: 70%; } } } @media (min-width: 1370px) and (max-width: 1430px) { #journey-of-souls h2 { font-size: 4rem; } #journey-of-souls .container div { padding: 0 5%; } } @media (max-width: 1368px) { #journey-of-souls h2 { font-size: 3.8rem; } #journey-of-souls .container div { padding: 0 5%; } html:lang(en-HK) #open-the-door .text, html:lang(en-SG) #open-the-door .text, html:lang(en-MY) #open-the-door .text, html:lang(en-PH) #open-the-door .text, html:lang(en-IN) #open-the-door .text, html:lang(ko-KR) #open-the-door .text, html:lang(ko-KR) #open-the-door .text, html:lang(vi-VN) #open-the-door .text, html:lang(id-ID) #open-the-door .text, [data-locale=th-TH] #open-the-door .text { width: 65%; } html:lang(en-HK) #open-the-door .video_bc, html:lang(en-SG) #open-the-door .video_bc, html:lang(en-MY) #open-the-door .video_bc, html:lang(en-PH) #open-the-door .video_bc, html:lang(en-IN) #open-the-door .video_bc, html:lang(ko-KR) #open-the-door .video_bc, html:lang(ko-KR) #open-the-door .video_bc, html:lang(vi-VN) #open-the-door .video_bc, html:lang(id-ID) #open-the-door .video_bc, [data-locale=th-TH] #open-the-door .video_bc { width: 35%; } html:lang(en-HK) #open-the-door video, html:lang(en-SG) #open-the-door video, html:lang(en-MY) #open-the-door video, html:lang(en-PH) #open-the-door video, html:lang(en-IN) #open-the-door video, html:lang(ko-KR) #open-the-door video, html:lang(ko-KR) #open-the-door video, html:lang(vi-VN) #open-the-door video, html:lang(id-ID) #open-the-door video, [data-locale=th-TH] #open-the-door video { width: 32vw; } html:lang(en-HK) #outdoor-spirit .product div h2, html:lang(en-SG) #outdoor-spirit .product div h2, html:lang(en-MY) #outdoor-spirit .product div h2, html:lang(en-PH) #outdoor-spirit .product div h2, html:lang(en-IN) #outdoor-spirit .product div h2, html:lang(ko-KR) #outdoor-spirit .product div h2, html:lang(ko-KR) #outdoor-spirit .product div h2, html:lang(vi-VN) #outdoor-spirit .product div h2, html:lang(id-ID) #outdoor-spirit .product div h2, [data-locale=th-TH] #outdoor-spirit .product div h2 { font-size: 1.1rem; text-align: center; } html:lang(en-HK) #outdoor-spirit .product div p, html:lang(en-SG) #outdoor-spirit .product div p, html:lang(en-MY) #outdoor-spirit .product div p, html:lang(en-PH) #outdoor-spirit .product div p, html:lang(en-IN) #outdoor-spirit .product div p, html:lang(ko-KR) #outdoor-spirit .product div p, html:lang(ko-KR) #outdoor-spirit .product div p, html:lang(vi-VN) #outdoor-spirit .product div p, html:lang(id-ID) #outdoor-spirit .product div p, [data-locale=th-TH] #outdoor-spirit .product div p { font-size: 15px; } [data-locale=th-TH] #open-the-door .text { width: 43%; } [data-locale=th-TH] #open-the-door .video_bc { width: 40%; } [data-locale=th-TH] #open-the-door h2 { font-size: 2.2rem; } [data-locale=th-TH] #open-the-door p { font-size: 1rem; } [data-locale=th-TH] #open-the-door h3 { font-size: 1.5rem; margin-bottom: 20px; } [data-locale=th-TH] #open-the-door .big-button span { font-size: 18px; padding: 20px 30px; } [data-locale=th-TH] #open-the-door .text-link { font-size: 1.2rem; } [data-locale=th-TH] #open-the-door video { width: 35vw; } } @media (min-width: 1282px) and (max-width: 1365px) { html:lang(id-ID) #outdoor-spirit .product div h2, html:lang(vi-VN) #outdoor-spirit .product div h2, [data-locale=th-TH] #outdoor-spirit .product div h2 { font-size: 1rem; } } @media (max-width: 1280px) { #open-the-door img { max-width: 500px; } #outdoor-spirit p { font-size: 1rem; padding: 0 2rem; } #open-the-door .container .big-button div, #journey-of-souls .container .big-button div { width: 100%; padding: 1em 2em; color: #fff; } #open-the-door .text-link { font-size: 1.2rem; } #outdoor-spirit .product div hr { opacity: 1; width: 80%; height: 3px; margin-top: -5px; -webkit-animation: grow-menu 1s ease-out .5s both; animation: grow-menu 1s ease-out .5s both; -webkit-animation-delay: 1s; animation-delay: 1s; border-color: #2b80b9; background-color: #2b80b9; } html:lang(en-HK) #outdoor-spirit .product div, html:lang(en-SG) #outdoor-spirit .product div, html:lang(en-MY) #outdoor-spirit .product div, html:lang(en-PH) #outdoor-spirit .product div, html:lang(en-IN) #outdoor-spirit .product div, html:lang(ko-KR) #outdoor-spirit .product div, html:lang(ko-KR) #outdoor-spirit .product div, html:lang(vi-VN) #outdoor-spirit .product div, html:lang(id-ID) #outdoor-spirit .product div, [data-locale=th-TH] #outdoor-spirit .product div { padding: 0 20px; } html:lang(en-HK) #outdoor-spirit .product div p, html:lang(en-SG) #outdoor-spirit .product div p, html:lang(en-MY) #outdoor-spirit .product div p, html:lang(en-PH) #outdoor-spirit .product div p, html:lang(en-IN) #outdoor-spirit .product div p, html:lang(ko-KR) #outdoor-spirit .product div p, html:lang(ko-KR) #outdoor-spirit .product div p, html:lang(vi-VN) #outdoor-spirit .product div p, html:lang(id-ID) #outdoor-spirit .product div p, [data-locale=th-TH] #outdoor-spirit .product div p { font-size: 14px; } html:lang(en-HK) #outdoor-spirit .big-button div, html:lang(en-SG) #outdoor-spirit .big-button div, html:lang(en-MY) #outdoor-spirit .big-button div, html:lang(en-PH) #outdoor-spirit .big-button div, html:lang(en-IN) #outdoor-spirit .big-button div, html:lang(ko-KR) #outdoor-spirit .big-button div, html:lang(ko-KR) #outdoor-spirit .big-button div, html:lang(vi-VN) #outdoor-spirit .big-button div, html:lang(id-ID) #outdoor-spirit .big-button div, [data-locale=th-TH] #outdoor-spirit .big-button div { padding: .5em 2em; } html:lang(id-ID) #open-the-door h2, html:lang(vi-VN) #open-the-door h2, [data-locale=th-TH] #open-the-door h2 { font-size: 2.5rem; } html:lang(id-ID) #open-the-door h3, html:lang(vi-VN) #open-the-door h3, [data-locale=th-TH] #open-the-door h3 { font-size: 1.5rem; } html:lang(id-ID) #open-the-door p, html:lang(vi-VN) #open-the-door p, [data-locale=th-TH] #open-the-door p { font-size: 15px; } html:lang(id-ID) #open-the-door .text, html:lang(vi-VN) #open-the-door .text, [data-locale=th-TH] #open-the-door .text { width: 60%; } html:lang(id-ID) #open-the-door .video_bc, html:lang(vi-VN) #open-the-door .video_bc, [data-locale=th-TH] #open-the-door .video_bc { width: 40%; } html:lang(id-ID) #open-the-door video, html:lang(vi-VN) #open-the-door video, [data-locale=th-TH] #open-the-door video { width: 30vw; } html:lang(id-ID) #outdoor-spirit p, html:lang(vi-VN) #outdoor-spirit p, [data-locale=th-TH] #outdoor-spirit p { font-size: 15px; } html:lang(id-ID) #outdoor-spirit .product div p, html:lang(vi-VN) #outdoor-spirit .product div p, [data-locale=th-TH] #outdoor-spirit .product div p { font-size: 14px; height: 60px; } html:lang(id-ID) #outdoor-spirit .product div h2, html:lang(vi-VN) #outdoor-spirit .product div h2, [data-locale=th-TH] #outdoor-spirit .product div h2 { font-size: 1rem; } [data-locale=th-TH] #open-the-door .text { width: 40%; } [data-locale=th-TH] #open-the-door .video_bc { width: 40%; } [data-locale=th-TH] #open-the-door h2 { font-size: 2.2rem; } [data-locale=th-TH] #open-the-door p { font-size: 1rem; } [data-locale=th-TH] #open-the-door h3 { font-size: 1.5rem; margin-bottom: 20px; } [data-locale=th-TH] #open-the-door .big-button div { padding: 0; } [data-locale=th-TH] #open-the-door .big-button span { font-size: 18px; padding: 20px 30px; } [data-locale=th-TH] #open-the-door .text-link { font-size: 1.2rem; } [data-locale=th-TH] #open-the-door video { width: 35vw; } [data-locale=th-TH] #outdoor-spirit .product div h3 { font-size: 1.3em; } [data-locale=th-TH] #outdoor-spirit .big-button div { padding: 0; } html:lang(en-HK) #outdoor-spirit .product div { padding: 0 60px; } html:lang(en-HK) #outdoor-spirit .product div img { max-width: 360px; } @-webkit-keyframes grow-menu { 0% { width: 0; } to { width: 80%; } } @keyframes grow-menu { 0% { width: 0; } to { width: 80%; } } } @media (min-width: 1025px) and (max-width: 1199px) { #open-the-door h2 { font-size: 2.5rem; } #journey-of-souls-kol .link p { font-size: .9rem; } #journey-of-souls-kol .link span { font-size: .6rem; } #journey-of-souls h2 { font-size: 3.2rem; } #journey-of-souls .container div { padding: 0 5%; } #journey-of-souls-kol .link h2 { font-size: 2rem; } #journey-of-souls-kol .link img { margin-right: 30px; width: 80px; } #outdoor-spirit p { padding: 0 1rem; } #outdoor-spirit .product div h2 { font-size: 1.5rem; } #open-the-door .container .text { width: 60%; } #open-the-door .container .video_bc { width: 40%; } #open-the-door video { width: 35vw; } html:lang(en-HK) #open-the-door .text, html:lang(en-SG) #open-the-door .text, html:lang(en-MY) #open-the-door .text, html:lang(en-PH) #open-the-door .text, html:lang(en-IN) #open-the-door .text, html:lang(ko-KR) #open-the-door .text, html:lang(ko-KR) #open-the-door .text, html:lang(vi-VN) #open-the-door .text, html:lang(id-ID) #open-the-door .text, [data-locale=th-TH] #open-the-door .text { width: 70%; } html:lang(en-HK) #open-the-door .video_bc, html:lang(en-SG) #open-the-door .video_bc, html:lang(en-MY) #open-the-door .video_bc, html:lang(en-PH) #open-the-door .video_bc, html:lang(en-IN) #open-the-door .video_bc, html:lang(ko-KR) #open-the-door .video_bc, html:lang(ko-KR) #open-the-door .video_bc, html:lang(vi-VN) #open-the-door .video_bc, html:lang(id-ID) #open-the-door .video_bc, [data-locale=th-TH] #open-the-door .video_bc { width: 30%; } html:lang(en-HK) #open-the-door video, html:lang(en-SG) #open-the-door video, html:lang(en-MY) #open-the-door video, html:lang(en-PH) #open-the-door video, html:lang(en-IN) #open-the-door video, html:lang(ko-KR) #open-the-door video, html:lang(ko-KR) #open-the-door video, html:lang(vi-VN) #open-the-door video, html:lang(id-ID) #open-the-door video, [data-locale=th-TH] #open-the-door video { width: 30vw; } html:lang(id-ID) #open-the-door h2, html:lang(vi-VN) #open-the-door h2, [data-locale=th-TH] #open-the-door h2 { font-size: 2.5rem; } html:lang(id-ID) #open-the-door h3, html:lang(vi-VN) #open-the-door h3, [data-locale=th-TH] #open-the-door h3 { font-size: 1.5rem; } html:lang(id-ID) #open-the-door p, html:lang(vi-VN) #open-the-door p, [data-locale=th-TH] #open-the-door p { font-size: 15px; text-align: left; } html:lang(id-ID) #open-the-door .text, html:lang(vi-VN) #open-the-door .text, [data-locale=th-TH] #open-the-door .text { width: 100%; } html:lang(id-ID) #open-the-door .video_bc, html:lang(vi-VN) #open-the-door .video_bc, [data-locale=th-TH] #open-the-door .video_bc { width: 100%; } html:lang(id-ID) #open-the-door video, html:lang(vi-VN) #open-the-door video, [data-locale=th-TH] #open-the-door video { width: 60vw; } html:lang(id-ID) #outdoor-spirit .product div h2, html:lang(vi-VN) #outdoor-spirit .product div h2, [data-locale=th-TH] #outdoor-spirit .product div h2 { font-size: 1rem; } [data-locale=th-TH] #open-the-door .text { width: 48%; } [data-locale=th-TH] #open-the-door .video_bc { width: 40%; } [data-locale=th-TH] #open-the-door h2 { font-size: 2rem; } [data-locale=th-TH] #open-the-door p { font-size: 15px; } [data-locale=th-TH] #open-the-door h3 { font-size: 1.2rem; margin-bottom: 20px; } [data-locale=th-TH] #open-the-door .big-button span { font-size: 18px; padding: 20px 30px; } [data-locale=th-TH] #open-the-door .text-link { font-size: 1.2rem; } [data-locale=th-TH] #open-the-door video { width: 35vw; } [data-locale=th-TH] #outdoor-spirit .product div img { max-width: 270px; } } @media (max-width: 1024px) { #hero > div { margin-top: 0; } nav #brand #logo { display: block; } nav .pt-5 { margin-top: 19px; } #menu-bar #brand #logo { position: absolute; top: 50px; left: 50px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(0, 0); display: none; } .flex-box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #open-the-door .container div { width: 100%; margin: 0 auto; text-align: center; } #open-the-door img { max-width: 600px; margin-top: 30px; } #open-the-door a, #open-the-door a:link, #open-the-door a:visited { color: #fff; text-align: initial; } #open-the-door .text-link { text-align: center !important; } #open-the-door .container .text { width: 100%; } #open-the-door .container .video_bc { width: 100%; } #fullScreen img { width: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #journey-of-souls .container div { width: 100%; margin: 0 auto; text-align: center; } #journey-of-souls a, #journey-of-souls a:link, #journey-of-souls a:visited { color: #fff; text-align: initial; } #journey-of-souls h3 { margin-bottom: 30px; } #journey-of-souls-kol { height: 45vh; } #journey-of-souls-kol .link { height: 15vh; width: 50%; } #journey-of-souls-kol .link h2 { color: #fff; margin: 0; font-size: 2rem; } #outdoor-spirit h3 { font-size: 3rem; } #outdoor-spirit .product div h3 { line-height: 1.4; font-size: 1.3em; } #outdoor-spirit .product div img { max-width: 277px; } #outdoor-spirit .product { padding: 5vw 2vw; } #outdoor-spirit .product div { padding: 0 20px; } #outdoor-spirit .product div h2 { font-size: 1.5rem; } #outdoor-spirit .big-button div { width: 100%; max-width: 100%; padding: .5em 2em; color: #fff; } html:lang(en-HK) #open-the-door .text, html:lang(en-SG) #open-the-door .text, html:lang(en-MY) #open-the-door .text, html:lang(en-PH) #open-the-door .text, html:lang(en-IN) #open-the-door .text, html:lang(ko-KR) #open-the-door .text, html:lang(ko-KR) #open-the-door .text, html:lang(vi-VN) #open-the-door .text, html:lang(id-ID) #open-the-door .text, [data-locale=th-TH] #open-the-door .text { width: 100%; } html:lang(en-HK) #open-the-door .video_bc, html:lang(en-SG) #open-the-door .video_bc, html:lang(en-MY) #open-the-door .video_bc, html:lang(en-PH) #open-the-door .video_bc, html:lang(en-IN) #open-the-door .video_bc, html:lang(ko-KR) #open-the-door .video_bc, html:lang(ko-KR) #open-the-door .video_bc, html:lang(vi-VN) #open-the-door .video_bc, html:lang(id-ID) #open-the-door .video_bc, [data-locale=th-TH] #open-the-door .video_bc { width: 100%; } html:lang(en-HK) #open-the-door video, html:lang(en-SG) #open-the-door video, html:lang(en-MY) #open-the-door video, html:lang(en-PH) #open-the-door video, html:lang(en-IN) #open-the-door video, html:lang(ko-KR) #open-the-door video, html:lang(ko-KR) #open-the-door video, html:lang(vi-VN) #open-the-door video, html:lang(id-ID) #open-the-door video, [data-locale=th-TH] #open-the-door video { width: 50vw; } html:lang(en-HK) #outdoor-spirit .product div p, html:lang(en-SG) #outdoor-spirit .product div p, html:lang(en-MY) #outdoor-spirit .product div p, html:lang(en-PH) #outdoor-spirit .product div p, html:lang(en-IN) #outdoor-spirit .product div p, html:lang(ko-KR) #outdoor-spirit .product div p, html:lang(ko-KR) #outdoor-spirit .product div p, html:lang(vi-VN) #outdoor-spirit .product div p, html:lang(id-ID) #outdoor-spirit .product div p, [data-locale=th-TH] #outdoor-spirit .product div p { padding: 0; } html:lang(en-HK) #outdoor-spirit p, html:lang(en-HK) #open-the-door p, html:lang(en-SG) #outdoor-spirit p, html:lang(en-SG) #open-the-door p, html:lang(en-MY) #outdoor-spirit p, html:lang(en-MY) #open-the-door p, html:lang(en-PH) #outdoor-spirit p, html:lang(en-PH) #open-the-door p, html:lang(en-IN) #outdoor-spirit p, html:lang(en-IN) #open-the-door p, html:lang(ko-KR) #outdoor-spirit p, html:lang(ko-KR) #open-the-door p, html:lang(ko-KR) #outdoor-spirit p, html:lang(ko-KR) #open-the-door p, html:lang(vi-VN) #outdoor-spirit p, html:lang(vi-VN) #open-the-door p, html:lang(id-ID) #outdoor-spirit p, html:lang(id-ID) #open-the-door p, [data-locale=th-TH] #outdoor-spirit p, [data-locale=th-TH] #open-the-door p { font-size: 15px; } html:lang(id-ID) #open-the-door h2, html:lang(vi-VN) #open-the-door h2, [data-locale=th-TH] #open-the-door h2 { font-size: 2.5rem; } html:lang(id-ID) #open-the-door h3, html:lang(vi-VN) #open-the-door h3, [data-locale=th-TH] #open-the-door h3 { font-size: 1.5rem; } html:lang(id-ID) #open-the-door p, html:lang(vi-VN) #open-the-door p, [data-locale=th-TH] #open-the-door p { font-size: 15px; text-align: left; } html:lang(id-ID) #open-the-door .text, html:lang(vi-VN) #open-the-door .text, [data-locale=th-TH] #open-the-door .text { width: 100%; } html:lang(id-ID) #open-the-door .video_bc, html:lang(vi-VN) #open-the-door .video_bc, [data-locale=th-TH] #open-the-door .video_bc { width: 100%; } html:lang(id-ID) #open-the-door video, html:lang(vi-VN) #open-the-door video, [data-locale=th-TH] #open-the-door video { width: 60vw; } html:lang(id-ID) #outdoor-spirit .product div h2, html:lang(vi-VN) #outdoor-spirit .product div h2, [data-locale=th-TH] #outdoor-spirit .product div h2 { font-size: 1rem; } html:lang(id-ID) #outdoor-spirit h3, html:lang(vi-VN) #outdoor-spirit h3, [data-locale=th-TH] #outdoor-spirit h3 { font-size: 2.5rem; } html:lang(id-ID) #outdoor-spirit p, html:lang(vi-VN) #outdoor-spirit p, [data-locale=th-TH] #outdoor-spirit p { font-size: 15px; text-align: left; padding: 0 10vw; } html:lang(id-ID) #outdoor-spirit .product div p, html:lang(vi-VN) #outdoor-spirit .product div p, [data-locale=th-TH] #outdoor-spirit .product div p { font-size: 14px; height: 60px; text-align: center; } html:lang(id-ID) #outdoor-spirit .product div h3, html:lang(vi-VN) #outdoor-spirit .product div h3, [data-locale=th-TH] #outdoor-spirit .product div h3 { line-height: 1.4; font-size: 1.3em; } html:lang(vi-VN) #outdoor-spirit .product div h2 { font-size: 14px; } [data-locale=th-TH] #open-the-door video { width: 50vw; } [data-locale=th-TH] #open-the-door h2 { font-size: 2.2rem; } [data-locale=th-TH] #outdoor-spirit h3 { font-size: 2.2rem; } [data-locale=th-TH] #outdoor-spirit p { padding: 0; } [data-locale=th-TH] #outdoor-spirit .product div img { max-width: 250px; } [data-locale=th-TH] #outdoor-spirit .big-button div span { font-size: 15px; } } @media (min-width: 991px) and (max-width: 1023px) { nav #brand #logo { display: block; } #outdoor-spirit .product div img { max-width: 220px; } #outdoor-spirit p { font-size: 1rem; padding: 0 2rem; } } @media (min-width: 769px) and (max-width: 990px) { nav #brand #logo { display: none; } #brand #logo { display: block; position: absolute; top: 50px; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, 0); } #outdoor-spirit p { font-size: 1rem; padding: 0 2rem; } .nav ul li a { font-size: 5vw; } #outdoor-spirit .product div img { max-width: 220px; } html:lang(en-HK) #outdoor-spirit .product div h2, html:lang(en-SG) #outdoor-spirit .product div h2, html:lang(en-MY) #outdoor-spirit .product div h2, html:lang(en-PH) #outdoor-spirit .product div h2, html:lang(en-IN) #outdoor-spirit .product div h2, html:lang(ko-KR) #outdoor-spirit .product div h2, html:lang(ko-KR) #outdoor-spirit .product div h2, html:lang(vi-VN) #outdoor-spirit .product div h2, html:lang(id-ID) #outdoor-spirit .product div h2, [data-locale=th-TH] #outdoor-spirit .product div h2 { font-size: 14px; } html:lang(en-HK) #outdoor-spirit .product div, html:lang(en-SG) #outdoor-spirit .product div, html:lang(en-MY) #outdoor-spirit .product div, html:lang(en-PH) #outdoor-spirit .product div, html:lang(en-IN) #outdoor-spirit .product div, html:lang(ko-KR) #outdoor-spirit .product div, html:lang(ko-KR) #outdoor-spirit .product div, html:lang(vi-VN) #outdoor-spirit .product div, html:lang(id-ID) #outdoor-spirit .product div, [data-locale=th-TH] #outdoor-spirit .product div { padding: 0 10px; } html:lang(en-HK) #outdoor-spirit .product div p, html:lang(en-SG) #outdoor-spirit .product div p, html:lang(en-MY) #outdoor-spirit .product div p, html:lang(en-PH) #outdoor-spirit .product div p, html:lang(en-IN) #outdoor-spirit .product div p, html:lang(ko-KR) #outdoor-spirit .product div p, html:lang(ko-KR) #outdoor-spirit .product div p, html:lang(vi-VN) #outdoor-spirit .product div p, html:lang(id-ID) #outdoor-spirit .product div p, [data-locale=th-TH] #outdoor-spirit .product div p { font-size: 12px; } html:lang(en-HK) #outdoor-spirit .big-button div, html:lang(en-SG) #outdoor-spirit .big-button div, html:lang(en-MY) #outdoor-spirit .big-button div, html:lang(en-PH) #outdoor-spirit .big-button div, html:lang(en-IN) #outdoor-spirit .big-button div, html:lang(ko-KR) #outdoor-spirit .big-button div, html:lang(ko-KR) #outdoor-spirit .big-button div, html:lang(vi-VN) #outdoor-spirit .big-button div, html:lang(id-ID) #outdoor-spirit .big-button div, [data-locale=th-TH] #outdoor-spirit .big-button div { padding: .5em 2em; } [data-locale=th-TH] #open-the-door h2 { font-size: 2.2rem; } [data-locale=th-TH] #open-the-door .text { width: 80%; padding: 0; } [data-locale=th-TH] #outdoor-spirit { padding: 5vw 0 5vw 0; } [data-locale=th-TH] #outdoor-spirit h3 { font-size: 2.2rem; } [data-locale=th-TH] #outdoor-spirit .big-button div { padding: 0; } [data-locale=th-TH] #outdoor-spirit .product div img { max-width: 200px; } } @media (max-width: 768px) { nav #brand { display: none; } #brand #logo { display: block; position: absolute; top: 50px; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, 0); } .nav ul li a { font-size: 3rem; } #journey-of-souls h2 { font-size: 4rem; } #open-the-door img { max-width: 400px; margin-top: 30px; } #outdoor-spirit { padding: 10vw 0 10vw 0; } #outdoor-spirit .product div img { max-width: 200px; } #outdoor-spirit .product div p { font-size: 1em; } #outdoor-spirit .product { padding: 5vw 2vw; } html:lang(en-HK) #outdoor-spirit .product div, html:lang(en-SG) #outdoor-spirit .product div, html:lang(en-MY) #outdoor-spirit .product div, html:lang(en-PH) #outdoor-spirit .product div, html:lang(en-IN) #outdoor-spirit .product div, html:lang(ko-KR) #outdoor-spirit .product div, html:lang(ko-KR) #outdoor-spirit .product div, html:lang(vi-VN) #outdoor-spirit .product div, html:lang(id-ID) #outdoor-spirit .product div, [data-locale=th-TH] #outdoor-spirit .product div { padding: 0 10px; } html:lang(en-HK) #outdoor-spirit .product div p, html:lang(en-SG) #outdoor-spirit .product div p, html:lang(en-MY) #outdoor-spirit .product div p, html:lang(en-PH) #outdoor-spirit .product div p, html:lang(en-IN) #outdoor-spirit .product div p, html:lang(ko-KR) #outdoor-spirit .product div p, html:lang(ko-KR) #outdoor-spirit .product div p, html:lang(vi-VN) #outdoor-spirit .product div p, html:lang(id-ID) #outdoor-spirit .product div p, [data-locale=th-TH] #outdoor-spirit .product div p { font-size: 14px; height: 60px; } html:lang(en-HK) #outdoor-spirit .product div h2, html:lang(en-SG) #outdoor-spirit .product div h2, html:lang(en-MY) #outdoor-spirit .product div h2, html:lang(en-PH) #outdoor-spirit .product div h2, html:lang(en-IN) #outdoor-spirit .product div h2, html:lang(ko-KR) #outdoor-spirit .product div h2, html:lang(ko-KR) #outdoor-spirit .product div h2, html:lang(vi-VN) #outdoor-spirit .product div h2, html:lang(id-ID) #outdoor-spirit .product div h2, [data-locale=th-TH] #outdoor-spirit .product div h2 { font-size: 14px; text-align: center; } html:lang(id-ID) .nav ul li a, html:lang(vi-VN) .nav ul li a, [data-locale=th-TH] .nav ul li a { font-size: 4vw; } html:lang(id-ID) #outdoor-spirit .product div, html:lang(vi-VN) #outdoor-spirit .product div, [data-locale=th-TH] #outdoor-spirit .product div { padding: 0; } [data-locale=th-TH] #open-the-door .text { width: 80%; padding: 0; } [data-locale=th-TH] #open-the-door h2 { font-size: 2rem; } [data-locale=th-TH] #outdoor-spirit { padding: 5vw 0 5vw 0; } [data-locale=th-TH] #outdoor-spirit .product div h2 { font-size: 1.2rem; } [data-locale=th-TH] #outdoor-spirit .big-button div { padding: 0; } [data-locale=th-TH] #outdoor-spirit .product div img { max-width: 200px; } } @media (min-width: 600px) and (max-width: 767px) { nav #brand #logo { display: none; } #open-the-door h3 { color: #fff; font-size: 3rem; line-height: 1; margin-bottom: 30px; } #outdoor-spirit { padding: 20vw 0 20vw 0; } #outdoor-spirit .product { padding: 5vw 2vw; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #outdoor-spirit .product div { max-width: 100%; margin: 30px 0; } #outdoor-spirit .product div img { max-width: 300px; } #outdoor-spirit .product a div { max-width: 100%; margin: 10px 0; } #journey-of-souls { position: relative; height: auto; padding: 20vw 0 20vw 0; z-index: 2; background-color: #000; width: 100%; } #journey-of-souls h2 { margin-bottom: 30px; } #journey-of-souls .container div { padding: 0; } #journey-of-souls-kol { height: 150vw; background-image: url(../images/kol-m.jpg); } #journey-of-souls-kol .link { height: 25vw; width: 100%; } #journey-of-souls-kol .link h2 { margin: 0; font-size: 1.5rem; } #journey-of-souls-kol .link p { font-size: 15px; } #journey-of-souls-kol .link img { max-width: 80px; margin-right: 20px; } html:lang(en-HK) #outdoor-spirit .product div h2 { font-size: 1.4rem; } html:lang(en-HK) #outdoor-spirit .product { -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media (max-width: 599px) { .pc { display: none; } .mobile { display: block; } .nav ul li a { font-size: 6vw; margin-bottom: 30px; } #hero .scroll-down-link { bottom: 3%; } #brand #logo { display: block; width: 120px; height: 32px; background-image: url(http://www.garmin.com.tw/m/buzz/minisite/images/garmin_logo_on_b.svg); background-size: 120px 32px; position: absolute; top: 35px; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, 0); z-index: 5; } .nav { width: 60px; height: 60px; } nav ul li a.active:before { display: none; } .menu-icon:checked + label, .menu-icon:not(:checked) + label { position: fixed; top: 42px; right: 36px; width: 30px; height: 30px; padding: 0; margin: 0; cursor: pointer; z-index: 10; } .section-center { position: relative; top: 0; left: 0; display: block; width: 100%; padding: 0; margin: 0; z-index: 3; text-align: center; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } #hero .scroll-down-link { left: 40%; font-size: 50px; height: 40px; width: 50px; } #open-the-door { padding: 24vw 0 10vw 0; } #open-the-door h2 { font-size: 2rem; } #open-the-door h3 { font-size: 2rem; } #open-the-door p { font-size: 15px; padding: 0; text-align: left; margin-bottom: 20px; } #open-the-door video { width: 70vw; } #open-the-door .text-link { font-size: 20px; } #journey-of-souls, #outdoor-spirit { padding: 15vw 0; } #journey-of-souls h2, #outdoor-spirit h2 { font-size: 4rem; } #journey-of-souls h3, #outdoor-spirit h3 { font-size: 2rem; } #journey-of-souls p, #outdoor-spirit p { font-size: 15px; padding: 0; text-align: left; } #open-the-door .text { padding: 0 2rem; text-align: left; } #open-the-door img { max-width: 250px; margin: 30px 0; } #journey-of-souls p { padding: 0 2rem; margin-bottom: 10px; } @-webkit-keyframes grow-menu { 0% { width: 0; } to { width: 50%; } } @keyframes grow-menu { 0% { width: 0; } to { width: 50%; } } #journey-of-souls { position: relative; height: auto; padding: 20vw 0 5vw 0; z-index: 2; background-color: #000; width: 100%; } #journey-of-souls h2 { font-size: 2rem; margin-bottom: 0px; } #journey-of-souls .container div { padding: 0; } #journey-of-souls-kol { height: 140vw; background-image: url(../images/kol-m.jpg); background-position: top; } #journey-of-souls-kol .flex-box { position: absolute; bottom: 0; left: 0; width: 100%; } #journey-of-souls-kol .link { height: 25vw; width: 100%; } #journey-of-souls-kol .link h2 { margin: 0; font-size: 1.5rem; } #journey-of-souls-kol .link p { font-size: 14px; line-height: 1; } #journey-of-souls-kol .link img { max-width: 80px; margin-right: 20px; } #journey-of-souls-kol p { margin-bottom: 20px; } #outdoor-spirit { padding: 20vw 0 0 0; } #outdoor-spirit p { padding: 0 2rem; } #outdoor-spirit .product { padding: 0 2vw 5vw 2vw; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #outdoor-spirit .product div { max-width: 100%; margin: 10px 0 50px 0; } #outdoor-spirit .product div h2 { font-size: 1.5rem; } #outdoor-spirit .product div h3 { font-size: 1.5em; margin-bottom: 10px; } #outdoor-spirit .product div img { max-width: 250px; } #outdoor-spirit .product p { font-size: 15px; padding: 0 2rem; } #outdoor-spirit .product div hr { opacity: 1; width: 50%; height: 3px; } #outdoor-spirit .product div p { margin-bottom: 10px; } #outdoor-spirit .big-button div { width: 100%; max-width: 100%; padding: .5em 2em; color: #fff; margin: 0; } html:lang(en-HK) #open-the-door h3, html:lang(en-SG) #open-the-door h3, html:lang(en-MY) #open-the-door h3, html:lang(en-PH) #open-the-door h3, html:lang(en-IN) #open-the-door h3, html:lang(ko-KR) #open-the-door h3, html:lang(ko-KR) #open-the-door h3, html:lang(vi-VN) #open-the-door h3, html:lang(id-ID) #open-the-door h3, [data-locale=th-TH] #open-the-door h3 { font-size: 1.5rem; } html:lang(en-HK) #open-the-door p, html:lang(en-SG) #open-the-door p, html:lang(en-MY) #open-the-door p, html:lang(en-PH) #open-the-door p, html:lang(en-IN) #open-the-door p, html:lang(ko-KR) #open-the-door p, html:lang(ko-KR) #open-the-door p, html:lang(vi-VN) #open-the-door p, html:lang(id-ID) #open-the-door p, [data-locale=th-TH] #open-the-door p { font-size: 15px; } html:lang(en-HK) #open-the-door video, html:lang(en-SG) #open-the-door video, html:lang(en-MY) #open-the-door video, html:lang(en-PH) #open-the-door video, html:lang(en-IN) #open-the-door video, html:lang(ko-KR) #open-the-door video, html:lang(ko-KR) #open-the-door video, html:lang(vi-VN) #open-the-door video, html:lang(id-ID) #open-the-door video, [data-locale=th-TH] #open-the-door video { width: 70vw; margin-top: 20px; } html:lang(en-HK) #outdoor-spirit .product div h2, html:lang(en-SG) #outdoor-spirit .product div h2, html:lang(en-MY) #outdoor-spirit .product div h2, html:lang(en-PH) #outdoor-spirit .product div h2, html:lang(en-IN) #outdoor-spirit .product div h2, html:lang(ko-KR) #outdoor-spirit .product div h2, html:lang(ko-KR) #outdoor-spirit .product div h2, html:lang(vi-VN) #outdoor-spirit .product div h2, html:lang(id-ID) #outdoor-spirit .product div h2, [data-locale=th-TH] #outdoor-spirit .product div h2 { font-size: 1.4rem; margin-bottom: 20px; text-align: center; } html:lang(en-HK) #outdoor-spirit p, html:lang(en-SG) #outdoor-spirit p, html:lang(en-MY) #outdoor-spirit p, html:lang(en-PH) #outdoor-spirit p, html:lang(en-IN) #outdoor-spirit p, html:lang(ko-KR) #outdoor-spirit p, html:lang(ko-KR) #outdoor-spirit p, html:lang(vi-VN) #outdoor-spirit p, html:lang(id-ID) #outdoor-spirit p, [data-locale=th-TH] #outdoor-spirit p { font-size: 15px; word-break: break-word; } html:lang(en-HK) #outdoor-spirit .product div p, html:lang(en-SG) #outdoor-spirit .product div p, html:lang(en-MY) #outdoor-spirit .product div p, html:lang(en-PH) #outdoor-spirit .product div p, html:lang(en-IN) #outdoor-spirit .product div p, html:lang(ko-KR) #outdoor-spirit .product div p, html:lang(ko-KR) #outdoor-spirit .product div p, html:lang(vi-VN) #outdoor-spirit .product div p, html:lang(id-ID) #outdoor-spirit .product div p, [data-locale=th-TH] #outdoor-spirit .product div p { height: auto; } html:lang(en-HK) #outdoor-spirit .product .big-button div, html:lang(en-SG) #outdoor-spirit .product .big-button div, html:lang(en-MY) #outdoor-spirit .product .big-button div, html:lang(en-PH) #outdoor-spirit .product .big-button div, html:lang(en-IN) #outdoor-spirit .product .big-button div, html:lang(ko-KR) #outdoor-spirit .product .big-button div, html:lang(ko-KR) #outdoor-spirit .product .big-button div, html:lang(vi-VN) #outdoor-spirit .product .big-button div, html:lang(id-ID) #outdoor-spirit .product .big-button div, [data-locale=th-TH] #outdoor-spirit .product .big-button div { padding: .8rem 2rem; } html:lang(id-ID) .nav ul li a, html:lang(vi-VN) .nav ul li a, [data-locale=th-TH] .nav ul li a { font-size: 4vw; } html:lang(id-ID) #open-the-door h2, html:lang(vi-VN) #open-the-door h2, [data-locale=th-TH] #open-the-door h2 { font-size: 1.6rem; } html:lang(id-ID) #open-the-door h3, html:lang(vi-VN) #open-the-door h3, [data-locale=th-TH] #open-the-door h3 { font-size: 1.2rem; } html:lang(id-ID) #outdoor-spirit h3, html:lang(vi-VN) #outdoor-spirit h3, [data-locale=th-TH] #outdoor-spirit h3 { font-size: 1.6rem; } html:lang(id-ID) #outdoor-spirit .product div h2, html:lang(vi-VN) #outdoor-spirit .product div h2, [data-locale=th-TH] #outdoor-spirit .product div h2 { font-size: 1.2rem; } html:lang(vi-VN) #outdoor-spirit h3 { font-size: 1.3rem; } [data-locale=th-TH] #hero > div { margin-top: 0; } [data-locale=th-TH] #hero .scroll-down-link { left: 50%; } [data-locale=th-TH] #open-the-door h2 { font-size: 1.6rem; margin-bottom: 20px; } [data-locale=th-TH] #open-the-door .big-button div span { padding: 20px 20px; font-size: 15px; } [data-locale=th-TH] #outdoor-spirit { padding: 20vw 0 5vw 0; } [data-locale=th-TH] #outdoor-spirit h3 { line-height: 1.4 !important; } [data-locale=th-TH] #outdoor-spirit .product div h2 { font-size: 1.2rem; } [data-locale=th-TH] #outdoor-spirit .product .big-button div { padding: 0; } [data-locale=th-TH] #outdoor-spirit .product div img { max-width: 270px; margin: 0; } html:lang(en-HK) #outdoor-spirit { padding: 20vw 0 0 0; } html:lang(en-HK) #outdoor-spirit .product div { max-width: 100%; padding: 0 20px; margin-bottom: 60px; } html:lang(en-HK) #outdoor-spirit .product div img { max-width: 320px; } } @media (max-width: 390px) { #hero .scroll-down-link { bottom: 4%; } #hero video { min-width: 260% !important; } } @media (max-width: 375px) { #hero .scroll-down-link { bottom: 6%; } #open-the-door p { font-size: 15px; padding: 0; text-align: left; } #open-the-door .text { padding: 0 1.5rem; text-align: left; } #journey-of-souls h2 { font-size: 2rem; margin-bottom: 0px; } #journey-of-souls p { padding: 0 3rem; font-size: 15px; text-align: left; } #journey-of-souls-kol { height: 155vw; } #journey-of-souls-kol .flex-box { position: absolute; bottom: 0; left: 0; width: 100%; } #journey-of-souls-kol .link { height: 30vw; width: 100%; } #outdoor-spirit .product div { padding: 0 20px; } #outdoor-spirit p { font-size: 15px; padding: 0 2rem; text-align: left; } #outdoor-spirit .big-button div { padding: .5em 2em; } html:lang(vi-VN) #outdoor-spirit h3 { font-size: 1rem; } } @media (max-width: 360px) { #hero { height: 500px; } #hero .scroll-down-link { bottom: 3%; } #open-the-door, #journey-of-souls, #outdoor-spirit { padding: 23vw 0 15vw 0; } #open-the-door h2, #journey-of-souls h2, #outdoor-spirit h2 { font-size: 2rem; } #open-the-door p, #journey-of-souls p, #outdoor-spirit p { font-size: 1rem; } #open-the-door h3, #journey-of-souls h3, #outdoor-spirit h3 { font-size: 1.5rem; } #outdoor-spirit { padding: 23vw 0 0 0; } #outdoor-spirit h3 { font-size: 2rem; } #open-the-door h2 { font-size: 1.6rem; } html:lang(en-HK) #outdoor-spirit .product div h2, html:lang(en-SG) #outdoor-spirit .product div h2, html:lang(en-MY) #outdoor-spirit .product div h2, html:lang(en-PH) #outdoor-spirit .product div h2, html:lang(en-IN) #outdoor-spirit .product div h2, html:lang(ko-KR) #outdoor-spirit .product div h2, html:lang(vi-VN) #outdoor-spirit .product div h2, html:lang(id-ID) #outdoor-spirit .product div h2, [data-locale=th-TH] #outdoor-spirit .product div h2 { font-size: 1.2rem; margin-bottom: 20px; text-align: center; } html:lang(id-ID) #outdoor-spirit h3, html:lang(vi-VN) #outdoor-spirit h3, [data-locale=th-TH] #outdoor-spirit h3 { font-size: 1.2rem; } html:lang(id-ID) #outdoor-spirit .product div h2, html:lang(vi-VN) #outdoor-spirit .product div h2, [data-locale=th-TH] #outdoor-spirit .product div h2 { font-size: 1rem; } html:lang(id-ID) #outdoor-spirit .product div p, html:lang(vi-VN) #outdoor-spirit .product div p, [data-locale=th-TH] #outdoor-spirit .product div p { font-size: 14px; } } .colorline { border-bottom: 3px solid #70c6ff; width: 32rem; margin-bottom: 10px !important; } .short { width: 20rem; } @media (max-width: 1440px) { .colorline { width: 27rem; } .short { width: 17rem; } } @media (max-width: 1280px) { .colorline { width: 27rem; } .short { width: 17rem; } } @media (max-width: 1024px) { .colorline, .short { margin: 0 auto; } } @media (max-width: 599px) { .colorline, .short { margin: 0; } .colorline { border: 0; width: 100%; border-bottom: 0; -webkit-text-decoration: underline 3px solid #70c6ff; text-decoration: underline 3px solid #70c6ff; line-height: 2 !important; } } /* ć‹•ç•«éƒšćˆ† */ /*animated scroll arrow animation*/ @-webkit-keyframes fade_move_down { 0% { -webkit-transform: translate(0, -10px); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: translate(0, 10px); opacity: 0; } } @-moz-keyframes fade_move_down { 0% { -moz-transform: translate(0, -10px); opacity: 0; } 50% { opacity: 1; } 100% { -moz-transform: translate(0, 10px); opacity: 0; } } @keyframes fade_move_down { 0% { -webkit-transform: translate(0, -10px); transform: translate(0, -10px); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: translate(0, 10px); transform: translate(0, 10px); opacity: 0; } } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } to { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); opacity: 0; transform: translate3d(0, 100%, 0); } to { -webkit-transform: translateZ(0); opacity: 1; transform: translateZ(0); } } @keyframes fadeInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); opacity: 0; transform: translate3d(0, 100%, 0); } to { -webkit-transform: translateZ(0); opacity: 1; transform: translateZ(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .popup-wrap { background-image: url(../images/map-bg2.jpg); position: relative; } .popup-wrap .close-btn { position: fixed; top: 33px; right: 50px; background: #3f8cbf; border-radius: 50px; padding: 10px; z-index: 100; } .popup-wrap .close-btn .Icon { width: 50px; height: 50px; position: relative; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } .popup-wrap .close-btn .Icon span { display: block; position: absolute; left: 0; top: 23px; height: 8px; width: 100%; background: #fff; border-radius: 4px; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; } .popup-wrap .close-btn .Icon span:nth-child(1), .popup-wrap .close-btn .Icon span:nth-child(3) { width: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .popup-wrap .close-btn .Icon span:nth-child(1) { left: 3px; top: 15px; } .popup-wrap .close-btn .Icon span:nth-child(2) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .popup-wrap .close-btn .Icon span:nth-child(3) { left: 20px; top: 31px; } .popup-wrap .close-btn .Icon.open span:nth-child(1), .popup-wrap .close-btn .Icon.open span:nth-child(3) { left: -1px; } .popup-wrap .close-btn .Icon.open span:nth-child(1) { top: 15px; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .popup-wrap .close-btn .Icon.open span:nth-child(2) { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .popup-wrap .close-btn .Icon.open span:nth-child(3) { top: 31px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .popup-wrap .pop-up { padding: 100px 0px; } .popup-wrap .pop-up .pop-up-wrapper { width: 80%; margin: 0 auto; text-align: center; border-radius: 10px; background: #ffffff; } .popup-wrap span { display: inline-block; } .popup-wrap .pop-up .pop-up-wrapper #rule { padding: 80px 10px 0px 10px; } .popup-wrap .pop-up .pop-up-wrapper #rule h2 { font-size: 4rem; color: #1A3010; text-transform: uppercase; font-weight: bold; position: relative; display: inline-block; width: 100%; line-height: 1.3; padding-bottom: 20px; } .popup-wrap .pop-up .pop-up-wrapper #rule h2 > button { text-transform: uppercase; font-weight: bold; position: relative; color: #ffffff; } .popup-wrap .pop-up .pop-up-wrapper #rule h2 span.highlight { font-size: 4rem; color: #193e56; text-transform: uppercase; font-weight: bold; position: relative; width: 100%; line-height: 1.3; position: relative; z-index: 1; -webkit-transform: skewX(0deg); -ms-transform: skewX(0deg); transform: skewX(0deg); } .popup-wrap .pop-up .pop-up-wrapper #rule h2 span.highlight:before { content: ""; z-index: -1; position: absolute; top: 10px; height: 0.4em; width: 25%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=1); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transform: skewX(0deg); -ms-transform: skewX(0deg); transform: skewX(0deg); } .popup-wrap .pop-up .pop-up-wrapper #rule .content h3 { color: #1A3010; text-align: left; font-size: 2rem; font-weight: bold; } .popup-wrap .pop-up .pop-up-wrapper #rule .content ul { color: #000000; text-align: left; } .popup-wrap .pop-up .pop-up-wrapper #rule .content ul li { list-style-type: decimal; font-size: 1.2rem; } .popup-wrap .pop-up .pop-up-wrapper #rule .content ul li span { color: #193e56; font-weight: bold; } .popup-wrap .pop-up .pop-up-wrapper #rule .content .award { background-color: #1A3010; padding: 25px; } .popup-wrap .pop-up .pop-up-wrapper #rule .content .award .award-wrapper { position: relative; } .popup-wrap .pop-up .pop-up-wrapper #rule .content .award .award-wrapper .card-header { border: 2px solid #F6F9E6; padding: 2rem; } .popup-wrap .pop-up .pop-up-wrapper #rule .content .award .award-wrapper .card-header .watermark { position: absolute; top: 10vw; left: 0; height: 100%; width: 100%; overflow: hidden; } .popup-wrap .pop-up .pop-up-wrapper #rule .content .award .award-wrapper .card-header .watermark::after { content: attr(data-watermark); position: relative; left: -40px; top: 15%; color: rgba(69, 120, 52, 0.2); font-size: 180px; font-weight: 700; text-transform: uppercase; font-style: italic; } .popup-wrap .pop-up .pop-up-wrapper #rule .content .award .award-wrapper .card-header .card-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .popup-wrap .pop-up .pop-up-wrapper #rule .content .award .award-wrapper .card-header .card-title .text { text-align: center; -ms-flex-preferred-size: 70%; flex-basis: 70%; z-index: 5; } .popup-wrap .pop-up .pop-up-wrapper #rule .content .award .award-wrapper .card-header .card-title .text h2 { font-size: 4rem; color: #F6F9E6; text-transform: uppercase; font-weight: bold; position: relative; width: 100%; font-style: italic; } .popup-wrap .pop-up .pop-up-wrapper #rule .content .award .award-wrapper .card-header .card-title .text p { font-size: 1.2rem; color: #F6F9E6; } .popup-wrap .pop-up .pop-up-wrapper #rule .content .award .award-wrapper .card-header .card-title img { max-width: 100%; z-index: 5; } .popup-wrap .pop-up .pop-up-wrapper #award { padding: 80px 10px 0px 10px; } .popup-wrap .pop-up .pop-up-wrapper #award h2 { font-size: 4rem; color: #315424; text-transform: uppercase; font-weight: bold; position: relative; display: inline-block; width: 100%; line-height: 1.3; padding-bottom: 20px; } .popup-wrap .pop-up .pop-up-wrapper #award h2 > button { text-transform: uppercase; font-weight: bold; position: relative; color: #ffffff; } .popup-wrap .pop-up .pop-up-wrapper #award h2 span.highlight { font-size: 4rem; color: #193e56; text-transform: uppercase; font-weight: bold; position: relative; width: 100%; line-height: 1.3; position: relative; z-index: 1; -webkit-transform: skewX(0deg); -ms-transform: skewX(0deg); transform: skewX(0deg); } .popup-wrap .pop-up .pop-up-wrapper #award h2 span.highlight:before { content: ""; z-index: -1; position: absolute; top: 10px; height: 0.4em; width: 35%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=1); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transform: skewX(0deg); -ms-transform: skewX(0deg); transform: skewX(0deg); } .popup-wrap .pop-up .pop-up-wrapper #award ul { color: #000000; text-align: left; padding: 0 6rem; } .popup-wrap .pop-up .pop-up-wrapper #award ul li { list-style-type: decimal; font-size: 1.2rem; line-height: 1.6; padding-bottom: 10px; } .popup-wrap .pop-up .pop-up-wrapper #award ul li ol { padding: 0; } .popup-wrap .pop-up .pop-up-wrapper #award ul li span { color: #193e56; font-weight: bold; } .popup-wrap .pop-up .pop-up-wrapper #gdpr { padding: 80px 10px 80px 10px; } .popup-wrap .pop-up .pop-up-wrapper #gdpr h2 { font-size: 4rem; color: #315424; text-transform: uppercase; font-weight: bold; position: relative; display: inline-block; width: 100%; line-height: 1.3; padding-bottom: 20px; } .popup-wrap .pop-up .pop-up-wrapper #gdpr h2 > button { text-transform: uppercase; font-weight: bold; position: relative; color: #ffffff; } .popup-wrap .pop-up .pop-up-wrapper #gdpr h2 span.highlight { font-size: 4rem; color: #193e56; text-transform: uppercase; font-weight: bold; position: relative; width: 100%; line-height: 1.3; position: relative; z-index: 1; -webkit-transform: skewX(0deg); -ms-transform: skewX(0deg); transform: skewX(0deg); } .popup-wrap .pop-up .pop-up-wrapper #gdpr h2 span.highlight:before { content: ""; z-index: -1; position: absolute; top: 10px; height: 0.4em; width: 40%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=1); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transform: skewX(0deg); -ms-transform: skewX(0deg); transform: skewX(0deg); } .popup-wrap .pop-up .pop-up-wrapper #gdpr ul { color: #000000; text-align: left; padding: 0 6rem; } .popup-wrap .pop-up .pop-up-wrapper #gdpr ul li { list-style-type: decimal; font-size: 1.2rem; line-height: 1.6; padding-bottom: 10px; } .popup-wrap .pop-up .pop-up-wrapper #gdpr ul li ol { padding: 0; } .popup-wrap .pop-up .pop-up-wrapper #gdpr ul li span { color: #3f8cbf; font-weight: bold; } @media screen and (max-width: 1024px) { .popup-wrap .pop-up .pop-up-wrapper #rule .content .award .award-wrapper .card-header .card-title { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .popup-wrap .pop-up .pop-up-wrapper #rule h2 span.highlight:before { width: 30%; } .popup-wrap .pop-up .pop-up-wrapper #award h2 span.highlight:before { width: 50%; } .popup-wrap .pop-up .pop-up-wrapper #gdpr h2 span.highlight:before { width: 57%; } } @media screen and (max-width: 767px) { .popup-wrap .pop-up .pop-up-wrapper #rule h2 span.highlight { font-size: 3rem; } .popup-wrap .pop-up .pop-up-wrapper #rule h2 span.highlight:before { width: 60%; } .popup-wrap .pop-up .pop-up-wrapper #rule .content h3 { font-size: 1.6rem; } .popup-wrap .pop-up .pop-up-wrapper #rule .content .award .award-wrapper .card-header .card-title .text h2 { font-size: 2.2rem; } .popup-wrap .pop-up .pop-up-wrapper #award h2 span.highlight:before { width: 100%; } .popup-wrap .pop-up .pop-up-wrapper #award h2 span.highlight { font-size: 3rem; width: 90%; } .popup-wrap .pop-up .pop-up-wrapper #gdpr h2 span.highlight { font-size: 3rem; width: 90%; } .popup-wrap .pop-up .pop-up-wrapper #gdpr h2 span.highlight:before { width: 80%; } } @media (max-width: 1024px) { .popup-wrap .close-btn { position: fixed; top: 20px; right: 20px; } .popup-wrap .pop-up .pop-up-wrapper #award h2 span.highlight, .popup-wrap .pop-up .pop-up-wrapper #gdpr h2 span.highlight { font-size: 3rem; } .popup-wrap .pop-up .pop-up-wrapper #award ul, .popup-wrap .pop-up .pop-up-wrapper #gdpr ul { padding: 0 4rem; } } @media (max-width: 599px) { .popup-wrap .pop-up .pop-up-wrapper #award h2 span.highlight, .popup-wrap .pop-up .pop-up-wrapper #gdpr h2 span.highlight { font-size: 2rem; } .popup-wrap .pop-up .pop-up-wrapper #award ul li, .popup-wrap .pop-up .pop-up-wrapper #gdpr ul li { font-size: 15px; } .popup-wrap .pop-up .pop-up-wrapper #award ul, .popup-wrap .pop-up .pop-up-wrapper #gdpr ul { padding: 0 2rem; } .popup-wrap .pop-up .pop-up-wrapper #award h2 span.highlight:before { display: none; } .popup-wrap .pop-up .pop-up-wrapper #award { padding: 50px 10px 0px 10px; } .popup-wrap .pop-up .pop-up-wrapper { width: 90%; } }