button{outline: 0;} #wrap { position: relative;width: 1920px; height: 1080px; background: #fff;} #wrap>div:not(#popup):not(#canvas_layer) {height: 100%; position: relative;} #wrap>div { display: none; } #page_home{padding-top:1px;} #page_home .background{position: absolute;left:50%;top:0;width:2520px;height:100%;margin-left:-1260px} #page_home>header{display: none;} #page_home>section{font-size:0; height: 100%; position: relative;} #page_home>section .study_save{width:126px; height:126px; position:absolute; bottom:30px; right:30px;} #page_home>footer{position:absolute; right:20px; top:20px; font-size:0; } #page_home>footer button{ margin-right:23px; vertical-align: top; position:relative; width:70px; height:74px; font-size:0; background-position:0 0; background-repeat:no-repeat;} #page_home>footer button:last-child{margin-right:0;} #page_home>footer button:before{content:''; font-size:18px; color:#333; font-weight: 900; position:absolute; top:79px; width:130px; line-height:30px; text-align: center; left:calc(50% - 65px); border-radius: 14px; font-family:NanumBG;} #page_home>footer .study_save{background:url(../img/common/ico_studysave.png) 0 0 no-repeat; height: 76px;} #page_home>footer .study_save:before{content:"진도 보기"; } #page_home>footer .go_mat_game{background-image:url(../img/common/ico_matGame.png);display:none;width:78px;height:84px;background-position:0 -8px;} #page_home>footer .go_mat_game:before{content:"도전 수학왕"; } #page_home>footer .pop_guide{background-image:url(../img/common/mat/ico_guide.png);} #page_home>footer .pop_guide:before{content:"사용 설명서"; } #page_home>footer .go_pds{background-image:url(../img/common/mat/ico_pds.png);} #page_home>footer .go_pds:before{content:"자료실"; } #page_home>footer .go_sci_lab{background-image:url(../img/common/ico_sci_lab.png);} #page_home>footer .go_sci_lab:before{content:"실험 안전 수칙"; } #page_home>footer .go_bell:before{content:"특화자료"; } #page_home>footer .go_book_guide{background-image:url(../img/common/mat/ico_bookguide.png); display: none;} #page_home>footer .go_book_guide:before{content:"구성과 특징"; } #page_std>header {position:relative; width: 1920px; height: 56px; background-color: #3c798d; z-index: 555;} #page_std>header>button { float: left; width: 56px; height: 55px;background:url(../img/common/ico_menu.png) center center no-repeat;background-size:43px; font-size:0;} #page_std>header>button:after{content: "목차"; color: #fff; display: none; font-size: 20px; padding-left: 64px; width: 105px;} #page_std>header>h4 {display:inline-block; font-size: 33px; color: white; line-height: 56px; margin-left: 8px; font-weight: 500;font-family: 'nsrBold'; } #page_std>header>h4>span{position:relative;left:10px;font-weight: 500; height: 55px;display:inline-block;background: url(../img/common/ico_math_header.png) 0 0 repeat-x; background-size: contain; font-family: 'brr'; font-size: 28px; text-shadow: -1px -1px 0 #14407a, 1px -1px 0 #14407a, -1px 1px 0 #14407a, 1px 1px 0 #14407a; padding: 0 13px 0 22px; margin-right: 51px;} #page_std>header>h4>span:after{content:"";position:absolute;top: 0; right: -26px; width: 28px; height: 55px; background: url(../img/common/ico_math_header_right.png) 0 0 no-repeat; background-size:cover;} #page_std>header>div { float: right; line-height: 59px; } #page_std>header>div>button:not(.go_home){width: 239px; height: 50px; vertical-align: sub; padding:7px 9px 0px 134px;} #page_std>header>div>button:not(.go_home)>dl{display: block; text-align: center} #page_std>header>div>button dt{display: none;} #page_std>header>div>button dd{ font-family: 'bmjua'; font-size: 17px; color: #fff; letter-spacing: -1px;position: relative;top: -5px;} #page_std>header>div>button dd:after{content:" 쪽";} #page_std>header .go_epno{background:url(../img/common/ico_go_epno.png);} #page_std>header .go_spno.mat{background:url(../img/common/ico_go_spno_mat.png);} #page_std>header .go_spno.sci{background:url(../img/common/ico_go_spno_sci.png);} #page_std>header .go_home{background:url(../img/common/ico_home.png) center center no-repeat; width: 58px; height: 60px; font-size:0; vertical-align: middle; background-size:50px;} #page_home>section>div>ul>li.on:after{content:""; display: inline-block; vertical-align: middle; background:url(../img/common/ico_liston.png) 0 0 no-repeat; width:43px; height: 46px; margin-left: 8px;} /**/ #p_std {/* 메모장, 링크아이콘 기능을 위한 아이디명 삽입(cny20200630) */} #icons_std { position: absolute; width: 0; height: 0; top: 69px;} #page_std>footer{ background:#00a7df; height: 55px; position:absolute; bottom:0; width:100%;z-index: 555;} #page_std>footer>ul>li.std_title>button { font-family: 'nq';font-size : 28px; padding: 7px 26px; color: #fff; position:relative;top:3px; letter-spacing: -1px; border-top:4px solid transparent; font-weight: 500; margin:0 7px;} #page_std>footer>ul>li.std_title>button:after{content: ""; display: inline-block; width: 3px; height: 27px; background: url(../img/common/ico_bar.png) right center no-repeat; position: absolute; right: -10px; top: 10px;} #page_std>footer>ul>li.std_title>button:last-child:after{display: none;} #page_std>footer>ul>li.std_title>button.on{background: #1265ba; color: #ffff00; border-color:#1059a4; border-radius: 10px; font-weight: 500;} #page_std>footer>ul>li.std_title.padding26>button{padding: 9px 12px 7px;} #page_std>footer>ul{line-height: 56px; } #page_std>footer>ul>li{display: inline-block; } #page_std>footer .page_no{position:relative;margin-left:40px; width: 338px; height: 56px; background:url(../img/common/bg_paging.png) 0 0 no-repeat; line-height:normal; float: right;} #page_std>footer .page_no>span{display: block; vertical-align: middle; margin:5px 0 0 57px} #page_std>footer .page_no .prev{width:24px; height: 37px; background:url(../img/common/ico_prev.png) center center no-repeat; font-size:0; vertical-align: middle; margin-right: 5px;} #page_std>footer .page_no .next{width:24px; height: 37px; background:url(../img/common/ico_next.png) center center no-repeat; font-size:0; vertical-align: middle; margin-left: 20px;} #page_std>footer .page_no .go_page{display: none !important} #page_std>footer .page_no>span>span{ color:#fff; font-size:32px; vertical-align:middle; font-weight: 500; letter-spacing: -2px;} #page_std>footer .page_no>span>input{text-align: center; border: transparent !important; width: 42px; height: 44px; vertical-align: middle; font-size: 33px; font-weight: 500; color: #fff; letter-spacing: -2px; background:transparent !important;} #page_std>footer .page_no:after{position:absolute;content:'';left: 330px;top:0;height:66px;width:1540px;background: url(../img/common/bg_paging_right.png) repeat-x;} #page_std>footer .toolbar{position:relative;float: right;} #page_std>footer .toolbar>button{ width: 96px; height: 96px; background:#eeeeee url(../img/common/ico_toolbar.png) center center no-repeat; font-size:0;} #page_std>footer .toolbar>button.on{ background-color:#b2b2b2;} #page_std>footer .toolbar>ul{position:absolute;bottom:96px;right:0;border-radius: 15px 15px 0 0;overflow: hidden} #page_std>footer .toolbar>ul li{font-size:0;} #page_std>footer .toolbar>ul li>button{width:96px; height: 96px; background-color:#eeeeee; border-bottom:1px solid #dddddd; background-position:center center; background-repeat: no-repeat;} #page_std>footer .toolbar>ul li .tool_jindo{background-image:url(../img/common/ico_tool_jindo.png);} #page_std>footer .toolbar>ul li .tool_doumi{background-image:url(../img/common/ico_tool_doumi.png);} #page_std>footer .toolbar>ul li .tool_memo_new{background-image:url(../img/common/ico_tool_memo.png);} #page_std>footer .toolbar>ul li .tool_link_new{background-image:url(../img/common/ico_tool_link.png);} #page_std>footer .toolbar>ul li .tool_memo{background-image:url(../img/common/ico_tool_memo.png);} #page_std>footer .toolbar>ul li .tool_link{background-image:url(../img/common/ico_tool_link.png);} #page_std>footer .toolbar>ul li .tool_pen{background-image:url(../img/common/ico_tool_pen.png);} #page_std>footer .toolbar>ul li .tool_search{background-image:url(../img/common/ico_tool_search.png);} #page_std>footer .toolbar>ul li .tool_fullpage{background-image:url(../img/common/ico_tool_fullpage.png);} #page_std>footer .toolbar>ul li .tool_print{background-image:url(../img/common/ico_tool_print.png);} #page_std .background{position: absolute;left:50%;top:0} #page_std .background .header{position:relative;left:-2500px;width:5000px;height:57px;background-color: #3c798d} #page_std .background .section{position:relative;left:-2500px;width:5000px;height:968px;background-color: #fff} #page_std .background .footer{position:relative;left:-2500px;width:5000px;height:56px;background-color: #00a7df} /*popup*/ #popup{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: none; } #popup:before{content:""; position:absolute; top:0; left:50%; background: rgba(0,0,0,0.7); width:30000px; margin-left:-15000px; height: 100%;} #popup>div:not(.std_menu){width: auto !important; margin: 0 auto; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19); display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 500px; border-radius: 15px;} #popup>div:not(.std_menu)>header{background: #1bace0; padding:16px 58px 16px 26px; border-radius: 15px 15px 0 0; min-height: 59px;} #popup>div:not(.std_menu)>header:after{content: ""; display: block; clear: both; } #popup>div:not(.std_menu)>header>h4{color: #fff; font-size: 24px; font-weight: 500; float: left; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; width: calc(100% - 40px); overflow: hidden; } #popup>div:not(.std_menu)>header>button{background:#168db8 url(../img/common/ico_popclose.png) center center no-repeat; width: 22px; height: 22px; float: right; vertical-align: middle; position: absolute; padding:29px; top:0; right:0; border-radius: 0 15px 0 0;} #popup>div:not(.std_menu)>section{max-height: 945px; padding: 20px 30px; background: #fff; position: relative; max-width: 1860px; border: 2px solid #1bace0; border-top: 0; font-size:24px; color:#666666; line-height: 31px; letter-spacing: -1px; border-radius: 0 0 15px 15px; min-width: 500px;} #popup>div:not(.std_menu)>section>img{width:100%;} #popup>div:not(.std_menu)>section>span{display:block; padding:0 40px; text-align: center; font-size: 0; background:#fff;} #popup>div:not(.std_menu)>section>span>button{width: 49%; max-width:200px; display: inline-block; letter-spacing: -.1px; font-size: 24px; line-height: 64px; background: #1bace0; text-align: center; border-radius: 10px; border:1px solid #1bace0; color:#fff; margin-right:1%; margin-top:20px;} #popup>div:not(.std_menu)>section>span>button:last-child{border-color:#dddddd; background: #eeeeee; color:#333333; margin-right:0;} #popup>div:not(.std_menu).dialogue_memo>section>span>button,#popup>div:not(.std_menu).dialogue_link>section>span>button{width: 33%; max-width:150px; } #popup>div.std_menu{position: absolute; top: 56px; display: none; left:20px;} #popup>div.std_menu>section:after { content: ""; display: block; clear:both;} #popup>div.std_menu>section>ol,#popup>div.std_menu>section>ul { float: left; } #popup>div.std_menu>section>ol{background:#c08e66 url('../img/common/stdbottombg.png') 6px calc(100% - 8px) no-repeat; padding-left:4px; padding-bottom:15px; border-radius: 0 0 12px 12px;} #popup>div.std_menu>section>ol li{position:relative; border-bottom:1px solid #ccc;} #popup>div.std_menu>section>ol li:before{ content: ""; width: 40px; height: 29px; background: url(../img/common/ico_lnb.png) 0 0 no-repeat; position:absolute; left: -13px;top: 11px;} #popup>div.std_menu>section>ol>li>h4{font-size:26px; padding:6px 0 6px 7px; font-weight: 700; color:#313131;} #popup>div.std_menu>section>ol>li>button{padding: 0px 64px 0px 40px; height:62px; font-size: 26px; font-weight: 400; color: #48609e !important; letter-spacing: -1px; min-width: 360px; width: 100%; background:#eaf2ff; font-weight: 600;} #popup>div.std_menu>section>ol>li>ul>li>button{padding: 0px 64px 0px 40px; height:62px; font-size: 22px; font-weight: 400; color: #313131; letter-spacing: -1px; min-width: 360px; width: 100%; font-weight: 500; background:#fff;} #popup>div.std_menu>section>ol>li>ul>li>button>span{display: inline-block; vertical-align: middle; width:25px; height: 25px; color:#fff; background:#4d4d4d; border-radius: 50%; font-weight: 900; text-align: center; font-family: 'bmjua'; line-height: 24px; font-size: 18px;} #popup>div.std_menu>section>ol>li.selected>button,#popup>div.std_menu>section>ol>li>ul>li.selected>button{background:#b3dbff url(../img/common/ico_menuarrow.png) calc(100% - 15px) center no-repeat; } #popup>div.std_menu>section>ol>li.passed>button{color: rgba(255,255,255,0.5);} #popup>div.std_menu>section>ol>li.on>button:after{content: ""; width: 41px; height: 41px; background: url(../img/common/ico_passed.png) 0 0 no-repeat; display: inline-block; vertical-align: middle; margin-left: 10px;} #popup>div.std_menu>section>ul { background-color:#0b6c8f;} #popup>div.std_menu>section>ul li{cursor: pointer;font-size:22px; letter-spacing: -1px; color:#fff; border-bottom:2px solid rgba(255,255,255,0.1); padding: 15px 30px 15px 20px;} #popup>div.std_menu>section>ul li:last-child{border-bottom:0;} #popup>div.std_menu>section>ul li h6{display: inline-block; font-size: 17px; color: #888888; border: 1px solid #cccccc; border-radius: 11px; padding: 2px 5px; background:#fff; margin-right:10px;} #popup>div.std_menu>section>ul li h5{display:inline-block; } #popup>div.std_menu>section>ul li h5+i{display: inline-block; margin-left:10px;font-style: normal;} #popup>div.std_menu>section>ul li>button{font-size: 19px; color: #fff; letter-spacing: -.5px; padding: 0px 6px; background: #458faa; border: 2px solid #71aabe; border-radius: 7px; margin:0 10px; vertical-align: middle;} /*#popup>div.std_menu>section>ul li:before{content:""; display:inline-block; width: 40px; height: 40px; background: url(../img/common/ico_stdmenu_check.png) 0 0 no-repeat; vertical-align: middle;}*/ #popup>div.std_menu>section>ul li.selected{background:#0f6080; } #popup>div.std_menu>section>ul li.selected em,#popup>div.std_menu>section>ul li.selected h5, #popup>div.std_menu>section>ul li.selected i{color:#ffdd33;} #popup>div.std_menu>section>ul li.passed:before{background-position-y:-40px;} #popup>div.std_menu>section>ul li.passed{background:#0b5977; color:rgba(255,255,255,0.4);} #popup>div.std_menu>section>ul li.passed:after{content: ""; display:none; width:74px; height:32px; background: url(../img/common/ico_stdmenu_studying.png) center center no-repeat;vertical-align: middle; margin-left: 15px;} #popup>div.std_menu>section>ul li.on{background:#0a3d52;} #popup>div.std_menu>section>ul li.on>h5:after,#popup>div.std_menu>section>ul li.on>em:after{content:"";width: 34px; height: 34px; background: url(../img/common/ico_passed.png) 0 0 no-repeat;vertical-align: middle; margin-left: 10px; display: inline-block; background-size:100%;} #popup>div.std_menu>section>ul li span{float: right; margin-left:50px;} #popup>div.std_menu>section>ul button.go_ebook { opacity: 0.3; display: none; } #popup>div.std_menu>section>ul button.go_std { background-color: #fff; color: #333; border-radius: 19px; padding: 8px 10px; font-weight: 600; font-size: 20px;display: none;} #popup>div.std_menu>section>ul button.go_ex {display:none;} #popup>div.std_menu .close{position:absolute; right:-72px; top:8px; width:64px; height:64px; background: rgba(0,0,0,0.8) url(../img/common/ico_popclose.png) center center no-repeat; font-size:0; border-radius: 100%;} /**/ #page_std>section { width: 1920px; height: 960px;margin:0 auto; } #page_std>section.fs {position: absolute; z-index: 999999;} #page_std>section .con_body{position: relative; height: 960px;margin:0 auto;} #page_std>section .con_body .con_head{width:100%;height:90px;line-height:35px;margin:0 auto;} #page_std>section .con_body .con_head:before{position:absolute;left:50%;width:5000px;height:90px;background:url(../img/common/con_head_bg.jpg);margin-left:-2500px;content:''} #page_std>section .con_body .con_head >h1{position:relative;left:40px;top:30px;font-family:'lhb';font-size:45px;} #page_std>section .con_body .con_head >h1:before{content:"";position:absolute;left:-80px;top:-30px;width:100px; height:106px;background:url(../img/common/ico_con_head_1.png) 0 0 no-repeat;} #page_std>section .con_body .con_contents{position:absolute;top:90px;width:100%;height:878px;background:#fff} #page_std>section .con_body .con_contents>.tab{position:absolute;right:30px;top:-57px;z-index: 1;} #page_std>section .con_body .con_contents>.tab >span{margin-left:10px;} #page_std>section .con_body .con_contents>.tab >span > button{font-size:30px;border:1px solid #333;min-width:100px;padding:10px 20px;} #page_std>section .con_body .con_contents>.content{width:100%;text-align:center;} #page_std>.std_loading {position: absolute;left:50%;top: 56px;width: 5303px;margin-left:-2500px;height: 969px;z-index: 101;background-color: #fff;transform:translate3d(0px, 0px, 0px);display:flex;justify-content: center;align-items: center;} /**/ #page_ebook{will-change: initial;} #page_ebook .background,#page_pds .background{position: absolute;left: 50%;top: 0;width:5000px;height:100%;background:#78b8a1;margin-left:-2500px} #ebook_lnb{ position: absolute; width:600px; background: #fff; height: 100%; box-shadow: 13px 17px 20px rgba(0, 0, 0, 0.4); z-index: 100; background:#051f29; left:-600px;} #ebook_lnb.bookmark_bg{background:#fff;} #lnb_title{position: relative;} #lnb_title h2{font-size:0; min-height: 200px;} #ebook_lnb.bookmark_bg h2{background:url(../img/common/bgbookmark.png) 0 0 no-repeat;} #lnb_title>ul{position:absolute; right:-79px; top:0;} #lnb_title>ul li{font-size: 0;} #lnb_title>ul li button{width:80px; height:80px; border-bottom:1px solid #dddddd; background-color:#eeeeee; background-repeat: no-repeat; background-position:center center; position:relative;} #lnb_title>ul li:nth-of-type(1) button{background-image:url(../img/common/ico_lnbhome.png); border-radius: 0 15px 0 0;} #lnb_title>ul li:nth-of-type(2) button{background-image:url(../img/common/ico_lnblist.png);} #lnb_title>ul li:nth-of-type(3) button{background-image:url(../img/common/ico_lnbpds.png);} #lnb_title>ul li:nth-of-type(4) button.list_bookmark{background-image:url(../img/common/ico_lnbbmark.png); border-radius: 0 0 15px 0; border-bottom:0;} #lnb_title>ul li:nth-of-type(4) button.del_bookmark_all{background-image:url(../img/common/ico_lnbbmarkdel.png); width:57px; height: 64px; background-color:transparent; position:absolute; left: -78px; top: 120px; border:0;} #lnb_title>ul li.on button:nth-of-type(1):after{content: ""; position: absolute; right: -15px; top: 0; width: 16px; height: 100%; background-color: #1bace0; border-bottom: 1px solid transparent; border-radius: 0 15px 15px 0; z-index: 1; } #lnb_title>ul li:nth-of-type(2).on button{ background-color:#1bace0; border-radius: 0 !important; } #lnb_title>ul li:nth-of-type(4).on button.list_bookmark{ background-color:#1bace0; border-radius: 0 !important;} #lnb_title>em{position: absolute; cursor: pointer; right: -75px; top: 340px; background: url(../img/common/ico_lnbclose.png) center center no-repeat; width: 64px; height: 64px;} /*lnb menu*/ #ebook_lnb .menu_list{ color:#fff; padding-right:15px; margin:15px 0; overflow-y:scroll; height:calc(100% - 214px); -ms-overflow-style:none; } #ebook_lnb .menu_list::-webkit-scrollbar { display:none; } #ebook_lnb .menu_list>li>h3{cursor: pointer;font-size:28px; letter-spacing: -1px; color:rgba(255,255,255,0.6); width:100%; border-radius:0 15px 15px 0; line-height:77px; padding:0 25px; position:relative;} #ebook_lnb .menu_list>li>h3:after{content: ""; position:absolute; width:23px; height:13px; background:url(../img/common/lnb_drop.png) 0 0 no-repeat; right: 30px; top: calc(50% - 6.5px);} #ebook_lnb .menu_list>li>h3.on:after{background-position-y:-13px; } #ebook_lnb .menu_list>li>h3.on:before{content: ""; width:4px; height:100%; position:absolute; left:0; top:0; background:#1bace0;} #ebook_lnb .menu_list>li>h3.on{color:#fff; background-color:#066a8f;} #ebook_lnb .menu_list>li>h3>button{display:none;width:32px; height:32px; background:url(../img/common/ico_shortcut.png) 0 0 no-repeat;vertical-align: middle; margin-left: 15px} #ebook_lnb .menu_list>li>ol{background: #053141; width:calc(100% - 15px); border-radius: 0 0 30px 0; overflow:hidden;} #ebook_lnb .menu_list>li>ol>li>button{width:100%; padding:15px 30px; font-size:22px; color:#fff; letter-spacing: -1px;} #ebook_lnb .menu_list>li>ol>li>button>span{display: inline-block; margin-right: 15px; color: #fff; padding: 2px 6px 0; background: #458faa; border: 2px solid #71aabe; border-radius: 7px;vertical-align: middle; font-size: 19px; letter-spacing: -1px;} #ebook_lnb .menu_list>li>ol>li button.on{background:#04475f; color:#1dbbf5; font-weight: 500;} /* #ebook_lnb .menu_list>li>ol>li>button.on:after {content: ""; display: inline-block; width: 6px;height: 6px; border-radius: 100%;background: #1dbbf5; vertical-align: top; margin-left: 6px; position: absolute;} */ #ebook_lnb .menu_list li.dimmed{display: none;} #ebook_lnb .menu_list>li>ol>li>h4{font-size: 25px; letter-spacing: -1px; color: rgba(255,255,255,0.6); width: 100%; border-radius: 0 15px 15px 0; line-height: 77px; padding: 0 60px; position: relative; cursor: pointer;} #ebook_lnb .menu_list>li>ol>li>h4:after{content: ""; position:absolute; width:23px; height:13px; background:url(../img/common/lnb_drop.png) 0 0 no-repeat; right: 30px; top: calc(50% - 6.5px);} #ebook_lnb .menu_list>li>ol>li>h4.on:after{background-position-y:-13px; } #ebook_lnb .menu_list>li>ol>li>h4.on{color:#fff;} #ebook_lnb .menu_list>li>ol>li>ol{overflow:hidden; height:auto;} #ebook_lnb .menu_list>li>ol>li>ol>li>button{width:100%; padding:15px 5px 15px 60px; font-size:22px; color:#fff; letter-spacing: -1px;} #ebook_lnb .menu_list>li>ol>li>ol>li>button>span{display: inline-block; margin-right: 15px; color: #fff; padding: 2px 6px 0; background: #458faa; border: 2px solid #71aabe; border-radius: 7px;vertical-align: top; font-size: 19px; letter-spacing: -1px;} #ebook_lnb .menu_list>li>ol>li>ol>li>button>em{display:inline-block; width:73%; line-height: 1.4; word-break: keep-all;} /*lnb bookmark*/ #ebook_lnb .bookmark { display: none; padding: 30px; } #ebook_lnb .bookmark:after {content: ""; display: block; clear: both;} #ebook_lnb .bookmark>li {float: left; width: 125px; height: 165px; border: 1px solid #e5e5e5; margin-right: 9px; position: relative; } #ebook_lnb .bookmark>li:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.4);} #ebook_lnb .bookmark>li:nth-child(4n) {margin-right: 0; } #ebook_lnb .bookmark>li+li+li+li+li {margin-top: 10px; } #ebook_lnb .bookmark>li>p {font-size: 36px; font-weight: 900; letter-spacing: -1px; position: absolute; width: 100%; height: 100%; text-align: center; line-height: 165px; cursor: pointer; } #ebook_lnb .bookmark>li>button {position: absolute; width: 34px; height: 34px; right: 5px; top: 5px; background: url(../img/common/bookmark_del.png) 0 0 no-repeat; z-index: 1; } #ebook_lnb .bookmark>li button:hover {background-position-y: -34px; } #ebook_lnb .bookmark>li:hover {border: 1px solid #128eb8; } #ebook_lnb .bookmark>li:hover:before {background: rgba(8, 155, 204, 0.8); border: 2px solid #128eb8; } /**/ /**/ #page_go_ebook{position:absolute; bottom: 65px; left: 11px; z-index: 1; width:65px; height:65px; background:url(../img/common/ico_pagego.png) 0 0 no-repeat; z-index: 5;} #page_go_ebook>input{width: 75px; height: 48px; font-size: 24px; color: #333333;border-radius: 6px; text-align: center; vertical-align: middle; border:1px solid #e5e5e5; display: none; text-align: center;} #page_go_ebook input[type="number"]::-webkit-outer-spin-button, #page_go_ebook input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;} #page_go_ebook>button{font-size:0; width:100%; height:100%;} #page_go_ebook.go .go_page:after{position:absolute;left:105px;content:attr(data-after);display:inline-block;width:100px;font-size:25px; line-height: 53px;} #page_go_ebook.go span{display:block;} #page_go_ebook.go{width:auto; height: auto; padding:15px; background: rgba(0,0,0,0.7); border-radius: 10px;} #page_go_ebook.go>button{margin-left:80px;color: #fff; background: #ffd343; font-size: 21px; height: 48px; padding: 0 10px; font-weight: 500; border-radius: 13px; width: auto;} /*스마트 수업(학습중)*/ #page_go_std{display:none;position:absolute; top: 15px; left: 1833px; z-index: 1; width:82px; height:76px; background:url(../img/common/ico_stdgo.png) 0 0 no-repeat; z-index: 5;} #page_go_std.go{display:block;} #page_go_std>button{font-size:0; width:100%; height:100%;} /* #ebook_pages{position: relative; left: 50%; margin-left: -840px; top: 10px; width: 1680px; height: 1043px; z-index: 1; touch-action: none; } */ #ebook_pages{position: relative; left: 50%; margin-left: -801px; top: 10px; width: 1602px; height: 1043px; z-index: 1; /* display: none; */ touch-action: none; } /**/ /*임시*/ #p_left>p{right: 223px;} #p_right>p{left: 223px;} #p_right>p,#p_left>p{display:none; font-size: 300px; position: absolute; top: 50%; transform: translateY(-50%); color: red; } #p_left>h4{right: 297px;} #p_right>h4{left: 297px;} #p_right>h4,#p_left>h4{ color: red; font-size: 35px; position: absolute; top: 315px; } /**/ /**/ #thumb_title {position: absolute; min-width: 390px; background: #051f29; display : block !important; top: -113px; left: 43px; z-index: 2; padding: 8px; border-radius: 8px 8px 8px 0; } #thumb_title.soc{top: -158px; } #thumb_title:before {content: ""; position: absolute; top: calc(100% - 1px); left: 10px; margin-left: -10px; border-width: 10px; border-style: solid; border-color: #051f29 transparent transparent #051f29; } #thumb_title h3 {background: #066a8f; color: #fff; font-size: 26px; font-weight: 700; letter-spacing: -.5px; padding: 10px 23px; border-radius: 8px; } #thumb_title h4 {font-size: 22px; color: rgba(255,255,255,0.6); letter-spacing: -.5px; padding: 10px 25px; } #thumb_title h5 {font-size: 22px; color: rgba(255,255,255,0.6); letter-spacing: -.5px; padding: 10px 55px; } /* Button of Bookmark */ #btn_bookmark_L, #btn_bookmark_R {position: absolute; z-index: 113; width: 40px; height: 48px; background: url(../img/common/ico_bookmark.png) 0 0 no-repeat; top: 0px; } #btn_bookmark_L.on, #btn_bookmark_R.on {background-position-y: -48px; } #btn_bookmark_L {left: 80px; } #btn_bookmark_R {right: 80px; } /*Buttons of move*/ #btn_prev, #btn_next {position: absolute; width: 40px; height: 120px; z-index: 90; top: 50%; transform: translateY(-50%); cursor: pointer; } #btn_prev {left: -40px; background: url(../img/common/ico_arrowLeft.png) center center no-repeat; } #btn_next {right: -40px; background: url(../img/common/ico_arrowRight.png) center center no-repeat; } /*#ebook_pages>div {position: absolute; height: 100%; top: 0%; opacity: 1; background-size: 840px 100%; background-repeat: no-repeat; background-position: auto center; will-change: auto;}*/ #ebook_pages>div {position: absolute; height: 100%; top: 0%; opacity: 1; background-size: 801px 100%; background-repeat: no-repeat; background-position: auto center; will-change: auto;} #ebook_pages>div.page { background-color: white; } #ebook_pages>div.page>div {position: relative; width: 100%; height: 100%; margin: 0; } /* shadowing inner of top_pages */ #this_left>div, #prev_left>div {opacity: 0.3; background: url("../img/common/shadow_pageLeft_edge.png") right top repeat-y; } #this_right>div, #next_right>div {opacity: 0.3; background: url("../img/common/shadow_pageRight_edge.png") left top repeat-y; } /* shadowing inner of bottom_pages */ #prev_right>div:first-child {opacity: 0.3; background: url("../img/common/shadow_pageRight_edge.png") left top repeat-y; } #next_left>div:first-child {opacity: 0.3; background: url("../img/common/shadow_pageLeft_edge.png") right top repeat-y; } /* shadowing outer of swipping pages edge */ #ebook_pages>div.swipping:nth-child(odd) {box-shadow: -10px 0 30px rgba(0, 0, 0, 50%); } #ebook_pages>div.swipping:nth-child(even) {box-shadow: 10px 0 30px rgba(0, 0, 0, 50%); } /* style of marker button */ #ebook_pages>div>div button.icon_caption {position: absolute; display: block; background-color: rgba(255,0,0,0.2); border: 0; width: 5%; height: 1%; overflow-x: hidden; cursor: pointer; padding: 10px 0; } /* #ebook_pages>div>div>span:hover button { opacity: 0.3; } */ #ebook_pages>div>div>span button.hit {opacity: 0.7; } #ebook_pages>div>div.pc>span:hover button {opacity: 0.3 !important; } #ebook_pages>div>div.pc>span button.hit {opacity: 0.7 !important; } /* prev pages */ /* book Outside*/ #prev_left {z-index: 10; top: 0%; width: 50%; left: 0%; box-shadow: rgba(0, 0, 0, 100%) -20px 0 10px; } #prev_left>div:last-child {float: left; opacity: 1; background: url("../img/common/book_edge_L.png") left top repeat-y; } #prev_right {z-index: 30; top: 0%; width: 0%; left: 0%; background-position: right center; opacity: 0.3; } #ebook_pages>#prev_left>div:last-child {opacity: 1; background: url("../img/common/book_edge_L.png") no-repeat; position: absolute; left: -30px; top: 0; background-size: cover; width: 30px; height:100%; } /* this pages */ #this_left {z-index: 20; top: 0%; width: 50%; right: 50%; background-position: right center; background-image: url(""); } #this_right {z-index: 20; top: 0%; width: 50%; left: 50%; background-image: url(""); } /* next pages */ #next_left {z-index: 30; top: 0%; width: 0%; right: 0%; background-image: url(""); opacity: 0.3; } /* book Outside*/ #next_right {z-index: 10; top: 0%; width: 50%; right: 0%; background-image: url(""); box-shadow: rgba(0, 0, 0, 100%) 20px 0 10px; } #ebook_pages>#next_right>div:last-child {z-index: 1; opacity: 1; background: url("../img/common/book_edge_R.png") no-repeat; position: absolute; left: 100%; top: 0; background-size: cover; width: 30px; height:100%; } /* 확대페이지 - 아이콘 사이즈 */ #icons_full {top : 0; position: absolute; width: 100%; height: 100%; } #ebook_pages>div>div#full_bg button,#ebook_pages>div>div#full_bg .icon_memo_new,#ebook_pages>div>div#full_bg .icon_link_new,#ebook_pages>div>div#full_bg .icon_memo,#ebook_pages>div>div#full_bg .icon_link{z-index: 121; position: absolute; width: 120px; height: 120px; margin : 15px 0 0 15px; /* 아이콘 사이즈 줄여달라는 요청으로 위치값 일괄 조정 */ background-size: 100%; } #ebook_pages>div#full_thumb {width : 120px; height : 165px; background : url("") 0 0 no-repeat; position : absolute; background-size : 100%; z-index : 12; right: -170px; top: 830px; background-color : white; padding: 0; display: none; } #ebook_pages>div#full_thumb>button,#ebook_pages>div>div#full_thumb .icon_memo_new,#ebook_pages>div>div#full_thumb .icon_link_new,#ebook_pages>div>div#full_thumb .icon_memo,#ebook_pages>div>div#full_thumb .icon_link {width : 120px; height : 55px; margin: -2px 0 -3px 0; background-color : black; opacity : 0.5; position: left; display : inline-block; border : 1px dotted gray; } #ebook_pages>div#full_thumb>button.on {opacity : 0; } .icon_img{background: url(../img/common/ebook_icons/viewImg.png) 0 0 no-repeat; } .icon_ani{background: url(../img/common/ebook_icons/animation.png) 0 0 no-repeat; } .icon_video{background: url(../img/common/ebook_icons/video.png) 0 0 no-repeat; } .icon_map{background: url(../img/common/ebook_icons/map.png) 0 0 no-repeat; } .icon_ppt{background: url(../img/common/ebook_icons/ppt.png) 0 0 no-repeat; } .icon_quiz{background: url(../img/common/ebook_icons/answer_on.png) 0 0 no-repeat; } .icon_intro{background: url(../img/common/ebook_icons/answer_on.png) 0 0 no-repeat; } .icon_add{background: url(../img/common/ebook_icons/supplement.png) 0 0 no-repeat; } .icon_eye{position: absolute; width: 35px; height: 35px; background: url(../img/common/ebook_icons/eye.png) 0 0 no-repeat; background-size: 100%; } .icon_eye.hidden{position: absolute; width: 35px; height: 35px; background: url(../img/common/ebook_icons/eye_off.png) 0 0 no-repeat; background-size: 100%; } .icon_sound{background: url(../img/common/ebook_icons/sound.png) 0 0 no-repeat; } .icon_sound.hidden{background: url(../img/common/ebook_icons/sound_off.png) 0 0 no-repeat; } .icon_caption{background-color : rgba(255,0,0,0.2); position: relative; } .icon_caption:before{content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 100%; position: absolute; top: -5px; left: -5px; background: #9aca46;} .icon_caption.off:before{display:none;} .icon_memo_new{border-radius: 15px; background:url(../img/common/ebook_icons/ico_memo.png) 0 0 no-repeat; display:inline-block;} .icon_link_new{border-radius: 15px; background:url(../img/common/ebook_icons/ico_link.png) 0 0 no-repeat; display:inline-block;} .icon_memo{border-radius: 15px; background:url(../img/common/ebook_icons/ico_memo.png) 0 0 no-repeat; display:inline-block;} .icon_link{border-radius: 15px; background:url(../img/common/ebook_icons/ico_link.png) 0 0 no-repeat; } .icon_memo_new>span,.icon_link_new>span,.icon_memo>span,.icon_link>span{font-size:0; display: none;} .icon_memo_new>em,.icon_link_new>em,.icon_memo>em, .icon_link>em {position:absolute; width:50px; height: 50px; border-radius: 50%; background:rgba(0,0,0,0.7); top:50%;left: 50%; margin-left: -25px; margin-top: -25px; border: 0px solid #000; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);-webkit-transition: -webkit-transform ease-out 200ms; transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms; background-position: center center; background-repeat: no-repeat;} .icon_memo_new>em:nth-of-type(1),.icon_link_new>em:nth-of-type(1),.icon_memo>em:nth-of-type(1),.icon_link>em:nth-of-type(1){background-image:url(../img/common/ico_linkmodify.png);} .icon_memo_new>em:nth-of-type(2),.icon_link_new>em:nth-of-type(2),.icon_memo>em:nth-of-type(2),.icon_link>em:nth-of-type(2){background-image:url(../img/common/ico_linkdel.png);} .icon_memo_new>em:nth-of-type(3),.icon_link_new>em:nth-of-type(3),.icon_memo>em:nth-of-type(3),.icon_link>em:nth-of-type(3){background-image:url(../img/common/ico_linkdrag.png);} .icon_memo_new>em:hover,.icon_memo_link>em:hover,.icon_link_new>em:hover,.icon_memo_link>em:hover,.icon_memo>em:hover,.icon_link>em:hover{animation: borderPulse 2s infinite;} .icon_memo_new.on > em:nth-of-type(1),.icon_memo.on > em:nth-of-type(1),.icon_link.on > em:nth-of-type(1) {-webkit-transition-duration: 580ms;transition-duration: 580ms;-webkit-transform: translate3d(-58.86291px, 52.62064px, 0);transform: translate3d(-58.86291px, 52.62064px, 0);} .icon_memo_new.on > em:nth-of-type(2),.icon_memo.on > em:nth-of-type(2),.icon_link.on > em:nth-of-type(2) {-webkit-transition-duration: 480ms; transition-duration: 480ms; -webkit-transform: translate3d(0.08361px, 88.99997px, 0); transform: translate3d(0.08361px, 88.99997px, 0); } .icon_memo_new.on > em:nth-of-type(3),.icon_memo.on > em:nth-of-type(3),.icon_link.on > em:nth-of-type(3) {-webkit-transition-duration: 380ms; transition-duration: 380ms; -webkit-transform: translate3d(58.86291px, 52.62064px, 0); transform: translate3d(58.86291px, 52.62064px, 0); } @keyframes borderPulse {0% {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);} 75%{box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);} 100% {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}} .icon_link_new.on > em:nth-of-type(1){-webkit-transition-duration: 580ms;transition-duration: 580ms;-webkit-transform: translate3d(61.13709px, -47.37936px, 0);transform: translate3d(61.13709px, -47.37936px, 0);} /*익힘,교과서*/ .icon_ebook{width: 125px !important; height: 59px !important; padding:34px 3px 11px 53px; background:url(../img/common/ico_ebooks.png) 0 0 no-repeat;} .icon_sbook{width: 137px !important; height: 59px !important; padding:33px 9px 11px 72px; background:url(../img/common/ico_sbook_mat.png) 0 0 no-repeat; } .icon_sbook>.title,.icon_ebook>.title{font-size:12px; color:#333;font-family: 'bmjua'; text-align: center; display: block; } .icon_sbook>.title:after,.icon_ebook>.title:after{content:" 쪽";} .icon_ebook>.title{color:#fff;} #full_bg .icon_ebook{width: 250px !important; height: 118px !important; padding:61px 14px 17px 111px;} #full_bg .icon_sbook{width: 274px !important; height: 118px !important; padding:63px 10px 18px 135px;} #full_bg .icon_sbook>.title,#full_bg .icon_ebook>.title{font-size: 23px;} .icon_video{width:39px !important; height: 42px !important; background: url(../img/common/ebook_icons/video1.png) 0 0 no-repeat !important;} #full_bg .icon_video{width: 78px !important; height:84px !important; background-size: 100% !important;} /*활동지*/ .icon_actSheet{width:34px !important; height: 35px !important; background: url(../img/common/ebook_icons/actSheet.png) 0 0 no-repeat !important;background-size: contain !important;} #full_bg .icon_actSheet{width: 67px !important; height:69px !important; background: url(../img/common/ebook_icons/actSheet2.png) 0 0 no-repeat !important; background-size: contain !important;} /*smart수업*/ .icon_std{width:auto !important; height:auto !important;} .icon_std>em{display:inline-block; width: 32px !important; height: 48px !important; background: url(../img/common/ebook_icons/std.png) 0 0 no-repeat; /*animation: borderPulseblue 2s infinite; border-radius: 50%;*/} .icon_std>em:before{content:""; position:absolute; width:24px; height: 24px; border-radius: 50%; background:rgba(236,0,140,0.4); top:-8px; left:-8px; z-index: -1; animation: borderPulse 2s infinite} .icon_std>em:after{content:""; position:absolute; width:8px; height: 8px; border-radius: 50%; background:#ec008c; top:0px; left:0px;animation: Pulse 2s infinite} #full_bg .icon_std>em{width: 64px !important; height: 96px !important; background-size:100% !important;} #full_bg .icon_std>em:before{width:48px; height: 48px; top:-16px; left:-16px;} #full_bg .icon_std>em:after{width: 16px; height: 16px; } @keyframes borderPulse {0% {box-shadow: 0 0 0 0 rgba(236,0,140,0.2);} 75%{box-shadow: 0 0 0 10px rgba(109, 185, 252, 0);} 100% {box-shadow: 0 0 0 0 rgba(109, 185, 252, 0);}} @keyframes Pulse{0%{opacity: 1;}75%{opacity: 0;}100%{opacity: 1;}} /*full icon*/ #ebook_pages>div>div#full_bg .icon_memo_new,#ebook_pages>div>div#full_bg .icon_link_new,#ebook_pages>div>div#full_bg .icon_memo,#ebook_pages>div>div#full_bg .icon_link{border-radius: 35px;} #ebook_pages>div>div#full_bg .icon_memo_new>em,#ebook_pages>div>div#full_bg .icon_link_new>em,#ebook_pages>div>div#full_bg .icon_memo>em,#ebook_pages>div>div#full_bg .icon_link>em{width:70px; height:70px; background-size: 25px;} #ebook_pages>div>div#full_bg .icon_memo_new.on > em:nth-of-type(1),#ebook_pages>div>div#full_bg .icon_link_new.on > em:nth-of-type(1),#ebook_pages>div>div#full_bg .icon_memo.on > em:nth-of-type(1),#ebook_pages>div>div#full_bg .icon_link.on > em:nth-of-type(1) {-webkit-transform: translate3d(61.13709px, -47.37936px, 0);transform: translate3d(82.27418px, -94.75872px, 0);} #ebook_pages>div>div#full_bg .icon_memo_new.on > em:nth-of-type(2),#ebook_pages>div>div#full_bg .icon_link_new.on > em:nth-of-type(2),#ebook_pages>div>div#full_bg .icon_memo.on > em:nth-of-type(2),#ebook_pages>div>div#full_bg .icon_link.on > em:nth-of-type(2) {-webkit-transform: translate3d(-7.08361px, 131.99997px, 0);transform: translate3d(-7.08361px, 131.99997px, 0);} #ebook_pages>div>div#full_bg .icon_memo_new.on > em:nth-of-type(3),#ebook_pages>div>div#full_bg .icon_link_new.on > em:nth-of-type(3),#ebook_pages>div>div#full_bg .icon_memo.on > em:nth-of-type(3),#ebook_pages>div>div#full_bg .icon_link.on > em:nth-of-type(3) {-webkit-transform: translate3d(75.86291px, 75.62064px, 0);transform: translate3d(75.86291px, 75.62064px, 0);} #icons_left{left: 0; width: 50%; } #icons_right{right: 0; width: 50%; } #icons_left>button,#icons_right>button,#icons_std>button,.icon_memo_new,.icon_link_new,.icon_memo,.icon_link {position: absolute; z-index: 100; width: 60px; /* 아이콘 사이즈 줄여달라는 요청으로 35px >> 20px로 조정 */ height: 60px; margin : 7px 0 0 7px; /* 아이콘 사이즈 줄여달라는 요청으로 위치값 일괄 조정 */ background-size: 100%;transition: all 0.5s; cursor: pointer;} #icons_left>button:hover,#icons_right>button:hover,#icons_std>button:hover,.icon_memo_new:hover,.icon_link_new:hover,.icon_memo:hover,.icon_link:hover{transform: scale(1.1);} #icons_left>button.editing,#icons_right>button.editing,#icons_std>button.editing,.icon_memo_new,.icon_link_new,.icon_memo.editing,.icon_link.editing{transition:none;} #icons_left>button.editing:hover,#icons_right>button.editing:hover,#icons_std>button.editing:hover,.icon_memo_new:hover,.icon_link_new:hover,.icon_memo.editing:hover,.icon_link.editing:hover{transform: none;} /* 펜쓰기 캔바스 */ canvas.canvas_layer {position: absolute; z-index: 100;left: 0; top: 0; transform: translate(0% , 0%); display: none; box-sizing:border-box} canvas.dummy_canvas {position: absolute; z-index: 100;left: 0; top: 0; transform: translate(0% , 0%); display: none; box-sizing:border-box} #page_std canvas.canvas_layer,#page_std canvas.dummy_canvas{z-index: 1;} #draw_std { width: 100% !important; height: 959px; top: 61px;} #draw_ebook_zoom {top: 0;} #wrap>div:not(#popup)#canvas_frame{height: 0 !important; position:absolute; top:0; left:0; z-index: 1;} #canvas_frame>div{position: absolute; z-index: 100; width: 1680px; height: 1043px; left: 121px; top: 10px; border:4px solid #ffa333 !important; pointer-events: none;} #canvas_frame>button{position: absolute; top: 10px;left: 1751px; width: 48px; height: 48px; background: url(../img/common/canvasClose.png) 0 0 no-repeat; font-size:0; } #full_page {background-color : white; width : 1602px; height : 1000px; overflow-y : auto; left : 0; top : 0; z-index : 111; display : none;} #full_page::-webkit-scrollbar{display: none;} #full_bg{background-image: url(""); background-size: 100%; width : 1602px; height : 2086px; position : relative; z-index : 112; background-size:100% 100%;} #direct{position: absolute;left:50%;top:0; width:2520px;height:100%; background-color:rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center;margin-left:-1260px;z-index: 100;} #direct >button{font-size:60px;padding:10px 40px;border:1px solid #333;background:#0b6c8f;color:#fff;border-radius: 20px;} /**/ #navigator {position: absolute; height: 8px; z-index: 22; overflow: visible; bottom: 0; left: 50%; width:1612px; margin-left:-806px;} #pointer_area {position: absolute; left: 0px; top: -48px; height: 80px; width: 100%; z-index: 151; touch-action: none; opacity : 0.5; } #navigator>span {display: none; } #progress {position: relative; float: left; left: 55px; top: 0; width: 1492px; height: 8px; background: gray; border-radius: 10px;} #pointer {position: relative; display: block; width: 210px; height: 56px; margin-left : -105px; top: -48px; left: 50%; z-index: 1;} #pointer:before {content: attr(data-content); display: block; width: 100%;} #pointer>h5{font-size: 22px; color: #333333; position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-align: center; line-height: 56px; background: #fff; border: 3px solid #cccccc; border-bottom: 0; border-radius: 14px 14px 0 0; font-weight: 600; } #progress>em{content:""; display: block; width:50%; position:absolute; left:0; top:0; height:100%; background:#17b2e6; border-radius: 10px;} #thumbnail {position: absolute; left: 50%; margin-left: -150px; width: 300px; height: 200px; border: 8px solid #051f29; /* display: none; */ box-shadow: rgba(0, 0, 0, 40%) 0 0 15px; bottom: 28px; z-index: -1; border-bottom: 20px solid #051f29; display:none; background-color:white; } #thumbnail>img {float: left; vertical-align: middle; line-height: normal; width: 142px; height: 173px; margin : 0; } #thumbnail>img+img {border-left: 1px solid #e5e5e5; } #thumbnail>p {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: table; } #thumbnail>p>span {display: block; width: 50%; text-align: center; font-size: 50px; line-height: 100%; vertical-align: middle; display: table-cell; font-weight: 900; color: #222; background: rgba(255, 255, 255, 0.3); } #page_num {display: none; } /**/ #toolbar{ position:absolute !important; width:96px; right: 30px; bottom:30px; text-align: center; height: auto !important; border-radius: 0 0 20px 20px; z-index: 666;} #show_toolbar {width:87px; height:87px; background:url(../img/common/ico_etools.png) 3px 0 no-repeat; font-size:0;} #toolbar>ul{position:absolute; bottom: 87px; display: none;} #toolbar>ul>li{font-size:0; position:relative;} #toolbar>ul>li>button{width:96px; height: 96px; background-color:#051f29; border-bottom:2px solid #2d434b; background-repeat: no-repeat; background-position:center;} #toolbar>ul>li>button:hover{background-color:#11313e;} #toolbar>ul>li.selected>button{background-color:#1bace0; border-color:#1bace0; position:relative;} #toolbar>ul>li.selected>button.tool_pen:after,#toolbar>ul>li.selected>button.tool_doumi:after{content:""; position: absolute; top: 50%; right:calc(100% - 2px); margin-top: -10px; border-width: 10px; border-style: solid; border-color: transparent #1bace0 transparent transparent; z-index: 22;} #toolbar>ul>li:first-child button{border-radius:20px 20px 0 0 ;} #toolbar>ul>li:last-child button{border-bottom:0; } #toolbar>ul .tool_jindo{background-image:url(../img/common/ico_tool_jindoW.png);} #toolbar>ul>li.ok>button.tool_jindo:after{content:""; position:absolute; right:0; bottom:0; width:36px; height:36px; background:url(../img/common/ico_jindo_on.png) 0 0 no-repeat;} #toolbar>ul .tool_doumi{background-image:url(../img/common/ico_tool_doumiW.png);} /*#toolbar>ul .tool_memo{background-image:url(../img/common/ico_tool_memoW.png);}*/ #toolbar>ul .tool_memo{background-image:url(../img/common/bt_test_memo.png);} #toolbar>ul .tool_memo_new{background-image:url(../img/common/bt_test_memo.png);} #toolbar>ul .tool_link_new{background-image:url(../img/common/ico_tool_linkW.png);} #toolbar>ul>li.selected:after{content:"원하는 위치에";} #toolbar>ul .tool_link{background-image:url(../img/common/ico_tool_linkW.png);} #toolbar>ul .tool_pen{background-image:url(../img/common/ico_tool_penW.png);} #toolbar>ul .tool_search{background-image:url(../img/common/ico_tool_searchW.png);} #toolbar>ul .tool_fullpage{background-image:url(../img/common/ico_tool_fullpageW.png);} #toolbar>ul li.is_full .tool_fullpage{background-image:url(../img/common/ico_tool_full.png);} #toolbar>ul .tool_print{background-image:url(../img/common/ico_tool_printW.png);} #toolbar>ul>li>ul{display: none; position: absolute; top: 0; right: calc(100% - 1px); z-index: 21;} #toolbar>ul>li.selected>ul{display: block;} #toolbar.active>button{background-position-y:-87px;} #toolbar.active>ul{display: block;} #toolbar.active{ background: #051f29; } #toolbar>ul>li>ul>li:first-child>button{border-radius: 17px 17px 0 0;} #toolbar>ul>li>ul>li:last-child>button{border-radius:0 0 17px 17px;} #toolbar>ul>li>ul>li{font-size:0; position:relative;} #toolbar>ul>li>ul>li>button{width:80px; height: 80px; background-position:center center; background-repeat: no-repeat; position:relative; background-color:#055b7a; margin-top:-1px;} #toolbar>ul>li>ul>li>button:after{content: ""; width:64px; height: 2px; background:rgba(255,255,255,0.16); position:absolute; bottom:0; left:calc(50% - 32px);} #toolbar>ul>li>ul>li:last-child>button:after{display: none;} /*활동도우미*/ #palette_doumi>li>button.timer{background-image:url(../img/common/ico_timer.png);} #palette_doumi>li>button.acter{background-image:url(../img/common/ico_doumi.png);} #palette_doumi>li>button.darker{background-image:url(../img/common/ico_darker.png);} /*수학 전용*/ #palette_doumi>li>button.calc{background-image:url(../img/common/ico_darker.png);} #palette_doumi>li>button.shape{background-image:url(../img/common/ico_darker.png);} #palette_doumi>li>button.model{background-image:url(../img/common/ico_darker.png);} /*팔레트*/ #toolbar>ul>li>ul#palette_pen{top:-187px;} #palette_pen>li>ol{position:absolute; top:0; right:calc(100% + 7px); width:304px; min-height:72px; background:rgba(0,0,0,0.74); border-radius: 15px; font-size:0; display: table; padding:0 10px; display: none;} #palette_pen>li>ol>li{display: table-cell; vertical-align: middle;} #palette_pen>li>ol>li:first-child:nth-last-child(4), #palette_pen>li>ol>li:first-child:nth-last-child(4) ~ li{width:25%;} #palette_pen>li>ol>li:first-child:nth-last-child(5), #palette_pen>li>ol>li:first-child:nth-last-child(5) ~ li{width:20%;} #palette_pen>li>em{position: absolute; top: 14px; left: -49px; width: 48px; height: 48px; background:url(../img/common/ico_eraserAll.png) 0 0 no-repeat; display: none;} #palette_pen>li>button.on{background-color:#04445c;} #palette_pen>li.selected>ol,#palette_pen>li.selected>em{display: table;} #palette_pen>li.draw>button{background-image:url(../img/common/ico_draw.png);} #palette_pen>li.draw.selected>button{background-image:url(../img/common/ico_draw_on.png); background-color:#055b7a;} #palette_pen>li.del>button{background-image:url(../img/common/ico_del.png);} #palette_pen>li.del.selected>button{background-image:url(../img/common/ico_del_on.png);} #palette_pen>li.width>button{background-image:url(../img/common/ico_width.png);} #palette_pen>li.width.selected>button{background-image:url(../img/common/ico_width_on.png);} #palette_pen>li.width>button[value="20"]{background-image:url(../img/common/ico_width20.png);} #palette_pen>li.width>button[value="15"]{background-image:url(../img/common/ico_width15.png);} #palette_pen>li.width>button[value="10"]{background-image:url(../img/common/ico_width10.png);} #palette_pen>li.width>button[value="5"]{background-image:url(../img/common/ico_width5.png);} #palette_pen>li.width>button[value="1"]{background-image:url(../img/common/ico_width1.png);} #palette_pen>li.color>button{background-image:url(../img/common/ico_color.png);} #palette_pen>li.color>button:before {content:none; position:absolute; top:40px; left:41px; width:24px; height: 24px; border-radius: 50%; border:2px solid #fff;} #palette_pen>li.color>button[value="#333"]:before{background:#333; content:"";} #palette_pen>li.color>button[value="#3f0"]:before{background:#3f0; content:"";} #palette_pen>li.color>button[value="#f30"]:before{background:#f30; content:"";} #palette_pen>li.color>button[value="#fc0"]:before{background:#fc0; content:"";} #palette_pen>li.color>button[value="#06c"]:before{background:#06c; content:"";} #palette_pen>li.color>button[value="#eee"]:before{background:#eee; content:"";} #palette_pen>li.opacity>button{font-size:18px; color:#fff; text-align: center; font-weight: 600;} #palette_pen>li.opacity.selected>button{background-color:#055b7a;} #palette_pen>li.visible_continue>button{background-image:url(../img/common/ico_visible_continue.png); background-position: right bottom; background-color:#055b7a;} #palette_pen>li.visible_continue>button.checked{background-image:url(../img/common/ico_visible_continue_on.png);} /**/ #palette_pen>li.del>ol>li>button{width:39px; height: 30px; background-repeat: no-repeat; background-position: center center;} #palette_pen>li.del button[value="left"]{background-image:url(../img/common/ico_del_left.png);} #palette_pen>li.del button[value="right"]{background-image:url(../img/common/ico_del_right.png);} #palette_pen>li.del button[value="both"]{background-image:url(../img/common/ico_del_both.png);} #palette_pen>li.del button[value="clear"]{background-image:url(../img/common/ico_del_clear.png); width: 64px;} /**/ #palette_pen>li.width>ol>li>button{width:32px; height: 32px; border-radius: 100%; border:1.5px solid #fff; position:relative;} #palette_pen>li.width>ol>li>button:before{content:""; position:absolute; top:50%; left:50%; background:#fff; border-radius: 100%; transform: translate(-50%, -50%)} #palette_pen>li.width>ol>li>button[value="20"]:before{width:22px; height: 22px;} #palette_pen>li.width>ol>li>button[value="15"]:before{width:18px; height: 18px;} #palette_pen>li.width>ol>li>button[value="10"]:before{width:12px; height: 12px;} #palette_pen>li.width>ol>li>button[value="5"]:before{width:8px; height: 8px;} #palette_pen>li.width>ol>li>button[value="1"]:before{width:4px; height: 4px;} /* 펜툴 칼라파레트(20201109 cny) */ #palette_pen>li.color>ol>li>button{width:36px; height: 36px; border-radius: 8px; position:relative; border: 2px solid gray; } #palette_pen>li.color>ol>li.selected>button { border:4px solid white;} /* #palette_pen>li.color>ol>li.add>button{background:url(../img/common/ico_coloradd.png) center center no-repeat; border:2px solid #fff;} */ #palette_pen>li.opacity input[type=range] {width:200px; vertical-align: middle;} #palette_pen>li.opacity input[type=number]{width: 64px; vertical-align: middle; text-align: center;} /*도우미팝업*/ #popup>div.pop_doumi{width: 1440px !important;} #popup>div:not(.std_menu)>section.tool_timer{padding:0;} .pop_doumi>section>div{position:relative; display: none; height: 728px;} .pop_doumi>section>div.on{display: block;} .pop_doumi .tab{padding:15px 20px 0; font-size:0; background:#eee;} .pop_doumi .tab>li{font-size:23px; color:#aaa; letter-spacing: -1px; line-height: 60px; background:#ddd;border:2px solid #ccc; display: inline-block; text-align: center; font-weight: 500; border-radius: 16px 16px 0 0;} .pop_doumi .tab>li:first-child:nth-last-child(2), .pop_doumi .tab>li:first-child:nth-last-child(2) ~ li{width:50%;} .pop_doumi .tab>li:first-child:nth-last-child(3), .pop_doumi .tab>li:first-child:nth-last-child(3) ~ li{width:33.33%;} .pop_doumi .tab>li.on{background:#fff; color:#333; border-color:#fff;} .pop_doumi .sound{width:56px; height: 56px; background:url(../img/common/ico_sound.png) 0 -56px no-repeat; position:absolute; top:25px; right:25px; z-index: 2} .pop_doumi .sound.on{background-position-y:0;} .pop_doumi .tool_timer>div{height: 726px;} /*타이머*/ #timer{position:relative;} #timer input{background-color: transparent; border: 0; font-family: os; font-weight: 600; text-align: center; letter-spacing: -9px; padding:0; outline: 0;} #timer>div:nth-of-type(1){width:720px; height:320px; border:8px solid #888888; border-radius: 80px; position: absolute; top: 240px;left: 300px; background:#f2f2f2;} #timer>div:nth-of-type(1)>div{position: absolute; top: -22px; width: 431px; left: 0; text-align: center;} #timer>div:nth-of-type(1)>div>input{font-size:273px; color:#1bace0; font-weight: 600; width: 256px; text-align: right;} #timer>div:nth-of-type(1)>div>em{font-size:64px; color:#333; font-family: 'ns'; } #timer>div:nth-of-type(2){width:400px; height:432px; background:url(../img/common/clockbg.png) 0 0 no-repeat; position: absolute;top: 168px; left: 737px;} #timer>div:nth-of-type(2)>div{position:relative; width:400px; height: 400px; border-radius: 100%; left:0; top:33px; padding:10px;} #timer>div:nth-of-type(2)>div>div{position:absolute; top:50%; left:50%; width:300px; height:300px; transform: translate(-50%, -50%); background:#f0f0ef; border-radius: 50%;} #timer>div:nth-of-type(2)>div>div>em{color: #333; font-size: 36px; display: block; font-weight: 400; position: relative; top: -23px; font-family: 'ns'; text-align: center;} #timer>div:nth-of-type(2)>div>div>input{font-size: 192px; color: #333; width: 100%; letter-spacing: -9px; } #timer input[type="number"]::-webkit-outer-spin-button, #timer input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;} #timer .reset{width:125px; height: 126px; background:url(../img/common/ico_reset.png) 0 0 no-repeat; font-size:0; position: absolute; left: 1052px; top: 156px; z-index: 1} #timer .reset.dimmed{background:url(../img/common/ico_reset_dim.png) 0 0 no-repeat;} #timer .start{width:120px; height: 80px; background:url(../img/common/ico_start.png) 0 0 no-repeat; font-size:0; position: absolute; left: 876px; top: 92px; z-index: 1 } #timer .pause{background-position-y:-80px;} #timer .start:active{transform:translateY(10px);} #timer .reset:active{transform: translate(-4px , 10px);} #timer .btn_min,#timer .btn_sec{width: 96px; border:6px solid #cccccc; border-radius: 48px; background:#eeeeee; display: inline-block; position:absolute; top:315px;} #timer .btn_min.dimmed,#timer .btn_sec.dimmed{display: none;} #timer .plus,#timer .minus{font-size: 66px; color: #000000; font-weight: 600; display: block; text-align: center; width: 100%; line-height: 89px; position:relative;} #timer .plus:after{content:""; width:64px; height:2px; background:#dddddd; position:absolute; bottom:0; left:calc(50% - 32px);} #timer .btn_min{left:165px;} #timer .btn_sec{right:165px;} .clockline{position: absolute; width: 360px; height: 360px; border-radius: 50%; transform: translate(-50%, -50%); left: 50%; top: 50%; } .clockline li {display: block; position: absolute; width: 10px; height: 178px; background: #ddd; transform-origin: 5px 100%; left: 50%; top: 0px; transform: rotate(0deg); margin-left: -5px; } .clockline li.on{background: #333333; } /*스톱워치*/ .body_stopwatch{padding-top:1px;} .body_stopwatch>div:nth-of-type(1){width: 1120px; height: 451px; background:url(../img/common/stopwatchbg.png) 0 0 no-repeat; margin: 90px auto 0;} .body_stopwatch .reset{background:#ccc; border:6px solid #eeeeee; border-radius: 16px 16px 0 0; font-size:26px; font-weight: 500; color:#333333; letter-spacing: -1px; width: 200px; height: 70px; border-bottom:0; text-align: center; position: absolute; top: 100px; left: 912px;} .body_stopwatch .start{background:#ccc url(../img/common/ico_play.png) center center no-repeat; border:6px solid #eeeeee; border-radius: 16px 16px 0 0; width: 80px; height: 70px; border-bottom:0; text-align: center;position: absolute; top: 21px; left: 1120px;} .body_stopwatch .start.pause{background:#ccc url(../img/common/ico_timerpause.png) center center no-repeat;} .body_stopwatch>div:nth-of-type(2){} .body_stopwatch>div:nth-of-type(2){font-size:0; font-size: 0; margin: 40px 35px 0; border-top: 1px solid #e5e5e5; padding-top:25px; height: 140px; overflow:hidden;} .body_stopwatch>div:nth-of-type(2)>ol{width:calc(100% - 190px); float: left; font-size:0; overflow-x:auto; white-space:nowrap; padding-bottom:10px;} .body_stopwatch>div:nth-of-type(2)>ol::-webkit-scrollbar { height: 10px; } .body_stopwatch>div:nth-of-type(2)>ol::-webkit-scrollbar-track { background-color: transparent;} .body_stopwatch>div:nth-of-type(2)>ol::-webkit-scrollbar-thumb {border-radius: 11px;background-color: #ddd;} .body_stopwatch>div:nth-of-type(2)>ol::-webkit-scrollbar-button { width: 0; height: 0;} .body_stopwatch>div:nth-of-type(2)>ol::-webkit-scrollbar-thumb:hover {background: #ccc;} .body_stopwatch>div:nth-of-type(2)>ol>li{ display: inline-block; padding: 13px 17px; border:2px solid #cccccc; border-radius: 8px; background:#eeeeee; margin-right:23px; vertical-align: middle; } .body_stopwatch>div:nth-of-type(2)>ol>li:last-child{margin-right:0;} .body_stopwatch>div:nth-of-type(2)>ol>li>button{font-family: os; font-size:24px; color:#fff; width: 48px; height: 48px; background:#666666; border-radius: 100%; text-align: center; margin-right:15px; vertical-align: bottom;} .body_stopwatch>div:nth-of-type(2)>ol>li>em{font-size:26px; color:#333; font-weight: 500; cursor: default;} .body_stopwatch>div:nth-of-type(2)>ol>li:hover>button{background:#666666 url(../img/common/ico_ttrash.png) center center no-repeat; font-size:0;} .body_stopwatch>div:nth-of-type(2) .add{border:2px dashed #1bace0; background:#fff; border-radius: 16px; padding:10px 11px; display: inline-block; float: right; cursor: pointer;} .body_stopwatch>div:nth-of-type(2) .add>button{width:48px; height: 48px; border-radius: 16px; background:#1bace0; color:#fff; font-size: 46px; vertical-align: middle; line-height: 51px; text-align: center; margin-right: 5px;} .body_stopwatch>div:nth-of-type(2) .add>em{color:#aaa; vertical-align: middle; font-size: 26px;} .body_stopwatch>div:nth-of-type(2) .add:hover{border:2px solid #1bace0; background:#1bace0;} .body_stopwatch>div:nth-of-type(2) .add:hover>button{background:#76cdec; color:#fff;} .body_stopwatch>div:nth-of-type(2) .add:hover>em{color:#fff;} .flip-clock{position:relative; top:52px; /*right:27px;*/ right:-35px;} .flip-clock>li {float: right;} .flip-clock>li::before {content: ":"; font-family: Consolas; font-size: 160px; color: #fff; line-height: 275px; margin: 0 -20px; } .flip-clock>li:first-child::before {content: none; } .flip-clock>li>div {width: 200px; height: 310px; position: relative; margin: 0 5px; float: left; } .flip-clock>li>div > span {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; -webkit-perspective: 300px; perspective: 300px; font-family: os;} .flip-clock>li>div > span::after, .flip-clock>li>div > span::before {content: attr(data-digit); position: absolute; left: 0; width: 100%; height: 50%; font-size: 280px; font-weight: bolder; text-align: center; color: #fff; background-color: #101820; overflow: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .flip-clock>li>div > span::before {top: 0; line-height: 317px; border-radius: 10px 10px 0 0; border-bottom: 1px solid #000; -webkit-transform-origin: bottom; transform-origin: bottom; border:4px solid #363d44;} .flip-clock>li>div > span::after {bottom: 0; line-height: 7px; border-radius: 0 0 10px 10px; border-top: 1px solid #000; -webkit-transform-origin: top; transform-origin: top; border:4px solid #363d44;} .flip-clock>li>div.on .next {z-index: 0; -webkit-animation: afterZIndexAnim 0.8s linear forwards; animation: afterZIndexAnim 0.8s linear forwards; } .flip-clock>li>div.on .next::before {-webkit-animation: afterUpShadowAnim 0.8s linear forwards; animation: afterUpShadowAnim 0.8s linear forwards; } .flip-clock>li>div.on .next::after {-webkit-animation: afterFlipAnim 0.8s linear forwards, afterDownShadowAnim 0.8s linear forwards; animation: afterFlipAnim 0.8s linear forwards, afterDownShadowAnim 0.8s linear forwards; } .flip-clock>li>div.on .current {z-index: 1; -webkit-animation: currentZIndexAnim 0.8s linear forwards; animation: currentZIndexAnim 0.8s linear forwards; } .flip-clock>li>div.on .current::before {-webkit-animation: currentFlipAnim 0.8s linear forwards, currentUpShadowAnim 0.8s linear forwards; animation: currentFlipAnim 0.8s linear forwards, currentUpShadowAnim 0.8s linear forwards; } .flip-clock>li>div.on .current::after {-webkit-animation: currentDownShadowAnim 0.8s linear forwards; animation: currentDownShadowAnim 0.8s linear forwards; } .flip-clock>li:nth-child(2)::before{content:none;} .flip-clock>li:first-child>div>span::after,.flip-clock>li:first-child>div>span::before{content:none;} .flip-clock>li:first-child>div{width: 140px; height: 185px; top: 124px;} .flip-clock>li:first-child>div>span{color:#1dbbf5; font-size:145px; line-height: 185px; text-align: center; letter-spacing: -8px; display: none;} @-webkit-keyframes afterZIndexAnim {0% {z-index: 1; } 100% {z-index: 2; } } @keyframes afterZIndexAnim {0% {z-index: 1; } 100% {z-index: 2; } } @-webkit-keyframes currentZIndexAnim {0% {z-index: 2; } 100% {z-index: 0; } } @keyframes currentZIndexAnim {0% {z-index: 2; } 100% {z-index: 0; } } @-webkit-keyframes afterFlipAnim {0% {-webkit-transform: rotateX(180deg); transform: rotateX(180deg); } 100% {-webkit-transform: rotateX(0); transform: rotateX(0); } } @keyframes afterFlipAnim {0% {-webkit-transform: rotateX(180deg); transform: rotateX(180deg); } 100% {-webkit-transform: rotateX(0); transform: rotateX(0); } } @-webkit-keyframes afterUpShadowAnim {0% {-webkit-box-shadow: inset 0 -100px 20px -10px black; box-shadow: inset 0 -100px 20px -10px black; } 100% {-webkit-box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0); box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0); } } @keyframes afterUpShadowAnim {0% {-webkit-box-shadow: inset 0 -100px 20px -10px black; box-shadow: inset 0 -100px 20px -10px black; } 100% {-webkit-box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0); box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0); } } @-webkit-keyframes afterDownShadowAnim {0% {-webkit-box-shadow: inset 0 100px 20px -10px black; box-shadow: inset 0 100px 20px -10px black; } 100% {-webkit-box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0); box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0); } } @keyframes afterDownShadowAnim {0% {-webkit-box-shadow: inset 0 100px 20px -10px black; box-shadow: inset 0 100px 20px -10px black; } 100% {-webkit-box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0); box-shadow: inset 0 0 20px -10px rgba(0, 0, 0, 0); } } @-webkit-keyframes currentFlipAnim {0% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg); } 100% {-webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } } @keyframes currentFlipAnim {0% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg); } 100% {-webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } } @-webkit-keyframes currentUpShadowAnim {0% {-webkit-box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0); box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0); } 50% {-webkit-box-shadow: inset 0 -50px 25px -10px black; box-shadow: inset 0 -50px 25px -10px black; } 100% {-webkit-box-shadow: inset 0 -100px 25px -10px black; box-shadow: inset 0 -100px 25px -10px black; } } @keyframes currentUpShadowAnim {0% {-webkit-box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0); box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0); } 50% {-webkit-box-shadow: inset 0 -50px 25px -10px black; box-shadow: inset 0 -50px 25px -10px black; } 100% {-webkit-box-shadow: inset 0 -100px 25px -10px black; box-shadow: inset 0 -100px 25px -10px black; } } @-webkit-keyframes currentDownShadowAnim {0% {-webkit-box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0); box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0); } 50% {-webkit-box-shadow: inset 0 50px 25px -10px black; box-shadow: inset 0 50px 25px -10px black; } 100% {-webkit-box-shadow: inset 0 100px 25px -10px black; box-shadow: inset 0 100px 25px -10px black; } } @keyframes currentDownShadowAnim {0% {-webkit-box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0); box-shadow: inset 0 0 15px -10px rgba(0, 0, 0, 0); } 50% {-webkit-box-shadow: inset 0 50px 25px -10px black; box-shadow: inset 0 50px 25px -10px black; } 100% {-webkit-box-shadow: inset 0 100px 25px -10px black; box-shadow: inset 0 100px 25px -10px black; } } /*팝업*/ .pop_doumi .tool_acter{display: none;} #popup>div:not(.std_menu)>section.tool_acter {padding: 0;} .tool_acter .body_listup>ul{padding:20px 40px;} .tool_acter .body_listup>ul:after{content:""; display: block; clear:both;} .tool_acter .body_listup>ul>li{float: right} .tool_acter .body_listup>ul>li:first-child{float: left;} .tool_acter .body_listup>ul>li.scription{font-size:22px; color:#333; font-weight: 600; margin-top: 15px; font-family: notosans;} .tool_acter .body_listup>ul>li.scription>em{color:#17b2e6;font-weight: 500;} .tool_acter .body_listup>ul>li.option{font-size: 0; margin-left:20px; line-height: normal; margin-top:3px;} .tool_acter .body_listup>ul>li.option>button{width:56px; height: 56px; margin-right:8px;} .tool_acter .body_listup>ul>li.option>button:last-child{margin-right:0;} .tool_acter .body_listup>ul>li.option>button.load_ex{background-image:url(../img/common/ico_load_ex.png);} .tool_acter .body_listup>ul>li.option>button.save_ex{background-image:url(../img/common/ico_save_ex.png);} .tool_acter .body_listup>ul>li.option>button.del_all{background-image:url(../img/common/ico_del_all.png);} .tool_acter .body_listup>ul>li.selection{width: 360px; position: relative; border-radius: 4px; border: 1px solid #ccc; height: 62px;} .tool_acter .body_listup>ul>li.selection input{border:0; border-radius: 4px; width: 100%; height: 60px; position:absolute; left:0;padding-right:100px; padding-left:10px;} .tool_acter .body_listup>ul>li.selection input{font-size: 22px;} .tool_acter .body_listup>ul>li.selection input::placeholder{font-size:22px; letter-spacing: -1px; color:#cccccc;} .tool_acter .body_listup>ul>li.selection button{font-size:22px; color:#333; background:#eee;border-left:1px solid #ccc; height:60px; width: 100px; position:absolute; right:0; text-align: center;} .tool_acter .body_listup ol{border-top:1px solid #e5e5e5; padding:40px; font-size:0;} .tool_acter .body_listup ol>li{display: inline-block; position:relative; width:calc(25% - 20px); margin: 0 10px; height: 87px; border:6px solid #e5e5e5; border-radius: 8px; text-align: center; line-height: 74px; } .tool_acter .body_listup ol>li+li+li+li+li{margin-top:20px;} .tool_acter .body_listup ol>li>span{color:#333;font-size:48px; letter-spacing: -1px; font-family: ns;} .tool_acter .body_listup ol>li>button{position:absolute; width:32px; height: 32px; background:url(../img/common/ico_listclose.png) 0 0 no-repeat; right:-10px; top:-10px; display: none;} .tool_acter .body_listup ol>li:hover>button{display: block;} .tool_acter .body_listup ol>li:hover{border-color:#168db8; background:#17b2e6;} .tool_acter .body_listup ol>li:hover>span{color:#fff;} .sub_dialogue{position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.7); width: 100%; height: 100%; z-index: 1001; display: none;} .sub_dialogue>div{width: auto !important; margin: 0 auto; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19); display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 500px; background:#fff; border:1px solid #1bace0; border-top-width: 8px; border-radius: 4px; padding:40px 25px 25px; text-align: center;} .sub_dialogue>div>p{font-size:25px; color:#333; text-align: left; line-height: 32px; font-family: notosans;} .sub_dialogue>div>p b{font-weight: 500;} .sub_dialogue>div>p>em{color:#666;} .sub_dialogue>div>p>input{width:calc(100% - 55px); border:1px solid #ccc; height: 63px; border-radius: 4px;} .sub_dialogue>div>p>input{font-size:22px;} .sub_dialogue>div>p>input::placeholder{font-size:22px; color:#ccc; letter-spacing: -1px;} .sub_dialogue>div>p+p{margin:10px 0;} .sub_dialogue>div>button{width: 200px; display: inline-block; letter-spacing: -.1px; font-size: 24px; line-height: 64px; background: #1bace0; text-align: center; border-radius: 10px; border: 1px solid #1bace0; color: #fff; margin-right: 1%; margin-top: 20px;} .sub_dialogue>div>button:last-child{border-color: #dddddd;background: #eeeeee; color: #333333; margin-right: 0;} .body_modum>div,.body_choice>div{display: none;} .body_modum>div.on,.body_choice>div.on{display: block;} .pop_doumi .sub_tab{font-size:0; padding-top: 145px; padding-left: 120px;} .pop_doumi .sub_tab>li{ display: inline-block;font-size: 26px; line-height: 60px; margin-right: -4px; margin-bottom: -5px; width: 320px; text-align: center; border: 4px solid #ccc; border-bottom: 4px solid #ccc; background-color: #ddd; position:relative; border-radius: 16px 16px 0 0; font-weight: 400; letter-spacing: -1px; color:#a7a7a7;} .pop_doumi .sub_tab>li.on{background-color: #fff; border-top: 4px solid #ccc; color:#333; border-left: 4px solid #ccc; border-right: 4px solid #ccc; border-bottom: 5px solid #fff; z-index: 1 ; font-weight: 500;} .pop_doumi .slide{width: 1276px; border:4px solid #ccc; height: 255px; margin:0 auto ; border-radius: 16px; padding:61px 0 0; text-align: center;} .pop_doumi .slide>button{width: 240px; height: 120px;border-radius: 8px; border:2px solid #ddd; background:#f6f6f6; font-size:32px; letter-spacing: -1px; color:#333333; text-align: center; margin:0 10px;} .pop_doumi .slide>button.add{border-color:#128ab2; color:#fff; background:#17b2e6;} .pop_doumi .slide>span{border:2px solid #ccc; border-radius: 32px;display: inline-block; vertical-align: middle; margin: 0 10px;} .pop_doumi .slide>span>button{display: block; width: 64px; height: 64px; border-bottom: 2px solid #ccc; font-size: 46px; text-align: center; color: #333333; font-weight: 500; line-height: 64px;} .pop_doumi .slide>span>button:last-child{border-bottom:0;} .pop_doumi .slide input{border:2px solid #ccc; height: 88px; width: 150px; font-size: 32px; text-align: center; border-radius: 8px;} .pop_doumi .slide input[type="number"]::-webkit-outer-spin-button, .pop_doumi .slide input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;} .pop_doumi .slide input+em{font-weight: 700; display: inline-block; margin:0 5px;} .pop_doumi .slide .line{display:inline-block; width: 2px; height: 128px; background: #eeeeee; margin: 0 80px; vertical-align: middle;} .body_choice .result:after{content:""; display: block; clear:both;} .body_choice .result>ol{padding:25px; border-bottom:1px solid #e5e5e5;} .body_choice .result>ol:after{content:""; display: block; clear:both;} .body_choice .result .scription{float: left; font-size:26px; color:#333; font-weight: 500; margin-top: 18px;} .body_choice .result .scription>span{color:#aeaeae; margin-left:20px;} .body_choice .result .selection{float: right; font-size:0;} .body_choice .result .selection>button{font-size:22px; letter-spacing: -1px; color:#fff; text-align: center; border-radius: 4px; padding:19px 27px; margin-right:10px;} .body_choice .result .selection>button.continue{background:#17b2e6;} .body_choice .result .selection>button.rechoice{background:#666;} .body_choice .result .selection>button.quit{background:#eee; color:#333; margin-right:0;} .body_choice .result>div{width: 920px; height: 613px; line-height:normal; text-align: center; font-family: ns; font-weight: 400; letter-spacing: -1px; color:#333333; float: left; border-right:1px solid #e5e5e5; position:relative;} .body_choice .result>div>p{position:absolute;left:50%; top:50%; transform: translate(-50%, -50%)} .body_choice .result>div>p>span{display: block; font-size: 108px;} .body_choice .result p>span:first-child:nth-last-child(6), .body_choice .result p>span:first-child:nth-last-child(6) ~ span { font-size: 64px; } .body_choice .result p>span:first-child:nth-last-child(7), .body_choice .result p>span:first-child:nth-last-child(7) ~ span { font-size: 64px; } .body_choice .result p>span:first-child:nth-last-child(8), .body_choice .result p>span:first-child:nth-last-child(8) ~ span { font-size: 64px; } .body_choice .result p>span:first-child:nth-last-child(9), .body_choice .result p>span:first-child:nth-last-child(9) ~ span { font-size: 50px; } .body_choice .result p>span:first-child:nth-last-child(10), .body_choice .result p>span:first-child:nth-last-child(10) ~ span { font-size: 50px; } .body_choice .result dl{float: left; width: calc(100% - 970px); border-bottom: 1px solid #e5e5e5; margin: 0 25px; text-align: right; padding:20px 0;} .body_choice .result dl dt,.body_choice .result dl dd{display: inline-block; } .body_choice .result dl dt{color:#666; font-size:18px; letter-spacing: -1px; margin-right:15px; vertical-align: bottom;} .body_choice .result dl dd{font-size:36px; color:#666; font-weight: 500;} .body_choice .result dl dd em{font-size:22px; vertical-align: middle;} .body_choice .result dl dd>span{color:#17b2e6; font-weight: 500;} .body_choice .result dl dd i{font-weight: 100; color:#ccc; margin:0 10px;} .body_choice .result ul{float: left; width: calc(100% - 920px); height: 537px; overflow-y: auto; padding:25px 0 25px 25px; font-size:0;} .body_choice .result ul>li{font-size:40px; color:#333; width: 227px; height: 83px; border:6px solid #ccc; border-radius: 8px; display: inline-block; text-align: center; vertical-align: top; line-height: 72px;position:relative;} .body_choice .result ul>li:nth-of-type(2n-1){margin-right:15px;} .body_choice .result ul>li+li+li{margin-top:15px;} .body_choice .result ul>li.dimmed{border:6px dashed #ddd; font-size:0; background:#ebebeb; } .body_choice .result ul>li>button{position:absolute; width:32px; height: 32px; background:url(../img/common/ico_listclose.png) 0 0 no-repeat; right:-10px; top:-10px; display: none; font-size:0;} .body_choice .result ul>li:hover>button{display: block;} .body_modum .result:after{content:""; display: block; clear:both;} .body_modum .result>ol{padding:25px; border-bottom:1px solid #e5e5e5;} .body_modum .result>ol:after{content:""; display: block; clear:both;} .body_modum .result .scription{float: left; font-size:26px; color:#333; font-weight: 500; margin-top: 18px;} .body_modum .result .scription>span{color:#aeaeae; margin-left:20px;} .body_modum .result .selection{float: right; font-size:0;} .body_modum .result .selection>button{font-size:22px; letter-spacing: -1px; color:#fff; text-align: center; border-radius: 4px; padding:19px 27px; margin-right:10px;} .body_modum .result .selection>button.remake{background:#666;} .body_modum .result .selection>button.quit{background:#eee; color:#333; margin-right:0;} .body_modum .result>div{width: 25%; border-right:1px solid #e5e5e5; float: left; height: 613px; padding:35px 30px;} .body_modum .result>div:last-child{border:0;} .body_modum .result>div>h6{font-size:22px; color:#333; letter-spacing: -1px; text-align: center; font-weight: 500;} .body_modum .result>div>ul{margin-top:22px;} .body_modum .result>div>ul>li{overflow:hidden;width: 100%; height: 80px; line-height: 70px; border:6px solid #e5e5e5; border-radius: 8px; font-size:48px; color:#333; font-weight: 500; text-align: center; letter-spacing: -3px;} .body_modum .result>div>ul>li+li{margin-top:8px;} /**/ #popup>div.doumi_darker{background:#333; border-radius: 15px; width:100% !important; height: 100%;} #popup>div.doumi_darker>header{background:transparent !important;} #popup>div.doumi_darker>div:not(.powerContainer){text-align: center; font-size: 22px; margin: 10px 0; color:#fff;} #popup>div.doumi_darker.active {background: #f3f7f9; } #popup>div.doumi_darker.active>div:not(.powerContainer){color:#333;} .powerContainer {margin:200px auto 0; width: 212px; } .power {margin: auto; margin-top: 20px; background: #38434A; border-radius: 5px; color: white; cursor: pointer; font-family: Roboto; font-size: 1.9em; height: 65px; letter-spacing: .2px; line-height: 65px; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 150px; -webkit-transition: none; transition: none; } .power:hover {background: #414e56; } .power:active {box-shadow: inset 0px 4px 10px 0px #2d363b; -webkit-transition: background 0.14s ease-in; transition: background 0.14s ease-in; } .active .power {background: #58C48D; } .active .power:active {box-shadow: inset 0px 6px 8px -1px #41b77b; } #on {-webkit-transform: translate(50%, 50%) scale(0); transform: translate(50%, 50%) scale(0); opacity: 0; } .active #on {opacity: 1; -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); -webkit-transition: all 0.14s ease-in; transition: all 0.14s ease-in; } .fancy-bulb {position: relative; } .streaks, .streaks:after, .streaks:before {position: absolute; background: #FFDB55; border-radius: 5.5px; height: 11px; } .streaks:after, .streaks:before {content: ""; display: block; } .streaks:before {bottom: 65px; } .streaks:after {top: 65px; } .left-streaks {right: 217px; top: 89.5px; } .active .left-streaks {-webkit-animation: move-left 0.38s ease-out, width-to-zero 0.38s ease-out; animation: move-left 0.38s ease-out, width-to-zero 0.38s ease-out; -webkit-animation-delay: 0.14s; animation-delay: 0.14s; } .left-streaks:before, .left-streaks:after {left: 15px; } .active .left-streaks:before {-webkit-animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out; animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out; -webkit-animation-delay: 0.14s; animation-delay: 0.14s; } .active .left-streaks:after {-webkit-animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out; animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out; -webkit-animation-delay: 0.14s; animation-delay: 0.14s; } .right-streaks {left: 217px; top: 89.5px; } .active .right-streaks {-webkit-animation: move-right 0.38s ease-out, width-to-zero 0.38s ease-out; animation: move-right 0.38s ease-out, width-to-zero 0.38s ease-out; -webkit-animation-delay: 0.14s; animation-delay: 0.14s; } .right-streaks:before, .right-streaks:after {right: 15px; } .active .right-streaks:before {-webkit-animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out; animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out; -webkit-animation-delay: 0.14s; animation-delay: 0.14s; } .active .right-streaks:after {-webkit-animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out; animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out; -webkit-animation-delay: 0.14s; animation-delay: 0.14s; } .left-streaks:before, .right-streaks:after {-webkit-transform: rotate(34deg); transform: rotate(34deg); } .left-streaks:after, .right-streaks:before {-webkit-transform: rotate(-34deg); transform: rotate(-34deg); } @-webkit-keyframes move-left {0% {-webkit-transform: none; transform: none; } 65% {-webkit-transform: translateX(-80px); transform: translateX(-80px); } 100% {-webkit-transform: translateX(-80px); transform: translateX(-80px); } } @keyframes move-left {0% {-webkit-transform: none; transform: none; } 65% {-webkit-transform: translateX(-80px); transform: translateX(-80px); } 100% {-webkit-transform: translateX(-80px); transform: translateX(-80px); } } @-webkit-keyframes move-right {0% {-webkit-transform: none; transform: none; } 65% {-webkit-transform: translateX(80px); transform: translateX(80px); } 100% {-webkit-transform: translateX(80px); transform: translateX(80px); } } @keyframes move-right {0% {-webkit-transform: none; transform: none; } 65% {-webkit-transform: translateX(80px); transform: translateX(80px); } 100% {-webkit-transform: translateX(80px); transform: translateX(80px); } } @-webkit-keyframes width-to-zero {0% {width: 50px; } 100% {width: 11px; } } @keyframes width-to-zero {0% {width: 50px; } 100% {width: 11px; } } @-webkit-keyframes move-up {100% {bottom: 100.75px; } } @keyframes move-up {100% {bottom: 100.75px; } } @-webkit-keyframes move-down {100% {top: 100.75px; } } @keyframes move-down {100% {top: 100.75px; } } /*자료실*/ #page_pds .background{z-index: -1;} #page_pds>div:not(.background){width: 1890px; height: 1040px; position:relative; top:50%; left:50%; transform: translate(-50%, -50%)} #page_pds header{height: 120px; border-radius: 16px 16px 0 0; padding:34px 40px; vertical-align: top; position:relative;} #page_pds header>h2{font-size:0;} #page_pds header .menu_list{width:48px; height: 48px; background: url(../img/common/ico_menulist.png) 0 0 no-repeat; } #page_pds header:after{content:""; display: block; clear:both;} #page_pds header>ol{display: none; position:absolute; padding: 15px 0; background:#117e8f; top:120px; z-index: 1; border-radius: 0 0 8px 8px} #page_pds header>ol>li>button{color:#fff; font-size:26px; padding: 11px 56px 11px 30px; min-width: 440px; position:relative; width: 100%;} #page_pds header .menu_list.on + ol{display: block;} #page_pds header .menu_list.on{transform: rotate(180deg);} #page_pds header>ol>li>ul{display: none; background:#034658; padding:10px 0;} #page_pds header>ol>li>ul>li>button{color:#fff; font-size:24px; padding:10px 0 10px 45px; width: 100%;} #page_pds header>ol>li>ul>li.selected>button{color:#3fcbe0;} #page_pds header>ol>li.selected>ul{display: block;} #page_pds header>ol>li.selected>button{background: #085a6c;} #page_pds header>ol>li.selected>button:after{ background:url(../img/common/menulist_arrow_on.png);} #page_pds header>ol>li.on button{background:#085a6c;} #page_pds header>div{float: right;} #page_pds header .go_home{width: 56px; height: 56px; background:url(../img/common/ico_pdshome.png) 0 0 no-repeat; vertical-align: middle;} #page_pds header>div>button:not(.go_home){font-size: 18px; color: #666; border:2px solid #e5e5e5; padding:15px 39px 15px 8px; position:relative; background:#fff; border-radius: 8px; font-weight: 500; letter-spacing: -1px;} #page_pds header>div>button:not(.go_home):after{display: inline-block; content: ""; height: 34px; position: absolute; right: 7px; top: 8px; background-size:100%; background-repeat: no-repeat; background-position: center center; width:28px;} #page_pds header>div>button.pdf:after{background-image:url(../img/common/ico_pdf.png);} #page_pds header>div>button.hwp:after{background-image:url(../img/common/ico_hwp.png);} #page_pds header>div>button.ppt:after{background-image:url(../img/common/ico_ppt.png);} #page_pds header>div>div>button:not(.go_home){font-size: 18px; color: #666; border:2px solid #e5e5e5; padding:15px 39px 15px 8px; position:relative; background:#fff; border-radius: 8px; font-weight: 500; letter-spacing: -1px;} #page_pds header>div>div>button:not(.go_home):after{display: inline-block; content: ""; height: 34px; position: absolute; right: 7px; top: 8px; background-size:100%; background-repeat: no-repeat; background-position: center center; width:28px;} #page_pds header>div>div>button.pdf:after{background-image:url(../img/common/ico_pdf.png);} #page_pds header>div>div>button.hwp:after{background-image:url(../img/common/ico_hwp.png);} #page_pds header>div>div>button.ppt:after{background-image:url(../img/common/ico_ppt.png);} #page_pds header>div>div{display:inline-block;margin:0 3px;} #page_pds header>div>div> .list{display:none;position:relative;left:0;top:-7px;z-index:100;} #page_pds header>div>div> .list.active{display:block;} #page_pds header>div>div> .list >button{position:absolute;font-size:0;color:#fff;cursor: pointer;} #page_pds header>div>div> .list >button:nth-child(1){left:1px;top:0;background-image:url(../img/common/ico_pds_open.png);width:67px;height:44px;} #page_pds header>div>div> .list >button:nth-child(2){left:68px;top:0;background-image:url(../img/common/ico_pds_down.png);width:68px;height:44px;} #page_pds header>div>div> .list .ppt{background-image:none;width:auto;height:auto;} #page_pds header>div>div> .list .hwp{background-image:none;width:auto;height:auto;} #page_pds header>div>div> .list .pdf{background-image:none;width:auto;height:auto;} #page_pds section{height: calc(100% - 120px); background:#fff; border-radius: 0 0 16px 16px} #page_pds section>.tab{background:#eee; padding:35px 25px 0 25px; font-size:0;} #page_pds section>.tab>li{width: 100%; font-size: 22px; color:#aaa; border:2px solid #ccc; background:#ddd; line-height: 64px; text-align: center; display: inline-block; border-radius: 16px 16px 0 0; font-weight: 500; letter-spacing: -1px;} #page_pds section>.tab>li.on{background:#fff; color:#333; border-color:#fff; } #page_pds section>.tab>li:first-child:nth-last-child(2), #page_pds section>.tab>li:first-child:nth-last-child(2) ~ li { width: 50%; } /* li가 2개일 때 */ #page_pds section>.tab>li:first-child:nth-last-child(3), #page_pds section>.tab>li:first-child:nth-last-child(3) ~ li { width: 33.3333% } /* li가 3개일 때 */ #page_pds section>.tab>li:first-child:nth-last-child(4), #page_pds section>.tab>li:first-child:nth-last-child(4) ~ li { width: 25%; } /* li가 4개일 때*/ #page_pds section>.tab>li:first-child:nth-last-child(5), #page_pds section>.tab>li:first-child:nth-last-child(5) ~ li { width: 20%; } /* li가 5개일 때*/ #page_pds section>.tab>li:first-child:nth-last-child(6), #page_pds section>.tab>li:first-child:nth-last-child(6) ~ li { width: 16.6666%; } /* li가 6개일 때*/ /* 사회자료실 추가되는 자료항목 기본값 가림(20201113) */ #page_pds>div>header>div>button.only_soc, #page_pds>div>section>div>footer>div>button.only_soc { display: none; } #page_pds section>div{height: 100%;} #page_pds section>.tab+div{height: calc(100% - 103px);} #page_pds section>div>article,#page_pds section>div>footer{height: 100%; float: left; padding:35px 40px;} #page_pds section>div>article{width: calc(100% - 400px); border-right: 1px solid #e5e5e5;} #page_pds section>div>footer{width:400px;} #page_pds section h4{font-size:22px; color:#333; font-weight: 500; letter-spacing: -1px; margin-bottom:20px;} #page_pds section table{ width: 100%; border-collapse:collapse; } #page_pds section table thead{border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; background:#f6f6f6; display: inline-block; width: 100%;padding-right: 16px; } #page_pds section table thead tr{display:block; width:100%;} /* #page_pds section table thead th{ white-space: nowrap} #page_pds section table thead th:nth-of-type(1){width: 50%}*/ /*#page_pds section table thead th{width:105px;} #page_pds section table thead th:nth-of-type(1){width: 880px; } */ #page_pds section table tbody{border-top:3px solid #1bace0; margin-top:6px; overflow-y: scroll; overflow-x:hidden; width: 100%; display: inline-block; height:630px;} #page_pds section table tbody tr{display: table; width:1404px;} #page_pds section table th{color:#333; font-weight: 500; font-size:18px; white-space: nowrap} #page_pds section table th,#page_pds section table td{vertical-align: middle; padding:10px 0px;} #page_pds section table td{border:1px solid #e5e5e5; font-size:22px; color:#666; text-align: center;} #page_pds section table td{/*width: 100px;*/} #page_pds section table td:nth-of-type(2){/*width:740px;*/ text-align: left;} #page_pds section table button{background-repeat: no-repeat; background-position: center center; position:relative;} #page_pds section table .folder{background-image:url(../img/common/ico_folder.png); width: 50px; height: 42px;} #page_pds section table .ppt{background-image:url(../img/common/ico_tppt.png); width: 39px; height: 42px; } #page_pds section table .hwp{background-image:url(../img/common/ico_thwp.png); width: 40px; height: 42px; } #page_pds section table .pdf{background-image:url(../img/common/ico_tpdf.png); width: 40px; height: 42px; } #page_pds section table .zip{background-image:url(../img/common/ico_zip.png); width: 40px; height: 42px;} #page_pds section table .mp4{background-image:url(../img/common/ico_mp4.png); width: 40px; height: 42px;} #page_pds section table .list{display:none;position:relative;left:0;top:-7px;z-index:100;} #page_pds section table .list.active{display:block;} #page_pds section table .list >button{position:absolute;font-size:0;color:#fff;cursor: pointer;} #page_pds section table .list >button:nth-child(1){left:1px;top:0;background-image:url(../img/common/ico_pds_open.png);width:67px;height:44px;} #page_pds section table .list >button:nth-child(2){left:68px;top:0;background-image:url(../img/common/ico_pds_down.png);width:68px;height:44px;} #page_pds section table .list .ppt{background-image:none;width:auto;height:auto;} #page_pds section table .list .hwp{background-image:none;width:auto;height:auto;} #page_pds section table .list .pdf{background-image:none;width:auto;height:auto;} #page_pds section table .list .mp4{background-image:none;width:auto;height:auto;} #page_pds section table .sub_list:after{content:""; position:absolute;width:24px; height:24px; background:url(../img/common/ico_more.png) no-repeat; right: -14px; bottom: 6px;} #page_pds section table .sub_list+ul{display: none; position:absolute; min-width: 384px; border:8px solid #051f29; border-radius:8px; background: #fff; z-index: 1; top:73px; box-shadow: 7px 7px 3px rgba(0,0,0,0.2); right:0; } #page_pds section table .sub_list+ul li{text-align: left;} #page_pds section table .sub_list+ul li.header{height: 40px; background:#051f29; } #page_pds section table .sub_list+ul li .close{width: 24px; height: 30px; background:url(../img/common/ico_sublistclose.png) 0 center no-repeat; float: right;} #page_pds section table .sub_list+ul li> button:not(.close){width: 100%; height: 65px; line-height: 65px; font-size:22px; color:#666; border-bottom:1px solid #e5e5e5; background-position:25px center; padding-left: 77px; padding-right:15px;overflow: hidden;text-overflow: ellipsis;} #page_pds section table .sub_list+ul li:last-child button{border-bottom:0;} #page_pds section table td.on{position:relative;} #page_pds section table td.on .sub_list+ul{display: block;} #page_pds section table td.on .sub_list+ul .list{left:70px;top:-50px;} #page_pds footer>div>button{display: block; width:100%; line-height: 64px; color:#333; font-size:22px; background-color:#f6f6f6; border:2px solid #e5e5e5;padding-right: 97px;text-align: center;letter-spacing: -1px; font-weight: 500; border-radius: 8px; background-position:219px center; background-repeat:no-repeat;} #page_pds footer>div>button+button{margin-top:8px;} #page_pds footer>div>button.pdf{background-image:url(../img/common/ico_pdf.png);} #page_pds footer>div>button.folder{background-image:url(../img/common/ico_multifolder.png);} #page_pds footer>div>button.hwp{background-image:url(../img/common/ico_hwp.png);} #page_pds footer>div>button.zip{background-image:url(../img/common/ico_zip.png);background-size: 47px 56px;} #page_pds footer>div>button.pptx{background-image:url(../img/common/ico_ppt.png);} #page_pds footer>div>div>button{display: block; width:100%; line-height: 64px; color:#333; font-size:22px; background-color:#f6f6f6; border:2px solid #e5e5e5;padding-right: 97px;text-align: center;letter-spacing: -1px; font-weight: 500; border-radius: 8px; background-position:219px center; background-repeat:no-repeat;} #page_pds footer>div>div>button+button{margin-top:8px;} #page_pds footer>div>div>button.pdf{background-image:url(../img/common/ico_pdf.png);} #page_pds footer>div>div>button.folder{background-image:url(../img/common/ico_multifolder.png);} #page_pds footer>div>div>button.hwp{background-image:url(../img/common/ico_hwp.png);} #page_pds footer>div>div>button.zip{background-image:url(../img/common/ico_zip.png);background-size: 47px 56px;} #page_pds footer>div>div>button.pptx{background-image:url(../img/common/ico_ppt.png);} #page_pds footer>div>div{display:block;margin:8px 0;} #page_pds footer>div>div> .list{display:none;position:relative;left:180px;top:-51px;z-index:100;} #page_pds footer>div>div> .list.active{display:block;} #page_pds footer>div>div> .list >button{position:absolute;font-size:0;color:#fff;cursor: pointer;} #page_pds footer>div>div> .list >button:nth-child(1){left:1px;top:0;background-image:url(../img/common/ico_pds_open.png);width:67px;height:44px;} #page_pds footer>div>div> .list >button:nth-child(2){left:68px;top:0;background-image:url(../img/common/ico_pds_down.png);width:68px;height:44px;} #page_pds footer>div>div> .list .ppt{background-image:none;width:auto;height:auto;} #page_pds footer>div>div> .list .hwp{background-image:none;width:auto;height:auto;} #page_pds footer>div>div> .list .pdf{background-image:none;width:auto;height:auto;} #page_pds footer>.folder{height: 56px; background:url(../img/common/ico_danfolder.png) right center no-repeat; margin-top:40px;} #page_pds footer>.folder:before{content:"단원 폴더 열기"; color:#333; font-weight: 500; font-size:18px; display: inline-block; padding-right: 70px;} /*자료검색팝업*/ #popup>div:not(.std_menu).pop_search{width: 1000px !important;} .pop_search section{padding:0 !important;} .pop_search section>div:nth-of-type(1){line-height: 120px; background:#f5f5f5; text-align: center; font-size:0;} .pop_search section>div:nth-of-type(1):before{content:""; display: inline-block; background:url(../img/common/searcht.png) 0 0 no-repeat; width: 93px; height: 24px; vertical-align: middle; margin-right: 20px;} .pop_search section>div:nth-of-type(1)>input{width: 470px; height: 64px; border: 1px solid #0f5e7a; border-radius: 4px 0 0 4px; vertical-align: middle; font-size: 22px; padding:0 15px;} .pop_search section>div:nth-of-type(1)>button{width: 100px; height: 64px; background: #0f5e7a; text-align: center; color: #fff; font-size: 24px; letter-spacing: -1px; vertical-align: middle;} .pop_search section>h5{border-bottom:1px solid #e5e5e5; padding:15px 21px; font-size:22px; letter-spacing: -1px; color:#333;} .pop_search section>h5>em{color:#ff9d0a; font-weight: 600;} .pop_search section>div:nth-of-type(2){overflow-y: scroll; height: 560px; position:relative; margin-bottom:10px;} .pop_search section>div:nth-of-type(2)>p{font-size:24px; color:#000; letter-spacing: -1px; position:absolute;left: 50%; transform: translateX(-50%); top: 140px; background:url(../img/common/nodata.png) center center no-repeat; padding-top:150px; display: none;} .pop_search section>div:nth-of-type(2) li{border-bottom:1px solid #e5e5e5; padding:16px 45px; display: table;} .pop_search section>div:nth-of-type(2) li>p{display: table-cell; width:120px; vertical-align: middle;} .pop_search section>div:nth-of-type(2) li>p>span{display: inline-block; width:120px; height: 160px; border:2px solid #ccc; font-size: 32px; color: #000; text-align: center; line-height: 160px; font-weight: 700; position:relative;} .pop_search section>div:nth-of-type(2) li>p>span:after{content:""; position:absolute; width:100%; height:100%; background:rgba(255,255,255,0.4); top:0; left:0; z-index: -1;} .pop_search section>div:nth-of-type(2) li>dl{display: table-cell;padding-left: 15px;} .pop_search section>div:nth-of-type(2) li>dl dt:nth-of-type(1){font-size:26px; color:#0f5e7a; font-weight: 600; margin-bottom:11px; } .pop_search section>div:nth-of-type(2) li>dl dt:nth-of-type(2){font-size:23px; color:#333; font-weight: 500; margin-bottom:5px; letter-spacing: -1px;} .pop_search section>div:nth-of-type(2) li>dl dd{font-size:18px; color:#666; line-height: 26px; letter-spacing: -1px; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.4; max-height: 7em; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } .pop_search section>div:nth-of-type(2) li>dl dd>em{color: #ff9d0a; font-weight: 600;} .pop_search section>div:nth-of-type(2) li:hover{background:#f6f6f6;} /*자료링크*/ .dialogue_link dl{font-size:0;} .dialogue_link dl dt{font-size:18px; color:#333; letter-spacing: -1px; display: inline-block; font-weight: 500;} .dialogue_link dl dt:nth-of-type(1){width:63px;} .dialogue_link dl dt+dt{margin-top:8px;} .dialogue_link dl input{width: 524px; height: 64px; border:1px solid #cccccc; font-size: 22px; color: #333; letter-spacing: -1px; padding: 0 15px;} /*프린트*/ .dialogue_print{font-size:0;} .dialogue_print dl{display: inline-block; width: 200px; text-align: center;} .dialogue_print dl dt{width: 149px; height: 108px; margin:30px auto 0px;} .dialogue_print dl dd{color:#333; font-size:22px; letter-spacing: -1px; margin:20px 0;} .dialogue_print dl dd input{width: 24px; height: 24px; border: 1px solid #ccc; margin:0; margin-right: 7px; vertical-align: middle;} .dialogue_print dl:nth-of-type(1) dt{background-image:url(../img/common/leftpage.png);} .dialogue_print dl:nth-of-type(2) dt{background-image:url(../img/common/rightpage.png);} .dialogue_print dl:nth-of-type(3) dt{background-image:url(../img/common/bothpage.png);} /*메모장NEW*/ .dialogue_memo_new{width:588px;} .dialogue_memo_new input,.dialogue_memo_new textarea{border:1px solid #cccccc; border-radius: 4px; width: 100%; outline:0;} .dialogue_memo_new input{height: 62px; font-size:22px; color:#333; letter-spacing: -1px; padding:0 15px;} .dialogue_memo_new textarea{height: 360px; overflow-y: scroll; margin-top:8px; padding:20px 15px; font-size:22px; resize: none; color:#666; line-height: 36px; } .dialogue_memo_new dt{font-size:32px; color:#333333; font-weight: 500; letter-spacing: -.5px; line-height: normal;} .dialogue_memo_new dd{ margin-top: 13px; height: 320px; overflow-y: scroll; background: #f6f6f6; font-size:26px; color:#666; border:4px solid #e5e5e5; padding:20px 15px; word-break: break-all; line-height: 40px;} /*링크NEW*/ .dialogue_link_new{width:588px;} .dialogue_link_new input,.dialogue_link_new textarea{border:1px solid #cccccc; border-radius: 4px; width: 100%; outline:0;} .dialogue_link_new input{height: 62px; font-size:22px; color:#333; letter-spacing: -1px; padding:0 15px;} .dialogue_link_new textarea{height: 360px; overflow-y: scroll; margin-top:8px; padding:20px 15px; font-size:22px; resize: none; color:#666; line-height: 36px; } .dialogue_link_new dt{font-size:32px; color:#333333; font-weight: 500; letter-spacing: -.5px; line-height: normal;} .dialogue_link_new dd{ margin-top: 13px; height: 320px; overflow-y: scroll; background: #f6f6f6; font-size:26px; color:#666; border:4px solid #e5e5e5; padding:20px 15px; word-break: break-all; line-height: 40px;} /*메모장*/ .dialogue_memo{width:588px;} .dialogue_memo input,.dialogue_memo textarea{border:1px solid #cccccc; border-radius: 4px; width: 100%; outline:0;} .dialogue_memo input{height: 62px; font-size:22px; color:#333; letter-spacing: -1px; padding:0 15px;} .dialogue_memo textarea{height: 360px; overflow-y: scroll; margin-top:8px; padding:20px 15px; font-size:22px; resize: none; color:#666; line-height: 36px; } .dialogue_memo dt{font-size:32px; color:#333333; font-weight: 500; letter-spacing: -.5px; line-height: normal;} .dialogue_memo dd{ margin-top: 13px; height: 320px; overflow-y: scroll; background: #f6f6f6; font-size:26px; color:#666; border:4px solid #e5e5e5; padding:20px 15px; word-break: break-all; line-height: 40px;} /*div.adding { cursor:crosshair; }*/ /* 메모장, 링크 아이콘 생성시 커서모양 바꾸기. (20200706 cny) */ div.adding { cursor:pointer; } /* 메모장, 링크 아이콘 생성시 커서모양 바꾸기. (20200706 cny) */ .editing { box-shadow:5px 4px 3px rgba(0,0,0,0.4); border: 3px dotted orange; } #icons_full> .editing { box-shadow:8px 9px 5px rgba(0,0,0,0.4); border: 5px dotted orange; } /*수학 도구툴 버튼*/ #toolMath{ position:absolute !important; width:83px; right: -80px; top:130px; text-align: center; height: auto !important; border-radius: 20px 20px 0 0 ; z-index: 1001;} #toolMath.remove{z-index:1000;} #toolMath.active {background: #051f29;} #toolMath>ul .tool_calc {background-image: url(../img/common/ico_mat_calc.png);} #toolMath>ul .tool_shape {background-image: url(../img/common/ico_mat_shape.png);} #toolMath>ul .tool_model {background-image: url(../img/common/ico_mat_model.png);} #show_toolMath {width:83px; height:83px; background:url(../img/common/ico_mat_tools.png) 0 0 no-repeat; font-size:0;} #toolMath.active #show_toolMath {background:url(../img/common/ico_mat_toolsOn.png) 0 0 no-repeat;} #toolMath>ul{position:absolute; top: 82px;display:none;} #toolMath>ul>li{font-size:0; position:relative;} #toolMath>ul>li>button{width:83px; height: 83px; background-color:#051f29; border-bottom:2px solid #2d434b; background-repeat: no-repeat; background-position:center;} #toolMath>ul>li>button:hover{background-color:#11313e;} #toolMath>ul>li.selected>button{background-color:#1bace0; border-color:#1bace0; position:relative;} #toolMath>ul>li.selected>button.tool_shape:after,#toolMath>ul>li.selected>button.tool_model:after{content:""; position: absolute; top: 50%; right:calc(100% - 2px); margin-top: -10px; border-width: 10px; border-style: solid; border-color: transparent #1bace0 transparent transparent; z-index: 22;} #toolMath>ul>li:first-child button{border-radius:0 0 0px 0px ;} #toolMath>ul>li:last-child button{border-bottom:0; border-radius:0 0 20px 20px ;} #toolMath>ul>li>ul{display: none; position: absolute; top: 0; right: calc(100% - 1px); z-index: 21;} #toolMath>ul>li.selected>ul{display: block;} /* #toolMath.active>button{background-position-y:-64px;} */ #toolMath.active>ul{display: block;} #toolMath>ul>li>ul>li:first-child>button{border-radius: 17px 17px 0 0;} #toolMath>ul>li>ul>li:last-child>button{border-radius:0 0 17px 17px;} #toolMath>ul>li>ul>li{font-size:0; position:relative;} #toolMath>ul>li>ul>li>button{width:80px; height: 80px; background-position:center center; background-repeat: no-repeat; position:relative; background-color:#055b7a; margin-top:-1px;} #toolMath>ul>li>ul>li>button:after{content: ""; width:64px; height: 2px; background:rgba(255,255,255,0.16); position:absolute; bottom:0; left:calc(50% - 32px);} #toolMath>ul>li>ul>li:last-child>button:after{display: none;} /*팔레트*/ #toolMath>ul>li>ul#palette_shape{top:-97px;} #toolMath>ul>li>ul#palette_model{top:-188px;} #palette_shape>li>ol{position:absolute; top:0; right:calc(100% + 7px); width:304px; min-height:72px; background:rgba(0,0,0,0.74); border-radius: 15px; font-size:0; display: table; padding:0 10px; display: none;} #palette_shape>li>ol>li{display: table-cell; vertical-align: middle;} #palette_shape>li>ol>li:first-child:nth-last-child(4), #palette_shape>li>ol>li:first-child:nth-last-child(4) ~ li{width:25%;} #palette_shape>li>ol>li:first-child:nth-last-child(5), #palette_shape>li>ol>li:first-child:nth-last-child(5) ~ li{width:20%;} #palette_shape>li>em{position: absolute; top: 14px; left: -49px; width: 48px; height: 48px; background:url(../img/common/ico_eraserAll.png) 0 0 no-repeat; display: none;} /* #palette_shape>li.selected>button{background-color:#04445c;} */ #palette_shape>li.selected>ol,#palette_shape>li.selected>em,#palette_shape>li.selected>div{display: table;} #palette_shape>li.pen>button{background-image:url(../img/common/ico_draw.png);} #palette_shape>li.pen.selected>button{background-image:url(../img/common/ico_draw_on.png); background-color:#04445c;} #palette_shape>li.blackboard>button{background-image:url(../img/common/ico_mat_blackboard.png);} #palette_shape>li.blackboard.selected>button{background-image:url(../img/common/ico_mat_blackboard.png); background-color:#04445c;} #palette_shape>li.color>button{background-image:url(../img/common/ico_color.png);} #palette_shape>li.color>button:before {content:none; position:absolute; top:40px; left:41px; width:24px; height: 24px; border-radius: 50%; border:2px solid #fff;} #palette_shape>li.color>button[value="#333"]:before{background:#333; content:"";} #palette_shape>li.color>button[value="#3f0"]:before{background:#3f0; content:"";} #palette_shape>li.color>button[value="#f30"]:before{background:#f30; content:"";} #palette_shape>li.color>button[value="#fc0"]:before{background:#fc0; content:"";} #palette_shape>li.color>button[value="#06c"]:before{background:#06c; content:"";} #palette_shape>li.color>button[value="#eee"]:before{background:#eee; content:"";} #palette_shape>li.color>ol>li>button {width: 36px;height: 36px;border-radius: 8px;position: relative;border: 2px solid gray;} #palette_shape>li.color>ol>li:nth-child(1)>button{background:#333;} #palette_shape>li.color>ol>li:nth-child(2)>button{background:#3f0;} #palette_shape>li.color>ol>li:nth-child(3)>button{background:#f30;} #palette_shape>li.color>ol>li:nth-child(4)>button{background:#fc0;} #palette_shape>li.color>ol>li:nth-child(5)>button{background:#06c;} #palette_shape>li.color>ol>li:nth-child(6)>button{background:#eee;} /*삼각형*/ #palette_shape>li.triangle>button{background-image:url(../img/common/ico_mat_triangle.png);} #palette_shape>li.triangle.selected>button{background-image:url(../img/common/ico_mat_triangle.png); background-color:#04445c;} #palette_shape>li.triangle>ol>li>button {width: 24px;height: 24px;} #palette_shape>li.triangle>ol>li:nth-child(1)>button{width: 30px;height: 25px;background-image:url(../img/common/ico_mat_triangle_sub1.png);} #palette_shape>li.triangle>ol>li:nth-child(2)>button{background-image:url(../img/common/ico_mat_triangle_sub2.png);} #palette_shape>li.triangle>ol>li.selected:nth-child(1)>button{background-image:url(../img/common/ico_mat_triangle_sub1On.png);} #palette_shape>li.triangle>ol>li.selected:nth-child(2)>button{background-image:url(../img/common/ico_mat_triangle_sub2On.png);} #palette_shape>li.triangle>ol{width:130px;} /*사각형*/ #palette_shape>li.square>button{background-image:url(../img/common/ico_mat_square.png);} #palette_shape>li.square.selected>button{background-image:url(../img/common/ico_mat_square.png); background-color:#04445c;} #palette_shape>li.square>ol>li>button {width: 30px;height: 25px;} #palette_shape>li.square>ol>li:nth-child(1)>button{width: 30px;height: 25px;background-image:url(../img/common/ico_mat_square_sub1.png);} #palette_shape>li.square>ol>li:nth-child(2)>button{width: 27px;height: 25px;background-image:url(../img/common/ico_mat_square_sub2.png);} #palette_shape>li.square>ol>li:nth-child(3)>button{width: 34px;height: 25px;background-image:url(../img/common/ico_mat_square_sub3.png);} #palette_shape>li.square>ol>li:nth-child(4)>button{width: 32px;height: 29px;background-image:url(../img/common/ico_mat_square_sub4.png);} #palette_shape>li.square>ol>li.selected:nth-child(1)>button{background-image:url(../img/common/ico_mat_square_sub1On.png);} #palette_shape>li.square>ol>li.selected:nth-child(2)>button{background-image:url(../img/common/ico_mat_square_sub2On.png);} #palette_shape>li.square>ol>li.selected:nth-child(3)>button{background-image:url(../img/common/ico_mat_square_sub3On.png);} #palette_shape>li.square>ol>li.selected:nth-child(4)>button{background-image:url(../img/common/ico_mat_square_sub4On.png);} /*오각형*/ #palette_shape>li.pentagon>button{background-image:url(../img/common/ico_mat_pentagon.png);} #palette_shape>li.pentagon.selected>button{background-image:url(../img/common/ico_mat_pentagon.png); background-color:#04445c;} /*육각형*/ #palette_shape>li.hexagon>button{background-image:url(../img/common/ico_mat_hexagon.png);} #palette_shape>li.hexagon.selected>button{background-image:url(../img/common/ico_mat_hexagon.png); background-color:#04445c;} /*원*/ #palette_shape>li.circle>button{background-image:url(../img/common/ico_mat_circle.png);} #palette_shape>li.circle.selected>button{background-image:url(../img/common/ico_mat_circle.png); background-color:#04445c;} /*다각형*/ #palette_shape>li.polygon>button{background-image:url(../img/common/ico_mat_polygon.png);} #palette_shape>li.polygon.selected>button{background-image:url(../img/common/ico_mat_polygon.png); background-color:#04445c;} #palette_shape>li>.input{position: absolute; top: 14px; left: -49px; display: none;} #palette_shape>li>.input>input{width: 48px; height: 48px;text-align:center;} #palette_shape>li>.input>span{cursor: pointer;position: absolute;top: 0; left: -59px;font-family: 'nq';font-size:20px;color:#fff;background-color: #055b7a;border-radius: 10px;padding: 11px;} #palette_shape>li>.input>input::-webkit-outer-spin-button, #palette_shape>li>.input>input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /*수 모형*/ #palette_model>li>ol{position:absolute; top:0; right:calc(100% + 7px); width:304px; min-height:72px; background:rgba(0,0,0,0.74); border-radius: 15px; font-size:0; display: table; padding:0 10px; display: none;} #palette_model>li>ol>li{display: table-cell; vertical-align: middle;} #palette_model>li>ol>li:first-child:nth-last-child(4), #palette_model>li>ol>li:first-child:nth-last-child(4) ~ li{width:25%;} #palette_model>li>ol>li:first-child:nth-last-child(5), #palette_model>li>ol>li:first-child:nth-last-child(5) ~ li{width:20%;} #palette_model>li>em{position: absolute; top: 14px; left: -49px; width: 48px; height: 48px; background:url(../img/common/ico_eraserAll.png) 0 0 no-repeat; display: none;} /*#palette_model>li>button.on{background-color:#04445c;}*/ #palette_model>li.selected>ol,#palette_model>li.selected>em,#palette_model>li.selected>input{display: table;} #palette_model>li>button{border-radius: 0 !important} #palette_model>li:first-child>button{border-radius: 17px 17px 0 0 !important;} #palette_model>li:last-child>button{border-radius:0 0 17px 17px !important;} #palette_model>li.pen>button{background-image:url(../img/common/ico_draw.png);} #palette_model>li.pen.selected>button{background-image:url(../img/common/ico_draw_on.png); background-color:#04445c;} #palette_model>li.blackboard>button{background-image:url(../img/common/ico_mat_blackboard.png);} #palette_model>li.blackboard.selected>button{background-image:url(../img/common/ico_mat_blackboard.png); background-color:#04445c;} #palette_model>li.color>button{background-image:url(../img/common/ico_color.png);} #palette_model>li.color>button:before {content:none; position:absolute; top:40px; left:41px; width:24px; height: 24px; border-radius: 50%; border:2px solid #fff;} #palette_model>li.color>button[value="#333"]:before{background:#333; content:"";} #palette_model>li.color>button[value="#3f0"]:before{background:#3f0; content:"";} #palette_model>li.color>button[value="#f30"]:before{background:#f30; content:"";} #palette_model>li.color>button[value="#fc0"]:before{background:#fc0; content:"";} #palette_model>li.color>button[value="#06c"]:before{background:#06c; content:"";} #palette_model>li.color>button[value="#eee"]:before{background:#eee; content:"";} #palette_model>li.color>ol>li>button {width: 36px;height: 36px;border-radius: 8px;position: relative;border: 2px solid gray;} #palette_model>li.color>ol>li:nth-child(1)>button{background:#333;} #palette_model>li.color>ol>li:nth-child(2)>button{background:#3f0;} #palette_model>li.color>ol>li:nth-child(3)>button{background:#f30;} #palette_model>li.color>ol>li:nth-child(4)>button{background:#fc0;} #palette_model>li.color>ol>li:nth-child(5)>button{background:#06c;} #palette_model>li.color>ol>li:nth-child(6)>button{background:#eee;} /*모형*/ #palette_model>li.model>button{background-image:url(../img/common/ico_mat_sub_model.png);} #palette_model>li.model.selected>button{background-image:url(../img/common/ico_mat_sub_model.png); background-color:#04445c;} #palette_model>li.model>ol>li>button {width: 33px;height: 29px;position: relative;border-radius:0;} #palette_model>li.model>ol>li:nth-child(1)>button{width: 33px;height: 29px;background-image:url(../img/common/ico_mat_sub_model1.png);} #palette_model>li.model>ol>li:nth-child(2)>button{width: 9px;height: 41px;background-image:url(../img/common/ico_mat_sub_model2.png);} #palette_model>li.model>ol>li:nth-child(3)>button{width: 34px;height: 33px;background-image:url(../img/common/ico_mat_sub_model3.png);} #palette_model>li.model>ol>li:nth-child(4)>button{width: 31px;height: 29px;background-image:url(../img/common/ico_mat_sub_model4.png);} #palette_model>li.model>ol>li.selected:nth-child(1)>button{width: 35px;height: 30px;background-image:url(../img/common/ico_mat_sub_model1On.png);} #palette_model>li.model>ol>li.selected:nth-child(2)>button{width: 12px;height: 44px;background-image:url(../img/common/ico_mat_sub_model2On.png);} #palette_model>li.model>ol>li.selected:nth-child(3)>button{width: 38px;height: 36px;background-image:url(../img/common/ico_mat_sub_model3On.png);} #palette_model>li.model>ol>li.selected:nth-child(4)>button{width: 36px;height: 33px;background-image:url(../img/common/ico_mat_sub_model4On.png);} /*수*/ #palette_model>li.su>button{background-image:url(../img/common/ico_mat_sub_su.png);} #palette_model>li.su.selected>button{background-image:url(../img/common/ico_mat_sub_su.png); background-color:#04445c;} #palette_model>li.su>ol>li>button {width: 32px;height: 32px;position: relative;border-radius:0;} #palette_model>li.su>ol>li:nth-child(1)>button{width: 32px;height: 32px;background-image:url(../img/common/ico_mat_sub_su1.png);} #palette_model>li.su>ol>li:nth-child(2)>button{width: 33px;height: 33px;background-image:url(../img/common/ico_mat_sub_su2.png);} #palette_model>li.su>ol>li:nth-child(3)>button{width: 36px;height: 36px;background-image:url(../img/common/ico_mat_sub_su3.png);} #palette_model>li.su>ol>li:nth-child(4)>button{width: 42px;height: 24px;background-image:url(../img/common/ico_mat_sub_su4.png);} #palette_model>li.su>ol>li.selected:nth-child(1)>button{width: 34px;height: 34px;background-image:url(../img/common/ico_mat_sub_su1On.png);} #palette_model>li.su>ol>li.selected:nth-child(2)>button{width: 36px;height: 36px;background-image:url(../img/common/ico_mat_sub_su2On.png);} #palette_model>li.su>ol>li.selected:nth-child(3)>button{width: 39px;height: 38px;background-image:url(../img/common/ico_mat_sub_su3On.png);} #palette_model>li.su>ol>li.selected:nth-child(4)>button{width: 45px;height: 29px;background-image:url(../img/common/ico_mat_sub_su4On.png);} /*계산기*/ #popup>div:not(.std_menu).pop_calc{width: 1100px !important;} .pop_calc section{padding:0 !important; height: 682px; background: url('../img/common/calc_bg.jpg') !important; background-size: contain !important;} .pop_calc section>div:nth-of-type(1){display:inline-block; width:100%;height:300px; background: transparent; font-size:0; padding-top: 50px; padding-left: 0px; margin-left:3px;} .pop_calc section>div:nth-of-type(2){position: absolute; top: 352px; left: 381px; height: 235px; position:relative; margin-bottom:10px;margin-left:3px;} #calcView{position: absolute; display: flex; justify-content: center; align-items: center; top: 51px; left: 310px; width:468px;height:245px; } #calcView #sig1{width:100%;padding:5px 20px;text-align:right;font-size: 70px; font-family: 'lhb'; color: black; letter-spacing: 4px;} #calcView #sig2{display:none;width:100%;text-align:right;font-size: 70px;font-family: 'lhb'; color: black; letter-spacing: 4px;} #calcView #sig3{display:none;width:100%;padding:5px 20px;text-align:right;font-size: 70px; font-family: 'lhb'; color: black; letter-spacing: 4px;} #calcView #calcSum{display:none;width:100%;padding:5px 20px;text-align:right;font-size: 70px;color:rgb(224, 22, 20); font-family: 'lhb'; letter-spacing: 4px;} #calcView #neun{display:none;width:100%;padding:5px 0px; padding-left: 20px; text-align:right;font-size: 70px; line-height: 100px;font-family: 'lhb'; color: black;} #calcView #sig2.active,#calcView #sig3.active,#calcView #neun.active,#calcView #calcSum.active{display:inline;} #calcView #calcViewCover{display: inline-block; height: 100%;} #calcBtn tbody{} #calcBtn td{width:61px; margin-right: 26px; margin-bottom: 19px; display:inline-block; background: transparent; color: transparent;} #calcBtn td:last-child{ } #calcBtn td button{font-size:30px;width:100%;height:43px; text-align:center;display:inline-block;vertical-align: top;} #calcBtn td.fontUp button{font-size:40px;} #calcBtn td.col{width:150px;} /* #wrap>div:not(#popup)#canvas_shape{height: 0 !important; position:absolute; top:0; left:0; z-index: 1;} #canvas_shape>div{position: absolute; z-index: 100; width: 1920px; height: 968px; left: 0px; top: 57px; border:4px solid #ffa333 !important; pointer-events: none;} #canvas_shape>button{position: absolute; top: 60px;left: 1869px; width: 48px; height: 48px; background: url(../img/common/canvasClose.png) 0 0 no-repeat; font-size:0; } */ /*도형*/ #popup>div:not(.std_menu).pop_shape{width: 1920px !important;top:0px;} #popup>div.pop_shape>div{position: absolute; z-index: 100; width: 1920px; height: 968px; left: 0px; top: 0; border:4px solid #ffa333 !important; } #popup>div.pop_shape>button{position: absolute;top: 0;left: 1868px;z-index: 101;width: 48px;height: 48px;background: url(../img/common/canvasClose.png) 0 0 no-repeat;font-size: 0;} #popup.backNone{top:57px;height:968px;} #popup.backNone:before{background:unset;} #popup>div.pop_shape.on>div{background:#fff} /*수 모형*/ #popup>div:not(.std_menu).pop_model{width: 1920px !important;top:0px;} #popup>div.pop_model>div{position: absolute; z-index: 100; width: 1920px; height: 968px; left: 0px; top: 0; border:4px solid #ffa333 !important;} #popup>div.pop_model>button{position: absolute;top: 0;left: 1868px;z-index: 101;width: 48px;height: 48px;background: url(../img/common/canvasClose.png) 0 0 no-repeat;font-size: 0;} #popup.backNone{top:57px;height:968px;} #popup.backNone:before{background:unset;} #popup>div.pop_model.on>div{background:#fff} /*준비중 마크표시*/ #p_std .not_ready:after{position: absolute;right:0;top:10%;content:"작업중";text-align:center;font-size:50px;padding:25px 50px;background:red;border:1px solid #fff; z-index:100} /*map*/ #popup>div.popmap{width:1920px !important; height:1080px; background:#fff;} #popup>div:not(.std_menu)>section#map_box{height: 1020px; position: relative; background-repeat: no-repeat; background-size: 100%; background-color: gray; width: 1860px; float: left; max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 0; border-bottom-left-radius: 15px; } #map_box>img{position: absolute; height: auto; width:100%;} div.pinch-zoom-parent, div.pinch-zoom-container {width : 100%; height : 100%; } #popup>.popmap>footer{float: left; padding: 0 15px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } #popup>.popmap>footer>div{width: 30px; height: 630px; background: url(../img/common/zoom_bg.png) 0 0 no-repeat; display: inline-block; text-align: center; position: relative; } #popup>.popmap>footer>div>span{position: relative; display: inline-block; width: 50px; height: 600px; position: relative; margin-top: 15px; z-index: 1; left: calc(50% - 25px); cursor: pointer; } #popup>.popmap>footer>div>button{content: ""; position: absolute; width: 18px; height: 18px; border-radius: 100%; background: #222222; bottom: 0; left: calc(50% - 9px); outline: none; margin-bottom: 6px; cursor: default; margin-left: -1px; } #popup>.popmap>footer>div>button>p{font-size: 18px; letter-spacing: -.2px; font-weight: 600; padding: 10px 9px; background: #ffd402; position: absolute; top: calc(50%); left: -90px; transform: translateY(-50%); } #popup>.popmap>footer>div>button>p:after{content: ""; position: absolute; top: 50%; left: 100%; margin-top: -10px; border-width: 10px; border-style: solid; border-color: transparent transparent transparent #ffd402; } #popup>.popmap>footer>button{font-size: 0; width: 30px; height: 30px; display: block; margin: 25px 0; } #popup>.popmap>footer>button#btn_zoomout{background: url(../img/common/ico_zoomOut.png) 0 0px no-repeat; } #popup>.popmap>footer>button#btn_zoomout.dimmed{background-position-y: -30px; } #popup>.popmap>footer>button#btn_zoomin{background: url(../img/common/ico_zoomIn.png) 0 0 no-repeat; } #popup>.popmap>footer>button#btn_zoomin.dimmed{background-position-y: -30px; } #page_home>section>div>ol>li.notSample, #page_home>section>div>ul>li.notSample, #popup>div.std_menu>section>ol li.notSample, #ebook_lnb .menu_list >li.notSample, #page_pds section>.tab>li.notSample, #page_pds header>ol li.notSample{pointer-events: none;opacity:0.7;} /*스콤방식 제어*/ body#scorm #wrap{height:970px;} body#scorm.bodyBook #wrap{height:1080px;} body#scorm.bookStd #show_toolbar{display:block;} body#scorm #page_std>footer, body#scorm #page_std>header, body#scorm #page_std .background .header, body#scorm #page_std .background .footer, body#scorm #page_std .background .footer, body#scorm #ebook_lnb, body#scorm.bodyBook #show_toolbar, body#scorm #icons_left, body#scorm #icons_right, body#scorm #btn_bookmark_L, body#scorm #btn_bookmark_R, body#scorm #page_go_ebook{display:none;} body#scorm .tool_jindo{display:none} body#scorm .tool_doumi{border-radius: 20px 20px 0 0;} body#scorm .tool_memo_new, body#scorm .tool_link_new{display:none} body#scorm #toolbar>ul>li>ul#palette_pen{top:-367px;} body#scorm .btn-view-again{display:none;} body#scorm #page_home .background{display:none;} body#scorm #page_home li{display:none;}