` children to
100%. `scripts/port-sub-css.py` emits the source's verbatim rules on top. */
.gyro .row {
display: flex;
flex-wrap: wrap;
margin-right: -10px;
margin-left: -10px;
margin-top: -20px;
}
/* Bootstrap ships an explicit `.col-1 … .col-lg-auto` list here; `[class*="col-"]`
is only used by `.no-gutters`/`.form-row`. Matching loosely would also catch
`img-col-area` (it contains `col-`), which is a flex strip that must keep
`width: auto` so its negative gutters can widen it past the column. */
.gyro .col,
.gyro [class^="col-"],
.gyro [class*=" col-"] {
position: relative;
width: 100%;
padding-right: 10px;
padding-left: 10px;
margin-top: 20px;
}
.gyro .row.no-gutters {
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
.gyro .row.no-gutters > .col,
.gyro .row.no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0;
margin-top: 0;
}
@media (max-width: 767px) {
.gyro .row {
margin-right: -5px;
margin-left: -5px;
margin-top: -10px;
}
.gyro .col,
.gyro [class^="col-"],
.gyro [class*=" col-"] {
padding-right: 5px;
padding-left: 5px;
margin-top: 10px;
}
}
@media (min-width: 576px) {
.gyro .row > .sm-6 {
width: 50%;
}
}
/* --- scroll reveal (ScrollMagic + GSAP in the source) ----------------- */
.gyro .ani_item,
.gyro .ani_item_right {
opacity: 0;
}
.gyro .is-in .ani_item,
.gyro .is-in .ani_item_right {
animation-duration: 0.5s;
animation-fill-mode: both;
animation-timing-function: ease-out;
animation-delay: calc(var(--ani-i, 0) * 0.2s);
}
.gyro .is-in .ani_item {
animation-name: gyroAniUp;
}
.gyro .is-in .ani_item_right {
animation-name: gyroAniLeft;
}
@keyframes gyroAniUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes gyroAniLeft {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.gyro .ani_item,
.gyro .ani_item_right {
opacity: 1;
animation: none !important;
}
}
/* Symbol cube entrance: bounce + rotateY after 0.5s (source `.ani-effect-on .symbol`).
The `
` stays a plain inline box — a 17px line box, its `![]()
` hidden only by
`.ani_item`'s opacity — until the reveal builds the 4.375rem stage, so the header
above the fold does not grow before the animation runs. */
.gyro .is-in .symbol {
position: relative;
display: inline-block;
width: 4.375rem;
height: 4.375rem;
}
.gyro .is-in .symbol img {
position: absolute;
top: 0;
left: 0;
animation: gyroSymbol 1.5s ease 0.5s both;
}
@keyframes gyroSymbol {
0% {
top: 100%;
opacity: 0;
transform: scale(0) rotateY(0deg);
}
60% {
top: -20%;
opacity: 1;
transform: scale(1.1) rotateY(540deg);
}
80% {
top: 0;
opacity: 1;
transform: scale(1) rotateY(540deg);
}
100% {
top: 0;
opacity: 1;
transform: scale(1) rotateY(540deg);
}
}
/* ==========================================================================
Loader — gradient veil, logo pieces fill one by one, then fades away
========================================================================== */
.gyro-load {
position: fixed;
inset: 0;
z-index: 100000;
background-color: #033660;
background-image: linear-gradient(to top right, #033660, #1172b8);
display: grid;
place-items: center;
opacity: 1;
transition: opacity 1.2s linear;
}
.gyro-load[data-state="hide"] {
opacity: 0;
}
.gyro-load svg {
width: 400px;
height: 400px;
max-width: 80vw;
}
@media (max-width: 767px) {
.gyro-load svg {
width: 200px;
height: 200px;
}
}
.gyro-load svg [data-piece] {
fill: transparent;
}
.gyro-load[data-state="draw"] svg [data-piece] {
animation: gyroFill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) both;
animation-delay: calc(0.5s + var(--piece) * 0.1s);
}
@keyframes gyroFill {
from {
fill: transparent;
}
to {
fill: var(--fill, #fff);
}
}
/* ==========================================================================
Header
========================================================================== */
.gyro #header {
position: fixed;
top: 0;
left: 0;
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(0, 0, 0, 0.1);
transition: 0.2s ease;
z-index: 1000;
}
.gyro #header .header-bottom {
position: relative;
max-width: 1540px;
height: 100px;
padding: 0 20px;
margin: 0 auto;
text-align: center;
}
.gyro #header .logo {
position: absolute;
top: 50%;
left: 20px;
z-index: 1;
font-size: 0;
transform: translateY(calc(-50% + 0.5px));
}
.gyro #header .logo a {
display: block;
}
.gyro #header .logo img {
width: 197px;
}
.gyro #header .logo img.ori {
display: none;
}
/* fixed state: white bar, dark logo (and on the main page the bar slides away) */
.gyro #header.fixed {
background-color: #fff;
border-bottom-color: rgba(0, 0, 0, 0.1);
}
.gyro #header.fixed .logo img.white {
display: none;
}
.gyro #header.fixed .logo img.ori {
display: block;
}
.gyro #header.fixed .gnb > ul > li > a {
color: #111;
}
.gyro #header.fixed .lang-pc > a {
background-image: url("/sites/gyrosoft/img/ico_global-b.png");
}
.gyro #header.fixed .pc_sitemap_btn span {
background-color: #333;
}
.gyro[data-page="main"] #header.fixed {
transform: translateY(-100%);
}
/* desktop nav (the source scopes all of this to ≥1200px) */
@media (min-width: 1200px) {
.gyro #header .gnb {
position: relative;
right: 0 !important;
display: inline-block;
width: auto;
vertical-align: top;
text-align: left;
}
.gyro #header .gnb > ul {
display: inline-block;
vertical-align: top;
font-size: 0;
line-height: 0;
}
.gyro #header .gnb > ul > li {
position: relative;
display: inline-block;
vertical-align: top;
}
.gyro #header .gnb > ul > li > a {
position: relative;
display: block;
padding: 0 39px;
font-size: 18px;
font-weight: 500;
line-height: 100px;
letter-spacing: -0.5px;
color: #fff;
}
}
@media (min-width: 1200px) {
.gyro #header .gnb > ul > li > a:hover {
color: #0a6cbd;
}
}
@media (min-width: 1200px) {
/* desktop hides the drop-downs and uses the sitemap panel instead; below
1200px the very same is the accordion (see the mobile block) */
.gyro #header .gnb .depth2 {
display: none;
}
}
/* language toggle */
.gyro .lang-pc {
position: absolute;
top: 36px;
right: 70px;
z-index: 100;
}
.gyro .lang-pc > a {
display: block;
width: 65px;
height: 29px;
font-size: 0;
background: url("/sites/gyrosoft/img/ico_global-w.png") no-repeat center center;
}
.gyro .lang-pc .lang-depth2 {
position: absolute;
top: 30px;
right: 0;
left: 0;
display: none;
overflow: hidden;
border: 1px solid transparent;
border-radius: 1rem;
background-color: rgba(0, 0, 0, 0.4);
}
.gyro .lang-pc.on .lang-depth2 {
display: block;
}
.gyro .lang-pc .lang-depth2 > li + li a {
border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.gyro .lang-pc .lang-depth2 > li a {
display: block;
padding: 0 10px;
font-size: 14px;
line-height: 30px;
color: #fff;
}
.gyro .lang-pc .lang-depth2 > li a:hover {
font-weight: 700;
background-color: #000;
}
/* sitemap button (hamburger) */
.gyro .pc_sitemap_btn {
display: none;
position: absolute;
top: 40px;
right: 20px;
width: 40px;
height: 22px;
z-index: 9999;
cursor: pointer;
}
.gyro .pc_sitemap_btn span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: #fff;
transition: 0.3s;
}
.gyro .pc_sitemap_btn span:nth-child(1) {
top: 50%;
margin-top: -1px;
}
.gyro .pc_sitemap_btn span:nth-child(2) {
top: 0;
}
.gyro .pc_sitemap_btn span:nth-child(3) {
bottom: 0;
}
.gyro .pc_sitemap_btn.on {
top: 37px;
height: 30px;
}
.gyro .pc_sitemap_btn.on span {
background: #333;
}
.gyro .pc_sitemap_btn.on span:nth-child(1) {
opacity: 0;
}
.gyro .pc_sitemap_btn.on span:nth-child(2) {
transform: translateY(14px) rotate(-45deg);
}
.gyro .pc_sitemap_btn.on span:nth-child(3) {
transform: translateY(-14px) rotate(45deg);
}
@media (min-width: 1200px) {
.gyro .pc_sitemap_btn {
display: block;
}
}
/* mega sitemap panel */
.gyro #headerSitemap {
position: absolute;
top: 100px;
left: 0;
width: 100%;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid #ddd;
background-color: #fff;
opacity: 0;
transform: rotateX(-90deg);
transform-origin: top;
transition: 0.2s all ease-in-out;
pointer-events: none;
}
.gyro #headerSitemap.on {
opacity: 1;
transform: rotateX(0);
pointer-events: auto;
}
.gyro #headerSitemap > ul {
display: flex;
max-width: 1240px;
padding: 0 20px;
margin: 0 auto;
}
.gyro #headerSitemap > ul > li {
width: 100%;
padding: 40px;
border-left: 1px solid #ddd;
font-size: 20px;
text-align: left;
}
.gyro #headerSitemap > ul > li:last-child {
border-right: 1px solid #ddd;
}
.gyro #headerSitemap > ul > li > a {
display: block;
font-size: 24px;
font-weight: 700;
color: #222;
}
.gyro #headerSitemap > ul > li > a:hover {
color: #0a6cbd;
}
.gyro #headerSitemap .depth2 {
display: inline-block;
margin-top: 20px;
text-align: left;
}
.gyro #headerSitemap .depth2 > li {
margin-bottom: 15px;
}
.gyro #headerSitemap .depth2 > li:last-child {
margin-bottom: 0;
}
.gyro #headerSitemap .depth2 > li > a {
font-weight: 600;
color: #555;
}
.gyro #headerSitemap .depth2 > li:hover > a {
text-decoration: underline;
}
.gyro #headerSitemap .depth3 {
display: block;
padding: 10px;
font-size: 18px;
}
.gyro #headerSitemap .depth3 > li {
margin-bottom: 5px;
}
.gyro #headerSitemap .depth3 > li:last-child {
margin-bottom: 0;
}
.gyro #headerSitemap .depth3 a {
color: #555;
}
.gyro #headerSitemap .depth3 a::before {
content: "- ";
}
.gyro #headerSitemap .depth3 a:hover {
color: #0a6cbd;
text-decoration: underline;
}
/* white header while the sitemap panel is open */
.gyro #header.panel-open,
.gyro #header.fixed {
background-color: #fff;
border-bottom-color: rgba(0, 0, 0, 0.1);
}
.gyro #header.panel-open .gnb > ul > li > a,
.gyro #header.fixed .gnb > ul > li > a {
color: #111;
}
.gyro #header.panel-open .logo img.white {
display: none;
}
.gyro #header.panel-open .logo img.ori {
display: block;
}
.gyro #header.panel-open .lang-pc > a {
background-image: url("/sites/gyrosoft/img/ico_global-b.png");
}
.gyro #header.panel-open .pc_sitemap_btn span {
background-color: #333;
}
/* the main page hides the fixed bar, except while the panel needs it */
.gyro[data-page="main"] #header.panel-open {
transform: none;
}
/* mobile / tablet nav (≤1199px) */
@media (max-width: 1199px) {
.gyro #header {
transform: none !important;
}
.gyro #header .header-bottom {
height: 80px;
}
.gyro #header .header-bottom > .lang-pc {
top: 27px;
right: 70px;
}
.gyro #header .logo {
height: 100%;
}
.gyro #header .logo a {
display: flex;
align-items: center;
height: 100%;
padding: 10px 0;
}
.gyro #header .logo img {
width: auto;
height: 100%;
}
.gyro #header .gnb {
position: fixed;
top: 0;
right: -100%;
z-index: 99999;
width: 100%;
height: 100vh;
opacity: 0;
text-align: left;
transition: right 0.5s, opacity 0.5s;
}
.gyro #header .gnb.open {
right: 0;
opacity: 1;
}
.gyro #header .m-gnb-bg {
position: fixed;
inset: 0;
display: none;
background: rgba(0, 0, 0, 0.8);
}
.gyro #header .m-gnb-bg.open {
display: block;
}
.gyro #header .m-lang {
position: fixed;
top: 0;
right: -100%;
z-index: 100000;
width: 80%;
height: 80px;
padding: 18px 0 0 33px;
background: #0a6cbd;
opacity: 0;
transition: right 0.5s, opacity 0.5s;
}
.gyro #header .m-lang.open {
right: 0;
opacity: 1;
}
.gyro #header .gnb > ul {
position: absolute;
top: 80px;
right: 0;
z-index: 100000;
width: 80%;
height: calc(100% - 80px);
overflow-x: hidden;
padding-bottom: 120px;
background: #fff;
}
.gyro #header .gnb ul a {
display: block;
width: 100%;
padding-left: 36px;
line-height: 1;
}
.gyro #header .gnb > ul > li {
width: 100%;
}
.gyro #header .gnb > ul > li > a {
position: relative;
padding: 20px 36px;
border-top: 1px solid #ddd;
font-size: 23px;
line-height: 1.2;
color: #333;
background-color: #fff;
}
.gyro #header .gnb > ul > li:first-child > a {
border-top: 0;
}
.gyro #header .gnb > ul > li:last-child > a {
border-bottom: 1px solid #ddd;
}
.gyro #header .gnb > ul > li.has-sub > a::after {
content: "";
position: absolute;
top: 50%;
right: 30px;
width: 12px;
height: 12px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-70%) rotate(45deg);
transition: 0.3s;
}
.gyro #header .gnb > ul > li > ul {
/* undo the desktop `.depth2 { display: none }`; the inline height is
animated by useSlideToggle, mirroring jQuery's slideToggle(200) */
display: block;
height: 0;
overflow: hidden;
width: 100%;
background: #e8e8e8;
visibility: hidden;
transition: height 0.2s ease-out, visibility 0s 0.2s;
}
.gyro #header .gnb > ul > li.open > ul {
visibility: visible;
transition-delay: 0s;
}
.gyro #header .gnb > ul > li > ul > li {
width: 100%;
background: #e8e8e8;
}
.gyro #header .gnb > ul > li > ul li a {
padding: 15px 36px;
border-top: 1px solid #d1d1d1;
font-size: 17px;
background-color: #e8e8e8;
}
.gyro #header .gnb > ul > li > ul > li:first-child > a {
border-top: 0;
}
/* third-level rows are prefixed with a dash, like the source */
.gyro #header .gnb > ul > li .depth2 > li > ul li a {
font-weight: 400;
}
.gyro #header .gnb > ul > li .depth2 > li > ul li a::before {
content: "-";
display: inline-block;
margin-right: 10px;
}
.gyro #header .gnb > ul > li.open > a {
border-top: 0;
background: #3f3f40;
color: #fff;
}
.gyro #header .gnb > ul > li.open > a::after {
transform: translateY(-30%) rotate(-135deg);
}
.gyro #headerSitemap {
display: none;
}
.gyro .pc_sitemap_btn {
display: none;
}
.gyro #header .m-menu-btn {
display: block;
position: absolute;
top: 23px;
right: 20px;
width: 42px;
height: 34px;
z-index: 100000;
cursor: pointer;
}
.gyro #header .m-menu-btn span {
position: absolute;
left: 0;
width: 100%;
height: 6px;
background: #fff;
transition: 0.3s;
}
.gyro #header .m-menu-btn span:nth-child(1) {
top: 50%;
margin-top: -3px;
}
.gyro #header .m-menu-btn span:nth-child(2) {
top: 0;
}
.gyro #header .m-menu-btn span:nth-child(3) {
bottom: 0;
}
.gyro #header:not(.fixed) .m-menu-btn:not(.on) span {
background: #fff;
}
.gyro #header.fixed .m-menu-btn:not(.on) span {
background: #333;
}
.gyro #header .m-menu-btn.on span {
background: #fff;
}
.gyro #header .m-menu-btn.on span:nth-child(1) {
opacity: 0;
}
.gyro #header .m-menu-btn.on span:nth-child(2) {
height: 2px;
transform: translateY(16px) rotate(-45deg);
}
.gyro #header .m-menu-btn.on span:nth-child(3) {
height: 2px;
transform: translateY(-16px) rotate(45deg);
}
}
@media (max-width: 767px) {
.gyro #header .header-bottom {
height: 55px;
}
.gyro #header .header-bottom > .lang-pc {
top: 12px;
right: 50px;
}
.gyro .lang-pc > a {
width: 54px;
background-size: 20px auto;
}
.gyro #header .m-menu-btn {
top: 15px;
width: 28px;
height: 23px;
}
.gyro #header .m-menu-btn span {
height: 3px;
}
.gyro #header .m-menu-btn span:nth-child(1) {
top: 10px;
margin-top: 0;
}
.gyro #header .m-menu-btn.on span:nth-child(2) {
transform: translateY(10.5px) rotate(-45deg);
}
.gyro #header .m-menu-btn.on span:nth-child(3) {
transform: translateY(-10.5px) rotate(45deg);
}
.gyro #header .m-lang {
top: 0;
height: 55px;
padding: 12px 0 0 20px;
}
.gyro #header .gnb > ul {
top: 55px;
height: calc(100% - 55px);
}
.gyro #header .gnb ul a {
padding-left: 20px;
}
.gyro #header .gnb > ul > li.has-sub > a::after {
top: 50%;
right: 20px;
width: 9px;
height: 9px;
}
.gyro #header .gnb > ul > li > a {
display: flex;
align-items: center;
height: 48px;
padding: 6px 40px 6px 20px;
font-size: 15px;
}
.gyro #header .gnb > ul > li > ul li a {
padding: 12px 20px;
font-size: 13px;
}
}
/* ==========================================================================
Section frame
========================================================================== */
.gyro #contents {
position: relative;
width: 100%;
}
.gyro .main_section {
padding: 110px 0;
}
@media (max-width: 767px) {
.gyro .main_section {
padding: 55px 0;
}
}
.gyro .main_section__header {
position: relative;
}
.gyro .outline-txt {
font-family: "Play", sans-serif;
font-weight: 700;
line-height: 1;
color: #fff;
opacity: 0.3;
-webkit-text-stroke: 1px #333;
}
/* ==========================================================================
01. Main visual slider
========================================================================== */
.gyro .main_visual {
position: relative;
}
.gyro .main_visual.hide .main_visual__info__wrap {
opacity: 0;
}
.gyro .main_visual__slider {
position: relative;
height: 100vh;
}
.gyro .slider_item {
position: absolute;
inset: 0;
height: 100vh;
opacity: 0;
transition: opacity 1s;
pointer-events: none;
}
.gyro .slider_item.is-active {
opacity: 1;
pointer-events: auto;
}
.gyro .slider_item .bg {
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transform: scale(1.2);
transition: transform 0.8s linear;
}
.gyro .slider_item .bg.on {
transform: scale(1);
transition: transform 5s linear;
}
.gyro .slider_item__inner {
position: relative;
z-index: 3;
display: table;
width: 100%;
height: 100%;
max-width: 1540px;
margin: 0 auto;
padding: 0 20px;
text-align: left;
color: #fff;
}
.gyro .slider_item__inner__txtbox {
display: table-cell;
padding-bottom: 120px;
font-size: 0;
vertical-align: middle;
}
.gyro .slider_item__inner__txtbox > * {
position: relative;
opacity: 0;
}
.gyro .main_visual.ready .slider_item.is-active .slider_item__inner__txtbox > * {
animation: gyroHeroText 0.7s ease-out both;
animation-delay: calc(var(--line, 0) * 0.2s);
}
@keyframes gyroHeroText {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.gyro .slider_item__inner__txtbox h2 {
font-family: "Play", sans-serif;
font-size: 65px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.5px;
}
.gyro .slider_item__inner__txtbox p {
max-width: 800px;
margin-top: 20px;
font-size: 30px;
font-weight: 400;
line-height: 1.8;
}
@media (max-width: 1199px) {
.gyro .main_visual__slider,
.gyro .slider_item {
height: 750px;
}
.gyro .slider_item__inner__txtbox {
padding-bottom: 50px;
}
.gyro .slider_item__inner__txtbox h2 {
font-size: 5.1vw;
}
.gyro .slider_item__inner__txtbox p {
font-size: 2.45vw;
}
}
@media (max-width: 767px) {
.gyro .main_visual__slider {
height: 520px;
overflow: hidden;
}
.gyro .slider_item {
height: 520px;
min-height: 360px;
}
}
@media (max-width: 575px) {
.gyro .slider_item__inner__txtbox h2 {
font-size: 32px;
}
.gyro .slider_item__inner__txtbox p {
font-size: 16px;
}
}
/* play/pause ring + dots */
.gyro .main_visual__info__wrap {
position: absolute;
top: 70%;
left: 20px;
display: flex;
flex-wrap: wrap;
width: 100%;
transition: 0.2s all ease-in-out;
}
@media (min-width: 1520px) {
.gyro .main_visual__info__wrap {
width: 1500px;
left: 50%;
margin-left: -750px;
}
}
.gyro .main_visual__info {
position: relative;
width: 48px;
height: 48px;
}
.gyro .main_visual__info::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 48px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
}
.gyro .main_visual__info__btn {
position: absolute;
top: 50%;
left: 50%;
z-index: 4;
transform: translate(-50%, -50%);
font-size: 0;
}
.gyro .main_visual__info__btn .slick-playback {
position: relative;
display: block;
width: 24px;
height: 24px;
color: #fff;
}
.gyro .main_visual__info__btn svg,
.gyro .main_visual__info .slick-progress {
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
transform: translate(-50%, -50%);
}
.gyro .main_visual__info .slick-progress {
top: 0;
left: 0;
width: 48px;
height: 48px;
transform: rotate(-270deg);
}
.gyro .main_visual__info .slick-progress circle {
fill: transparent;
stroke: rgba(255, 255, 255, 0.7);
stroke-width: 1;
stroke-dashoffset: 150.8;
animation: gyroRing 6s linear forwards;
animation-play-state: paused;
}
.gyro .main_visual__info .slick-progress.playing circle {
animation-play-state: running;
}
@keyframes gyroRing {
to {
stroke-dashoffset: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.gyro .main_visual__info .slick-progress circle {
animation: none;
}
}
.gyro #pagination {
position: relative;
width: 300px;
height: 48px;
margin-left: 20px;
}
@media (max-width: 575px) {
.gyro #pagination {
width: 200px;
}
}
.gyro #pagination ul {
position: absolute;
bottom: calc(50% - 5px);
display: flex;
font-size: 0;
}
.gyro #pagination li + li {
margin-left: 10px;
}
.gyro #pagination button {
display: block;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.3);
font-size: 0;
transition: 0.2s all ease-in-out;
}
.gyro #pagination li.on button {
background-color: #fff;
}
/* scroll hint */
.gyro .scroll_box {
position: absolute;
bottom: 2.8125rem;
left: 50%;
text-align: center;
transform: translateX(-50%);
}
.gyro .scroll_box > span {
display: block;
font-size: 0.875rem;
font-weight: 400;
color: #fff;
letter-spacing: 0;
transition: 0.2s all ease-in-out;
}
.gyro .scroll_box__ico {
position: relative;
width: 1.25rem;
height: 2rem;
margin: 0 auto 0.625rem;
border: 1px solid #fff;
border-radius: 0.625rem;
}
.gyro .scroll_box__ico span {
position: absolute;
top: 0.3125rem;
left: 50%;
width: 0.25rem;
height: 0.25rem;
background-color: #fff;
border-radius: 0.125rem;
transform: translateX(-50%);
animation: gyroScrollbox 1s linear infinite;
}
@keyframes gyroScrollbox {
0% {
top: 0.3125rem;
height: 0.25rem;
}
50% {
top: 0.3125rem;
height: 1.125rem;
}
75% {
top: 1.1875rem;
height: 0.25rem;
}
100% {
top: 1.1875rem;
height: 0.25rem;
}
}
.gyro .scroll_box a {
position: absolute;
inset: 0;
}
@media (min-width: 1200px) {
.gyro .scroll_box:hover > span {
padding-left: 5px;
letter-spacing: 5px;
}
}
/* ==========================================================================
02. Solutions (pinned wheel slider)
========================================================================== */
.gyro .main_section.section01 {
position: relative;
padding-bottom: 0;
}
.gyro .main_section.section01::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("/sites/gyrosoft/img/symbol.svg") no-repeat left -22% center / auto 798px;
opacity: 0.05;
}
@media (min-width: 768px) {
.gyro .main_section.section01::before {
background-attachment: fixed;
}
}
@media (max-width: 1199px) {
.gyro .main_section.section01::before {
background-position: left -22% bottom -12%;
background-size: 55% auto;
}
}
.gyro .main_section.section01 .main_section__header .bg-txt {
position: absolute;
bottom: 0;
left: 63%;
font-size: 176px;
}
@media (max-width: 1199px) {
.gyro .main_section.section01 .main_section__header .bg-txt {
right: 0;
left: auto;
font-size: 10.6667vw;
}
}
@media (max-width: 767px) {
.gyro .main_section.section01 .main_section__header .bg-txt {
display: none;
}
}
.gyro #js-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 4.375rem 0;
}
@media (min-width: 1200px) {
.gyro #js-wrapper {
min-height: 100vh;
padding: 110px 0 90px;
}
}
.gyro .swipe-section {
position: relative;
width: 100%;
/* Slick lays every slide out in one track, so the strip is as tall as its
tallest slide. A grid with all panels in the same cell does the same
without measuring: the hidden panel still holds its box. */
display: grid;
grid-template-columns: minmax(0, 100%);
}
.gyro .swipe-section .panel {
width: 100%;
grid-area: 1 / 1;
}
.gyro .swipe-section .panel:not(.is-active) {
visibility: hidden;
}
.gyro .img-col-area {
display: flex;
flex-wrap: wrap;
margin: 0 -0.5625rem;
}
.gyro .img-col-area > li {
width: 50%;
padding: 0 0.5625rem;
}
@media (max-width: 767px) {
.gyro .swipe-section .panel .img-col-area {
margin-top: 1.125rem;
}
}
.gyro .img-box {
position: relative;
overflow: hidden;
}
.gyro .img-box img {
position: absolute;
top: 50%;
width: 100%;
height: auto;
transform: translateY(-50%);
transition: 0.3s ease-in-out;
}
@media (min-width: 992px) {
.gyro .img-box:hover img {
transform: scale(1.3) translateY(-50%);
}
}
.gyro .img-box.top {
width: 100%;
height: 0;
padding-bottom: 46%;
}
.gyro .img-col-area > li .img-box {
height: 0;
padding-bottom: 217%;
}
@media (max-width: 767px) {
.gyro .img-col-area > li .img-box {
padding-bottom: 100%;
}
}
.gyro .panel__inner {
position: relative;
z-index: 5;
}
@media (min-width: 768px) {
.gyro .panel__inner .row > div:first-child {
padding-right: 20px;
}
}
@media (min-width: 992px) {
.gyro .panel__inner .row > div:first-child {
padding-right: 60px;
}
}
.gyro .panel__inner__conts {
position: relative;
margin-top: 70px;
}
.gyro .panel__inner__conts h3 {
margin-top: 10px;
}
.gyro .panel__inner__conts ul {
margin-top: 40px;
}
.gyro .panel__inner__conts a {
position: absolute;
top: 0;
right: 0;
}
@media (max-width: 767px) {
.gyro .panel__inner__conts {
margin-top: 40px;
margin-bottom: 30px;
}
.gyro .panel__inner__conts h3 {
padding-right: 50px;
}
}
/* source type ramp for the panel copy */
.gyro .panel__inner__conts .lead {
font-size: 1.875rem;
font-weight: 700;
/* the source sets no line-height here: `p` supplies 1.8 (1.6 ≤767px) */
color: #064274;
}
.gyro .panel__inner__conts h3 {
font-size: 2.813rem;
font-weight: 700;
line-height: 1.2;
}
.gyro .bullet_ul li {
position: relative;
padding-left: 0.9778rem;
line-height: 1.8;
}
.gyro .bullet_ul li + li {
margin-top: 0.2778em;
}
.gyro .bullet_ul li::before {
content: "";
position: absolute;
top: 0.6667em;
left: 0;
width: 0.4em;
height: 0.4em;
border-radius: 50%;
background-color: #064274;
}
.gyro .panel__inner__conts .bullet_ul {
font-size: 1.5rem;
font-weight: 600;
}
.gyro .panel__inner__conts .bullet_ul li {
line-height: 1.4;
}
.gyro .panel__inner__conts .bullet_ul li::before {
top: 0.5666em;
width: 0.3rem;
height: 0.3rem;
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
.gyro .panel__inner__conts {
margin-top: 4.8611vw;
}
.gyro .panel__inner__conts .lead {
font-size: 2.0833vw;
}
.gyro .panel__inner__conts h3 {
font-size: 3.125vw;
}
.gyro .panel__inner__conts .bullet_ul {
font-size: 1.6667vw;
}
.gyro .panel__inner__conts .circle-btn {
top: -10%;
width: 6.3889vw;
height: 6.3889vw;
}
.gyro .panel__inner__conts .circle-btn img {
width: 2.0139vw;
max-width: none;
}
}
/* mobile slider dots for the panels (slick's `.slick-dots` in the source) */
.gyro .panel-dots {
position: absolute;
bottom: -25px;
left: 0;
display: none;
justify-content: center;
width: 100%;
margin: 0;
font-size: 0;
}
.gyro .panel-dots li {
width: 10px;
height: 10px;
transition: 0.2s all ease-in-out;
}
.gyro .panel-dots li + li {
margin-left: 10px;
}
.gyro .panel-dots button {
width: 100%;
height: 100%;
padding: 0;
border-radius: 5px;
background-color: #ddd;
font-size: 0;
}
.gyro .panel-dots li.on button {
background-color: #064274;
}
@media (max-width: 767px) {
.gyro .panel-dots {
display: flex;
}
}
/* --- buttons ---------------------------------------------------------- */
.gyro .circle-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 5.75rem;
height: 5.75rem;
opacity: 0.6;
transition: opacity 0.2s;
}
.gyro .circle-btn::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #999;
border-radius: 50%;
}
@media (min-width: 992px) {
.gyro .circle-btn:hover {
opacity: 1;
}
.gyro .circle-btn:hover::before {
border: 2px dashed #064274;
animation: gyroCircleSpin 10s linear infinite;
}
}
@media (max-width: 767px) {
.gyro .circle-btn {
width: 4.375rem;
height: 4.375rem;
}
.gyro .circle-btn img {
max-width: 1.375rem;
}
}
.gyro .circle-more-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 5.75rem;
height: 5.75rem;
transition: opacity 0.2s;
}
.gyro .circle-more-btn::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #999;
border-radius: 50%;
}
.gyro .circle-more-btn .btn-txt {
position: absolute;
right: calc(100% - 15px);
font-size: 1.5rem;
white-space: nowrap;
transition: transform 0.2s;
}
.gyro .circle-more-btn img {
max-width: 1.3125rem;
}
.gyro .circle-more-btn.type_white {
color: #fff;
}
.gyro .circle-more-btn.type_white::before {
border-color: rgba(255, 255, 255, 0.3);
}
.gyro .circle-more-btn.type_white .btn-txt {
font-weight: 200;
}
@media (min-width: 992px) {
.gyro .circle-more-btn:hover::before {
border: 2px dashed #064274;
animation: gyroCircleSpin 10s linear infinite;
}
.gyro .circle-more-btn:hover .btn-txt {
transform: translateX(-25px);
}
.gyro .circle-more-btn.type_white:hover::before {
border-color: #fff;
}
}
@media (max-width: 767px) {
.gyro .circle-more-btn {
width: 4.375rem;
height: 4.375rem;
}
.gyro .circle-more-btn .btn-txt {
right: calc(100% - 7px);
font-size: 1.125rem;
}
}
@keyframes gyroCircleSpin {
to {
transform: rotate(360deg);
}
}
.gyro .r-box-btn {
position: relative;
display: flex;
align-items: center;
width: 21.25rem;
height: 3.75rem;
padding: 0 3.125rem;
border-radius: 0.625rem;
background-color: #064274;
color: #fff;
transition: 0.2s linear;
}
.gyro .r-box-btn img {
position: absolute;
right: 2.5rem;
transition: 0.2s linear;
}
@media (min-width: 992px) {
.gyro .r-box-btn:hover {
background-color: #0a6cbd;
}
.gyro .r-box-btn:hover img {
right: 1.875rem;
}
}
/* ==========================================================================
03. 구축사례
========================================================================== */
.gyro .bg_093b76 {
background-color: #093b76;
}
.gyro .main_section.section02 {
background-image: url("/sites/gyrosoft/img/bg_construction-case.png");
background-repeat: no-repeat;
background-position: bottom right;
background-size: 90% auto;
}
.gyro .main_section.section02 .main_section__header .btn-area {
margin-top: 20px;
}
.gyro .main_section.section02 .main_section__header .btn-area a {
margin-left: auto;
}
@media (min-width: 768px) {
.gyro .main_section.section02 .main_section__header p {
padding-right: 150px;
}
.gyro .main_section.section02 .main_section__header .btn-area {
position: absolute;
right: 0;
bottom: -25px;
margin-top: 0;
}
}
.gyro .main_section.section02 .section-title {
font-size: 4.375rem;
font-weight: 700;
line-height: 1.3;
color: #fff;
}
.gyro .main_section.section02 .section-label {
font-size: 1.875rem;
font-weight: 700;
color: #0b7ad5;
}
.gyro .main_section.section02 .section-desc {
font-size: 1.875rem;
font-weight: 300;
line-height: 1.3;
color: #fff;
}
.gyro .case-list {
display: flex;
flex-wrap: nowrap;
font-size: 0;
}
.gyro .case-list figure {
flex: 0 0 auto;
width: 25%;
margin: 40px 0 25px;
padding: 0 7px;
}
.gyro .case-list figure a {
display: block;
height: 100%;
}
.gyro .case-list figcaption {
font-size: 0.75rem;
padding: 20px 10px 3.125rem;
}
.gyro .case-list figcaption::before {
display: block;
font-size: 1.875rem;
font-weight: 600;
color: rgba(209, 209, 209, 0.5);
transition: 0.2s ease-in-out;
content: attr(data-case);
}
.gyro .case-thumb {
position: relative;
height: 0;
padding-bottom: 75.25%;
overflow: hidden;
border: 1px solid #dadada;
background-color: #fff;
}
.gyro .case-thumb img {
object-fit: contain;
transition: transform 0.3s;
}
.gyro .case-title {
display: -webkit-box;
height: 4rem;
margin-top: 0.9375rem;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 1.5rem;
font-weight: 700;
line-height: 2rem;
color: #fff;
opacity: 0.8;
transition: 0.2s ease-in-out;
}
.gyro .case-date {
margin-top: 0.9375rem;
font-size: 1.125rem;
color: rgba(209, 209, 209, 0.5);
}
@media (min-width: 992px) {
.gyro .case-list figure a:hover .case-thumb img {
transform: scale(1.1);
}
.gyro .case-list figure a:hover figcaption::before {
color: #6db9ec;
}
.gyro .case-list figure a:hover .case-title {
color: #fff;
opacity: 1;
}
}
@media (min-width: 1200px) {
.gyro .case-list {
margin: 0 -18px;
}
.gyro .case-list figure {
padding: 0 18px;
}
}
@media (max-width: 991px) {
.gyro .case-list figure {
width: 33.333333%;
}
}
@media (max-width: 767px) {
/* the source tightens its big vertical rhythm on phones */
.gyro .mt110,
.gyro .mt100,
.gyro .mt90 {
margin-top: 4.375rem !important;
}
}
@media (max-width: 767px) {
/* the source drops body copy to a tighter leading on phones */
.gyro p {
line-height: 1.6;
}
.gyro .case-list figure {
width: 50%;
margin-top: 0;
}
.gyro .case-list figcaption {
padding: 10px 10px 3.125rem;
}
}
/* ==========================================================================
04. Notice
========================================================================== */
.gyro .main_section.section03 {
position: relative;
overflow: hidden;
}
.gyro .main_section.section03 .inner {
position: relative;
z-index: 2;
}
.gyro .main_section.section03::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 600px;
height: 600px;
background: url("/sites/gyrosoft/img/symbol.svg") no-repeat right bottom / auto 100%;
opacity: 0.05;
}
@media (min-width: 992px) {
.gyro .main_section.section03::before {
transform: translateX(25%) translateY(15%);
}
}
@media (max-width: 991px) {
.gyro .main_section.section03::before {
background-position: right -30% bottom -30%;
background-size: 50% auto;
}
}
.gyro .main_section.section03 .bg-txt {
position: absolute;
bottom: -4.5%;
left: -1%;
font-size: 183px;
opacity: 0.2;
}
.gyro .main_section.section03 .bg-txt span {
display: inline-block;
margin-left: 18%;
}
@media (max-width: 991px) {
.gyro .main_section.section03 .bg-txt {
display: none;
}
}
.gyro .main_section.section03 .section-title {
font-family: "Play", sans-serif;
font-size: 4.6875rem;
font-weight: 700;
line-height: 1.3;
}
.gyro .main_section.section03 .section-desc {
font-size: 1.875rem;
font-weight: 600;
line-height: 1.3;
}
.gyro .notice-list {
display: flex;
flex-wrap: wrap;
height: 100%;
counter-reset: number 0;
}
.gyro .notice-list .item {
width: 100%;
padding: 1.5rem 0;
}
@media (min-width: 576px) {
.gyro .notice-list .item {
width: 50%;
padding: 2.8125rem;
}
.gyro .notice-list .item:nth-child(1),
.gyro .notice-list .item:nth-child(2) {
border-bottom: 1px solid #ddd;
}
.gyro .notice-list .item:nth-child(odd) {
border-right: 1px solid #ddd;
}
}
@media (max-width: 575px) {
.gyro .notice-list .item {
border-bottom: 1px solid #ddd;
}
}
.gyro .notice-list .item a {
display: block;
}
.gyro .notice-list .item a::before {
display: block;
counter-increment: number 1;
content: "0" counter(number);
font-family: "Play", sans-serif;
font-size: 2.1875rem;
font-weight: 700;
color: #0a6cbd;
opacity: 0.2;
transition: 0.2s ease-in-out;
}
.gyro .notice-subject {
display: -webkit-box;
height: 8rem;
margin-top: 1.875rem;
overflow: hidden;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
font-size: 1.375rem;
font-weight: 700;
line-height: 2rem;
white-space: pre-wrap;
opacity: 0.6;
transition: 0.2s ease-in-out;
}
.gyro .notice-date {
margin-top: 0.9375rem;
font-size: 1.125rem;
font-weight: 300;
text-align: left;
color: #a6a6a6;
}
@media (min-width: 992px) {
.gyro .notice-list .item a:hover::before,
.gyro .notice-list .item a:hover .notice-subject {
opacity: 1;
}
}
@media (max-width: 575px) {
.gyro .notice-subject {
height: 4rem;
-webkit-line-clamp: 2;
}
}
/* ==========================================================================
05. Quick menu
========================================================================== */
.gyro .main_section.section04 {
padding: 0;
background-image: url("/sites/gyrosoft/img/bg_main-quick_01.jpg");
background-repeat: no-repeat;
background-position: bottom center;
background-size: auto;
}
.gyro .main_section.section04 .main_section__header {
padding: 180px 0 150px;
}
.gyro .main_section.section04 .section-lead {
font-size: 2.5625rem;
font-weight: 300;
line-height: 1.6;
color: #fff;
}
@media (min-width: 1921px) {
.gyro .main_section.section04 {
background-size: 2560px auto;
}
}
@media (max-width: 1199px) {
.gyro .main_section.section04 {
background-size: cover;
}
.gyro .main_section.section04 .main_section__header {
padding: 100px 0;
}
}
@media (max-width: 767px) {
.gyro .main_section.section04 .main_section__header {
padding: 60px 0;
}
.gyro .main_section.section04 .section-lead {
font-size: 1.75rem;
}
}
@media (max-width: 575px) {
.gyro .main_section.section04 .main_section__header {
padding: 40px 0;
}
}
.gyro .main-quickmenu__list {
background-color: rgba(0, 0, 0, 0.4);
}
.gyro .main-quickmenu__list .row {
border: 1px solid rgba(255, 255, 255, 0.3);
border-width: 1px 1px 0;
text-align: center;
}
.gyro .main-quickmenu__list .row > div:nth-child(2) {
border: 1px solid rgba(255, 255, 255, 0.3);
}
@media (min-width: 768px) {
.gyro .main-quickmenu__list .row > div:nth-child(2) {
border-width: 0 1px;
}
}
.gyro .main-quickmenu__list .item {
position: relative;
display: block;
}
@media (min-width: 768px) {
.gyro .main-quickmenu__list .item {
display: flex;
align-items: center;
justify-content: center;
height: 425px;
}
}
.gyro .main-quickmenu__list .item::before,
.gyro .main-quickmenu__list .item::after {
content: "";
position: absolute;
inset: 0;
transition: background 0.2s ease;
}
.gyro .main-quickmenu__list .item::before {
z-index: 1;
background-color: rgba(0, 0, 0, 0.4);
}
@media (max-width: 1540px) {
.gyro .main-quickmenu__list .item::before {
opacity: 0;
}
}
.gyro .main-quickmenu__list .item::after {
background-image: url("/sites/gyrosoft/img/bg_main-quick_01.jpg");
background-repeat: no-repeat;
background-position: bottom center;
background-size: auto;
}
@media (max-width: 1540px) {
.gyro .main-quickmenu__list .item::after {
display: none;
}
}
.gyro .main-quickmenu__list .row > div:nth-child(1) .item::after {
background-position: right -1209px bottom;
}
.gyro .main-quickmenu__list .row > div:nth-child(3) .item::after {
background-position: left -1209px bottom;
}
@media (min-width: 1921px) {
.gyro .main-quickmenu__list .item::after {
background-size: 2560px auto;
}
.gyro .main-quickmenu__list .row > div:nth-child(1) .item::after {
background-position: right -1530px bottom;
}
.gyro .main-quickmenu__list .row > div:nth-child(3) .item::after {
background-position: left -1530px bottom;
}
}
.gyro .main-quickmenu__list .item__inner {
position: relative;
z-index: 2;
}
@media (min-width: 1541px) {
.gyro .main-quickmenu__list .item:hover::before {
background-color: rgba(0, 0, 0, 0.6);
}
}
@media (max-width: 1540px) {
.gyro .main-quickmenu__list .item:hover::before {
opacity: 1;
}
}
@media (min-width: 992px) {
.gyro .main-quickmenu__list .item:hover::after {
filter: blur(7px);
}
}
.gyro .main-quickmenu__list .quick-label {
font-family: "Play", sans-serif;
font-size: 2.5rem;
font-weight: 600;
line-height: 1.3;
color: #6db9ec;
}
.gyro .main-quickmenu__list .quick-sub {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.3;
color: #fff;
}
@media (max-width: 767px) {
.gyro .main-quickmenu__list {
padding: 20px 0;
}
.gyro .main-quickmenu__list .row {
border-width: 1px;
}
.gyro .main-quickmenu__list .row > div:nth-child(2) {
border-width: 1px 0;
}
.gyro .main-quickmenu__list .item {
padding: 30px 0;
}
.gyro .main-quickmenu__list .quick-label {
font-size: 2rem;
}
.gyro .main-quickmenu__list .quick-sub {
font-size: 1.25rem;
}
}
/* ==========================================================================
Footer
========================================================================== */
.gyro #footer {
position: relative;
width: 100%;
background: #fff;
}
.gyro .footer-bottom {
position: relative;
padding: 3.4375rem 0 2.5rem;
font-size: 0;
}
.gyro .footer-bottom .logo img {
width: 218px;
}
.gyro .footer-bottom .d-flex {
display: flex;
flex-wrap: wrap;
}
.gyro .footer-bottom address {
display: inline-block;
width: 100%;
font-size: 18px;
font-weight: 100;
line-height: 1.3;
color: #333;
vertical-align: middle;
}
.gyro .footer-bottom address p {
font-size: 0;
}
.gyro .footer-bottom address p span {
display: inline-block;
position: relative;
font-size: 18px;
}
.gyro .footer-bottom address p span::after {
content: "";
display: inline-block;
width: 1px;
height: 12px;
margin: 0 0.9375rem;
opacity: 0.5;
background-color: #333;
}
.gyro .footer-bottom address p span:last-child::after {
display: none;
}
.gyro .footer-bottom address a:hover,
.gyro .footer-bottom-link a:hover {
color: #0a6cbd;
}
.gyro .footer-bottom .right dt {
font-size: 30px;
}
.gyro .footer-bottom .right h3 {
font-size: 20px;
letter-spacing: -0.9px;
}
.gyro .footer-bottom .right h3 span {
margin-right: 15px;
}
.gyro .footer-bottom .right h3 b {
font-size: 34px;
}
.gyro .footer-bottom .right p {
font-size: 18px;
}
@media (min-width: 1200px) {
.gyro .footer-bottom .d-flex .left {
width: calc(100% - 300px);
}
.gyro .footer-bottom .d-flex .right {
width: 300px;
}
}
@media (max-width: 1199px) {
.gyro .footer-bottom .d-flex {
flex-direction: column-reverse;
}
.gyro .footer-bottom .d-flex .right {
margin-bottom: 40px;
}
}
.gyro .footer-bottom-link li {
position: relative;
display: inline-block;
margin: 0 10px;
}
.gyro .footer-bottom-link li::before {
content: "";
position: absolute;
top: 50%;
left: -10px;
width: 1px;
height: 12px;
margin-top: -6px;
opacity: 0.5;
background-color: #333;
}
.gyro .footer-bottom-link li:first-child {
margin-left: 0;
}
.gyro .footer-bottom-link li:first-child::before {
display: none;
}
.gyro .footer-bottom-link li a {
font-size: 18px;
font-weight: 700;
color: #333;
}
.gyro .footer-copyright {
padding: 1.875rem 0;
border-top: 1px solid #ddd;
}
.gyro .footer-copyright .copyright {
font-size: 16px;
font-weight: 400;
line-height: 1.3;
color: #333;
opacity: 0.6;
}
@media (max-width: 991px) {
.gyro #footer .logo img {
max-width: 12.3125rem;
}
.gyro .footer-bottom {
text-align: center;
}
.gyro .footer-bottom address .company-name {
display: block;
}
.gyro .footer-bottom address p span {
margin: 0 15px;
font-size: 1.125rem;
}
.gyro .footer-bottom address p span::after {
display: none;
}
.gyro .footer-bottom .right h3 {
font-size: 1.25rem;
}
.gyro .footer-bottom .right h3 span {
margin-right: 0.9375rem;
}
.gyro .footer-bottom .right h3 b {
font-size: 2.125rem;
}
.gyro .footer-bottom .right p {
font-size: 1.125rem;
}
.gyro .footer-bottom-link li a {
font-size: 1.125rem;
}
.gyro .footer-copyright {
text-align: center;
}
.gyro .footer-copyright .copyright {
font-size: 1rem;
}
}
/* ==========================================================================
Floating buttons — `#quickBtn` and `.top-btn`
`custom.js` → `UI.TopBtn()` drives both, and the states are classes:
the tab is hidden for 600ms, `fadeIn(200)` reveals it, and the fade’s
callback adds `.on` — which is what moves it to its resting offset (with a
one-shot wobble). `.fixed` is added once the viewport reaches the footer, and
hands the button to the footer (`position: absolute; top: -…`) so it scrolls
away with it. Offsets differ per breakpoint, and again under `body.main`.
========================================================================== */
.gyro #quickBtn {
position: fixed;
right: 30px;
bottom: 150px;
z-index: 5;
display: none;
transition: 0.2s bottom ease-in-out, 0.4s background ease-in-out;
}
.gyro #quickBtn .r-box-btn {
width: 16.25rem;
line-height: 1.2;
}
/* jQuery’s `fadeIn(200)` — visible while the fade runs, `.on` only once it ends. */
.gyro #quickBtn.fading {
display: block;
animation: gyroFadeIn 0.2s linear 1;
}
.gyro #quickBtn.on {
display: block;
bottom: 100px;
animation: gyroWobble 1s ease-in-out 1;
}
.gyro #quickBtn.fixed {
position: absolute;
top: -100px;
bottom: auto;
}
@media (min-width: 1921px) {
.gyro #quickBtn {
bottom: 170px;
}
.gyro #quickBtn.on {
bottom: 130px;
}
.gyro #quickBtn.fixed {
top: -130px;
}
}
@media (max-width: 1199px) {
.gyro #quickBtn {
right: 20px;
}
}
@media (max-width: 767px) {
.gyro #quickBtn {
right: 17px;
bottom: 100px;
}
.gyro #quickBtn .r-box-btn {
width: 4.125rem;
height: auto;
padding: 0.3rem 0.5rem 2.5rem;
justify-content: center;
text-align: center;
font-size: 10px !important;
}
.gyro #quickBtn .r-box-btn img {
right: 1.5rem;
bottom: 10px;
}
.gyro #quickBtn.on {
bottom: 70px;
}
.gyro #quickBtn.fixed {
top: -70px;
}
}
@media (min-width: 768px) {
/* The main page parks both buttons lower; the page root carries `main`. */
.gyro.main #quickBtn {
bottom: 50px;
}
.gyro.main #quickBtn.on {
bottom: 30px;
}
.gyro.main #quickBtn.fixed {
top: -30px;
}
}
.gyro .top-btn {
position: fixed;
right: 30px;
bottom: 50px;
z-index: 999;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #0d1a27;
font-size: 16px;
line-height: 60px;
color: #fff;
text-align: center;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
transition: 0.2s bottom ease-in-out, 0.4s background ease-in-out;
}
.gyro .top-btn.fading {
animation: gyroFadeIn 0.2s linear 1;
}
.gyro .top-btn.on {
bottom: 30px;
animation: gyroWobble 1s ease-in-out 1;
}
.gyro .top-btn.fixed {
position: absolute;
top: -30px;
bottom: auto;
}
@media (max-width: 1199px) {
.gyro .top-btn {
right: 20px;
}
.gyro .top-btn.on {
bottom: 20px;
}
}
@media (max-width: 767px) {
.gyro .top-btn {
width: 40px;
height: 40px;
font-size: 11px;
line-height: 40px;
}
.gyro .top-btn.fixed {
top: -20px;
}
}
@media (min-width: 1921px) {
.gyro .top-btn {
width: 88px;
height: 88px;
line-height: 88px;
}
.gyro .top-btn.fixed {
top: -44px;
}
}
@media (min-width: 768px) {
/* the source scopes this to `body.main`; here the page root carries that class */
.gyro.main .top-btn {
display: none !important;
}
}
@keyframes gyroFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes gyroWobble {
16.65% {
transform: translateY(8px);
}
33.3% {
transform: translateY(-6px);
}
49.95% {
transform: translateY(4px);
}
66.6% {
transform: translateY(-2px);
}
83.25% {
transform: translateY(1px);
}
100% {
transform: translateY(0);
}
}
/* ==========================================================================
Section headings
========================================================================== */
.gyro .main_section.section01 .section-title,
.gyro .main_section.section03 .section-title {
font-family: "Play", sans-serif;
font-size: 4.6875rem;
font-weight: 700;
line-height: 1.3;
}
.gyro .main_section .section-desc {
font-size: 1.875rem;
font-weight: 600;
line-height: 1.3;
}
/* ==========================================================================
Mobile typography ramp — the source overrides its own .fs_* utilities with
!important at 767px and again at 440px, so this block mirrors that.
========================================================================== */
@media (max-width: 767px) {
.gyro .main_section .section-title {
font-size: 3.125rem !important;
}
.gyro .main_section .section-label {
font-size: 1.5rem !important;
}
.gyro .main_section .section-desc {
font-size: 1.5rem !important;
}
.gyro .main_section.section04 .section-lead {
font-size: 2rem !important;
}
.gyro .panel__inner__conts .lead {
font-size: 1.5rem;
}
.gyro .panel__inner__conts h3 {
font-size: 2.125rem;
}
.gyro .panel__inner__conts .bullet_ul {
font-size: 1.25rem !important;
}
.gyro .main-quickmenu__list .quick-label {
font-size: 2rem !important;
}
.gyro .main-quickmenu__list .quick-sub {
font-size: 1.75rem;
}
}
@media (max-width: 440px) {
.gyro .main_section .section-title {
font-size: 2.375rem !important;
}
.gyro .main_section.section02 .section-title {
font-size: 2.25rem !important;
}
.gyro .main_section .section-desc,
.gyro .main_section .section-label {
font-size: 1.375rem !important;
}
.gyro .main_section.section04 .section-lead {
font-size: 1.75rem !important;
}
.gyro .panel__inner__conts .lead {
font-size: 1.375rem;
}
.gyro .panel__inner__conts .bullet_ul {
font-size: 1rem !important;
}
.gyro .panel__inner__conts h3 {
font-size: 1.875rem;
}
.gyro .main-quickmenu__list .quick-label {
font-size: 1.75rem !important;
}
.gyro .main-quickmenu__list .quick-sub {
font-size: 1.375rem;
}
}
/* case carousel viewport + dots (slick in the source) */
.gyro .case-viewport {
position: relative;
}
.gyro .case-clip {
overflow: hidden;
}
.gyro .case-list {
transition: transform 0.4s ease;
}
.gyro .thumb-wrap {
margin: 0;
}
.gyro .case-dots {
position: absolute;
bottom: -25px;
left: 0;
display: flex;
justify-content: center;
width: 100%;
margin: 0;
font-size: 0;
}
.gyro .case-dots li {
width: 10px;
height: 10px;
transition: 0.2s all ease-in-out;
}
.gyro .case-dots li + li {
margin-left: 10px;
}
.gyro .case-dots button {
width: 100%;
height: 100%;
padding: 0;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.3);
font-size: 0;
}
.gyro .case-dots li.on button {
background-color: #fff;
}
@media (min-width: 992px) {
.gyro .case-list {
transition: none;
}
}
/* board (notice + case lists share the source's --fc board wrapper) */
.gyro .board-wrap--fc {
width: 100%;
padding: 0;
font-size: 1rem;
color: #606060;
}
@media (max-width: 767px) {
.gyro .board-wrap--fc {
font-size: 12px;
line-height: 1;
}
}
/* body-level rules the source applies outside #wrapper */
@media (min-width: 321px) {
body {
overflow-x: hidden;
}
}
.gyro #wrapper {
max-width: 2560px;
margin: 0 auto;
overflow: hidden;
background: #fff;
letter-spacing: -0.5px;
}
.gyro #quickBtn .r-box-btn {
font-size: 1.25rem;
font-weight: 600;
}
.gyro .main-quickmenu__list .item__inner .icon {
display: inline;
}
.gyro .main-quickmenu__list .item__inner .icon img {
display: inline;
height: auto;
vertical-align: middle;
}