@charset "utf-8";
/* CSS Document */
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,th,p,a,li,td,b,div,span{font:400 12px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Arial";color:#333;}
html{font:400 100% "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Arial"; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: none; line-height:1.2; color:#333;}

.htidx_banner,.htidx_crumbs,.htidx_box{ direction:rtl;}

.htidx_banner{ width:100%; height:308px; background:#707578 url(https://imobie-resource.com/ar/how-to/img/htidx_banner.jpg) top center no-repeat; background-size:cover; overflow:hidden;} 
.htidx_bantext{ max-width:860px; width:92%; margin:70px auto 0;}
.htidx_bantext p{ font-size:18px; color:#fefefe; line-height:1.8;}
.pw1200{ width:1200px; margin-left:auto; margin-right:auto;}
.htidx_crumbs{ padding:30px 0 20px; border-bottom:1px solid #e7e7e7;}
.htidx_crumbs a,.htidx_crumbs span{ font-size:18px; color:#333333; vertical-align:middle; font-weight:bold; margin:2px; text-decoration:none;}
.htidx_crumbs a>img{display:inline-block; vertical-align:middle; margin:-7px 0 0 10px; }
.htidx_crumbs a:hover{ color:#1d81e7;}

.htidx_lef{ width:280px; float:right; display:block;}
.htidx_adv_fix{ width:280px; position:fixed; top:0; z-index:10;}
.htidx_sdarea{ border:1px solid #e3e3e3; border-radius:5px; margin-top:6px; background:#fff;}
.htidx_sdarea h4{ font-size:20px; color:#333333; line-height:1.4; margin:12px 18px 8px 0;}
.htidx_sdarea ul li{ max-width:280px; width:100%; height:40px;}
.htidx_sdarea ul li span{ max-width:245px; width:84%; height:40px; display:block; line-height:40px; margin-right:10%; color:#333333; font-size:14px; font-weight:bold;border-bottom:1px solid #f2f2f2;}
.htidx_sdarea ul li:last-child span{border-bottom:none;}
.htidx_pro_btns,.htidx_proba{ display:none;}
.htidx_pro_btns{ width:100%; height:48px;}
.htidx_pro_btns a{font-size:18px; color:#fff; text-decoration:none; display:block; width:calc(100% - 20px); height:48px; padding-right:20px; line-height:48px; border-radius:48px 0 0 48px; position:relative; background-color:#5e5e5e;} 
.htidx_bit{ display:block; height:0;}
.htidx_pro_btns a:after{content:"\e802"; font-family:"iconfont"; display:block; transform:rotate(180deg); top:0; left:20px; position:absolute; z-index:10; color:#fff; transition:transform ease-in-out 0.3s; -webkit-transition:transform ease-in-out 0.3s; -moz-transition:transform ease-in-out 0.3s; -o-transition:transform ease-in-out 0.3s; -ms-transition:transform ease-in-out 0.3s; font-size:20px;}
.htidx_pro_btns a.checkd{background-color:#3daefb; background:linear-gradient(to right,#33b8f9,#5e8cff);}
.htidx_pro_btns a.checkd:after{ transform:rotate(90deg);}
.htidx_proba{ border-bottom:1px solid #e3e3e3;}
.htidx_proba a{ display:inline-block; vertical-align:middle; color:#333; cursor:pointer; position:relative; font-size:14px; font-weight:bold; margin:5px 15px 0 0; text-decoration:none; padding:0 10px 15px;}
.htidx_proba a.select{ border-bottom:2px solid #48a3fc;}
.htidx_proba a.select:after{ width:0; height:0; border:8px solid transparent; border-top:6px solid #48a3fc; content:""; display:block; position:absolute; left:calc(50% - 8px); bottom:-15px; z-index:10;}
.htidx_sdbtn{ position:relative; cursor:pointer;}
.htidx_sdarea ul li span:before,.htidx_proba a:before{ width:25px; height:25px; background-size:cover; content:""; display:inline-block; vertical-align:middle; margin:-3px 0 0 30px;}
.htidx_proba a:before{margin:-3px 10px 0 0;}
.htidx_sdspan1:before,.htidx_proba1:before{background:url(https://imobie-resource.com/ar/how-to/img/htidx_ico1.png) top center no-repeat;}
.htidx_sdspan2:before,.htidx_proba2:before{background:url(https://imobie-resource.com/ar/how-to/img/htidx_ico2.png) top center no-repeat;}
.htidx_sdspan3:before,.htidx_proba3:before{background:url(https://imobie-resource.com/ar/how-to/img/htidx_ico3.png) top center no-repeat;}
.htidx_sdspan4:before,.htidx_proba4:before{background:url(https://imobie-resource.com/ar/how-to/img/htidx_ico4.png) top center no-repeat;}
.htidx_sdspan5:before,.htidx_proba5:before{background:url(https://imobie-resource.com/ar/how-to/img/htidx_ico5.png) top center no-repeat;}
.htidx_sdspan6:before,.htidx_proba6:before{background:url(https://imobie-resource.com/ar/how-to/img/htidx_ico6.png) top center no-repeat;}
.htidx_sdspan7:before,.htidx_proba7:before{background:url(https://imobie-resource.com/ar/how-to/img/htidx_ico7.png) top center no-repeat;}
.htidx_sdarea ul li span:after,.htidx_sdlin ul li:after{ width:0; height:0; content:""; display:block; position:absolute; top:14px; border:5px solid transparent; border-right:7px solid #e3e3e3; left:10px; transition:transform 0.3s ease-in-out; -webkit-transition:transform 0.3s ease-in-out; -moz-transition:transform 0.3s ease-in-out; -o-transition:transform 0.3s ease-in-out; -ms-transition:transform 0.3s ease-in-out; }
.htidx_sdarea ul li.checked,.htidx_sdlin ul li.checked{ background-color:#3daefb; background:linear-gradient(to right,#33b8f9,#5e8cff); border-radius:48px 0 0 48px;}
.htidx_sdarea ul li.checked span,.htidx_sdlin ul li.checked{border-bottom:1px solid #fff; color:#fff;}
.htidx_sdarea ul li:last-child.checked span{ border-bottom:none;}
.htidx_sdarea ul li.checked span:before,.htidx_sdlin ul li.checked:before{ background-position:0 -25px;}
.htidx_sdlin ul li{ height:40px; line-height:40px; color:#333333; border:1px solid #e3e3e3; border-radius:0 40px 40px 0; margin-top:6px; font-size:16px; padding-left:25px; background:#fff;}
.htidx_sdarea ul li.checked span:after,.htidx_sdlin ul li.checked:after{ border-right:7px solid #fff; transform:translateX(-5px); transition:transform 0.3s ease-in-out; -webkit-transition:transform 0.3s ease-in-out; -moz-transition:transform 0.3s ease-in-out; -o-transition:transform 0.3s ease-in-out; -ms-transition:transform 0.3s ease-in-out; }
.htidx_class{ display:none;}
.htidx_class.show{ display:block;}

.htidx_right{ max-width:840px; width:70%; float:left;}
.htidx_right h2{ font-size:24px; color:#333333; font-weight:bold; line-height:1.4; margin-top:5px;}
.htidx_topics>p{ font-size:16px; color:#666666; margin-top:20px; line-height:1.8;}
.htidx_topics>p a{ font-size:inherit; font-weight:bold; color:#1d81e7;}
.htidx_topics_slide_cnt ul{ width:100%; text-align:center; transition:all ease-in-out 0.5s; -webkit-transition:all ease-in-out 0.5s; -moz-transition:all ease-in-out 0.5s; -o-transition:all ease-in-out 0.5s; -ms-transition:all ease-in-out 0.5s;}
.htidx_topics_slide_cnt ul li{ max-width:250px; width:31%; border-radius:5px; overflow:hidden; position:relative; margin-top:10px; display:inline-block; vertical-align:top;}
.htidx_topics_slide_cnt ul li a{ width:100%; height:100%; position:absolute; z-index:15; display:block;}
.htidx_topics_slide_cnt ul li img{ width:100%; display:block; transition:all ease-in-out 0.5s; -webkit-transition:all ease-in-out 0.5s; -moz-transition:all ease-in-out 0.5s; -o-transition:all ease-in-out 0.5s; -ms-transition:all ease-in-out 0.5s;}
.htidx_topics_slide_cnt ul li:hover img{ transform:scale(1.1); transition:all ease-in-out 0.5s; -webkit-transition:all ease-in-out 0.5s; -moz-transition:all ease-in-out 0.5s; -o-transition:all ease-in-out 0.5s; -ms-transition:all ease-in-out 0.5s;}
.htidx_topics_text{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; z-index:12; width:calc(100% - 50px); min-height:250px; height:auto; text-align:center; padding:0 25px; background:rgba(0,0,0,0.5);}
.htidx_topics_text h5{ font-size:16px; color:#ffffff; font-weight:bold;}
.htidx_topics_text p{ font-size:14px; color:#f5f5f6; line-height:1.6; margin-top:20px;}
.htidx_topics_text span{ width:105px; height:30px; line-height:30px; border-radius:30px; background-color:#46a6fb; display:block; margin:25px auto 0; background:linear-gradient(to right,#35b6f4,#5e8dff); font-size:14px; color:#ffffff;}
.htidx_topics_sli1{ float:left;}
.htidx_topics_sli2{ margin:10px;}
.htidx_topics_sli3{ float:right;}


.htidx_articles_slide_btn a{ width:240px; height:40px; line-height:40px; display:inline-block; vertical-align:middle; font-size:16px; color:#666666; border:1px solid #e9e9e9; border-radius:40px; margin-top:10px; text-decoration:none;}
.htidx_articles_btn1{ float:left;}
.htidx_articles_btn2,.htidx_articles_btn3{ margin:10px 16px;}
.htidx_articles_btn4{ float:right;}
.htidx_articles_slide_btn a.checked{ border:none; background:#37ad45; color:#fff; position:relative;}
.htidx_articles_slide_btn a.checked:after{ width:0; height:0; border:8px solid transparent; border-top:7px solid #37ad45; display:block; position:absolute; bottom:-14px; left:calc(50% - 6px); z-index:10; content:"";}
.htidx_articles_slide_cnt ul{ margin-top:15px; border:1px solid #e9e9e9; border-radius:10px; display:none; padding:10px 18px;}
.htidx_articles_nob ul{ border:none; padding:0;}
.htidx_articles_slide_cnt ul.show{ display:block;} 
.htidx_articles_slide_cnt ul li{ padding:18px 0; border-bottom:1px solid #eaeaea;}
.htidx_articles_slide_cnt ul li:last-of-type{ border-bottom:none;}
.htidx_articles_slide_cnt ul li img{ display:inline-block; max-width:146px; width:18%; vertical-align:middle; margin-left:3%;}
.htidx_articles_slide_cnt ul li .htidx_articles_text{ width:77%; display:inline-block; vertical-align:middle;}
.htidx_articles_slide_cnt ul li .htidx_articles_text h5 a{ font-size:18px; color:#333333; font-weight:bold; text-decoration:none; line-height:1.4;}
.htidx_articles_slide_cnt ul li .htidx_articles_text h5 a:hover{ color:#1d81e7;}
.htidx_articles_slide_cnt ul li .htidx_articles_text p{ font-size:16px; color:#666666; line-height:1.7; margin-top:10px;}
.htidx_articles_slide_cnt ul li .htidx_articles_text p a{ font-size:inherit; color:#1d81e7;}
.htidx_articles_link{padding:13px 0 20px;}
.htidx_articles_link a{ color:#1d81e7; font-size:16px; line-height:1.4; font-weight:bold;}
.htidx_latest_cnt{ border-right:2px dashed #e6f3ff;}
.htidx_latest_artic{ margin-bottom:50px; position:relative;}
.htidx_latest_artic:before{ width:6px; height:6px; border-radius:6px; background:#41abfb; position:absolute; right:-4px; content:""; display:block; top:calc(50% - 2px); z-index:12;}
.htidx_latest_time{ max-width:85px; width:10%; display:inline-block; vertical-align:middle; text-align:center; margin-left:6%;}
.htidx_latest_time span{ font-size:18px; color:#41abfb;}
.htidx_latest_time p{ font-size:16px; color:#333; border-top:1px dashed #d6ecff;}
.htidx_latest_des{ width:83%; display:inline-block; vertical-align:middle;}
.htidx_latest_des h5{ font-size:18px; color:#333333; font-weight:bold; line-height:1.4; margin-bottom:12px;}
.htidx_latest_des h5 a{ font-size:inherit; color:#333333; font-weight:bold; text-decoration:none;}
.htidx_latest_des h5 a:hover{ color:#1d81e7;}
.htidx_latest_des p{ font-size:16px; color:#666666; line-height:1.7; display:inline;}
.htidx_latest_des a{ font-size:16px; color:#1d81e7;}

.htidx_backup{ position:fixed; left:20px; bottom:180px; z-index:15; display:none;}
.htidx_backup_cnt{ width:111px; border:1px solid #f0f0f0; border-radius:0 0 10px 10px; background:#fff;}
.htidx_backup_cnt a{ display:block; font-size:18px; color:#333333; line-height:49px; text-align:center; border-bottom:1px dashed #e9e9e9; text-decoration:none;}

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min--moz-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:3/2), only screen and (min-device-pixel-ratio:1.5) {
.htidx_banner{background:#707578 url(https://imobie-resource.com/ar/how-to/img/htidx_banner@2x.jpg) top center no-repeat; background-size:cover;} 
.htidx_sdspan1:before,.htidx_proba1:before{background:url(https://imobie-resource.com/ar/how-to/img/htidx_ico1@2x.png) top center no-repeat; background-size:cover;}
.htidx_sdspan2:before,.htidx_proba2:before{background:url(https://imobie-resource.com/ar/how-to/img/htidx_ico2@2x.png) top center no-repeat; background-size:cover;}
.htidx_sdspan3:before,.htidx_proba3:before{background:url(https://imobie-resource.com/ar/how-to/img/htidx_ico3@2x.png) top center no-repeat; background-size:cover;}
.htidx_sdspan4:before,.htidx_proba4:before{background:url(https://imobie-resource.com/ar/how-to/img/htidx_ico4@2x.png) top center no-repeat; background-size:cover;}
.htidx_sdspan5:before,.htidx_proba5:before{background:url(https://imobie-resource.com/ar/how-to/img/htidx_ico5@2x.png) top center no-repeat; background-size:cover;}
.htidx_sdspan6:before,.htidx_proba6:before{background:url(https://imobie-resource.com/ar/how-to/img/htidx_ico6@2x.png) top center no-repeat; background-size:cover;}
.htidx_sdspan7:before,.htidx_proba7:before{background:url(https://imobie-resource.com/ar/how-to/img/htidx_ico7@2x.png) top center no-repeat; background-size:cover;}

}


@media screen and (max-width: 1230px){	
.pw1200{ width:98%;}
.htidx_articles_slide_btn a,.htidx_articles_btn2, .htidx_articles_btn3{ width:130px; float:none; margin:10px;}
.htidx_sdarea h4,.htidx_sdlin ul li{ font-size:16px;}
.htidx_backup{ display:none !important;}
}

@media screen and (max-width: 980px){
.pw1200{ width:92%;}
.htidx_lef{ display:none;}
.htidx_pro_btns{ display:block; margin-bottom:10px;}
.htidx_class.show{ display:none;}
.htidx_proba,.htidx_class.showed{ display:block;}
.htidx_procnt{ display:none;}
.htidx_procnt.show{ display:block;}
.htidx_right{ max-width:100%; width:100%; float:none;}
.htidx_topics_slide_cnt ul{ max-width:100%; margin:0 auto; text-align:center;}
.htidx_latest_time{ text-align:center;}
.htidx_latest_time span,.htidx_latest_time p{ padding:0; text-align:center;}
.htidx_articles_slide_btn a, .htidx_articles_btn2, .htidx_articles_btn3{ width:150px;}
.htidx_topics_text p,.htidx_topics_text span,.htidx_right h2{ margin-top:15px;}
.htidx_topics_slide_cnt ul li{ display:block; float:none; width:250px; margin:10px auto;}
.htidx_articles_slide_cnt ul li img{ display:none;}
.htidx_articles_slide_cnt ul li .htidx_articles_text{ width:100%;}
}

@media screen and (max-width: 568px){
.htidx_banner{ height:auto;}
.htidx_bantext{ margin:40px auto;}
.htidx_articles{ padding-bottom:30px; position:relative;}
.htidx_articles:after{ width:100%; height:1px; background:#eaeaea; content:""; bottom:0; display:block; left:-4%; padding:0 4%; position:absolute;}
.htidx_latest{ margin-top:40px;}
.htidx_latest_time{ width:18%;}
.htidx_latest_des{ width:74%;}

.htidx_articles_slide_btn a.htidx_articles_btn1.checked{background:#37ad45;}
.htidx_articles_slide_btn a.htidx_articles_btn2.checked{background:#47b4f2;}
.htidx_articles_slide_btn a.htidx_articles_btn3.checked{background:#638ffb;}
.htidx_articles_slide_btn a.htidx_articles_btn4.checked{background:#3141a1;}
.htidx_articles_slide_btn a.htidx_articles_btn1.checked:after{border-top:7px solid #37ad45;}
.htidx_articles_slide_btn a.htidx_articles_btn2.checked:after{border-top:7px solid #47b4f2;}
.htidx_articles_slide_btn a.htidx_articles_btn3.checked:after{border-top:7px solid #638ffb;}
.htidx_articles_slide_btn a.htidx_articles_btn4.checked:after{border-top:7px solid #3141a1;}
.htidx_articles_slide_cnt ul.htidx_articles_havul1{ border:1px solid rgba(55,173,69,0.5);}
.htidx_articles_slide_cnt ul.htidx_articles_havul2{ border:1px solid rgba(71,180,241,0.5);}
.htidx_articles_slide_cnt ul.htidx_articles_havul3{ border:1px solid rgba(99,143,251,0.5);}
.htidx_articles_slide_cnt ul.htidx_articles_havul4{ border:1px solid rgba(49,65,161,0.5);}
.htidx_articles_slide_cnt ul.htidx_articles_havul1 li{border-bottom:1px solid rgba(55,173,69,0.5);}
.htidx_articles_slide_cnt ul.htidx_articles_havul2 li{border-bottom:1px solid rgba(71,180,241,0.5);}
.htidx_articles_slide_cnt ul.htidx_articles_havul3 li{border-bottom:1px solid rgba(99,143,251,0.5);}
.htidx_articles_slide_cnt ul.htidx_articles_havul4 li{border-bottom:1px solid rgba(49,65,161,0.5);}
}

@media screen and (max-width: 375px){
.htidx_articles_slide_btn a, .htidx_articles_btn2, .htidx_articles_btn3{ width:130px;}
}
@media screen and (max-width: 360px){
.htidx_proba a{ margin:0 5px 0 0;}
.htidx_articles_slide_btn a, .htidx_articles_btn2, .htidx_articles_btn3{ width:120px;}
.htidx_pro_btns a{ font-size:16px;}
}