
#mainWrap {width:100%; height: 100%;}
#mainWrap #mainHeader {width:100%; height: 80px; background: #fff;}

#mainWrap #visual {width:100%; height: 570px; background: url(../jj_images/main/visual.png) center 0 no-repeat;}
#mainWrap #visual #visualContents {width:1000px; margin:0 auto;}
#mainWrap #visual #visualContents #eventBanner {width: 382px; height: 233px; padding-top:70px; background: url(../jj_images/main/displayBg.png) 0 70px no-repeat; }
#mainWrap #visual #visualContents #eventBanner #event01 {width: 360px; height: 202px; background: url(../jj_images/main/eventBg02.png) 0 0 no-repeat; background-size: 360px 202px; margin:11px; text-indent: -10000px;}
#mainWrap #visual #visualContents #eventBanner #event01 #eventBtn01 a {width: 295px; height: 55px; background: url(../jj_images/main/eventBtn01.png) 0 0 no-repeat; margin:110px 0 0 35px; display: block;}
#mainWrap #visual #visualContents #eventBanner #event01 #eventText {padding:12px 0 0 260px;}
#mainWrap #visual #visualContents #eventBanner #event01 #eventText #loginPrev {width:70px; height: 13px; background: url(../jj_images/main/eventText.png) 0 0 no-repeat; text-indent: -10000px;}
#mainWrap #visual #visualContents #eventBanner #event01 #eventText #loginNext {width:70px; height: 13px; font-weight: bold; font-size: 13px; text-align: right; line-height: 14px;}

#mainWrap #visual #visualContents #comment {width:336px; padding: 0 23px; display: inline-block; margin-top: 15px;}
#mainWrap #visual #visualContents #comment #title h4 {width: 98px; height: 14px; background: url(../jj_images/main/commentTitle.png) 0 0 no-repeat; text-indent: -10000px; float: left;}
#mainWrap #visual #visualContents #comment #title #commentBtn a {width: 37px; height: 7px; background: url(../jj_images/main/moreBtn.png) 0 0 no-repeat; text-indent: -10000px; display: block; float: right;}

#mainWrap #visual #visualContents #comment #commentContents {width:100%;}
#mainWrap #visual #visualContents #comment #commentContents ul {margin-top: 30px;}
#mainWrap #visual #visualContents #comment #commentContents li {width:100%; color: #7b5f39; display: inline-block; margin-top: 5px; font-size: 12px;}
#mainWrap #visual #visualContents #comment #commentContents li .commentSubject {width:270px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; float: left;}
#mainWrap #visual #visualContents #comment #commentContents li .commentName {width:60px; display: block; float: right; text-align: right;}

#mainWrap #visual #visualContents #visualBtnWrap {width:336px; height: 53px; margin: 25px 0 0 23px; text-indent: -10000px;}
#mainWrap #visual #visualContents #visualBtnWrap #visualBtn01 a {width:160px; height: 53px; background:url(../jj_images/main/visualBtn01.png) 0 0 no-repeat; display: block; float: left;}
#mainWrap #visual #visualContents #visualBtnWrap #visualBtn02 a {width:160px; height: 53px; background:url(../jj_images/main/visualBtn02.png) 0 0 no-repeat; display: block; float: left; margin-left: 90px;}

#mainWrap  #contWrap {width:998px; height: 1310px; margin:0 auto; border-left:1px solid #ddd; border-right: 1px solid #ddd;}

#mainWrap  #contWrap #contentsWrap #sectionBg {width: 399px; height: 337px; padding: 40px; background: url(../jj_images/main/sectionBg.png) 0 0 repeat; }

#mainWrap  #contWrap #contentsWrap #section01 {width:479px; height: 417px; border-right: 1px solid #ddd; padding: 10px; float: left;}
#mainWrap  #contWrap #contentsWrap #section01 #title a {width:62px; height: 16px; background: url(../jj_images/main/titleSprite.png) 0 0 no-repeat; display: block; text-indent: -10000px;}
#mainWrap  #contWrap #contentsWrap #section01 .list li.hidden_box{display: none}

