@charset "utf-8";
@import url("reset.css");
#wrap{position:relative;width:800px;height:629px;margin:30px auto;}
#wrap .close-btn{display:block;position:absolute;top:0px;right:0px;width:55px;height:55px;}

/* intro */
.intro-page{background:url('../images/tutorial/intro.jpg') no-repeat;}
.intro-page .intro_btn{position:absolute;top:444px;left:50%;margin-left:-128px;*zoom:1}
.intro-page .intro_btn:after { content:""; clear:both; display:block}
.intro-page .intro_btn > li{float:left;}
.intro-page .intro_btn a{display:block;width:120px;height:48px;line-height:48px;margin:0px 4px;text-align:center;font-size:24px;color:#fff;}
.intro-page .intro_btn .ok_btn{background:url('../images/tutorial/btn-bg-on.png') no-repeat;}
.intro-page .intro_btn .no_btn{background:url('../images/tutorial/btn-bg-of.png') no-repeat;}
.intro-page .all-view-btn{position:absolute;bottom:33px;left:43px;}


/* step */
.step-page{background:url('../images/tutorial/base_bg.jpg') no-repeat;}
.step-page .header{}
.step-page .header .title-wrap{height:59px;line-height:59px;*zoom:1}
.step-page .header .title-wrap:after { content:""; clear:both; display:block}
.step-page .header .title{float:left;width:443px;height:59px;padding:0px 0px 0px 15px;font-size:20px;color:#fff;letter-spacing:-1px;}
.step-page .header .gnb{float:left;padding:0px 13px;*zoom:1}
.step-page .header .gnb:after { content:""; clear:both; display:block}
.step-page .header .gnb > li{float:left;margin:0px 4px;}
.step-page .header .list-chk{margin:34px 0px 13px 638px;*zoom:1}
.step-page .header .list-chk:after { content:""; clear:both; display:block}
.step-page .header .list-chk > li{float:left;width:28px;height:8px;margin:0px 2px;background:url('../images/tutorial/icon-list-of.jpg') no-repeat;}
.step-page .header .list-chk > li.on{background:url('../images/tutorial/icon-list-on.jpg') no-repeat;}

.step-page .question{width:651px;margin:50px auto 90px;text-align:center;font-size:30px;color:#333333;}
.step-page .question.be{margin:50px auto 55px;}
.step-page .question.be2{margin:30px auto 25px;}
.step-page .question.be3{margin:20px auto 12px;}
.step-page .question.tum{text-align:left;}
.step-page .question .order{padding-right:8px;color:#aaaaaa;}
.step-page .answer-list{width:651px;margin:0px auto 0px;}
.step-page .answer-list > li{position:relative;height:62px;line-height:60px;padding:0px 80px;}
.step-page .answer-list.tum > li{padding:0px 20px 0px 25px;}
.step-page .answer-list > li a{display:block;height:62px;color:#454545;font-size:20px;}
.step-page .answer-list > li a .num{display:inline-block;width:32px;height:32px;line-height:28px;margin-right:8px;background:url('../images/tutorial/num-icon-of.png') no-repeat;text-align:center;font-size:18px;color:#939393;}
.step-page .answer-list > li:hover{background:url('../images/tutorial/se-bg.gif') no-repeat;}
.step-page .answer-list > li:hover a{color:#eb2a2e;}
.step-page .answer-list > li:hover .num{background-image:url('../images/tutorial/num-icon-on.png');color:#fff;}

.step-page .answer-list > li .sub-ex-box{display:none;position:absolute;width:442px;left:250px;bottom:25px;font-size:14px;color:#454545;line-height:22px;}
.step-page .answer-list > li .sub-ex-box div{width:442px;}
.step-page .answer-list > li .sub-ex-box .top{height:16px;background:url('../images/tutorial/ex-box-top.png') no-repeat;}
.step-page .answer-list > li .sub-ex-box .con{width:400px;padding:0px 20px;background:#fef9d1;border-left:1px solid #cecece;border-right:1px solid #cecece;}
.step-page .answer-list > li .sub-ex-box .bot{height:40px;background:url('../images/tutorial/ex-box-bot.png') no-repeat;}
.step-page .answer-list > li:hover .sub-ex-box{display:block;}


.befor-question{width:651px;margin:-6px auto 0px;}
.befor-question > li{height:42px;line-height:42px;background:url('../images/tutorial/dott.gif') repeat-x bottom;text-align:left;padding-left:37px;/*color:#aaaaaa;*/font-size:20px;overflow:hidden;}

.t-box-wrap{position:absolute;left:5px;right:5px;bottom:0px;width:790px;padding:35px 0px 25px;background:url('../images/tutorial/t-bg-n.jpg') no-repeat;}
.t-box-wrap .t-box{position:relative;width:696px;height:315px;margin:0px auto;background:#fff;border:7px solid #2880d2;}
.t-box-wrap .t-box img{display:block;position:absolute;top:50%;}
.t-box-wrap .t-box.over{overflow-y:scroll;}

.t-box-wrap.dep4{background:url('../images/tutorial/t-bg.jpg') no-repeat;}
.t-box-wrap.dep4 .t-box{height:270px;}

.all-item-wrap{width:710px;height:510px;margin:34px auto;overflow-y:scroll}
.all-item-wrap .all-item-table{width:100%;font-size:16px;}
.all-item-wrap .all-item-table th ,.all-item-wrap .all-item-table td{border:1px solid #b1b1b1;}
.all-item-wrap .all-item-table th{background:#f4fbfd;color:#333333;}
.all-item-wrap .all-item-table td{padding:10px 20px;color:#777777;line-height:32px;}
.all-item-wrap .all-item-table th.point{color:#eb2a2e;}
.all-item-wrap .item-lists{*zoom:1}
.all-item-wrap .item-lists:after { content:""; clear:both; display:block}
.all-item-wrap .item-lists > li{cursor:pointer}
.all-item-wrap .item-lists .icon{float:right;}

.pop-wrap {display:none;position:absolute;top:150px;left:50%;width:710px;margin-left:-355px;}
.pop-wrap .pop-close-btn{display:block;text-align:right;}
.pop-wrap .pop-img{width:696px;border:7px solid #2880d2;}
/**/