@charset "UTF-8";

/*----------------------------------------
 modelroom
----------------------------------------*/

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

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

.modelroom_box {
width: 100%;
margin: 40px 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);
cursor: pointer;
}

.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 #003629;
}

.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: 40px;
height: 40px;
font-size: 0;
line-height: 0;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #333;
transition : all 0.5s ease 0s;
z-index: 8000;
}

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

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

.slider .slide-arrow img {
filter: drop-shadow(0 0 10px #666);
}







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

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

.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: flex-start;
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;
}


}