@charset "utf-8";

.tutorial-tab li{padding:0 0 15px;}
.tutorial-tab li:last-of-type{padding:0;}
.tutorial-tab li a{display:table;padding:15px;width:100%;border-radius:7px;overflow:hidden;table-layout:fixed;box-shadow:rgba(149, 157, 165, 0.2) 0px 8px 24px;/*box-shadow:rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;*/box-sizing:border-box;}
.tutorial-tab li a > div{display:table-cell;vertical-align:middle;}
.tutorial-tab li a .thumb-box{width:250px;}
.tutorial-tab li a .thumb-box .thumb-img-box{position:relative;padding:0 0 56.25%;width:100%;height:0;border-radius:7px;overflow:hidden;}
.tutorial-tab li a .thumb-box .thumb-img-box img{position:absolute;top:0;left:0;width:100%;height:100%;}
.tutorial-tab li a .info-box{padding:0 20px;width:100%;/*border:1px solid #eee;border-left:0;*/border-radius:0 7px 7px 0;box-sizing:border-box;}
.tutorial-tab li a .info-box .play-time{position:relative;margin:0 0 5px;padding:0 0 0 18px;font-size:1.2rem;line-height:2.0rem;color:#aaa;}
.tutorial-tab li a .info-box .play-time:before{content:'';display:block;position:absolute;top:2px;left:0;width:12px;height:12px;background:url(/_res/team2/cms-tutorial/img/common/ico-time.png) no-repeat center center/100%;opacity:0.4;}
.tutorial-tab li a .info-box .info-title{display:inline-block;position:relative;font-size:2.0rem;line-height:2.8rem;color:#333;font-weight:500;transition:all .3s;}
.tutorial-tab li a .info-box .info-title:after{content:'';display:block;position:absolute;bottom:0;left:0;z-index:-10;width:0;height:55%;background:#d1e4f6;transition:0.2s all;}
.tutorial-tab li a:hover .info-box .info-title:after,
.tutorial-tab li a.active .info-box .info-title:after{width:105%;}
.tutorial-tab li a .info-box .info-desc{padding:10px 0 0;font-size:1.6rem;line-height:2.4rem;color:#aaa;font-weight:300;}

@media screen and (max-width: 768px) {
	.tutorial-tab li{padding:0 0 10px;}
	.tutorial-tab li a{padding:12px;}
	.tutorial-tab li a .info-box{padding:0 15px;}
	.tutorial-tab li a .thumb-box{width:140px;}	
	.tutorial-tab li a .info-box .play-time{margin:0;}
	.tutorial-tab li a .info-box .info-title{font-size:1.8rem;line-height:2.6rem;}
	.tutorial-tab li a .info-box .info-desc{padding:5px 0 0;font-size:1.4rem;line-height:2.2rem;}
}