#mainWrap  #contWrap #contentsWrap #section01 .list li {margin-top: 5px; color:#666666; display: inline-block; width: 100%}
#mainWrap  #contWrap #contentsWrap #section01 .list li .image{display: none}
#mainWrap  #contWrap #contentsWrap #section01 .list li .previewCategory{display: none}
#mainWrap  #contWrap #contentsWrap #section01 .list li .previewSubject {width:290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; float: left;}
#mainWrap  #contWrap #contentsWrap #section01 .list li .previewContents {width:290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: none; float: left;}
#mainWrap  #contWrap #contentsWrap #section01 .list li .preivewDate {width:80px; display: block; float: right; text-align: right;}

#mainWrap  #contWrap #contentsWrap #section01 .list li:first-child {width:100%; height: 250px;color:#444; display: block; overflow: hidden;}
#mainWrap  #contWrap #contentsWrap #section01 .list li:first-child .image {display:block;margin:20px 0 15px 0;overflow: hidden;}
#mainWrap  #contWrap #contentsWrap #section01 .list li:first-child .image img {width:367px; height: 79px;}
#mainWrap  #contWrap #contentsWrap #section01 .list li:first-child .previewCategory{display: block}
#mainWrap  #contWrap #contentsWrap #section01 .list li:first-child .previewSubject{display: none}
#mainWrap  #contWrap #contentsWrap #section01 .list li:first-child .previewContents {width:auto;height: 98px;overflow: hidden;text-overflow: clip;white-space: pre-line;display: block;}
#mainWrap  #contWrap #contentsWrap #section01 .list li:first-child .preivewDate {display: block; float: none;clear: both;text-align: left;}

/*#mainWrap  #contWrap #contentsWrap #section01 .list li {margin-top: 5px; color:#666666; display: inline-block; width: 100%}*/
/*#mainWrap  #contWrap #contentsWrap #section01 .list li .previewSubject {width:290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; float: left;}*/
/*#mainWrap  #contWrap #contentsWrap #section01 .list li .preivewDate {width:80px; display: block; float: right; text-align: right;}*/

#mainWrap  #contWrap #contentsWrap #section02 {width:478px; height: 417px; padding: 10px; float: left; text-indent: -10000px}
#mainWrap  #contWrap #contentsWrap #section02 #updownBg {background:url(../jj_images/main/updownBanner.png) center 50px no-repeat; width:400px; height: 210px; padding: 50px 0 168px 0; border-bottom: 1px solid #ddd; margin:0 auto;}
#mainWrap  #contWrap #contentsWrap #section02 #updownBg #updownTitle {width: 162px; height: 19px; background: url(../jj_images/main/updownTitle.png) 0 0 no-repeat; margin: 240px auto 30px auto;}
#mainWrap  #contWrap #contentsWrap #section02 #updownBg #goBtn a {width: 160px; height: 35px; background: url(../jj_images/main/goBtn.png) 0 0 no-repeat; display: block; margin: 0 auto;}

#mainWrap  #contWrap #contentsWrap #section03 {width:479px; height: 417px; border-right: 1px solid #ddd; margin-top: -10px; padding: 10px 10px 20px 10px; float: left; text-indent: -10000px}
#mainWrap  #contWrap #contentsWrap #section03 #reviewBg {background:url(../jj_images/main/reviewBanner.png) center 50px no-repeat; width:400px; height: 210px; padding: 50px 0 175px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin:0 auto;}
#mainWrap  #contWrap #contentsWrap #section03 #reviewBg #reviewTitle {width: 211px; height: 19px; background: url(../jj_images/main/reviewTitle.png) 0 0 no-repeat; margin: 240px auto 30px auto;}
#mainWrap  #contWrap #contentsWrap #section03 #reviewBg #goBtn a {width: 160px; height: 35px; background: url(../jj_images/main/goBtn.png) 0 0 no-repeat; display: block; margin: 0 auto;}

#mainWrap  #contWrap #contentsWrap #section04 {width:478px; height: 417px; padding: 10px; float: left;}
#mainWrap  #contWrap #contentsWrap #section04 #title a {width:62px; height: 16px; background: url(../jj_images/main/titleSprite.png) 0 -16px no-repeat; display: block; text-indent: -10000px;}
#mainWrap  #contWrap #contentsWrap #section04 .list li.hidden_box{display: none}

