@charset "UTF-8";

/*----------------------------------------
 equipment
----------------------------------------*/


.modelroom_bg{
background-image: url(../images/modelroom_bg.jpg);
background-size: 100%;
background-position: bottom center;
background-repeat: repeat-y;
}

.modelroom_box {
width: 100%;
margin: 0 0 80px 0;
}

.modelroom_box .thumbnail {
line-height: 0 !important;
font-size: 0 !important;
}

.modelroom_box .thumbnail .slick-track {
transform: unset !important;
}

.modelroom_box .thumbnail div {
width: 100%;
}

.modelroom_box .thumbnail-img {
width: 100%;
border: 2px solid #fff;
position: relative !important;
}

.modelroom_box .thumbnail-img img.slide_text {
position: absolute;
left: 0;
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

.modelroom_box .thumbnail-img img.slide_img {
opacity: 0.3;
transition: opacity .3s linear;
cursor: pointer;
}

.modelroom_box .thumbnail .slick-current .thumbnail-img {
border: 2px solid #002738;
}

.modelroom_box .thumbnail .slick-current .thumbnail-img img.slide_img {
opacity: 1;
}

.modelroom_box .thumbnail .slick-current .thumbnail-img img.slide_text {
display: none;
}

.slider{
position: relative;
}

.modelroom_box .slick-img {
width: 100%;
position: relative !important;
}

.modelroom_box .slick-img img.slide_text {
position: absolute;
left: 0;
top: 0;
width: 100%;
opacity: 0;
transform: translateY(-10px);
}

.modelroom_box .slider .slick-current .slick-img img.slide_text {
animation: 1s SlideText ease-in-out forwards;
}

@keyframes SlideText{
0%{
opacity: 0;
transform: translateY(-10px);
}

100%{
opacity: 1;
transform: translateY(0);
}
}


.slider .slide-arrow {
top: 50%;
transform: translateY(-50%);
position: absolute;
width: 50px;
height: 50px;
font-size: 0;
line-height: 0;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #002738;
color: #333;
transition : all 0.5s ease 0s;
z-index: 8000;
}

.slider .slide-arrow:hover {
background-color: #c09f33;
color: #fff;
}

.slider .prev-arrow {
left: 0;
}

.slider .next-arrow {
right: 0;
}


.slider .slide-arrow span {
position: relative;
display: inline-block;
width: 16.1px;
height: 30.3px;
}

.slider .slide-arrow span:before,
.slider .slide-arrow span:after {
content: "";
position: absolute;
top: calc(50% - 1px);
width: 22px;
height: 2px;
border-radius: 9999px;
background-color: #fff;
}

.slider .slide-arrow span._next:before,
.slider .slide-arrow span._next:after {
right: 0;
transform-origin: calc(100% - 1px) 50%;
}

.slider .slide-arrow span._pre:before,
.slider .slide-arrow span._pre:after {
left: 0;
transform-origin: 1px 50%;
}


.slider .slide-arrow span:before {
transform: rotate(45deg);
}

.slider .slide-arrow span:after {
transform: rotate(-45deg);
}




@media screen and (max-width : 767px) {

.slider .slide-arrow {
width: 30px;
height: 30px;
}

.slider .slide-arrow span {
width: 9.1px;
height: 16.1px;
}

.slider .slide-arrow span:before,
.slider .slide-arrow span:after {
width: 12px;
height: 2px;
}

.modelroom_box .thumbnail .slick-list {
display: flex !important;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap !important;
width: 100%;
}

.modelroom_box .thumbnail .slick-track {
display: flex !important;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap !important;
width: 100%;
}

.modelroom_box .thumbnail .slick-slide {
width: 33.3333% !important;
height: auto !important;
padding: 0 0 0 0 !important;
margin: 0 0 0 0 !important;
}


}