@charset "utf-8";

/* Slider */

.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-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: none; touch-action: none; -webkit-tap-highlight-color: transparent;}

.slick-list { position: relative; overflow: hidden; display: block; padding: 0; margin:0 4%}

.slick-slide { float: left; height: 100%; min-height: 1px; display: none;}

.slick-slide img { display: block;}

.slick-initialized .slick-slide { display: block; }

.slick-vertical .slick-slide { display: block; height: auto;}

.slick-slide dl{ margin: 0 10px; overflow:hidden}

.slick-slide dl a{ display:block;}

.slick-slide dl dt img{ width:100%; height:270px; border-radius:10px}

.slick-slide dl dt{ margin-bottom:4%; border-radius:10px}

.slick-slide dl dd{ font-size:16px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

/* Arrows */

.slick-prev,.slick-next { position: absolute; display: block; height:30px; width:30px;  cursor: pointer; top:50%; margin-top:-15px; padding: 0; border: none; outline: none;}

.slick-prev { left:0; background:url(../images/cp-6.png) no-repeat center}

.slick-next { right:0; background:url(../images/cp-8.png) no-repeat center}

.slick-prev:hover { left:0; background:url(../images/cp-7.png) no-repeat center}

.slick-next:hover { right:0; background:url(../images/cp-9.png) no-repeat center}



.blue1 .slick-slide dl{ margin: 0 20px;} 

.blue1 .slick-list{ margin:0 3%}

.blue1 .slick-slide dl dt img{ height:302px}

.blue2 .slick-slide dl{ margin: 0 20px;} 

.blue2 .slick-slide dl dt img{ height:391px}

.blue2 .slick-slide dl dt,.blue2 .slick-slide dl dt img{ border-radius:20px}





@media (max-width: 1500px) {

.slick-slide dl dt img{ height:230px}

.blue1 .slick-slide dl dt img{ height:256px}

.blue2 .slick-slide dl dt img{ height:337px}

}

@media (max-width: 1024px) {

.slick-slide dl dt img{ height:213px}

.slick-prev,.slick-next{ background-size:100%; width:22px}

.blue1 .slick-slide dl dt img{ height:238px}

.blue2 .slick-slide dl dt img{ height:180px}



}

@media (max-width: 640px) {

.slick-slide dl{ margin: 0;}

.slick-slide dl dt img{ height:190px}

.slick-list{ margin:0 10%}

.blue1 .slick-slide dl,.blue2 .slick-slide dl{ margin:0 10px}

.blue1 .slick-list,.blue2 .slick-list{ margin:0 7%}

.blue1 .slick-slide dl dt img{ height:166px}

.blue2 .slick-slide dl dt img{ height:172px}

}