#mainWrap  #contWrap #contentsWrap #section04 .list li {margin-top: 5px; color:#666666; display: inline-block; width: 100%;position: relative;}
#mainWrap  #contWrap #contentsWrap #section04 .list li .image{display: none}
#mainWrap  #contWrap #contentsWrap #section04 .list li .previewCategory{display: none}
#mainWrap  #contWrap #contentsWrap #section04 .list li .previewSubject {width:290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; float: left;}
/*#mainWrap  #contWrap #contentsWrap #section04 #list li .previewSubject {width:290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; float: left;}*/
#mainWrap  #contWrap #contentsWrap #section04 .list li .previewContents {width:290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: none; float: left;}
/*#mainWrap  #contWrap #contentsWrap #section04 #list li .preivewDate {width:80px; display: block; float: right; text-align: right;}*/
#mainWrap  #contWrap #contentsWrap #section04 .list li .preivewDate {width:80px; display: block; float: right; text-align: right;}

#mainWrap  #contWrap #contentsWrap #section04 .list li:first-child .previewCategory{width:100%; display: block; font-weight: bold; margin: 20px 0 10px 0;}
/*#mainWrap  #contWrap #contentsWrap #section04 #preview #subject {width:100%; display: block; font-weight: bold; margin: 20px 0 10px 0;}*/
/*#mainWrap  #contWrap #contentsWrap #section04 #preview #contents {width:100%; height: 120px; display: block; overflow: hidden;}*/
/*#mainWrap  #contWrap #contentsWrap #section04 #preview #date {margin: 10px 0 60px; display: block;}*/
#mainWrap  #contWrap #contentsWrap #section04 .list li:first-child {width:100%; height: 250px;color:#444; display: block; overflow: hidden;}
#mainWrap  #contWrap #contentsWrap #section04 .list li:first-child .image {display:none;}
#mainWrap  #contWrap #contentsWrap #section04 .list li:first-child .previewCategory{display: block}
#mainWrap  #contWrap #contentsWrap #section04 .list li:first-child .previewSubject{display: none}
#mainWrap  #contWrap #contentsWrap #section04 .list li:first-child .previewContents {width:auto;height: 160px;overflow: hidden;text-overflow: clip;white-space: pre-line;display: block;}
#mainWrap  #contWrap #contentsWrap #section04 .list li:first-child .preivewDate {position: absolute;bottom: 25px; display: block; float: none;clear: both;text-align: left;}




#mainWrap  #contWrap #contentsWrap #section05 {width:479px; height: 417px; border-right: 1px solid #ddd; padding: 10px; float: left;}
#mainWrap  #contWrap #contentsWrap #section05 #title {width:49px; height: 16px; background: url(../jj_images/main/titleSprite.png) 0 -32px no-repeat; display: block; text-indent: -10000px;}

#section05 > div{padding: 40px;background: url(../jj_images/main/sectionBg.png) 0 0 repeat;position: relative; top: 0px; left: 0px; width: 399px; height: 337px; overflow: hidden;}
#section05 > div > div {margin: 40px}

#mainWrap  #contWrap #contentsWrap #section05 #tab1 #tab01Title {width:387px; height: 96px; background: url(../jj_images/main/quizkingBanner1.png) 0 0 no-repeat; text-indent: -10000px;}
#mainWrap  #contWrap #contentsWrap #section05 #tab2 #tab01Title {width:387px; height: 96px; background: url(../jj_images/main/quizkingBanner2.png) 0 0 no-repeat; text-indent: -10000px;}
#mainWrap  #contWrap #contentsWrap #section05 #quizTab {display: inline-block; margin:20px 0;}
#mainWrap  #contWrap #contentsWrap #section05 #quizTab .tab1 {width: 82px; height: 20px; display: block; text-indent: -10000px; background: url(../jj_images/main/tab1.png) 0 0 no-repeat;}
#mainWrap  #contWrap #contentsWrap #section05 #quizTab .tab2 {width: 82px; height: 20px; display: block; text-indent: -10000px; background: url(../jj_images/main/tab2.png) 0 0 no-repeat;}

#mainWrap  #contWrap #contentsWrap #section05 #quizKing {width:250px; margin:20px auto;}
#mainWrap  #contWrap #contentsWrap #section05 #quizKing span {font-weight: bold;}
#mainWrap  #contWrap #contentsWrap #section05 #quizKing .quizInput {font-weight:normal;width:110px; background: #fff; border:1px solid #ccc;text-align: center;display: inline-block}

