@charset "UTF-8";
.bx-wrapper {
position: relative; padding: 0;
*zoom: 1;
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.bx-wrapper img {
max-width: 100%;
display: block;
}
.bxslider {
margin: 0;
padding: 0;
}
ul.bxslider {
list-style: none;
}
.bx-viewport { -webkit-transform: translatez(0);
} .bx-wrapper { }
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
} .bx-wrapper .bx-loading {
min-height: 50px;
background: url(//www.attic-bike.com/wp-content/themes/attic_2023/img/slider_loader.gif) center center no-repeat #ffffff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
} .bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
background: #000;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
vertical-align: bottom;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager-item {
font-size: 0;
line-height: 0;
} .bx-wrapper .bx-prev {
left: 10px;
background: url(//www.attic-bike.com/wp-content/themes/attic_2023/img/slider_controls.png) no-repeat 0 -32px;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
background-position: 0 0;
}
.bx-wrapper .bx-next {
right: 10px;
background: url(//www.attic-bike.com/wp-content/themes/attic_2023/img/slider_controls.png) no-repeat -43px -32px;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
} .bx-wrapper .bx-controls-auto {
text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url(//www.attic-bike.com/wp-content/themes/attic_2023/img/slider_controls.png) -86px -11px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url(//www.attic-bike.com/wp-content/themes/attic_2023/img/slider_controls.png) -86px -44px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
background-position: -86px -33px;
} .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
} .bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}
.visual-area .bx-wrapper .bx-viewport { background-repeat: no-repeat;
background-position: center center;
background-size: auto;
}
  .wrap-mv {
background-image: url(//www.attic-bike.com/wp-content/themes/attic_2023/img-2022/mv/bg-mv_2507_sm.webp);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
position: relative;
}
.wrap-mv .wrap-img {
position: relative;
z-index: 100;
}
@media (min-width: 992px) {
.wrap-mv {
background-image: url(//www.attic-bike.com/wp-content/themes/attic_2023/img-2022/mv/bg-mv_2507.webp);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
}
.wrap-mv .wrap-img {
position: relative;
z-index: 100;
}
}
.mv-scroll {
position: relative;
background: linear-gradient(0deg, #ffffff calc(50% - 14px), #F7F7F7 calc(50% - 14px));
}
.mv-scroll .scroll-line {
display: block;
width: 1px;
height: 97px;
background-color: rgba(255, 255, 255, 0.1);
position: relative;
z-index: 100;
}
.mv-scroll .scroll-line::after {
display: block;
content: "";
width: 1px;
height: 97px;
background-color: #bac6d2;
position: absolute;
z-index: 200;
animation: pathmove 1.4s ease-in-out infinite;
opacity: 0;
overflow: hidden;
}
.mv-scroll .scroll-moji {
margin-top: -64px;
position: relative;
z-index: 100;
}
.wrap-img img.img-cover {
-o-object-fit: cover;
object-fit: cover;
}
.wrap-text-icon {
position: relative;
z-index: 10;
}
.wrap-text-icon .text-icon {
display: block;
margin-top: -15px;
}
.wrap-text-icon .text-icon span {
display: inline-block;
padding: 8px 24px 0px;
width: auto;
min-width: 147px;
height: 33px;
border: 1px solid #F2F2F2;
background-color: #ffffff;
}
@keyframes pathmove {
0% {
height: 0;
top: 0;
opacity: 0;
}
30% {
height: 58px;
opacity: 1;
}
100% {
height: 0;
top: 97px;
opacity: 0;
}
}
.block-mv {
width: 100%;
height: calc(100vh - 120px);
position: relative;
background-color: #000000;
}
.block-mv figure {
width: 100%;
height: 100%;
}
.block-mv figure img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center center;
object-position: center center;
}
.block-mv .box {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
@keyframes mvScroll {
0% {
height: 0;
top: 0;
opacity: 0;
}
30% {
height: 30px;
opacity: 1;
}
100% {
height: 0;
top: 50px;
opacity: 0;
}
}
.block-mv .mv_scroll {
position: absolute;
left: 50%;
bottom: 0;
height: 50px;
}
.block-mv .mv_scroll span {
position: absolute;
top: -20px;
transform: translateX(-50%);
color: #eee;
}
.block-mv .mv_scroll::after {
content: "";
position: absolute;
top: 0;
width: 1px;
height: 40px;
background: #ffffff;
animation: mvScroll 1.4s ease-in-out infinite;
opacity: 0;
}
.block-mv .wrap-btn {
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
}
.block-mv .wrap-btn .btn {
border: 1px solid rgba(255, 255, 255, 0.5);
}
.block-mv .wrap-btn .btn:hover {
border: 1px solid rgba(0, 0, 0, 0.01);
}
@media screen and (min-width: 768px) {
.block-mv .container .inner {
position: absolute;
top: 50%;
bottom: auto;
transform: translateY(-40%);
}
.block-mv.sec-mv .container .inner {
transform: translateY(0%);
}
}
@media screen and (min-width: 992px) {
.block-mv .container .inner {
position: absolute;
top: 50%;
bottom: auto;
transform: translateY(-40%);
}
.block-mv.sec-mv .container .inner {
transform: translateY(0%);
}
}
.block-mv .or-fs-ttl-en {
font-size: clamp(var(--pxtoem-60px), 9vw, var(--pxtoem-140px));
}
.block-mv .or-fs-3 {
font-size: clamp(var(--pxtoem-24px), 2.6vw, var(--pxtoem-32px));
}
.block-mv .mv_svg {
display: block;
width: clamp(250px, 50vw, 480px);
margin-top: clamp(-32px, -13vw, -250px);
}
.block-mv .mv_svg img {
transform: translateX(clamp(32px, 13vw, 250px));
} @media (min-width: 992px) {
#welcome {
position: relative;
height: 900px;
background-image: url(//www.attic-bike.com/wp-content/themes/attic_2023/img-2022/bg-fitting.jpg);
background-size: cover;
background-position: center center;
}
#welcome .add-filter {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, #48525d 0%, rgba(56, 60, 75, 0) 50%);
z-index: 10;
top: 0;
}
#welcome .container {
position: relative;
z-index: 100;
}
} #news {
padding-top: 48vw;
background-image: url(//www.attic-bike.com/wp-content/themes/attic_2023/img-2022/bg-news.jpg);
background-size: 100%;
background-size: auto 60vw;
background-position: top center;
background-repeat: no-repeat;
position: relative;
}
#news .wrap-bg-white {
position: relative;
z-index: 100;
}
#news .wrap-bg-white .inner.bg-white {
border-radius: 40px 0 0 0;
}
#news .box-bg {
height: 20vw;
position: absolute;
right: 0;
top: 48vw;
z-index: 90;
}
@media (min-width: 768px) {
#news {
padding-top: 26vw;
background-image: url(//www.attic-bike.com/wp-content/themes/attic_2023/img-2022/bg-news.jpg);
background-size: 100%;
background-size: 100vw auto;
background-position: top center;
background-repeat: no-repeat;
}
#news .box-bg {
height: 20vw;
position: absolute;
right: 0;
top: 26vw;
z-index: 90;
}
#news .inner.bg-white {
border-radius: 40px 0 0 0;
}
} #contactus { }
#contactus .container {
max-width: 768px;
}
#contactus .box {
border-right: 1px solid #D8D8D8;
border-bottom: none;
text-align: center;
flex: 1;
}
#contactus .box:last-child {
border-right: none;
}
@media (min-width: 768px) {
#contactus .box {
border-right: 1px solid #D8D8D8;
border-bottom: none;
text-align: center;
flex: 1;
}
#contactus .box:nth-child(1) {
border-left: 1px solid #D8D8D8;
}
#contactus .box:last-child {
border-right: 1px solid #D8D8D8;
}
} #faq .accordion-item button .title-question::before {
display: inline-block;
content: "Q";
width: 23px;
height: 23px;
margin-right: 5px;
margin-bottom: 2px;
border-radius: 100%;
background-color: #055EB9;
color: #ffffff;
font-weight: 300;
text-align: center;
line-height: 1.8;
font-family: "Roboto Condensed", sans-serif;
} .slick-dots {
display: flex;
justify-content: center;
}
.slick-dots li {
display: block;
margin: 0 8px;
width: 8px;
height: 8px;
border-radius: 100%;
background-color: #cccccc;
}
.slick-dots li.slick-active {
background-color: #686868;
}
.slick-dots li button {
display: none;
}
.slide-arrow {
position: absolute;
bottom: -6px;
color: #cccccc;
}
.prev-arrow {
left: calc(50% - 64px);
}
.next-arrow {
right: calc(50% - 64px);
}