.blkslider { overflow-x:hidden; overflow-y:hidden; }
.blkslider.navdot { padding-bottom:50px; }    
.blkslider .arw { width:3vw; top:40%; position:absolute; background-repeat:no-repeat; cursor:pointer; z-index: 50;
                /*top:0; height:100%; background-position:left 35%; background-size:14px auto; 
                    transform:translateY(-50%);*/ height:3vw; background-color:#fff; background-size: auto 60%; 
                        background-position:center center; opacity:0.7; transition:opacity 0.3s ease; }
.blkslider .arw:hover { opacity:1; }                        
.blkslider .arw.left { left:20px ; background-image:url(/images/red_arrow_left.svg); }                    
.blkslider .arw.right { right:20px; background-image:url(/images/red_arrow_right.svg); /*background-position:right 35%;*/ }
.blkslider .arw.off { /*background-image:none !important;*/ display:none;  }
.blkslider .center { width:90%; margin-left:5%; /*overflow:hidden;*/ }
.blkslider .center .wrap { width:100%; transition:transform 700ms ease, left 700ms ease; }
.blkslider .center .wrap.goprev { transform:translateX(35%); }
.blkslider .center .wrap.gonext { transform:translateX(-35%); }
.blkslider .blk { width:30%; margin-right:5%; float:left; }
.blkslider .blk.last { margin-right:0; clear:right; }
.blkslider .blk>img { width:100%; margin-bottom:25px; background-repeat:no-repeat;
                        background-position:center center; background-size:cover; }
.blkslider ul { display:none; }
.blkslider .blk.set { display:none; }
.blkslider .blk.abs { display:none; }
.blkslider .blk.abs.ok { display:block; }
.blkslider .blk.abs.left { position:absolute; top:0; left:-35%; margin-right:0; float:none; }
.blkslider .blk.abs.right { position:absolute; top:0; left:105%; margin-right:0; float:none; }

#htabcts .blkslider { margin:0 0 80px 0; }
#htabcts .blkslider .blk p.ftc { font-size:120%}
#htabcts .blkslider .blk h4 { font-size:160%; font-weight:300; padding-top:10px; padding-right: 20px; }
#htabcts .blkslider .blk>div>em.fa { top:0; right:0; position:absolute; font-size:22px; cursor:pointer; z-index:15;}
#htabcts .blkslider .arw { /*width:21px;*/ }
#htabcts .blkslider .center { width:calc(100% - 42px); margin-left:21px; /*overflow-x:hidden;*/ }
#htabcts .blkslider .blk { width:calc(33.3333333% - 28px); margin-right:42px; cursor:pointer; }
#htabcts .blkslider .blk.last { margin-right:0; }
#htabcts .blkslider .blk>a { display:none; }
#htabcts .blkslider .blk img { transition:all 0.3s ease-out;  box-sizing:border-box;
            -webkit-box-transition:all 0.3s ease-out; -moz-box-transition:all 0.3s ease-out; background-size:120%}
#body.notouch #htabcts .blkslider .blk:hover h4 { color:#666; text-decoration:underline; color:#C21F26;}
#body.notouch #htabcts .blkslider .blk:hover img { -webkit-box-shadow: 0px 0px 16px 0px rgba(50, 50, 50, 0.41);
                                        -moz-box-shadow: 0px 0px 16px 0px rgba(50, 50, 50, 0.41);
                                             box-shadow: 0px 0px 16px 0px rgba(50, 50, 50, 0.41);
                                                outline: 10px solid #C31F26; outline-offset: -10px; background-size:100%;
                                                /*background-color:#C31F26; background-size:calc(100% - 20px) calc(100% - 20px);*/}
#body.notouch #htabcts .blkslider .blk:hover img { outline-width:0\9; background-color:#C31F26\9; background-size:calc(100% - 20px) calc(100% - 20px)\9;}                                                
*::-ms-backdrop, #body.notouch #htabcts .blkslider .blk:hover img { outline-width:0; background-color:#C31F26; background-size:calc(100% - 20px) calc(100% - 20px);}                                                
#body.notouch #htabcts .blkslider .blk>div>em.fa:hover { color:#C31F26; }
#body.notouch #htabcts .blkslider .blk>div>em.fa:hover:before { content:"\f02e"; }
#htabcts .blkslider .blk>div>em.fa.sel { color:#C31F26;  }
#htabcts .blkslider .blk>div>em.fa.sel:before { content:"\f02e"; }

#htabcts .blkslider .blk.abs.left { left:calc(-33.3333333% - 14px); }
#htabcts .blkslider.col3 .blk.abs.left.bk2 { left:calc(-66.6666666% - 28px); }
#htabcts .blkslider.col3 .blk.abs.left.bk3 { left:calc(-99.9999999% - 52px); }
#htabcts .blkslider .blk.abs.right { left:calc(100% + 42px); }
#htabcts .blkslider.col3 .blk.abs.right.bk2 { left:calc(133.3333333% + 56px); }
#htabcts .blkslider.col3 .blk.abs.right.bk3 { left:calc(166.6666666% + 70px); }

.blkslider.navdot nav { position:absolute; bottom:0; left:0; width:100%; text-align:center; }
.blkslider.navdot nav>a { display:inline-block; width:20px; height:20px; border-radius:20px; margin-right:10px; 
                            background:#888; transition:background 0.3s ease; }
.blkslider.navdot nav>a:last-child { margin-right:0; }
.blkslider.navdot nav>a.sel { background:#C31F26; }

/* ==========================================================================
    Mobile
============================================================================= */
@media only screen and (max-width:767px) {
    .blkslider .arw { width:10vw; height:10vw; top:25%; }
    #htabcts .blkslider .center { width:100%; margin:0; overflow-x:hidden; }
    #htabcts .blkslider .blk { width:100%; margin:0; display:none; }
    #htabcts .blkslider .blk.midx { display:block; }
    
    .blkslider.navdot nav>a { width:10px; height:10px; border-radius:10px; margin-right:8px; }
}
/* ==========================================================================
    iPad Pro : landscape
============================================================================= */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}
/* ==========================================================================
    iPad Pro : portrait
============================================================================= */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}


/* ==========================================================================
    Pad : landscape
============================================================================= */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape){
}
/* ==========================================================================
    Pad : Portrait
============================================================================= */
@media only screen and (min-width: 768px) and (max-width: 959px) and (orientation : portrait) {
	.blkslider .arw.left { left:5px; }
	.blkslider .arw.right { right:5px; }
	.blkslider .arw { width:4.5vw; height:4.5vw; }
}