html{ color: #2b2b2b; } .guideTitle { color: #282E3B; font-size: 30px; } .guide_warpper { padding: 40px; } .guideSelect{ font-size: 18px; display: inline-block; margin-left: 50px; position: relative; cursor: pointer; } .guideSelect > span{ font-size: 30px; color: #6D9CE6; margin: 0 10px; } .guideSelect ul{ z-index:-1; position: absolute; top: 100px; left: 0; right:0; background: #fff; text-align: center; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); font-size: 14px; line-height: 28px; padding: 10px 0; filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; -webkit-transition:all .5s; max-height: 200px; overflow: auto; } .guideSelect:hover ul{ top: 42px; z-index: 9; filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1; } .guideSelect li{ transition:all 0.3s; -moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; -webkit-transition:all 0.3s; } .guideSelect li:hover{ background: #F0F0F0; } .guideSec{ padding: 25px 35px 35px; border: 1px solid #E9E9E9; background: #FCFCFC; border-radius: 10px; margin-top: 30px; } .guideSecT{ font-size: 20px; } .complete{ display: inline-block; font-size: 14px; margin-left: 30px; vertical-align: bottom; white-space: nowrap; position: relative; top: -2px; } .completeLine{ width: 220px; height: 12px; display: inline-block; position: relative; border-radius: 6px; background: #EBEBEB; overflow: hidden; margin-right: 30px } .complete > span{ color: #FFA64F; margin-left: 5px; } .completeLine div { position: absolute; top: 0; left: 0; height: 12px; border-radius: 6px; background: url('../../../Content/images/guide/guideSec1-1.png'); } .guideSecTBtn{ width: 28px; height: 28px; border-radius: 2px; border: 1px solid #CDCDCD; text-align:center; float: right; background: #fff; cursor: pointer; } .guideSecTBtn i{ font-size: 20px; line-height: 26px; transition:all 0.3s; -moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; -webkit-transition:all 0.3s; } .guideSecTBtn.active i{ transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); } .guideSec1Box{ overflow: hidden; /*transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; -webkit-transition:all .5s;*/ } /*.guideSec1.active .guideSec1Box{ height: 0 }*/ .guideSec1Box1{ float: left; margin-top: 30px; } .guideSec1Box3{ overflow: hidden; } .guideSecT2{ font-size: 18px; margin-top: 30px; } .guideSec1Con{ overflow: hidden; float: left; } .guideSec1Cons{ width: 268px; float: left; background: #6D9CE6; height: 68px; text-align: center; cursor: pointer; border-radius: 2px; } .guideSec1Txts{ color: #fff; max-width: 200px; font-size: 18px; } .guideSec1Cons img{ width: 32px; margin-right: 15px; } .guideSec1L{ width: 200px; height: 68px; border: 1px solid #CDCDCD; border-radius: 2px 0 0 2px; border-right: 0; font-size: 14px; background: #fff; float: left; } .guideSec1L > *,.guideSec1Cons > *{ display: inline-block; vertical-align: middle; } .line{ height: 100%; width: 1px; } .guideSec1L span{ margin:0 5px 0 15px; font-size: 40px; color: #D9D9D9; } .guideSec1Txt{ width: 146px; font-size: 18px; } .guideSec1R{ width: 68px; height: 68px; border-radius: 0 2px 2px 0; font-size: 12px; color: #fff; float: left; text-align: center; cursor: pointer; } .guideSec1R span{ width: 100%; display: inline-block; } .yellow{ background: #FFA64F; } .blue{ background: #6D9CE6; } .guideSec1R i{ display: inline-block; text-align: center; width: 27px; height: 27px; border-radius: 50%; font-style: normal; border: 2px solid #fff; line-height: 23px; margin: 11px 0 4px; } .right{ width: 38px; margin: 21px 20px 20px 20px; float: left; } .guideSec1Texts{ width: 95%; text-align: center; }