@charset "UTF-8";

/* Slider */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;

    &:focus {
        outline: none;
    }

    &.dragging {
        cursor: pointer;
        cursor: hand;
    }
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;

    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }

    .slick-loading & {
        visibility: hidden;
    }
}
.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    [dir="rtl"] & {
        float: right;
    }
    img {
        display: block;
    }
    &.slick-loading img {
        display: none;
    }

    display: none;

    &.dragging img {
        pointer-events: none;
    }

    .slick-initialized & {
        display: block;
    }

    .slick-loading & {
        visibility: hidden;
    }

    .slick-vertical & {
        display: block;
        height: auto;
        border: 1px solid transparent;
    }
}
.slick-arrow.slick-hidden {
    display: none;
}
/* Slider */

@media screen and (max-width: 1199px) {
    .slider-wrapper {
        position:relative;
    }
    .slider{
        margin:0;
        padding:0 15px;
    }
    .slider .slick-slide img{
        width:100%;
    }
    .slider-nav {
        position: absolute;
        left:0;
        width:calc(100% + 8px);
        margin:0 -4px 0;
    }
    .slider-nav .slick-track {
        padding: 8px 0;
    }
    .slider-nav .slick-slide {
        margin: 0 5px 0;
        padding:0;
        cursor: pointer;
        width: 86px;
        transition: 0.3s ease-out;
    }
    .slider-nav .slick-slide > img {
        margin:12.78px 0 0;
        width: 100%;
        transition: 0.3s ease-out;
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, .25);
    }
    .slider-nav .slick-slide.slick-current {
        width: 105.3px;
        text-align: center;
    }
    .slider-nav .slick-slide.slick-current > img {
        margin:0;
    }
    .slider-nav .slick-slide.is-current > img {
        width: 100%;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .5);
    }
    .slick-prev,
    .slick-next {
        position: absolute;
        left: 19px;
        top: 38%;
        width: 20px;
        height: 34px;
        z-index: 9000;
        cursor: pointer;
    }
    .slick-next {
        left: auto;
        right: 19px;
    }
    .slick-prev:before,
    .slick-next:before {
        content:"";
        width: 24px;
        height: 24px;
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        position: absolute;
        top: 50%;
        left: 5px;
        margin-top: -12px;
        transform: rotate(-135deg);
    }
    .slick-next:before {
        left: auto;
        right: 5px;
        transform: rotate(45deg);
    }
    .introduction {
        opacity:0;
        position:relative;
        background: #f4f4f4;
        margin: 80px 0 0;
        padding: 25px 35px;
        transition: 0.3s ease-out;
        transition-duration: 1s;
        transition-delay: 0.5s;
    }
    .slick-current .introduction{
        opacity:1;
    }
    .introduction__title {
        position:relative;
        font-weight: bold;
        font-size: 20px;
        line-height: 1;
        letter-spacing: 0.05em;
        z-index: 9900;
    }
    .introduction__content {
        margin: 15px 0 0;
        font-size: 16px;
        line-height: 1.875;
        letter-spacing: 0.05em;
    }
    .introduction:before{
        position:absolute;
        top:-26px;
        left:50%;
        content:"";
        width: 0;
        height: 0;
        border-left: 23px solid transparent;
        border-right: 23px solid transparent;
        border-bottom: 40px solid #f4f4f4;
        margin-left:-23px;
        z-index:9000;
    }
}
@media screen and (max-width: 991px) {
    .slider-nav {
        position: absolute;
        left:0;
        width:calc(100% + 8px);
        margin:0 -4px 0;
    }
    .slider-nav .slick-slide {
        margin: 0 5px 0;
        padding:0;
        cursor: pointer;
        width: 92.125px;
        transition: 0.3s ease-out;
    }
    .slider-nav .slick-slide > img {
        margin:11.17px 0 0;
        width: 100%;
        transition: 0.3s ease-out;
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, .25);
    }
    .slider-nav .slick-slide.slick-current {
        width: 109px;
        text-align: center;
    }
    .slider-nav .slick-slide.is-current > img {
        margin:0;
        width: 100%;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .5);
    }
    .slick-prev,
    .slick-next {
        position: absolute;
        left: 19px;
        top: 40%;
        width: 15px;
        height: 30px;
        z-index: 9000;
        cursor: pointer;
    }
    .slick-next {
        left: auto;
        right: 19px;
    }
    .slick-prev:before,
    .slick-next:before {
        content:"";
        width: 20px;
        height: 20px;
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        position: absolute;
        top: 50%;
        left: 25%;
        margin-top: -10px;
        transform: rotate(-135deg);
    }
    .slick-next:before {
        left: auto;
        right: 25%;
        transform: rotate(45deg);
    }
    .introduction {
        opacity:0;
        position:relative;
        background: #f4f4f4;
        margin: 90px 0 0;
        padding: 20px;
        transition: 0.3s ease-out;
        transition-duration: 1s;
        transition-delay: 0.5s;
    }
}
@media screen and (max-width: 767px) {
    .slider-nav {
        position: absolute;
        left:0;
        width: calc(100% + 8px);
        margin: 0 -4px 0;
    }
    .slider-nav .slick-slide {
        margin: 0 0.661vw 0;
        padding:0;
        cursor: pointer;
        width: 17.28vw;
        transition: 0.3s ease-out;
    }
    .slider-nav .slick-slide > img {
        margin:3.46vw 0 0;
        width: 100%;
        transition: 0.3s ease-out;
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, .25);
    }
    .slider-nav .slick-slide.slick-current {
        width: 22.5vw;
        text-align: center;
    }
    .slider-nav .slick-slide.is-current > img {
        margin:0;
        width: 100%;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .5);
    }
    .slick-prev,
    .slick-next {
        position: absolute;
        left: 19px;
        top: 48%;
        width: 15px;
        height: 30px;
        z-index: 9000;
        cursor: pointer;
    }
    .slick-next {
        left: auto;
        right: 19px;
    }
    .slick-prev:before,
    .slick-next:before {
        content:"";
        width: 20px;
        height: 20px;
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        position: absolute;
        top: 50%;
        left: 25%;
        margin-top: -10px;
        transform: rotate(-135deg);
    }
    .slick-next:before {
        left: auto;
        right: 25%;
        transform: rotate(45deg);
    }
    .introduction {
        opacity:0;
        position:relative;
        background: #f4f4f4;
        margin: 16% 0 0;
        padding: 20px;
        transition: 0.3s ease-out;
        transition-duration: 1s;
        transition-delay: 0.5s;
    }
    .introduction__title {
        font-size: 16px;
    }
    .introduction__content {
        font-size: 14px;
    }
    .introduction:before{
        position:absolute;
        top:-20px;
        left:50%;
        content:"";
        width: 0;
        height: 0;
        border-left: 23px solid transparent;
        border-right: 23px solid transparent;
        border-bottom: 40px solid #f4f4f4;
        margin-left:-23px;
        z-index:9000;
    }
}
@media screen and (max-width: 576px) {
    .slider-nav .slick-slide {
        margin: 0 0.648vw 0;
        width: 17.5vw;
    }
    .slider-nav .slick-slide > img {
        margin:2.319vw 0 0;
    }
    .slider-nav .slick-slide.slick-current {
        width: 21vw;
    }
    .slick-prev,
    .slick-next {
        top: 42%;
    }
    .introduction {
        margin: 18% 0 0;
    }
}
@media screen and (max-width: 428px) {
    .slider-nav .slick-slide {
        margin: 0 0.75vw 0;
        width: 17vw;
    }
    .slider-nav .slick-slide > img {
        margin:2.99vw 0 0;
    }
    .slider-nav .slick-slide.slick-current {
        width: 21.5vw;
    }
    .slick-prev,
    .slick-next {
        top: 37%;
    }
    .introduction {
        margin: 18% 0 0;
    }
}
@media screen and (max-width: 414px) {
    .slider-nav .slick-slide {
        margin: 0 0.661vw 0;
        width: 17vw;
    }
    .slider-nav .slick-slide > img {
        margin:2.98vw 0 0;
    }
    .slider-nav .slick-slide.slick-current {
        width: 21.5vw;
    }
    .slick-prev,
    .slick-next {
        top: 37%;
    }
    .introduction {
        margin: 19% 0 0;
    }
}
@media screen and (max-width: 375px) {
    .slider-nav .slick-slide > img {
        margin:2.65vw 0 0;
    }
    .slider-nav .slick-slide.slick-current {
        width: 21vw;
    }
    .slick-prev,
    .slick-next {
        top: 35%;
    }
    .introduction {
        margin: 20% 0 0;
    }
}
@media screen and (min-width: 1200px) {
    .slider-wrapper {
        position:relative;
    }
    .slider{
        margin:0;
        padding:0 15px;
    }
    .slider .slick-slide img{
        width:100%;
    }
    .slider-nav {
        position: absolute;
        left: 50%;
        width:840px;
        margin: 0px -420px 0;
    }
    .slider-nav .slick-track {
        padding: 8px 0;
    }
    .slider-nav .slick-slide {
        margin: 0 6px 0;
        padding:0;
        cursor: pointer;
        width: 105px;
        transition: 0.3s ease-out;
    }
    .slider-nav .slick-slide > img {
        margin:16.57px 0 0;
        width: 105px;
        transition: 0.3s ease-out;
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, .25);
    }
    .slider-nav .slick-slide.slick-current {
        width: 130px;
        text-align: center;
    }
    .slider-nav .slick-slide.is-current > img {
        margin:0;
        width: 130px;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .5);
    }
    .slick-prev,
    .slick-next {
        position: absolute;
        left: 20px;
        top: 40px;
        width: 23px;
        height: 40px;
        z-index: 9000;
        cursor: pointer;
    }
    .slick-next {
        left: auto;
        right: 20px;
    }
    .slick-prev:before,
    .slick-next:before {
        content:"";
        width: 28px;
        height: 28px;
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        position: absolute;
        top: 50%;
        left: 6px;
        margin-top: -14px;
        transform: rotate(-135deg);
    }
    .slick-next:before {
        left: auto;
        right: 6px;
        transform: rotate(45deg);
    }
    .introduction {
        opacity:0;
        position:relative;
        background: #f4f4f4;
        margin: 95px 0 0;
        padding: 25px 50px;
        transition: 0.3s ease-out;
        transition-duration: 1s;
        transition-delay: 0.5s;
    }
    .slick-current .introduction{
        opacity:1;
    }
    .introduction__title {
        position:relative;
        font-weight: bold;
        font-size: 20px;
        line-height: 1;
        letter-spacing: 0.05em;
        z-index: 9900;
    }
    .introduction__content {
        margin: 15px 0 0;
        font-size: 16px;
        line-height: 1.875;
        letter-spacing: 0.05em;
    }
    .introduction:before{
        position:absolute;
        top:-26px;
        left:50%;
        content:"";
        width: 0;
        height: 0;
        border-left: 23px solid transparent;
        border-right: 23px solid transparent;
        border-bottom: 40px solid #f4f4f4;
        margin-left:-23px;
        z-index:9000;
    }
}

@media print,screen and (max-width: 560px){
    .slider-nav {
        top: calc(63vw - 50px);
    }
}
@media print,screen and (min-width: 561px) and (max-width: 576px){
    .slider-nav {
        top: calc(62.5vw - 50px);
    }
}
@media print,screen and (min-width: 577px) and (max-width: 767px){
    .slider-nav {
        top: calc(61.5vw - 50px);
    }
}
@media print,screen and (min-width: 768px) and (max-width: 960px){
    .slider-nav {
        top: calc(64.5vw - 60px);
    }
}
@media print,screen and (min-width: 961px) and (max-width: 1199px){
    .slider-nav {
        top: calc(67vw - 210px);
    }
}
@media print,screen and (min-width: 1200px) and (max-width: 1486px){
    .slider-nav {
        top: calc(67vw - 250px);
    }
}
@media screen and (min-width: 1487px) {
    .slider-nav {
        top: 745px;
    }
}