@charset "UTF-8";
.top-slide-wrap {
width: 100%;
height: calc(100vh - 100px);
position: relative;
}
.top-slide-wrap > .top-slide {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
.top-slide-wrap > .top-slide:after {
content: "";
width: 100%;
height: 100%;
z-index: 1;
position: absolute;
top: 0;
left: 0;
background: url(../images/index/slide-shadow.png) no-repeat left center;
background: -webkit-image-set(url(../images/index/slide-shadow.png) 1x, url(../images/index/slide-shadow@2x.png) 2x) no-repeat left center;
background-size: 100% 100%;
}
.top-slide-wrap > .top-slide .slide-content {
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
.top-slide-wrap > .top-slide .slide-content li {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
overflow: hidden;
transition: width 2s;
z-index: 1;
}
.top-slide-wrap > .top-slide .slide-content li.current {
width: 100%;
transition: width 0s;
z-index: 0;
}
.top-slide-wrap > .top-slide .slide-content li .slide-image {
display: block;
position: absolute;
top: 50%;
left: 0;
transform-origin: left top;
transform: rotate(-45deg);
background-size: cover;
}
.top-slide-wrap > .top-slide .slide-nav {
position: absolute;
z-index: 2;
right: 4.75%;
bottom: 0;
margin-bottom: 28px;
z-index: 2;
}
.top-slide-wrap > .top-slide .slide-nav ul {
display: flex;
}
.top-slide-wrap > .top-slide .slide-nav ul li {
color: #fff;
margin: 0 7px;
padding: 5px;
transition: color 0.2s;
}
.top-slide-wrap > .top-slide .slide-nav ul li.current, .top-slide-wrap > .top-slide .slide-nav ul li:hover {
cursor: pointer;
color: #0067CC;
}
.top-slide-wrap > .top-slide .slide-text {
--font-multiplier: 1;
--left-multiplier: 1;
position: absolute;
z-index: 2;
top: 20.4444444444vh;
left: calc(7.5625% * var(--left-multiplier));
display: flex;
flex-direction: column;
align-items: flex-start;
}
@media print, screen and (min-width: 769px) {
.top-slide-wrap > .top-slide .slide-text {
--font-multiplier: 1.2;
}
}
@media print and (max-width: 1160px), screen and (min-width: 769px) and (max-width: 1160px) {
.top-slide-wrap > .top-slide .slide-text {
--left-multiplier: 0.6;
--font-multiplier: 1.1;
}
}
@media print and (max-width: 970px), screen and (min-width: 769px) and (max-width: 970px) {
.top-slide-wrap > .top-slide .slide-text {
--font-multiplier: 1;
}
}
.top-slide-wrap > .top-slide .slide-text li {
white-space: nowrap;
line-height: 1.4em;
letter-spacing: 0.05em;
font-size: calc(1.625rem * var(--font-multiplier));
background: linear-gradient(90deg, #00BAFF, #0067CC);
font-weight: bold;
color: #fff;
display: block;
overflow: hidden;
width: 0;
transition: width 0.5s;
}
.top-slide-wrap > .top-slide .slide-text li .text-inner {
display: inline-block;
padding: 0.3846153846em 0.9615384615em;
}
.top-slide-wrap > .top-slide .slide-text li br {
display: none;
}
.top-slide-wrap > .top-slide .slide-text li:nth-of-type(2) {
margin-left: 2.3076923077em;
margin-top: 1.0384615385em;
}
@media (max-width: 850px) {
.top-slide-wrap > .top-slide .slide-text {
left: 1%;
}
.top-slide-wrap > .top-slide .slide-text li:nth-of-type(2) {
margin-left: 1.1538461538em;
}
}
.top-slide-wrap .slide-scroll-box {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
z-index: 1;
text-align: center;
}
.top-slide-wrap .slide-scroll-box .slide-scroll {
display: inline-block;
padding: 10px;
}
.top-slide-wrap .slide-scroll-box .slide-scroll:hover {
cursor: pointer;
}


@media (max-width: 768px) {
.top-slide-wrap {
overflow: hidden;
height: 70vh;
}
.top-slide-wrap > .top-slide {
height: 100%;
overflow: visible;
}
.top-slide-wrap > .top-slide:after {
background-size: auto 100%;
}
.top-slide-wrap > .top-slide .slide-nav {
width: 100%;
right: auto;
left: 0;
margin-bottom: 8px;
}
.top-slide-wrap > .top-slide .slide-nav ul {
justify-content: center;
}
.top-slide-wrap > .top-slide .slide-nav ul li {
margin: 0 4px;
font-size: 0.875rem;
}
.top-slide-wrap > .top-slide .slide-text {
top: 100%;
left: 0;
width: 100%;
display: block;
text-align: center;
background: linear-gradient(90deg, #00BAFF, #0067CC);
box-sizing: border-box;
padding-top: 30px;
height: 285px;
}
.top-slide-wrap > .top-slide .slide-text li {
background: none;
width: 100% !important;
margin: 0 !important;
white-space: pre-wrap;
padding: 0;
font-size: 1.125rem;
line-height: 1.75em;
transition: all 0s;
}
.top-slide-wrap > .top-slide .slide-text li br {
display: block;
}
.top-slide-wrap .slide-scroll-box {
margin-bottom: 60px;
}
.top-slide-wrap .slide-scroll-box .slide-scroll img {
width: 15px;
height: auto;
}
}