/*퀴즈모듈 기본*/ #quizgame_module_view{padding:20px; background:#f3f3f3 url(../img/pattern8.png); font-family:Tahoma,나눔고딕;} #quizgame_module_view a{text-decoration:none; color:#000;} #quizgame_module_view .m_btn{display:none;} /* 퀴즈조회목록 */ #quizgame_module_view .quiz_search_box{display:inline-block; float:right; overflow:hidden;} #quizgame_module_view .search_box{border:1px solid #bbb!important; margin:5px 0px; float:right; margin-right:10px;} /* 퀴즈 목록 */ #quizgame_module_view .quiz_wrap{list-style:none; margin:0; padding:0; margin-top:30px;} #quizgame_module_view .quiz_wrap .quiz_list{min-height:320px; min-width:215px; width:30%; transition:0.3s; position:relative; float:left; background:#fefefe; border:1px solid #aaa; border-radius:2px; display:inline-block; margin:5px 20px;} #quizgame_module_view .quiz_wrap .quiz_list:hover{box-shadow:0px 0px 8px #aaa;} /*#quizgame_module_view .quiz_wrap .quiz_list:after{content:""; display:block; position:absolute; top:0; left:0; background-image:url(../img/bg.png); width:100%; height:100%;opacity:0.3; background-repeat:no-repeat; background-position:50% 50%; z-index:-1;}*/ #quizgame_module_view .quiz_wrap .q_top{height:30px; line-height:30px; border-bottom:1px solid #aaa; background:gold; color:#000; font-weight:bold;} #quizgame_module_view .quiz_wrap .q_top a{font-size:11px; background:#ffe86c; color:#222; padding:2px 3px; border-radius:2px; font-weight:normal;} #quizgame_module_view .quiz_wrap .q_content .quiz_update_wrap{position:absolute; top:38px; left:5px;} #quizgame_module_view .quiz_wrap .q_content .quiz_update_btn{border:none; padding:3px 5px; background:steelblue; cursor:pointer; color:white; border-radius:3px;} #quizgame_module_view .quiz_wrap .q_content .quiz_user{text-align:center; margin:10px 0;} #quizgame_module_view .quiz_wrap .q_content .quiz{display:block; text-align:center; margin:10px; margin-top:15px; margin-bottom:75px; color:#222; font-size:13.5px; font-weight:bold;} #quizgame_module_view .quiz_wrap .q_content .q_answer{display:block; position:absolute; bottom:55px; right: 10px; text-align:center; color:#e28205; font-weight:bold; font-size:12px;} #quizgame_module_view .quiz_wrap .q_content .open_answer_btn{display:none; position:absolute; top:150px; width:100%; opacity:0.8; text-align:center; font-weight:bold; color:white; background:#000; padding:10px 0px; cursor:pointer;} #quizgame_module_view .quiz_wrap .q_content .answer_form{display:none; position:absolute; width:100%; top:150px; text-align:center; z-index:33;} #quizgame_module_view .quiz_wrap .q_content .answer_input{height:32px; border:none; border-radius:3px;} #quizgame_module_view .quiz_wrap .q_content .answer_btn{border:none; height:34px; background:#fff; border-radius:3px;} #quizgame_module_view .quiz_wrap .q_bottom{position:absolute; bottom:0px; height:30px; width:100%;} #quizgame_module_view .quiz_wrap .q_bottom .answer_user{position:absolute; background:#f9f9f9; height:23px; line-height:23px; width:100%; text-align:center; top:-18px; color:#555;} #quizgame_module_view .quiz_wrap .q_bottom .answer_per{display: block; position:absolute; bottom:55px; left: 10px; text-align:center; color:#555; font-weight:bold; font-size:12px;} #quizgame_module_view .quiz_wrap .q_bottom .status{display:inline-block; margin-left:5px; margin-top: 2px; font-weight:bold; font-size:13px;} #quizgame_module_view .quiz_wrap .q_bottom .cmt{display:inline-block; line-height: 30px; margin-right:5px; float:right; font-weight:bold; font-size:12px;} /*제목*/ #quizgame_module_view .quiz_title{position:absolute; left:36%; top:-5px; display:inline-block; color:#222; text-shadow:1px 1px 1px #aaa; font-size:27px; font-weight:bold;} #quizgame_module_view .quiz_title img{height:48px; margin-right:5px; vertical-align:middle;} /*테이블*/ #quizgame_module_view .width_group{width:17%;} #quizgame_module_view .quizgame_table{width:100%; border:1px solid #bbb; border-collapse:collapse; margin:15px 0px;} #quizgame_module_view .quizgame_table th{padding:8px 0px; background:#f8f8f8; background:-webkit-gradient(linear,0% 0%,0% 100%,from(#FFF),to(#F6F6F6));background:linear-gradient(to bottom,#FFF 0%,#F6F6F6 100%);} #quizgame_module_view .quizgame_table td{border:1px solid #bbb; padding:8px 0px;} #quizgame_module_view .quizgame_insert_table{border:5px solid #bbb; padding:5px; border-collapse:collapse; margin:0 auto; background:white;} #quizgame_module_view .quizgame_insert_table th{border:1px solid #bbb; padding:8px; background:#f8f8f8; /* border-right:0px; */ white-space:nowrap;} #quizgame_module_view .quizgame_insert_table td{border:1px solid #bbb; padding:8px 3px; border-left:0px;} #quizgame_module_view .quiz_content{position:relative; line-height:23px;} #quizgame_module_view .quiz_point span{padding:5px 7px; color:white; font-weight:bold; border-radius:10%; white-space:nowrap;} #quizgame_module_view .quiz_category{overflow:hidden; text-overflow:ellipsis; color:#555!important; display:block; margin:0 auto; margin-bottom:15px; } #quizgame_module_view .quiz_time span{padding:2px; font-weight:bold; white-space:nowrap;} #quizgame_module_view .quiz_vote{position:absolute; top:40px; right:5px;} #quizgame_module_view .quiz_vote i{font-size:11px;} #quizgame_module_view .quiz_vote .vote_up{color:#009f00; padding:3px; cursor:pointer;} #quizgame_module_view .quiz_vote .vote_down{color:#dd0000; padding:3px; cursor:pointer;} /*컬러*/ #quizgame_module_view .red{color:#F3574A; line-height: 30px;} #quizgame_module_view .blue{color:#00A0EF; line-height: 30px;} #quizgame_module_view .green{color:lightseagreen; line-height: 30px;} #quizgame_module_view .gray{color:#777;} #quizgame_module_view .red_bg{background:#F3574A; color:white;} #quizgame_module_view .blue_bg{background:#00A0EF; color:white;} #quizgame_module_view .green_bg{background:lightseagreen; color:white;} #quizgame_module_view .gray_bg{background:#fcfcfc;} #quizgame_module_view .black_bg{background:#555; color:white;} #quizgame_module_view .quiz_hint{color:tomato;} /*퀴즈검색창*/ #quizgame_module_view .search_layer_wrap{position:fixed; width:100%; height:100%; left:0px; top:0px; z-index:100000; display:none;} #quizgame_module_view .search_layer_bg{position:absolute; width:100%; height:100%; background:black; filter:alpha(opacity=60); opacity:0.6; -moz-opacity:0.6; z-index:1;} #quizgame_module_view .search_layer{position:relative; width:200px; top:25%; margin:0 auto; z-index:2; background:#000;} #quizgame_module_view .search_layer form{background:white;} /*퀴즈등록창*/ #quizgame_module_view .quiz_layer_wrap{position:fixed; width:100%; height:100%; left:0px; top:0px; z-index:100000; display:none;} #quizgame_module_view .quiz_layer_bg{position:absolute; width:100%; height:100%; background:black; filter:alpha(opacity=70); opacity:0.7; -moz-opacity:0.7; z-index:1;} #quizgame_module_view .quiz_layer{position:relative; width:368px; top:15%; margin:0 auto; z-index:2;} #quizgame_module_view .quiz_layer form{background:white;} #quizgame_module_view .quiz_explain{line-height:20px;} /*인풋 비활성*/ #quizgame_module_view .no_input{background:#ccc; cursor:pointer;} /* 에디터 */ #quizgame_module_view .cmt_form_wrap{display:none; position:fixed; border-radius:7px; padding-top:10px; left:2.2%; top:35%; z-index:31; width:95%; min-height:150px; border:2px solid #333; background:#f3f3f3;} #quizgame_module_view .simple_editer_wrap{margin:0px 10px 15px 10px;} #quizgame_module_view .simple_editer_wrap .simple_editer{position:relative; margin:0px 70px 0px 55px} #quizgame_module_view .simple_editer_wrap .simple_editer .profile{position:absolute; background:#fff; top:0; left:-50px; float:left;width:35px;height:auto;line-height:35px;padding:2px;font-size:32px;border:1px solid #DDD} #quizgame_module_view .simple_editer_wrap .simple_editer .text{margin:0; width:100%; min-height:33px; padding:4px 6px;border:1px solid;border-color:#CCC #DDD #DDD #CCC;border-radius:3px;box-shadow:inset 1px 1px 4px rgba(0,0,0,.06)} #quizgame_module_view .simple_editer_wrap .simple_editer .cmt_btn{position:absolute;top:0;right:-65px;width:43px;height:43px;line-height:43px;margin:0;padding:0; display:inline-block; background:#f9f9f9; background:-webkit-gradient(linear,0% 0%,0% 100%,from(#FFF),to(#F3F3F3));background:linear-gradient(to bottom,#FFF 0%,#F3F3F3 100%);border:1px solid;border-color:#CCC #C6C6C6 #C3C3C3 #CCC;border-radius:3px;white-space:nowrap;cursor:pointer;text-decoration:none !important;text-align:center;text-shadow:0 1px 0 #FFF;box-shadow:inset 0 0 1px 1px #FFF,0 1px 1px rgba(0,0,0,.1);*display:inline;*zoom:1} /* 오답리스트 */ #quizgame_module_view .not_answer_list_wrap{position:absolute; cursor:pointer; display:none; background:#222; opacity:0.85; width:100%; height: 100%; top:0; bottom:0; color:#fff; text-align:center; padding: 0; overflow-y: scroll;} #quizgame_module_view .not_answer_list_wrap ul{list-style:none; padding:0; margin: 5px 0;} #quizgame_module_view .not_answer_list{padding:5px 0px;} /* IE 스크롤바 */ #quizgame_module_view .not_answer_list_wrap {scrollbar-face-color: #2f3542; scrollbar-track-color: gray; scrollbar-arrow-color: none; scrollbar-highlight-color: none; scrollbar-3dlight-color: none; scrollbar-shadow-color: #2f3542; scrollbar-darkshadow-color: none;} /* 파폭 스크롤바 */ #quizgame_module_view .not_answer_list_wrap {scrollbar-width: 10px; scrollbar-color: #2f3542 gray;} /* 크롬 스크롤바 */ #quizgame_module_view .not_answer_list_wrap::-webkit-scrollbar {width: 10px;} #quizgame_module_view .not_answer_list_wrap::-webkit-scrollbar-thumb {background-color: #2f3542;} #quizgame_module_view .not_answer_list_wrap::-webkit-scrollbar-track {background-color: gray;} /* 댓글목록 */ #quizgame_module_view .cmt_list_subject{margin:0px 10px; position:relative; border:1px solid #ddd; background:white; background:-webkit-gradient(linear,0% 0%,0% 100%,from(#FFF),to(#F7F7F7));background:linear-gradient(to bottom,#FFF 0%,#F7F7F7 100%);} #quizgame_module_view .cmt_list_subject span{position:relative; display:inline-block; padding:10px 5px; text-align:center; font-weight:bold; color:#777;} #quizgame_module_view .cmt_list_subject .nick_name{position:absolute; left:30px; top:0px;} #quizgame_module_view .cmt_list_subject .comment{width:100%;} #quizgame_module_view .cmt_list_subject .date{position:absolute; right:30px; top:0px;} #quizgame_module_view .cmt_top{margin:5px 10px 10px 10px;} #quizgame_module_view .cmt_top em{font:700 17px sans-serif} #quizgame_module_view .cmt_top .cmt_write{font-weight:bold; color:#555;} #quizgame_module_view .cmt_top .cmt_close{font-weight:bold; color:#555; float:right; cursor:pointer;} #quizgame_module_view .comment_list{margin:0px 10px 15px 10px; padding:0px; list-style:none; border:1px solid #ddd; border-top:1px solid #fff; position:relative;} #quizgame_module_view .comment_list li:nth-child(even){background:#f9f9f9;} #quizgame_module_view .comment_list li{transition:1.5s; -webkit-transition:1.5s; -moz-transition:1.5s; -ms-transition:1.5s; -o-transition:1.5s; display:block; background:#fff; position:relative; border-bottom:1px solid #eee;} #quizgame_module_view .comment_list li span{position:relative; display:inline-block; padding:10px 5px;} #quizgame_module_view .comment_list li a{position:relative; display:inline-block; padding:10px 5px;} #quizgame_module_view .comment_list li .nick_name{position:absolute; left:5px; top:-4px;} #quizgame_module_view .comment_list li .nick_name img{vertical-align:middle; margin-right:3px;} #quizgame_module_view .comment_list li .comment{margin:0px 80px 0px 220px; word-break:break-all;} #quizgame_module_view .comment_list li .date{position:absolute; right:10px; top:0px;} #quizgame_module_view .cmt_bg{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:30; opacity:0.7; background:#000;} /* 페이지 */ #quizgame_module_view .page_navi{position:relative; width:100%; height:35px; line-height:35px; margin:10px 0px; text-align:center; } #quizgame_module_view .page_navi a{text-decoration:none; color:#222; margin:0px; padding:5px 8px; background:white; border:1px solid #eee; border-radius:3px; transition:0.2s;} #quizgame_module_view .page_navi a:hover{background:yellowgreen; color:white;} #quizgame_module_view .page_navi .page_seleted{background:yellowgreen; color:white;} /* 버튼 */ #quizgame_module_view .ss_btn{ height:26px!important; line-height:26px!important; padding:0 10px!important; border:none; vertical-align:top; font-size:12px; cursor:pointer; border-radius:3px; font-family:inherit; text-shadow:0 1px 1px rgba(255, 255, 255, 0.5); box-shadow:inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 1px rgba(0, 0, 0, 0.2); } /* 박스 */ #quizgame_module_view .ss_box{ height:26px!important; line-height:26px!important; border:none; font-size:12px; border-radius:3px; font-family:inherit; text-shadow:0 1px 1px rgba(255, 255, 255, 0.5); box-shadow:inset 0px 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 1px rgba(0, 0, 0, 0.2); } /***********************************************/ /** 반응3 **/ /***********************************************/ @media all and (max-width:1080px){ #quizgame_module_view .quiz_wrap .quiz_list{width:45%;} #quizgame_module_view .quiz_wrap .quiz_list{margin: 5px 16.9px;} } /***********************************************/ /** 반응2 **/ /***********************************************/ @media all and (max-width:780px){ #quizgame_module_view .quiz_wrap .quiz_list{width:100%;} #quizgame_module_view .m_btn{display:block;} #quizgame_module_view .comment_list li .nick_name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} #quizgame_module_view .cmt_form_wrap{left:5%; top:15%; width:90%;} #quizgame_module_view .quiz_wrap{margin-top:10px;} #quizgame_module_view .quiz_title{display:none;} #quizgame_module_view .quiz_wrap .quiz_list{margin: 0 0 10px 0;} } /***********************************************/ /** 반응3 **/ /***********************************************/ @media all and (max-width:480px){ #quizgame_module_view .m_btn{display:block;} #quizgame_module_view .search_box{margin-right:3px;} #quizgame_module_view .quiz_search_box{display:block; margin:10px 0px; float:left; overflow:hidden;} #quizgame_module_view .comment_list li .nick_name{ width:65px; left:1px; top: 0;} #quizgame_module_view .comment_list li .nick_name img{display:none;} #quizgame_module_view .comment_list li .comment{margin:0px 70px;} #quizgame_module_view .quiz_wrap .quiz_list{margin: 0 0 10px 0;} } /*************************************** xecenter 프로그램 css공통 *************************************************/ /*************************************** xecenter 프로그램 css공통 *************************************************/ /*************************************** xecenter 프로그램 css공통 *************************************************/ /** 테이블 **/ .xecenter_table{width:100%;} .xecenter_table a, .xecenter_page_navi a{text-decoration:none; color:black;} .text_center{text-align:center;} /** 폼박스 불투명 **/ .xecenter_form_box2{margin:0 5px; padding:7px; border-radius:4px; background:#f5f5f5; border:1px solid #fff; outline:none; /* box-shadow:0 0 1px #aaa; */} .xecenter_form_box2:hover{border:1px solid /* #5bc0de*/ #eee; background:/* #ffe*/ #fafafa;} .xecenter_form_box2:focus{border:1px solid /* #5bc0de*/ #eee; background:/* #ffe*/ #fafafa;} /** 폼박스 **/ .xecenter_form_box{margin:0 5px; padding:7px; border-radius:4px; background:#fff; border:1px solid #ccc; outline:none; box-shadow:0 0 1px #aaa;} .xecenter_form_box:hover{border:1px solid #5bc0de; background:#ffe;} .xecenter_form_box:focus{border:1px solid #5bc0de; background:#ffe;} /** 경계선 **/ .xecenter_div_line{margin:10px 0px; width:100%; height:1px; background:#ddd; clear:both;} /** 버튼정의 **/ .xecenter_btn_blue{margin:3px; padding:10px; border-radius:5px; background:#428bca; color:white; border:none; outline:none; float:left;} .xecenter_btn_red{margin:3px; padding:10px; border-radius:5px; background:#D44B4B; color:white; border:none; outline:none; float:left;} .xecenter_btn_green{margin:3px; padding:10px; border-radius:5px; background:lightseagreen; color:white; border:none; outline:none; float:left;} .xecenter_btn_black{margin:3px; padding:10px; border-radius:5px; background:#555; color:white; border:none; outline:none; float:left;} .xecenter_btn_blue:hover{cursor:pointer; background:#207BCA;} .xecenter_btn_red:hover{cursor:pointer; background:#D52E2E;} .xecenter_btn_green:hover{cursor:pointer; background:#0FACC2;} .xecenter_btn_black:hover{cursor:pointer; background:#000;} /** 애니메이션 효과 **/ .xecenter_effect{-webkit-transition:.3s linear; -moz-transition:.3s linear; -o-transition:.3s linear; transition:.3s linear;} /** 페이지 네비 **/ .xecenter_page_navi{text-align:center; margin:10px 0px;} .xecenter_page_navi .pg_select{border:1px solid #ddd; background:#eee; color:black;} .xecenter_page_navi a{font-weight:bold; color:#555; padding:5px 9px; display:inline-block; border-radius:3px; border:1px solid #fff;} .xecenter_page_navi a:hover{border:1px solid #ddd; background:#eee; } /** 텍스트효과 **/ .xecenter_text{border:1px solid #fff; padding:4px; border-radius:5px;} .xecenter_text:hover{border:1px solid #ddd; background:#eee;} /** 내꺼 **/ .category {background: #4c82d9; padding: 3px; color: #fff; margin-left: 10px;} .category[data='보통'] {background: #33af7b;} .category[data='어려움'] {background: #8444eb;} .category[data='극악'] {background: #f43939;} /** 풀이 완료 시간 **/ .answer_stat {display: inline; } .answer_stat ul {padding: 0; margin-left: 8px;} .answer_stat ul li {list-style: none;}