/*!
 * Hongtu DNS (防劫持专题页)
 * Author: Abner
 * Update by 2019-04-9
 */

/*=======公共=========*/
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;  }
@font-face {font-family: 'Roboto-Regular'; src: url('font/Roboto-Regular.ttf');}
a{color: #5a5a5a;}
img{vertical-align: bottom;}
body{padding: 0;margin: 0;font-family: 'Roboto-Regular', serif;letter-spacing: 1px;}
.container{margin: 0 15px;}
.ponit{color: #F00;}
@media screen and (min-width: 960px){.container {margin: 0 auto;width: 930px;}}

/* ==========================header========================== */
header{background-color: #28A9E0;height: 44px;text-align: center;color: #fff;}
header .logo-icon h1{display: inline-block;font-size: 0;color: transparent;}
header .logo-icon img{max-height: 42px;}
@media screen and (min-width: 960px){header{padding-top: 16px;background-color: #2a2a2a;height: 96px;text-align: left;}header .logo-icon img{max-height: 72px;}}

/* ============================footer======================== */
footer{color: #fff;}
footer .tip{padding-top: 15px;padding-bottom: 15px;background-color: #3a3a3a;text-align: justify;font-size: 14px;}
footer .download{padding-top: 20px;padding-bottom: 30px;border-bottom: 1px solid #5a5a5a;background-color: #2a2a2a;}
footer .download h3{margin: 0 0 15px 0;font-size: 12px;}
footer .download ul{opacity: .7;display: flex;justify-content: space-around;margin: 0;padding-left: 0;list-style: none;}
footer .download ul li a{display: inline-block;color: #fff;text-decoration: none;text-align: center;font-size: 12px;}
footer .download ul li a img{margin-bottom: 5px;width: 30px;height: 30px;}
footer .download ul li a span{display: block;}
footer .copyright-box{padding-top: 20px;padding-bottom: 20px;background-color: #2a2a2a;text-align: center;}
footer .copyright-box img{margin: 0 auto 15px auto;display: block;width: auto;height: 20px;}
footer .copyright-box small{opacity: .7;font-size: 12px;line-height: 20px;}
@media screen and (min-width: 760px){footer .download ul{ justify-content: space-around;}footer .copyright-box img{margin: 0 20px 0 0;display: inline-block;}}
@media screen and (min-width: 960px){footer .copyright-box .container{display: flex;justify-content: space-around;}}

/* =======================index=============================*/
/*ibet-dns */
.ibet-dns{margin-bottom: 50px;background-size: auto 150%;background-position: center top;color: #fff;}
.ibet-dns .cover{padding-top: 95px;padding-bottom: 95px;background-color: rgba(0, 0, 0, 0.3);text-align: center;}
.ibet-dns .cover > h2{margin: 0 0 20px 0;font-size: 30px;}
.ibet-dns .cover > p{margin: 20px auto;width: 232px;font-size: 18px;text-align: justify;}
.ibet-dns .cover h2{margin: auto;}
.ibet-dns .cover .cover-text span{margin-left: -140px;display: block;}
.qcode-box{width: 270px;float: right;}
.qcode-box .qcode-buttom{font-size: 12px;font-weight: normal;}
.qcode-box .qcode-title{color: #ffc107;margin: 10px;font-size: 16px;}
#qcode{width:150px;height:150px;margin:auto;background: no-repeat center;}
#qcode img{margin: 10px;}
.ibet-dns .cover > h2 .text-length{display: inline-block;}
@media screen and (max-width: 768px){
    .ibet-dns .cover > h2 .qcode-box{ display: none; }
    .ibet-dns .cover .cover-text{ width: 100%; padding: 0 30px; }
    .ibet-dns .cover .cover-text span{ width: 100%; margin-left: 0; }
}
@media screen and (min-width: 760px){
    .ibet-dns{background-size: 100% auto;background-position: center center;}
    .ibet-dns .cover{padding-top: 160px;padding-bottom: 160px;}
    .ibet-dns .cover > h2{font-size: 34px;width: 760px;}
    .ibet-dns .cover > h2 .text-length{width: 468px;}
    .ibet-dns .cover > p{width: 340px;}
    .ibet-dns .cover-text span{width: 340px;}
}
@media screen and (min-width: 960px){
    .ibet-dns .cover{padding-top: 225px;padding-bottom: 225px;}
    .ibet-dns .cover > h2{font-size: 50px;width: 964px;}
    .ibet-dns .cover > h2 .text-length{width: 682px;}
    .ibet-dns .cover > p{width: 520px;}
    .ibet-dns .cover-text span{width: 520px;}
}
@media screen and (min-width: 1280px){
    .ibet-dns .cover{padding-top: 225px;padding-bottom: 225px;}
    .ibet-dns .cover > h2{font-size: 70px;width: 1180px;}
    .ibet-dns .cover > h2 .text-length{width: 900px;}
    .ibet-dns .cover > p{width: 725px;}
    .ibet-dns .cover-text span{width: 725px;}
}
@media screen and (min-width: 1440px){
    .ibet-dns .cover{padding-top: 225px;padding-bottom: 225px;}
    .ibet-dns .cover > h2{font-size: 80px;width: 1320px;}
    .ibet-dns .cover > h2 .text-length{width: 1040px;}
    .ibet-dns .cover > p{width: 725px;}
    .ibet-dns .cover-text span{width: 725px;}
}
/* tutorial-box */
.tutorial-box{display: flex;flex-direction: column;margin-bottom: 50px;color: #fff;}
.tutorial-box .img-box{background-size: 100% auto;background-position: center center;background-repeat: no-repeat;height: 200px;}
.tutorial-box .content-box{padding: 35px 30px;background-color: #3a3a3a;}
.tutorial-box .content-box h2{margin: 0;font-size: 30px;text-align: center;}
.tutorial-box .content-box h2 small{margin-top: 35px;display: block;font-size: 20px;}
.tutorial-box .content-box h2 small .sub-title a{color: #fff;}
.tutorial-box .content-box h2 small .sub-title .url-text-h{margin-right: -7px;}
.tutorial-box .content-box h2 small .sub-title .url-text-c{margin-left: -7px;}
.tutorial-box .content-box h2 small .highlight{color: #ffc107;}
.tutorial-box .content-box h2 small .sub-title{display: block;}
.tutorial-box .content-box h2 small .sub-title:first-child{width: 100%;margin-bottom: 15px;}
.tutorial-box .content-box h2 small .sub-title:last-child{margin-bottom: 35px;}
.tutorial-box .content-box p{margin: 0 0 30px 0;text-align: justify;font-size: 14px;}
.tutorial-box .content-box ul{display: flex;justify-content: space-around;margin: 0;padding-left: 0;list-style: none;}
.tutorial-box .content-box ul li a{color: #ffc107;text-decoration: none;font-size: 14px;}
.tutorial-box .content-box ul li a .arrow-icon{width: 10px;height: 17px;}
@media screen and (min-width: 760px){
    .tutorial-box .content-box{padding: 35px 50px;}
    .tutorial-box .content-box h2 small .sub-title{display: inline-block;}
    .tutorial-box .content-box ul{justify-content: center;}
    .tutorial-box .content-box ul li{margin-right: 25px;}
    .tutorial-box .content-box ul li:last-child{margin-right: 0;}
}
@media screen and (min-width: 860px){
    .tutorial-box{flex-direction: row;align-items: center;}
    .tutorial-box.reverse .img-box{order: 2;}
    .tutorial-box.reverse .content-box{order: 1;}
    .tutorial-box.reverse .img-box{transform-origin: right center;}
    .tutorial-box .img-box{position: relative;z-index: 1;transform-origin: left center;transform: scaleX(1.05);flex: 0 1 auto;width: 50%;height: 340px;}
    .tutorial-box .content-box{flex: 0 1 50%;}
}
/* ==========================web=========================  */
.tutorial-select{display: flex;align-items: center;}
.tutorial-select .left-btn a,.tutorial-select .right-btn a{text-decoration: none;width: 100%;height: 100%;}
.tutorial-select .left-btn{position: relative;flex: 0 1 auto;padding-left: 10px;padding-right: 10px;transform: rotate(90deg);}
.tutorial-select .left-btn::after{position: absolute;left: 50%;top: 130%;content: '';display: inline-block;width: 1px;height: 30px;background-color: #000;}
.tutorial-select .img {flex: 1 1 auto;background-size: auto 100%;background-repeat: no-repeat;background-position: center top;height: 330px;line-height: 330px;font-size: 30px;text-align: center;color: #fff;}
.tutorial-select .img .img-bg{width: 100%;height: 100%;background-color: rgba(0, 0, 0, .3);}
@media screen and (min-width: 620px){.tutorial-select .img{height: 500px;line-height: 500px;}}
@media screen and (min-width: 970px){.tutorial-select .img{background-size: 100% auto;font-size: 60px;}}
.tutorial-select .right-btn{flex: 0 1 auto;padding-left: 10px;padding-right: 10px;transform: rotate(90deg);}
.tutorial-select .right-btn::after{position: absolute;left: 50%;top: -130%;content: '';display: inline-block;width: 1px;height: 30px;background-color: #000;}
.tutorial-button-box{position: relative;margin: 0 15px;padding: 30px 0;}
@media screen and (min-width: 620px){.tutorial-button-box{padding: 60px 0;}}
.tutorial-button-title{position: relative;display: inline-block;padding: 12px 20px;border-radius: 2px;border: 1px solid #1C98CC;width: 100%;height: 100%;background-color: #1C98CC;color: #fff;text-decoration: none;cursor: pointer;}
.tutorial-button-title::after{content: ''; position: absolute; top: 18px; right: 42px;transform: rotate(45deg);display: inline-block; width: 6px; height: 6px; border-right: 2px solid #FFF; border-bottom: 2px solid #FFF;}
@media screen and (min-width: 620px){.tutorial-button-title{display: none;}}
.tutorial-button{position: absolute;left: 0;right: 0;display: flex;flex-direction: column;justify-content: center;margin: 0;padding-left: 0;list-style: none;font-size: 16px;}
@media screen and (min-width: 620px){.tutorial-button{position: static;flex-direction: row;}}
.tutorial-button li{border: 1px solid #1C98CC;border-top: none;background-color: #fff;}
@media screen and (min-width: 620px){.tutorial-button li{margin-right: 30px;border-radius: 2px;border-top: 1px solid #1C98CC;}}
.tutorial-button li:last-child{margin-right: 0;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;}
.tutorial-button li a{display: inline-block;padding: 12px 20px;width: 100%;height: 100%;color: #1C98CC;text-decoration: none;transition: all 500ms;}
.tutorial-button li a:hover{background-color: #28A9E0;color: #fff;}
@media screen and (min-width: 620px){.tutorial-button li a{width: 180px;}.tutorial-button li.active a{background-color: #1C98CC;color: #fff;}}
/* 步驟 */
.main-box{padding: 0 15px;}
.main-box img{max-width: 275px;width: 100%;height: auto;}
.main-box img.img-508{max-width: 508px;}
/* 返回鍵 */
.back{margin: 50px 0;}
.back a{text-decoration: none;}
.back a span{font-size: 16px;color: #28A9E0;}
.back a img{display: inline-block;width: 10px;height: 22px;}
/*  麵包屑 */
.web-tutorial{text-align: center;}
.web-tutorial .breadcrumbs{list-style: none;padding-left: 84px;display: flex;color: #5a5a5a;}
.web-tutorial .breadcrumbs li:not(:last-child)::after{content: '/';display: inline-block;margin: 0 5px;}
.web-tutorial .breadcrumbs li a{text-decoration:none;}
/* 一鍵修改 */
#key-change-tutorial{padding-bottom: 120px;}
#key-change-tutorial div{padding: 10px;display: inline-flex;align-items: center;justify-content: center;border: 1px solid #000;width: 300px;border-radius: 5px;background-color: #000;}
#key-change-tutorial p{margin-bottom: 50px;}
#key-change-tutorial p span{display: inline-block;margin-top: 15px;}
#key-change-tutorial div img{margin-right: 15px;color: #ffc107;width: 32px;height: 32px;}
#key-change-tutorial div a{text-decoration:none;color: #ffc107;}
/* 手動教程 */
.manual-tutorial ul{margin: 0;padding-left: 0;list-style: none;}
.manual-tutorial ul  li{margin-bottom: 50px;}
.manual-tutorial ul li p{margin-bottom: 30px;}
/* mac教程 */
.mac-tutorial ul{margin: 0;padding-left: 0;list-style: none;}
.mac-tutorial ul li{margin-bottom: 50px;}
.mac-tutorial ul li p{margin-bottom: 30px;}

/*=========================tablet和mobile=========================*/
.android-tutorial img,.ios-tutorial img{margin: 0 5%;width: 90%;max-width: 274px;}
/* android教程 */
.android-tutorial ul{margin: 0;padding-left: 0;list-style: none;}
.android-tutorial ul  li{margin-bottom: 50px;}
.android-tutorial ul li p{margin-bottom: 30px;}
/*ios教程 */
.ios-tutorial ul{margin: 0;padding-left: 0;list-style: none;}
.ios-tutorial ul li{margin-bottom: 50px;}
.ios-tutorial ul li p{margin-bottom: 30px;}
/*麵包屑 */
.tablet-tutorial,.mobile-tutorial{text-align: center;}
.tablet-tutorial .breadcrumbs,.mobile-tutorial .breadcrumbs{list-style: none;padding-left: 84px;display: flex;color: #5a5a5a;}
.tablet-tutorial .breadcrumbs li:not(:last-child)::after,.mobile-tutorial .breadcrumbs li:not(:last-child)::after {content: '/';display: inline-block;margin: 0 5px;}
.tablet-tutorial .breadcrumbs li a,.mobile-tutorial .breadcrumbs li a{text-decoration:none;}