@charset "UTF-8";

#slideArea {
   width: 100%;
   margin-top: -30px;
   margin-bottom: 25px;
   background: #273251;
    background: -webkit-linear-gradient(-45deg, #051132, #1f2538);
    background:    -moz-linear-gradient(-45deg, #051132, #1f2538);
    background:     -ms-linear-gradient(-45deg, #051132, #1f2538);
    background:      -o-linear-gradient(-45deg, #051132, #1f2538);
    background:         linear-gradient(-45deg, #051132, #1f2538);
}
#slideArea .no-nav .sp-next-arrow,
#slideArea .no-nav .sp-previous-arrow { display: none !important; }
.slider-wrapper {
	position: relative;
	margin: 0 auto;
	width: 640px;
	height: 384px;
	overflow: hidden;
	background: none;
}
#home .slider-wrapper {
    position: relative;
    top: 133px;
    width: 100%;
    height: 450px;
    margin-bottom: 82px;
    background: #000;
}
#program .slider-wrapper {
    position: relative;
    width: 100%;
    max-width: 1330px;
    overflow: hidden;
    height: 324px;
    margin-left: auto;
    margin-right: auto;
}

#program #slider3,
#program #slider4 {
	margin-top: 17px;
}
#home #slider {
	margin-top: 20px;
}
#slider .sp-slide {
	width: 640px;
	height: 360px;
}
#program #slider3 .sp-slide {
	width: calc( 512px * 0.7 );
	height: 288px;
}
#program #slider3 .sp-selected {
    width: 512px;
}
.sp-slides-container .sp-fade-arrows,
.slider-pro .sp-fade-full-screen {
    opacity: 0.65 !important;
}
.sp-slides-container:hover .sp-fade-arrows,
.slider-pro:hover .sp-fade-full-screen {
    opacity: 1 !important;
}

#slider .sp-slide iframe,
#slider3 .sp-slide iframe {
    position: absolute;
    left: 0px; top: 0px;
}
#slider4 .sp-slide iframe {
    position: absolute;
    left: 0px;
    top: 0px;
}

.slider-thumbnail-wrapper {
	max-width: 1600px;
	margin: 10px auto;
	position: relative;
}
#slider-thumbnail .sp-slide {
	width: 160px;
	height: 90px;
	background-size: contain;
	cursor: pointer;
}
.sp-slide img,
.sp-slide video {
	width: 100%;
    height: auto;
}
#slider .sp-slide img,
#slider .sp-slide video,
#slider3 .sp-slide img,
#slider3 .sp-slide video {
    opacity: 0.4;
}
#program #slider3 .sp-slide img,
#program #slider3 .sp-slide video {
    padding-top: 15px;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -o-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#slider .sp-selected img,
#slider .sp-selected video,
#slider3 .sp-selected img,
#slider3 .sp-selected video{
  opacity: 1.0;  
}
#program #slider3 .sp-selected img,
#program #slider3 .sp-selected video {
    padding-top: 0px;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.sp-thumbnails {
	margin-top: 10px;
}
.sp-thumbnail {
	width: 160px;
	height: 90px;
	background-size: contain;

}
#slider-thumbnail .sp-slide {
    opacity: 0.6;
    width: 80%;
    height: 80%;
}
#slider-thumbnail .sp-selected {
    opacity: 1.0;
    width: 100%;
    height: 100%;
}
#slider4 .sp-slides { margin-left: -266px; }
.sp-arrow:before,
.sp-arrow:after{
    left: auto;
    top: auto;
}

#slider .sp-previous-arrow:before,
#slider3 .sp-previous-arrow:before { content: none; }
#slider .sp-previous-arrow:after,
#slider3 .sp-previous-arrow:after {
    top: calc( 50% - 25px ) !important;
    right: calc(( 100vw - 680px ) / 2 - 65px );
    width: 30px !important;
    height: 65px !important;
    border: none !important;
     background: url('/common_re2019/images/slideArrow_left@2x.png') no-repeat center center !important;
    -webkit-background-size: 30px 65px !important;
    background-size: 30px 65px !important;
    -webkit-transform:skew(0deg,0deg);
    -ms-ransform:skew(0deg,0deg);
    transform:skew(0deg,0deg);
    -webkit-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);
    opacity: 1;
}
#slider3 .sp-previous-arrow:after {
    right: 65px;
    -webkit-background-size: 25px 54px !important;
    background-size: 25px 54px !important;
}
#slider .sp-previous-arrow:hover:after {
    right: calc(( 100vw - 680px ) / 2 - 60px );
}
#slider3 .sp-previous-arrow:hover:after {
    right: 60px;
}
#slider .sp-next-arrow:before,
#slider3 .sp-next-arrow:before{ content: none; }
#slider .sp-next-arrow:after,
#slider3 .sp-next-arrow:after { 
    top: calc( 50% - 25px ) !important;
    left: calc(( 100vw - 680px ) / 2 - 65px );
    width: 30px !important;
    height: 65px !important;
    border: none !important;
    background: url('/common_re2019/images/slideArrow_right@2x.png') no-repeat center center !important;
    -webkit-background-size: 30px 65px !important; 
    background-size: 30px 65px !important;
    -webkit-transform:skew(0deg,0deg);
    -ms-ransform:skew(0deg,0deg);
    transform:skew(0deg,0deg);
    -webkit-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);
    opacity: 1 !important;
}
#slider3 .sp-next-arrow:after {
    left: 65px;
    -webkit-background-size: 25px 54px !important; 
    background-size: 25px 54px !important;
}
#slider .sp-next-arrow:hover:after {
    left: calc(( 100vw - 680px ) / 2 - 60px );
}
#slider3 .sp-next-arrow:hover:after {
    left: 60px
}
@media screen and ( max-width : 1299px ){
    #slider .sp-previous-arrow:after {
        right: 65px;
    }
    #slider .sp-previous-arrow:hover:after {
        right: 60px;
    }
    #slider .sp-next-arrow:after {
        left: 65px;
    }    
   #slider .sp-next-arrow:hover:after {
        left: 60px;
    }

}/*==== // end @media */

#slider .sp-next-arrow,
#slider .sp-previous-arrow {
    z-index: 9999;
    top: -165px !important;
    transform:rotate(0deg);
    background: transparent !important;
    width: 640px !important;
    height: 360px !important;
}
#slider3 .sp-next-arrow,
#slider3 .sp-previous-arrow {
    z-index: 9999;
    top: -126px !important;
    transform:rotate(0deg);
    background: transparent !important;
    width: 512px !important;
    height: 288px !important;
}
#slider .sp-previous-arrow {
    right: 50% !important;
    left: auto !important;
    margin-right: 340px !important;
}
#slider3 .sp-previous-arrow {
    right: 50% !important;
    left: auto !important;
    margin-right: 256px !important;
}
#slider .sp-next-arrow {
    left: 50% !important;
    right: auto !important; 
    margin-left: 340px !important;
}
#slider3 .sp-next-arrow {
    left: 50% !important;
    right: auto !important; 
    margin-left: 256px !important;
}