#mainWrap  #contWrap #contentsWrap #section05 #topRankerWrap {width:100%; height: 85px;}
#mainWrap  #contWrap #contentsWrap #section05 #topRankerWrap ul {display: inline-block;}
#mainWrap  #contWrap #contentsWrap #section05 #topRankerWrap li {width:120px; float: left; margin-left: 15px;}
#mainWrap  #contWrap #contentsWrap #section05 #topRankerWrap li .starWrap {width:100%; text-align: center;}
#mainWrap  #contWrap #contentsWrap #section05 #topRankerWrap li .starWrap span.star {width:15px; height: 15px;margin-right: 2px; background: url(../jj_images/main/star.png) 0 0 no-repeat; display: inline-block;}
#mainWrap  #contWrap #contentsWrap #section05 #topRankerWrap li:first-child {margin-left: 0;}
#mainWrap  #contWrap #contentsWrap #section05 #topRankerWrap li .namePlate {font-weight: bold; border:1px solid #ddd; text-align: center; padding: 15px 0; background: #e9e9e9; width:118px;}
#mainWrap  #contWrap #contentsWrap #section05 #topRankerWrap li .score {font-weight: normal; display: block;}

#mainWrap  #contWrap #contentsWrap #section05 #listWrap {width:100%; height: 85px;}
#mainWrap  #contWrap #contentsWrap #section05 #listWrap ul {display: inline-block;}
#mainWrap  #contWrap #contentsWrap #section05 #listWrap li {width:179px; padding: 0 10px; float: left; margin-bottom: 10px;}
#mainWrap  #contWrap #contentsWrap #section05 #listWrap li .numb {width:20px; height: 20px; line-height: 20px; float: left; background: url(../jj_images/main/numbBullet.png) center no-repeat; text-align: center; color:#fff; display: inline-block; margin-right: 10px;}
#mainWrap  #contWrap #contentsWrap #section05 #listWrap li .score {float: right;}


#mainWrap  #contWrap #contentsWrap #section05 #btnWrap {width:100%; text-align: center; text-indent: -10000px;}
#mainWrap  #contWrap #contentsWrap #section05 #btnWrap div {width: 165px; margin:20px auto 0 auto;}
#mainWrap  #contWrap #contentsWrap #section05 #btnWrap #prevBtn a {width:16px; height:13px; background: url(../jj_images/main/prevBtn.png) 0 0 no-repeat; display: block; float: left;}
#mainWrap  #contWrap #contentsWrap #section05 #btnWrap #nextBtn a {width:16px; height:13px; background: url(../jj_images/main/nextBtn.png) 0 0 no-repeat; display: block; float: left;}
#mainWrap  #contWrap #contentsWrap #section05 #btnWrap #rankBtn {width:116px; height:13px; background: url(../jj_images/main/quizBtn.png) 0 0 no-repeat; display: block; margin:0 auto;}

#mainWrap  #contWrap #contentsWrap #section05 #goBtn a {width: 160px; height: 35px; background: url(../jj_images/main/goBtn.png) 0 0 no-repeat; display: block; margin: 0 auto;overflow:hidden;text-indent:-9999px}
#mainWrap  #contWrap #contentsWrap #section05 #main_onion{margin-left:50px}

#mainWrap  #contWrap #contentsWrap #section06 {width:478px; height: 417px; margin-top: -10px; padding: 10px; float: left; text-indent: -10000px}
#mainWrap  #contWrap #contentsWrap #section06 #pointBg {background:url(../jj_images/main/pointBanner.png) center 50px no-repeat; height: 210px; padding: 50px 0 175px 0; margin:0 auto;}
#mainWrap  #contWrap #contentsWrap #section06 #pointBg #pointTitle {width: 93px; height: 19px; background: url(../jj_images/main/pointTitle.png) 0 0 no-repeat; margin: 240px auto 30px auto;}
#mainWrap  #contWrap #contentsWrap #section06 #pointBg #goBtn a {width: 160px; height: 35px; background: url(../jj_images/main/goBtn.png) 0 0 no-repeat; display: block; margin: 0 auto;}
