@charset "utf-8"; /* 사용폰트 등록 */ @font-face { font-family: 'nGothic'; font-style: normal; font-weight: normal; src: url('../font/NanumGothic-Regular.eot'); src: url('../font/NanumGothic-Regular.eot?iefix') format('eot'), local("나눔고딕"),url('../font/NanumGothic-Regular.woff') format('woff'); } @font-face { font-family: 'nGothic'; font-style: normal; font-weight: bold; src: url('../font/NanumGothic-Bold.eot'); src: url('../font/NanumGothic-Bold.eot?iefix') format('eot'), local("나눔고딕"),url('../font/NanumGothic-Bold.woff') format('woff'); } @font-face { font-family: 'nGothic'; font-style: normal; font-weight: bolder; src: url('../font/NanumGothic-ExtraBold.eot'); src: url('../font/NanumGothic-ExtraBold?iefix') format('eot'), local("나눔고딕"),url('../font/NanumGothic-ExtraBold.woff') format('woff'); } /* Reset */ html,body{width:100%;height:100%; /*overflow:hidden;*/ margin:0 auto;} html{} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button{margin:0;padding:0; } body,h1,h2,h3,h4,input,button{font-family:/*"Nanum Pen Script", cursive, */"nGothic", "HY견고딕", "맑은고딕", "돋움", "돋움체",Helvetica,sans-serif,dotum;font-size:12px;color:#383d41; font-weight:bold } body{background-color:#fff; *word-break:break-all;-ms-word-break:break-all; background:url(../img/bg_1920_1080.jpg) center top no-repeat; background-color:#d5e9c4; /*background-size:1920px 1080px; min-height:720px; min-width:1024px; width:100%; height:100%;*/ } img,fieldset,iframe{border:0 none} li{list-style:none} input,select,button{vertical-align:middle} img{vertical-align:top} i,em,address{font-style:normal} label,button{cursor:pointer} button{margin:0;padding:0} a{color:#2f3743;text-decoration:none} a:hover{color:#390;text-decoration:underline} a:hover{color:#390;text-decoration:underline} button *{position:relative} button img{left:-3px;*left:auto} html:first-child select{height:20px;padding-right:6px} option{padding-right:6px} hr{display:none} legend{*width:0} table{border-collapse:collapse;border-spacing:0} /* Common */ .show{display:block} .hide{display:none} /* Layout */ #fl_obj { position:absolute; top:0; left:0; width:0; height:0; z-index:0 } #wrapper { width:100%; height:100%; overflow:hidden; } /* Header */ #header { width:100%; height:60px; background:url(../img/header_bg.jpg) repeat-x; } #header > ul { width:1024px; height:120px; margin:0 auto; padding:0 10px; margin:0 auto; } /* 공용_20130716_width:1024px 설정*/ #header > ul > li { float:left; padding:3px 0 0 0; letter-spacing:-0.05em; .letter-spacing:-0.08em;} #header > ul > li > h1 { width:710px; text-align:center; } #header > ul > li > h2 { font-size:24px; color:#50a6c6; padding:10px 0 0 20px; font-weight:bolder; } #header > ul > li > h3 { font-size:24px; color:#bed62f; padding:5px 0 0 0; vertical-align:middle; font-weight:bold; } #header > ul > li > h3>span { font-size:30px;} #header > ul > li > h3.max_letter { letter-spacing:-0.07em; letter-spacing/*\**/:-0.13em; .letter-spacing:-0.3em; } #header > ul > li.topmenu_end {float:right; margin-right:20px } /* container */ #container { clear:both; width:100%; height:100%; background-repeat:repeat-x; vertical-align:middle; } /*PC_20130723_프로그램 종료 안내창(아래3줄)*/ #dialog_box_exit { position:absolute; margin:-550px 0 0 215px; width:611px; height:297px; background:url(../img/dialogbox_exit.png) no-repeat; z-index:999; display:none; } #dialog_box_exit a.btn_yes { display:block; float:left; margin:205px 0 0 125px; } #dialog_box_exit a.btn_no { display:block; float:left; margin:205px 0 0 80px; } #global_layer { position:relative; margin:0 auto; width:1024px } #container > ul { /*width:100%; JS로 설정*/ margin: auto; } #container > ul > li { overflow:hidden;width:100%; height:100%; display:none; } #container:after{ display:block; clear:both; content:'' } /* home */ #home { width:100%; height:100%;} #home_title { background:url(../img/home_title_speaking.png) center 70px no-repeat; height:280px } #home_title>li { visibility:hidden; } #home_menu { margin: 0 auto; width:100%; text-align:center; vertical-align:middle; } #home_menu li { display:inline; margin:0 } #main_menu { margin:0; } #main_menu>li { margin:0 25px; } #sub_menu { margin:30px 0 50px 0; } #sub_menu>li { margin:50px 0; } /* 공용_20130716_버튼간격조정. */ #home_kice_logo { width:100%; margin-top:0; text-align:center; } #neat200>div>p { visibility:hidden } #neat200>div { margin:40px auto 0 auto; background:url(../img/page_neat200.png) no-repeat; width:942px; height:623px } #guide div { width:100%; /*border:1px solid red;*/ overflow:hidden; } #guide div > ul { width:960px; height:70px; margin-left:42px; } #guide div > ul > li { float:left; margin-top:30px } #guide div > ul > li.btn_prev { text-align:left; width:20%; } #guide div > ul > li.btn_prev>a { display:none; } #guide div > ul > li.navi_point { text-align:center; width:60%; padding-top:10px } #guide div > ul > li.btn_next { } #guide div>ol { clear:both; margin:0; padding:0; width:4150px; /*margin-left:-1024px*/ } #guide div > ol > li { float:left; margin:0 35px } /* (942px+70px)*2컷 = 2024 */ #func div { width:100%; /*border:1px solid red;*/ overflow:hidden; } #func div > ul { width:960px; height:70px; margin-left:42px; } #func div > ul > li { float:left; margin-top:30px } #func div > ul > li.btn_prev { text-align:left; width:20%; } #func div > ul > li.btn_prev>a { display:none; } #func div > ul > li.navi_point { text-align:center; width:60%; padding-top:10px } #func div > ul > li.btn_next { } #func div>ol { clear:both; margin:0; padding:0; width:2050px; /*margin-left:-1024px*/ } #func div > ol > li { float:left; margin:0 35px } /* (942px+70px)*2컷 = 2024 */ /* Main Page */ #menu { } /*공용_20130716_확인학습버튼 클릭시 안내창 추가 (밑에 2줄만)*/ #dialog_box_review_click { position:absolute; margin:150px 0 0 250px; width:577px; height:209px; background:url(../img/dialogbox_review_click.png) no-repeat; z-index:999; display:none; } #dialog_box_review_click > a.btn_x { display:block; margin:140px 0 0 238px; width:102px; } /* PC_20130718_학습중 종료버튼 */ a.btn_exit { position:absolute; margin:590px 0 0 920px; z-index:999; } #menu div.crop_box { position:relative; margin:5px 0; width:2048px; /* 자바스크립트로 #menu폭보다 2배설정: resetWidth() */ height:565px; /*overflow:hidden;*/} #menu div.crop_box > div { float:left; width:944px; margin:0 40px; height:560px; } #chapter_list { margin-left:0 } #chapter_list > ol { background:url(../img/menu1_bg.png) repeat-y; padding:15px 25px 25px 30px;} #chapter_list > ol > li { width:880px; margin:0; padding:0; height:50px; } #chapter_list > ol > li > a { display:block; height:50px; border-top:1px solid white /*#e0ebc1*/ ; background-color:#c4d785; } #chapter_list > ol > li > a:hover, #chapter_list >ol>li>a.esued:hover { background-color:#5c624c; text-decoration:none; } #chapter_list > ol > li > a > span { float:left; font-size:26px; display:block; background:url(../img/chapter_no_bg.png) no-repeat; width:145px; height:42px; text-align:center; padding-top:8px; color:white } #chapter_list > ol > li > a > h4 { display:block; float:left; font-size:24px; font-weight:bold; text-align:left; color:#444; padding:10px 0 0 30px; } #chapter_list > ol > li > a:hover > h4, #chapter_list >ol>li>a.esued:hover>h4 { color:white; text-decoration:none; } #chapter_list > ol > li > a > div.esu_state { float:right; height:32px; margin:8px 30px 0 0; padding:5px 0 0 30px; background:url(../img/menu_chapter_v_dot.png) no-repeat;} /* 이수된 챕터목록 설정*/ #chapter_list >ol>li>a.esued { background-color:#e0e0e0; } #chapter_list >ol>li>a.esued>h4 { color:#999; .color:#666; } /*확인학습, 단원별 다운로드 버튼*/ #menu div.btn { position:absolute; margin-left:630px; } #menu div.btn > a { display:block; float:left; width:111px; padding:5px; /*display:none;*/ } /*공용_20130716_확인학습 무조건 보이기 )*/ #menu div.btn > a.btn_review { clear:both; } /*공용_20130717*/ #menu div.btn > a.btn_down { display:none; } /*공용_20130717*/ /*전체다운로드 ( 20130621_최낙영 : 높이는 레이아웃에서 상관없음.... 자바스크립트에서 height값을 브라우저버전으로 체크함.*/ #btn_down_all { position:relative; margin:0 auto; width:1024px; height:9px; .height:7px; _height:6px; display:none; } /*IE8버전 전용 핵*/ @media \0screen { #btn_down_all { height:8px; } } #btn_down_all > a { display:block; position: absolute; margin-left:715px; margin-top:-50px } /*확인학습 가기 안내창*/ #dialog_box { position:absolute; margin:200px 0 0 450px; width:499px; height:424px; background:url(../img/dialogbox.png) no-repeat; z-index:999; display:none; } #dialog_box > h5 { display:block; margin:38px 0 0 75px; font-size:48px; font-weight:bolder; color:#5499D3; } #dialog_box > h5 > strong { letter-spacing:-0.1em } #dialog_box > h5 > span { color:#F06824; } #dialog_box a.btn_go { display:block; float:left; margin:240px 0 0 125px; } #dialog_box a.btn_x { display:block; float:right; margin:245px 40px 0 0 ; } /*공용_20130723_블랙배경이미지 설정*/ #dialog_box_esucheck { position:absolute; margin:220px 0 0 220px; width:611px; height:297px; background:url(../img/dialogbox_esucheck.png) no-repeat; z-index:999; display:none; } #dialog_box_esucheck a.btn_yes { display:block; float:left; margin:205px 0 0 125px; } #dialog_box_esucheck a.btn_no { display:block; float:left; margin:205px 0 0 80px; } /*공용_20130627_안내창 흑배경*/ div.black_back { position:absolute; width:100%; height:100%; background-image:url(../img/black_back.png); z-index:998; display:none; overflow:hidden; } /*공용_20130627_학습목차로 가기 안내창*/ #dialog_box_review { position:absolute; margin:200px 0 0 450px; width:499px; height:424px; background:url(../img/dialogbox_review.png) no-repeat; z-index:999; display:none; } #dialog_box_review a.btn_go { display:block; float:left; margin:340px 0 0 125px; } #dialog_box_review a.btn_x { display:block; float:right; margin:345px 40px 0 0 ; } #state_box { background:url(../img/prog_bg.png) no-repeat; width:942px; height:104px; padding:0; position:relative; margin:0 auto } #state_box>h3 { display:none } #prog_bar { width:485px; height:28px; padding:0; float:left; margin:37px 0 0 162px; } #prog_bar>dt, #prog_bar>dd { margin:0; padding-top:7px } #prog_bar>dt { float:left; background:url(../img/prog_blue.gif) repeat-x; width:385px; height:28px; } #prog_bar>dd { float:right; font-size:24px; font-weight:bold; padding:0; color:#55c6f0; width:100px } #prog_bar span { padding:0 10px } #state_box>p { float:right; font-size:24px; font-weight:bold; color:white; display:block; margin:25px 30px 0 0 } #state_box>p>strong { color:#55c6f0 } #unit_list { } #unit_list dl { background:url(../img/menu1_bg.png) repeat-y; padding:15px 25px 25px 30px; height:510px; } #unit_title { width:880px; height:49px;margin:0; padding:0; background-color:#d6e1af; border:1px solid #aaa; } #unit_title > div.btn { width:111px; position:absolute; left:1100px } #unit_title > h4 { float:left; padding:0; font-size:24px; font-weight:bolder; color:#444; text-align:left; display:block; line-height:2.1em; height:49px; } /*#unit_title > h4 { line-height:200%; height:49px;width:670px }*/ #unit_title > a { display:block; float:left; width:100px; height:49px; margin:0; padding-top:0; text-align:center;background-color:#658b27; } #unit_title > h4 span { display:block;clear:both; float:left;font-size:26px; background:url(../img/chapter_no_bg.png) -55px 0 no-repeat; line-height:1.9em; width:70px; height:49px; padding:0px 30px 0 0; text-align:center; color:white } /*#unit_title > h4 span { clear:both; display:block; float:left; padding:0 30px 0 0; }*/ #unit_title > div.esu_state { float:right; width:60px;height:32px; margin:8px 30px 0 0; padding:5px 0 0 20px; background:url(../img/menu_chapter_v_dot.png) no-repeat; } /*#unit_title > div.esu_state { float:left; width:60px;height:32px; margin:8px 30px 0 0; padding:5px 0 0 20px; background:url(../img/menu_chapter_v_dot.png) no-repeat; }*/ #unit_list>dl>dd { clear:both; padding:0; margin:0;width:880px; height:450px; } #unit_list ol { float:left; width:450px; height:450px; overflow:hidden; } #unit_list ol > li { padding:0; margin:0; border-top: 1px solid white; } #unit_list ol > li > a { display:block; font-size:24px; .font-size:22px;color:#444; padding:10px 0 0 30px; font-weight:bold; background-color:#c9dc8a; letter-spacing:-0.05em; height:37px; width:398px; border:1px solid #ccc; } #unit_list ol > li > a.esued { background-image:none; background-color:#eee; color:#aaa; .color:#666 } #unit_list ol > li > a.on { background:url(../img/list_sub_on_out.png) -10px top no-repeat; width:450px; color:white; border-top-color:white;border-bottom-color:white; } #unit_list ol > li > a.esued.on { background-image:url(../img/list_sub_esued_on_out.png); border-top-color:white;border-bottom-color:white; } #unit_list ol > li > a:hover { background-image:none; background-color:#5c624c; color:white; text-decoration:none; } #unit_list ol > li > a.on:hover { background:url(../img/list_sub_on_over.png) -10px top no-repeat; width:450px; } #unit_list ol > li.over_letter > a { letter-spacing:-0.15em; .letter-spacing:-0.05em; } #unit_list ul { float:right; width:380px; height:420px; background:url(../img/lesson_menu_bg.png) no-repeat; padding:15px 25px 25px 25px; } #unit_list ul > li { padding:1px 0; height:40px; border-bottom:1px solid #ccc; margin-bottom:-1px;} /* 공용_20130716_레슨메뉴뷸릿링크범위 변경 (밑에 11줄 통채로 대치할 것) */ #unit_list ul > li > a { font-weight:bold; width:380px; color:#444; } #unit_list ul > li > a:hover { color:#f60; text-decoration:none; } #unit_list ul > li > a > span { clear:both; display:block; float:left; background:url(../img/lesson_btn_bg.png) no-repeat; width:59px; height:25px; padding:6px 0 6px 0; text-align:center; color:white; font-size:20px; margin:0px 5px 0 0; } #unit_list ul > li > a > span.esued { background-image:url(../img/lesson_btn_bg_esued.png); } #unit_list ul > li > a > p { float:left; display:block; vertical-align:middle; font-size:16px; width:310px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0; margin:8px 0; } /* 공용_20130716_레슨메뉴뷸릿링크범위 변경... 위에서부터 여기까지) */ #btn_submenu_scroll { position:absolute; z-index:900; margin:370px 0 0 -100px; display:none; } /*공용_20130716_z-index값 낮춤. 블랙스크린보다 밑으로 내리기 위해..*/ /* study */ #study {} /* Contents */ ul.gnb { margin:0 auto; text-align:center; width:1024px; height:96px; background:url(../img/study_tab_bg.png) center 5px no-repeat; padding:0; } ul.gnb > li { float:left; border:0px solid white; margin:0 } ul.gnb > li > h4 { display:block; width:172px; height:77px;margin-top:15px; vertical-align: middle; font-size:48px; font-family:Arial, Helvetica, sans-serif; font-weight:bold } ul.gnb > li.navi > a { display:block; width:168px; height:92px; text-align:center; } ul.gnb > li.navi > a > img { margin-top: 20px } ul.gnb > li.tabs > a { display:block; padding-top:20px; width:257px; height:82px; } ul.gnb > li.tabs > a.on { background:url(../img/study_tab_on.png) center 5px no-repeat;padding-top:25px; } /* 공용_20130716_탭온 클래스 추가*/ ul.gnb > li.tabs>ol { margin:0 auto; } ul.gnb > li.tabs>ol>li {display:inline; float:left; } ul.contents { position:relative; clear:both; width:890px; height:550px; background:url(../img/study_contents_bg.png) center no-repeat; padding:0 50px; margin:30px auto 0 auto; } ul.contents > li { clear:both; } #study ol.page_navi { float:right; margin:0 auto; text-align:center; padding-right:10px; height:87px; margin-top:-25px } #study ol.page_navi li { display:inline; float:left } #study ol.page_navi li>a { display:block; width:87px; height:68px; background-image:url(../img/page_btn_over.png); padding-top:18px; letter-spacing:-0.1em; font-size:40px; color:#fff; font-weight:bold; } #study ol.page_navi li>a.on { background-image:url(../img/page_btn_on.png); } #study ol.page_navi li>a.passed { background-image:url(../img/page_btn_out.png); } #study ol.page_navi li>a:hover { text-decoration:none; } div.icon_spk, div.icon_rec { clear:both; float:left; width:230px; background-repeat:no-repeat; text-align:right; padding-top:90px; height:95px } div.icon_spk { background-image:url(../img/icon_spk_off.png); } div.icon_rec { background-image:url(../img/icon_rec_off.png); } a.btn_spk, a.btn_rec { margin:40px 0 0 50px } dl.scripter { float:right; width:660px; } dl.scripter>dt { height:170px; padding:0; display:table-cell; vertical-align:middle; } dl.scripter>dd { border-top:1px solid #999; padding:10px 0 0 0; height:60px; vertical-align:middle; } dl.scripter>dd > a { float:left; } #study p.script_eng { font-size:36px; margin:auto 0; color:#333; word-break:keep-all; } #study p.script_eng>strong { /*font-weight:bolder; font-style: italic; text-decoration:underline;*/ font-weight:bold; } /* 공용_20130716_10장 강조 밑줄 제거...*/ #study p.script_kor { float:right; font-size:20px; font-weight:bold; padding:5px; display:none; width:570px; } /* player*/ #snd_pause { display:none; } #player { position:absolute;left:60px; top:240px; width: 300px; text-align:right; } #player li{display:inline; float:left; margin:0;} #player li > a { display:block; padding: 5px 0; width:25px; text-align:center; border:1px dotted transparent; margin-left:10px; } #player li > a:hover { border:1px dotted #ccc; background-color:white; } #time_info { background:url(../img/per_bg.gif) 0 10px repeat-x; width:100px; height:15px; text-align:left; margin:0 50px; padding:10px 0 0 0; } /* recorder */ div.recorder { position:absolute; z-index:101; left:270px; top:305px; display:none; } div.recorder>ul>li { float:left; margin-top:20px } li.rec_info { color:#333; font-size:24px; font-weight:bold;} ul.rec_ready>li.rec_info, #study ul.rec_cording>li.rec_info { width:250px } ul.rec_ready > li.rec_info {margin:45px 0 0 50px; } ul.rec_cording > li.rec_info {margin:40px 0 0 50px; } ul.rec_cording > li.rec_info>dl>dt { font-weight:bolder; font-size:24px; color:#454; padding:10px } ul.rec_cording > li.rec_info>dl>dt>span { font-size:12px; color:#999; padding:5px 0 5px 0; } ul.rec_cording > li.rec_info>dl>dd { width:224px; height:31px; background:url(../img/recording_bar_bg.gif) repeat-x; padding:0; margin:0; } ul.rec_play>li.rec_info { width:170px; margin-left:50px;} dl.recplay_progbar { background:url(../img/recplay_prog_bg.png) 0 40px no-repeat; width:133px; height:80px; margin-top:25px } dl.recplay_progbar>dt { height:40px; color:#069; font-size:30px; padding:0; text-align:center; } dl.recplay_progbar>dd { background:url(../img/recplay_prog_bar.png) no-repeat; height:32px;} ul.rec_play>li.rec_btn { width:137px } ul.rec_ready { width:671px; height:167px; background-image:url(../img/recwin_bg_start.png); } ul.rec_cording { width:671px; height:167px; background-image:url(../img/recwin_bg_recording.png); display:none; } ul.rec_ready>li.rec_btn>a,#study ul.rec_cording>li.rec_btn>a { display:block; background-image:url(../img/recbtn_bg_out.png); width:319px; height:137px; padding:0; text-align:right; } ul.rec_ready>li.rec_btn>a:hover,#study ul.rec_cording>li.rec_btn>a:hover { background-image:url(../img/recbtn_bg_over.png); } ul.rec_play { width:671px; height:167px; background-image:url(../img/recwin_bg_play.png); display:none; } #btn_rec_x { position:absolute; margin:10px 0 0 625px; } /* review */ #review {} #review ul.gnb { background-image:url(../img/review_tab_bg.png); text-align:center; width:1024px; padding:0px 0 10px 15px } #review ul.gnb > li.tab { margin:10px 5px; } #review ul.gnb > li.tab > a { background-image:url(../img/tab_review_bg_out.png); width:124px; height:66px; display:block; text-align:center; font-size:48px; line-height:130%; color:white; } #review ul.gnb > li.tab > a:hover { text-decoration:none } #review ul.gnb > li.tab > a.on { background-image:url(../img/tab_review_bg_on.png); color:rgb(72,159,216); } #review ul.gnb > li.tab > a.esued { background-image:url(../img/tab_review_bg_over.png); color:white; } ul.gnb > li.navi > a { display:block; width:168px; height:92px; text-align:center; } ul.gnb > li.navi > a > img { margin-top: 20px; } #review>ul.contents { position:relative; clear:both; width:890px; height:569px; background:url(../img/review_contents_bg.png) center no-repeat; padding:0 50px; margin:0 auto; } #review>ul.contents>li.que_ment { padding:40px 0 10px 10px; border-bottom: 2px solid #ccc; } #review>ul.contents>li.que_ment > h4 { background:url(../img/bullet_que_ment.png) left center no-repeat; padding-left:25px; font-size:24px; font-weight:bold; color:#555 } #review>ul.contents>li.exp_box { padding-left:20px; display:table-cell; vertical-align:middle; } #review>ul.contents>li.exp_box>p { font-size:36px; font-weight:bolder; padding:10px 0 10px 20px; line-height:140%; word-break:keep-all; } #review>ul.contents>li.rec_box { background:url(../img/icon_rec_off.png) 10px top no-repeat; padding:5px 0 0 200px; height:170px } #review div.recorder { position:relative; left:0; top:0; margin:0; display:block } #review ul.rec_cording>li.rec_btn>a { display:block; background-image:url(../img/recbtn_bg_out.png); width:319px; height:137px; padding:0; text-align:right; margin-left:25px } #review li.answer_box { padding:0; margin-top:20px } #review li.answer_box dt { float:left; margin:20px 30px 0 20px } #review li.answer_box dd { width:660px; display:table-cell; vertical-align:middle; height:110px; } #review li.answer_box dl a { width:154px; height:67px; display:block; } #review li.answer_box dl>dd>p { font-size:32px; font-weight:bolder; padding:0; line-height:120%; word-break:keep-all; } #review li.answer_box dl.activ a { background-image:url(../img/btn_review_answer_out.png); } #review li.answer_box dl.activ a:hover { background-image:url(../img/btn_review_answer_over.png); } #review li.answer_box dl.activ>dd>p { display:none; } #review li.answer_box dl.on a { background-image:url(../img/btn_review_answer_on.png); } #review li.answer_box dl.on>dd { background:none; } #review li.answer_box dl.on>dd>p { display:block; } #review li.answer_box dl.dimd a { background-image:url(../img/btn_review_answer_dimd.png); } #review li.answer_box dl.dimd>dd { background:url(../img/review_answer_guide.png) no-repeat; } #review li.answer_box dl.dimd>dd>p { display:none;} #review li.answer_box p>span { color:#4F97D1; } #contents_1>li.exp_box { height:140px; } #contents_1>li.exp_box>p { font-size:32px } #contents_2>li.exp_box { padding:0; height:130px; } #contents_2>li.exp_box>p { line-height:normal; padding:0; } #contents_2>li.exp_box>p>input { font-size:0; color:white; width:60px; height:30px; border:2px solid #D1CFA3 } #contents_2>li.hint_box { background:url(../img/review2_bullet_hint.png) 40px center no-repeat; padding-left:110px; height:32px; margin-bottom:10px } #contents_2>li.hint_box>p { font-size:30px; line-height:100% } #contents_2>li.answer_box { margin-top:0 } #contents_3>li.exp_box { padding-left:0; height:250px; } #contents_3 div.eng { display:table-cell; vertical-align:middle;height:170px; width:620px; } #contents_3 p.script_eng { font-size:36px; line-height:130%; font-weight:bolder; padding:0; width:620px; word-break:keep-all; } #card_box { width:890px; /*border:1px solid red;*/ padding-top:10px} #card_box>ul.card_area { clear:both; width:890px; /*position: relative; */ margin:10px auto; /*border:1px solid #fc9;*/ padding-left:58px; display:table-cell; vertical-align:middle; word-break:keep-all;} #card_box>ul.card_area>li { background-image:url(../img/card_bg_out.png); width:150px; height:100px; float:left; padding:3px; margin:0; } #card_box a { width:150px; height:100px; display:table-cell; .display:block;.padding-top:35px; vertical-align:middle; word-break:keep-all; font-weight:bolder; background-repeat:no-repeat; margin:0; text-align:center; } /*#card_box a { display:block; padding-top:35px; line-height:100%; letter-spacing:-0.05; height:65px; }*/ #card_box a:hover { text-decoration:none; } #target_card { height:220px; } /*#target_card a { font-size:0px; color:transparent } #target_card a.dimd { background-image:url(../img/card_fixed.png); color:white; font-size:24px; }*/ #from_card { background:url(../img/card_temp_bg.png) center no-repeat; height:220px;} #from_card li { } #move_card { } #move_card li { position:absolute; } #move_card>li.disable>a { background-image:url(../img/card_fixed.png); z-index:100;} #move_card a { background-image:url(../img/card_out.png); z-index:999; color:white; font-size: 24px; } #move_card>li.yes>a { background-image:url(../img/card_yes.png); z-index:100;} #move_card>li.no>a { background-image:url(../img/card_no.png); z-index:100;}