@charset "utf-8";
body {font-family:tahoma;}
*{ margin: 0; padding: 0; }
a{text-decoration:none;}
img{border:0;max-width: 100%;}
.clear {display: block;clear: both;}

p a:hover{color: currentColor;}
/* CSS Document */
.detail{width: 1200px; margin: 0 auto;}

.tutorials-banner {background: url(../images/manager-tutorials/bg1.jpg ) no-repeat center bottom/cover;color: #1a1a1a;height: 492px;}
h1{font-size: 37px;padding: 60px 0 40px;text-align: center;}
.tutorials-banner .banner-content{display: flex;justify-content: space-evenly;padding: 15px 0 0;}
.tutorials-banner .banner-content a{}
.banner-right{width: 50%;}
.banner-right p{font-size: 19px;color: #3d3d3d;line-height: 38px;}
.banner-right p a{color: #538ffe;}
.download-box{padding: 53px 0 0;}
.download-box a{display: inline-block;line-height: 64px;font-size: 27px; background: url(../images/manager-tutorials/apple.png) no-repeat right 25px center #10a5ff;color: #fff;border-radius: 7px;padding: 0 75px 0 0;width: 255px;text-align: center;}
.download-box a:hover{background-color: #12bcff;text-decoration: none;}

/*--------*/
.sort-guide{ text-align:right;color: #101010;padding: 20px 0 0; }
.sort-guide span{ color: #0669ff;}
.sort-guide a{ color: #101010; }
.sort-guide a:hover{text-decoration: underline;}
/*--------*/
.tutorials-content{padding-bottom: 80px;}
.tutorials-content h2{font-size: 31px;text-align: center;padding: 55px 0 50px;}
.amzing-content{display: flex;flex-wrap: wrap;}
.amzing-content > div{width: 24%;background: #f6f9fb;box-sizing: border-box;padding: 15px;margin-bottom: 1.3%;margin-right: 1.3%;}
.amzing-content > div iframe{width: 100%;}
.amzing-content > div.first{border: 2px solid #3e75ff;box-shadow: 0 0 15px 5px rgba(161,183,228,0.21);border-radius: 4px;}
.amzing-content > div:nth-child(4n){margin-right: 0;}
.amzing-content h4{font-size: 17px;padding: 10px 0 8px;}
.amzing-content .time{color:#8a8a8a;}
.line{width: 100%;border-top: 1px solid #bdbdbd;height: 0;margin: 50px 0 10px;}
.function-tutorials{position: relative;}
.function-tutorials .funtion-left{position: absolute;top: 97px;left: -40px;z-index: 2;transition: all 0.5s;}
.function-tutorials .funtion-right{position: absolute;top: 97px;left: calc(100% + 12px); z-index: 2;transition: all 0.5s;width: 28px; width: 28px;}
.function-tutorials .funtion-left img,.function-tutorials .funtion-right img{cursor: pointer;}
.funtion-middle{overflow: hidden;}

.guide-nav{background:#e1eaff;width: 100%;position: fixed;top: 0; height: 0;transition: all 0.2s;overflow: hidden;}
.guide-nav.scroll-active{height: auto;padding: 14px 0;}
.guide-nav .detail{display: flex;align-items: center;justify-content:space-between;}
.guide-nav .detail .left{font-size: 17px;color: #464646;}
.guide-nav .detail .left span{color: #0669ff;}
.guide-nav .detail .left a{color: #464646;}
.guide-nav .detail .left a:hover{text-decoration: underline;}
.guide-nav .guide-nav-right{margin-left: auto;}
.guide-nav .guide-nav-right input{border:1px solid #96a0b5;border-radius: 3px 0 0 3px;border-right: none; font-size: 15px; padding-left: 10px; line-height: 40px; background: transparent; width: 220px;box-sizing: border-box;vertical-align: middle;}
.guide-nav .guide-nav-right span{border:1px solid #96a0b5;border-radius:0 3px 3px 0;display: inline-block;line-height: 40px;width: 50px; text-align: center;vertical-align: middle; cursor:pointer;}
.guide-nav-down{padding-left: 20px;}
.fixed-nav-download { display:inline-block; height: 37px; border-radius: 5px;background: #0fb4ff; color: #fff;text-align: center;  padding: 5px 20px 0; cursor: pointer; transition:all 0.4s;font-weight: 800; font-size: 17px; line-height: 17px;}
.fixed-nav-download:hover { background: #2d9dd0; color:#fff; text-decoration:none; }
.fixed-nav-download-span { font-size: 11px;  display: block; font-style: normal; font-weight: 400; line-height: 18px; }


@media (max-width:1200px) {
	.detail,.theMainNav .detail,.MainFoot .detail{width: 100%;padding: 0;}

	/*--------------*/
	.h1-mess{padding: 0 200px;}
	/*--------------*/
	.function-tutorials .funtion-left{left: calc(50% - 100px);top:auto; bottom: -45px;}
	.function-tutorials .funtion-right{left: calc(50% + 100px);top:auto; bottom: -45px;}
	.function-tutorials .funtion-left img,.function-tutorials .funtion-right img{ width: 80%;}

}

@media (max-width:1080px) {
	.newDivNav .Details,.Details, .detail{width: 95%;}
	/*--------------*/
	.h1-mess{padding: 0 150px;}
	/*--------------*/
	.guide-nav{display: none;}
	

	
}

@media (max-width:979px) {

	.tutorials-banner{height: auto;}
	h1{font-size: 37px;}
	.tutorials-banner .banner-content a img{height: 200px;}
	.tutorials-banner .banner-content{flex-wrap: wrap;}
	.banner-right{width: 100%;}
	.download-box{padding: 20px 0; text-align: center;}
	/*--------------*/
	
	/*--------------*/
	.amzing-content > div{width: 32%;}
	.amzing-content > div:nth-child(4n){margin-right: 1.5%;}
	.amzing-content > div:nth-child(3n){margin-right:0;}

}
@media (max-width:768px) {
	h1{ line-height: 45px;}
	
	/*--------------*/
	
	/*--------------*/
	.amzing-content > div{width: 49%;}
	.amzing-content > div:nth-child(3n){margin-right: 1.5%;}
	.amzing-content > div:nth-child(2n){margin-right:0;}

	.middle-one{flex-wrap: wrap;align-items: center;}
	.middle-one > div{width: 49%; margin: 5px 0.5%;}
	/*--------------*/
	/*--------------*/
	
}
@media (max-width:479px) {
	h1{ font-size: 33px;line-height: 43px;}
	/*--------------*/
	.sort-guide{font-size: 13px;}
	.banner-right p{font-size: 17px;line-height: 32px;}

	.tutorials-content h2{font-size: 27px;}
	.amzing-content > div:nth-child(2n),.amzing-content > div:nth-child(3n),.amzing-content > div:nth-child(4n){margin-right: auto;}
	.amzing-content > div{width: 90%; margin:5px auto;}
	

}