@charset "UTF-8";

.wrap-report {background: #fff; padding: 32px 60px 40px; border-right: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf;}
.wrap-report.ani {right: -100px;}
.ani-on .wrap-report.ani {right: 0; transition-delay: .3s;}
.ani-on .wrap-report.report_2.ani {right: 0; transition-delay: .6s;}
.wrap-report.report_2 { padding-bottom: 49px; border-bottom: 0;}
.wrap-report-box {position: relative;}
.wrap-report-box .title {position: absolute; left: 0; top: 0; z-index: 2; padding-left: 15px; font-family: 'Dream Medium'; font-size: 20px; color: #000000;}
.wrap-report-box .title::before {content:""; display: block; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background-color: #000000;}
.wrap-report-box .thumb {position: relative;}
.wrap-report-box .thumb-image {margin: 0 76.5px; box-shadow: 8px 13px 22px 0px rgba(0, 0, 0, 0.21);}
.wrap-report-box .thumb-image img {opacity: 0.95; width: 100%; height: 263px;}
.wrap-report-box .thumb-image a {position: relative; display: block;}
.wrap-report-box .thumb-image a::after {content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; border: 2px solid #333; opacity: 0;}
.wrap-report-box .thumb-image a:focus-visible::after {opacity: 1;}
.wrap-report-box .thumb-info-box {position: absolute; bottom: 0; left: 0; width: 100%;}
.wrap-report-box .thumb-info-box::after {content:""; display: table; clear: both;}
.wrap-report-box .thumb-info-box ul {float: left; width: calc(100% - 150px); background-color: rgba(0,0,0,0.55); height: 82px; line-height: 82px;}
.wrap-report-box .thumb-info-box ul li {overflow: hidden; display: block; margin: 0 15px; font-family: 'Dream Regular'; font-size: 16px; text-align: center; color: white; text-overflow: ellipsis; white-space: nowrap;}
.wrap-report-box .thumb-info-box ul li a {color: #fff;}
.wrap-report-box .thumb-info-box ul li span {position: relative;}
.wrap-report-box .thumb-info-box ul li span::after {content:""; position: absolute; left: 0; bottom: 0; display: block; width: 0; height: 1px; background-color: white; transition: all 1s;}
.wrap-report-box .thumb-info-box ul li:hover span::after {width: 100%;}
.wrap-report-box .thumb-info-box .prev {display: block; float: left; width: 75px; height: 82px; background: #7bb0ff url(../images/btn-report-prev.png) no-repeat center center; text-indent: -9999px;}
.wrap-report-box .thumb-info-box .next {display: block;float: left; width: 75px; height: 82px; background: #7bb0ff url(../images/btn-report-next.png) no-repeat center center; text-indent: -9999px;}
.wrap-report-box .btn-more {position: absolute; right: 0; top: 0;  display: block; width: 40px; height: 40px; border: 1px solid black; text-indent: -9999px;}
.wrap-report-box .btn-more::after {content:""; position: absolute; left: 50%; top: 50%; display: block;  width: 21px; height: 21px; background: url(../images/btn-report-more.png) no-repeat center center; margin: -10.5px 0 0 -10.5px; transition: all 1s;}
.wrap-report-box .btn-more:hover::after {transform: rotate(180deg);}

@media all and (max-width: 1800px) {
    .wrap-report {padding: 35px 20px;}
}

@media all and (max-width: 1350px) {
    .wrap-report-box .slider {padding: 0 17.3%;}
}

@media all and (max-width: 1170px) {
    .wrap-report-box .slider {padding: 0 11%;}
}

@media all and (max-width: 1000px) {
    .wrap-report-box .slider {padding: 0 2%;}
}

@media all and (max-width: 900px) {
    .wrap-report {padding: 35px 30px;}
    .wrap-report-box .slider {padding: 0 20px;}
    .wrap-report-box .btn-more {right: 10px;}
}

@media all and (max-width: 700px) {
    .wrap-report-box .title {line-height: 1.2;}
    .wrap-report.report_2 {padding-bottom: 35px; border-right: 0; border-bottom: 1px solid #bfbfbf;}
    .wrap-report-box .slider {padding: 0;}
    .wrap-report-box .thumb-image img {height: 220px;}
}

@media all and (max-width: 500px) {
    .wrap-report {padding: 35px 20px; border-right: 0px;}
    .wrap-report-box .slider {padding: 0 52px;}
    .wrap-report.report_2 {border-bottom: 1px solid #bfbfbf;}
    .wrap-report-box .btn-more {right: 0;}
    .wrap-report-box .thumb-image {margin: 0px 126.5px;}
    .wrap-report-box .thumb-image img {height: 236px;}
    .wrap-report-box .thumb-info-box ul {width: calc(100% - 250px);}
    .wrap-report-box .thumb-info-box .prev,
    .wrap-report-box .thumb-info-box .next {width: 125px;}
}