@charset "utf-8";

/* Slider */

.content{ margin:auto}

.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; margin: 0; padding: 0; max-width:1220px; margin:auto;}

.slick-slide { float: left; /* height: 100%; */ min-height: 1px; display: none;}

.slick-slide img { display: block; width:100%}

.slick-initialized .slick-slide { display: block; }

.slick-vertical .slick-slide { display: block; height: auto;}

.slick-slide dl{ padding: 0 6% 4%; height:505px;}

.slick-slide dl dd{ margin:0 0 0 5%}

.slick-slide:focus{ outline:none;}

/* Arrows */

.slick-prev,.slick-next { position: absolute; display: block; height:53px; width:53px;  cursor: pointer; top:50%; margin-top: -11px; padding: 0; border: none; outline: none;}

.slick-prev { left:0%; background:url(../images/sy-29.png) no-repeat center}

.slick-next { right:0; background:url(../images/sy-27.png) no-repeat center}

.slick-prev:hover { left:0%; background:url(../images/sy-26.png) no-repeat center}

.slick-next:hover { right:0; background:url(../images/sy-28.png) no-repeat center}

.slick-slide dl dt img{ border-radius:50%}

.slick-slide dl dt{ background:url(../images/sy-42.png) no-repeat center; background-size:100%; padding:25px}

.slick-slide dl dd{ color:#333}

.slick-slide dl .d3 img{ width:4px; height:7px; display:inline-block; margin-left:10px}

.slick-slide dl .d1{ font-size:20px; margin-top:5%; margin-bottom:5%}

.slick-slide dl .d2{ font-size:16px; letter-spacing:1px}

.slick-slide dl .d3{ letter-spacing:1px; width:128px; line-height:26px; border:#666 1px solid; color:#333; font-size:14px; text-align:center; margin-top:8%}

.slick-slide dl .d4{ display:none; font-size:16px; line-height:26px; margin-top:8%}

/* .slick-slide dl:hover{ box-shadow:0 0 10px #ccc; border-radius:10px; padding:5%; background:#fff; overflow:hidden} */
.slick-slide dl:hover{ box-shadow:0 0 10px #ccc; border-radius:10px; padding:5%; background:#fff; overflow:auto}

.slick-slide dl:hover dt{ background:url(../images/sy-43.png) no-repeat center}

.slick-slide dl:hover .d3{ display:none}

.slick-slide dl:hover .d4{ display:block;}

.responsive01 .slick-list{ max-width:1100px}
.responsive01 .slick-slide dl{ padding: 0 12% 4%;}
.responsive01 .slick-slide dl dd{ margin-left:0; text-align:center; }
.responsive01 .slick-slide dl .d3{ display:block; margin:auto; margin-top:6%}
.responsive01 .slick-slide dl .d2{height:44px; overflow:hidden}
.responsive01 .slick-slide dl dt{ width: 90%; margin: auto;}
.responsive01 .slick-slide:hover dl a dt,
.responsive01 .slick-slide:hover dl a .d1,
.responsive01 .slick-slide:hover dl a .d2,
.responsive01 .slick-slide:hover dl a .d3{ display:none}
.responsive01 .slick-list{ padding:10px}
.responsive01 .slick-slide:hover dl a .d4{ margin-top:0; text-align:left}
.responsive01 .slick-slide:hover dl{ padding:5% 5%;}
.responsive01 .slick-slide dl .d4{ text-align:left}

@media (max-width: 1024px) {

.slick-prev { left:0;}

.slick-next { right:0; }

.slick-list{ margin:0 10%}

.slick-prev, .slick-next{ background-size:100% !important; width:40px}

.slick-slide dl .d1{ font-size:16px}

.slick-slide dl .d2{ font-size:14px}

.sy4 .slick-slide dl dt img{ width:221px; display:block; margin:auto}
.sy4 .slick-slide dl{ height:470px}
.slick-slide dl .d4{ font-size:14px; line-height:22px}

.slick-slide dl{ height:380px}

.slick-slide dl dt{ background:none !important}
.responsive01 .slick-slide:hover dl{ padding:5%;}

}

@media (max-width: 768px) {
.sy4 .slick-slide dl dt img{ width:150px}
.sy4 .slick-slide dl{ height:345px}
.content{margin:auto;width:auto;}

.slick-list{ margin:0 15%}

.slick-slide dl dt{ padding:0}

.slick-slide dl{ height:287px}
.responsive01 .slick-slide dl{ padding:0 2% 2%}
.responsive01 .slick-slide:hover dl{ padding:5%}

}