@charset 'UTF-8';
/*------------------------------------------
    works
--------------------------------------------*/
html { height:100%; }
body { height:100%; margin: 0; padding: 0;background: #323434; overflow: hidden;}

/*slick BASE*/
#slider_container .slick-slider{ position: relative; z-index: 1; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
#slider_container .slick-slider .slick-track,
#slider_container .slick-track{position: relative; top: 0; left: 0;   display: block;}
#slider_container .slick-track:before,
#slider_container .slick-track:after{ display: table; content: '';}
#slider_container .slick-track:after{ clear: both;}
#slider_container .slick-loading .slick-track{ visibility: hidden;}
#slider_container .slick-slide{ float: left; height: 100%; min-height: 1px;}
[dir='rtl'] #slider_container .slick-slide{ float: right;}
#slider_container .slick-slide img{ display: block;}
#slider_container .slick-slide.slick-loading img{ display: none;}
#slider_container .slick-slide.dragging img{ pointer-events: none;}
#slider_container .slick-initialized .slick-slide{ display: block;}
#slider_container .slick-loading .slick-slide{ visibility: hidden;}
#slider_container .slick-vertical .slick-slide{ display: block; height: auto; border: 1px solid transparent;}
#slider_container .slick-arrow.slick-hidden { display: none;}
/* Slider setting */
#slider_container{ width:100%; height:70%; background:#3e3f3f; position:absolute; top:12.2%; left: 0px; overflow: hidden; }
#slider_container a{border:none; outline:none;}
#slider_container img{ max-width:100%;}
#slider_container .slider_main{display: block; height: 100%;}
#slider_container .slider_main li{ position: relative; width: 100%; height: 70vh; cursor:grab!important;}
#slider_container .slider_main li:hover{ cursor:grab!important;}
#slider_container .slider_main li img { position: absolute;left: 0; right: 0; top: 0;  bottom: 0; margin: auto; max-width:100%; max-height:100%; width: auto; height: auto; vertical-align: bottom;}
#slider_container .slider_L{ width:15%; height:100%; position:absolute; left:0%; top:0px; z-index:2;cursor: pointer;}
#slider_container .slider_R{ width:15%; height:100%; position:absolute; right:0%; top:0px; z-index:2;cursor: pointer;}
/*bottom*/
#bottom { width:100%; height: 17.8vh;  margin: 0 auto; position: absolute; bottom:0px; left:0px; z-index: 10; overflow: hidden; }
#bottom .work_title{ display: none;}
#bottom .pagingInfo{ position: absolute; left:50%; top:20%; margin:-5.5px 0 0 -50px; width: 100px; height: 11px; text-align: center!important; color: #fff; font-size: 12px; line-height: 12px; }
#bottom .slider_nav{  width:100%; position: absolute; top:39.5%; left:0px;}
#bottom .slider_nav li{ margin: 0 5px;cursor: pointer; display: inline-block;}
#bottom .slider_nav li img {filter:alpha(opacity=60); -moz-opacity: 0.6;  opacity: 0.6; height: 5.6vh; width: auto; transition: 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
#bottom .slider_nav li img:hover {filter:alpha(opacity=100); -moz-opacity: 1;  opacity: 1;}
#bottom .slider_nav .slick-center img{filter:alpha(opacity=100); -moz-opacity: 1;  opacity: 1;}
.close{ position: absolute; right: 2%; top: 3.1%; max-width: 55px; width: 30%; height:5.7vh; background: #;}
.close img{ width: 100%; height: 100%;}
.close a{transition: 0.3s;}
.close a:hover{filter:alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6;}
@media (max-width: 768px) {
#slider_container { height:50.7%; top:12.5%; }
#slider_container .slider_main li{height: 50.7vh;max-height: 50.7%; }
/*safari　hack*/
_::-webkit-full-page-media, _:future, :root #slider_container .slider_main li { height: 47.5vh; max-height: 47.5%; }
/*bottom*/
#bottom { height: 32.8vh;  }
#bottom .work_title{ display: block; font-size: 12px; line-height: 20px; font-weight: normal; color: #fff; text-align: center; position: absolute; left:50%; top:15%; margin: 0 0 0 -45%; width: 90%; }
#bottom .pagingInfo{ top:55%; margin:-10px 0 0 -50px; width: 100px; height: 20px; font-size: 12px; line-height: 12px; }
#bottom .slider_nav{top:65%; }
#bottom .slider_nav li img { height: 6.4vh;}
.close{ top: 3.3%;}
}/*END*/
@media (max-width: 750px) {
/*safari　hack*/
_::-webkit-full-page-media, _:future, :root #slider_container .slider_main li { height: 45.0vh; max-height: 45.0%; }
}/*END*/

.sp{display: none!important;}
.pc{display: block!important;}
@media (max-width: 768px) {
.sp{display: block!important;}
.pc{display: none!important;}
}/*END*/