@charset "utf-8";

/*
* description: tutorials CSS
* date: 2016-05-13
*/

/*
* title
*/
.tutor-title{position:relative;padding:16px 10px;margin-bottom:10px;border-bottom:1px solid #e4e9eb;}
.tutor-title > h2{display:inline-block;font-size:14px;font-weight:600;line-height:1.42857143;color:#0f233a;vertical-align:middle;}
.tutor-title .tutor-title-more,.tutor-title2 .tutor-title-more{display:inline-block;font-size:14px;line-height:1.42857143;vertical-align:middle;color:#70818b;}
.tutor-title-more:hover,.tutor-title-more:focus{color:#43535c;}
.tutor-title2{position:relative;padding:6px 10px 0 0;margin-bottom:10px;border-bottom:1px solid #e4e9eb;}
.tutor-title2 .tutor-title-more{margin-top:14px;}
.tutor-title-nav{position:relative;float:left;min-height:48px;display:inline-block;}
.tutor-title-nav > a{float:left;display:block;padding-top:10px;padding-bottom:17px;margin-bottom:-1px;font-size:14px;line-height:1.42857143;border-bottom:2px solid transparent;vertical-align:middle;cursor:pointer;}

/*
* active
*/
.tutor-title-nav > a:hover,.tutor-title-nav > a:focus{color:#0097e6;}
.tutor-title-nav > a.active{font-weight:700;color:#0097e6;border-color:#0097e6;}
@media (min-width:768px){
	.tutor-title-nav > a{margin-right:10px;}
}
@media (min-width:992px){
	.tutor-title-nav > a{margin-right:28px;}
}
@media (min-width:1200px){
	.tutor-title-nav > a{margin-right:28px;}
}

/*
* eq(0)
*/
.tutor-title-nav > a.first{padding:10px 14px;font-weight:700;color:#fff;background-color:#0097e6;border-bottom:none;border-radius:10px 0 10px 0;}

/*
* home
*/

/*
* home opens class
*/
.tutor-con .tutor-opens-iteam,.tutor-con .tutor-opens-recommend{float:left;}
.tutor-opens-iteam{position:relative;padding-right:10px;padding-left:10px;margin-bottom:20px;overflow:hidden;box-sizing:border-box;}
.tutor-opens-cover{position:relative;z-index:1;display:block;width:100%;overflow:hidden;background-color:#f1f5f7;}
.tutor-opens-cover > img{width:100%;height:100%;-webkit-transition:all 1s ease;transition:all 1s ease;}
.tutor-opens-recommend{padding:0 10px;margin-bottom:20px;overflow:hidden;box-sizing:border-box;}
@media (min-width:768px){
	.tutor-opens-iteam{width:31.33333333%;height:261px;margin-right:1%;margin-left:1%;}
	.tutor-opens-iteam .tutor-opens-cover{height:165px;}
	.tutor-con .tutor-opens-recommend{width:98%;height:388px;margin-right:1%;margin-left:1%;}
	.tutor-opens-recommend .tutor-opens-cover{height:100%;}
}
@media (min-width:992px){
	.tutor-con .tutor-opens-iteam,.tutor-con .tutor-opens-recommend,.tutor-opens-recommend .tutor-opens-cover{height:269px;}
	.tutor-opens-iteam{width:250px;margin-right:0;margin-left:0;}
	.tutor-con .tutor-opens-recommend{width:500px;margin-right:0;margin-left:0;}
	.tutor-opens-iteam .tutor-opens-cover{height:173px;}
}
@media (min-width:1200px){
	.tutor-con .tutor-opens-iteam,.tutor-con .tutor-opens-recommend,.tutor-opens-recommend .tutor-opens-cover{height:307px;}
	.tutor-opens-iteam{width:300px;}
	.tutor-con .tutor-opens-recommend{width:600px;}
	.tutor-opens-iteam .tutor-opens-cover{height:210px;}
}

/*
* home des
*/
.tutor-opens-des{position:relative;z-index:3;width:100%;padding:10px 18px 6px;background-color:#fff;border-width:0 1px 1px;border-style:solid;border-color:#e4e9eb;box-sizing:border-box;-webkit-transition:margin .2s linear;transition:margin .2s linear;}
.tutor-opens-des > h4{height:24px;margin-bottom:3px;font-size:14px;font-weight:600;line-height:1.7142857;}
.tutor-opens-des > h4 > a{display:block;width:100%;overflow:hidden;color:#0f233a;white-space:nowrap;text-overflow:ellipsis;}
.tutor-opens-iteam:hover .tutor-opens-des{-webkit-box-shadow:inset 0 1px 0 #e4e9eb;box-shadow:inset 0 1px 0 #e4e9eb;}

/*
* home des con
*/
.tutor-opens-des p{font-size:inherit;line-height:inherit;}
.tutor-opens-des .tutor-opens-desp,.tutor-opens-des .tutor-graphics-desp{display:none;height:54px;margin-bottom:7px;overflow:hidden;font-size:12px;line-height:1.5;color:#43535c;cursor:default;}
.tutor-opens-iteam:hover .tutor-opens-des > h4 > a,.tutor-opens-author:hover > span,.tutor-softwares-iteam:hover .tutor-softwares-cover{color:#0097e6;}

/*
* home opens author
*/
.tutor-opens-authord{margin-top:4px;margin-bottom:7px;}

/*
* home prices
*/
.tutor-opens-tags > .tutor-opens-price{float:right;font-size:14px;line-height:1.7142857;cursor:default;}
.tutor-opens-price.price{color:#ff1717;}
.tutor-opens-price.free{color:#0097e6;}
.tutor-opens-tags > .tutor-opens-price > em{font-family:arial;font-style:normal;}

/*
* home softwares
*/
.tutor-softwares-con{margin-bottom:40px;background-color:#fff;border:1px solid #e4e9eb;box-sizing:border-box;}
.tutor-softwares-con .tutor-softwares-iteam{float:left;}
.tutor-softwares-con .tutor-softwares-iteam:nth-of-type(10){border-right:none;}
.tutor-softwares-iteam{width:10%;text-align:center;border-right:1px solid #e4e9eb;box-sizing:border-box;}
.tutor-softwares-cover{display:block;width:100%;color:#0f233a;-webkit-perspective:1200px;perspective:1200px;}
.tutor-softwares-cover .softwares-name{display:block;height:36px;padding-top:10px;font-size:12px;line-height:1.5;}
.softwares-cover{position:relative;display:block;width:60px;height:60px;margin:0 auto;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:1s ease;transition:1s ease;}
.softwares-cover img{width:100%;height:100%;opacity:1;filter:alpha(opacity=100);-webkit-transition:opacity 1s ease;transition:opacity 1s ease;}
.tutor-softwares-cover .softwares-number{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;filter:alpha(opacity=0);-webkit-transform:rotateY(180deg) translateZ(1px);transform:rotateY(180deg) translateZ(1px);-webkit-transition:opacity 1s ease;transition:opacity 1s ease;}
@media (min-width:768px){
	.tutor-softwares-cover{padding:28px 0 4px;}
}
@media (min-width:992px){
	.tutor-softwares-cover{padding:28px 12px 4px;}
}
@media (min-width:1200px){
	.tutor-softwares-cover{padding:28px 12px 4px;}
}

/*
* hover
*/
.tutor-softwares-cover:hover .softwares-cover{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);}
.tutor-softwares-cover:hover .softwares-cover img{opacity:0;filter:alpha(opacity=0);}
.tutor-softwares-cover:hover .softwares-number{opacity:1;filter:alpha(opacity=100);}

/*
* softwares number
*/
.softwares-number{padding:15px 6px;font:normal bold 25px/1.2 arial;color:#4feaff;background-color:#111031;white-space:nowrap;border-radius:50%;}
.ps .softwares-number{color:#4feaff;background-color:#111031;}
.ai .softwares-number{color:#ffa62e;background-color:#361104;}
.ae .softwares-number{color:#eda2ff;background-color:#1a0a34;}
.sai .softwares-number{color:#fff;background-color:#034d01;}
.unity3d .softwares-number{color:#fff;background-color:#1f2831;}
.sketch .softwares-number{color:#ffe586;background-color:#d34f07;}
.cdr .softwares-number{color:#fefefe;background-color:#00a500;}
.dmax .softwares-number{color:#009c9d;background-color:#bedbdc;}
.zbrush .softwares-number{color:#fff;background-color:#000;}
.maya .softwares-number{color:#077370;background-color:#dbeded;}
.other .softwares-number{color:#b6f1ff;background-color:#0d68bb;}

/*
* graphics list
*/
.turogra-left,.turogra-right{position:relative;padding-right:10px;padding-left:10px;}
.turogra-left{float:left;}
.turogra-right{float:right;}
@media (min-width:768px){
	.turogra-left{width:100%;}
	.turogra-right{display:none;}
}
@media (min-width:992px){
	.turogra-left{width:100%;}
	.turogra-right{display:none;}
}
@media (min-width:1200px){
	.turogra-left{width:880px;}
	.turogra-right{display:block;width:320px;}
}

/*
* list
*/
.turogra-list li{position:relative;padding-top:10px;padding-bottom:10px;border-bottom:1px solid #e4e9eb;}
.turogra-iteam > .works-shadow,.turogra-hot-iteam > .works-shadow{top:-1px;right:-11px;bottom:-1px;left:-11px;}
.turogra-cover{position:relative;z-index:1;float:left;display:block;width:240px;height:180px;overflow:hidden;background-color:#b1bec5;text-align:center;}
.turogra-cover > .turogra-cover-img,.turogra-hot-cover > img{width:100%;height:100%;}
.turogra-des{position:relative;z-index:1;height:180px;padding-left:20px;}
.turogra-des > h4{padding-bottom:10px;font-size:18px;font-weight:700;line-height:1.33333333;}
.turogra-des > h4 > a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.turogra-des > p{height:60px;margin-bottom:16px;overflow:hidden;font-size:14px;line-height:1.42857143;color:#70818b;cursor:default;}
.turogra-authord{padding-top:10px;}
.turogra-note{height:40px;padding-top:10px;font-size:12px;}
.turogra-note > span{float:left;display:block;}
.turogra-note > span > a{display:block;height:30px;padding:4px 9px;line-height:1.66666667;color:#70818b;background-color:#f5f8fa;border:1px solid #e4e9eb;cursor:pointer;box-sizing:border-box;border-radius:4px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-user-select:none;user-select:none;}
.turogra-note > a,.turogra-note > em{float:left;display:block;padding:5px 0;margin-left:10px;line-height:1.66666667;color:#70818b;-webkit-user-select:none;user-select:none;}
@media (min-width:768px){
	.turogra-des > h4{max-width:460px;}
}
@media (min-width:992px){
	.turogra-des > h4{max-width:700px;}
}
@media (min-width:1200px){
	.turogra-des > h4{max-width:580px;}
}

/*
* hover
*/
.turogra-iteam:hover .turogra-des > h4 > a,.turogra-hot-iteam:hover .turogra-hot-des > h4 > a,.turogra-note > a:hover,.turogra-hot-des > h6 > a:hover{color:#0097e6;}

/*
* graphics tags
*/
.turogra-tags{padding-bottom:10px;}
.turogra-tags > .turogra-tag{float:left;display:inline-block;height:30px;padding:4px 10px;margin-right:10px;margin-bottom:10px;overflow:hidden;font-size:12px;line-height:1.66666667;color:#70818b;background-color:#f5f8fa;border:1px solid #e4e9eb;white-space:nowrap;cursor:pointer;box-sizing:border-box;border-radius:4px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-user-select:none;user-select:none;}
@media (min-width:768px){
	.turogra-tags{width:100%;}
}
@media (min-width:992px){
	.turogra-tags{width:100%;}
}
@media (min-width:1200px){
	.turogra-tags{width:860px;}
}

/*
* hover
*/
.turogra-tags > .turogra-tag:hover,.turogra-note > span:hover > a{color:#43535c;background-color:#fff;}

/*
* active
*/
.turogra-tags > .turogra-tag.active{color:#fff;background-color:#0097e6;}

/*
* graphics hot
*/
.turogra-Postop{width:300px;}
.turogra-hot .turogra-hot-title{margin-top:-40px;}
.turogra-hot-title > h2{padding-top:10px;padding-bottom:10px;font-size:14px;font-weight:700;line-height:1.42857143;}

/*
* list
*/
.turogra-hot-list > li{position:relative;padding-top:10px;padding-bottom:10px;border-top:1px solid #e4e9eb;}
.turogra-hot-cover{position:relative;z-index:1;float:left;display:block;width:120px;height:90px;overflow:hidden;background-color:#b1bec5;text-align:center;}
.turogra-hot-des{position:relative;z-index:1;height:90px;padding-left:10px;}
.turogra-hot-des > h4{font-size:14px;line-height:1.42857143;}
.turogra-hot-des > h4 > a{display:block;max-height:40px;overflow:hidden;color:#43535c;}
.turogra-hot-des > h6{padding-top:4px;font-size:12px;line-height:1.33333333;cursor:default;}
.turogra-hot-des > h6 > a,.turogra-hot-des > h6 > span{padding-right:10px;color:#70818b;}

/*
* turogra recommend
*/
.turogra-recommend > h2{padding:140px 10px;font-size:20px;font-weight:700;line-height:1.2;color:#fff;background-color:#a2b1b8;text-align:center;cursor:default;-webkit-user-select:none;user-select:none;}
.turogra-recommend > a{display:block;width:100%;}
.turogra-recommend > a > img{width:100%;background-color:#a2b1b8;}