@charset "UTF-8"; /*========================================================= 1. 폰트 =========================================================*/ @import url('../css/font.css'); @import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css); /*========================================================= 2. 리셋 =========================================================*/ html {font-size:1em; letter-spacing:-0.025em;} html,body {height:100%; overflow-y:hidden;} html.fixed,html.fixed body {overflow:hidden;} html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button {margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; font-family:"Noto Sans","Apple SD Gothic Neo","Droid Sans",sans-serif; -webkit-box-sizing:border-box; box-sizing:border-box;} input[type="text"],input[type="email"],input[type="number"],input[type="submit"],input[type="reset"],input[type="tel"],input[type="password"],input[type="url"],input[type="search"],input[type="file"],button,textarea {-webkit-box-sizing:border-box;box-sizing:border-box; margin:0; padding:0; border:none; border-radius:0; background:none; font-family:"Noto Sans","Apple SD Gothic Neo","Droid Sans",sans-serif; font-size:100%; letter-spacing:-0.025em; resize:none; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none;} textarea {line-height:1.5em;} :focus {outline:none;} body {position:relative; background:#fff; font-size:14px; line-height:1.8; color:#333; word-wrap:break-word; word-break:keep-all; -webkit-text-size-adjust:none; -moz-text-size-adjust:none;} blockquote,q {quotes:none;} table {border-spacing:0; border-collapse:collapse;} ul,ol,li {list-style:none;} a:focus {outline:none !important;} a {color:#686f75; text-decoration:none;} :invalid {-webkit-box-shadow:none;box-shadow:none;} :-moz-submit-invalid {box-shadow:none;} :-moz-ui-invalid {box-shadow:none;} button::-moz-focus-inner {margin-top:-2px; margin-bottom:-2px; padding:0; border:0;} input::-moz-focus-inner {margin-top:-2px; margin-bottom:-2px; padding:0; border:0;} img {max-width:100%; height:auto;} a:hover,button:hover {cursor:pointer;} button {background:transparent;} em,address,i {font-style:normal;} .sprite {display:inline-block;} span, strong {font-family:inherit;} button span {position:relative; font:inherit;} input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Placeholder */ ::-webkit-input-placeholder {font-weight:400; color:#d3d0cc;} ::-moz-placeholder {font-weight:400; color:#d3d0cc;} :-ms-input-placeholder {font-weight:400; color:#d3d0cc;} :-moz-placeholder {font-weight:400; color:#d3d0cc;} /* Hidden */ .hidden {overflow:hidden; position:absolute; top:0; left:0; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0);} .hide {display:none;} /* Ajax loading */ #ajaxProgressBar {position:fixed; top:0; left:0; z-index:99999999; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.7); _position:absolute;} #ajaxProgressBar img {position:absolute; top:50%; left:50%; margin:-93px 0 0 -93px;} /*========================================================= 3. 공통 레이아웃 =========================================================*/ [lang="en"] {font-family:"Lato"; letter-spacing:0;} :before,:after {-webkit-box-sizing:inherit;box-sizing:inherit;} .wrap {position:relative;padding-top:65px;height:100%;min-width:1280px;max-height:none;overflow-x:hidden;overflow-y:auto;} .wrap.scrollfix {overflow-y:hidden;} .wrap.spc_main {padding-top:145px;} .wrap.spc_no {padding-top:0;} .inactive {background:#b1b1b1 !important;} /*========================================================= 4. Swiper Slide =========================================================*/ /** * Swiper 4.5.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://www.idangero.us/swiper/ * * Copyright 2014-2019 Vladimir Kharlampidi * * Released under the MIT License * * Released on: February 22, 2019 */ .swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;transition-property:transform,-webkit-transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-container-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top, left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top, right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom, left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-webkit-transition:.2s transform,.2s top;transition:.2s transform,.2s top;-webkit-transition:.2s transform,.2s top,.2s -webkit-transform;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-webkit-transition:.2s transform,.2s left;transition:.2s transform,.2s left;-webkit-transition:.2s transform,.2s left,.2s -webkit-transform;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-webkit-transition:.2s transform,.2s right;transition:.2s transform,.2s right;-webkit-transition:.2s transform,.2s right,.2s -webkit-transform;transition:.2s transform,.2s right,.2s -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px} /* 수정 */ .swiper-wrapper > * {-webkit-backface-visibility: hidden !important; -webkit-transform:translate3d(0,0,0) !important;} /*========================================================= 5. 헤더 =========================================================*/ .pic_wrap {position:relative; width:44px; height:44px; border-radius:50%; background-color:#101723; overflow:hidden;} .pic_wrap .bg_none {position:absolute; top:50%; left:50%; width:26px; height:29px; margin-left:-13px; margin-top:-14px;} /* 메인 헤더 */ .main_header {position:absolute; top:0; left:0; width:100%; height:80px; min-width:1280px; padding:0 35px; border-bottom:1px solid #ddd; background:#fff; z-index:5;} .main_header .header_wrap {position:relative; font-size:0;} .main_header .header_wrap h1 {padding-top:17px;} .main_header .header_wrap h1 img {width:117px; -webkit-transition:all 0.5s; transition:all 0.5s;} .main_header .header_wrap h1 img.u {width:117px;} /*유투엠*/ .main_header .header_wrap h1 img.f {width:121px;} /*거꾸로수학*/ .main_header .header_wrap h1 img.d {width:133px;} /*올림*/ .main_header .header_wrap h1 img.g {width:117px;} /*영재*/ .main_header .header_wrap h1 img.m {width:154px;margin-top:11px;} /*완전수학*/ .main_header .header_wrap .nav_wrap {position:absolute; top:10px; right:0;} .main_header nav {position:absolute; top:0; right:0; margin:0 -14px;} .main_header nav .menu_wrap {float:right;} .main_header nav .menu_wrap:after {display:block; clear:both; content:"";} .main_header nav .menu_wrap > li {float:left; position:relative; margin:0 19px; -webkit-transition:margin 0.5s; transition:margin 0.5s;} .main_header nav .menu_wrap > li > a {display:block; font-family:"Noto Sans"; font-size:18px; font-weight:700; line-height:80px; color:#333; letter-spacing:-0.7px;} .top_info {position:absolute; top:80px; left:0; min-width:1280px; width:100%; height:70px; padding:0 35px; background:#1d2b40; text-align:center; z-index:11;} .top_info .info_sm {font-size:13px; font-weight:400; color:rgba(255,255,255,0.5); vertical-align:middle; letter-spacing:-0.5px;} .top_info:after {display:block; clear:both; content:"";} .top_info .profile, .top_info .stage_rank, .top_info .alarm {display:inline-block; color:#fff; font-size:0;display: flex;align-items: center;height: 70px;} .top_info .profile {float:left;} .top_info .profile .pic_wrap, .top_info .profile .my_info {display:inline-block; vertical-align:middle;text-align: left;line-height: 1.5;} .top_info .profile .pic_wrap {margin-right:12px;} .top_info .profile .my_info span {position:relative; display:inline-block; vertical-align:middle;} .top_info .profile .my_info .nm {font-size:16px; font-weight:700;} .top_info .profile .my_info .kong {position:relative; display:inline-block; margin-left:10px; font-size:16px; font-weight:700; color:#55fffd;cursor:pointer;} .top_info .profile .my_info .kong:before {display:inline-block; width:19px; height:19.5px; padding-left:24px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-129px -2px; background-size:500px 1250px; vertical-align:-3px; content:"";} .top_info .reward {float: left;padding-left: 45px;display: flex;align-items: center;height: 70px;gap: 12px;cursor:pointer;} .top_info .reward .icon_trophy {width: 44px;height: 44px;border-radius: 50%;background: #55fffd;display: flex;justify-content: center;align-items: center;} .top_info .reward .icon_trophy:before {width: 18px;height: 27px;background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-333px -763px; background-size:500px 1250px;display: inline-flex;content: "";} .top_info .reward .my_reward {text-align: left;line-height: 1.5;} .top_info .reward .my_reward p {font-size: 16px;font-weight: 700;color: #ffffff;} .top_info .reward .my_reward .ticket {font-size: 13px;color: rgba(255, 255, 255, 0.55);} .top_info .stage_rank {float:left; padding-left:45px;} .top_info .stage_rank li {display:inline-block; font-size:14px; vertical-align:middle;text-align: left;line-height: 1.5;position: relative;} .top_info .stage_rank li.starbox {line-height: 1.2;} .top_info .stage_rank li.rankbox {top: -9px;} .top_info .stage_rank li.pointbox {top: -9px;} .top_info .stage_rank li span {display:inline-block;} .top_info .stage_rank li .info_sm {padding-left: 54px;} .top_info .stage_rank li .rank_info_top {display: flex;align-items: center;line-height: 1;} .top_info .stage_rank .stage {position:relative; display:inline-block; padding-left:54px; font-size:19px; color:#ffd200; text-transform:uppercase; vertical-align:middle;} .top_info .stage_rank .stage:before {margin-top: 9px;position:absolute; top:50%; left:0; width:43px; height:43px; background: url('../img/sprite/league.png?v=03.16') no-repeat; background-size: 429px 172px; -webkit-transform:translateY(-50%); transform:translateY(-50%); content:"";} .top_info .stage_rank .stage em {font-weight:700;} .top_info .stage_rank .stage.star1 {color:#df2636;} .top_info .stage_rank .stage.star2 {color:#f66d37;} .top_info .stage_rank .stage.star3 {color:#ffbe1c;} .top_info .stage_rank .stage.star4 {color:#4eb147;} .top_info .stage_rank .stage.star5 {color:#3fc0dd;} .top_info .stage_rank .stage.star6 {color:#6b7cfe;} .top_info .stage_rank .stage.star7 {color:#bc6cff;} .top_info .stage_rank .stage.star8 {color:#ff4bc9;} .top_info .stage_rank .stage.star1:before {background-position:0 0;} .top_info .stage_rank .stage.star2:before {background-position:-55px 0;} .top_info .stage_rank .stage.star3:before {background-position:-110px 0;} .top_info .stage_rank .stage.star4:before {background-position:-165px 0;} .top_info .stage_rank .stage.star5:before {background-position:-220px 0;} .top_info .stage_rank .stage.star6:before {background-position:-275px 0;} .top_info .stage_rank .stage.star7:before {background-position:-331px 0;} .top_info .stage_rank .stage.star8:before {background-position:-386px 0;} .top_info .stage_rank .stage.star9 {color:#df2636;} .top_info .stage_rank .stage.star10 {color:#f66d37;} .top_info .stage_rank .stage.star11 {color:#ffbe1c;} .top_info .stage_rank .stage.star12 {color:#4eb147;} .top_info .stage_rank .stage.star13 {color:#3fc0dd;} .top_info .stage_rank .stage.star14 {color:#6b7cfe;} .top_info .stage_rank .stage.star15 {color:#bc6cff;} .top_info .stage_rank .stage.star16 {color:#ff4bc9;} .top_info .stage_rank .stage.star9:before {background-position:0 -84px;} .top_info .stage_rank .stage.star10:before {background-position:-55px -84px;} .top_info .stage_rank .stage.star11:before {background-position:-110px -84px;} .top_info .stage_rank .stage.star12:before {background-position:-165px -84px;} .top_info .stage_rank .stage.star13:before {background-position:-220px -84px;} .top_info .stage_rank .stage.star14:before {background-position:-275px -84px;} .top_info .stage_rank .stage.star15:before {background-position:-331px -84px;} .top_info .stage_rank .stage.star16:before {background-position:-386px -84px;} .top_info .stage_rank .rank {font-size:16px; font-weight:700; color:#fff;} .top_info .stage_rank .point {font-size:16px; font-weight:700; color:#55fffd;} .top_info .stage_rank .point , .top_info .stage_rank .rank {position:relative; display:inline-block; margin-left:10px;} .top_info .stage_rank .rank:before , .top_info .stage_rank .point:before {display:inline-block; width:19px; height:19px; padding-left:24px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-size:500px 1250px; vertical-align:-3px; content:"";} .top_info .stage_rank .rank:before {height:19.5px; background-position:-173px -2px;} .top_info .stage_rank .point:before {background-position:-369px -170px;} .top_info .stage_rank .rank.ico_good:after , .top_info .stage_rank .rank.ico_worry:after {position:absolute; top:-25px; left:-24px; width:66px; height:24px; background:url('../img/sprite/sprite.png?v=06.29') no-repeat; background-size:500px 1250px; content:"";} .top_info .stage_rank .rank.ico_good:after {background-position:-306px -569px;} .top_info .stage_rank .rank.ico_worry:after {background-position:-381px -569px;} .top_info .stage_rank li.coming {line-height:65px; font-size:15px; color:#878f9a;} .top_info .stage_rank li.coming .label_txt {position:relative; display:inline-block; width:136px; height:29px; padding-left:34px; line-height:29px; background:#fee301; border-radius:20px; font-family:"Roboto"; font-size:15px; font-weight:700; color:#222; text-align:left;} .top_info .stage_rank li.coming .label_txt:before {position:absolute; top:5px; left:11px; width:18px; height:19px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position: -96px -446px; background-size:500px 1250px; content:"";} .top_info .stage_rank li.coming em {margin-left:10px; font-size:15px; color:#fee301;} .top_info .stage_rank li.noleague {line-height:65px;} .top_info .stage_rank li.noleague .link_league {position:relative; display:inline-block; width:142px; height:29px; padding-left:41px; line-height:29px; background:#df2636; border-radius:20px; color:#fff; text-align:left;} .top_info .stage_rank li.noleague .link_league:before {position:absolute; top:5px; left:14px; width:18px; height:19px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position: -96px -446px; background-size:500px 1250px; content:"";} .top_info .alarm {float:right; font-size:16px; font-weight:700; line-height:65px; color:#fff;} .top_info .alarm:before {display:inline-block; width:20px; height:22px; margin-right:5px; background:url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-217px -2px; background-size:500px 1250px; vertical-align:text-bottom; content:"";} .top_info .alarm .num {display:inline-block; width:36px; height:20px; margin-left:10px; background:#ff0000; border-radius:15px; font-family:"Roboto"; line-height:20px; color:#fff;} /* 서브 헤더 */ .sub_header {position:absolute;top:0;left:0;width:100%;height:65px;min-width:1280px;padding:0 35px;background:#1d2b40;z-index:5;/* margin-top: 90px; */} .sub_header .header_wrap {position:relative;} .sub_header .header_wrap h1 {float:left; padding-top:15px;} .sub_header .header_wrap h1 img {width:89px; -webkit-transition:all 0.5s; transition:all 0.5s;} .sub_header .header_wrap h1 img.u {width:89px;} /*유투엠*/ .sub_header .header_wrap h1 img.f {width:96px;} /*거꾸로수학*/ .sub_header .header_wrap h1 img.d {width:104px;} /*올림*/ .sub_header .header_wrap h1 img.g {width:89px;} /*영재*/ .sub_header .header_wrap h1 img.m {width:130px;margin-top:7px;} /*완전수학*/ .sub_header .header_wrap .nav_wrap {position:absolute; top:10px; right:0;} .sub_header nav {position:absolute; top:16px; left:50%; transform:translateX(-50%);} .sub_header nav .menu_wrap {text-align:center;} .sub_header nav .menu_wrap li {display:inline-block; vertical-align:middle;} .sub_header nav .menu_wrap li a {display:block; width:30px; height:30px; margin:0 17px; background:#ddd;} .sub_header nav .menu_wrap li a {background: url('../img/sprite/menu.png') no-repeat; background-size:500px 250px; width:29px; height:29px;} .sub_header nav .menu_wrap .home a {background-position:-5px -5px; width:29px; height:29px;} .sub_header nav .menu_wrap .today a {background-position: -59px -5px; width:26px; height:28px;} .sub_header nav .menu_wrap .all_study a {background-position:-110px -5px; width:28px; height:28px;} .sub_header nav .menu_wrap .movie_study a {background-position:-162px -5px; width:30px; height:29px;} .sub_header nav .menu_wrap .plus_study a {background-position:-217px -5px; width:25px; height:28px;} .sub_header nav .menu_wrap .wrong_answer a {background-position:-266px -5px; width:34px; height:28px;} .sub_header nav .menu_wrap .statistic a {background-position:-325px -5px; width:30px; height:28px;} .sub_header nav .menu_wrap .mypage a {background-position:-129px -95px;} .sub_header nav .menu_wrap .cs a {background-position:-380px -5px; width:30px; height:31px; margin-top:3px;} .sub_header nav .menu_wrap .help a {background-position:-435px -5px; width:30px; height:30px;} .sub_header nav .menu_wrap .home.on a {background-position:-5px -58px;} .sub_header nav .menu_wrap .today.on a {background-position:-59px -58px;} .sub_header nav .menu_wrap .all_study.on a {background-position:-110px -58px;} .sub_header nav .menu_wrap .movie_study.on a {background-position:-162px -58px;} .sub_header nav .menu_wrap .plus_study.on a {background-position:-217px -58px;} .sub_header nav .menu_wrap .wrong_answer.on a {background-position:-266px -58px;} .sub_header nav .menu_wrap .statistic.on a {background-position: -325px -58px;} .sub_header nav .menu_wrap .mypage.on a {background-position:-129px -192px;} .sub_header nav .menu_wrap .cs.on a {background-position:-380px -58px;} .sub_header nav .menu_wrap .help.on a {background-position:-435px -58px;} .sub_header .util {position:absolute; top:10px; right:0;} .sub_header .util > a , .sub_header .util .pic_wrap , .sub_header .util .nm {display:inline-block; font-size:0; vertical-align:middle;} .sub_header .util .my_info {display:inline-block; vertical-align:middle;} .sub_header .util .my_info .nm {max-width:101px; margin-left:10px; font-size:16px; line-height:1em; font-weight:700; color:#fff; text-align:left; overflow:hidden;} .sub_header .util .alarm {position:relative; display:inline-block; margin-left:15px;} .sub_header .util .alarm:before {display:inline-block; width:20px; height:22px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-size:500px 1250px; background-position:-217px -2px; content:""; vertical-align:middle;} .sub_header .util .alarm .num {display:inline-block; width:37px; height:21px; margin-left:6px; background:#ff0000; border-radius:15px; font-size:16px; font-family:"Roboto"; line-height:21px; font-weight: 700; color:#fff; text-align:center; vertical-align:middle;} @media (min-width: 1600px) and (min-height : 720px) and (orientation : landscape) { .sub_header {padding:0 50px;} } /*========================================================= 6. 메인 =========================================================*/ /* 메인 레이아웃 */ .main_content {position:relative; flex-flow:row wrap; display:flex; height:100%; min-height:381px; min-height:432px;} .main_content section , .main_content aside {display:flex; justify-content:center; align-items:center; height:100%;} .main_content section {width:81.5%; background:#ace4e8;} .main_content aside {width:18.5%; background:#cde7ea;} .main_content section:before {position:absolute; top:0; left:0; width:41%; height:100%; background:#def4f6; content:"";} .main_content .main_layout {display:flex; align-items:center; padding:0 26px; width:100%; height:100%;} .main_content section .main_bubble , .main_content section .main_slide , .main_content aside .side_wrap {position:relative; width:100%; height:80%; max-height:450px; margin-top:12px;} .main_content section .main_layout {width:858px; padding:0;} .main_content section .main_bubble {position:relative; width:22%; height:370px; margin-top:-12px;} .main_content section .main_slide {position:relative; width:78%; max-height:466px; padding:0 40px; margin-top:-5px;} /* 메인 슬라이드 */ .main_slide .swiper-container {position:relative; width:100%; height: 98%;} .main_slide .slide_wrap {text-align:center; font-size:0;} .main_slide .slide_wrap:after {display:block; clear:both; content:"";} .main_slide .slide_wrap .card_wrap {display:inline-block; height:100%; padding:8px;} .main_slide .slide_wrap .card_wrap a {display:block; width:100%; height:100%;} /* 슬라이드 페이징 */ .main_slide .pagination {display:inline-block; float:right; margin-right:13px;} .main_slide .pagination:after {display:block; clear:both; content:"";} .main_slide .pagination .bullet {float:left; width:13px; height:13px; margin:0 3.5px; margin-top:10px; border-radius:50%; background:#98c9cd; cursor:pointer;} .main_slide .pagination .bullet.on {background:#00718f;} /* 슬라이드 컨트롤 */ .main_slide button {position:absolute; top:50%; z-index:1; width:25px; height:49px; text-indent:-9999px; -webkit-transform:translateY(-50%); transform:translateY(-50%);-webkit-transition:all 0.5s;transition:all 0.5s;} .main_slide .ctr button:before {content:""; position:absolute; width:35px; height:35px; border:3px solid rgba(0,0,0,0.15); top:7px; -webkit-transform:rotate(45deg); transform:rotate(45deg);} .main_slide .ctr .prev {left:0;} .main_slide .ctr .prev:before {left:0; border-right:0; border-top:0; margin-left:5px;} .main_slide .ctr .next {right:0;} .main_slide .ctr .next:before {right:0; border-left:0; border-bottom:0; margin-right:5px;} /* card */ .main_slide .card_body {position:relative; display:table; width:100%; height:73%; padding:0 20px; background:#fff; border-radius:10px; box-shadow:0 -1px 8px 0px rgb(0 0 0 / 10%);} .main_slide .card_body .card_tit {position:relative; display:table-cell; padding:20px 0 25px; vertical-align:middle;} .main_slide .card_body .card_tit .tit {position:relative; height:87px; padding-top:30px; font-size:22px; font-weight:700; line-height:1.3em; color:#222; text-overflow: -ms-text-overflow:ellipsis; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; word-break:normal; overflow:hidden; z-index:1;} .main_slide .card_body .card_tit .tit:before {position:absolute; top:0px; left:50%; width:16px; height:16px; -webkit-transform:translateX(-50%); transform:translateX(-50%); background:#7f8797; border-radius:50%; content:"";} .main_slide .card_body .card_tit .status {display:inline-block; width:108px; height:34px; margin-top:50px; background:#fff; border:2px solid #e90b0b; border-radius:20px; font-size:16px; line-height:1.9em; font-weight:700; color:#e90b0b;} .main_slide .card_body .card_tit .status .num {font-family:"Roboto";} .main_slide .card_foot {position:relative; display:table; width:100%; height:27%; min-height:85px; background:#7f8797; border-radius:10px; box-shadow:0 0px 8px 0px rgb(0 0 0 / 15%);} .main_slide .card_foot:after {display:block; clear:both; content:"";} .main_slide .card_foot ul {display:table-cell; padding:8px 0; vertical-align:middle;} .main_slide .card_foot li {float:left; width:50%; padding:2px 0;} .main_slide .card_foot li:first-child {border-right:2px solid rgba(0,0,0,0.1);} .main_slide .card_foot li p {margin-top:5px; font-size:15px; line-height:1em; color:#fff;} .main_slide .card_foot li p.col_tit {position:relative; padding-top:30px; margin-top:0;} .main_slide .card_foot li p.col_tit:before {display:block; position: absolute; top: 0; left: 50%; width:29px; height:24px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; -webkit-transform:translateX(-50%); transform: translateX(-50%); content:"";} .main_slide .card_foot li:nth-child(1) p.col_tit:before {width:29px; height:24px; background-position:-271px -2px;} .main_slide .card_foot li:nth-child(2) p.col_tit:before {width:26px; height:26px; background-position:-325px -2px;} .main_slide .card_foot li span {font-family:"Roboto"; font-size:16px; line-height:1em; font-weight:700; color:#fff;} /* 미진행 */ .main_slide .card_wrap.type0 .card_body .card_tit .tit:before {background:#7f8797;} .main_slide .card_wrap.type0 .card_body .card_tit .status {background:#fff; border:2px solid #e90b0b; color:#222;} .main_slide .card_wrap.type0 .card_body .card_tit .status em {color:#e90b0b;} .main_slide .card_wrap.type0 .card_foot {background:#7f8797;} /* 진행중 */ .main_slide .card_wrap.type2 .card_body .card_tit .tit:before {background:#00a7af;} .main_slide .card_wrap.type2 .card_body .card_tit .status {background:#fff; border:2px solid #e90b0b; color:#222;} .main_slide .card_wrap.type2 .card_body .card_tit .status em {color:#e90b0b;} .main_slide .card_wrap.type2 .card_foot {background:#00a7af;} /* 학습완료 */ .main_slide .card_wrap.type1 .card_body .card_tit:after {position:absolute; bottom:0; left:50%; background:url(../img/bg/bg_main_01.png) no-repeat; width:245px; height:104px; background-size:100%; -webkit-transform:translateX(-50%); transform:translateX(-50%); content:"";} .main_slide .card_wrap.type1 .card_body .card_tit .tit:before {background:#ff7d22;} .main_slide .card_wrap.type1 .card_body .card_tit .status {background:#000; border:2px solid #000; color:#fff;} .main_slide .card_wrap.type1 .card_foot {background:#ff7d22;} /* 메인슬라이드 내용없음 */ .main_slide .slide_wrap .blank {width:50%;} .main_slide .blank .card_body , .main_slide .blank .card_foot {background:#c3ecee; border:1px dashed #92c2c5; box-shadow:none;} .main_slide .blank .card_body {border-bottom:none;} .main_slide .blank .card_body:before {position:absolute; top:50%; left:50%; width:83px; height:60px; margin-top:20px; margin-left:-42px; background: url(../img/sprite/sprite.png?v=06.29) no-repeat ; background-size:500px 1250px; background-position:-96px -560px; content:"";} .main_slide .blank .card_foot {border-top:none;} /* 알림장 */ .note_wrap {position:relative; height:calc(100% - 172px);} .note_wrap .note_tit {padding-bottom:10px; border-bottom:2px solid #00718f; font-family:"Noto Sans"; font-size:17px; line-height:1em; font-weight:700; color:#00718f;} .note_wrap .pagination {position:absolute; display:inline-block; top:5px; right:0;} .note_wrap .pagination:after {display:block; clear:both; content:"";} .note_wrap .pagination .bullet {float:left; width:10px; height:10px; margin:0 4px; border-radius:50%; background:#98c9cd; cursor:pointer;} .note_wrap .pagination .bullet.on {background:#00718f;} .note_wrap .note {display:block; height:calc(100% - 80px); padding:17px 0 24px;} .note_wrap .note .note_dt {font-family:"Roboto"; font-size:16px; line-height:1em; font-weight:400; color:#999; text-align:center;} .note_wrap .note .note_txt {height:84px; max-height:84px; margin-top:10px; padding:0 35px; font-family:"Noto Sans"; font-size:16px; line-height:1.35em; font-weight:400; color:#222; -ms-text-overflow:ellipsis; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; word-wrap:break-word; word-break:normal; overflow:hidden;} .note_wrap .link_more {display:block; padding:8px 0; border-top:2px solid #c1d9dc; font-family:"Noto Sans"; font-size:16px; line-height:1em; font-weight:700; color:#00718f; text-align:center;} .note_wrap .link_more span {position:relative; padding-right:18px;} .note_wrap .link_more span:before,.note_wrap .link_more span:after {position:absolute; top:50%; right:0; width:12px; height:2px; background:#00718f; content:"";} .note_wrap .link_more span:after {-webkit-transform:rotate(90deg); transform:rotate(90deg);} /* 알림장 내용없음 */ .note_wrap .default {position:relative; height:153px;} .note_wrap .default:before {position:absolute; top:50%; left:50%; width:35px; height:35px; margin-top:-17px; margin-left:-17px; background: url(../img/sprite/sprite.png?v=06.29) no-repeat ; background-size:500px 1250px; background-position:-418px -521px; content:"";} /* 링크 */ .side_link {margin-top:17px;} .side_link li {width:100%; background:rgba(255,255,255,0.44);} .side_link li:first-child {margin-bottom:10px;} .side_link li a {position:relative; display:inline-block; width:100%; height:60px; padding-left:60px; font-size:15px; font-weight:700; line-height:60px; color:#222; text-align:center;} .side_link .icon {position:absolute; top:0; left:0; width:60px; height:100%; background:#fff;} .side_link .icon:before {position:absolute; top:50%; left:50%; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; content:"";} .side_link .btn_qpang .icon:before {width:34px; height:33px; margin-top:-17px; margin-left:-16px; background-position:-251px -521px;} .side_link .btn_lvtest .icon:before {width:31px; height:31px; margin-top:-15px; margin-left:-16px; background-position:-306px -521px;} /* 메인 말풍선 */ .main_bubble .char_bubble {position:relative; width:100%; height:100%;} .main_bubble .char_bubble .bubble_box {position:absolute; top:45px; left:50%; margin-left:-103px; width:206px; height:192px;} .main_bubble .char_bubble.m4 .bubble_box {top:32px;} .main_bubble .char_bubble.m5 .bubble_box {top:6px;} .main_bubble .bubble_box:before , .main_bubble .bubble_box .bubble:before {position:absolute; background-repeat:no-repeat; background-size:contain; content:"";} .main_bubble .bubble_box.bg_xmas:before {top:-37px; left:-36px; background-image:url(../img/bg/bg_bubble_xmas_01.png); width:256px; height:190px;} .main_bubble .bubble_box.bg_xmas .bubble:before {top:-10px; left:70px; background-image:url(../img/bg/bg_bubble_xmas_02.png); width:51px; height:53px;} .main_bubble .bubble_box.bg_sun:before {top:-12px; left:-22px; background-image:url(../img/bg/bg_bubble_sun_01.png); width:141px; height:76px;} .main_bubble .bubble_box.bg_sun .bubble:before {top:-25px; left:1px; background-image:url(../img/bg/bg_bubble_sun_02.png); width:183px; height:77px;} .main_bubble .bubble_box.bg_flower .bubble:before {top:-24px; left:-50px; background-image:url(../img/bg/bg_bubble_flower_01.png); width:206px; height:225px;} .main_bubble .bubble_box.bg_rain .bubble:before {top:-36px; left:7px; background-image:url(../img/bg/bg_bubble_rain_01.png); width:168px; height:94px;} .main_bubble .bubble_box.bg_maple:before {top:-28px; left:-13px; background-image:url(../img/bg/bg_bubble_maple_01.png); width:177px; height:119px;} .main_bubble .bubble_box.bg_maple .bubble:before {top:-11px; left:20px; background-image:url(../img/bg/bg_bubble_maple_02.png); width:121px; height:50px;} .main_bubble .bubble_box.bg_fanfare:before {top:-25px; left:-17px; background-image:url(../img/bg/bg_bubble_fanfare_01.png); width:234px; height:177px;} .main_bubble .bubble_box.bg_fanfare .bubble:before {top:-19px; left:-25px; background-image:url(../img/bg/bg_bubble_fanfare_02.png); width:245px; height:97px;} .main_bubble .bubble_box.bg_rainbow:before {top:-38px; left:-36px; background-image:url(../img/bg/bg_bubble_rainbow_01.png); width:191px; height:191px;} .main_bubble .bubble {position:absolute; background:url(../img/bg/bg_bubble.png) no-repeat center; width:100%; height:100%; background-size:contain;} .main_bubble .bubble .txt_wrap {position:absolute; top:56px; left:50%; width:138px; height:100px; text-align:center; margin-left:-68px; overflow:hidden;} .main_bubble .bubble .txt_wrap .txt {font-size: 22px;line-height: 1.15em;color: #222;word-break: normal;font-family: 'Nanum Pen Script', cursive;} .main_bubble .char_bubble .char_img {position:absolute; bottom:0; left:50%; width:350px; height:100%; margin-left:-175px;} .main_bubble .char_bubble .char_img img {position:absolute; height:auto; left:50%; transform:translateX(-50%);} @media (min-width: 1334px){ .main_content .card_foot li p {margin-top:8px;} .main_content .card_foot li p.col_tit {padding-top:33px;} } @media (min-width: 1440px){ .main_content section .main_layout {width:994px;} .main_content .card_wrap.type1 .card_body .card_tit:after {width:280px; height:117px;} .main_content .card_foot li p {margin-top:12px;} .note_wrap .note .note_txt {height:126px; max-height:126px; -webkit-line-clamp:6;} .note_wrap .default {height:195px;} } @media (min-width: 1600px){ .main_content section .main_layout {width:1164px;} .main_content section .main_bubble {width:17%;} .main_content section .main_slide {width:83%; padding:0 48px;} .main_content .card_wrap.type1 .card_body .card_tit:after {width:250px; height:105px;} .main_slide .slide_wrap .blank {width:33.3333%;} } @media (min-width: 1800px){ .main_content section .main_layout {width:1385px;} .main_content section .main_bubble , .main_content section .main_slide , .main_content aside .side_wrap {max-height:510px;} .main_content .card_body .card_tit .tit {height:96px; font-size:25px; line-height:1.35em;} .main_content .card_wrap.type1 .card_body .card_tit:after {width:290px; height:122px;} .main_content .card_body .card_tit .status {width:114px; height:36px;} .main_content .card_foot li p {font-size:17px;} .main_content .card_foot li span {font-size:18px;} .note_wrap .note {padding:23px 0 32px;} .note_wrap .note .note_txt {margin-top:12px; padding:0 40px;} .note_wrap .link_more {padding:13px 0;} .note_wrap .default {height:211px;} } /* 브라우저 높이 */ @media only screen and (max-height: 700px) { .note_wrap .note .note_txt {height:84px; max-height:84px; -webkit-line-clamp:4;} .note_wrap .default {height:153px;} } @media only screen and (max-height: 625px) { .main_content .card_body {height:69%;} .main_content .card_foot {height:31%;} .main_content .card_body .card_tit .status {margin-top:30px;} .main_slide .pagination .bullet {width:12px; height:12px;} .main_bubble .char_bubble.m5 .bubble_box {top:22px;} .note_wrap {height:calc(100% - 132px);} .note_wrap .note {padding:17px 0 24px;} .note_wrap .note .note_txt {margin-top:10px;} .note_wrap .link_more {padding:8px 0;} .side_link {margin-top:10px;} .side_link li a {height:55px; padding-left:55px; line-height:55px;} .side_link li a:before {width:55px; height:55px;} .main_slide .card_wrap.type_today .td_label {font-size:20px;} .main_slide .card_wrap.type_today .td_done, .main_slide .card_wrap.type_today .td_slash, .main_slide .card_wrap.type_today .td_total {font-size:20px;} } /* index2 */ .main_content aside .side_wrap.flnote {margin-top:0;} .side_wrap.flnote .note_wrap {height:100%;} .side_wrap.flnote .note_wrap .note {height:100%;} .side_wrap.flnote .note_wrap .note .note_txt {height:100%; max-height:220px; -webkit-line-clamp:10;} .side_wrap.flnote .note_wrap .swiper-container {height:calc(100% - 48px);} .side_wrap.flnote .note_wrap .default {height: calc(100% - 48px);} @media (min-width: 1440px){ .side_wrap.flnote .note_wrap .swiper-container {height:calc(100% - 43px);} .side_wrap.flnote .note_wrap .default {height:calc(100% - 43px);} } @media (min-width: 1800px){ .side_wrap.flnote .note_wrap .swiper-container {height:calc(100% - 53px);} .side_wrap.flnote .note_wrap .default {height: calc(100% - 53px);} } @media only screen and (min-height: 632px) { .side_wrap.flnote .note_wrap .note .note_txt {height:100%; max-height:260px; -webkit-line-clamp:12;} } @media only screen and (min-height: 732px) { .side_wrap.flnote .note_wrap .note .note_txt {height:100%; max-height:325px; -webkit-line-clamp:15;} } @media only screen and (min-height: 927px) and (min-width: 1800px) { .side_wrap.flnote .note_wrap .note .note_txt {height:100%; max-height:365px; -webkit-line-clamp:17;} } /*========================================================= 7. 서브 공통요소 =========================================================*/ .sub_wrap {position:relative;width:100%;height:100%; padding-top:80px; min-height:512px;overflow:hidden;} /*서브타이틀*/ .sub_wrap .sub_head {position:absolute;top:0;left:0;width:100%;height:80px;padding:0 35px;background:#fff;z-index:10;} .sub_wrap .sub_tit {position:relative; height:100%; padding-left:60px;} .sub_wrap .sub_tit .btn_back {display:block; position:absolute; top:50%; left:0; width:40px; height:40px; margin-top:-19px; border-radius:50%; background:#f3f3f3; text-indent:-9999px;} .sub_wrap .sub_tit .btn_back:before,.sub_wrap .sub_tit .btn_back:after {position:absolute; top:50%; left:50%; width:18px; height:2px; margin-top:-1px; background:#a1a1a1; -webkit-transform:translateX(-50%); transform:translateX(-50%); -webkit-transition:all 0.5s; transition:all 0.5s; content:"";} .sub_wrap .sub_tit .btn_back:after {width:10px; height:10px; margin-left:-8px; margin-top:-5px; border:2px solid #a1a1a1; border-bottom:0; border-left:0; background:none; -webkit-transform:rotate(-135deg) translateX(-50%); transform:rotate(-135deg);} .sub_wrap .sub_tit h2 {display:inline-block; max-width:700px; font-size:23px; line-height:80px; font-weight:700; color:#222; vertical-align:middle; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .sub_wrap .sub_tit .btn_list {position:relative; width:36px; height:20px; background:#222; border-radius:20px; margin-left:7px;margin-top: 5px;vertical-align: middle;} .sub_wrap .sub_tit .btn_list:before, .sub_wrap .sub_tit .btn_list:after {position:absolute; top:50%; left:50%; width:10px; height:2px; margin-left:-5px; margin-top:-1px; background:#fff; content:"";} .sub_wrap .sub_tit .btn_list:after {-webkit-transform:rotate(90deg); transform:rotate(90deg);} .sub_wrap .sub_tit .guide {float:right; margin-top:33px;} .sub_wrap .sub_tit .guide.wa {margin-left:35px;} .sub_wrap .sub_tit .guide li {position:relative; float:left; margin-left:12px; padding-left:12px; font-size:15px; font-weight:400; line-height:1em; color:#666;} .sub_wrap .sub_tit .guide li:first-child {margin-left:0;} .sub_wrap .sub_tit .guide li:before {position:absolute; top:4px; left:0; display:inline-block; width:7px; height:7px; border-radius:50%; content:"";} .sub_wrap .sub_tit .guide li:nth-child(1):before {background:#ff7d22;} .sub_wrap .sub_tit .guide li:nth-child(2):before {background:#00a7af;} .sub_wrap .sub_tit .guide li:nth-child(3):before {background:#7f8797;} .sub_wrap .sub_tit .guide.wa li:nth-child(1):before {background:#ed1c24;} .sub_wrap .sub_tit .guide.wa li:nth-child(2):before {background:#0042bb;} .sub_wrap .sub_tit .btn_next {line-height:80px;} /*서브컨텐츠*/ .sub_wrap .sub_content {position:relative;width:100%; height:100%;} .sub_wrap .sub_content section {position:relative; width:100%;width:100%;height:100%;min-height:387px;} .sub_wrap .sub_content .top_bar ~ section {min-height:257px;} .sub_wrap .sub_content.toggle .top_bar ~ section {top:0; height:100%;} .sub_wrap .sub_content .search_bar ~ section {padding-top:70px; height:100%; min-height:302px;} .sub_content section .center_wrap {display:flex; flex-flow:column; width:100%; height:100%; justify-content:center;} .sub_content section .cont_box {display:flex; flex-flow:row; width:100%; height:100%; justify-content:center; vertical-align:middle;} /* 단원 슬라이드 리스트 */ .top_bar {position:relative;padding:0 72px;border-bottom:1px solid #222;background:#f3f3f3;z-index:999;position: absolute;top: 0;left: 0;width: 100%;} .unit_slide {position:relative; padding:0 40px;} .unit_slide .swiper-container {height:115px;} .unit_slide .swiper-slide {height:auto;} .unit_slide .slide_wrap {display:flex; width: 100%; height: 100%; text-align:center; align-items:center;} .unit_slide .slide_wrap:after {display:block; clear:both; content:"";} .unit_slide .slide_wrap li {position:relative; float:left; padding-right:2px; /*margin:0 8px;*/ } .unit_slide .slide_wrap li a {position:relative; display:block; width:100%; height:62px; padding-left:11px; background:#fff; border-radius:5px; box-shadow:0px 0px 2px 1px rgb(0 0 0 / 10%); font-size:18px; line-height:62px; font-weight:400; color:#222; overflow:hidden;} .unit_slide .slide_wrap li a:before {position:absolute; top:0; left:0; width:12px; height:100%; background:#ddd; border-right:3px solid rgba(0,0,0,0.1); content:"";} .unit_slide .slide_wrap li.tab_on:before , .unit_slide .slide_wrap li.tab_on:after {position:absolute; left:50%; height:6px; background:#232323; border-radius:20px; content:""; z-index:1;} .unit_slide .slide_wrap li.tab_on:before {width:14px; top:-5px; margin-left:-4px; transform:rotate(42deg); transform-origin:left top;} .unit_slide .slide_wrap li.tab_on:after {width:23px; top:-11px; margin-left:-7px; transform:rotate(-42deg); transform-origin:right top;} /*.unit_slide .slide_wrap li.tab_on:last-child:before*/ /*, .unit_slide .slide_wrap li.tab_on:last-child:after {display:none;} */ .unit_slide .slide_wrap li.tab_on a {font-weight:700;} .unit_slide .slide_wrap li.type0 a:before {background:#7f8797;} .unit_slide .slide_wrap li.type1 a:before {background:#ff7d22;} .unit_slide .slide_wrap li.type2 a:before {background:#00a7af;} .unit_slide button {position:absolute; top:50%; z-index:1; width:17px; height:32px; text-indent:-9999px;-webkit-transform:translateY(-50%); transform:translateY(-50%);-webkit-transition:all 0.5s;transition:all 0.5s;} .unit_slide .ctr button:before {content:""; position:absolute; width:22px; height:22px; border:2px solid rgba(0,0,0,0.15); top:5px; -webkit-transform:rotate(45deg); transform:rotate(45deg);} .unit_slide .ctr .prev {left:0;} .unit_slide .ctr .prev:before {left:0; border-right:0; border-top:0; margin-left:5px;} .unit_slide .ctr .next {right:0;} .unit_slide .ctr .next:before {right:0; border-left:0; border-bottom:0; margin-right:5px;} .tab_on:before , .tab_on:after {position:absolute; left:50%; height:6px; background:#232323; border-radius:20px; content:""; z-index:1;} .tab_on:before {width:14px; top:-5px; margin-left:-4px; transform:rotate(42deg); transform-origin:left top;} .tab_on:after {width:23px; top:-11px; margin-left:-7px; transform:rotate(-42deg); transform-origin:right top;} /*.tab_on:last-child:before*/ /*, .tab_on:last-child:after {display:none;} */ .tab_on a {font-weight:700;} .btn_unit_slide {position:absolute; top:0; left:50%; width:60px; height:30px; margin-left:-30px; background:#222; border-radius:0 0 60px 60px; content:""; overflow:hidden; z-index:999;} .btn_unit_slide span {display:block; position: absolute; width:100%; height: 100%; text-indent: -9999px; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.5s; transition: all 0.5s; background:#222;} .btn_unit_slide span:before {position:absolute; top:0; left:0; width:50%; height:100%; background:rgba(255,255,255,0.2); opacity:0.5; content:"";} .btn_unit_slide span:after {position:absolute; width:18px; height:18px; border:2px solid #fff; top:-5%; left:50%; -webkit-transform:translateX(-50%) rotate(-45deg); transform:translateX(-50%) rotate(-45deg); border-right: 0; border-top: 0; content: "";} .btn_unit_slide.open {top:116px;} .btn_unit_slide.open span:after {top:25%; -webkit-transform:translateX(-50%) rotate(135deg); transform:translateX(-50%) rotate(135deg);} .dim {visibility:hidden; position:fixed; top:0; left:0; width:100%; height:100%; -webkit-transition:all 0.5s; transition:all 0.5s; opacity:0; z-index:5;} .dim.on {visibility:visible; background:rgba(0,0,0,0.4); opacity:1;} .sub_wrap .sub_content.toggle .top_bar ~ section .dim {top:65px;} /* select */ .select_form {width:100%;} .select_form button {position:relative; width:100%; padding-left:25px; background:#222; border-radius:20px; color:#666; text-align:left;} .select_form button:after {position:absolute; top:15px; right:20px; border-top:7px solid #f3f3f3; border-left:6px solid transparent; border-right:6px solid transparent; z-index:3; content:"";} .select_form button span {display:block; width:100%; height:37px; font-size:17px; line-height:36px; color:#fff;} .select_form ul {display:none; margin-top:5px; padding:10px 0; border:2px solid #222; border-radius:10px; -webkit-transition:opacity 0.3s; transition:opacity 0.3s; opacity:0;} .select_form ul li a {display:block; padding:12px 25px 12px; font-size:17px; line-height:1em; color:#222;} .select_form button.on:after {-webkit-transform:rotate(180deg); transform:rotate(180deg);} .select_form button.on + ul {display:block; background: #fff; opacity:1; z-index:999;} .select_form button.on + ul li:hover a {background:#f3f3f3;} .radio_form li {float:left; display:inline-block;} /* radio */ .radio_form input[type="radio"] {width:0; height:0; margin:0; padding:0; font-size:0; line-height:0; opacity:0;} .radio_form:after ,.radio_form li:after {display:block; clear:both; content:"";} .radio_form input[type="radio"] + label {float:left; position:relative; padding-left:23px; font-size:15px; line-height:26px; color:#222; cursor:pointer;} .radio_form input[type="radio"] + label:before {display:inline-block; position:absolute; top:13px; left:2px; -webkit-box-sizing:border-box; box-sizing:border-box; width:13px; height:13px; margin-top:-6px; border:1px solid #dedede; border-radius:50%; background:#fff; content:"";} .radio_form input[type="radio"]:checked + label:after {display:inline-block; position:absolute; top:13px; left:6px; width:5px; height:5px; margin-top:-2px; border-radius:50%; background:#00a7af; content:"";} /* search_bar */ .search_bar {position:absolute; top:0; left:0; width:100%; height:70px; padding:0 40px 0 35px; border-bottom:1px solid #222; background:#f3f3f3; z-index:10;} .search_bar:after {display:block; clear:both; content:"";} .search_bar .select_form, .search_bar .month_list {float:left; margin-top:17px; font-size:0;} .search_bar .select_form {width:10%; max-width:150px;} .search_bar .select_form button ~ ul {max-height:270px; overflow-y:auto;} .search_bar .month_list {width:100%; margin: 17px 35px 0;} .search_bar .month_list li {display:inline-block; width:calc(8.333% - 7px); margin-right:7px; border-radius:20px; text-align:center;} .search_bar .month_list li a {display:block; height:37px; font-size:18px; line-height:2em; color:#666;} .search_bar .month_list li.on {background:#222;} .search_bar .month_list li.on a {color:#fff;} /* 영상 줌인, 줌아웃 */ .fullscreen_mode .chapter_header {display:none !important;} .fullscreen_mode .sub_wrap {padding-top:0 !important;} .fullscreen_mode .path_wrap {display:none !important;} .fullscreen_mode .chapter_header ~ .col_wrap {padding-top:0 !important;} /* 팝업 공통 */ .popup_back {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background:rgba(0,0,0,0.6); z-index:9999;} .popup_content {position: fixed; top:50%; left: 50%; width: 700px; margin-left:-12px; min-height:100px; height: 90%; height:477px; background-size: cover; z-index: 9999; text-align: center; padding:0; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);} .inner_pop {position: relative; margin: 0 auto; width: 100%; height:100%; border-radius:10px; box-shadow:0 0 8px 2px rgb(0 0 0 / 10%); background: #fff;} .pop_cont {padding:40px 37px;} .pop_close {position:absolute; top: -25px; right: -25px; width:50px; height:50px; padding:10px; background:#222; border-radius:50%;z-index:99999;} .pop_close:before , .pop_close:after {position:absolute; top:50%; left:50%; margin-left:-15px; width:30px; height:1px; background:#fff; -webkit-transform-origin:center; transform-origin:center; content:"";} .pop_close:before { -webkit-transform:rotate(-45deg); transform:rotate(-45deg);} .pop_close:after {-webkit-transform:rotate(45deg); transform:rotate(45deg);} /* 동영상 팝업 */ .video_popup {display:none; position:fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;} .video_popup .popup_content {width:65%; height:80%; min-width:840px; min-height:400px;} .video_popup .pop_cont {width:100%; height:100%; padding:20px 22px; overflow:hidden;} /* 팝업 안에 동영상 movie_section */ .movie_section.inner .mv_layers .btn_play_wrap {margin-top:-48px;} /*.movie_section.inner {height:100%; height:100%;}*/ /*.movie_section.inner .control_area .seekbar_wrap {position:relative; width:calc(87% - 272px); height:100%;}*/ /*.movie_section.inner .control_area .seekbar_wrap .track {position:relative; width:100%; min-width:0; height:5px; margin:9px 0; background:#fff; border-radius:10px; overflow:hidden;}*/ /*.movie_section.inner .control_area .volume_wrap {position:relative; width:13%; margin-left:20px;}*/ /*.movie_section.inner .control_area .volume_wrap .ctr {position:relative; float:left; width:calc(100% - 31px); margin-left:8px; height:100%;}*/ /* 팝업 - 글 등록form */ .board_write {width:100%; height:100%; margin-top:14px;} .board_write table {width:100%; height:100%;} .board_write table th, .board_write table td {padding:3.7px 0; border:0; vertical-align:middle;} .board_write table td {text-align:left;} .board_write table tr:nth-child(2) th {height:100%;} .board_write table tr:nth-child(2) td {height:100%;} .board_write table th label {display:block; font-size:15px; font-weight:400; line-height:40px; color:#222; white-space:nowrap; cursor:pointer;} .board_write input[type="text"], .board_write input[type="number"] {width:100%; height:35px; padding:0 12px; border:1px solid #ddd; background:#fff; font-size:15px; line-height:34px; color:#666;} .board_write .date input[type="text"] {cursor:pointer;} .board_write .input_wrap {width:100%; height:100%; padding:5px 5px 5px 0; border:1px solid #dbdbdb;} .board_write .input_wrap textarea {width:100%; height:100%; padding:0 8px 0 12px; border:none; font-size:15px; line-height:1.6em; color:#666; word-break:break-all;} /* 목록 데이터 없음 */ .no_data {display:table; width:100%; height:100%;} .sub_wrap .sub_content section .no_data {height:100%;} .no_data .txt_wrap {display:table-cell; width:100%; height:100% !important; vertical-align:middle; text-align:center;} .no_data .txt {position:relative; padding-top: 65px; font-size:20px; color:#666;} .no_data .txt:before {position:absolute; top:0; left:50%; width:57px; height:61px; margin-left:-28px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-size:500px 1250px; background-position:-72px -677px; content:"";} /* 새 글 아이콘 */ .ico_new {position:absolute; top:50%; right:3px; display:inline-block; width:28px; height:23px; margin-top:-12px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-259px -98px; background-size:500px 1250px; vertical-align:text-bottom; content:"";} .has_answer .ico_new {right:36px;} .has_answer .ico_new ~ .ico_answer {right:3px;} /* 답변 아이콘 */ .ico_answer {position:absolute; top:50%; right:36px; width:28px; height:23px; margin-top:-12px; background:url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-311px -98px; background-size:500px 1250px;} /* 서브공통 버튼 - 뒤로가기 */ .btn_comm {position:absolute; bottom:25px; right:25px; width:55px; height:55px; background:rgba(255,255,255,0.4); border:1px solid #a1a1a1; border-radius:50%; text-indent:-9999px; z-index:999;} .btn_comm:before, .btn_comm:after {position:absolute; top:50%; left:50%; width:25px; height:1px; margin-top:-1px; background:#a1a1a1; -webkit-transform:translateX(-53%); transform:translateX(-53%); -webkit-transition:all 0.5s; transition:all 0.5s; content:"";} .btn_comm:after {width:16px; height:16px; margin-left:-16px; margin-top:-14px; border:1px solid #a1a1a1; border-top:0; border-right:0; background:none; -webkit-transform:rotate(45deg) translateX(50%); transform:rotate(45deg) translateX(50%);} /* 모든학습, 성적통계1, 오답클리닉, 오답응시내역, 플러스학습 */ .all_study .sub_content section .center_wrap , .wrong_answer .sub_content section .center_wrap , .wrong_answer_report .sub_content section .center_wrap , .plus_study .sub_content section .center_wrap , .statistic1 .sub_content section .center_wrap , .statistic2 .sub_content section .center_wrap , .statistic3 .sub_content section .center_wrap , .today_todo .sub_content section .center_wrap{padding:0 8px;} .all_study .sub_content section .cont_box > ul , .wrong_answer .sub_content section .cont_box > ul , .wrong_answer_report .sub_content section .cont_box > ul , .plus_study .sub_content section .cont_box > ul , .statistic1 .sub_content section .cont_box > ul , .statistic2 .sub_content section .cont_box , .today_todo .sub_content section .cont_box > ul {overflow-y:auto; padding-right:25px; padding-left:25px;} @media (min-width: 1600px) { .search_bar {padding:0 50px;} .search_bar .select_form button {padding-left:30px;} .search_bar .select_form ul li a {padding:13px 30px 15px;} .search_bar .month_list li {width:calc(8.333% - 15px); margin-right:15px;} .no_data {display:table; width:100%; height:100%;} .all_study .sub_content section .cont_box > ul , .wrong_answer .sub_content section .cont_box > ul , .wrong_answer_report .sub_content section .cont_box > ul , .plus_study .sub_content section .cont_box > ul , .statistic1 .sub_content section .cont_box > ul , .statistic2 .sub_content section .cont_box , .statistic3 .sub_content section .cont_box , .today_todo .sub_content section .cont_box > ul{padding-right:40px; padding-left:40px;} } @media (min-width: 1600px) and (min-height : 720px) and (orientation : landscape) { .sub_wrap {padding-top:90px;} .sub_wrap .sub_head {height:90px; padding:0 50px;} .sub_wrap .sub_tit h2 {line-height:90px;} .sub_wrap .sub_tit .guide {margin-top:38px;} .sub_wrap .sub_tit .btn_next {line-height:90px;} .sub_wrap .sub_content {height:100%;} .unit_slide .swiper-container {height:144px;} .btn_unit_slide.open {top:145px;} } @media (min-width: 1920px){ .top_bar {padding:0 87px;} .unit_slide {padding:0 45px;} } /*========================================================= 8. 서브 스크롤 공통 =========================================================*/ /* 스크롤 너비 */ ::-webkit-scrollbar {width:6px; height:6px;} /* 스크롤바 스타일 */ ::-webkit-scrollbar-thumb {background-color:#D1D0D0; border-radius: 16px;} /* 어두운 배경 스크롤 컬러 */ .wrong_answer_report .view_wrap .wa_unit_list::-webkit-scrollbar-thumb {background-color:#585858;} /* 스크롤 트랙 */ ::-webkit-scrollbar-track {background-color:transparent; border-radius: 16px; margin:8px 0;} /* 스크롤 트랙 :: 마진6 */ .scrollbar_margin6::-webkit-scrollbar-track {margin:6px 0;} /* 스크롤 트랙 :: 마진3 */ .scrollbar_margin3::-webkit-scrollbar-track { margin: 3px 0; } /* 예외 */ .wrong_answer_report .sub_content section .cont_box > ul::-webkit-scrollbar-track {margin-top:0;} .result_board tbody::-webkit-scrollbar-track {margin:6px 0;} .board_accord::-webkit-scrollbar-track, .error_input::-webkit-scrollbar-track {margin: 3px 0;} .paper .quiz_area::-webkit-scrollbar-track {margin: 0px;} /*========================================================= 9. 서브 페이지별 스타일 =========================================================*/ /** 오늘의학습 **/ .today1 .sub_content section {padding:0 0 45px;} .today1 .sub_content section .center_wrap {padding:0 35px;} .today1 .sub_content section .cont_box .col_mod:nth-child(1) {width:calc(78% - 43px);} .today1 .sub_content section .cont_box .col_mod:nth-child(2) {width:22%; margin-left:43px;} /* course_slide */ .today1 .course_slide {height:100%;} .today1 .course_slide .swiper-slide {height:auto;} .today1 .course_slide .slide_wrap:after {display:block; clear:both; content:"";} .today1 .course_slide .card_wrap {float:left; width:calc(33.3% - 10px); height:425px; overflow:hidden;} .today1 .course_slide .card_wrap:first-child {margin:0;} .today1 .course_slide .card_wrap a {display:block; width:100%; height:100%; z-index:9999;} .today1 .course_slide .card_head {position:relative; height:36px; padding-left:20px; border-top-right-radius:10px; border-top-left-radius:10px; line-height:35px; font-size:15px; color:#fff;} .today1 .course_slide .card_head:after {position:absolute; bottom:0; left:0; width:100%; height:3px; background:rgba(0,0,0,0.1); content:"";} .today1 .course_slide .card_body {position:relative; display:table; width:100%; height:calc(56% - 34px); padding:0 20px; border-bottom-right-radius:10px; border-bottom-left-radius:10px;} .today1 .course_slide .card_tit {position:relative; display:table-cell; padding:20px 0 25px; text-align:center; vertical-align:middle;} .today1 .course_slide .card_tit .sep {font-size:16px;line-height:1em; color:rgba(0,0,0,0.3);} .today1 .course_slide .card_tit .tit {height:56px; margin-top:8px; font-size:22px; line-height:1.3em; color:#222; -ms-text-overflow:ellipsis; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; word-break:normal; overflow:hidden;} .today1 .course_slide .card_tit .status {display:inline-block; width:108px; height:34px; margin-top:25px; border-radius: 20px; font-size: 16px; font-weight: 700; background:#fff; border-radius: 20px; border:2px solid #e90b0b; color:#e90b0b;} .today1 .course_slide .card_tit .status .num {font-family:"Roboto";} .today1 .course_slide .card_foot {margin-top:-2px; position:relative; width:100%; height:44%; border-radius:15px; overflow:hidden;} .today1 .course_slide .card_foot:after {position:absolute; top:0; left:50%; width:82%; height:2px; -webkit-transform:translateX(-50%); transform:translateX(-50%); content:"";} .today1 .course_slide .card_foot .canvas-wrap {position:absolute; top:50%; left:50%; margin-top:-148px; margin-left:-158px; width:316px; height:316px;} .today1 .course_slide .card_foot .canvas-wrap canvas {position:absolute; top:0; left:0; width:316px; height:316px;} .today1 .course_slide .card_foot .percent {display:block; position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%, -26px); transform: translate(-50%,-26px); font-family:"Roboto"; font-size:25px; font-weight:700;} .today1 .course_slide .card_foot .percent:after {content: '%';} .today1 .course_slide .card_foot .chart_nm {display:block; position:absolute; left:50%; top:50%; font-size:30px; transform: translate(-50%, 39px); -webkit-transform:translate(-50%, 39px); font-size:16px; font-weight:700;} /* 미진행 type0 */ .today1 .course_slide .card_wrap.type0 .card_head {background:#7f8797;} .today1 .course_slide .card_wrap.type0 .card_body, .today1 .course_slide .card_wrap.type0 .card_foot {background:#e0e4eb; border-right:1px solid #d5d9e0; border-left:1px solid #d5d9e0; border-bottom:2px solid #d5d9e0;} .today1 .course_slide .card_wrap.type0 .card_foot:after {border-bottom:2px dashed #cfd3da;} .today1 .course_slide .card_wrap.type0 .card_foot .percent , .today1 .course_slide .card_wrap.type0 .card_foot .chart_nm {color: #757b88;} /* 학습완료 type1 */ .today1 .course_slide .card_wrap.type1 .card_head {background:#ff7d22;} .today1 .course_slide .card_wrap.type1 .card_body, .today1 .course_slide .card_wrap.type1 .card_foot {background:#ffe9d9; border-right:1px solid #fbddc8; border-left:1px solid #fbddc8; border-bottom:2px solid #fbddc8;} .today1 .course_slide .card_wrap.type1 .card_foot:after {border-bottom:2px dashed #f7d4bb;} .today1 .course_slide .card_wrap.type1 .card_tit .status {background:#000; border-radius: 20px; border:2px solid #000; color:#fff;} .today1 .course_slide .card_wrap.type1 .card_foot .percent , .today1 .course_slide .card_wrap.type1 .card_foot .chart_nm {color: #ff7d22;} /* 진행중 type2 */ .today1 .course_slide .card_wrap.type2 .card_head {background:#00a7af;} .today1 .course_slide .card_wrap.type2 .card_body, .today1 .course_slide .card_wrap.type2 .card_foot {background:#def4f6; border-right:1px solid #ceecef; border-left:1px solid #ceecef; border-bottom:2px solid #ceecef;} .today1 .course_slide .card_wrap.type2 .card_foot:after {border-bottom:2px dashed #b1dde3;} .today1 .course_slide .card_wrap.type2 .card_foot .percent , .today1 .course_slide .card_wrap.type2 .card_foot .chart_nm {color: #00a7af;} /* 페이징 */ .today1 .pagination {text-align:center;} .today1 .pagination:after {display:block; clear:both; content:"";} .today1 .pagination .bullet {display:inline-block; width:47px; height:3px; margin:0 4px; border-radius:20px; background:#ddd; cursor:pointer;} .today1 .pagination .bullet.on {height:4px; background:#404040;} /* course_slide 내용없음 */ .today1 .course_slide .slide_wrap .blank {margin-right:15px;} .today1 .course_slide .slide_wrap .blank a {cursor:default;} .today1 .course_slide .blank .card_head , .today1 .course_slide .blank .card_body , .today1 .course_slide .blank .card_foot {background:#fff; border:1px dashed #d7d7d7; box-shadow:none;} .today1 .course_slide .blank .card_head , .today1 .course_slide .blank .card_body {border-bottom:none;} .today1 .course_slide .blank .card_body , .today1 .course_slide .blank .card_foot {border-top:none;} .today1 .course_slide .blank .card_head:after , .today1 .course_slide .blank .card_foot:after {display:none;} .today1 .course_slide .blank .card_body:before {position:absolute; top:50%; left:50%; width:83px; height:60px; margin-top:43px; margin-left:-42px; background: url(../img/sprite/sprite.png?v=06.29) no-repeat ; background-size:500px 1250px; background-position:-194px -569px; content:""; z-index:1;} /* aside */ .today1 .aside {height:425px;} .today1 .aside li {width:100%; height:139px; min-width:275px; padding:18px 25px; margin-top:4px; background:#f3f3f3; border-radius:10px; cursor:pointer;} .today1 .aside li:first-child {margin:0;} .today1 .aside .tit {position:relative; padding-left:28px; padding-bottom:8px; border-bottom:2px solid #d7d7d7; font-size:18px; font-weight:700; line-height:1.2em; color:#222;} .today1 .aside li .tit:before {position:absolute; top:0; left:0; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; content:"";} .today1 .aside li:nth-child(1) .tit:before {width:19px; height:23px; background-position:-2px -117px;} .today1 .aside li:nth-child(2) .tit:before {width:20px; height:21px; background-position:-46px -117px;} .today1 .aside li:nth-child(3) .tit:before {width:20px; height:20px; background-position:-2px -155px;} .today1 .aside .tit .btn {position:absolute; top:-3px; right:0; width:25px; height:28px;} .today1 .aside .tit .btn:before ,.today1 .aside .tit .btn:after {position:absolute; top:50%; left:50%; width:20px; height:1px; margin-top:-1px; background:#a1a1a1; -webkit-transform:translateX(-50%); transform:translateX(-50%); -webkit-transition:all 0.5s; transition:all 0.5s; content:"";} .today1 .aside .tit .btn:after {width:9px; height:9px; margin-left:0px; margin-top:-5px; border:1px solid #a1a1a1; border-top:0; border-right:0; background:none; -webkit-transform:rotate(-135deg) translateX(-50%); transform:rotate(-135deg);} .today1 .aside .cont {margin-top:9px;} .today1 .aside .cont:after {display:block; clear:both; content:"";} .today1 .aside .cont .col {float:left; width:50%; padding:4px 0; text-align:center;} .today1 .aside .cont .col p {font-size:15px; line-height:1.8em; color:#666;} .today1 .aside .cont .col .num {font-size:14px; color:#222;} .today1 .aside .cont .col .num em {font-family:"Roboto"; font-size:17px; font-weight:700; color:inherit; vertical-align:top;} .today1 .aside .cont .col_rt {border-left:2px dashed #d7d7d7;} .today1 .aside .cont .col_rt p {color:#e90b0b;} .today1 .aside .cont .col_rt .num {color:#e90b0b;} /* 오른쪽사이드 추가학습 없을 경우 flcard */ .today1 .sub_content section .cont_box .col_mod.flcard:nth-child(1) {width:100%;} .today1 .flcard .course_slide .card_wrap {float:left; width:calc(25% - 12px);} @media (min-width: 1280px) and (max-height : 620px) and (orientation : landscape) { .today1 .course_slide .card_wrap {height:380px;} .today1 .course_slide .card_tit {padding:10px 0;} .today1 .aside {height:380px;} .today1 .aside li {height:124px;} } @media (min-width: 1600px) { .today1 .sub_content section .cont_box .col_mod:nth-child(1) {width:77%;} .today1 .sub_content section .cont_box .col_mod:nth-child(2) {width:23%;} .today1 .course_slide .card_wrap {width:calc(33.3% - 12px);} .today1 .flcard .course_slide .card_wrap {width:calc(20% - 14px);} .today1 .course_slide .slide_wrap .blank {margin-right:17px;} } @media (min-width: 1600px) and (min-height : 720px) and (orientation : landscape) { .today1 .sub_content section {height:100%;padding: 0;} .today1 .sub_content section .center_wrap {padding:0 50px;} } @media (min-width: 1600px) and (min-height : 840px) and (orientation : landscape){ .today1 .sub_content section .cont_box {flex-flow:column; justify-content:flex-start;} .today1 .sub_content section .cont_box .col_mod:nth-child(1) {width:100%;} .today1 .sub_content section .cont_box .col_mod:nth-child(2) {width:100%; margin-left:0;} .today1 .course_slide .slide_wrap {height:94%; max-height:490px;} .today1 .course_slide .card_wrap {width:calc(20% - 12px);} .today1 .course_slide .card_head {height:41px; line-height:40px;} .today1 .course_slide .card_body {height:calc(56% - 39px);} .today1 .course_slide .card_foot:after {width:88%;} .today1 .pagination .bullet {height:4px; margin:0 6px; margin-top:17px;} .today1 .pagination .bullet.on {height:5px;} .today1 .aside {margin-top:35px; height:auto;} .today1 .aside:after {display:block; clear:both; content:"";} .today1 .aside li {float:left; width:calc(33.33% - 3px); margin-top:0; margin-left:4px; padding:32px 30px 27px;} .today1 .aside li:first-child {margin-left:0;} .today1 .aside li {height:180px;} .today1 .aside .tit {padding-left:40px; padding-bottom:20px; font-size:20px;} .today1 .aside li .tit:before {background-size:1000px 2500px;} .today1 .aside li:nth-child(1) .tit:before {top:-5px; width:29px; height:35px; background-position:-144px -1289px;} .today1 .aside li:nth-child(2) .tit:before {top:-3px; width:30px; height:30px; background-position:-258px -1289px;} .today1 .aside li:nth-child(3) .tit:before {top:-2px; width:29px; height:28px; background-position:-368px -1289px;} .today1 .aside .tit .btn {top:0;} .today1 .aside .cont {margin-top:14px;} .today1 .aside .cont .col {padding:14px 0;} .today1 .aside .cont .col p {display:inline-block; font-size:17px; vertical-align:top;} .today1 .aside .cont .col .num {margin-left:20px; font-size:15px; line-height:30px;} .today1 .aside .cont .col .num em {font-size:20px; line-height:32px; vertical-align:top;} } @media (min-width : 1680px) and (min-height : 908px) and (orientation : landscape) { .today1 .sub_content section .cont_box .col_mod:nth-child(1) {height:auto;} .today1 .sub_content section .cont_box .col_mod:nth-child(2) {height:auto;} .today1 .course_slide .slide_wrap {height:auto;} .today1 .course_slide .card_wrap {width:calc(20% - 13.6px); height:490px;} .today1 .pagination .bullet {margin-top:25px;} .today1 .aside {margin-top:2.2%;} } /* 오늘의학습_교재학습 */ .today2 .sub_content {padding-top:115px;} .today2 .sub_content section {padding:30px 0 45px; background:#fff;} .today2 .sub_content section .center_wrap {padding:0 111px; justify-content:flex-start;} /*tit_box*/ .today2 .tit_box {margin-bottom:13px;} .today2 .tit_box .tit {position:relative; float:left; width:41%; padding-right:120px; font-size:22px; line-height:34px; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .today2 .tit_box .tit .status {position:absolute; top:0; right:0; display:inline-block; width:113px; height:34px; margin-left:10px; background:#fff; border-radius:20px; font-size:17px; line-height:30px; vertical-align:bottom; text-align:center;} .today2 .tit_box .link_view {position:relative; float:right; display:inline-block; margin-top:11px; margin-right:105px; font-size:15px; line-height:1em; color:#222;} .today2 .tit_box .link_view:before {position:absolute; top:0; left:0; width:14px; height:14px; background:#fff; border:1px solid #222; border-radius:50%; content:"";} .today2 .tit_box .link_view span {position:relative; display:block; padding-left:19px;} .today2 .tit_box .link_view span:before,.today2 .tit_box .link_view span:after {position:absolute; top:6px; left:3px; width:8px; height:2px; background:#222; content:"";} .today2 .tit_box .link_view span:after {-webkit-transform:rotate(90deg); transform:rotate(90deg);} /*cont_box*/ .today2 .sub_content section .cont_box {flex-wrap:nowrap;} .today2 .cont_box .col_mod {height:248px; max-height:300px;} .today2 .cont_box .col_mod:nth-child(1) {width:454px; width:41%; margin-right:4px;} .today2 .cont_box .col_mod:nth-child(2) {width:calc(59% - 100px);} .today2 .cont_box .col_mod:nth-child(3) {width:100px; min-height:auto;} /*chart_list*/ .today2 .chart_list {height:100%; margin:0 -2px;} .today2 .chart_list:after {display:block; clear:both; content:"";} .today2 .chart {position:relative; float:left; width:calc(50% - 4px); height:100%; margin:0 2px; background:#fff; border-radius:10px; overflow:hidden;} .today2 .chart .canvas-wrap {position:absolute; top:50%; left:50%; margin-top:-148px; margin-left:-158px; width:316px; height:316px;} .today2 .chart .canvas-wrap canvas {width:316px; height:316px;} .today2 .chart .canvas-wrap .percent {display:block; position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%, -26px); transform: translate(-50%,-26px); font-family:"Roboto"; font-size:25px; font-weight:700; color: #58c00b;} .today2 .chart .canvas-wrap .percent::after {content: '%';} .today2 .chart .canvas-wrap .chart_nm {display:block; position:absolute; left:50%; top:50%; font-size:30px; transform: translate(-50%, 39px); -webkit-transform:translate(-50%, 39px); font-size:16px; font-weight:700; color: #58c00b;} /*txt_section*/ .today2 .txt_section {width:100%; height:100%; padding:28px 30px; background:#fff; border-radius:10px;} .today2 .txt_section .tit {position:relative; padding-left:23px; font-family:"Roboto"; font-size:17px; line-height:1.35em; color:#58c00b;} .today2 .txt_section .tit:before {position:absolute; top:-2px; left:-5px; width:23px; height:26px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; background-position:-239px -640px; content:"";} .today2 .txt_section .txt_wrap {margin-top:12px; text-align:left; height:154px; overflow-y:auto;} .today2 .txt_section .txt_wrap .txt {font-size:15px; line-height:1.65em; color:#222;} /*sections*/ .today2 .sections {height:100%; padding:0 22px; padding-top:57px; background:#fff; border-radius:10px;} .today2 .sections:after {display:block; clear:both; content:"";} .today2 .sections .section_mod {position:relative; float:left; width:150px; width:calc(33.3% - 13.3px); height:80%; min-height:162px; margin-left:20px; padding:0 20px; background:#f3f3f3; border-radius:7px;} .today2 .sections .section_mod.on {background:#fff;} .today2 .sections .section_mod:first-child {margin-left:0;} .today2 .sections .section_mod:before {position:absolute; top:-20px; left:50%; width:97%; height:5px; border-top:5px dotted #e0e0e0; -webkit-transform:translateX(-50%); transform:translateX(-50%); content:"";} /*점선*/ .today2 .sections .section_mod:after {position:absolute; top:-24px; right:-15px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-position:-251px -411px; background-size:500px 1250px; width:9px; height:12px; content:"";} /*화살표*/ .today2 .sections .section_mod:last-child:after {display:none;} .today2 .sections .section_mod .tooltip {position:absolute; width:100%; top:-10px; left:0; background:transparent; height:10px; z-index:1;} .today2 .sections .section_mod .tooltip:after {position:absolute; bottom:0px; left:50%; margin-left:-7px; border-bottom:7px solid #f3f3f3; border-left:7px solid transparent; border-right:7px solid transparent; z-index:3; content:"";} .today2 .sections .section_mod.on .tooltip:after {border-bottom:7px solid #f3f3f3;} .today2 .sections .section_mod .section_list {position:relative; display:table; margin:0 auto; padding-top:22px;} .today2 .sections .section_mod .section_list:after {position:absolute; top:-21px; left:50%; margin-left:-4px; width:8px; height:8px; background:#a8a8a8; border-radius:50%; content:"";} /*dot*/ .today2 .sections .section_mod.on .section_list:after {position:absolute; top:-38px; left:50%; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; width:23px; height:25px; margin-left:-11px; content:"";} /*dot*/ .today2 .sections .section_mod .section_list ul {height:122px; overflow:hidden;} .today2 .sections .section_mod .section_list li {font-size:15px; line-height:1.375em; line-height:20px; color:#666; word-break: normal;} .today2 .sections .section_mod .section_list li:first-child {margin-top:0;} .today2 .sections .section_mod.on .section_list li {color:#009198;} /*btn*/ .today2 .btn_wrap {position:relative;} .today2 .btn_view {position:absolute; top:50%; right:0; width:73px; height:73px; margin-top:-37px; background:#222; border-radius:50%;} .today2 .btn_view:before {position:absolute; top:50%; left:50%; width:32px; height:32px; margin-top:-16px; margin-left:-16px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; background-position:-437px -277px; content:"";} /*미진행*/ .today2.type0 .sub_content section {background:#e0e4eb;} .today2.type0 .sections .section_mod.on {background:#e0e4eb;} .today2.type0 .sections .section_mod.on .tooltip:after {border-bottom:7px solid #e0e4eb;} .today2.type0 .chart .canvas-wrap .percent, .today2.type0 .chart .canvas-wrap .chart_nm {color:#757b88;} .today2.type0 .tit_box .tit .status {background:#fff; border:2px solid #e90b0b; color: #e90b0b;} .today2.type0 .sections .section_mod.on .section_list li {color:#727988;} .today2.type0 .sections .section_mod.on .section_list:after {background-position:-403px -414px;} /*.today2.type0 .btn_view {background:#b1b1b1;}*/ /*학습완료*/ .today2.type1 .sub_content section {background:#ffe9d9;} .today2.type1 .sections .section_mod.on {background:#ffe9d9;} .today2.type1 .sections .section_mod.on .tooltip:after {border-bottom:7px solid #ffe9d9;} .today2.type1 .chart:nth-child(1) .canvas-wrap .percent, .today2.type1 .chart:nth-child(1) .canvas-wrap .chart_nm {color:#ff7d22;} .today2.type1 .tit_box .tit .status {background:#000; border:2px solid #000; color: #fff;} .today2.type1 .sections .section_mod.on .section_list li {color:#e5701f;} .today2.type1 .sections .section_mod.on .section_list:after {background-position:-352px -414px;} /*진행중*/ .today2.type2 .sub_content section {background:#def4f6;} .today2.type2 .sections .section_mod.on {background:#def4f6;} .today2.type2 .sections .section_mod.on .tooltip:after {border-bottom:7px solid #def4f6;} .today2.type2 .chart:nth-child(1) .canvas-wrap .percent, .today2.type2 .chart:nth-child(1) .canvas-wrap .chart_nm {color:#00a7af;} .today2.type2 .tit_box .tit .status {background:#fff; border:2px solid #e90b0b; color: #e90b0b;} .today2.type2 .sections .section_mod.on .section_list li {color:#009198;} .today2.type2 .sections .section_mod.on .section_list:after {background-position:-300px -414px;} .today2_popup {display:none; position:fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;} .today2_popup .popup_content {position: fixed; top:50%; left: 50%; width: 570px; margin-top:0; margin-left:-12px; min-height:100px; height:484px; background-size: cover; z-index: 9999; text-align: center; padding:0; -webkit-transform:none; transform:none; margin-top:-230px; margin-left:-285px;} .today2_popup .tit_box {padding-bottom:17px; border-bottom:2px solid #222; text-align:center;} .today2_popup .tit_box .tit {display:block; font-size:22px; font-weight:700; line-height:40px; color:#222; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .today2_popup .tit_box .tit span {font-weight:400; color:inherit; vertical-align:baseline;} .today2_popup .tit_box .cate_list {margin-top:11px; width:100%;} .today2_popup .tit_box .cate_list:after {display:block; clear:both; content:"";} .today2_popup .tit_box .cate_list li {float:left; width:calc(16.666% - 4.2px); height:28px; padding:0 5px; margin-right:5px; background:#f2f2f2; border-radius:20px; font-size:15px; color:#666; text-align:center; overflow:hidden;} .today2_popup .tit_box .cate_list li:last-child {margin-right:0;} .today2_popup .pop_cont {width:100%; height:100%; padding:24px 37px; overflow:hidden;} .today2_popup .book_list {height:366px; font-size:0; overflow:hidden; overflow-y:auto;} .today2_popup .book_list li {display:table; width:100%; border-bottom:2px dashed #d7d7d7; text-align:left;} .today2_popup .book_list li .tit {position:relative; display:flex; width:487px; padding:19px 0 20px;} .today2_popup .book_list li .tit p {position:relative; padding-left:56px; padding-right:39px; font-size:18px; font-weight:400; line-height:1.45em; color:#222; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .today2_popup .book_list li .tit:after {position:absolute; top:50%; left:25px; width:20px; height:18px; margin-top:-10px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-199px -446px; background-size:500px 1250px; content:"";} .today2_popup .book_list li .tit span {display:block; font-size:14px; font-weight:400; line-height:1.75em; color:#999;} .today2_popup .book_list li.on {background:#def4f6;} .today2_popup .book_list li.on .tit p {font-weight:700; color:#03a8b0;} .today2_popup .book_list li.on .tit:after {background-position:-148px -446px;} /* 결과 상세보기 - 팝업 */ .diagram_popup {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;} .diagram_popup .popup_back {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background:rgba(0,0,0,0.6); z-index:9999;} .diagram_popup .popup_content {position: fixed; top:50%; left: 50%; width:740px; height:530px; margin-top:-265px; margin-left:-370px; background-size: cover; z-index: 9999; text-align: center; padding:0; transform:none;} .diagram_popup .inner_pop {position: relative; margin: 0 auto; width: 100%; height:100%; border-radius:10px; box-shadow:0 0 8px 2px rgb(0 0 0 / 10%); background: #fff;} .diagram_popup .pop_cont {width:100%; height:100%; padding:20px 20px;} .diagram_popup .pop_cont .cont_box {position:relative; width:100%; height:100%;} .diagram_popup .pop_cont .img_wrap {position:relative; width:auto; height:100%; font-size:0; -webkit-backface-visibility: hidden !important; -webkit-transform:translate3d(0,0,0) !important;} .diagram_popup .pop_cont .img_wrap .img_diagram {position:absolute; top:0; left:0; transform:none;} .zoomableContainer {-webkit-backface-visibility: hidden !important; -webkit-transform:translate3d(0,0,0) !important;} .zoomableContainer img {-webkit-backface-visibility: hidden; -webkit-transform:translate3d(0,0,0);} .diagram_popup .zoom_btn {position:absolute; left: 50%; bottom: 10px; margin-left:-42px; background:rgba(0,0,0,0.75); border-radius:5px; font-size:0;} .diagram_popup .zoom_btn button {width:42px; height:36px; font-family:"Roboto"; font-size:20px; line-height:35px; color:#fff; vertical-align:middle;} .diagram_popup .zoom_btn button:hover {background:rgba(0,0,0,1); border-radius:5px; transition:background 0.5s;} .diagram_popup .pop_close {position:absolute; top: -25px; right: -25px; width:50px; height:50px; padding:10px; background:#222; border-radius:50%; z-index:999;} .diagram_popup .pop_close:before , .diagram_popup .pop_close:after {position:absolute; top:50%; left:50%; margin-left:-15px; width:30px; height:1px; background:#fff; -webkit-transform-origin:center; transform-origin:center; content:"";} .diagram_popup .pop_close:before { -webkit-transform:rotate(-45deg); transform:rotate(-45deg);} .diagram_popup .pop_close:after {-webkit-transform:rotate(45deg); transform:rotate(45deg);} @media (min-width: 1334px) { .today2 .sections {padding:0 26px; padding-top:57px;} .today2 .sections .section_mod {padding:0 24px;} .diagram_popup .popup_content {width:810px; height:580px; margin-top:-283px; margin-left:-405px;} } @media (min-width: 1600px) and (min-height : 720px) and (orientation : landscape) { .today2 .sections {padding:0 34px; padding-top:74px;} .today2 .sub_content {padding-top:144px;} .today2 .sub_content section {padding:50px 0 40px;} .today2 .tit_box {margin-bottom:25px;} .today2 .cont_box .col_mod {height:270px;} .today2 .sections .section_mod {width: calc(33.3% - 20px); height:85%; margin-left:30px;} .today2 .sections .section_mod:before {top:-26px;} /*점선*/ .today2 .sections .section_mod:after {top:-30px; right:-18px;} .today2 .sections .section_mod .section_list:after {position:absolute; top:-27px;} .today2 .sections .section_mod.on .section_list:after {top:-43px;} .diagram_popup .popup_content {width:900px; height:640px; margin-top:-315px; margin-left:-450px;} .today2 .txt_section .txt_wrap {height:175px;} } @media (min-width : 1600px) and (min-height : 840px) and (orientation : landscape) { .today2 .sub_content section .center_wrap {padding: 45px 160px;justify-content:flex-start;} .today2 .sub_content section .cont_box {flex-wrap:wrap; height:auto;} .today2 .tit_box .tit {width:calc(44% - 4px);} .today2 .tit_box .link_view {margin-right:5px;} .today2 .cont_box .col_mod {height:300px; max-height:300px;} .today2 .cont_box .col_mod:nth-child(1) {width:calc(44% - 4px);} .today2 .cont_box .col_mod:nth-child(2) {width:56%;} .today2 .cont_box .col_mod:nth-child(3) {width:170px; height:42px; margin-top:30px;} .today2 .sections .section_mod .section_list {padding-top:30px;} .today2 .sections .section_mod .section_list ul {height:138px;} .today2 .sections .section_mod .section_list li {line-height:23px;} .today2 .btn_view {width:170px; height:42px; border-radius:20px;} .today2 .btn_view:before {margin-top:-13px; margin-left:-13px; width:26px; height:26px; background-size:1000px 2500px; background-position: -910px -647px;} .today2 .btn_view:after {width:15px; height:15px; margin-top:-13px;} .today2 .txt_section {padding:30px 40px;} .today2 .txt_section .txt_wrap {height:200px;} } @media (min-width : 1680px) and (min-height : 840px) and (orientation : landscape) { .today2 .cont_box .col_mod {height:340px; max-height:340px;} .today2 .chart .canvas-wrap {margin-top:-156px;} .today2 .sections .section_mod .section_list {padding-top:45px;} .diagram_popup .popup_content {width:1000px; height:714px; margin-top:-357px; margin-left:-500px;} .today2 .txt_section .txt_wrap {height:245px;} } @media (max-height : 620px) and (orientation : landscape) { .today2 .sub_content section {padding:20px 0;} .today2 .tit_box {margin-bottom:15px;} .today2 .cont_box .col_mod {height:225px;} .today2 .sections {padding:0 22px; padding-top:47px;} .diagram_popup .popup_content {width:740px; height:530px; margin-top:-255px; margin-left:-370px;} .today2 .txt_section {padding:23px 30px;} .today2 .txt_section .txt_wrap {margin-top:8px; height:146px;} } /* 오늘의학습_교재학습2 */ .today3 .sub_content section {padding:45px 0; background:#f3f3f3;} .today3 .sub_content section .center_wrap {padding:0 100px;} .today3 .sub_content section .cont_box {padding:0 3px;} .today3 .item_box {width:210px; height:265px; padding-bottom:50px; border-radius:10px; box-shadow:0 0 4px 1px rgb(0 0 0 / 10%); background:#fff; overflow:hidden;} .today3 .item_box .tit_sect {height:100%; padding:20px; overflow:hidden;} .today3 .item_box .tit_sect .unit {font-size:22px; line-height:1.3em; color:#222;} .today3 .item_box .tit_sect .chapter {margin-top:10px; font-size:18px; font-weight:400; line-height:1.3em; color:#222;-ms-text-overflow:ellipsis; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; word-wrap:break-word; word-break:normal; overflow:hidden;} .today3 .item_box .status {font-size:18px; font-weight:700; line-height:50px; color:#fff; text-align:center;} .today3.type0 .item_box .status {background:#7f8797;} .today3.type1 .item_box .status {background:#ff7d22;} .today3.type2 .item_box .status {background:#00a7af;} .today3 .learning_wrap {position:relative; width:898px; margin-left:19px; padding-right:5px; background:#fff; border-radius:10px; overflow:hidden;} .today3 .learning_list {height:100%; overflow-y:auto;} .today3 .learning_list li {display:table; table-layout:fixed; width:100%; height:96px; border-bottom:1px solid #f3f3f3;} .today3 .learning_list li:after {display:block; clear:both; content:"";} .today3 .learning_list li > div {display:table-cell; vertical-align:middle;} /*날짜*/ .today3 .learning_list .learn_date {position:relative; width:160px; height:100%; background:#fff; color:rgba(0,0,0,0.1); text-align:center;} .today3 .learning_list .learn_date:after {display:block; clear:both; content:"";} .today3 .learning_list .learn_date:before {position:absolute; top:50%; left:50%; width:1px; height:64px; background:rgba(0,0,0,0.1); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); content:"";} .today3 .learning_list .learn_date .date {float:left; width:50%; height:60px; font-family:"Roboto"; font-size:14px; font-weight:700; line-height:1.5em;} .today3 .learning_list .day {display:block; font-family:inherit; font-size:37px; line-height:1em;} .today3 .learning_list .type0 .learn_date {background:#fff;} .today3 .learning_list .type1 .learn_date {background:#ff7d22; color:rgba(255,255,255,0.3);} .today3 .learning_list .type2 .learn_date {background:#00a7af; color:rgba(255,255,255,0.3);} .today3 .learning_list .type3 .learn_date {background:#f1e6d4;} .today3 .learning_list .learn_date .study_date {position:relative;} .today3 .learning_list .type1 .learn_date .study_date {color:#ffd8bd;} .today3 .learning_list .learn_date .dots_wrap {position:absolute; display:inline; top:50%; left:50%; margin-top:-13px; margin-left:-14px;} .today3 .learning_list .learn_date .dot {display:inline-block; width:5px; height:5px; margin:0 1px; border-radius:50%; background:#222;} .today3 .learning_list .type0 .learn_date .dot {background:rgba(0,0,0,0.1);} .today3 .learning_list .type1 .learn_date .dot {background:rgba(255,255,255,0.3);} .today3 .learning_list .type2 .learn_date .dot {background:rgba(255,255,255,0.3);} .today3 .learning_list .type3 .learn_date .dot {background:rgba(0,0,0,0.1);} /*학습명*/ .today3 .learning_list .learn_tit {width:100%; padding:0 27px; font-size:21px; color:#222;} .today3 .learning_list .learn_tit h4 {margin:10px 0; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .today3 .learning_list .progress_wrap {width:100%; height:15px; margin:10px 0; font-size:0;} .today3 .learning_list .progress_wrap > div {display:inline-block; } .today3 .learning_list .progress_wrap .track {position:relative; width:81.6%; min-width:376px; height:9px; margin:3px 0; background:#f3f3f3; border-radius:10px; overflow:hidden;} .today3 .learning_list .progress_wrap .bar {position:absolute; top:0; left:0; width:0%; height:100%; border-radius:10px; z-index:2;} .today3 .learning_list .type1 .progress_wrap .bar {background:#ff7e23;} .today3 .learning_list .type2 .progress_wrap .bar {background:#00a7af;} .today3 .learning_list .progress_wrap .value_txt {float:right; width:auto; font-family:"Roboto"; font-size:16px; line-height:1em; color:#999; text-align:right;} .today3 .learning_list .progress_wrap .value_txt .num {color:#222;} .today3 .learning_list .progress_wrap .value_txt .numbox {margin-left:3px; color:#222;} .today3 .learning_list .progress_wrap .value_txt .num2 {color:#222;} .today3 .learning_list .progress_wrap .bar2 {position:absolute; top:0; left:0; width:0%; height:100%; border-radius:10px;} .today3 .learning_list .type1 .progress_wrap .bar2 {background:#7d675c;} /*버튼*/ .today3 .learning_list .learn_btns {width:150px; padding-right:25px;} .today3 .learning_list .btn_link {position:relative; display:block; width:125px; height:66px; padding-left:26px; border-radius:8px; font-size:16px;font-weight:700; line-height:66px; text-align:center; color:#222;} .today3 .learning_list .btn_link:before {position:absolute; top:50%; left:23px; display:inline-block; width:18px; height:23px; margin-right:5px; margin-top:-9px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; vertical-align:middle; content:"";} .today3 .learning_list .type0 .btn_link {background:#ebebeb; color:#222;} .today3 .learning_list .type2 .btn_link {background:#def4f6; color:#00a7af;} .today3 .learning_list .type1 .btn_link {background:#ffe9d9; color:#ff7d22;} .today3 .learning_list .type3 .btn_link {background:#f1e6d4; color:#8c6239;} .today3 .learning_list .type0 .ic_solve:before {background-position:-46px -192px;} .today3 .learning_list .type2 .ic_solve:before {background-position:-2px -192px;} .today3 .learning_list .type0 .ic_video:before {width:21px; height:22px; margin-top:-11px;background-position:-364px -608px;} .today3 .learning_list .type2 .ic_video:before {width:21px; height:22px; margin-top:-11px;background-position:-423px -608px;} .today3 .learning_list .type1 .ic_detail:before {background-position:-46px -155px;} .today3 .learning_list .ic_class {color:#463fdc !important;} .today3 .learning_list .ic_class:before {background-position:-96px -191px;} .today3 .learning_list .ic_grade {color:#e2237d !important;} .today3 .learning_list .ic_grade:before {background-position:-306px -608px;} .today3 .learning_list .type3 .ic_solve:before {background-position:-197px -191px;} .today3 .learning_list .type3 .ic_video:before {width:21px; height:22px; margin-top:-11px; background-position:-249px -191px;} .today3 .no_data .txt:before {position:absolute; top:0; left:50%; width:83px; height:60px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-size:500px 1250px; background-position:-97px -560px; content:"";} @media (min-width: 1280px) and (max-height : 620px) and (orientation : landscape) { .today3 .sub_content section {padding:40px 0 30px;} } @media (min-width: 1600px){ .today3 .sub_content section .center_wrap {padding:0 250px;} .today3 .item_box {width:18%; max-width:295px; height:280px;} .today3 .learning_wrap {width:82%; max-width:1107px;} .today3 .learning_list .progress_wrap .track {width:calc(100% - 103px);} } @media (min-width : 1680px) and (min-height : 908px) and (orientation : landscape) { .today3 .item_box {height:300px;} } @media (min-width: 1800px){ .today3 .item_box {height:335px;} } /* 학습 - 문제풀이 */ .col_wrap {position:relative; width:100%; height:calc(100% - 65px); font-size:0;} .col_wrap .col_large, .col_wrap .col_small {position:relative; display:inline-block; height:100%; vertical-align:bottom;} .col_wrap .col_large {width:82.5%;} .col_wrap .col_small {width:17.5%;} .col_wrap .left_mod, .col_wrap .cent_mod, .col_wrap .right_mod {position:absolute; top:0; transition: transform 0.5s, -webkit-transform 0.5s;} .col_wrap .left_mod {left:0; -webkit-transform: translateX(-100%); transform: translateX(-100%); padding-top:80px; } .col_wrap .cent_mod {left:0; -webkit-transform: translateX(0); transform: translateX(0);} .col_wrap .right_mod {right:0; -webkit-transform: translateX(0); transform: translateX(0); padding-top:80px; } .col_wrap.left_on .left_mod {-webkit-transform: translateX(0); transform: translateX(0);} .col_wrap.left_on .cent_mod {-webkit-transform: translateX(21.2%); transform: translateX(21.2%);} .col_wrap.left_on .right_mod {-webkit-transform: translateX(100%); transform: translateX(100%);} .chapter_header {width:100%; height:65px; min-width:768px; background:#1d2b40; z-index:5;} .chapter_header .col_wrap {height:100%;} .chapter_header .chapter_tit {position:relative; float:left; width:100%; padding-left:75px; font-size:22px; line-height:65px; color:#fff; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .chapter_header .chapter_tit:before {position:absolute; top:50%; left:25px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; content:"";} .chapter_header .chapter_tit span {font-weight:400; color:inherit; vertical-align:baseline;} .chapter_header .util {position:absolute; top:20px; right:0;} .chapter_header .util:after {display:block; clear:both; content:"";} .chapter_header .util li {position:relative; float:left; padding:0 18px; border-right:1px solid #364255;} .chapter_header .util li:after {position:absolute; top:0; right:0; width:1px; height:100%; background:#0b1018; content:"";} .chapter_header .util li .btn_replay {padding-left:32px;} .chapter_header .util li a {position:relative; display:block; width:100%; height:24px; font-size:15px; line-height:24px; color:#00f3ff;} .chapter_header .util li .btn_error {width:21px;} .chapter_header .util li .btn_request {width:21px;} .chapter_header .util li .btn_help {width:21px;} .chapter_header .util li .btn_back {width:25px;} .chapter_header .util li a:before {position:absolute; top:50%; left:50%; background:url(../img/sprite/sprite.png?v=06.29?v=02.23) no-repeat; background-size:500px 1250px; content:"";} .chapter_header .util li .btn_list:before {width:23px; height:22px; background-position:-253px -721px; margin-top:-10px; margin-left:-12px;} .chapter_header .util li .btn_list span {display:none;} .chapter_header .util li .btn_error:before {width:24px; height:27px; background-position:-307px -721px; margin-top:-13px; margin-left:-11px;} .chapter_header .util li .btn_request:before {width:28px; height:26px; background-position:-365px -721px; margin-top:-11px; margin-left:-15px;} .chapter_header .util li .btn_help:before {width:25px; height:25px; background-position:-422px -721px; margin-top:-11px; margin-left:-15px;} .chapter_header .util li .btn_back:before {width:25px; height:25px; background-position:-220px -243px; margin-top:-12px; margin-left:-13px;} .chapter_header .time_wrap {width:100%; font-family:"Roboto"; font-size:19px; line-height:65px; font-weight:700; color:#fff; text-align:center;} .chapter_header .time_wrap p {position:relative; display:inline-block; padding-left:31px;} .chapter_header .time_wrap p:before {position:absolute; top:50%; left:0; width:21px; height:23px; margin-top:-11px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-position:-274px -243px; background-size:500px 1250px; content:"";} .problem_solving.sub_wrap {position:absolute; top:0; left:0; height:100%; min-height:577px; padding-top:0;} .problem_solving .chapter_header .chapter_tit:before {width:35px; height:27px; margin-top:-13.5px; background-position:-2px -243px;} .problem_solving .chapter_header .util li .btn_replay:before {width:24px; height:25px; top:0; left:0; background-position:-57px -243px; -webkit-transform:translateY(0); transform:translateY(0);} .problem_solving .chapter_header .util_wrap {width:100%; height:100%; text-align:center;} .problem_solving .chapter_header .util_wrap .util {width:100%;} .problem_solving .chapter_header .util_wrap .util li {position:static; float:none; display:inline-block;} .problem_solving .chapter_header .util_wrap .util li:last-child {border-right:none;} .problem_solving .chapter_header .util_wrap .util li:last-child:after {display:none;} .problem_solving .quiz_wrapper {position:relative; width:100%; height:100%; padding-top:80px;} .problem_solving .quiz_bar {position:absolute; top:0; left:0; width:100%; height:80px;} .problem_solving .quiz_section {position:relative; width:100%; height:100%;} .problem_solving .quiz_bar ~ .quiz_section{height:100%;} .problem_solving .quiz_section .quiz_wrap {width:100%; height:100%;} .problem_solving .quiz_bar {border-bottom:2px dashed #d7d7d7;} .problem_solving .quiz_bar:after {display:block; clear:both; content:"";} .problem_solving .quiz_bar .quiz_count {float:left; width:8.6%; font-family:"Roboto"; font-size:21px; line-height:80px; color:#999; text-align:center;} .problem_solving .quiz_bar .quiz_count .current {font-weight:700; color:#00a7af;} .problem_solving .quiz_bar .quiz_count span {color:inherit;} .problem_solving .quiz_bar .num_list {position:relative; float:left; width:calc(91.4% - 18px); margin-right:18px; padding:2px 34px; text-align:center; vertical-align:bottom; font-size:0; overflow:hidden;} .problem_solving .quiz_bar .num_list li {display:inline-block;padding: 14px 0;} .problem_solving .quiz_bar .num_list li a {position: relative;display:block; width:46px; height:46px; border:2px solid #f3f3f3; background:#f3f3f3; border-radius:5px; font-size:15px; line-height:43px; font-weight:700; color:#00a7af; text-align:center;} .problem_solving .quiz_bar .num_list li.off a {background:#def4f6; border:2px solid #def4f6;} .problem_solving .quiz_bar .num_list li.on a {border:2px solid #00a7af;} .problem_solving .quiz_bar .num_list li.right a {background:#00a7af; border:2px solid #00a7af; color:#fff;} .problem_solving .quiz_bar .num_list li.wrong a {background:#ed1c24; border:2px solid #ed1c24; color:#fff;} .problem_solving .quiz_bar .num_list li .num {width:23px; height:23px; border-radius:50%; background:#b1b1b1; font-family:"Roboto"; font-size:11px; color:#fff;position: absolute;top: -11px;right: -7px;display: flex;align-items: center;justify-content: center;} .problem_solving .quiz_bar .num_list button {position:absolute; top:50%; z-index:1; width:13px; height:20px; text-indent:-9999px;-webkit-transform:translateY(-50%); transform:translateY(-50%); margin-top:-4px; -webkit-transition:all 0.5s; transition:all 0.5s;} .problem_solving .quiz_bar .num_list .ctr button:before {content:""; position:absolute; width:14px; height:14px; border:4px solid #a0a0a0; top:5px; -webkit-transform:rotate(45deg); transform:rotate(45deg);} .problem_solving .quiz_bar .num_list .ctr .prev {left:0;} .problem_solving .quiz_bar .num_list .ctr .prev:before {left:0; border-right:0; border-top:0; margin-left:4px;} .problem_solving .quiz_bar .num_list .ctr .next {right:0;} .problem_solving .quiz_bar .num_list .ctr .next:before {right:0; border-left:0; border-bottom:0; margin-right:7px;} .problem_solving .quiz_section .quiz_wrap .quiz_area {width:100%; height:100%;} .problem_solving .quiz_section .ctr button {position:absolute; top:50%; z-index:1; width:30px; height:120px; background:#d7d7d7; text-indent:-9999px; -webkit-transform:translateY(-50%); transform:translateY(-50%);-webkit-transition:all 0.5s;transition:all 0.5s;} .problem_solving .quiz_section .ctr button:before {content:""; position:absolute; width:21px; height:21px; border:2px solid #fff; top:50%; margin-top:-10px; -webkit-transform:rotate(45deg); transform:rotate(45deg);} .problem_solving .quiz_section .ctr .prev {left:0;} .problem_solving .quiz_section .ctr .prev:before {left:10px; border-right:0; border-top:0; } .problem_solving .quiz_section .ctr .next {right:0;} .problem_solving .quiz_section .ctr .next:before {right:10px; border-left:0; border-bottom:0; } .problem_solving .col_small button , .problem_solving .right_mod button , .problem_solving .left_mod button {position:relative; width:100%; height:80px;} .problem_solving .right_mod button:after , .problem_solving .left_mod button:after {position:absolute; bottom:0; left:0; width:100%; height:2px; background:rgba(0,0,0,0.1); content:"";} .problem_solving .right_mod button , .problem_solving .left_mod button {position:absolute; top:0; left:0;} .problem_solving .btn_submit {background:#00a7af;} .problem_solving .btn_submit span {position:relative; padding-left:27px; font-size:22px; line-height:80px; font-weight:700; color:#fff;} .problem_solving .btn_submit span:before {position:absolute; top:50%; left:0; width:20px; height:21px; margin-top:-10px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-position:-330px -243px; background-size:500px 1250px; content:"";} .problem_solving .btn_next {background:#0070af;} .problem_solving .btn_next span {position:relative; padding-left:27px; font-size:22px; line-height:80px; font-weight:700; color:#fff;} .problem_solving .btn_next span:before {position:absolute; top:50%; left:0; width:20px; height:21px; margin-top:-10px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-position:-330px -243px; background-size:500px 1250px; content:"";} .problem_solving .btn_end {background:#fe7d22;} .problem_solving .btn_end span {position:relative; padding-left:27px; font-size:22px; line-height:80px; font-weight:700; color:#fff;} .problem_solving .btn_end span:before {position:absolute; top:50%; left:0; width:20px; height:21px; margin-top:-10px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-position:-330px -243px; background-size:500px 1250px; content:"";} .problem_solving .btn_next_mv {background:#00667f;} .problem_solving .btn_next_mv span {position:relative; padding-left:27px; font-size:22px; line-height:80px; font-weight:700; color:#fff;} .problem_solving .btn_next_mv span:before {position:absolute; top:50%; left:0; width:20px; height:21px; margin-top:-10px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-position:-330px -243px; background-size:500px 1250px; content:"";} .problem_solving .btn_wait span {position:relative; padding-left:0; font-size:17px; line-height: 80px; font-weight:700; color:#fff;} .problem_solving .btn_wait span:before {display:none;} .problem_solving .aside {position:relative; width:100%; height:100%; padding:25px 23px; background:#f3f3f3;} .problem_solving .aside .helper {width:100%; text-align:center;} .problem_solving .aside .helper li {position:relative; width:100%; margin-bottom:11px; background:#fff; border-radius:6px; box-shadow:2px 2px 0px 0px #d9d9d9; font-size:16px; color:#222;} .problem_solving .aside .helper li a {position:relative; display:inline-block; width:100%; padding:4.2% 0; padding-left:69px; text-align:left;} .problem_solving .aside .helper li span {position:relative; display:inline-block; font-size:16px; color:#222; } .problem_solving .aside .helper li span:before {position:absolute; top:50%; left:-15px; width:1px; height:24px; margin-top:-12px; background:#ddd; content:"";} .problem_solving .aside .helper li:before {position:absolute; top:50%; left:13px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; content:"";} .problem_solving .aside .helper li.btn_keyboard:before {width:28px; height:21px; margin-top:-10px; background-position:-384px -243px;} .problem_solving .aside .helper li.btn_handwriting{display:none;} .problem_solving .aside .helper li.btn_handwriting:before {width:27px; height:20px; margin-top:-10px; background-position: -437px -243px;} .problem_solving .aside .helper li.btn_soosik:before {width:27px; height:20px; margin-top:-10px; background-position:-2px -284px;} .problem_solving .aside .helper li.btn_hint{display:none;} .problem_solving .aside .helper li.btn_hint:before {width:27px; height:24px; margin-top:-10px; background-position:-49px -284px;} .problem_solving .aside .helper li.btn_video{display:none;} .problem_solving .aside .helper li.btn_video:before {width:27px; height:23px; margin-top:-10px; background-position:-100px -284px;} .problem_solving .aside .option {position:absolute; bottom:0; left:0; width:100%; padding:15px 23px; border-top:1px solid #d6d6d6; text-align:center; font-size:0;} .problem_solving .aside .option:before {position:absolute; top:0; left:0; width:100%; height:100%; border-top:1px solid #fff; content:"";} .problem_solving .aside .option li {position:relative; display:inline-block; width:52px; width:calc(33.33% - 10px); max-width:80px; margin-left:15px; background:#222; border-radius:5px;} .problem_solving .aside .option li:first-child {margin-left:0;} .problem_solving .aside .option li a {position:relative; display:inline-block; width:100%; height:0; padding-top:100%; background-repeat:no-repeat; background-position:center;} .problem_solving .right_mod .aside .option li.btn_memo a {background-image:url(../img/icon/ic_note.png); background-size:38% 44%;} .problem_solving .left_mod .aside .option li.btn_memo a {background-image:url(../img/icon/ic_note.png); background-size:38% 44%;} .problem_solving .right_mod .aside .option li.btn_omr a {background-image:url(../img/icon/ic_omr.png); background-size:53% 42%;} .problem_solving .left_mod .aside .option li.btn_omr a {background-image:url(../img/icon/ic_omr.png); background-size:53% 42%;} .problem_solving .right_mod .aside .option li.btn_hand a {background-image:url(../img/icon/ic_hand_left.png); background-size:34% 42%;} .problem_solving .left_mod .aside .option li.btn_hand a {background-image:url(../img/icon/ic_hand_right.png); background-size:34% 42%;} .problem_solving .option li a span {position:absolute; top:0; right:0; bottom:0; left:0;} .problem_solving .score_wrap {margin-top:25px; width:100%; font-size:0;} .problem_solving .score_wrap:after {display:block; clear:both; content:"";} .problem_solving .score_wrap li {position:relative; display:inline-block; width:50%; height:100px; text-align:center;} .problem_solving .score_wrap li:nth-child(1) {padding-right:10px;} .problem_solving .score_wrap li:nth-child(2) {padding-left:10px;} .problem_solving .score_wrap li:nth-child(1):after {position:absolute; top:21px; right:-4px; line-height:25px; font-size:20px; font-weight:700; color:#222; content:"/";} .problem_solving .score_wrap li input {width:66px; height:66px; border:1px solid #d7d7d7; border-radius:8px; font-family:"Roboto"; font-size:21px; text-align:center;} .problem_solving .score_wrap li label {display:block; margin-top:12px; font-size:15px; line-height:1em;} .problem_solving .score_wrap .result_cnt {background:#fff; color:#00a7af;} .problem_solving .score_wrap .quiz_cnt {background:#222; color:#fff;} .problem_solving .score_wrap .result_cnt ~ label {color:#00a7af;} .problem_solving .score_wrap .total_box ~ label {color:#222;} .problem_solving.paper .quiz_wrapper {padding-top:0px} /* 문제풀이 로딩중 */ .loading_wrap {display:table; width:100%; height:100%;} .loading_wrap .loading {display:table-cell; vertical-align:middle; text-align:center;} .loading_wrap .loading_bar {position:relative; width:585px; height:50px; margin:0 auto; margin-top:82px; background:#f3f3f3; border-radius:20px;} .loading_wrap .loading_bar:before {position:absolute; top:-95px; left:50%; width:80px; height:69px; margin-left:-40px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-position:-2px -505px; background-size:500px 1250px; content:"";} .loading_wrap .loading_bar .img_loading {position:absolute; top:50%; left:50%; width:530px; height:10px; margin-top:-5px; margin-left:-265px;} .loading_wrap .txt_wrap {margin-top:47px;} .loading_wrap strong {display:inline-block; font-size:24px; line-height:1.2em; color:#222;} .loading_wrap .txt {margin-top:10px; font-size:20px; line-height:1.2em; color:#222;} .loading_wrap .cm {margin-top:30px;font-size:18px; line-height:1.2em; color:#FF3800;font-weight:700;} @media (min-width: 1600px) { .problem_solving .btn_wait span {font-size:20px;} .problem_solving .aside .option li {width:calc(33.33% - 12px); margin-left:18px;} .problem_solving .chapter_header .util_wrap .util li {padding:0 25px;} .problem_solving .score_wrap li:nth-child(1):after {position:absolute; top:26px; right:-4px; line-height:25px; font-size:26px; font-weight:700; color:#222; content:"/";} .problem_solving .score_wrap li input {width:86px; height:86px; font-size:25px;} } /* 제출 결과 팝업 */ .result_popup {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;} .result_popup .popup_back {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background:rgba(0,0,0,0.6); z-index:9999;} .result_popup .popup_content {position: fixed; top:50%; left: 50%; width: 700px; margin-top:26px; margin-left:-12px; min-height:100px; height:427px; background-size: cover; z-index: 9999; text-align: center; padding:0; -webkit-transform:none; transform:none; margin-left:-350px; margin-top:-220px;} .result_popup.m1 .popup_content {margin-top:-198px;} .result_popup.m2 .popup_content , .result_popup.m3 .popup_content , .result_popup.m4 .popup_content {margin-top:-188px;} .result_popup .inner_pop {position: relative; margin: 0 auto; width: 100%; height:100%; border-radius:10px; box-shadow:0 0 8px 2px rgb(0 0 0 / 10%); background: #fff;} .result_popup .pop_header {position:relative; height:80px; background:#f3f3f3; border-top-left-radius:10px; border-top-right-radius:10px; box-shadow:0 0 6px 2px rgb(51 51 51 / 10%) inset;} .result_popup .pop_header .tit_box {display:inline-block; width:90%;} .result_popup .pop_header .tit_box .tit {font-size:22px; font-weight:700; line-height:80px; color:#222; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .result_popup .pop_header .tit_box .tit span {font-weight:400; color:inherit; vertical-align:baseline;} .result_popup .pop_header .char_img img {position:absolute; height:auto; bottom:0;} .result_popup .pop_cont {padding:36px 37px 36px;} .result_popup .cont_box:after {display:block; clear:both; content:"";} .result_popup .cont_box .chart_list , .result_popup .cont_box .kong_info {float:left; width:50%; height:215px; background:#fff; border:1px solid #d7d7d7; text-align:center; font-size:0;} .result_popup .cont_box .chart_list {width:calc(66% - 2px); padding:0 21px;} .result_popup .cont_box .chart_list:after {display:block; clear:both; content:"";} .result_popup .cont_box .chart {position:relative; display:inline-block; width:50%; height:100%; overflow:hidden;} .result_popup .cont_box .chart .canvas-wrap {position:absolute; top:50%; left:50%; margin-top:-152px; margin-left:-159px; width:316px; height:316px;} .result_popup .cont_box .chart canvas {width:316px; height:316px;} .result_popup .cont_box .chart span {display:block;} .result_popup .cont_box .chart .txt {display:block; position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%, -26px); transform: translate(-50%,-28px); font-size:16px; line-height:1em; color: #00a7af;} .result_popup .cont_box .chart .percent {display:block; font-family:"Roboto"; font-size:25px; line-height:1.6em; font-weight:700; color: #00a7af;} .result_popup .cont_box .chart .percent::after {content: '%';} .result_popup .cont_box .chart .chart_nm {display:block; position:absolute; left:50%; top:50%; font-size:30px; transform: translate(-50%, 39px); -webkit-transform:translate(-50%, 39px); font-size:16px; font-weight:700; color: #00a7af;} .result_popup .cont_box .kong_info {width:calc(34% - 8px); margin-left:10px;} .result_popup .cont_box .kong_info .tit {position:relative; display:inline-block; padding-left:25px; margin-top:25px; font-size:16px; font-weight:700; color:#222;} .result_popup .cont_box .kong_info .tit:before {position:absolute; top:50%; left:0; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-371px -2px; background-size:500px 1250px; width:19px; height:19px; -webkit-transform:translateY(-50%); transform:translateY(-50%); content:"";} .result_popup .cont_box .kong_info .kong {margin:7px auto 0; width:109px; height:109px; border-radius:50%; background:#f3f3f3; font-size:16px; line-height:109px; color:#222;} .result_popup .cont_box .kong_info .kong em {font-family:"Roboto"; font-size:25px; font-weight:700; color:inherit;} .result_popup .cont_box .kong_info .txt {margin-top:14px; font-size:13px; color:#999; letter-spacing:-0.5px;} .result_popup .cont_box .btn_result {position:relative; display:inline-block; margin-top:20px; height:40px; padding-left:75px; padding-right:40px; background:#222; border-radius:20px; font-size:16px; line-height:38px; font-weight:700; color:#fff;} .result_popup .cont_box .btn_result:before {position:absolute; top:9px; left:45px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-320px -284px; background-size:500px 1250px; width:23px; height:24px; content:"";} .result_popup .pop_close {position:absolute; top: -25px; right: -25px; width:50px; height:50px; padding:10px; background:#222; border-radius:50%;} .result_popup .pop_close:before , .result_popup .pop_close:after {position:absolute; top:50%; left:50%; margin-left:-15px; width:30px; height:1px; background:#fff; -webkit-transform-origin:center; transform-origin:center; content:"";} .result_popup .pop_close:before { -webkit-transform:rotate(-45deg); transform:rotate(-45deg);} .result_popup .pop_close:after {-webkit-transform:rotate(45deg); transform:rotate(45deg);} /* 결과 상세보기1,2 */ .result_info1 .sub_content section , .result_info2 .sub_content section {padding:0 0 45px;} .result_info1 .sub_content section .center_wrap , .result_info2 .sub_content section .center_wrap {padding:0 35px;} .result_box {width:calc(33% - 7px); background:#f3f3f3; border-radius:10px; overflow:hidden;} .result_box .date {height:50px; padding:0 20px; background:#00a7af; font-family:"Roboto"; font-size:19px; font-weight:700; line-height:50px; color:#fff;} .result_box .wrapper {position:relative; display:flex; flex-flow:column; justify-content:center; align-items:center; width:100%; padding:45px 25px; height:calc(100% - 50px); text-align:center;} .result_box .chart_list {width:100%; height:100%; height:205px; min-height:180px; font-size:0;} .result_box .chart_list:after {display:block; clear:both; content:"";} .result_box .chart {position:relative; display:inline-block; width:50%; height:100%; overflow:hidden;} .result_box .chart .canvas-wrap {position:absolute; top:50%; left:50%; margin-left:-159px; width:316px; height:316px; transform:translateY(-50%); margin-top:25px;} .result_box .chart canvas {width:316px; height:316px;} .result_box .chart span {display:block;} .result_box .chart .txt {display:block; position:absolute; left:50%; top:0; -webkit-transform:translate(-50%, 50px); transform: translate(-50%, 45px); font-size:18px; line-height:1em; color: #00a7af;} .result_box .chart .percent {display:block; position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%, -26px); transform: translate(-50%,-26px); font-family:"Roboto"; font-size:25px; font-weight:700; color: #00a7af;} .result_box .chart .percent::after {content: '%';} .result_box .chart .chart_nm {display:block; position:absolute; left:50%; top:50%; font-size:30px; -webkit-transform:translate(-50%, 39px); transform: translate(-50%, 39px); font-size:16px; font-weight:700; color: #00a7af;} .result_box .btn_wrap {width:100%; font-size:0;} .result_box .btn_wrap button {display:inline-block; width:calc(50% - 5px); margin-top:55px; margin-left:10px; padding:11px 0; background: #222; border-radius: 6px; } .result_box .btn_wrap button:first-child {margin-left:0;} .result_box .btn_wrap span {position:relative; font-size:15px; color:#fff;} .result_box .btn_wrap .btn_paper span {padding-left:30px;} .result_box .btn_wrap .btn_replay span {padding-left:32px;} .result_box .btn_wrap button span:before {position:absolute; top:50%; left:0; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; content:"";} .result_box .btn_wrap .btn_paper span:before {width:21px; height:24px; margin-top:-12px; background-position: -96px -521px;} .result_box .btn_wrap .btn_replay span:before {width:24px; height:25px; margin-top:-14px; background-position:-352px -378px;} .result_board {position:relative; width:839px; width:calc(67% - 8px); height:100%; margin-left:15px; background:#fff; border-radius:10px; overflow:hidden;} .result_board table {table-layout:fixed; width:100%; height:100%; margin-left:-1px;} .result_board table thead {display:block; width:calc(100%);} .result_board table tbody {display:block; width:100%; height:calc(100% - 50px); overflow:auto; overflow-y:auto;} .result_board table tr {width:100%;} .result_board th {height: 50px; background:#5b5b5b; font-size:14px; line-height:50px; color:#fff;} .result_board th span {font-weight:400;} .result_board td {position:relative; height:50px; padding:8px 10px; border-left:0.5px solid #d7d7d7; border-bottom:0.5px solid #d7d7d7; font-size:15px; line-height:1.5em; color:#222; vertical-align:middle; word-break:break-all;} .result_board td .ft_blue {color:#0042bb;} .result_board td.lesson {padding:15px;} .result_board td.lesson span {display:block; font-size:inherit; line-height:1.5em; color:#999;} .result_board td.time {font-family:"Roboto"; text-align:center;} .result_board td.answer {padding-left:15px; padding-right:55px; font-weight:700;} .result_board td.answer .txt {margin-top:2px; line-height:1.2em;} .result_board td.answer .txt:first-child {margin-top:0;} .result_board td.bgcmp {background:#def4f6;} .result_board table .lesson {width:290px; min-width:290px;} .result_board table .score {width:70px; min-width:70px;} .result_board table .answer {width:47%;} .result_board table .details {width:70px; min-width:70px;} .result_board table .solution {width:70px; min-width:70px;} .result_info2 .result_board table .lesson {width:225px; min-width:225px;} .result_info2 .result_board table .time {width:70px; min-width:70px;} .result_board table th.solution.scrollwd {min-width:76px;} .result_board .btn_memo_view {position:absolute; top:50%; right:10px; margin:-16px auto 0; float:right; width:35px; height:32px; background:#000; border-radius:5px; vertical-align:middle;} .result_board .btn_memo_view:before {position:absolute; top:50%; left:50%; width:20px; height:22px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-position:-154px -284px; background-size:500px 1250px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); content:"";} .result_board .btn_memo_view.modify {background-color:#00a7af;} .result_board .btn_details {position:relative; display:block; width:35px; height:32px; margin:0 auto; background:#000; border-radius:5px; vertical-align:middle;} .result_board .btn_details:before {position:absolute; top:50%; left:50%; width:22px; height:16px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-position:-199px -521px; background-size:500px 1250px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); content:"";} .result_board .btn_solution {position:relative; display:block; width:35px; height:32px; margin:0 auto; background:#000; border-radius:5px; vertical-align:middle;} .result_board .btn_solution:before {position:absolute; top:50%; left:50%; width:22px; height:16px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-position:-148px -521px; background-size:500px 1250px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); content:"";} .result_board .icon {position:absolute; top:50%; left:50%; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); content:"";} .result_board .ico_right {width:12px; height:13px; background-position:-301px -356px;} .result_board .ico_wrong {width:13px; height:12px; background-position:-403px -356px;} .result_board .ico_semo {width:15px; height:11px; background-position: -352px -356px;} .result_board .bg {background:#def4f6;} @media (min-width: 1334px){ .result_info2 .result_board table .lesson {width:245px; min-width:245px;} } @media (min-width: 1440px){ .result_board table .lesson {width:335px; min-width:335px;} .result_board table .score {width:76px; min-width:76px;} .result_board table .answer {width:47%;} .result_board table .details {width:75px; min-width:75px;} .result_board table .solution {width:75px; min-width:75px;} .result_info2 .result_board table .lesson {width:260px; min-width:260px;} .result_info2 .result_board table .time {width:85px; min-width:85px;} .result_board table th.solution.scrollwd {min-width:81px;} } @media (min-width: 1600px){ .result_box .btn_wrap button {width:calc(50% - 8px); margin-left:16px;} .result_board table .lesson {width:380px; min-width:380px;} .result_info2 .result_board table .lesson {width:310px; min-width:310px;} } @media (min-width: 1775px){ .result_board table .lesson {width:450px; min-width:450px;} .result_info2 .result_board table .lesson {width:390px; min-width:390px;} } /* 결과 상세보기 - 팝업 */ .view_popup {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;} .view_popup .popup_back {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background:rgba(0,0,0,0.6); z-index:9999;} .view_popup .popup_content {position: fixed; top:50%; left: 50%; width:70%; height:80%; min-width:900px; min-height:400px; margin-top:0; margin-left:-12px; background-size: cover; z-index: 9999; text-align: center; padding:0; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);} .view_popup .inner_pop {position: relative; margin: 0 auto; width: 100%; height:100%; border-radius:10px; box-shadow:0 0 8px 2px rgb(0 0 0 / 10%); background: #fff;} .view_popup .pop_cont {width:100%; height:100%; padding:40px 35px;} .view_popup .pop_cont .tit_box {padding-bottom:15px; border-bottom:2px solid #222; text-align:left;} .view_popup .pop_cont .tit_box button {position:relative; padding:11px 17px 12px 71px; margin-right:7px; background:#222; border-radius:5px;} .view_popup .pop_cont .tit_box button:before {position:absolute; top:50%; left:13px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; content:"";} .view_popup .pop_cont .tit_box button.btn_problem:before {width:28px; height:20px; margin-top:-10px; background-position:-2px -411px;} .view_popup .pop_cont .tit_box button.btn_explain:before {width:29px; height:22px; margin-top:-11px; background-position: -48px -411px;} .view_popup .pop_cont .tit_box button.btn_video:before {width:27px; height:23px; margin-top:-13px; background-position:-96px -411px;} .view_popup .pop_cont .tit_box button.btn_errboard:before {left:18px; width:19px; height:24px; margin-top:-12px; background-position:-251px -477px;} .view_popup .pop_cont .tit_box button.btn_memo:before {left:18px; width:19px; height:22px; margin-top:-11px; background-position:-362px -521px;} .view_popup .pop_cont .tit_box button span {position:relative; display:inline-block; font-size:16px; line-height:1em; color:#fff;} .view_popup .pop_cont .tit_box button span:before {position:absolute; top:50%; left:-15px; width:1px; height:24px; margin-top:-12px; background:rgba(255,255,255,0.15); content:"";} .view_popup .pop_cont .tit_box button:before {position:absolute; top:50%; left:13px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; content:"";} .view_popup .pop_cont .tit_box .ctr {position:relative; float:right; font-size:0;} .view_popup .pop_cont .tit_box .ctr button {display:inline-block; width:60px; height:43px; padding:0; margin:0; background:#00a7af; text-indent:-9999px;} .view_popup .pop_cont .tit_box .ctr button:before {position:absolute; right:auto; left:auto; width:14px; height:14px; border:3px solid #fff; top:50%; margin-top:-8px; -webkit-transform:rotate(45deg); transform:rotate(45deg); content:"";} .view_popup .pop_cont .tit_box .ctr .prev {left:0; margin-right:-1px; border-top-right-radius:0; border-bottom-right-radius:0;} .view_popup .pop_cont .tit_box .ctr .prev:before {left:25px; border-right:0; border-top:0;} .view_popup .pop_cont .tit_box .ctr .next {right:0; border-top-left-radius:0; border-bottom-left-radius:0;} .view_popup .pop_cont .tit_box .ctr .next:before {right:25px; border-left:0; border-bottom:0; } .view_popup .pop_cont .tit_box .ctr .next:after {position:absolute; top:50%; left:0; width:2px; height:28px; margin-top:-14px; background:#3bbbc2; content:"";} .view_popup .pop_cont .tit_box .ctr .prev:after {position:absolute; top:50%; right:0; width:2px; height:28px; margin-top:-14px; background:#008b91; content:"";} .view_popup .pop_cont .tit_box .ctr .next.inactive:after {position:absolute; top:50%; right:0; width:2px; height:28px; margin-top:-14px; background:#CCCCCC; content:"";} .view_popup .pop_cont .tit_box .ctr .prev.inactive:after {position:absolute; top:50%; right:0; width:2px; height:28px; margin-top:-14px; background:#A8A8A8; content:"";} .view_popup .pop_cont .cont_box {position:relative; margin-top:15px; width:100%; height:calc(100% - 133px);} .view_popup .pop_cont .cont_box .board_write {margin-top:18px;} .view_popup .pop_cont .tit_box .ctr_canvas {position:relative; float:right; font-size:0;} .view_popup .pop_cont .tit_box .ctr_canvas button {display:inline-block; width:60px; height:43px; padding:0; margin:0; background:#00a7af; text-indent:-9999px;} .view_popup .pop_cont .tit_box .ctr_canvas button:before {position:absolute; right:auto; left:auto; width:14px; height:14px; border:3px solid #fff; top:43%; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); content:"";} .view_popup .pop_cont .tit_box .ctr_canvas .up {left:0; margin-right:-1px; border-top-right-radius:0; border-bottom-right-radius:0;} .view_popup .pop_cont .tit_box .ctr_canvas .up:before {left:25px; border-right:0; border-top:0;top:24%;} .view_popup .pop_cont .tit_box .ctr_canvas .down {right:0; border-top-left-radius:0; border-bottom-left-radius:0;} .view_popup .pop_cont .tit_box .ctr_canvas .down:before {right:25px; border-left:0; border-bottom:0; } .view_popup .pop_cont .tit_box .ctr_canvas .down:after {position:absolute; top:50%; left:0; width:2px; height:28px; margin-top:-14px; background:#3bbbc2; content:"";} .view_popup .pop_cont .tit_box .ctr_canvas .up:after {position:absolute; top:50%; right:0; width:2px; height:28px; margin-top:-14px; background:#008b91; content:"";} .view_popup .pop_cont .tit_box .ctr_canvas .down.inactive:after {position:absolute; top:50%; right:0; width:2px; height:28px; margin-top:-14px; background:#CCCCCC; content:"";} .view_popup .pop_cont .tit_box .ctr_canvas .up.inactive:after {position:absolute; top:50%; right:0; width:2px; height:28px; margin-top:-14px; background:#A8A8A8; content:"";} .view_popup .quiz_section {width:100%;height:100%} .view_popup .quiz_section .quiz_wrap {width:100%;height:100%} .view_popup .quiz_section .ctr button {position:absolute; top:50%; z-index:1; width:30px; height:120px; background:#d7d7d7; text-indent:-9999px; -webkit-transform:translateY(-50%); transform:translateY(-50%);-webkit-transition:all 0.5s;transition:all 0.5s;} .view_popup .quiz_section .ctr button:before {content:""; position:absolute; width:21px; height:21px; border:2px solid #fff; top:50%; margin-top:-10px; -webkit-transform:rotate(45deg); transform:rotate(45deg);} .view_popup .quiz_section .ctr .prev {left:0;} .view_popup .quiz_section .ctr .prev:before {left:10px; border-right:0; border-top:0; } .view_popup .quiz_section .ctr .next {right:0;} .view_popup .quiz_section .ctr .next:before {right:10px; border-left:0; border-bottom:0; } .view_popup .quiz_area {width:100%; height:100%;} .view_popup .btn_errg {position:relative;margin-top:17px; width:180px; height:43px; padding-bottom:3px; background:#222; border-radius:5px;} .view_popup .btn_errg:before {position:absolute; top:50%; left:50%; width:24px; height:24px; margin-top:-13px; margin-left:-45px; border:2px solid #fff; border-radius:50%; content:"";} .view_popup .btn_errg span {position:relative; padding-left:31px; font-size:16px; font-weight:700; color:#fff;} .view_popup .btn_errg span:before , .view_popup .btn_errg span:after {position:absolute; left:16px; height:2px; margin-left:-9px; background:#fff; border-radius:20px; content:""; z-index:1;} .view_popup .btn_errg span:before {width:6px; top:12px; transform:rotate(42deg); transform-origin:left top;} .view_popup .btn_errg span:after {width:11px; top:9px; margin-left:-10px; transform:rotate(-42deg); transform-origin:right top;} .view_popup .pop_close {position:absolute; top: -25px; right: -25px; width:50px; height:50px; padding:10px; background:#222; border-radius:50%;} .view_popup .pop_close:before , .view_popup .pop_close:after {position:absolute; top:50%; left:50%; margin-left:-15px; width:30px; height:1px; background:#fff; -webkit-transform-origin:center; transform-origin:center; content:"";} .view_popup .pop_close:before { -webkit-transform:rotate(-45deg); transform:rotate(-45deg);} .view_popup .pop_close:after {-webkit-transform:rotate(45deg); transform:rotate(45deg);} @media (min-width: 1600px){ .cont_box .wrapper {padding:0 60px;} } /* 동영상 학습 */ .movie_learning.sub_wrap {position:absolute; top:0; left:0; height:100%; /*min-height:577px;*/ padding-top:65px;} .movie_learning .chapter_header {position:absolute; top:0; left:0;} .movie_learning .chapter_header .chapter_tit:before {width:34px; height:36px; margin-top:-18px; background-position:-2px -323px;} .movie_learning .chapter_header .util li:last-child {padding-right:27px; border-right:none;} .movie_learning .chapter_header .util li:last-child:after {display:none;} .movie_learning .chapter_header .util li .btn_list {width:21px; height:24px; } .movie_learning .chapter_header .util li .btn_list span {position:absolute; right:0; width:100%; height:2px; background:#00f3ff;} .movie_learning .chapter_header .util li .btn_list span:nth-child(1) {top:4px;} .movie_learning .chapter_header .util li .btn_list span:nth-child(2) {top:50%; right:auto; left:0;} .movie_learning .chapter_header .util li .btn_list span:nth-child(3) {bottom:2px;} .movie_learning header ~ .col_wrap {height:100%; padding-top:40px} .movie_learning .path_wrap {position:absolute; top:0; left:0; width:100%; height:40px; background:#000;} .movie_learning .path_wrap .path_list {padding:11px 25px; margin:0 -13px;} .movie_learning .path_wrap .path_list li {position:relative; display:inline-block; margin:0 13px;} .movie_learning .path_wrap .path_list li:before {position:absolute; top:50%; left:-16px; width:5px; height:5px; margin-top:-2px; border: 1px solid #ff9421; border-left: 0; border-bottom: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: "";} .movie_learning .path_wrap .path_list li:first-child:before {display:none;} .movie_learning .path_wrap .path_list li.not:before {border: 1px solid #333; border-left: 0; border-bottom: 0;} .movie_learning .path_wrap .path_list li span {position:relative; display:inline-block; margin-left:5px;} .movie_learning .path_wrap .path_list li span:first-child {margin-left:0;} .movie_learning .path_wrap .path_list li .ico_a {width:22px; height:18.5px;} .movie_learning .path_wrap .path_list li .ico_b {width:16px; height:18px;} .movie_learning .path_wrap .path_list li span:before {position:absolute; top:0; left:0; width:100%; height:100%; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; content:"";} .movie_learning .path_wrap .path_list li span.ico_a.type0:before {background-position:-198px -323px;} .movie_learning .path_wrap .path_list li span.ico_b.type0:before {background-position:-403px -323px;} .movie_learning .path_wrap .path_list li span.ico_a.type1:before {background-position:-52px -323px;} .movie_learning .path_wrap .path_list li span.ico_b.type1:before {background-position:-301px -323px;} .movie_learning .path_wrap .path_list li span.ico_a.type2:before {background-position:-146px -323px;} .movie_section {position:relative; height:100%;} .movie_section .movie_area {width:100%; height:100%; background:#333d3f;} .movie_section .mv_layers {display:block; position:absolute; top:0; right:0; bottom:0; left:0; z-index:5000;} .movie_section .mv_layers .mv_overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); -webkit-transition:opacity 0.5s; transition:opacity 0.5s; visibility:hidden; opacity:0; z-index:5;} .movie_section .mv_layers.on {display:block;} .movie_section .mv_layers.on .mv_overlay {visibility:visible; opacity:1;} .movie_section .mv_layers.on .control_area {visibility:visible; opacity:1;} .movie_section .mv_layers.on .btn_play_wrap {visibility:visible; opacity:1;} .movie_section .mv_layers .btn_play_wrap {position:absolute; top:50%; left:50%; height:64px; margin-top:-70px; -webkit-transform:translateX(-50%); transform:translateX(-50%); -webkit-transition:opacity 0.5s; transition:opacity 0.5s; visibility:hidden; opacity:0; z-index:9999;} .movie_section .mv_layers .btn_play_wrap button {position:relative; float:left; width:64px; height:100%; border-radius:50%; background:rgba(0,0,0,0.4);} .movie_section .mv_layers .btn_play_wrap .btn_play {margin:0 25px;} .movie_section .mv_layers .btn_play_wrap .btn_play:before {position:absolute; top:50%; left:50%; width:16px; height:23px; margin-top:-11px; margin-left:-7px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-position:-2px -374px; background-size:500px 1250px; content:"";} .movie_section .mv_layers .btn_play_wrap .btn_play.pause:before {background-position:-48px -374px;} .movie_section .mv_layers .btn_play_wrap .btn_backward:before {position:absolute; top:50%; left:50%; width:33px; height:29px; margin-top:-15px; margin-left:-18px; background:url(../img/sprite/sprite.png?v=06.29?v=02.23) no-repeat; background-position:-144px -733px;; background-size:500px 1250px; content:"";} .movie_section .mv_layers .btn_play_wrap .btn_forward:before {position:absolute; top:50%; left:50%; width:33px; height:29px; margin-top:-15px; margin-left:-14px; background:url(../img/sprite/sprite.png?v=06.29?v=02.23) no-repeat; background-position:-196px -733px; background-size:500px 1250px; content:"";} .movie_section .control_area {position:absolute; bottom:0; left:0; width:100%; height:auto; padding:0 25px; padding-bottom:18px; -webkit-transition:opacity 0.5s; transition:opacity 0.5s; visibility:hidden; opacity:0; z-index:9999;} .movie_section .control_area .control_wrap {height:30px;} .movie_section .control_area .seekbar_wrap {position:relative; width:100%; height:15px;} /*.movie_section .control_area .control_wrap > div {float:left; padding-top:14px; margin-left:20px;}*/ .movie_section .control_area .control_wrap:after {display:block; clear:both; content:"";} .movie_section .control_area .control_wrap .time_wrap {float:left; padding-left:2px; font-family:"Roboto"; font-size:13px; font-weight:700; line-height:30px; color:#fff;} .movie_section .control_area .control_wrap .time_wrap span {font-family:inherit; font-size:inherit;} .movie_section .control_area .control_wrap .time_wrap span.current_time {color:#00f3ff;} .movie_section .control_area .control_wrap .time_wrap span.total_time {color:#fff;} .movie_section .control_area .control_wrap .tool_wrap {float:right; height:100%;} .movie_section .control_area .control_wrap .tool_wrap:after {display:block; clear:both; content:"";} .movie_section .control_area .control_wrap .tool_wrap > div {position:relative; float:left; height:100%;} .movie_section .control_area .control_wrap .tool_wrap .btn_volume , .movie_section .control_area .control_wrap .tool_wrap .btn_zoom {text-indent:-9999px;} .movie_section .control_area .control_wrap .zoom_wrap .btn_zoom {position:absolute; top:50%; width:13px; height:12px; padding:0 10px; margin-top:-6px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-position:-144px -677px; background-size:500px 1250px;} .movie_section .control_area .control_wrap .zoom_wrap .btn_zoom.on {background-position:-196px -677px;} .movie_section .control_area .control_wrap .volume_wrap {position:relative; margin-left:38px;} .movie_section .control_area .control_wrap .volume_wrap .btn_volume {position:absolute; top:50%; width:16px; height:15px; margin-top:-7.5px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-position: -144px -704px; background-size:500px 1250px;} .movie_section .control_area .control_wrap .volume_wrap .btn_volume.mute {width:16px; height:15px; background-position: -196px -704px;} .movie_section .control_area .control_wrap .speed_wrap {position:relative; width:35px; height:100%; margin-left:35px; margin-right:5px; padding:0;} .movie_section .control_area .control_wrap .speed_wrap .btn_speed {display:block; position: relative; width:100%; margin-top:5px; font-family:"Roboto"; font-size:13px; color:#fff; text-align:left;} .movie_section .control_area .control_wrap .speed_wrap .btn_speed:after {position:absolute; width:6px; height:6px; border:2px solid #fff; top:50%; right:0; margin-top:-1px; -webkit-transform:rotate(135deg); transform:rotate(135deg); border-right: 0; border-top: 0; content: "";} .movie_section .control_area .control_wrap .speed_wrap .ctr {display:none; position:absolute; bottom:2px; right:-5px; width:110px; margin-left:-8px; background:rgba(0,0,0,0.6);} .movie_section .control_area .control_wrap .speed_wrap.on .ctr {display:block;} .movie_section .control_area .control_wrap .speed_wrap.on .btn_speed:after {margin-top:-4px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);} .movie_section .control_area .control_wrap .speed_wrap .speed_list {padding:14px 0;} .movie_section .control_area .control_wrap .speed_wrap .speed_list li span {position:relative; display:block; width:100%; margin:3px 0; padding:10px 0; font-family:"Roboto"; font-size:13px; line-height:1em; color:#fff; text-align:center; cursor:pointer;} .movie_section .control_area .control_wrap .speed_wrap .speed_list li.on span , .movie_section .control_area .control_wrap .speed_wrap .speed_list li span:hover {font-weight:700; color:#00f3ff;} .movie_section .control_area .control_wrap .speed_wrap .speed_list li.on span:before {position:absolute; width:11px; height:7px; border:2px solid #00f3ff; top:50%; right:20px; margin-top:-5px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); border-right: 0; border-top: 0; content: "";} .movie_section .control_area .seekbar_wrap .track {position:absolute; top:5px; left:0; width:100%; min-width:320px; height:4px; background:#fff; border-radius:10px; overflow:hidden;} .movie_section .control_area .seekbar_wrap .bar {position:relative; width:0%; height:100%; background:#00f3ff;} .movie_section .control_area .seekbar_wrap .pos_wrap {position:absolute; top:0; left:0; width:calc(100% - 15px); height:100%;} .movie_section .control_area .seekbar_wrap .spot , .movie_section .control_area .seekbar_wrap .spot:after {position:absolute; border-radius:50%; cursor:pointer; content:"";} .movie_section .control_area .seekbar_wrap .spot {top:50%; left:0; width:16px; height:16px; margin-top:-8px; background:#00f3ff;} .movie_section .control_area .seekbar_wrap .spot:after {top:50%; left:50%; width:7px; height:7px; background:#000; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);} /* 파일 에러 텍스트 */ .movie_section .no_data .txt_wrap {background-color:#000;} .movie_section .no_data .txt {font-size:18px; color:#D2D2D2;} /*.movie_section.mv_error .no_data .txt:before {display:none;}*/ /* 동영상 학습목록 팝업 */ .movie_popup {display:none; position:fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;} .movie_popup .popup_back {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background:rgba(0,0,0,0.6); z-index:9999;} .movie_popup .popup_content {position: fixed; top:50%; left: 50%; width: 650px; margin-top:0; margin-left:-12px; min-height:100px; height:450px; background-size: cover; z-index: 9999; text-align: center; padding:0; margin-top:-225px; margin-left:-325px; -webkit-transform:none; transform:none; } .movie_popup .inner_pop {position: relative; margin: 0 auto; width: 100%; height:100%; border-radius:10px; box-shadow:0 0 8px 2px rgb(0 0 0 / 10%); background: #fff;} .movie_popup .pop_cont {width:100%; height:100%; padding:20px 22px 20px 27px; overflow:hidden;} .movie_popup .pop_learning {height:410px; font-size:0; padding:0 10px; overflow:hidden; overflow-y:auto;} .movie_popup .pop_learning li {position:relative; width:100%; padding:18px 0; border-bottom:2px dashed #d7d7d7; text-align:left;} .movie_popup .pop_learning li:after {display:block; clear:both; content:"";} .movie_popup .pop_learning li .tit {padding-right:210px; font-size:20px; font-weight:700; line-height:1.45em; color:#222; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .movie_popup .pop_learning li .tit span {display:block; font-size:14px; font-weight:400; line-height:1.75em; color:#999;} .movie_popup .pop_learning li .btn_wrap {position:absolute; top:50%; right:0; margin-top:-23px;} .movie_popup .pop_learning li .btn_wrap button {position:relative; display:inline-block; width:47px; height:47px; margin-right:15px; background:#d8d8d8; border-radius:5px; vertical-align:middle;} .movie_popup .pop_learning li .btn_wrap button:last-child {margin-right:30px;} .movie_popup .pop_learning li .btn_wrap button.type0 {background:#d8d8d8;} .movie_popup .pop_learning li .btn_wrap button.type1 {background:#ff9524;} .movie_popup .pop_learning li .btn_wrap button.type2 {background:#fff; border:2px solid #03a8b0;} .movie_popup .pop_learning li .btn_wrap button:before {position:absolute; top:50%; left:50%; width:100%; height:100%; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); content:"";} .movie_popup .pop_learning li .btn_wrap .btn_a:before {width:22px; height:18px; background-position:-98px -323px;} .movie_popup .pop_learning li .btn_wrap .btn_b:before {width:16px; height:18px; background-position:-352px -323px;} .movie_popup .pop_learning li .btn_wrap .btn_a.type2:before {background-position:-249px -323px;} .movie_popup .pop_learning li .btn_wrap .btn_b.type2:before {background-position:-455px -349px;} .movie_popup .pop_close {position:absolute; top: -25px; right: -25px; width:50px; height:50px; padding:10px; background:#222; border-radius:50%;} .movie_popup .pop_close:before , .movie_popup .pop_close:after {position:absolute; top:50%; left:50%; margin-left:-15px; width:30px; height:1px; background:#fff; -webkit-transform-origin:center; transform-origin:center; content:"";} .movie_popup .pop_close:before { -webkit-transform:rotate(-45deg); transform:rotate(-45deg);} .movie_popup .pop_close:after {-webkit-transform:rotate(45deg); transform:rotate(45deg);} /* 성적통계 1 */ .statistic1 .search_bar .month_list {width:calc(90% - 70px);} .statistic1 .course_list {width:100%; height:100%; padding-top:25px;} .statistic1 .course_list:after {display:block; clear:both; content:"";} .statistic1 .course_list .card_wrap {float:left; width:calc(25% - 15px); height:315px; margin:0 7.5px; margin-bottom:22px;} .statistic1 .course_list .card_wrap a {display:block; width:100%; height:100%; z-index:9999;} .statistic1 .course_list .card_head {position:relative; height:36px; padding-left:20px; background:#00a7af; border-top-right-radius:10px; border-top-left-radius:10px; line-height:35px; font-size:15px; color:#fff;} .statistic1 .course_list .card_head:after {position:absolute; bottom:0; left:0; width:100%; height:3px; background:rgba(0,0,0,0.1); content:"";} .statistic1 .course_list .card_body , .statistic1 .course_list .card_foot {background:#f3f3f3; border-right:1px solid #d8d8d8; border-left:1px solid #d8d8d8; border-bottom:2px solid #d8d8d8;} .statistic1 .course_list .card_body {position:relative; display:table; width:100%; height:calc(56% - 33px); padding:0 18px; border-bottom-right-radius:10px; border-bottom-left-radius:10px;} .statistic1 .course_list .card_tit {position:relative; display:table-cell; padding:10px 0; text-align:center; vertical-align:middle;} .statistic1 .course_list .card_tit .sep {font-size:16px;line-height:1em; color:rgba(0,0,0,0.3);} .statistic1 .course_list .card_tit .tit {height:56px; margin-top:8px; font-size:22px; line-height:1.3em; color:#222; word-break:normal; -ms-text-overflow:ellipsis; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; word-break:normal; overflow:hidden;} .statistic1 .course_list .card_foot {padding-top:15px; margin-top:-2px; position:relative; width:100%; height:44%; border-radius:15px;} .statistic1 .course_list .card_foot:after {position:absolute; top:0; left:50%; width:82%; height:2px; -webkit-transform:translateX(-50%); transform:translateX(-50%); border-bottom: 2px dashed #d8d8d8; content:"";} .statistic1 .course_list .card_foot .progress_list {width:86%; margin:0 auto;} .statistic1 .course_list .card_foot .progress_list li {margin-bottom:15px;} .statistic1 .course_list .card_foot .progress_list .tit {margin-left:5px; font-size:15px; color:#222;} .statistic1 .course_list .card_foot .progress_list .num {float:right; margin-right:5px; font-family:"Roboto"; font-size:16px; color:#222; font-weight:700;} .statistic1 .course_list .card_foot .progress_list .num:after {content: "%";} .statistic1 .course_list .card_foot .progress_list .track {width:100%; height:9px; margin:3px 0; background:#dedede; border-radius:10px; overflow:hidden;} .statistic1 .course_list .card_foot .progress_list li .bar {width:0%; height:100%; border-radius:10px;} .statistic1 .course_list .card_foot .progress_list .achv_level .bar {background:#10b7bf;} .statistic1 .course_list .card_foot .progress_list .com_level .bar {background:#8cd015;} .statistic1 .course_list .report .card_foot:before {position:absolute; top:50%; left:50%; margin-top:-33px; margin-left:-34px; width: 55px; height: 67px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-2px -625px; background-size: 500px 1250px; content:"";} @media (min-width: 1281px) { .statistic1 .course_list {padding-top:30px;} .statistic1 .course_list .card_wrap {height:335px; margin-bottom:30px;} .statistic1 .course_list .card_tit {padding:20px 0 25px;} .statistic1 .course_list .card_foot {padding-top:25px;} } @media (min-width : 1440px) { .statistic1 .course_list .card_wrap {height:360px;} } @media (min-width : 1600px) { /*.statistic1 .sub_content section .center_wrap {padding:0 50px;}*/ .statistic1 .course_list {margin-right:0;} .statistic1 .course_list .card_wrap {width:calc(20% - 15px);} .statistic1 .course_list .card_head {height:41px; line-height:40px;} .statistic1 .course_list .card_body {height:calc(56% - 39px);} .statistic1 .course_list .card_foot {padding-top:30px;} .statistic1 .course_list .card_foot:after {width:88%;} .statistic1 .course_list .card_foot .progress_list li {margin-bottom:25px;} } @media (min-width : 1680px) { .statistic1 .course_list .card_wrap {height:390px;} } /* 성적통계 2 */ .statistic2 .sub_content {padding-top:115px;} .statistic2 .sub_content section {padding:30px 0 45px; background:#fff;} .statistic2 .sub_content section .center_wrap {padding:0 111px; justify-content:flex-start;} /*tit_box*/ .statistic2 .tit_box {position:relative; margin-bottom:13px;} .statistic2 .tit_box .tit {float:left; width:100%; padding-right:270px; font-size:22px; line-height:34px; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .statistic2 .tit_box .label {display:block; position:absolute; top:0; right:105px; width:156px; height:34px; padding:0 15px; background:#00a7af; border-radius:20px; font-size:15px; line-height:34px; font-weight:700; color:#fff;} .statistic2 .tit_box .label span {float:right; display:inline-block; margin-left:25px; font-family:"Roboto"; font-size:17px; font-weight:400; color:#006b70;} .statistic2 .tit_box .label em {font-family:inherit; font-size:17px; font-weight:700; color:#fff;} /*cont_box*/ .statistic2 .sub_content section .cont_box {flex-wrap:nowrap;} .statistic2 .cont_box .col_mod {height:225px; max-height:225px;} .statistic2 .cont_box .col_mod:nth-child(1) {width:calc(100% - 100px); margin-right:4px;} .statistic2 .cont_box .col_mod:last-child {width:100px; min-height:auto;} .statistic2 .achv_list {width:100%; height:100%;} .statistic2 .achv_list:after {display:block; clear:both; content:"";} .statistic2 .achv_list .achv_mod {float:left; width:calc(50% - 2px); height:100%; padding:23px 40px; background:#f3f3f3; border-radius:10px;} .statistic2 .achv_list .achv_mod:first-child {margin-right:4px;} .statistic2 .achv_list .progress_list {width:100%; margin:0 auto;} .statistic2 .achv_list .progress_list li {margin-bottom:13px;} .statistic2 .achv_list .progress_list li:last-child {margin-bottom:0;} .statistic2 .achv_list .progress_list .tit {margin-left:5px; font-size:17px; color:#666;} .statistic2 .achv_list .progress_list .num {float:right; margin-right:5px; font-family:"Roboto"; font-size:16px; color:#666;} .statistic2 .achv_list .progress_list .num:after {content: "%";} .statistic2 .achv_list .progress_list .track {width:100%; height:14px; margin:3px 0; background:#dedede; border-radius:10px; overflow:hidden;} .statistic2 .achv_list .progress_list li .bar {width:0%; height:100%; border-radius:10px;} .statistic2 .achv_list .progress_list li.my_box .tit , .statistic2 .achv_list .progress_list li.my_box .num {font-weight:700; color:#00a7af;} .statistic2 .achv_list .progress_list li.my_box .bar {background:#0097ed; background:-moz-linear-gradient(45deg, #09ebb5, #0097ed); background:-webkit-linear-gradient(45deg, #09ebb5, #0097ed); background:linear-gradient(45deg, #09ebb5, #0097ed);} .statistic2 .achv_list .progress_list li.campus_box .bar {background:#00629d;} .statistic2 .achv_list .progress_list li.area_box .bar {background:#ba2386;} /*btn*/ .statistic2 .btn_wrap {position:relative;} .statistic2 .btn_view {position:absolute; top:50%; right:0; width:73px; height:73px; transform:translateY(-50%); background:#222; border-radius:50%;} .statistic2 .btn_view:before, .statistic2 .btn_view:after {position:absolute; top:50%; left:50%; width:30px; height:2px; margin-top:-1px; background:#fff; -webkit-transform:translateX(-53%); transform:translateX(-53%); -webkit-transition:all 0.5s; transition:all 0.5s; content:"";} .statistic2 .btn_view:after {width:18px; height:18px; margin-left:-10px; margin-top:-15px; border:2px solid #fff; border-top:0; border-right:0; background:none; -webkit-transform:rotate(-135deg) translateX(-50%); transform:rotate(-135deg) translateX(-50%);} @media (min-width: 1280px) and (max-height : 620px) and (orientation : landscape) { .statistic2 .sub_content section {padding:20px 0;} .statistic2 .tit_box {margin-bottom:15px;} } @media (min-width: 1281px) { .statistic2 .cont_box .col_mod {height:246px; max-height:246px;} .statistic2 .achv_list .achv_mod {padding:32px 40px 35px;} .statistic2 .achv_list .progress_list li {margin-bottom:16px;} } @media (min-width: 1600px) and (min-height : 720px) and (orientation : landscape) { .statistic2 .sub_content {padding-top:144px;} .statistic2 .sub_content section {padding:50px 0 40px;} .statistic2 .tit_box {margin-bottom:25px;} } @media (min-width : 1600px) and (min-height : 840px) and (orientation : landscape) { .statistic2 .sub_content section .center_wrap {padding:0 160px; justify-content:flex-start;} .statistic2 .sub_content section .cont_box {flex-wrap:wrap; height:auto;} .statistic2 .tit_box .label {right:2px;} .statistic2 .cont_box .col_mod {height:300px; max-height:300px;} .statistic2 .cont_box .col_mod:nth-child(1) {width:100%; margin-right:0;} .statistic2 .cont_box .col_mod:nth-child(2) {width:56%;} .statistic2 .cont_box .col_mod:last-child {width:170px; height:42px; margin-top:30px;} .statistic2 .achv_list .achv_mod {padding:45px 50px; width:calc(50% - 5px);} .statistic2 .achv_list .achv_mod:first-child {margin-right:10px;} .statistic2 .achv_list .progress_list li {margin-bottom:28px;} .statistic2 .btn_view {width:170px; height:42px; border-radius:20px;} .statistic2 .btn_view:before, .statistic2 .btn_view:after {width:25px;} .statistic2 .btn_view:after {width:15px; height:15px; margin-top:-13px;} } @media (min-width : 1680px) and (min-height : 908px) and (orientation : landscape) { .statistic2 .cont_box .col_mod {height:340px; max-height:340px;} .statistic2 .achv_list .achv_mod {padding:50px;} .statistic2 .achv_list .progress_list li {margin-bottom:40px;} } /* 성적통계 3 */ .statistic3 .sub_content section .cont_box {width:100%;} .statistic3 .sc_wrapper {width:880px; height:100%; padding:30px 0;} .statistic3 .sub_tit .guide li:nth-child(1):before {background:#00a7af;} .statistic3 .sub_tit .guide li:nth-child(2):before {background:#ffb100;} .statistic3 .sub_tit .guide li:nth-child(3):before {background:#fa3a11;} .statistic3 .sub_content.toggle {padding-top:0;} .statistic3 .sub_content.toggle .top_bar {display:none;} .statistic3 .sub_content.toggle .top_bar ~ section {border-top:1px solid #222;} .statistic3 .sub_content.toggle.open {padding-top:178px;} .statistic3 .sub_content.toggle.open .top_bar {display:block; top:0;} .statistic3 .sub_content.toggle.open .btn_sc_slide {top:0;} .statistic3 .sub_content.toggle.open .btn_sc_slide span:after {top:25%; -webkit-transform:translateX(-50%) rotate(135deg); transform:translateX(-50%) rotate(135deg);} /* 슬라이드*/ .statistic3 .top_bar {padding:0 60px;} .statistic_slide {position:relative; padding:0 42px;} .statistic_slide .swiper-container {height:178px;} .statistic_slide .swiper-slide {height:auto;} .statistic_slide .slide_wrap {display:flex; width: 100%; height: 100%; text-align:center; align-items:center;} .statistic_slide .slide_wrap:after {display:block; clear:both; content:"";} .statistic_slide .slide_wrap > li {position:relative; float:left; padding:0 2px; /*margin:0 8px;*/ } .statistic_slide .slide_wrap > li a {position:relative; display:block; width:100%; height:125px; padding:10px 0; background:#fff; border-radius:5px; box-shadow:0px 0px 2px 1px rgb(0 0 0 / 10%); overflow:hidden;} .statistic_slide .slide_wrap .mod {width:100%; height:100%; padding:0 10px;} .statistic_slide .slide_wrap .mod .unit {font-size:16px; line-height:1em; font-weight:700; color:#222;} .statistic_slide .tab_on a {border:1px solid #222; box-shadow:none; font-weight:400;} .statistic_slide .ctr button {position:absolute; top:50%; z-index:1; width:17px; height:32px; text-indent:-9999px;-webkit-transform:translateY(-50%); transform:translateY(-50%);-webkit-transition:all 0.5s;transition:all 0.5s;} .statistic_slide .ctr button:before {content:""; position:absolute; width:22px; height:22px; border:2px solid rgba(0,0,0,0.15); top:5px; -webkit-transform:rotate(45deg); transform:rotate(45deg);} .statistic_slide .ctr .prev {left:0;} .statistic_slide .ctr .prev:before {left:0; border-right:0; border-top:0; margin-left:5px;} .statistic_slide .ctr .next {right:0;} .statistic_slide .ctr .next:before {right:0; border-left:0; border-bottom:0; margin-right:5px;} /* 막대 그래프 */ .statistic3 .chart_wrap {width:100%; margin-top:15px;} .statistic3 .bar_list:after {display:block; clear:both; content:"";} .statistic3 .bar_list li {float:left; width:calc(33.333% - 10px); margin:0 5px;} .statistic3 .progress_wrap {width:50px; margin:0 auto;} .statistic3 .progress_wrap:after {display:block; clear:both; content:"";} .statistic3 .progress_wrap .bar_mod {float:left; width:25px;} .statistic3 .bar_mod .track {position:relative; width:100%; height:60px; overflow:hidden;} .statistic3 .bar_mod .track .bar {position:absolute; top:100%; left:0; width:100%; height:100%; border-top-right-radius:20px; border-top-left-radius:20px; background:#fff;} .statistic3 .bar_mod .track.zero:after {position:absolute; bottom:0; left:50%; margin-left:-3px; width:6px; height:0.5px; background:#d4d4d4; content:"";} .statistic3 .bar_mod .value_txt {margin-top:4px;} .statistic3 .bar_mod .value_txt .num {font-family:"Roboto"; font-size:10px; line-height:1em; color:#666;} .statistic3 .chart1 .first .bar {background:#00a7af;} .statistic3 .chart1 .second .bar {background:#9af0f5;} .statistic3 .chart2 .first .bar {background:#ffb100;} .statistic3 .chart2 .second .bar {background:#ffdd94;} .statistic3 .chart3 .first .bar {background:#fa3a11;} .statistic3 .chart3 .second .bar {background:#ffbfb1;} .statistic3 .chart1 .first .value_txt .num {color:#00a7af;} .statistic3 .chart2 .first .value_txt .num {color:#ff9c00;} .statistic3 .chart3 .first .value_txt .num {color:#fa3a11;} /*tit_box*/ .statistic3 .tit_box {position:relative; margin-bottom:13px;} .statistic3 .tit_box:before {display:block; clear:both; content:"";} .statistic3 .tit_box .tit {width:100%; padding-right:270px; font-size:22px; line-height:34px; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .statistic3 .tit_box .label {display:block; position:absolute; top:0; right:0; width:180px; height:34px; padding:0 15px; background:#00a7af; border-radius:20px; font-size:15px; line-height:34px; font-weight:700; color:#fff;} .statistic3 .tit_box .label span {float:right; display:inline-block; margin-left:25px; font-family:"Roboto"; font-size:17px; font-weight:400; color:#006b70;} .statistic3 .tit_box .label em {font-family:inherit; font-size:17px; font-weight:700; color:#fff;} .statistic3 .result_board {position:relative; width:100%; height:100%; margin:0 auto; padding-bottom:45px; background:#fff; border-radius:10px; text-align:center; overflow:initial;} .statistic3 .result_board table {margin-left:0;} .statistic3 .result_board table thead {border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden;} .statistic3 .result_board table tbody {position:relative; margin:0 auto; height:calc(100% - 59px);} .statistic3 .result_board th {background:#f3f3f3; color:#666;} .statistic3 .result_board th, .statistic3 .result_board td {position:relative; padding:5px 0;} .statistic3 .result_board td {position:relative; border-left:none; font-size:15px; color:#666; padding-top:15px; padding-bottom:15px;} .statistic3 .result_board td:nth-child(1) {font-weight:400; color:#222; text-align:left;} .statistic3 .result_board td em {font-size:inherit; font-weight:700; color:#00a7af;} .statistic3 .result_board th:nth-child(1), .statistic3 .result_board td:nth-child(1) {width:44%; padding-left:30px;} .statistic3 .result_board th:nth-child(2), .statistic3 .result_board td:nth-child(2) {width:96px; min-width:96px;} .statistic3 .result_board th:nth-child(3), .statistic3 .result_board td:nth-child(3) {width:73px; min-width:73px; padding:0 5px 0 15px;} .statistic3 .result_board th:nth-child(4), .statistic3 .result_board td:nth-child(4) {width:70px; min-width:70px;} .statistic3 .result_board th:nth-child(5), .statistic3 .result_board td:nth-child(5) {width:63px; min-width:63px; padding-right:20px;} .statistic3 .result_board th:nth-child(6), .statistic3 .result_board td:nth-child(6) {width:73px; min-width:73px; padding:0 5px 0 15px;} .statistic3 .result_board th:nth-child(7), .statistic3 .result_board td:nth-child(7) {width:70px; min-width:70px;} .statistic3 .result_board th:nth-child(8), .statistic3 .result_board td:nth-child(8) {width:69px; min-width:69px; padding-right:30px;} .statistic3 .result_board th.scrollwd {width:75px; min-width:75px;} .statistic3 .result_board th:nth-child(4):before , .statistic3 .result_board th:nth-child(5):before , .statistic3 .result_board th:nth-child(7):before , .statistic3 .result_board th:nth-child(8):before {position:absolute; top:50%; width:1px; height:13px; margin-top:-6px; background:#c2c2c2; content:"";} .statistic3 .result_board th:nth-child(4):before,.statistic3 .result_board th:nth-child(7):before {left:3px;} .statistic3 .result_board th:nth-child(5):before,.statistic3 .result_board th:nth-child(8):before {left:-4px;} .statistic3 .btn_sc_slide {position:absolute; top:0; left:50%; width:60px; height:30px; margin-left:-30px; background:#222; border-radius:0 0 60px 60px; content:""; overflow:hidden; z-index:999;} .statistic3 .btn_sc_slide span {display:block; position: absolute; width:100%; height: 100%; text-indent: -9999px; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.5s; transition: all 0.5s; background:#222;} .statistic3 .btn_sc_slide span:before {position:absolute; top:0; left:0; width:50%; height:100%; background:rgba(255,255,255,0.2); opacity:0.5; content:"";} .statistic3 .btn_sc_slide span:after {position:absolute; width:18px; height:18px; border:2px solid #fff; top:-5%; left:50%; -webkit-transform:translateX(-50%) rotate(-45deg); transform:translateX(-50%) rotate(-45deg); border-right: 0; border-top: 0; content: "";} @media (min-width: 1280px) and (min-height : 620px) and (orientation : landscape) { } @media (min-width: 1600px){ .statistic3 .sc_wrapper {width:1080px; padding:45px 0;} .statistic_slide .slide_wrap .mod {padding:0 30px;} .statistic3 .bar_mod .value_txt .num {font-size:11px;} .statistic3 .result_board th:nth-child(1), .statistic3 .result_board td:nth-child(1) {width:44%; padding-left:30px;} .statistic3 .result_board th:nth-child(2), .statistic3 .result_board td:nth-child(2) {width:118px; min-width:118px;} .statistic3 .result_board th:nth-child(3), .statistic3 .result_board td:nth-child(3) {width:91px; min-width:91px;} .statistic3 .result_board th:nth-child(4), .statistic3 .result_board td:nth-child(4) {width:86px; min-width:86px;} .statistic3 .result_board th:nth-child(5), .statistic3 .result_board td:nth-child(5) {width:80px; min-width:80px;} .statistic3 .result_board th:nth-child(6), .statistic3 .result_board td:nth-child(6) {width:91px; min-width:91px;} .statistic3 .result_board th:nth-child(7), .statistic3 .result_board td:nth-child(7) {width:86px; min-width:86px;} .statistic3 .result_board th:nth-child(8), .statistic3 .result_board td:nth-child(8) {width:81px; min-width:81px;} .statistic3 .result_board th.scrollwd {width:87px; min-width:87px;} } /* 영상학습1 */ .movie_study1 .sub_content section {padding:0 0 45px;} .movie_study1 .sub_content section .center_wrap {padding:0 35px;} .movie_study1 .subject_list {width:100%;} .movie_study1 .subject_list:after {display:block; clear:both; content:"";} .movie_study1 .subject_list .card_wrap {float:left; width:calc(25% - 7.5px); margin-left:10px; background:#ddd; border-radius:10px; text-align:center;} .movie_study1 .subject_list .subject_a {margin-left:0; background:#00a7af;} .movie_study1 .subject_list .subject_b {background:#005488;} .movie_study1 .subject_list .subject_c {background:#ffb401;} .movie_study1 .subject_list .subject_d {background:#126c1a;} .movie_study1 .subject_list .card_wrap .card_head {position:relative; height:63px;} .movie_study1 .subject_list .card_wrap .card_head:before {position:absolute; bottom:1px; left:50%; width:90%; height:2px; margin:0 auto; background:rgba(0,0,0,0.1); -webkit-transform:translateX(-50%); transform:translateX(-50%); content:"";} .movie_study1 .subject_list .card_wrap .card_head:after {position:absolute; bottom:0; left:50%; width:90%; height:1px; margin:0 auto; background:rgba(255,255,255,0.1); -webkit-transform:translateX(-50%); transform:translateX(-50%); content:"";} .movie_study1 .subject_list .card_wrap .card_head .tit {font-size:22px; font-weight:700; line-height:63px; color:#fff;} .movie_study1 .subject_list .card_wrap .card_body {position:relative;} .movie_study1 .subject_list .card_wrap .card_body .bg_subject {position:absolute; top:50%; left:50%; display:block; width:58.675%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);} .movie_study1 .subject_list .subject_b .card_body .bg_subject {width:58.676%;} .movie_study1 .subject_list .card_wrap .card_body .bg_subject:before {position:absolute; top:50%; left:0; width:100%; height:0; padding-top:113.82%; margin-top:-50px; background:url(../img/bg/illust_01.png) no-repeat; background-size:contain; background-position:center; -webkit-transform: translateY(-50%); transform: translateY(-50%); content:"";} .movie_study1 .subject_list .subject_a .card_body .bg_subject:before {margin-top:-49px; background:url(../img/bg/illust_01.png) no-repeat; background-size:contain;} .movie_study1 .subject_list .subject_b .card_body .bg_subject:before {margin-top:-53px; background:url(../img/bg/illust_02.png) no-repeat; background-size:contain;} .movie_study1 .subject_list .subject_c .card_body .bg_subject:before {margin-top:-50px; background:url(../img/bg/illust_03.png) no-repeat; background-size:contain;} .movie_study1 .subject_list .subject_d .card_body .bg_subject:before {margin-top:-50px; background:url(../img/bg/illust_04.png) no-repeat; background-size:contain;} .movie_study1 .school_list {position:relative; width:100%; height:0; padding-top:115%; background-size:cover; background-position:center;} .movie_study1 .school_list ul {position:absolute; right:0; bottom:20px; left:0; width:92%; min-height:102px; margin:0 auto; font-size:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;} .movie_study1 .school_list ul li {display:inline-block; width:calc(33.333% - 10px); height:46px; margin:5px;} .movie_study1 .school_list ul li a {display:block; width:100%; border-radius:50px; background:rgba(0,0,0,0.1); font-size:18px; line-height:46px; color:#fff;} .movie_study1 .school_list ul li.s91 a {color:#fdff6e;} .movie_study1 .school_list ul li.s92 a {color:#72ffe6;} .movie_study1 .school_list ul li.s93 a {color:#fff;} .movie_study1 .school_list ul li.s_small a {font-size:14px;} .movie_study1 .school_list ul li.disabled {opacity:0.4;} .movie_study1 .school_list ul li.disabled a {color:#000; pointer-events:none;} .grade_popup {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;} .grade_popup .popup_content {width:575px; height:484px;} .grade_popup .tit_box {padding-bottom:15px; border-bottom:2px solid #222; text-align:center;} .grade_popup .tit_box .tit {display:inline-block; font-size:22px; font-weight:700; line-height:40px; color:#222;} .grade_popup .tit_box .tit span {font-weight:400; color:inherit; vertical-align:baseline;} .grade_popup .cont_box {margin-top:20px; overflow-y:auto;} .grade_popup .cont_box .section_list {width:100%; height:327px; padding: 0 7px; font-size:0; text-align:left;} .grade_popup .cont_box .section_list li {display:inline-block; width:calc(50% - 10px); height:64px; margin-right:20px; margin-bottom:20px;} .grade_popup .cont_box .section_list li:nth-child(even) {margin-right:0;} .grade_popup .cont_box .section_list li:nth-last-child(1) , .grade_popup .cont_box .section_list li:nth-last-child(2) {margin-bottom:0;} .grade_popup .cont_box .section_list li a {display:block; width:100%; height:64px; padding:0 10px; background:#f3f3f3; border-radius:7px; font-size:18px; line-height:64px; color:#222; text-align:center; overflow:hidden;} .grade_popup .cont_box .section_list li.on a {background:#ffb401; font-weight:700; color:#fff;} @media (min-width: 1280px) and (min-height : 620px) and (orientation : landscape) { .movie_study1 .school_list {padding-top:125%;} .movie_study1 .school_list ul {bottom:25px;} } @media (min-width: 1600px) { .movie_study1 .sub_content section .center_wrap {padding:0 50px;} } /* 영상학습2 */ .movie_study2 .sub_content section {padding:0;} .movie_study2 .sub_content section .center_wrap {padding:0 35px;} .movie_study2 .subject_list {position:relative; width:25%; height:100%; min-width:293px;} .movie_study2 .subject_list .swiper-container {width:100%; height:100%;} .movie_study2 .subject_list .slide_wrap {width:100%; height:100%;} .movie_study2 .subject_list .card_wrap {position:relative; width:100%; height:0; padding-bottom:135.7%;} .movie_study2 .subject_list .card_wrap .wrapper {position:absolute; top:0; right:0; bottom:0; left:0; width:100%; padding:25px 20px; background:#f3f3f3; border-radius:10px;} .movie_study2 .subject_list .card_wrap .subject_a {background:#00a7af;} .movie_study2 .subject_list .card_wrap .subject_b {background:#005488;} .movie_study2 .subject_list .card_wrap .subject_c {background:#ffb401;} .movie_study2 .subject_list .card_wrap .subject_d {background:#126c1a;} .movie_study2 .subject_list .card_wrap h3 {padding:0 20px; margin-bottom:17px; font-size:22px; font-weight:700; line-height:1em; color:#fff; text-align:center;} .movie_study2 .subject_list .card_wrap .img_wrap {position:relative; width:50%; height:0; padding-bottom:50%; margin:0 auto;} .movie_study2 .subject_list .card_wrap .bg_img {position:absolute; top:0; right:0; bottom:0; left:0;} .movie_study2 .subject_list .card_wrap .bg_img:before {display:block; position:relative; width:100%; height:0; padding-top:100%; background-size:cover; background-position:center; content:"";} .movie_study2 .subject_list .card_wrap .subject_a .bg_img:before {background:url(../img/bg/illust_sub_01.png) no-repeat; background-size:cover;} .movie_study2 .subject_list .card_wrap .subject_b .bg_img:before {background:url(../img/bg/illust_sub_02.png) no-repeat; background-size:cover;} .movie_study2 .subject_list .card_wrap .subject_c .bg_img:before {background:url(../img/bg/illust_sub_03.png) no-repeat; background-size:cover;} .movie_study2 .subject_list .card_wrap .subject_d .bg_img:before {background:url(../img/bg/illust_sub_04.png) no-repeat; background-size:cover;} .movie_study2 .subject_list .card_wrap .search_wrap {margin-top:22px;} .movie_study2 .subject_list .card_wrap .select_form {position:relative; float:left; width:calc(50% - 5px); margin-right:10px; margin-bottom:15px;} .movie_study2 .subject_list .card_wrap .select_form:nth-child(even) {margin:0;} .movie_study2 .subject_list .card_wrap .select_form button {height:40px; padding:0 15px; background:#fff; overflow:hidden;} .movie_study2 .subject_list .card_wrap .subject_a .select_form button:after {border-top:7px solid #00a7af;} .movie_study2 .subject_list .card_wrap .subject_b .select_form button:after {border-top:7px solid #005488;} .movie_study2 .subject_list .card_wrap .subject_c .select_form button:after {border-top:7px solid #ffb401;} .movie_study2 .subject_list .card_wrap .subject_d .select_form button:after {border-top:7px solid #126c1a;} .movie_study2 .subject_list .card_wrap .select_form button span {font-size:15px; color:#222;} .movie_study2 .subject_list .card_wrap .select_form button.on + ul {position:absolute; top:40px; left:0; width:100%; max-height:147px; overflow-y:auto;} .movie_study2 .subject_list .card_wrap .select_form:nth-child(3) button.on + ul , .movie_study2 .subject_list .card_wrap .select_form:nth-child(4) button.on + ul {top:auto; bottom:45px;} .movie_study2 .subject_list .card_wrap .btn_search {width:100%; height:40px; background:rgba(0,0,0,0.25); border-radius:50px; } .movie_study2 .subject_list .card_wrap .btn_search span {position:relative; padding-left:25px; font-size:17px; font-weight:700; color:#fff;} .movie_study2 .subject_list .card_wrap .btn_search span:before {position:absolute; top:50%; left:0; width:18px; height:20px; margin-top:-10px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-199px -411px; background-size:500px 1250px; content:"";} .movie_study2 .subject_list .ctr button {position:absolute; top:25%; z-index:1; width:36px; height:55px; text-indent:-9999px;} .movie_study2 .subject_list .ctr button:before {content:""; position:absolute; width:40px; height:40px; border:3px solid rgba(0,0,0,0.15); top:7px; -webkit-transform:rotate(45deg); transform:rotate(45deg);} .movie_study2 .subject_list .ctr .prev {left:28px;} .movie_study2 .subject_list .ctr .prev:before {left:5px; border-right:0; border-top:0; margin-left:5px;} .movie_study2 .subject_list .ctr .next {right:28px;} .movie_study2 .subject_list .ctr .next:before {right:5px; border-left:0; border-bottom:0; margin-right:5px;} .movie_study2 .accordion {position:relative; width:76%; margin-left:30px; margin-bottom:35px; overflow:hidden;} .movie_study2 .accordion .accrd_list {height:100%; padding:0 3px; overflow-y:auto;} .movie_study2 .accordion .accrd_list > li {border-top:1px solid #222;} .movie_study2 .accordion .accrd_list > li:last-child {border-bottom:1px solid #222;} .movie_study2 .accordion .accrd_list > li h4 a {display:block; position:relative; padding:22px 70px 22px 25px; background:#f3f3f3; font-size:18px; font-weight:900; color:#222; cursor:pointer; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .movie_study2 .accordion .accrd_list > li h4 a:after {position: absolute; top: 50%; right:3%; width:20px; height:20px; margin-top: -16px; margin-right:6px; border-top:3px solid #222; border-left:3px solid #222; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); content: "";} .movie_study2 .accordion .accrd_list > li.on h4 a:after {margin-top: -4px; -webkit-transform: rotate(45deg); transform: rotate(45deg);} .movie_study2 .accordion .accrd_list .sect_list {display:none; width:100%; background:#fff;} .movie_study2 .accordion .accrd_list > li .sect_list li a {display:block; padding:16px 40px; border-top:2px dashed #d7d7d7;} .movie_study2 .accordion .accrd_list > li .sect_list li p {position:relative; padding-left:30px; font-size:16px; color:#222;} .movie_study2 .accordion .accrd_list > li .sect_list li p:before {position:absolute; top:5px; left:0; width:21px; height:18px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-198px -323px; background-size:500px 1250px; content:"";} @media (min-width: 1334px) { .movie_study2 .subject_list .card_wrap .wrapper {padding:34px 20px; padding:11.3% 20px;} .movie_study2 .subject_list .card_wrap {padding-bottom:144.506%;} .movie_study2 .subject_list .card_wrap h3 {margin-bottom:22px; margin-bottom:8.3%; } .movie_study2 .subject_list .card_wrap .search_wrap {margin-top:35px; margin-top:13.5%; width:calc(100% - 40px); width:100%; bottom:35px;} .movie_study2 .subject_list .card_wrap .select_form {margin-bottom:20px;} .movie_study2 .subject_list .ctr button {top:26%;} } @media (min-width: 1440px) { .movie_study2 .subject_list .card_wrap h3 {margin-bottom:10%;} .movie_study2 .subject_list .card_wrap .search_wrap {margin-top:14%;} } @media (min-width: 1440px) and (max-height : 620px) and (orientation : landscape) { .movie_study2.sub_wrap {min-height:554px;} } @media (min-width: 1600px) { .movie_study2 .sub_content section .center_wrap {padding:0 50px;} .movie_study2 .subject_list .card_wrap .wrapper {padding:34px 20px; padding:11% 25px;} .movie_study2 .subject_list .card_wrap h3 {margin-bottom:12%;} .movie_study2 .subject_list .card_wrap .search_wrap {margin-top:14%;} .movie_study2 .subject_list .card_wrap .select_form {margin-bottom:25px;} .movie_study2 .subject_list .card_wrap .select_form button {height:45px;} .movie_study2 .subject_list .card_wrap .btn_search {height:45px;} .movie_study2 .subject_list .card_wrap .select_form button.on + ul {top:45px;} .movie_study2 .subject_list .card_wrap .select_form:nth-child(3) button.on + ul , .movie_study2 .subject_list .card_wrap .select_form:nth-child(4) button.on + ul {bottom:auto; top:45px;} .movie_study2 .select_form button:after {top:19px;} .movie_study2 .subject_list .ctr button {top:28%;} .movie_study2 .accordion .accrd_list {margin-left:15px;} } @media (min-width: 1600px) and (max-height : 720px) and (orientation : landscape) { .movie_study2.sub_wrap {min-height:650px;} .movie_study2 .sub_content section .center_wrap {padding:0 50px;} } @media (min-width: 1680px) and (min-height : 850px) { .movie_study2 .subject_list .card_wrap .select_form button.on + ul {max-height:188px;} } @media (min-width: 1800px) { .movie_study2 .subject_list .card_wrap h3 {margin-bottom:13%;} .movie_study2 .subject_list .card_wrap .search_wrap {margin-top:15%;} .movie_study2 .subject_list .card_wrap .select_form {margin-bottom:30px;} .movie_study2 .subject_list .ctr button {top:30%;} } @media (min-width: 1800px) and (max-height : 800px) and (orientation : landscape) { .movie_study2.sub_wrap {min-height:765px;} } /* 영상학습3 */ .movie_study3.sub_wrap {position:absolute; top:0; left:0; height:100%; /*min-height:577px;*/ padding-top:65px;} .movie_study3 .movie_section {height:100%;} .movie_study3 .chapter_header {position:absolute; top:0; left:0;} .movie_study3 .chapter_header .chapter_tit:before {width:34px; height:36px; margin-top:-18px; background-position:-2px -323px;} .movie_study3 .chapter_header .util li:last-child {padding-right:27px; border-right:none;} .movie_study3 .chapter_header .util li:last-child:after {display:none;} .movie_study3 .chapter_header .util li .btn_list {width:21px; height:24px; } .movie_study3 .chapter_header .util li .btn_list span {position:absolute; right:0; width:100%; height:2px; background:#00f3ff;} .movie_study3 .chapter_header .util li .btn_list span:nth-child(1) {top:4px;} .movie_study3 .chapter_header .util li .btn_list span:nth-child(2) {top:50%; right:auto; left:0;} .movie_study3 .chapter_header .util li .btn_list span:nth-child(3) {bottom:2px;} .movie_study3 header ~ .col_wrap {height:100%;} .mstudy_popup {display:none; position:fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;} .mstudy_popup .popup_content {position: fixed; top:50%; left: 50%; width: 650px; margin-top:0; margin-left:-12px; min-height:100px; height:450px; background-size: cover; z-index: 9999; text-align: center; padding:0; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);} .mstudy_popup .tit_box {padding-bottom:20px; border-bottom:2px solid #222; text-align:left;} .mstudy_popup .tit_box .tit {display:block; font-size:22px; font-weight:700; line-height:40px; color:#222; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .mstudy_popup .tit_box .tit span {font-weight:400; color:inherit; vertical-align:baseline;} .mstudy_popup .tit_box .cate_list {margin-top:11px; width:100%;} .mstudy_popup .tit_box .cate_list:after {display:block; clear:both; content:"";} .mstudy_popup .tit_box .cate_list li {float:left; width:calc(16.666% - 4.2px); height:28px; padding:0 5px; margin-right:5px; background:#f2f2f2; border-radius:20px; font-size:15px; color:#666; text-align:center; overflow:hidden;} .mstudy_popup .tit_box .cate_list li:last-child {margin-right:0;} .mstudy_popup .pop_cont {width:100%; height:100%; padding:30px 37px; overflow:hidden;} .mstudy_popup .mstudy_list {height:290px; font-size:0; overflow:hidden; overflow-y:auto;} .mstudy_popup .mstudy_list li {display:table; width:100%; border-bottom:2px dashed #d7d7d7; text-align:left;} .mstudy_popup .mstudy_list li .tit {display:table-cell; padding:17px 15px 20px; padding-left:56px;} .mstudy_popup .mstudy_list li .tit p {position:relative; font-size:18px; font-weight:400; line-height:1.45em; color:#222;} .mstudy_popup .mstudy_list li .tit p:before {position:absolute; top:4px; left:-30px; width:21px; height:18px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-198px -323px; background-size:500px 1250px; content:"";} .mstudy_popup .mstudy_list li .tit span {display:block; font-size:14px; font-weight:400; line-height:1.75em; color:#999;} .mstudy_popup .mstudy_list li.on .tit {background:#def4f6;} .mstudy_popup .mstudy_list li.on .tit p {font-weight:700; color:#03a8b0;} .mstudy_popup .mstudy_list li.on .tit p:before {background-position:-249px -323px;} /* 플러스학습 */ .plus_study .search_bar .select_form {max-width:100%;} .plus_study .search_bar .group {width:12%; margin-right:15px;} .plus_study .search_bar .month_list {display:inline-block; width:calc(78% - 35px); margin:17px 0 0 20px;} .plus_study .search_bar .month_list li {position:relative; width:8.333%; margin-right:0;} .plus_study .search_bar .month_list li.dot:before {position:absolute; top:-3px; left:50%; width:5px; height:5px; background:#222; border-radius:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); margin-left:-2px; content:"";} .plus_study .search_bar .month_list li.on:before {display:none;} .plus_study .plus_list {width:100%; height:100%; padding-top:35px;} .plus_study .plus_list:after {display:block; clear:both; content:"";} .plus_study .plus_list .card_wrap {position:relative; float:left; width:calc(25% - 15px); height:315px; margin:0 7.5px; margin-bottom:35px;} .plus_study .plus_list .card_wrap .card_wrap_inner {width:100%; height:100%; overflow:hidden; border-radius: 10px; background: #f2f2f2; padding: 12px; position: relative;} .plus_study .plus_list .card_wrap .mod {display:block; width:100%; height:100%; background: #fff; border-radius: 7px; z-index:9999;} .plus_study .plus_list .card_head {position:absolute; top:0; right:0; height:auto; width:91px; height:91px; padding:8px; line-height:1.2em; z-index:0; text-align:right;} .plus_study .plus_list .card_head:before {position:absolute; top:0; right:-50px; width:100%; height:100px; background:#222; -webkit-transform: skewX(45deg); transform: skewX(45deg); content:""; z-index:-1;} .plus_study .plus_list .card_head span {font-size:15px; color:#fff; font-weight:700;} .plus_study .plus_list .card_body {width:100%; height:244px; height:79.8%; padding:13px 15px 44px;} .plus_study .plus_list .card_tit {position:relative;} .plus_study .plus_list .card_tit .tit {margin-top:4px; min-height:58px; font-size:22px; line-height:1.35em; color:#222; -ms-text-overflow:ellipsis; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; word-break:normal; overflow:hidden;} .plus_study .plus_list .card_tit .present_dt {margin-top:15px; font-size:15px; line-height:1em; color:rgba(0,0,0,0.3);} .plus_study .plus_list .card_tit .present_dt span {font-family:"Roboto"; font-size:16px;} .plus_study .plus_list .card_tit .study_dt {margin-top:7px; font-size:15px; line-height:1em; color:#222;} .plus_study .plus_list .card_tit .study_dt span {font-family:"Roboto"; font-size:16px;} .plus_study .plus_list .card_tit .label {margin-top:7.5%; text-align:center;} .plus_study .plus_list .card_tit .label span {display:inline-block; width:105px; height:42px; background:#fff; border-radius:50px; font-family:"Roboto"; font-size:22px; line-height:42px; color:#999;} .plus_study .plus_list .card_tit .label em {font-family:inherit; font-size:inherit;} .plus_study .plus_list .card_foot {margin-top:-2px; position:relative; width:100%; height:20.2%; text-align:center;} .plus_study .plus_list .card_foot .btn {display:inline-block; width:100%; height:100%; padding-top:6%; font-size:16px; font-weight:700; color:#222;} .plus_study .plus_list .type2 .card_foot .btn {padding-top:7.5%;} .plus_study .plus_list .card_foot .btn span {position:relative; padding-left:23px;} .plus_study .plus_list .card_foot .btn span:before {position:absolute; top:2px; left:0; width:18px; height:22px; background: url('/img/sprite/sprite.png?v=05.14') no-repeat; background-position: -46px -191px; background-size:500px 1250px; content:"";} .plus_study .plus_list .card_foot:after {position:absolute; top:0; left:50%; width:88%; height:2px; -webkit-transform:translateX(-50%); transform:translateX(-50%); border-bottom: 2px solid #222; content:"";} .plus_study .plus_list .plus_a .card_wrap_inner {background:#e5eff9;} .plus_study .plus_list .plus_b .card_wrap_inner {background:#e1f5e6;} .plus_study .plus_list .plus_c .card_wrap_inner {background:#faebf9;} .plus_study .plus_list .plus_a .card_head:before {background:#00397f;} .plus_study .plus_list .plus_b .card_head:before {background:#007f1a;} .plus_study .plus_list .plus_c .card_head:before {background:#7f0076;} .plus_study .plus_list .plus_a .class_nm {color:#00397f;} .plus_study .plus_list .plus_b .class_nm {color:#007f1a;} .plus_study .plus_list .plus_c .class_nm {color:#7f0076;} .plus_study .plus_list .plus_a.type2 .mod {background: #e5eff9;} .plus_study .plus_list .plus_b.type2 .mod {background: #e1f5e6;} .plus_study .plus_list .plus_c.type2 .mod {background: #faebf9;} .plus_study .plus_list .plus_a.type2 .card_tit .label em {color:#00397f;} .plus_study .plus_list .plus_b.type2 .card_tit .label em {color:#007f1a;} .plus_study .plus_list .plus_c.type2 .card_tit .label em {color:#7f0076;} .plus_study .plus_list .plus_a.type2 .card_foot .btn {color:#00397f;} .plus_study .plus_list .plus_b.type2 .card_foot .btn {color:#007f1a;} .plus_study .plus_list .plus_c.type2 .card_foot .btn {color:#7f0076;} .plus_study .plus_list .plus_a.type2 .card_foot .btn span:before {background-position: -96px -155px;} .plus_study .plus_list .plus_b.type2 .card_foot .btn span:before {background-position: -144px -155px;} .plus_study .plus_list .plus_c.type2 .card_foot .btn span:before {background-position: -197px -155px;} .plus_study .plus_list .plus_a.type2 .card_foot:after {border-bottom: 2px solid #00397f;} .plus_study .plus_list .plus_b.type2 .card_foot:after {border-bottom: 2px solid #007f1a;} .plus_study .plus_list .plus_c.type2 .card_foot:after {border-bottom: 2px solid #7f0076;} .plus_study .msg {margin-top:12%; font-size:14px;} .plus_study .plus_list .plus_d .card_wrap_inner {background:#e5f9f4;} .plus_study .plus_list .plus_d:after {position:absolute; top:-25px; left:25px; width:62px; height:43px; background: url('/img/sprite/sprite.png?v=05.14?v=03.18') no-repeat; background-position: -253px -762px; background-size:500px 1250px; content:"";} .plus_study .plus_list .plus_d .card_head span {font-size: 14px;} .plus_study .plus_list .plus_d .card_head:before {background:#008b87;} .plus_study .plus_list .plus_d .class_nm {color:#008b87;} .plus_study .plus_list .plus_d.type2 .mod {background: #e5f9f4;} .plus_study .plus_list .plus_d.type2 .card_tit .label em {color:#008b87;} .plus_study .plus_list .plus_d.type2 .card_foot .btn {color:#008b87;} .plus_study .plus_list .plus_d.type2 .card_foot .btn span:before {background-position: -181px -777px;} .plus_study .plus_list .plus_d.type2 .card_foot:after {border-bottom: 2px solid #008b87;} @media (min-width: 1281px) { .plus_study .plus_list {padding-top:35px;} .plus_study .plus_list .card_wrap {height:335px; margin-bottom:35px;} .plus_study .plus_list .card_tit .label {margin-top:11%;} } @media (min-width : 1440px) { .plus_study .plus_list .card_wrap {height:360px;} .plus_study .plus_list .card_tit .label {margin-top:13%;} .plus_study .plus_list .card_foot .btn {padding-top:7%;} .plus_study .plus_list .type2 .card_foot .btn {padding-top:8.5%;} } @media (min-width : 1600px) { .plus_study .search_bar .select_form {width:8.5%;} .plus_study .search_bar .group {width:10%;} .plus_study .search_bar .month_list {width:calc(81.5% - 40px); margin:17px 0 0 25px;} .plus_study .search_bar .month_list li {width:calc(8.333% - 10px); margin-right:10px;} .plus_study .plus_list .card_tit .label {margin-top:13%;} .plus_study .plus_list {margin-right:0;} .plus_study .plus_list .card_wrap {width:calc(20% - 15px);} .plus_study .plus_list .card_body {padding:18px 15px 44px;} .plus_study .plus_list .card_tit .present_dt {margin-top:18px;} .plus_study .plus_list .card_tit .study_dt {margin-top:8px;} } @media (min-width : 1800px) { .plus_study .plus_list .card_wrap {height:390px;} .plus_study .plus_list .card_tit .label {margin-top:15%;} } /* 레벨테스트 */ .level_test.sub_wrap {min-height:0;} .level_test.sub_wrap .sub_content section {min-height:0} .level_test .sub_head {border-bottom:1px solid #222;} .level_test .sub_content section .cont_box .col_mod {padding:0 8px;} .level_test .sub_content section .cont_box .col_mod:nth-child(1) {width:42.65%;} .level_test .sub_content section .cont_box .col_mod:nth-child(2) {width:57.35%; background:#f3f3f3;} .level_test .sub_content section .cont_box .col_mod .tab_wrap {height:100%; padding:0;} .level_test .sub_content section .cont_box .col_mod .tab_wrap > ul {overflow-y:auto;} .level_test .tab_wrap {padding:0;} .level_test .test_list {width:100%; height:100%; padding:35px 0; padding-right:27px; padding-left:27px;} .level_test .test_list:after {display:block; clear:both; content:"";} .level_test .test_list .card_wrap {position:relative; float:left; width:calc(50% - 10px); margin-left:20px; margin-bottom:20px; border-radius: 10px; background: #f2f2f2; padding: 12px; overflow:hidden;} .level_test .test_list .card_wrap .mod {display:block; width:100%; height:0; padding-bottom:107%; background: #fff; border-radius: 7px;} .level_test .test_list .card_wrap .mod a {position:absolute; top:0; right:0; bottom:0; left:0; width:100%; padding:12px; border-radius:10px;} .level_test .test_list .card_wrap:nth-child(odd) {margin-left:0;} .level_test .test_list .card_head {position:absolute; top:0; right:0; height:auto; width:85px; height:85px; padding:8px 10px; line-height:1.2em; z-index:0; text-align:right;} .level_test .test_list .card_head:before {position:absolute; top:0; right:-50px; width:100%; height:100px; background:#222; -webkit-transform: skewX( 45deg); transform: skewX(45deg); content:""; z-index:-1;} .level_test .test_list .card_head span {font-size:15px; color: #fff;} .level_test .test_list .card_body {width:100%; padding:45px 8px 0; padding:21.5% 3.8% 0;} .level_test .test_list .card_tit {position:relative;} .level_test .test_list .card_tit:before {position:absolute; top:0; left:50%; background-image:url(../img/sprite/sprite.png?v=06.29); background-repeat:no-repeat; background-size:500px 1250px; -webkit-transform:translateX(-50%); transform:translateX(-50%); content:"";} .level_test .test_list .card_tit .tit {padding-top:52px; font-size:21px; line-height:1.35em; color:#222; text-align:center; -ms-text-overflow:ellipsis; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-wrap:break-word; word-break:normal; overflow:hidden;} .level_test .test_list .card_tit .present_dt {margin-top:15px; font-size:16px; line-height:1em; color:rgba(0,0,0,0.3);} .level_test .test_list .card_tit .present_dt span {font-family:"Roboto"; font-size:17px;} .level_test .test_list .card_tit .label {margin-top:10%; text-align:center;} .level_test .test_list .card_tit .label span {display:inline-block; width:105px; height:42px; background:#fff; border-radius:50px; font-family:"Roboto"; font-size:22px; line-height:42px; color:#999;} .level_test .test_list .card_tit .label em {font-family:inherit; font-size:inherit;} .level_test .content {width:100%; height:100%; padding:0 42px; overflow-y:auto;} .level_test .content:after {display:block; clear:both; content:"";} .level_test .content .txt_wrap {float:left; width:calc(100% - 145px); height:100%; padding-top:30px; padding-right:50px;} .level_test .content .txt_wrap .tit_area {padding-bottom:10px; border-bottom:1px solid #d7d7d7;} .level_test .content .txt_wrap .tit_area h3 {position:relative; display:inline-block; font-size:23px; line-height:1.35em; color:#222; z-index:1;} .level_test .content .txt_wrap .tit_area h3:before {position:absolute; bottom:0; left:0; width:100%; height:10px; background:#94b4db; z-index:-1; content:"";} .level_test .content .txt_wrap .tit_area .my_info {margin-top:22px; font-size:15px; line-height:1.45em; color:#666;} .level_test .content .txt_wrap .txt_area {padding:30px 0;} .level_test .content .txt_wrap .txt_area .txt {margin:10px 0; font-size:16px; line-height:1.5em; color:#222;} .level_test .content .txt_wrap .txt_area .box {margin:20px 0; padding:8px 10px; background:#e5eff9; border:2px solid #94b4db; text-align:center;} .level_test .content .txt_wrap .txt_area .box ul li {margin:10px; line-height:1.1em;} .level_test .content .txt_wrap .txt_area strong {font-size:16px; font-weight:700; color:#00397f;} .level_test .content .txt_wrap .txt_area .box:first-child {margin-top:0;} .level_test .content .txt_wrap .txt_area .txt:first-child {margin-top:0;} .level_test .content .btn_wrap {position:relative; float:left; width:145px; height:100%;} .level_test .content .btn_wrap .btn_next {position:absolute; display:block; top:50%; left:0; width:105px; height:105px; margin-top:-52px; background:#222; border-radius:50%;} .level_test .content .btn_wrap .btn_next:before {position:absolute; top:50%; left:50%; width:32px; height:32px; margin-top:-16px; margin-left:-16px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; background-position:-437px -277px; content:"";} .level_test .test_list .lv_a {background:#e5eff9;} .level_test .test_list .lv_b {background:#e1f5e6;} .level_test .test_list .lv_c {background:#faebf9;} .level_test .test_list .lv_d {background:#f9efe5;} .level_test .test_list .lv_e {background:#e5f8f9;} .level_test .test_list .lv_a .card_head:before {background:#00397f;} .level_test .test_list .lv_b .card_head:before {background:#007f1a;} .level_test .test_list .lv_c .card_head:before {background:#7f0076;} .level_test .test_list .lv_d .card_head:before {background:#804702;} .level_test .test_list .lv_e .card_head:before {background:#328aa3;} .level_test .test_list .lv_a .card_tit:before {width:31px; height:36px; background-position:-129px -41px;} .level_test .test_list .lv_b .card_tit:before {width:29px; height:36px; background-position:-179px -41px;} .level_test .test_list .lv_c .card_tit:before {width:33px; height:40px; background-position:-233px -41px;} .level_test .test_list .lv_d .card_tit:before {width:45px; height:39px; background-position:-291px -41px;} .level_test .test_list .lv_e .card_tit:before {width:41px; height:33px; background-position:-355px -41px;} .level_test .test_list .lv_a.on .mod {background:#e5eff9;} .level_test .test_list .lv_b.on .mod {background:#e1f5e6;} .level_test .test_list .lv_c.on .mod {background:#faebf9;} .level_test .test_list .lv_d.on .mod {background:#f9efe5;} .level_test .test_list .lv_e.on .mod {background:#e5f8f9;} .level_test .lv_a_cont .txt_wrap .tit_area h3:before {background:#94b4db;} .level_test .lv_a_cont .txt_wrap .txt_area .box {background:#e5eff9; border:2px solid #94b4db;} .level_test .lv_a_cont .txt_wrap .txt_area strong {color:#00397f;} .level_test .lv_b_cont .txt_wrap .tit_area h3:before {background:#91dba0;} .level_test .lv_b_cont .txt_wrap .txt_area .box {background:#e1f5e6; border:2px solid #91dba0;} .level_test .lv_b_cont .txt_wrap .txt_area strong {color:#007f1a;} .level_test .lv_c_cont .txt_wrap .tit_area h3:before {background:#cb8ec6;} .level_test .lv_c_cont .txt_wrap .txt_area .box {background:#faebf9; border:2px solid #cb8ec6;} .level_test .lv_c_cont .txt_wrap .txt_area strong {color:#7f0076;} .level_test .lv_d_cont .txt_wrap .tit_area h3:before {background:#c3a077;} .level_test .lv_d_cont .txt_wrap .txt_area .box {background:#f9efe5; border:2px solid #c3a077;} .level_test .lv_d_cont .txt_wrap .txt_area strong {color:#804702;} .level_test .lv_e_cont .txt_wrap .tit_area h3:before {background:#90c7d8;} .level_test .lv_e_cont .txt_wrap .txt_area .box {background:#e5f8f9; border:2px solid #90c7d8;} .level_test .lv_e_cont .txt_wrap .txt_area strong {color:#328aa3;} @media (min-width : 1600px) { .level_test .sub_content section .cont_box .col_mod:nth-child(1) {width:49%;} .level_test .sub_content section .cont_box .col_mod:nth-child(2) {width:51%;} .level_test .test_list .card_wrap {width:calc(50% - 15px); margin-left:30px;} .level_test .test_list .card_wrap {width:calc(33.333% - 13.4px); margin-left:20px;} .level_test .test_list .card_wrap:nth-child(odd) {margin-left:20px;} .level_test .test_list .card_wrap:nth-child(3n-2) {margin-left:0;} .level_test .txt_wrap {width:calc(100% - 230px);} .level_test .btn_wrap {width:230px;} } @media (min-width : 1600px) and (min-height : 840px) and (orientation : landscape) { .level_test .content {padding:0 52px;} .level_test .content .txt_wrap {padding-right:0;} .level_test .content .txt_wrap {float:none; width:100%; height:auto;} .level_test .content .txt_wrap .txt_area {padding-bottom:0;} .level_test .content .btn_wrap {float:none; width:100%; height:50px !important; margin:30px 0;} .level_test .content .btn_wrap .btn_next {top:0; left:50%; width:175px; height:50px; margin-top:0; margin-left:-88px; border-radius:30px; } .level_test .content .btn_wrap .btn_next:before {margin-top:-13px; margin-left:-13px; width:26px; height:26px; background-size:1000px 2500px; background-position: -910px -647px;} } @media (min-width : 1680px) { .level_test .test_list {padding-right:32px; padding-left:32px;} /**/ .level_test .test_list .card_wrap {width:calc(33.333% - 13.4px); margin-left:20px;} .level_test .test_list .card_wrap:nth-child(odd) {margin-left:20px;} .level_test .test_list .card_wrap:nth-child(3n-2) {margin-left:0;} } @media (min-width : 1800px) { .level_test .sub_content section .cont_box .col_mod:nth-child(1) {width:45%;} .level_test .sub_content section .cont_box .col_mod:nth-child(2) {width:55%;} .level_test .test_list {padding-right:42px; padding-left:42px;} /**/ } /* 오답클리닉 */ .wrong_answer .search_bar .select_form {margin-right:15px;} .wrong_answer .search_bar .select_form button {padding-left:18px;} .wrong_answer .search_bar .input_wrap {float:left; position:relative; margin-top:17px; margin-left:3px; border-radius:20px; overflow:hidden;} .wrong_answer .search_bar .input_wrap label {display:inline-block; padding-right:10px; font-size:17px; color:#222;} .wrong_answer .search_bar .input_wrap input {width:305px; height:37px; padding:0 65px 0 15px; border-radius:20px; background:#fff; font-family:inherit; font-size:17px; line-height:37px; color:#222;} .wrong_answer .search_bar .input_wrap button {position:absolute; top:0; right:0; width:50px; height:100%; background:#000; text-indent:-9999px;} .wrong_answer .search_bar .input_wrap button:after {position:absolute; top:50%; left:50%; width:19px; height:19px; margin-top:-11px; margin-left:-11px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat -144px -117px; background-size:500px 1250px; content:"";} .wrong_answer .course_list {width:100%; height:100%; padding-top:25px;} .wrong_answer .course_list:after {display:block; clear:both; content:"";} .wrong_answer .course_list .card_wrap {float:left; width:calc(25% - 15px); height:315px; margin:0 7.5px; margin-bottom:22px; overflow:hidden;} .wrong_answer .course_list .card_head {position:relative; height:35px; padding-left:20px; background:#5b5b5b; border-top-right-radius:10px; border-top-left-radius:10px; line-height:35px; font-size:15px; color:#fff;} .wrong_answer .course_list .card_head:after {position:absolute; bottom:0; left:0; width:100%; height:3px; background:rgba(0,0,0,0.1); content:"";} .wrong_answer .course_list .card_body , .wrong_answer .course_list .card_foot {background:#fff;} .wrong_answer .course_list .card_body {position:relative; display:table; width:100%; height:calc(79% - 35px); padding:0 18px; border-right:1px solid #d8d8d8; border-left:1px solid #d8d8d8;} .wrong_answer .course_list .card_tit {position:relative; display:table-cell; padding:10px 0; text-align:center; vertical-align:middle;} .wrong_answer .course_list .card_tit .sep {font-size:16px;line-height:1em; color:rgba(0,0,0,0.3);} .wrong_answer .course_list .card_tit .tit {width:100%; height:56px; margin-top:8px; font-size:22px; line-height:1.3em; color:#222; word-break: normal; -ms-text-overflow:ellipsis; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; word-break:normal; overflow:hidden;} .wrong_answer .course_list .label_wrap {display:inline-block; margin-top:13px; text-align:center;} .wrong_answer .course_list .label_wrap li {width:165px; height:34px; margin:5px 0; padding:0 25px 0 20px; border-radius:20px; font-size:15px; line-height:34px; color:#fff; text-align:left;} .wrong_answer .course_list .label_wrap li.achv_level {background:#00a7af;} .wrong_answer .course_list .label_wrap li.com_level {background:#58c00b;} .wrong_answer .course_list .label_wrap li span {float:right; display:inline-block; margin-left:10px; font-family:"Roboto"; font-size:17px; font-weight:400;} .wrong_answer .course_list .label_wrap li.achv_level span {color:#006167;} .wrong_answer .course_list .label_wrap li.com_level span {color:#2f7200;} .wrong_answer .course_list .label_wrap li em {font-family:inherit; font-size:17px; font-weight:700; color:#fff;} .wrong_answer .course_list .card_foot {position:relative; width:100%; height:21%; background:#def4f6; border-bottom-right-radius:10px; border-bottom-left-radius:10px; border-right:1px solid #d8d8d8; border-left:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8;} .wrong_answer .course_list .card_foot:after {position:absolute; top:0; left:50%; width:97%; height:2px; -webkit-transform:translateX(-50%); transform:translateX(-50%); border-bottom: 2px dashed #d7d7d7; content:"";} .wrong_answer .course_list .card_foot .btn_wrap {width:100%; height:100%;} .wrong_answer .course_list .card_foot .btn_wrap li {display:table; position:relative;float:left;width:50%;height:100%;text-align:center;} .wrong_answer .course_list .card_foot .btn_wrap li:first-child:before {position:absolute; top:50%; right:0; width:2px; height:40px; margin-top:-20px; background:rgba(0,0,0,0.1); content:"";} .wrong_answer .course_list .card_foot .btn_wrap li a {display:table-cell; width:100%; height:100%; vertical-align:middle;} .wrong_answer .course_list .card_foot .btn_wrap li span {position:relative; display:inline-block; height:24px; padding-left:23px; font-size:16px; line-height:1.8em; font-weight:700; color:#666;} .wrong_answer .course_list .card_foot .btn_wrap li span:before {position:absolute; top:4px; left:0; width:20px; height:23px; background: url('../img/sprite/sprite.png?v=06.29'); background-repeat:no-repeat; background-size:500px 1250px; content:"";} .wrong_answer .course_list .card_foot .btn_wrap .btn_test span {color:#00a7af;} .wrong_answer .course_list .card_foot .btn_wrap .btn_report span:before {top:3px; width:20px; height:23px;background-position:-96px -117px;} .wrong_answer .course_list .card_foot .btn_wrap .btn_test span:before {width:18px; height:22px;background-position:-2px -191px;} .wrong_answer .course_list .card_foot .btn_wrap li .closeBtn span {color:#b4c2c3;} .wrong_answer .course_list .card_foot .btn_wrap .btn_report .closeBtn span:before {background-position:-423px -170px;} .wrong_answer .msg {margin-top:12%; font-size:14px;} @media (min-width: 1281px) { .wrong_answer .course_list {padding-top:30px;} .wrong_answer .course_list .card_wrap {height:338px; margin-bottom:30px;} } @media (min-width : 1440px) { .wrong_answer .course_list .card_wrap {height:360px;} } @media (min-width : 1600px) { .wrong_answer .course_list {margin-right:0;} .wrong_answer .course_list .card_wrap {width:calc(20% - 15px);} .wrong_answer .course_list .card_head {height:41px; line-height:40px;} .wrong_answer .course_list .card_body {height:calc(79% - 41px);} .wrong_answer .course_list .label_wrap li {width:180px; height:37px; margin:8px 0; line-height:36px;} } @media (min-width : 1680px) { .wrong_answer .course_list .card_wrap {height:390px;} .wrong_answer .course_list .card_foot .btn_wrap li:first-child:before {height:46px; margin-top:-23px;} } /* 오답클리닉 - 학습하기 */ .sub_wrap.wrong_answer_test .sub_content section {min-height: 180px; padding:50px 0; background:#def4f6;} .sub_wrap.wrong_answer_test .sub_tit .guide {margin-top:33px;} .wrong_answer_test .sub_content {padding-top:192px;} .wrong_answer_test .sub_content section .center_wrap {padding:0 175px; justify-content:flex-start;} /* 슬라이드*/ .wrong_answer_test .top_bar {padding:0 60px;} .wrong_answer_slide {position:relative; padding:0 50px;} .wrong_answer_slide .swiper-container {height:192px;} .wrong_answer_slide .swiper-slide {height:auto;} .wrong_answer_slide .slide_wrap {display:flex; width: 100%; height: 100%; text-align:center; align-items:center;} .wrong_answer_slide .slide_wrap:after {display:block; clear:both; content:"";} .wrong_answer_slide .slide_wrap li {position:relative; float:left; padding-right:2px; /*margin:0 8px;*/ } .wrong_answer_slide .slide_wrap li a {position:relative; display:block; width:100%; height:138px; padding:20px 0; padding-left:11px; background:#fff; border-radius:5px; box-shadow:0px 0px 2px 1px rgb(0 0 0 / 10%); overflow:hidden;} .wrong_answer_slide .slide_wrap li a:before {position:absolute; top:0; left:0; width:12px; height:100%; background:#ddd; border-right:3px solid rgba(0,0,0,0.1); content:"";} .wrong_answer_slide .slide_wrap li.type0 a:before {background:#7f8797;} .wrong_answer_slide .slide_wrap li.type1 a:before {background:#ff7d22;} .wrong_answer_slide .slide_wrap li.type2 a:before {background:#00a7af;} .wrong_answer_slide .slide_wrap li .mod {padding:0 17px;} .wrong_answer_slide .slide_wrap li .mod .unit {font-size:18px; line-height:1em; font-weight:700; color:#222;} .wrong_answer_slide .slide_wrap li .mod .tit {margin-top:9px; font-size:17px; line-height:1em; color:#666; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .wrong_answer_slide .slide_wrap li .mod .wa_cnt {width:100%; padding:0 32px; margin-top:17px;} .wrong_answer_slide .slide_wrap li .mod .wa_cnt:after {display:block; clear:both; content:"";} .wrong_answer_slide .slide_wrap li .mod .wa_cnt button {float:left; width:calc(50% - 10px); height:35px; background:#222; border-radius:20px; font-family:"Roboto"; font-size:21px; line-height:35px; color:#fff; margin:0 5px;} .wrong_answer_slide .slide_wrap li .mod .wa_cnt .first.on {background:#ed1c24;} .wrong_answer_slide .slide_wrap li .mod .wa_cnt .second.on {background:#0042bb;} .wrong_answer_slide .ctr button {position:absolute; top:50%; z-index:1; width:17px; height:32px; text-indent:-9999px;-webkit-transform:translateY(-50%); transform:translateY(-50%);-webkit-transition:all 0.5s;transition:all 0.5s;} .wrong_answer_slide .ctr button:before {content:""; position:absolute; width:22px; height:22px; border:2px solid rgba(0,0,0,0.15); top:5px; -webkit-transform:rotate(45deg); transform:rotate(45deg);} .wrong_answer_slide .ctr .prev {left:0;} .wrong_answer_slide .ctr .prev:before {left:0; border-right:0; border-top:0; margin-left:5px;} .wrong_answer_slide .ctr .next {right:0;} .wrong_answer_slide .ctr .next:before {right:0; border-left:0; border-bottom:0; margin-right:5px;} /*cont_box*/ .wrong_answer_test .sub_content section .cont_box {flex-wrap:nowrap;} .wrong_answer_test .cont_box .col_mod {height:180px; max-height:180px;} .wrong_answer_test .cont_box .col_mod:nth-child(1) {width:90%; max-width:980px; margin-right:6px;} .wrong_answer_test .cont_box .col_mod:last-child {width:10%; min-height:auto;} /*btn*/ .wrong_answer_test .btn_wrap {position:relative;} .wrong_answer_test .btn_view {position:absolute; top:50%; right:0; width:73px; height:73px; margin-top:-37px; background:#222; border-radius:50%;} .wrong_answer_test .btn_view:before {position:absolute; top:50%; left:50%; width:32px; height:32px; margin-top:-16px; margin-left:-16px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; background-position:-437px -277px; content:"";} .wrong_answer_test .msg_box {position:relative; width:100%; margin:0 auto; padding:35px 30px; border-radius:8px; background:#fff;} .wrong_answer_test .msg_box:after {display:block; clear:both; content:"";} .wrong_answer_test .msg_box .icon_sel {position:absolute; top:50%; left:32px; width:104px; height:104px; background:#f3f3f3; border-radius:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); content:"";} .wrong_answer_test .msg_box .icon_sel:before {position:absolute; top:50%; left:50%; width: 27px; height: 39px; background: url('../img/sprite/sprite.png?v=06.29'); background-position:-197px -98px; background-size:500px 1250px; margin-top:-19px; margin-left:-13px; content:"";} .wrong_answer_test .msg_box .txt_wrap {float:left; padding-left:126px;} .wrong_answer_test .msg_box .txt_wrap p {margin:13px 0 15px; font-size:19px; line-height:1em; font-weight:700; color:#222;} .wrong_answer_test .msg_box .txt_wrap .txt {font-size:15px; line-height:1.65em; color:#666;} .wrong_answer_test .msg_box .qnum_wrap {float:right; width:325px; height:104px; border-radius:50px; background:#f3f3f3;} .wrong_answer_test .msg_box .qnum_wrap p {font-size:18px; line-height:105px; color:#222; text-align:center;} .wrong_answer_test .msg_box .qnum_wrap .total {margin-right:10px; font-family:"Roboto"; font-size:26px; font-weight:700; color:#222; vertical-align:top;} .wrong_answer_test .msg_box .input_wrap {position:relative; display:inline-block; width:90px; height:45px; line-height:45px; margin:0 10px;} .wrong_answer_test .msg_box .input_wrap label {position:absolute; top:0px; left:0; width:100%; height:100%; font-family:"Roboto"; font-size:22px; font-weight:700; line-height:45px; color:#222; cursor:text; } .wrong_answer_test .msg_box .input_wrap input {width:100%; height:100%; padding:0 21px; border-bottom:2px solid #222; font-family:"Roboto"; font-size:22px; font-weight:700; line-height:43px; color:#222; text-align:center;} @media (max-width: 1280px) and (max-height : 620px) and (orientation : landscape) { .sub_wrap.wrong_answer_test .sub_content section {padding:30px 0;} } @media (min-width: 1281px) { .sub_wrap.wrong_answer_test .sub_content section {padding:50px 0;} .wrong_answer_test .msg_box {padding:38px 32px;} .wrong_answer_test .msg_box .qnum_wrap {width:350px;} } @media (min-width: 1440px) { .wrong_answer_test .msg_box {padding:40px;} .wrong_answer_test .msg_box .icon_sel {left:40px;} .wrong_answer_test .msg_box .txt_wrap {padding-left:150px;} } @media (min-width: 1600px) and (min-height : 720px) and (orientation : landscape) { .wrong_answer_test .sub_content {padding-top:220px;} .sub_wrap.wrong_answer_test .sub_tit .guide {margin-top:38px;} .wrong_answer_slide .swiper-container {height:220px;} .wrong_answer_test .msg_box {padding:50px;} .wrong_answer_test .msg_box .qnum_wrap {width:380px;} .wrong_answer_test .msg_box .icon_sel {left:50px;} } @media (min-width : 1600px) and (min-height : 840px) and (orientation : landscape) { .wrong_answer_test .sub_content section .center_wrap {padding:0 160px; justify-content:flex-start;} .wrong_answer_test .sub_content section .cont_box {flex-wrap:wrap; height:auto;} .wrong_answer_test .cont_box .col_mod {height:auto; max-height:100%;} .wrong_answer_test .cont_box .col_mod:nth-child(1) {width:100%; max-width:100%; margin-right:0;} .wrong_answer_test .cont_box .col_mod:last-child {width:170px; height:42px; margin-top:40px;} .wrong_answer_test .btn_view {width:170px; height:42px; border-radius:20px;} .wrong_answer_test .btn_view:before {margin-top:-13px; margin-left:-13px; width:26px; height:26px; background-size:1000px 2500px; background-position: -910px -647px;} .wrong_answer_test .btn_view:after {width:15px; height:15px; margin-top:-13px;} .wrong_answer_test .msg_box {width:1000px;} } /* 오답클리닉 - 응시내역 */ .wrong_answer_report .watest_list {width:100%; height:100%;} .wrong_answer_report .watest_list:after {display:block; clear:both; content:"";} .wrong_answer_report .watest_list .card_wrap {position:relative; float:left; width:calc(25% - 15px); height:315px; margin:0 7.5px; margin-bottom:22px; border-radius: 10px; background: #def4f6; padding: 12px; overflow:hidden;} .wrong_answer_report .watest_list .card_wrap .mod {display:block; width:100%; height:100%; background: #fff; border-radius: 7px; z-index:9999;} .wrong_answer_report .watest_list .card_head {position:absolute; top:0; right:0; height:auto; width:85px; height:85px; padding:9px 10px; line-height:1.2em; z-index:0; text-align:right;} .wrong_answer_report .watest_list .card_head:before {position:absolute; top:0; right:-50px; width:100%; height:100px; background:#00a7af; -webkit-transform: skewX( 45deg); transform: skewX(45deg); content:""; z-index:-1;} .wrong_answer_report .watest_list .card_head a {position: absolute; top:0; right:0; display:block; width:85px; height:85px; padding:12px; font-size:15px; color:#fff;} .wrong_answer_report .watest_list .card_body {width:100%; height:244px; height:78.5%; padding:22px 15px;} .wrong_answer_report .watest_list .card_tit {position:relative;} .wrong_answer_report .watest_list .card_tit .tit {max-height:116px; font-size:22px; font-weight:700; line-height:1.35em; color:#222; overflow:hidden;} .wrong_answer_report .watest_list .card_tit .present_dt {margin-top:27px; font-size:16px;line-height:1em; color:#999;} .wrong_answer_report .watest_list .card_tit .present_dt span {font-family:"Roboto"; font-size:17px;} .wrong_answer_report .watest_list .card_tit .study_dt {margin-top:8px; font-size:16px;line-height:1em; color:#222;} .wrong_answer_report .watest_list .card_tit .study_dt span {font-family:"Roboto"; font-size:17px;} .wrong_answer_report .watest_list .card_tit .label {margin-top:13%; text-align:center;} .wrong_answer_report .watest_list .card_tit .label span {display:inline-block; width:105px; height:42px; background:#fff; border-radius:50px; font-family:"Roboto"; font-size:22px; line-height:42px; color:#999;} .wrong_answer_report .watest_list .card_tit .label em {font-family:inherit; font-size:inherit;} .wrong_answer_report .watest_list .card_foot {margin-top:-2px; position:relative; width:100%; height:21.5%; text-align:center;} .wrong_answer_report .watest_list .card_foot .btn {display:inline-block; width:100%; height:100%; padding-top:7%; font-size:16px; font-weight:700; color:#222;} .wrong_answer_report .watest_list .type1 .card_foot .btn {padding-top:7.5%;} .wrong_answer_report .watest_list .card_foot .btn span {position:relative; padding-left:23px;} .wrong_answer_report .watest_list .card_foot .btn span:before {position:absolute; top:2px; left:0; width:18px; height:22px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position: -46px -191px; background-size:500px 1250px; content:"";} .wrong_answer_report .watest_list .card_foot:after {position:absolute; top:0; left:50%; width:88%; height:2px; -webkit-transform:translateX(-50%); transform:translateX(-50%); border-bottom: 2px solid #222; content:"";} .wrong_answer_report .watest_list .type1 .mod {background: #def4f6;} .wrong_answer_report .watest_list .type1 .card_tit .label em {color:#00a7af;} .wrong_answer_report .watest_list .type1 .card_foot .btn {color:#00a7af;} .wrong_answer_report .watest_list .type1 .card_foot .btn span:before {background-position: -250px -155px;} .wrong_answer_report .watest_list .type1 .card_foot:after {border-bottom: 2px solid #00a7af;} .wrong_answer_report .view_wrap {display:none; position:absolute; top:0; left:0; width:100%; height:100%; padding:42px 15px 22px; background:rgba(0,0,0,0.85);} .wrong_answer_report .view_wrap .wa_unit_list {position:relative; width:100%; height:100%; overflow-y:auto;} .wrong_answer_report .view_wrap .wa_unit_list ul {width:100%; overflow:hidden;} .wrong_answer_report .view_wrap .wa_unit_list ul:after {display:block; clear:both; content:"";} .wrong_answer_report .view_wrap .wa_unit_list ul li {float:left; position:relative; width:33.33%; padding:11px 0; margin-left:-1px ; font-size:16px; font-weight:700; color:#fff; text-align:center;} .wrong_answer_report .view_wrap .wa_unit_list ul li:before {position:absolute; top:50%; left:0; margin-top:-31px; width:1px; height:62px; background:rgba(255,255,255,0.15); content:"";} .wrong_answer_report .view_wrap .wa_unit_list li .num {display:block; width:50px; height:25px; margin:4px auto; border-radius:20px; background:#ddd; font-family:"Roboto"; font-size:16px; line-height:25px; font-weight:400; color:#fff;} .wrong_answer_report .view_wrap .wa_unit_list li.first .num {background:#ed1c24;} .wrong_answer_report .view_wrap .wa_unit_list li.second .num {background:#0042bb;} .wrong_answer_report .view_wrap .btn_close {position:absolute; top: 0; right: 0; width:42px; height:42px; padding:10px;} .wrong_answer_report .view_wrap .btn_close:before , .wrong_answer_report .view_wrap .btn_close:after {position:absolute; top:50%; left:50%; margin-left:-15px; width:24px; height:3px; background:#fff; -webkit-transform-origin:center; transform-origin:center; content:"";} .wrong_answer_report .view_wrap .btn_close:before { -webkit-transform:rotate(-45deg); transform:rotate(-45deg);} .wrong_answer_report .view_wrap .btn_close:after {-webkit-transform:rotate(45deg); transform:rotate(45deg);} .wrong_answer_report .msg {margin-top:12%; font-size:14px;} @media (min-width: 1281px) { .wrong_answer_report .watest_list .card_wrap {height:335px; margin-bottom:30px;} .wrong_answer_report .watest_list .card_tit .label {margin-top:16%;} .wrong_answer_report .view_wrap {padding:42px 15px 30px;} .wrong_answer_report .view_wrap .wa_unit_list ul li {padding:13px 0;} } @media (min-width : 1440px) { .wrong_answer_report .watest_list .card_wrap {height:360px;} .wrong_answer_report .watest_list .card_foot .btn {padding-top:8%;} .wrong_answer_report .watest_list .type1 .card_foot .btn {padding-top:8.5%;} .wrong_answer_report .view_wrap {padding:45px 15px 30px;} .wrong_answer_report .view_wrap .wa_unit_list ul li {padding:16px 0;} } @media (min-width : 1600px) { .wrong_answer_report .watest_list .card_tit .label {margin-top:20%;} .wrong_answer_report .watest_list {margin-right:0;} .wrong_answer_report .watest_list .card_wrap {width:calc(20% - 15px);} } @media (min-width : 1800px) { .wrong_answer_report .watest_list .card_wrap {height:390px;} .wrong_answer_report .watest_list .card_tit .label {margin-top:21%;} .wrong_answer_report .view_wrap {padding:55px 15px 32px;} .wrong_answer_report .view_wrap .wa_unit_list ul li:before {height:66px; margin-top:-33px;} .wrong_answer_report .view_wrap .wa_unit_list li .num {margin:7px auto;} .wrong_answer_report .view_wrap .btn_close {top:5px; right:3px; width:48px; height:48px;} .wrong_answer_report .view_wrap .btn_close:before , .wrong_answer_report .view_wrap .btn_close:after {margin-left:-17px; width:30px;} } /* 공지사항 탭 공통 */ .advice_note .sub_head , .notice .sub_head , .error_report .sub_head {background:#f3f3f3;} .sub_tab {position:relative; height:100%; padding-left:0; padding-right:55px;} .sub_tab .tab_wrap { width:100%; height:100%;} .sub_tab .tab_wrap:after {display:block; clear:both; content:"";} .sub_tab .tab_wrap li {position:relative; float:left; width:33.333%; height:100%;} .sub_tab .tab_wrap li:before, .sub_tab .tab_wrap li:after {position:absolute; top:50%; width:1px; height:40px; -webkit-transform:translateY(-50%); transform:translateY(-50%); content:"";} .sub_tab .tab_wrap li:before {left:0; background:#fff;} .sub_tab .tab_wrap li:after {right:0; background:#d7d7d7;} .sub_tab .tab_wrap li:first-child:before, .sub_tab .tab_wrap li:last-child:after {display:none;} .sub_tab .tab_wrap li a {position:relative; display:block; width:100%; height:100%; font-size:21px; line-height:78px; color:#999; text-align:center;} .sub_tab .tab_wrap li .num {display:inline-block; width:37px; height:21px; margin-left:10px; background:#ff0000; border-radius:20px; font-family:"Roboto"; font-size:16px; line-height:21px; font-weight:400; color:#fff; vertical-align:2px;} .sub_tab .tab_wrap li.on a {font-weight:700; color:#222;} .sub_tab .tab_wrap li.on a:after {position:absolute; bottom:0px; left:50%; margin-left:-13px; border-bottom:15px solid #fff; border-left:13px solid transparent; border-right:13px solid transparent; z-index:3; content:"";} .sub_tab .btn_error {position:absolute; top:50%; right:0; width:55px; height:55px; margin-top:-27px; background:#d7d7d7; border-radius:50%;} .sub_tab .btn_error:before {position:absolute; top:50%; left:50%; width:21px; height:26px; margin-top:-13px; margin-left:-11px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-457px -47px; background-size:500px 1250px; content:"";} @media (min-width: 1600px) and (min-height : 720px) and (orientation : landscape) { .sub_tab .tab_wrap li a {line-height:90px;} } /* 알림장 */ .advice_note .sub_content section .center_wrap {padding:0 35px;} .advice_note .sub_content section .cont_box .col_mod {width:50%;} .advice_note .sub_content section .cont_box .col_mod:nth-child(1) {overflow-y:auto;} .advice_note .note {width:100%; height:100%; padding:35px 0;} .advice_note .note_list {width:100%; height:100%; padding:0 10px; overflow:hidden; overflow-y:auto;} .advice_note .note_list:after {display:block; clear:both; content:"";} .advice_note .note_list li {border-bottom:1px solid #d7d7d7; overflow:hidden;} .advice_note .note_list li.on {background:#def4f6;} .advice_note .note_list .note_wrap {position:relative; display:table; width:100%; height:100%; padding:14px 0;} .advice_note .note_wrap .img_wrap {position:absolute; top:50%; left:20px; display:block; width:60px; height:60px; margin-top:-30px; background-color:#fff; border:1px solid #e9e9e9; border-radius:50%; overflow:hidden;} .advice_note .note_wrap .img_wrap img {position:absolute; top:50%; left:50%; width:33px; height:37px; max-width:none; margin-top:-18px; margin-left:-16px;} .advice_note .note_wrap .note_txt {display:table-cell; height:72px; padding-left:95px; padding-right:15px; vertical-align:middle;} .advice_note .note_wrap .note_txt .tit .teacher_nm {position:relative; padding-right:36px; font-size:15px; line-height:1.75em; font-weight:700; color:#222;} .advice_note .note_wrap .note_txt .tit .note_dt {float:right; font-family:"Roboto"; font-size:15px; color:#999;} .advice_note .note_wrap .note_txt .txt {margin-top:6px; max-height:40px; font-size:15px; line-height:1.35em; color:#666; -ms-text-overflow:ellipsis; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; word-break:normal; overflow:hidden;} .advice_note .chat {width:100%; height:100%; padding:35px 0 35px 25px;} .advice_note .chatting {width:100%; height:81%; height:calc(100% - 80px); padding-right:7px; background:#def4f6; border-top-left-radius:7px; border-top-right-radius:7px; overflow:hidden;} .advice_note .messages {height:100%; padding:0 18px 0 25px; overflow-y:auto;} .advice_note .messages .message:first-child {margin-top:25px;} .advice_note .messages .message:after {display:block; clear:both; content:"";} .advice_note .messages .message .wrapper {position: relative; float:left; min-width:120px; min-height:54px; margin:29px 65px 30px; padding:16px 20px; border-radius:0 7px 7px 7px; background:#fff; font-size: 14px; line-height: 1.4; word-break: break-all;} .advice_note .messages .message .wrapper:after {position:absolute; top:0px; left:0; margin-left:-11px; border-right:11px solid #fff; border-top:0 solid transparent; border-bottom:11px solid transparent; z-index:3; content:"";} .advice_note .messages .message .avatar {position:absolute; top:-28px; left:-67px; width:48px; height:48px; background:#fff; border:2px solid #e9e9e9; border-radius:50%; overflow:hidden;} .advice_note .messages .message .avatar img {position:absolute; top:50%; left:50%; width:24px; height:27px; max-width:none; margin-top:-13px; margin-left:-12px;} .advice_note .messages .message .msg_info {position:absolute; top:-27px; left:-11px; width:350px; text-align:left;} .advice_note .messages .message .teacher_nm {display:inline-block; max-width:250px; font-size:15px; line-height:1.35em; color:#222; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .advice_note .messages .message .timestamp {margin-left:12px; font-family:"Roboto"; font-size:15px; line-height:1em; color:#999; vertical-align:text-top;} .advice_note .messages .message .msg_txt {font-size:15px; line-height:1.5em; color:#222; text-align:left;} .advice_note .messages .message.s_msg .wrapper {float:right; background:#00a7af; border-radius:7px 0 7px 7px;} .advice_note .messages .message.s_msg .wrapper:after {left:auto; right:0; margin-right:-11px; border-right:0; border-left:11px solid #00a7af; border-top:0 solid transparent; border-bottom:11px solid transparent; z-index:3; content:"";} .advice_note .messages .message.s_msg .avatar {float:right; left:auto; right:-67px;} .advice_note .messages .message.s_msg .avatar img {position:absolute; height:auto; max-width:none; top:50%; left:50%; transform:translate(-50%,-50%); margin:0;} .advice_note .messages .message.s_msg .msg_info {left:auto; right:-11px; text-align:right;} .advice_note .messages .message.s_msg .msg_txt {color:#fff;} .advice_note .input_box {position:relative; width:100%; height:19%; height:80px; padding:6px 150px 6px 20px; background:#fff; border:1px solid #d7d7d7; border-bottom-left-radius:7px; border-bottom-right-radius:3px; overflow:hidden;} .advice_note .input_box .msg_input {width:100%; height:100%; padding-right:15px; padding-top:8px; font-size:17px; color:#222;} .advice_note .input_box .btn_submit {position:absolute; top:50%; right:20px; width:110px; height:38px; -webkit-transform:translateY(-50%); transform:translateY(-50%); background:#00a7af; border-radius:7px; font-size:15px; font-weight:700; color:#faff7c;} @media (min-width : 1440px) { .advice_note .chatting {height:calc(100% - 100px);} .advice_note .input_box {height:100px;} .advice_note .input_box .msg_input {padding-top:10px;} } @media (min-width : 1680px) { .advice_note .chatting {height:calc(100% - 125px);} .advice_note .input_box {height:125px;} } @media (min-width: 1600px) and (min-height : 720px) and (orientation : landscape) { .advice_note .sub_content section .center_wrap {padding:0 50px;} .advice_note .note {padding:45px 0;} .advice_note .chat {padding:45px 0 45px 35px;} } @media (min-width : 1800px) { .advice_note .chatting {height:calc(100% - 135px);} .advice_note .input_box {height:135px; padding:6px 150px 6px 25px;} .advice_note .input_box .msg_input {padding-top:15px;} } /* 공지사항,오류신고 공통 */ .notice .sub_content section , .error_report .sub_content section {padding:35px 0;} .board_accord {position:relative; width:920px; height:100%; padding:0 10px; overflow:hidden; overflow-y:auto;} .board_accord .mod {border-bottom:1px solid #d7d7d7;} .board_accord .mod dt a {display:block; position:relative; padding:20px 75px 20px 18px; background:#fff;} .board_accord .mod dt a:after {display:block; clear:both; content:"";} .board_accord .mod dt a:before {position: absolute; top: 50%; right:23px; width:14px; height:14px; margin-top: -13px; margin-right:0; border-top:1px solid #222; border-left:1px solid #222; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); content: "";} .board_accord .mod.on dt a:before {margin-top: -4px; -webkit-transform: rotate(45deg); transform: rotate(45deg);} .board_accord .mod dt p {display:flex; position:relative; float:left; width:calc(100% - 105px);} .board_accord .mod dt .cate {position:absolute; top:0; left:0; padding-left:25px; font-weight:400; font-size:17px; font-weight:400; color:#00a7af;} .board_accord .mod dt .tit {position:relative; height:30px; padding-right:36px; font-size:17px; font-weight:400; color:#222; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .board_accord .mod dt .date {float:right; width:105px; margin-top:2px; font-family:"Roboto"; font-size:15px; color:#999; text-align:right;} .board_accord .mod dd {display:none; width:100%; padding:30px 35px; border-top:1px solid #d7d7d7; background:#f3f3f3;} .board_accord .mod dd .txt {font-size:15px; line-height:1.55em; color:#222;} /* 오류신고 */ .error_report .board_accord .mod dt p {display:flex;} .error_report .board_accord .mod dt p:before {position:absolute; top:50%; left:0; width:14px; height:17px; margin-top:-8px; background:url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-369px -98px; background-size:500px 1250px; content:"";} .error_report .board_accord .mod dt .cate {position:absolute; top:0; left:0; width:150px; height:30px; padding-right:15px; padding-left:25px; font-weight:400; font-size:17px; font-weight:400; color:#00a7af; word-break:normal; overflow:hidden;} .error_report .board_accord .mod dt .tit , .error_report .board_accord .mod dd .course_nm , .error_report .board_accord .mod dd .txt {padding-left:152px;} .error_report .board_accord .mod.has_answer dt .tit {padding-right:70px;} .error_report .board_accord .mod dt .tit {padding-right:35px;} .error_report .board_accord .mod dd {padding:30px 35px 30px 18px;} .error_report .board_accord .mod dd .course_nm {font-size:15px; line-height:1.6em; font-weight:700; color:#999; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .error_report .board_accord .mod dd .txt {margin-top:12px;} .error_report .board_accord .mod dd .answer {position:relative; margin-top:25px;} .error_report .board_accord .mod dd .answer strong {position:absolute; top:0; left:0; padding-left:24px; font-size:17px; font-weight:400; color:#ff7d22;} .error_report .board_accord .mod dd .answer strong:before {position:absolute; top:50%; left:0; background:url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-423px -98px; background-size:500px 1250px; width:16px; height:14px; margin-top:-7px; content:"";} .error_report .board_accord .mod dd .answer .txt {margin:0; font-size:15px; color:#ff7d22;} /* 오류신고 팝업 */ .error_popup {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;} .error_popup .popup_content {width:700px; height:475px;} .error_popup .pop_cont {padding:30px 37px;} .error_popup .tit_box {padding-bottom:15px; border-bottom:2px solid #222; text-align:center;} .error_popup .tit_box .tit {display:inline-block; font-size:22px; font-weight:700; line-height:40px; color:#222;} .error_popup .tit_box .tit span {font-weight:400; color:inherit; vertical-align:baseline;} .error_popup .radio_form {padding:17px 0; font-size:0; background:#f3f3f3;} .error_popup .radio_form li {float:none;display:inline-block; margin-right:20px;} .error_popup .radio_form li:last-child {margin:0;} .error_popup .board_write .input_wrap {height:160px;} .error_popup .btn_errg {position:relative;margin-top:19px; width:180px; height:43px; padding-bottom:3px; background:#222; border-radius:5px;} .error_popup .btn_errg:before {position:absolute; top:50%; left:45px; width:24px; height:24px; margin-top:-12px; border:2px solid #fff; border-radius:50%; content:"";} .error_popup .btn_errg span {position:relative; padding-left:30px; font-size:16px; font-weight:700; color:#fff;} .error_popup .btn_errg span:before , .error_popup .btn_errg span:after {position:absolute; left:15px; height:2px; margin-left:-8.5px; background:#fff; border-radius:20px; content:""; z-index:1;} .error_popup .btn_errg span:before {width:6px; top:12px; transform:rotate(42deg); transform-origin:left top;} .error_popup .btn_errg span:after {width:11px; top:9px; margin-left:-10px; transform:rotate(-42deg); transform-origin:right top;} @media (min-width: 1600px) { .board_accord {width:1100px;} .board_accord .mod dt p {width:calc(100% - 120px);} .board_accord .mod dt .date {width:120px;} .board_accord .mod dt a {padding:25px 80px 25px 25px} .board_accord .mod dt a:before {right:30px;} .board_accord .mod dd {padding:35px 45px;} .error_report .board_accord .mod dt .tit , .error_report .board_accord .mod dd .course_nm , .error_report .board_accord .mod dd .txt {padding-left:168px;} .error_report .board_accord .mod dd {padding:35px 45px 35px 28px;} } @media (min-width: 1600px) and (min-height : 720px) and (orientation : landscape) { .notice .sub_content section , .error_report .sub_content section {padding:40px 0 45px;} } /* 모든 학습 */ .all_study .sub_content section .cont_box {width:100%;} .all_study .search_bar .select_form {margin-right:15px;} .all_study .search_bar .select_form button {padding-left:18px;} .all_study .search_bar .input_wrap {float:left; position:relative; margin-top:17px; margin-left:3px; border-radius:20px; overflow:hidden;} .all_study .search_bar .input_wrap label {display:inline-block; padding-right:10px; font-size:17px; color:#222;} .all_study .search_bar .input_wrap input {width:305px; height:37px; padding:0 65px 0 15px; border-radius:20px; background:#fff; font-family:inherit; font-size:17px; line-height:37px; color:#222;} .all_study .search_bar .input_wrap button {position:absolute; top:0; right:0; width:50px; height:100%; background:#000; text-indent:-9999px;} .all_study .search_bar .input_wrap button:after {position:absolute; top:50%; left:50%; width:19px; height:19px; margin-top:-11px; margin-left:-11px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat -144px -117px; background-size:500px 1250px; content:"";} .all_study .course_slide {width:100%; height:100%; padding-top:15px;} .all_study .course_slide:after {display:block; clear:both; content:"";} .all_study .course_slide .card_wrap {float:left; width: calc(25% - 15px); height:367px; margin: 0 7.5px; margin-bottom:15px; overflow:hidden;} .all_study .course_slide .card_wrap a {display:block; width:100%; height:100%; z-index:9999;} .all_study .course_slide .card_head {position:relative; height:31px; padding-left:20px; border-top-right-radius:10px; border-top-left-radius:10px; line-height:30px; font-size:15px; color:#fff;} .all_study .course_slide .card_head:after {position:absolute; bottom:0; left:0; width:100%; height:3px; background:rgba(0,0,0,0.1); content:"";} .all_study .course_slide .card_body {position:relative; display:table; width:100%; height:calc(52.5% - 29px); padding:0 18px; border-bottom-right-radius:10px; border-bottom-left-radius:10px;} .all_study .course_slide .card_tit {position:relative; display:table-cell; padding:0; text-align:center; vertical-align:middle;} .all_study .course_slide .card_tit .sep {font-size:16px;line-height:1em; color:rgba(0,0,0,0.3);} .all_study .course_slide .card_tit .tit {height:56px; margin-top:5px; font-size:22px; line-height:1.3em; color:#222; -ms-text-overflow:ellipsis; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; word-break:normal; overflow:hidden;} .all_study .course_slide .card_tit .status {display:inline-block; width:108px; height:34px; margin-top:8px; border-radius: 20px; font-size: 16px; font-weight: 700; background:#fff; border-radius: 20px; border:2px solid #e90b0b; color:#e90b0b;} .all_study .course_slide .card_tit .status .num {font-family:"Roboto";} .all_study .course_slide .card_foot {margin-top:-2px; position:relative; width:100%; height:47.5%; border-radius:15px; overflow:hidden;} .all_study .course_slide .card_foot:after {position:absolute; top:0; left:50%; width:82%; height:2px; -webkit-transform:translateX(-50%); transform:translateX(-50%); content:"";} .all_study .course_slide .card_foot .canvas-wrap {position:absolute; top:50%; left:50%; margin-top:-148px; margin-left:-158px; width:316px; height:316px;} .all_study .course_slide .card_foot .canvas-wrap canvas {position:absolute; top:0; left:0; width:316px; height:316px;} .all_study .course_slide .card_foot .percent {display:block; position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%, -26px); transform: translate(-50%,-26px); font-family:"Roboto"; font-size:25px; font-weight:700;} .all_study .course_slide .card_foot .percent:after {content: '%';} .all_study .course_slide .card_foot .chart_nm {display:block; position:absolute; left:50%; top:50%; font-size:30px; transform: translate(-50%, 39px); -webkit-transform:translate(-50%, 39px); font-size:16px; font-weight:700;} /* 미진행 type0 */ .all_study .course_slide .card_wrap.type0 .card_head {background:#7f8797;} .all_study .course_slide .card_wrap.type0 .card_body, .all_study .course_slide .card_wrap.type0 .card_foot {background:#e0e4eb; border-right:1px solid #d5d9e0; border-left:1px solid #d5d9e0; border-bottom:2px solid #d5d9e0;} .all_study .course_slide .card_wrap.type0 .card_foot:after {border-bottom:2px dashed #cfd3da;} .all_study .course_slide .card_wrap.type0 .card_foot .percent , .all_study .course_slide .card_wrap.type0 .card_foot .chart_nm {color: #757b88;} /* 학습완료 type1 */ .all_study .course_slide .card_wrap.type1 .card_head {background:#ff7d22;} .all_study .course_slide .card_wrap.type1 .card_body, .all_study .course_slide .card_wrap.type1 .card_foot {background:#ffe9d9; border-right:1px solid #fbddc8; border-left:1px solid #fbddc8; border-bottom:2px solid #fbddc8;} .all_study .course_slide .card_wrap.type1 .card_foot:after {border-bottom:2px dashed #f7d4bb;} .all_study .course_slide .card_wrap.type1 .card_tit .status {background:#000; border-radius: 20px; border:2px solid #000; color:#fff;} .all_study .course_slide .card_wrap.type1 .card_foot .percent , .all_study .course_slide .card_wrap.type1 .card_foot .chart_nm {color: #ff7d22;} /* 진행중 type2 */ .all_study .course_slide .card_wrap.type2 .card_head {background:#00a7af;} .all_study .course_slide .card_wrap.type2 .card_body, .all_study .course_slide .card_wrap.type2 .card_foot {background:#def4f6; border-right:1px solid #ceecef; border-left:1px solid #ceecef; border-bottom:2px solid #ceecef;} .all_study .course_slide .card_wrap.type2 .card_foot:after {border-bottom:2px dashed #b1dde3;} .all_study .course_slide .card_wrap.type2 .card_foot .percent , .all_study .course_slide .card_wrap.type2 .card_foot .chart_nm {color: #00a7af;} @media (min-width: 1280px) and (min-height : 620px) and (orientation : landscape) { .all_study .course_slide {padding-top:25px;} .all_study .course_slide .card_wrap {height:367px; margin-bottom:25px;} .all_study .course_slide .card_head {height:36px; line-height:35px;} .all_study .course_slide .card_body {height: calc(54% - 34px);} .all_study .course_slide .card_foot {margin-top:-2px; position:relative; width:100%; height:46%;} .all_study .course_slide .card_tit {padding:0 0 5px;} .all_study .course_slide .card_tit .tit {margin-top:8px;} .all_study .course_slide .card_tit .status {margin-top:10px;} } @media (min-width : 1440px) { .all_study .course_slide .card_wrap {height:420px;} .all_study .course_slide .card_tit .status {margin-top:15px;} } @media (min-width : 1600px) { .all_study .course_slide .card_wrap {height:400px;} .all_study .course_slide {margin-right:0;} .all_study .course_slide .card_wrap {width:calc(20% - 15px);} } @media (min-width : 1800px) { .all_study .course_slide .card_wrap {height:470px;} } /* 마이페이지 팝업 */ .mypage_popup {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;} .mypage_popup .popup_content {width:720px; height:484px;} .mypage_popup .pop_cont {position:relative; padding:35px 0 21px; overflow:hidden;} .mypage_popup .cont_box:after {display:block; clear:both; content:"";} .mypage_popup .character {position:relative; width:100%; height:100%;} .mypage_popup .pop_cont:before {position:absolute;top:0; left:-176px; width:345px; height:500px; background:#ddd; -webkit-transform: skewX(135deg); transform:skewX(135deg); content:"";} .mypage_popup .char_info {position:absolute; top:0; left:0; width:100%; height:100%;} .mypage_popup .char_info .btn_wrap {position:absolute; bottom:55px; left:0; width:calc(100% - 295px); } .mypage_popup .char_info .btn_wrap .nickname {display:inline-block; padding:0 10px; border-bottom:1px solid #222; font-size:20px; line-height:1.95em; vertical-align:middle;} .mypage_popup .char_info .btn_wrap .btn_change {display:inline-block; margin-left:10px; width:89px; height:29px; background:#222; line-height:29px; font-size:14px; color:#fff; text-align:center; vertical-align:middle;} .mypage_popup .char_info .char_img {position:relative; width:calc(100% - 295px); height:100%; display:flex; align-items:center; justify-content:center;} .mypage_popup .char_info .char_img img {position:static; max-width:100%; height:auto;} .mypage_popup .info_wrap {float:right; width:240px; margin-right:40px; margin-left:15px;} .mypage_popup .info_wrap .my_info {position:relative; margin:15px 0; text-align:left;} .mypage_popup .info_wrap .my_info .std_nm {font-size:20px; line-height:1.1em; font-weight:700; color:#222;} .mypage_popup .info_wrap .my_info ul {margin:21px 0 20px;} .mypage_popup .info_wrap .my_info ul li {position:relative; font-size:15px; line-height:1.55em; color:#666;} .mypage_popup .info_wrap .my_info .btn_mypage {position:absolute; top:0; right:0; width:73px; height:23px; background:#b7b7b7; font-size:13px; line-height:23px; color:#fff; text-align:center;} .mypage_popup .info_wrap .kong_info , .mypage_popup .info_wrap .league_info {padding:24px 0; border-top:1px solid #ebebeb;} .mypage_popup .info_wrap .info {position:relative; width:100%; height:43px; background:#f3f3f3; border-radius:20px;} .mypage_popup .info_wrap .info span {position:relative; padding-left:30px; line-height:43px; font-size:18px; font-weight:400; color:#ddd;} .mypage_popup .info_wrap .info span em {font-family:"Roboto"; font-size:18px; font-weight:700; color:inherit;} .mypage_popup .info_wrap .vrt_wrap {margin-top:10px;} .mypage_popup .info_wrap .vrt_wrap:after {display:block; clear:both; content:"";} .mypage_popup .info_wrap .vrt_wrap li {float:left; display:table; width:50%; height:47px; margin:0;} .mypage_popup .info_wrap .vrt_wrap li:first-child {border-right:2px dashed #ebebeb;} .mypage_popup .info_wrap .vrt_wrap li .vrt {display:table; margin:0 auto; text-align:left;} .mypage_popup .info_wrap .vrt_wrap li .btn {position:relative; display:block; width:100%; height:100%; padding-top:25px; color:#222;} .mypage_popup .info_wrap .vrt_wrap li .btn:before {position:absolute; top:8px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-size:500px 1250px; content:"";} .mypage_popup .info_wrap .vrt_wrap li .btn_mykong:before {left:50%; margin-left:-8px; width:22px; height:16px; background-position:-2px -446px;} .mypage_popup .info_wrap .vrt_wrap li .btn_monthly:before {left:50%; margin-left:-8px; width:22px; height:15px; background-position:-48px -446px;} .mypage_popup .info_wrap .vrt_wrap li .btn_league:before {top:5px; left:50%; margin-left:-9px; width:18px; height:19px; background-position:-96px -446px;} .mypage_popup .info_wrap .kong_info .info span {color:#00a7af;} .mypage_popup .info_wrap .kong_info .kong {padding-left:25px;} .mypage_popup .info_wrap .kong_info .kong:before {position:absolute; top:50%; left:0; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-420px -2px; background-size:500px 1250px; width:20px; height:20px; margin-top:-9px; content:"";} .mypage_popup .info_wrap .league_info .star {padding-left:30px; color:#df2636;} .mypage_popup .info_wrap .league_info .star:before {position:absolute; top:50%; left:0; width:23px; height:22px; margin-top:-12px; background:url(../img/sprite/league.png?v=03.16); background-size:429px 172px; background-position:-10px -52px; content:"";} .mypage_popup .info_wrap .league_info .info.star1 {background:#ffccd0;} .mypage_popup .info_wrap .league_info .info.star2 {background:#ffdcc8;} .mypage_popup .info_wrap .league_info .info.star3 {background:#fff4b3;} .mypage_popup .info_wrap .league_info .info.star4 {background:#d3ffcc;} .mypage_popup .info_wrap .league_info .info.star5 {background:#caf2ff;} .mypage_popup .info_wrap .league_info .info.star6 {background:#cbc8ff;} .mypage_popup .info_wrap .league_info .info.star7 {background:#f0c8ff;} .mypage_popup .info_wrap .league_info .info.star8 {background:#ffc8ef;} .mypage_popup .info_wrap .league_info .info.star1 .star {color:#df2636;} .mypage_popup .info_wrap .league_info .info.star2 .star {color:#f66d37;} .mypage_popup .info_wrap .league_info .info.star3 .star {color:#ffbe1c;} .mypage_popup .info_wrap .league_info .info.star4 .star {color:#4eb147;} .mypage_popup .info_wrap .league_info .info.star5 .star {color:#3fc0dd;} .mypage_popup .info_wrap .league_info .info.star6 .star {color:#6b7cfe;} .mypage_popup .info_wrap .league_info .info.star7 .star {color:#bc6cff;} .mypage_popup .info_wrap .league_info .info.star8 .star {color:#ff4bc9;} .mypage_popup .info_wrap .league_info .info.star1 .star:before {background-position:-10px -52px;} .mypage_popup .info_wrap .league_info .info.star2 .star:before {background-position:-65px -52px;} .mypage_popup .info_wrap .league_info .info.star3 .star:before {background-position:-121px -52px;} .mypage_popup .info_wrap .league_info .info.star4 .star:before {background-position:-176px -52px;} .mypage_popup .info_wrap .league_info .info.star5 .star:before {background-position:-231px -52px;} .mypage_popup .info_wrap .league_info .info.star6 .star:before {background-position:-286px -52px;} .mypage_popup .info_wrap .league_info .info.star7 .star:before {background-position:-341px -52px;} .mypage_popup .info_wrap .league_info .info.star8 .star:before {background-position:-396px -52px;} .mypage_popup .info_wrap .league_info .vrt_wrap .vrt {line-height:1.75em;} .mypage_popup .info_wrap .league_info .vrt_wrap .vrt em {position:relative; padding-left:23px; font-family:"Roboto"; font-size:16px; font-weight:700; color:inherit;} .mypage_popup .info_wrap .league_info .vrt_wrap .vrt .rank em:before {position:absolute; top:50%; left:0; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-369px -136px; background-size:500px 1250px; width:19px; height:19px; -webkit-transform:translateY(-50%); transform:translateY(-50%); content:"";} .mypage_popup .info_wrap .league_info .vrt_wrap .vrt .point em:before {position:absolute; top:50%; left:0; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-423px -136px; background-size:500px 1250px; width:19px; height:19px; -webkit-transform:translateY(-50%); transform:translateY(-50%); content:"";} .mypage_popup .info_wrap .noleague .info {background:#f3f3f3 !important;} .mypage_popup .info_wrap .noleague .vrt_wrap li {width:100%; height:47px; margin:0;} .mypage_popup .info_wrap .noleague .vrt_wrap li:first-child {border-right:none;} .mypage_popup .info_wrap .league_info .info.star9 {background:#ffccd0;} .mypage_popup .info_wrap .league_info .info.star10 {background:#ffdcc8;} .mypage_popup .info_wrap .league_info .info.star11 {background:#fff4b3;} .mypage_popup .info_wrap .league_info .info.star12 {background:#d3ffcc;} .mypage_popup .info_wrap .league_info .info.star13 {background:#caf2ff;} .mypage_popup .info_wrap .league_info .info.star14 {background:#cbc8ff;} .mypage_popup .info_wrap .league_info .info.star15 {background:#f0c8ff;} .mypage_popup .info_wrap .league_info .info.star16 {background:#ffc8ef;} .mypage_popup .info_wrap .league_info .info.star9 .star {color:#df2636;padding-left:32px;} .mypage_popup .info_wrap .league_info .info.star10 .star {color:#f66d37;padding-left:32px;} .mypage_popup .info_wrap .league_info .info.star11 .star {color:#ffbe1c;padding-left:32px;} .mypage_popup .info_wrap .league_info .info.star12 .star {color:#4eb147;padding-left:32px;} .mypage_popup .info_wrap .league_info .info.star13 .star {color:#3fc0dd;padding-left:32px;} .mypage_popup .info_wrap .league_info .info.star14 .star {color:#6b7cfe;padding-left:32px;} .mypage_popup .info_wrap .league_info .info.star15 .star {color:#bc6cff;padding-left:32px;} .mypage_popup .info_wrap .league_info .info.star16 .star {color:#ff4bc9;padding-left:32px;} .mypage_popup .info_wrap .league_info .info.star9 .star:before {background-position:-7px -136px;width:28px; height:22px;} .mypage_popup .info_wrap .league_info .info.star10 .star:before {background-position:-62px -136px;width:28px; height:22px;} .mypage_popup .info_wrap .league_info .info.star11 .star:before {background-position:-118px -136px;width:28px; height:22px;} .mypage_popup .info_wrap .league_info .info.star12 .star:before {background-position:-173px -136px;width:28px; height:22px;} .mypage_popup .info_wrap .league_info .info.star13 .star:before {background-position:-228px -136px;width:28px; height:22px;} .mypage_popup .info_wrap .league_info .info.star14 .star:before {background-position:-283px -136px;width:28px; height:22px;} .mypage_popup .info_wrap .league_info .info.star15 .star:before {background-position:-338px -136px;width:28px; height:22px;} .mypage_popup .info_wrap .league_info .info.star16 .star:before {background-position:-393px -136px;width:28px; height:22px;} /* 캐릭터 설정 팝업 */ .char_popup {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;} .char_popup .popup_content {width:1144px; height:510px; -webkit-transform:none; transform:none; margin-left:-572px; margin-top:-255px;} .char_popup .inner_pop {background:#e5faff;} .char_popup .pop_cont {position:relative; width:100%; height:100%; padding:0; background: #e5faff; border-radius:10px; overflow:hidden;} .char_popup .pop_cont:before , .char_popup .pop_cont:after {position:absolute; content:"";} .char_popup .pop_cont:before {top:0; left:-132px; width:352px; height:500px; background:#bde8ef; -webkit-transform:skewX(135deg); transform:skewX(135deg);} .char_popup .pop_cont:after {bottom:-36px; left:-140px; width:400px; height:100px; background:#254e95;-webkit-transform:skewX(80deg); transform: skewX(80deg); z-index:10;} .char_popup .cont_box:after {display:block; clear:both; content:"";} .char_popup .col_mod {z-index:10;} .char_popup .char_selbox {position:absolute; right:35px; top:37px; width:455px; height:436px; padding:0 5px; background:#fff; border-radius:10px; overflow:hidden;} .char_popup .char_list {height:100%; padding:30px 25px 5px; overflow-y:auto;} .char_popup .char_list:after {display:block; clear:both; content:"";} .char_popup .char_list li {position:relative; float:left; width:calc(33.333% - 11px); margin-right:16px; margin-bottom:10px;} .char_popup .char_list li:nth-child(3n) {margin-right:0;} .char_popup .char_list li .box {display:block; width:120px; height:120px; border:1px solid #e2e2e2; border-radius:9px; cursor:pointer; overflow:hidden;} .char_popup .char_list li .txt {height:15px; margin-top:10px; font-size:15px; line-height:1em; color:#222;} .char_popup .char_list li.open .box {border:1px solid #ffe363;} .char_popup .char_list li.open .txt {font-weight:700; color:#ed0205;} .char_popup .char_list .open_char .box {border:1px solid #ffd61a;} .char_popup .char_list .open_char .txt {font-weight:700; color:#ed0205;} .char_popup .char_list li.on .box {position:relative; box-shadow:2px 2px 4px 0px rgba(0,0,0,0.3);} .char_popup .char_list li.on .box:before {position:absolute; top:31px; left:50%; width:46px; height:46px; margin-left:-23px; background:rgba(0,0,0,0.8); border-radius:50%; content:""; z-index:1; cursor:pointer;} .char_popup .char_list li.on .box:after {position:absolute; top:50%; left:50%; width:17px; height:10px; margin-top:-10px; margin-left:-8px; border:4px solid #fff; border-left: 0; border-bottom: 0; -webkit-transform:rotate(135deg); transform:rotate(135deg); content:""; z-index:5;} .char_popup .char_list li.lock .box {cursor:default;} .char_popup .char_list li.lock .txt {visibility:hidden;} .char_popup .char_list li.lock.X .txt {visibility:visible;} .char_popup .char_list li.open.on .box:before , .char_popup .char_list li.open.on .box:after , .char_popup .char_list li.lock.on .box:before , .char_popup .char_list li.lock.on .box:after {display:none;} .char_popup .char_list li.open.on .box , .char_popup .char_list li.lock.on .box {box-shadow:none;} .char_popup .char_list li .count-badge {position: absolute;top: -8px;right: -8px;width: 25px;height: 25px;background: #e90b0b;border-radius: 50%;font-size: 12px;font-weight: 700;line-height: 22px;color: #fff;text-align: center;z-index: 10;} .char_popup .char_info {position:relative; float:left; display:flex; flex-direction:column; align-items:center; width:calc(100% - 520px); height:100%; background-size:100%; content:"";} .char_popup .char_info .char_img {position:relative; width:100%; flex:1;} .char_popup .char_info .char_img img {position:absolute; height:auto; top:50%; left:50%; transform:translate(-50%,-50%);} .char_popup .char_info:before , .char_popup .char_info:after {position:absolute; background-repeat:no-repeat; background-size:100%; content:"";} .char_popup .char_desc {position:relative; width:100%; padding:10px 15px 70px 15px; text-align:center;} .char_popup .char_desc .char_tit {font-size:22px; line-height:1em; font-weight:700; color:#254e95; text-align:center;} .char_popup .char_desc .char_tit .tit_nm {font-family:"Roboto"; font-size:25px; font-weight:700; color:inherit; vertical-align:-1px;} .char_popup .char_desc .char_txt {margin-top:13px; font-size:16px; color:#9caaae; line-height:1.35em; text-align:center;} .char_popup .char_desc .input_wrap {width:100%; height:46px; margin-top:26px; padding:1px 0; padding-bottom:2px; background:#fff; border:2px solid #254e95; border-radius:25px; line-height:46px; overflow:hidden;} .char_popup .char_desc .input_nick {width:100%; height:100%; padding:0 15px; margin:0 auto; background:#fff; font-size:22px; color:#254e95; text-align:center;} .char_popup .char_desc .btn_wrap {margin-top:15px;text-align:center;} .char_popup .char_desc .btn_wrap .btn {width:105px; height:40px; background:#b7acf0; border-radius:20px; line-height:31px; font-size:16px; color:#fff; text-align:center;} .char_popup .char_desc .btn_wrap .chg_nick {margin-right:10px; background:#83cfef;} .char_popup .char_desc .btn_wrap .chg_char {background:#b7acf0;} @media (max-width:1279px) { .char_popup .popup_content {width:960px; margin-left:-480px;} .char_popup .char_info {width:calc(100% - 360px);} .char_popup .char_selbox {right:30px; width:320px;} .char_popup .char_list li {width:calc(50% - 8px);} .char_popup .char_list li:nth-child(3n) {margin-right:16px;} .char_popup .char_list li:nth-child(2n) {margin-right:0;} } @media (max-width:1023px) { .char_popup .popup_content {width:840px; margin-left:-420px;} .char_popup .char_info {width:calc(100% - 230px);} .char_popup .char_selbox {right:30px; width:188px;} .char_popup .char_list li {float:none; width:120px; margin:0 auto 24px;} .char_popup .char_list li:nth-child(3n) {margin:0 auto 24px;} .char_popup .char_list li:nth-child(2n) {margin:0 auto 24px;} } /* 캐릭터 획득 */ .al_container {display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:5000;} .al_container .dim {background:rgba(0,0,0,0.6);} .al_container .popup_content {width:1144px; height:510px; -webkit-transform:none; transform:none; margin-left:-572px; margin-top:-255px;} .al_container .inner_pop {position:relative; background:linear-gradient( to top, #0e0b36, #0f1126);} .al_container .inner_pop:before {position:absolute; top:0; left:0; width:100%; height:411px; background:url(../img/character/al/bg_al_back.png) repeat-x; background-size:333px 411px; content:"";} .al_container .pop_cont {width:100%; height:100%; padding:0;} .al_container .al_list .al , .al_container .open_wrap span {display:block; background-size:100% 100%; background-repeat: no-repeat;} .al_container .select_wrap {display:none;} .al_container .select_wrap .txt {display:inline-block; margin-top:100px; padding:0 23px; border-bottom:2px solid #09e6b8; font-size:24px; line-height:2.4em; color:#fff;} .al_container .al_list {position:absolute; top:225px; left:0; width:100%; height:auto; font-size:0; text-align:center; z-index:100;} .al_container .al_list .al {position:relative; display:inline-block; width:118px; height:160px; margin:0 1.5%; z-index:999; cursor:pointer;} .al_container .al_list .al:before {position:absolute; bottom:-11px; left:14px; width:91px; height:24px; background-image: url(../img/character/al/bg_shadow.png); background-size:100% 100%; z-index:-1; content:"";} .al_container .al_list .al.al_blue {background-image: url(../img/character/al/al_blue.png); } .al_container .al_list .al.al_purple {background-image: url(../img/character/al/al_purple.png);} .al_container .al_list .al.al_yellow {background-image: url(../img/character/al/al_yellow.png);} .al_container .al_list .al.al_red {background-image: url(../img/character/al/al_red.png);} .al_container .al_list .al.al_pink {background-image: url(../img/character/al/al_pink.png);} .al_container .al_list .al {-webkit-animation-name:vibro; animation-name:vibro; -webkit-animation-duration:3.5s; animation-duration:3.5s; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; animation-timing-function: ease-out;} .al_container .al_list .al:nth-child(1) {animation-delay:0.1s;} .al_container .al_list .al:nth-child(2) {animation-delay:0.4s;} .al_container .al_list .al:nth-child(3) {animation-delay:0.2s;} .al_container .al_list .al:nth-child(4) {animation-delay:0.5s;} .al_container .al_list .al:nth-child(5) {animation-delay:0.3s;} .al_container .al_list .al:hover {animation-name: wabble; -webkit-animation-name: wabble; -webkit-animation-duration:1s !important; animation-duration:1s !important; -webkit-animation-delay:0.05s !important; animation-delay:0.05s !important; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite;} .al_container .open_wrap {display:none; position:absolute; top:50%; left:0; width:100%; height:auto; margin-top:-61px; -webkit-transform:translateY(-50%); transform:translateY(-50%); font-size:0; text-align:center; z-index:100;} .al_container .wrapper {position:relative; display:inline-block; width:170px; height:350px; margin:0;} .al_container .open_area {position:absolute; bottom:34px; left:50%; width:400px; height:350px; -webkit-transform:translateX(-50%); transform:translateX(-50%);} .al_container .open_area .img_egg_break {position:absolute; bottom:0; left:50%; width:260px; margin-left:-130px; height:187px; z-index:999; background-image: none;} .al_container .open_area .bg_character {display:none; position:absolute; bottom:-7px; left:50%; width:30%; height:30%; margin-left:-59px; background-image:url(../img/character/gumiho/ACDE851534_01_236.png); z-index:50;background-size: contain;background-repeat: no-repeat;background-position: center bottom;} .al_container .light_group {position:absolute; top:100%; left:50%; width:305px; height:227px; margin-top:-191px; margin-left:-152px; z-index:-1;} .al_container .light_group .bg_pinklight {display:none; position:absolute; top:0; left:0; width:100%; height:100%; background-image: url(../img/character/al/light_pink.png); z-index:10;} .al_container .light_group .light {display:none; position:absolute; z-index:20;} .al_container .light_group .bg_light_1 {top:-87px; left:-63px; width:183px; height:245px; background-image: url(../img/character/al/light_1.png);} .al_container .light_group .bg_light_2 {top:-64px; left:-16px; width:174px; height:237px; background-image: url(../img/character/al/light_2.png);} .al_container .light_group .bg_light_3 {top:-77px; left:50%; margin-left:-79px; width:158px; height:238px; background-image: url(../img/character/al/light_3.png);} .al_container .light_group .bg_light_4 {top:-57px; right:-8px; width:167px; height:237px; background-image: url(../img/character/al/light_4.png);} .al_container .light_group .bg_light_5 {top:-90px; right:-71px; width:202px; height:254px; background-image: url(../img/character/al/light_5.png);} .al_container .light_group .star {display:none; position:absolute; z-index:30;} .al_container .light_group .bg_star_1 {top:-52px; left:-21px; width:13px; height:13px; background-image: url(../img/character/al/star_1.png);} .al_container .light_group .bg_star_2 {top:36px; left:-7px; width:11px; height:12px; background-image: url(../img/character/al/star_2.png);} .al_container .light_group .bg_star_3 {top:-5px; left:24px; width:25px; height:16px; background-image: url(../img/character/al/star_3.png);} .al_container .light_group .bg_star_4 {top:48px; left:43px; width:39px; height:22px; background-image: url(../img/character/al/star_4.png);} .al_container .light_group .bg_star_5 {top:46px; left:105px; width:54px; height:39px; background-image: url(../img/character/al/star_5.png);} .al_container .light_group .bg_star_6 {top:57px; left:235px; width:8px; height:8px; background-image: url(../img/character/al/star_6.png);} .al_container .light_group .bg_star_7 {top:27px; right:-4px; width:36px; height:37px; background-image: url(../img/character/al/star_7.png);} .al_container .light_group .bg_star_8 {top:-13px; right:27px; width:12px; height:13px; background-image: url(../img/character/al/star_8.png);} .al_container .light_group .bg_star_9 {top:-80px; right:-8px; width:8px; height:7px; background-image: url(../img/character/al/star_9.png);} .al_container .open_wrap .btn_view {display:none; position: absolute; left: 50%; bottom: -95px; width: 180px; height: 43px; padding: 0 50px 0 30px; margin-left: -90px; background: #00a7af; border-radius:20px; font-size: 15px; font-weight:700; line-height: 43px; color:#fff; z-index:9999;} .al_container .open_wrap .btn_view:before ,.al_container .open_wrap .btn_view:after {position:absolute; top:50%; right:20px; width:20px; height:1px; margin-top:-1px; background:#fff; content:"";} .al_container .open_wrap .btn_view:after {width:9px; height:9px; margin-top:-5px; border:1px solid #fff; border-top:0; border-right:0; background:none; -webkit-transform:rotate(-135deg); transform:rotate(-135deg);} /* 캐릭터 획득 - 애니메이션 효과 */ .al_container .open_area .img_egg_break { -webkit-animation-duration: 0.8s; animation-duration:0.8s; -webkit-animation-delay: 0s; animation-delay: 0s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; /*-webkit-animation-fill-mode: backwards; */ /*animation-fill-mode: backwards;*/ } .al_container .light_group .bg_pinklight { -webkit-animation-duration:0.3s; animation-duration:0.3s; -webkit-animation-delay:2s; animation-delay:2s; -webkit-animation-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); animation-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .al_container .light_group .light { -webkit-animation-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); animation-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .al_container .light_group .bg_light_1 { -webkit-animation-duration:0.4s; animation-duration:0.4s; -webkit-animation-delay:2.25s; animation-delay:2.25s; } .al_container .light_group .bg_light_2 { -webkit-animation-duration:0.3s; animation-duration:0.3s; -webkit-animation-delay:2.15s; animation-delay:2.15s; } .al_container .light_group .bg_light_3 { -webkit-animation-duration:0.2s; animation-duration:0.2s; -webkit-animation-delay:2.2s; animation-delay:2.2s; } .al_container .light_group .bg_light_4 { -webkit-animation-duration:0.3s; animation-duration:0.3s; -webkit-animation-delay:2.15s; animation-delay:2.15s; } .al_container .light_group .bg_light_5 { -webkit-animation-duration:0.4s; animation-duration:0.4s; -webkit-animation-delay:2.25s; animation-delay:2.25s; } .al_container .light_group .star { -webkit-animation-duration:0.1s; animation-duration:0.1s; -webkit-animation-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); animation-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .al_container .light_group .bg_star_1 { -webkit-animation-delay:2.5s; animation-delay:2.5s; } .al_container .light_group .bg_star_2 { -webkit-animation-delay:2.7s; animation-delay:2.7s; } .al_container .light_group .bg_star_3 { -webkit-animation-delay:2.9s; animation-delay:2.9s; } .al_container .light_group .bg_star_4 { -webkit-animation-delay:2.4s; animation-delay:2.4s; } .al_container .light_group .bg_star_5 { -webkit-animation-delay:2.8s; animation-delay:2.8s; } .al_container .light_group .bg_star_6 { -webkit-animation-delay:2.5s; animation-delay:2.5s; } .al_container .light_group .bg_star_7 { -webkit-animation-delay:2.8s; animation-delay:2.8s; } .al_container .light_group .bg_star_8 { -webkit-animation-delay:2.7s; animation-delay:2.7s; } .al_container .light_group .bg_star_9 { -webkit-animation-delay:2.9s; animation-delay:2.9s; } .fanfare { -webkit-animation-name:fanfare; animation-name:fanfare; } .zoomIn { -webkit-animation-name:zoomIn; animation-name:zoomIn; } .scale-in-br { -webkit-animation-name:scale-in-br; animation-name: scale-in-br; } .scale-in-bl { -webkit-animation-name:scale-in-bl; animation-name: scale-in-bl; } .scale-in-bottom { -webkit-animation-name:scale-in-bottom; animation-name: scale-in-bottom; } .bounceInUp { -webkit-animation-name:bounceInUp; animation-name:bounceInUp; -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-delay:2.1s; animation-delay:2.1s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-animation-fill-mode: none; animation-fill-mode: none; } .floater { -webkit-animation-name:floater; animation-name: floater; -webkit-animation-duration:1.4s; animation-duration:1.4s; -webkit-animation-delay:0s; animation-delay:0s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count:infinite; animation-iteration-count: infinite; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes vibro { 0%, 100%{transform: translateY(0px);} 10%, 30%, 50%, 70%, 90%{transform: translateY(6px);} 20%, 40%, 60%, 80%{transform: translateY(-6px);} } @keyframes vibro { 0%, 100%{transform: translateY(0px);} 10%, 30%, 50%, 70%, 90%{transform: translateY(6px);} 20%, 40%, 60%, 80%{transform: translateY(-6px);} } @-webkit-keyframes wabble { 0% {transform: rotateZ(0deg);} 14% {transform: rotateZ(-14deg);} 28% {transform: rotateZ(11deg);} 43% {transform: rotateZ(-9deg);} 57% {transform: rotateZ(7deg);} 71% {transform: rotateZ(-6deg);} 86% {transform: rotateZ(5deg);} 100% {transform: rotateZ(0);} } @keyframes wabble { 0% {transform: rotateZ(0deg);} 14% {transform: rotateZ(-15deg);} 28% {transform: rotateZ(12deg);} 43% {transform: rotateZ(-10deg);} 57% {transform: rotateZ(8deg);} 71% {transform: rotateZ(-6deg);} 86% {transform: rotateZ(3deg);} 100% {transform: rotateZ(0);} } @-webkit-keyframes fanfare { 0%, 100% {transform: scale(1);} 30% {transform: rotateZ(10deg);} 40%, 60%, 80% {transform: rotateZ(-10deg);} 50%, 70%, 90% {transform: rotateZ(10deg);} } @keyframes fanfare { 0%, 100% {transform: scale(1);} 30% {transform: rotateZ(10deg);} 40%, 60%, 80% {transform: rotateZ(-10deg);} 50%, 70%, 90% {transform: rotateZ(10deg);} } @-webkit-keyframes zoomIn { 0% {-webkit-transform: scale(0); transform: scale(0); opacity: 1;} 100% {-webkit-transform: scale(1); transform: scale(1); opacity: 1;} } @keyframes zoomIn { 0% {-webkit-transform: scale(0); transform: scale(0); opacity: 1;} 100% {-webkit-transform: scale(1); transform: scale(1); opacity: 1;} } @-webkit-keyframes scale-in-br { 0% {-webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 1;} 100% {-webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 1;} } @keyframes scale-in-br { 0% {-webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 1;} 100% {-webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 1;} } @-webkit-keyframes scale-in-bl { 0% {-webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; opacity: 1;} 100% {-webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; opacity: 1;} } @keyframes scale-in-bl { 0% {-webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; opacity: 1;} 100% {-webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; opacity: 1;} } @-webkit-keyframes scale-in-bottom { 0% {-webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; opacity: 1;} 100% {-webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; opacity: 1;} } @keyframes scale-in-bottom { 0% {-webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; opacity: 1;} 100% {-webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; opacity: 1;} } @-webkit-keyframes bounceInUp { from {-webkit-transform: translate3d(0, 0, 0) scaleY(2); transform: translate3d(0, 0, 0) scaleY(2); opacity: 0;} 55% {-webkit-transform: translate3d(0, -220px, 0) scaleY(0.9);; transform: translate3d(0, -220px, 0) scaleY(0.9); opacity: 1;} 75% {-webkit-transform: translate3d(0, 20px, 0) scaleY(0.95); transform: translate3d(0, 20px, 0) scaleY(0.95);} 90% {-webkit-transform: translate3d(0, -40px, 0) scaleY(0.985); transform: translate3d(0, -40px, 0) scaleY(0.985);} to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); cursor:pointer; z-index:1000;} } @keyframes bounceInUp { from {-webkit-transform: translate3d(0, 0, 0) scaleY(2); transform: translate3d(0, 0, 0) scaleY(2); opacity: 0;} 55% {-webkit-transform: translate3d(0, -220px, 0) scaleY(0.9);; transform: translate3d(0, -220px, 0) scaleY(0.9); opacity: 1;} 75% {-webkit-transform: translate3d(0, 20px, 0) scaleY(0.95); transform: translate3d(0, 20px, 0) scaleY(0.95);} 90% {-webkit-transform: translate3d(0, -40px, 0) scaleY(0.985); transform: translate3d(0, -40px, 0) scaleY(0.985);} to {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); cursor:pointer; z-index:1000;} } @-webkit-keyframes floater { 50% {-webkit-transform: translateY(-8px); transform: translateY(-8px);} } @keyframes floater { 50% {-webkit-transform: translateY(-8px); transform: translateY(-8px);} } @media (max-width:1279px) { .al_container .popup_content {width:960px; margin-left:-480px;} } @media (max-width:1023px) { .al_container .popup_content {width:840px; margin-left:-420px;} } /* 리그순위1 */ .sub_wrap.league1 .sub_content section {top:0; height:100%; min-height: 180px; padding:50px 0; background:#f3f3f3;} .sub_wrap.league1 .sub_content section .cont_box {flex-flow:column; margin-top:-20px;} .league1 .sub_head {border-bottom:1px solid #222;} .league1 .sub_tit .label {display: inline-block; height:28px; margin-top:3px; margin-left:10px; padding:0 15px; background:#def4f6; border-radius:20px; vertical-align:middle;} .league1 .sub_tit .label span {position:relative; padding-left:26px; font-size:15px; line-height:28px; color:#00a7af;} .league1 .sub_tit .label span:before {position:absolute; top:1px; left:0; width:19px; height:19px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-311px -136px; background-size:500px 1250px; content:"";} .league1 .sub_tit .label em {font-family:"Roboto"; font-size:inherit; color:#00a7af;} .league1 .sub_tit .ref {float:right; margin-top:33px; font-size:15px; color:#666;} .league1 .txt_wrap {position:relative; padding-top: 63px; font-size:23px; line-height:1.5em; color:#222; text-align:center;} .league1 .txt_wrap:before {position:absolute; top:0; left:50%; width:430px; height:43px; margin-left:-215px; background: url('../img/sprite/league.png?v=03.16') no-repeat; background-size: 429px 172px; content:"";} .league1 .txt_wrap strong {font-size:inherit; font-weight:900; line-height:1.5em; color:inherit;} .league1 .btn_wrap {position:relative; margin-top:50px; margin-bottom:25px; margin-bottom:1.8%; text-align:center;} .league1 .btn_start {display:inline-block; position:relative; height:50px; padding:0 70px 0 38px; background:#222; border-radius:50px; text-transform:uppercase; font-family:"Roboto"; font-size:20px; font-weight:700; line-height:50px; color:#fff;} .league1 .btn_start:before , .league1 .btn_start:after {position:absolute; top:50%; right:38px; width:20px; height:1px; margin-top:-1px; background:#fff; content:"";} .league1 .btn_start:after {width:9px; height:9px; margin-top:-5px; border:1px solid #fff; border-top:0; border-right:0; background:none; -webkit-transform:rotate(-135deg); transform:rotate(-135deg);} @media (min-width:1281px) { .sub_wrap.league1 .sub_content section .cont_box {margin-top:-40px;} .league1 .btn_wrap {margin-top:70px;} } @media (max-height : 631px) and (orientation : landscape) { .sub_wrap.league1 .sub_content section .cont_box {margin-top:0;} .league1 .btn_wrap {margin-top:50px;} } @media (min-width:1680px) { .sub_wrap.league1 .sub_content section .cont_box {margin-top:-63px;} } /* 리그순위2 */ .sub_wrap.league2 .sub_content section {min-height:0} .league2 .sub_head {border-bottom:1px solid #222;} .league2 .sub_tit .label {display: inline-block; height:28px; margin-top:3px; margin-left:10px; padding:0 15px; background:#def4f6; border-radius:20px; vertical-align:middle;} .league2 .sub_tit .label span {position:relative; padding-left:26px; font-size:15px; line-height:28px; color:#00a7af;} .league2 .sub_tit .label span:before {position:absolute; top:1px; left:0; width:19px; height:19px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-311px -136px; background-size:500px 1250px; content:"";} .league2 .sub_tit .label em {font-family:"Roboto"; font-size:inherit; color:#00a7af;} .league2 .sub_tit .btn_point {display: inline-block; height:28px; margin-top:3px; margin-left:10px; padding:0 16px; background:#00a7af; border-radius:20px; vertical-align:middle;} .league2 .sub_tit .btn_point span {position:relative; padding-left:33px; font-size:15px; line-height:28px; color:#fff600;} .league2 .sub_tit .btn_point span:before {position:absolute; top:0px; left:-1px; width:28px; height:20px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-2px -707px; background-size:500px 1250px; content:"";} .league2 .sub_tit .ref {float:right; margin-top:33px; font-size:15px; color:#666;} .league2 .sub_content section .cont_box .aside_league {width:16.72%;} .league2 .sub_content section .cont_box .ranking {width:83.28%; padding:30px 67px 35px;} .league2 .league_star {width:100%; height:100%;} .league2 .league_star .star_wrap {display:table; position:relative; width:100%; height:20.5%; padding:0 15px;} .league2 .league_star .star_wrap:nth-child(1) {background:#bbb;} .league2 .league_star .star_wrap:nth-child(2) {background:#999;} .league2 .league_star .star_wrap:nth-child(3) {background:#666;} .league2 .league_star .star_wrap .mod {display:table-cell; vertical-align:middle; padding:15px 0;} .league2 .league_star .star_wrap:after {position:absolute; top:-10px; left:50%; margin-left:-13px; border-bottom:10px solid #f3f3f3; border-left:13px solid transparent; border-right:13px solid transparent; z-index:3; content:"";} .league2 .league_star .star_wrap:first-child:after {display:none;} .league2 .league_star .star_head {display:table; position:relative; width:100%; height:70px; height:26%;} .league2 .league_star .star_head .tit_wrap {display:table-cell; position:relative; margin-left: 8px; text-align:center; vertical-align:middle;} .league2 .league_star .star_head .ico_star , .league2 .league_star .star_head .star_tit {display:inline-block; vertical-align:middle;} .league2 .league_star .star_head .ico_star {width:43px; height:43px; margin-right:5px; background: url('../img/sprite/league.png?v=03.16') no-repeat; background-size: 429px 172px;} .league2 .league_star .star_head .star_tit .tit {font-family:"Roboto"; font-size:18px; line-height:1em; color:#fff; text-transform:uppercase;} .league2 .league_star .star_head .star_tit .tit em {font-family:inherit; font-size:inherit; color:inherit;} .league2 .league_star .star_head .star_tit .txt {font-size:13px; line-height:1.5em; font-weight:700; color:#fff;} .league2 .league_star .star_body {display:table; width:100%; padding:15px 0; border-top:1px solid rgba(255,255,255,0.2); text-align:center;} .league2 .league_star .star_body .info_wrap {display:table-cell; vertical-align:middle;} .league2 .league_star .star_body .info_wrap .img_circle {display:block; width:90px; height:90px; margin:0 auto; border-radius:50%; border:2px solid #e9e9e9; overflow:hidden; background:#f0f0f0;} .league2 .league_star .star_body .info_wrap .img_circle img {display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom;} .league2 .league_star .star_body .my_nickname {margin-top:10px; font-size:16px; line-height:1em; color:#222;} .league2 .league_star .star_body .rank_info {margin-top:4.5%;} .league2 .league_star .star_body .rank_info span {position:relative; margin:0 5px; padding-left:24px; font-size:14px; line-height:1em; color:#222;} .league2 .league_star .star_body .rank_info em {font-family:"Roboto"; font-size:16px; font-weight:700; color:#222;} .league2 .league_star .star_body .rank_info span:before {position:absolute; top:0; left:0; width:19px; height:19px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-size:500px 1250px; content:"";} .league2 .league_star .star_body .rank_info .my_rank:before {background-position:-369px -136px;} .league2 .league_star .star_body .rank_info .my_point:before {background-position:-423px -136px;} .league2 .league_star .star_wrap.now {height:59%; min-height:254px;} .league2 .league_star .star_wrap.now .star_head {height:26%;} .league2 .league_star .star_wrap.now .star_body {height:67%;} .league2 .league_star .star_wrap.now.star1 {height:79.5%;} .league2 .league_star .star_wrap.now.star1 .star_head {height:20.5%;} .league2 .league_star .star_wrap.now.star1 .star_body {height:50%;} /*.league2 .league_star .star_wrap.now.star8 {height:79.5%;} .league2 .league_star .star_wrap.now.star8 .star_head {height:20.5%;} .league2 .league_star .star_wrap.now.star8 .star_body {height:50%;}*/ .league2 .league_star .star_wrap.star1 {background:#df2636;} .league2 .league_star .star_wrap.star2 {background:#f66d37;} .league2 .league_star .star_wrap.star3 {background:#ffbe1c;} .league2 .league_star .star_wrap.star4 {background:#4eb147;} .league2 .league_star .star_wrap.star5 {background:#3fc0dd;} .league2 .league_star .star_wrap.star6 {background:#6b7cfe;} .league2 .league_star .star_wrap.star7 {background:#bc6cff;} .league2 .league_star .star_wrap.star8 {background:#ff4bc9;} .league2 .league_star .star_wrap.star1:after {border-bottom:10px solid #df2636;} .league2 .league_star .star_wrap.star2:after {border-bottom:10px solid #f66d37;} .league2 .league_star .star_wrap.star3:after {border-bottom:10px solid #ffbe1c;} .league2 .league_star .star_wrap.star4:after {border-bottom:10px solid #4eb147;} .league2 .league_star .star_wrap.star5:after {border-bottom:10px solid #3fc0dd;} .league2 .league_star .star_wrap.star6:after {border-bottom:10px solid #6b7cfe;} .league2 .league_star .star_wrap.star7:after {border-bottom:10px solid #bc6cff;} .league2 .league_star .star_wrap.star8:after {border-bottom:10px solid #ff4bc9;} .league2 .league_star .star_wrap.star1 .star_head .ico_star {background-position:0 0;} .league2 .league_star .star_wrap.star2 .star_head .ico_star {background-position:-55px 0;} .league2 .league_star .star_wrap.star3 .star_head .ico_star {background-position:-110px 0;} .league2 .league_star .star_wrap.star4 .star_head .ico_star {background-position:-165px 0;} .league2 .league_star .star_wrap.star5 .star_head .ico_star {background-position:-220px 0;} .league2 .league_star .star_wrap.star6 .star_head .ico_star {background-position:-275px 0;} .league2 .league_star .star_wrap.star7 .star_head .ico_star {background-position:-331px 0;} .league2 .league_star .star_wrap.star8 .star_head .ico_star {background-position:-386px 0;} .league2 .league_star .star_wrap.star1 .star_head .star_tit .tit {color:#ffdfe2;} .league2 .league_star .star_wrap.star2 .star_head .star_tit .tit {color:#ffebd2;} .league2 .league_star .star_wrap.star3 .star_head .star_tit .tit {color:#fff4b3;} .league2 .league_star .star_wrap.star4 .star_head .star_tit .tit {color:#d3ffcc;} .league2 .league_star .star_wrap.star5 .star_head .star_tit .tit {color:#d4f4ff;} .league2 .league_star .star_wrap.star6 .star_head .star_tit .tit {color:#dddbff;} .league2 .league_star .star_wrap.star7 .star_head .star_tit .tit {color:#f3d7ff;} .league2 .league_star .star_wrap.star8 .star_head .star_tit .tit {color:#ffdff6;} .league2 .league_star .star_wrap.star1 .star_head .star_tit .txt {color:#770912;} .league2 .league_star .star_wrap.star8 .star_head .star_tit .txt {color:#90116a;} .league2 .league_star .star_wrap.now.star15 {height:79.5%;} .league2 .league_star .star_wrap.now.star15 .star_head {height:20.5%;} .league2 .league_star .star_wrap.now.star15 .star_body {height:50%;} .league2 .league_star .star_wrap.star9 {background:#df2636;} .league2 .league_star .star_wrap.star10 {background:#f66d37;} .league2 .league_star .star_wrap.star11 {background:#ffbe1c;} .league2 .league_star .star_wrap.star12 {background:#4eb147;} .league2 .league_star .star_wrap.star13 {background:#3fc0dd;} .league2 .league_star .star_wrap.star14 {background:#6b7cfe;} .league2 .league_star .star_wrap.star15 {background:#bc6cff;} .league2 .league_star .star_wrap.star16 {background:#ff4bc9;} .league2 .league_star .star_wrap.star9:after {border-bottom:10px solid #df2636;} .league2 .league_star .star_wrap.star10:after {border-bottom:10px solid #f66d37;} .league2 .league_star .star_wrap.star11:after {border-bottom:10px solid #ffbe1c;} .league2 .league_star .star_wrap.star12:after {border-bottom:10px solid #4eb147;} .league2 .league_star .star_wrap.star13:after {border-bottom:10px solid #3fc0dd;} .league2 .league_star .star_wrap.star14:after {border-bottom:10px solid #6b7cfe;} .league2 .league_star .star_wrap.star15:after {border-bottom:10px solid #bc6cff;} .league2 .league_star .star_wrap.star16:after {border-bottom:10px solid #ff4bc9;} .league2 .league_star .star_wrap.star9 .star_head .ico_star {background-position:0 -84px;} .league2 .league_star .star_wrap.star10 .star_head .ico_star {background-position:-55px -84px;} .league2 .league_star .star_wrap.star11 .star_head .ico_star {background-position:-110px -84px;} .league2 .league_star .star_wrap.star12 .star_head .ico_star {background-position:-165px -84px;} .league2 .league_star .star_wrap.star13 .star_head .ico_star {background-position:-220px -84px;} .league2 .league_star .star_wrap.star14 .star_head .ico_star {background-position:-275px -84px;} .league2 .league_star .star_wrap.star15 .star_head .ico_star {background-position:-331px -84px;} .league2 .league_star .star_wrap.star16 .star_head .ico_star {background-position:-386px -84px;} .league2 .league_star .star_wrap.star9 .star_head .star_tit .tit {color:#ffdfe2;} .league2 .league_star .star_wrap.star10 .star_head .star_tit .tit {color:#ffebd2;} .league2 .league_star .star_wrap.star11 .star_head .star_tit .tit {color:#fff4b3;} .league2 .league_star .star_wrap.star12 .star_head .star_tit .tit {color:#d3ffcc;} .league2 .league_star .star_wrap.star13 .star_head .star_tit .tit {color:#d4f4ff;} .league2 .league_star .star_wrap.star14 .star_head .star_tit .tit {color:#dddbff;} .league2 .league_star .star_wrap.star15 .star_head .star_tit .tit {color:#f3d7ff;} .league2 .league_star .star_wrap.star16 .star_head .star_tit .tit {color:#ffdff6;} .league2 .league_star .star_wrap.star9 .star_head .star_tit .txt {color:#770912;} .league2 .league_star .star_wrap.star15 .star_head .star_tit .txt {color: rgba(0,0,0,0.7);} .league2 .league_star .star_wrap.star16 .star_head .star_tit .txt {color:#90116a;} .league2 .ranking .content {width:100%; height:100%; padding:0 6px; overflow-y:auto;} .league2 .ranking .top_rank {width:100%; display:flex; align-items:stretch; gap:16px; padding:0 0 30px;} .league2 .ranking .top_rank:after {display:none;} .league2 .ranking .top_rank .top_mod {flex:1; display:flex; flex-direction:column;} .league2 .ranking .top_rank .top_mod:first-child {margin-left:0;} .league2 .ranking .top_rank .top_mod .img_wrap {position:relative; width:100%; height:250px; border-radius:14px 14px 0 0; /*border:2px solid #e9e9e9;*/ border-bottom:none; overflow:hidden;} .league2 .ranking .top_rank .top_mod .img_wrap .nickname {position:absolute; bottom:0; left:0; width:100%; height:40px; background:rgba(0,0,0,0.6); font-size:14px; font-weight:700; line-height:40px; color:#fff; text-align:center; z-index:2;} .league2 .ranking .top_rank .top_mod .inner {display:flex; flex-direction:column; width:100%; height:auto; margin:0;} .league2 .ranking .top_rank .top_mod .txt_wrap {display:block; padding:14px 16px 16px; background:#fff; /*border:2px solid #e9e9e9; */border-top:none; border-radius:0 0 14px 14px; text-align:center; flex:1;} .league2 .ranking .top_rank .top_mod .txt_wrap p {width:100%; line-height:1.4em; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; text-align:center;} .league2 .ranking .top_rank .top_mod .txt_wrap .rank_num {font-family:"Roboto"; font-size:32px; font-weight:700; line-height:1em; color:#222;} .league2 .ranking .top_rank .top_mod .txt_wrap .name {margin-top:10px; font-size:15px; color:#222;} .league2 .ranking .top_rank .top_mod .txt_wrap .campus {font-size:14px; color:#999;} .league2 .ranking .top_rank .top_mod .txt_wrap .point {position:relative; margin-top:8px; padding-left:24px; font-family:"Roboto"; font-size:16px; font-weight:700; color:#00a7af; display:inline-block; text-align:left;} .league2 .ranking .top_rank .top_mod .txt_wrap .point:before {position:absolute; top:1px; left:0; width:20px; height:19px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-311px -170px; background-size:500px 1250px; content:"";} /* 캐릭터 이미지: 전신이 보이도록 object-fit:contain 사용 */ .league2 .ranking .top_rank .top_mod .img_wrap img {position:absolute; left:0; top:0; width:100%; height:calc(100% - 40px); object-fit:contain; object-position:bottom center; max-width:100%;} .league2 .rank_list {width:100%;} .league2 .rank_list > ul {height:100%; padding:0 3px;} .league2 .ranking .rank_list li:first-child {border-top:1px solid #d7d7d7;} .league2 .ranking .rank_list li {width:100%; height:80px; padding:0 35px 0 45px; border-bottom:1px solid #d7d7d7; font-size:0;} .league2 .ranking .rank_list li p {display:inline-block; font-size:15px; line-height:79px; color:#222; vertical-align:middle;} .league2 .ranking .rank_list li img {display:inline-block; width:54px; height:64px; max-width:none; object-fit:contain; object-position:bottom center; border-radius:10px; vertical-align:middle;} .league2 .ranking .rank_list li .bar img {position:absolute; right:0; bottom:0; transform:translateX(50%);} .league2 .ranking .rank_list li .rank_num {width:6.3%; font-family:"Roboto"; font-size:20px; font-weight:700; text-align:center;} .league2 .ranking .rank_list li .img_wrap {width:7%; text-align:center;} .league2 .ranking .rank_list li .info {width:72%; margin-left:10px; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .league2 .ranking .rank_list li .info .nickname {font-weight:700;} .league2 .ranking .rank_list li .info .campus {margin-left:5px; color:#999;} .league2 .ranking .rank_list li .point {position:relative; width:12%; padding-left:24px; font-family:"Roboto"; font-size:16px; font-weight:700; color:#00a7af; text-align:left; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .league2 .ranking .rank_list li .point:before {position:absolute; top:50%; left:0; width:20px; height:19px; margin-top:-10px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-311px -170px; background-size:500px 1250px; content:"";} .league2 .ranking .rank_list .msg_li {display:table; position:relative; text-align:center; background:skyblue;} .league2 .ranking .rank_list .msg_li:before , .league2 .ranking .rank_list .msg_li:after {position:absolute; top:50%; width:292px; height:14px; margin-top:-7px; background-image: url('../img/bg/bg_msg_star.png'); background-repeat: repeat-x; background-size:36.5px 13px; content:"";} .league2 .ranking .rank_list .msg_li:before {left:1%;} .league2 .ranking .rank_list .msg_li:after {right:1%;} .league2 .ranking .rank_list .msg_li .txt_wrap {display:table-cell; vertical-align:middle;} .league2 .ranking .rank_list .msg_li .txt { width:315px; margin-left:-10px; font-size:15px; line-height:1.35em; font-weight:700;} .league2 .ranking .rank_list .msg_li.bluecl {background:#dcecff;} .league2 .ranking .rank_list .msg_li.redcl {background:#ffe5e3;} .league2 .ranking .rank_list .msg_li.bluecl .txt {color:#16559c;} .league2 .ranking .rank_list .msg_li.redcl .txt {color:#d02c22;} @media (min-width:1281px){ .league2 .ranking .top_rank .top_mod .img_wrap {margin-right:0;} } @media (min-width:1334px){ .league2 .ranking .rank_list .msg_li:before {left:2%;} .league2 .ranking .rank_list .msg_li:after {right:2%;} } @media (min-width : 1400px) { .league2 .ranking .rank_list .msg_li:before , .league2 .ranking .rank_list .msg_li:after {width:329px;} } @media (min-width : 1440px) { .league2 .ranking .top_rank .top_mod .img_wrap {margin-right:0;} .league2 .ranking .rank_list .msg_li:before {left:2.5%;} .league2 .ranking .rank_list .msg_li:after {right:2.5%;} } @media (min-width : 1500px) { .league2 .ranking .rank_list .msg_li:before , .league2 .ranking .rank_list .msg_li:after {width:365px;} } @media (min-width : 1580px) { .league2 .ranking .rank_list .msg_li:before , .league2 .ranking .rank_list .msg_li:after {width:402px;} } @media (min-width : 1600px) { .league2 .ranking .top_rank .top_mod .img_wrap {margin-right:0;} .league2 .ranking .top_rank .top_mod .txt_wrap p {width:100%;} .league2 .ranking .rank_list .msg_li:before {left:2.2%;} .league2 .ranking .rank_list .msg_li:after {right:2.2%;} } @media (min-width : 1680px) { .league2 .ranking .rank_list .msg_li:before , .league2 .ranking .rank_list .msg_li:after {width:438px;} } @media (min-width : 1780px) { .league2 .ranking .rank_list .msg_li:before , .league2 .ranking .rank_list .msg_li:after {width:475px;} } @media (min-width : 1860px) { .league2 .ranking .rank_list .msg_li:before , .league2 .ranking .rank_list .msg_li:after {width:511px;} } @media (min-width : 1880px) { .league2 .ranking .top_rank .top_mod .img_wrap {margin-right:0;} } /* 내 콩알 */ .my_kong .sub_content section .center_wrap {padding:0 35px;} .my_kong .sub_tit .btn_next {position:relative; float:right; padding-right:23px; font-size: 16px; color: #222;} .my_kong .sub_tit .btn_next:before {position:absolute; top:50%; right:3px; width:13px; height:13px; margin-top:-5.5px; border:1px solid #222; -webkit-transform:rotate(225deg); transform:rotate(225deg); border-right:0; border-top:0;content:"";} .my_kong .sub_tit .btn_next .ico {position:absolute; top:50%; left:-40px; margin-top:-15px; display:inline-block; width:31px; height:31px; margin-right:8px; background:#222; border-radius:50%; vertical-align:top;} .my_kong .sub_tit .btn_next .ico:before {position:absolute; top:8px; left:6px; width:20px; height:14px; background:url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-48px -477px; background-size:500px 1250px; content:"";} .my_kong .search_bar {text-align:center;} .my_kong .search_bar .datetime {padding-top:16px; font-size:18px; color:#666;} .my_kong .search_bar .date {position:relative;} .my_kong .search_bar .date:before {position: absolute; top: 50%; right: 25px; width:19px; height:19px; margin-top:-10px; background: url(../img/sprite/sprite.png?v=06.29) no-repeat ; background-size:500px 1250px; background-position:-96px -477px; content: ""; cursor:pointer; z-index:1;} .my_kong .search_bar .date:after {position:absolute; top:3px; right:54px; width:1px; height:22px; background:#dedede; content:"";} .my_kong .search_bar .datetimePicker {cursor:pointer;} .my_kong .search_bar input {position:relative; display:inline-block; width:173px; height:37px; margin:0 0.5%; padding:0 20px; background-color:#fff; border:1px solid #ddd; border-radius:20px; font-size:18px; line-height: 37px; color:#666;} .my_kong .search_bar button {width:100px; margin-left:5px; line-height:35px; background:#222; border-radius:20px;} .my_kong .search_bar button span {position:relative; display:inline-block; height:35px; padding-left:25px; font-size:17px; color:#fff;} .my_kong .search_bar button span:after {position:absolute; top:8px; left:0; width:19px; height:19px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat -144px -117px; background-size:500px 1250px; content:"";} .my_kong section {padding:20px 0;} .my_kong .sub_content section .center_wrap {padding-top:20px;} .my_kong .kong_history {width:100%; height:100%;} .my_kong .kong_history li {position:relative; display:table; width:100%; padding:10px 35px; border-bottom:1px solid #d7d7d7; overflow:hidden;} .my_kong .kong_history li .cell {display:inline-block; vertical-align:middle;} .my_kong .kong_history li .cl_01 {width:8%; text-align:center;} .my_kong .kong_history li .cl_02 {width:76%; padding:0 20px;} .my_kong .kong_history li .cl_03 {width:15%; text-align:right;} .my_kong .kong_history li .cl_01 .label {display:inline-block; width:66px; height:66px; border-radius:50%; background:#ddd; font-size:17px; line-height:66px;} .my_kong .kong_history li .cl_02 .kong_dt {font-size:15px; line-height:1.3em; color:#999;} .my_kong .kong_history li .cl_02 .kong_txt {margin-top:5px; font-size:17px; line-height:1.3em; color:#222;} .my_kong .kong_history li .cl_03 .kong {font-family:"Roboto"; font-size:20px; color:#999;} .my_kong .kong_history li.plus .label {background:#def4f6; color:#00a7af;} .my_kong .kong_history li.plus .kong {color:#00a7af;} .my_kong .kong_history li.minus .label {background:#ffe4e4; color:#ff0000;} .my_kong .kong_history li.minus .kong {color:#ff0000;} .my_kong .sub_tit .ref {float: right; font-size: 16px; margin-right: 71px; position: relative; top: 50%; margin-top: -15px; color: #666;} /* 월별 콩알 순위 */ .monthly_kong .sub_content section .center_wrap {padding:0 35px;} .monthly_kong .sub_tit .btn_next {position:relative; float:right; padding-right:23px; font-size: 16px; color: #222;} .monthly_kong .sub_tit .btn_next:before {position:absolute; top:50%; right:3px; width:13px; height:13px; margin-top:-5.5px; border:1px solid #222; -webkit-transform:rotate(225deg); transform:rotate(225deg); border-right:0; border-top:0;content:"";} .monthly_kong .sub_tit .btn_next .ico {position:absolute; top:50%; left:-40px; margin-top:-15px; width:31px; height:31px; margin-right:8px; background:#222; border-radius:50%; vertical-align:top;} .monthly_kong .sub_tit .btn_next .ico:before {position:absolute; top:8px; left:5px; width:20px; height:15px; background:url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-2px -477px; background-size:500px 1250px; content:"";} .monthly_kong .search_bar .month_list {width:calc(90% - 70px);} .monthly_kong section {padding:20px 0;} .monthly_kong .sub_content section .center_wrap {padding-top:20px;} .monthly_kong .ranking_list {width:100%; height:100%;} .monthly_kong .ranking_list li {position:relative; display:table; width:100%; padding:15px 35px; border-bottom:1px solid #d7d7d7; overflow:hidden;} .monthly_kong .ranking_list li .cell {display:inline-block; vertical-align:middle;} .monthly_kong .ranking_list li .cl_01 {position:relative; width:6%; text-align:center;} .monthly_kong .ranking_list li .cl_02 {width:73%; padding:0 20px;} .monthly_kong .ranking_list li .cl_03 {width:20%; text-align:right;} .monthly_kong .ranking_list li .cl_01 .rank_num {font-size:18px;} .monthly_kong .ranking_list li .cl_02 .rank_info {font-size:17px; line-height:1.3em;} .monthly_kong .ranking_list li .cl_02 .rank_info .std_name {font-size:inherit; font-weight:700; color:#222;} .monthly_kong .ranking_list li .cl_02 .rank_info .std_class {font-size:inherit; color:#999;} .monthly_kong .ranking_list li .cl_03 .kong {font-family:"Roboto"; font-size:20px; color:#00a7af;} .monthly_kong .ranking_list li:nth-child(1) .cl_01 .rank_num , .monthly_kong .ranking_list li:nth-child(2) .cl_01 .rank_num , .monthly_kong .ranking_list li:nth-child(3) .cl_01 .rank_num {position:absolute; top:-23px; left:50%; margin-left:-18px; width:37px; height:47px; background: url('../img/sprite/sprite.png?v=06.29'); background-repeat:no-repeat; background-size:500px 1250px; line-height:35px; color:#fff; z-index:-1;} .monthly_kong .ranking_list li:nth-child(1) .cl_01 .rank_num {background-position:-301px -454px;} .monthly_kong .ranking_list li:nth-child(2) .cl_01 .rank_num {background-position:-352px -454px;} .monthly_kong .ranking_list li:nth-child(3) .cl_01 .rank_num {background-position:-403px -454px;} .monthly_kong .sub_tit .ref {float: right; font-size: 16px; margin-right: 71px; position: relative; top: 50%; margin-top: -15px; color: #666;} /* 고객지원 팝업 */ .cs_popup {display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999;} .cs_popup .popup_content {width:430px; height:410px; -webkit-transform:none; transform:none;margin-top:-205px; margin-left:-215px;} .cs_popup .pop_cont {height:100%; padding:37px;} .cs_popup .cont_box {height:100%;} .cs_popup .cont_box:after {display:block; clear:both; content:"";} .cs_popup .col_mod {position:relative; float:left; width:100%; padding:0 25px; height:100%; margin:0 3px; background:#f3f3f3;} .cs_popup .col_mod .mod {position:relative; width:100%; height:100%;} .cs_popup .col_mod .tit_box {padding:30px 0 10px 0; text-align:left;} .cs_popup .col_mod .tit_box .tit {position:relative; display:block; padding-top:37px; font-size:18px; font-weight:400; line-height:1; color:#222; text-align:center;} .cs_popup .col_mod .tit_box .tit:before {position:absolute; top:0; left:50%; background: url('../img/sprite/sprite.png?v=06.29'); background-repeat:no-repeat; background-size:500px 1250px; content:"";} .cs_popup .cs_call .tit_box .tit:before {width:34px; height:29px; margin-left:-17px; background-position:-148px -477px;} .cs_popup .cs_reservation .tit_box .tit:before {width:34px; height:27px; margin-left:-17px; background-position:-199px -477px;} .cs_popup .cs_call .txt_box {position:relative; text-align:left;} .cs_popup .cs_call .txt_wrap {padding-top:27px; text-align:center;} .cs_popup .cs_call .txt_wrap:first-child {padding-top:0;} .cs_popup .cs_call .txt_wrap p, .cs_popup .cs_call .txt_wrap strong {line-height:1;} .cs_popup .cs_call .txt_wrap strong {line-height:1.2em;} .cs_popup .cs_call .txt {font-size:18px; color:#222; font-weight:700;} .cs_popup .cs_call .cs_tel {font-family:"Roboto"; font-size:33px; color:#00a7af;} .cs_popup .cs_call .hours {margin-top:0px; font-size:21px; color:#00a7af;} .cs_popup .cs_call .time_txt {font-family:"Roboto"; font-size:22px;} .cs_popup .cs_call .cm_txt {margin-top:8px;} .cs_popup .cs_call .cm_txt li {line-height:1; font-size:14px; color:#999;} .cs_popup .cs_call .cm_txt li+li {margin-top: 5px;} .cs_popup .cs_call .cm_txt li b {font-weight:700; color:#fe9000;} .cs_popup .cs_reservation .board_write {height:auto; padding:0 10px; margin-top:10px;} .cs_popup .cs_reservation .board_write table th, .cs_popup .cs_reservation .board_write table td {padding:0; font-size:15px; text-align:left;} .cs_popup .cs_reservation .board_write table th {vertical-align:top;} .cs_popup .cs_reservation .board_write table th , .cs_popup .cs_reservation .board_write table td {padding-bottom:8px;} .cs_popup .cs_reservation .board_write table tr:first-child th , .cs_popup .cs_reservation .board_write table tr:first-child td {padding-bottom:0;} .cs_popup .cs_reservation .board_write table td > div {margin:6px 0;} .cs_popup .cs_reservation .board_write table td > div:first-child {margin-top:0;} .cs_popup .cs_reservation .board_write .wname {padding-top:0; padding-left:10px; color:#222;} .cs_popup .cs_reservation .board_write .date {position:relative;} .cs_popup .cs_reservation .board_write .date:before {position: absolute; top: 50%; right: 10px; width:19px; height:19px; margin-top:-10px; background: url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; background-position:-96px -477px; content: ""; cursor:pointer; z-index:1; pointer-events: none;} .cs_popup .cs_reservation .board_write .wtel_02::placeholder {font-size:15px; line-height:34px; color:#666;} .cs_popup .cs_reservation .board_write .select_form {position:relative;} .cs_popup .cs_reservation .board_write .select_form button {padding-left:0; background: #fff ;border: 1px solid #dbdbdb; border-radius: 0; margin:0;} .cs_popup .cs_reservation .board_write .select_form button span {height:34px; padding-left:10px; font-size:15px; line-height:34px; color:#666;} .cs_popup .cs_reservation .board_write .select_form ul {position:absolute; top:35px; left:0; width:100%; margin:0; padding:0; border-radius:0; border:1px solid #ddd;} .cs_popup .cs_reservation .board_write .select_form ul li {padding:0;} .cs_popup .cs_reservation .board_write .select_form ul li a {padding:10px; font-size:15px; color:#666;} .cs_popup .cs_reservation .board_write .select_form button:after {position:absolute; top:50%; right:12px; width:8px; height:8px; margin-top:-5.5px; border:1px solid #222; -webkit-transform:rotate(315deg); transform:rotate(315deg); border-right:0; border-top:0;content:"";} .cs_popup .cs_reservation .board_write .select_form button.on:after {margin-top:-2px; -webkit-transform:rotate(135deg); transform:rotate(135deg);} .cs_popup .cs_reservation .board_write .datetime ~ .select_form button ~ ul {max-height:135px; overflow-y:auto;} .cs_popup .btn_remote , .cs_popup .btn_reservation {position:absolute; bottom:36px; left:50%; margin-left:-130px; width:260px; height:43px; padding-bottom:3px; background:#222; border-radius:5px;} .cs_popup .btn_remote:before {position:absolute; top:50%; left:50%; width:24px; height:24px; margin-top:-13px; margin-left:-45px; border:2px solid #fff; border-radius:50%; content:"";} .cs_popup .btn_remote span , .cs_popup .btn_reservation span {position:relative; padding-left:31px; font-size:16px; font-weight:400; color:#fff;} .cs_popup .btn_remote span:before , .cs_popup .btn_remote span:after {position:absolute; left:16px; height:2px; margin-left:-10px; background:#fff; border-radius:20px; content:""; z-index:1;} .cs_popup .btn_remote span:before {width:6px; top:11px; -webkit-transform:rotate(42deg); transform:rotate(42deg); transform-origin:left top;} .cs_popup .btn_remote span:after {width:11px; top:8px; margin-left:-11px; -webkit-transform:rotate(-42deg); transform:rotate(-42deg); transform-origin:right top;} .cs_popup .btn_reservation:before {position:absolute; top:50%; left:50%; width:26px; height:22px; margin-top:-12px; margin-left:-45px; background:url(../img/sprite/sprite.png?v=06.29) no-repeat; background-size:500px 1250px; background-position:-2px -589px; content:"";} @media (min-height : 658px) and (orientation : landscape) { .cs_popup .cs_reservation .board_write .datetime ~ .select_form button ~ ul {max-height:200px;} } /* 과정 선택 팝업 */ .sellist_popup .select_form {position:relative; width:365px;} .sellist_popup .select_form button {position: relative; width: 100%; padding-left: 25px; background: #222; border-radius: 20px; color: #666; text-align: left;} .sellist_popup .select_form button span {width: 93%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;} .sellist_popup .select_form .course_wrap {display:none; position:absolute; top: 42px; left:0; width:100%; padding:10px 5px; border:2px solid #222; border-radius: 10px; opacity:0;} .sellist_popup .select_form .course_wrap ul {display:block; height:100%; margin-top:0; padding:0; border:none; border-radius:0; opacity:1; overflow-y:auto;} .sellist_popup .select_form .course_wrap ul li a {padding:10px 20px 12px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .sellist_popup .select_form button.on + .course_wrap {display:block; height:260px; background: #fff; opacity:1; z-index:9999;} .sellist_popup .select_form button.on + .course_wrap ul li:hover a {background:#f3f3f3;} .sellist_popup .pop_cont {width:100%; height:100%; padding:40px 35px;} .sellist_popup .pop_cont .tit_box {padding-bottom:15px; border-bottom:2px solid #222; text-align:left;} .sellist_popup .pop_cont .cont_box {margin-top:15px; width:100%; height:calc(100% - 73px); background:#ddd;} /* dialog 메세지 팝업 */ .dialog_popup {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;} .dialog_popup .pop_cont {width:100%; height:100%; padding:31px 35px;} .dialog_popup .pop_cont .tit_box {padding-bottom:15px; border-bottom:2px solid #222; text-align:center;} .dialog_popup .pop_cont .tit_box .tit {display:inline-block; width:100%; font-size:22px; font-weight:700; line-height:40px; color:#222; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} .dialog_popup .pop_cont .cont_box {margin-top:0; width:100%; height:calc(100% - 73px);} .dialog_popup .pop_cont .cont_box .dialog {display:table; width:100%; height:285px; background:#f3f3f3;} .dialog_popup .pop_cont .cont_box .dialog .txt_wrap {display:table-cell; padding:10px; vertical-align:middle;} .dialog_popup .pop_cont .cont_box .dialog .txt {font-size:17px; line-height:1.7em; color:#222; } .dialog_popup .btn_confirm {position:relative; margin-top:25px; width:130px; height:43px; padding-bottom:3px; background:#222; border-radius:5px;} .dialog_popup .btn_confirm span {position:relative; padding-left:0; font-size:16px; font-weight:700; color:#fff;} /* 페이지 오류 페이지 */ .message_wrap {display:table; width:100%; height:100%; padding-bottom:65px;} .message_wrap .error_msg {display:table-cell; vertical-align:middle; text-align:center;} .message_wrap .error_msg .txt_wrap:before {position:absolute; top:0; left:50%; width:263px; height:192px; margin-left:-132px; background-repeat:no-repeat; background-size: contain; content:"";} .message_wrap .error_msg .txt_wrap {position:relative; padding-top:240px;} .message_wrap .error_msg strong {display:inline-block; font-size:20px; line-height:1.2em; color:#000;} .message_wrap .error_msg .txt {margin-top:12px; font-size:15px; line-height:1.2em; color:#999;} .message_wrap .error_msg button {margin-top:30px; width:180px; height:43px; background:#222; border-radius:5px; font-size:16px; line-height:1.2em; color:#fff; text-align:center;} .message_wrap .error_msg.err1 .txt_wrap:before {background-image:url(../img/bg/bg_msg_01.png);} .message_wrap .error_msg.err2 .txt_wrap:before {background-image:url(../img/bg/bg_msg_02.png);} .message_wrap .error_msg.err3 .txt_wrap:before {background-image:url(../img/bg/bg_msg_03.png?v=05.18);} /* datetimePicker */ .icon-arrow-left::before {content: "<";font-weight: 900;} .icon-arrow-right::before {content: ">";font-weight: 900;} .datetimepicker .table-condensed {width: 260px;} .datetimepicker .day {border: 1px solid #C5C5C5;width: 25px !important;background-color: #ffffff;margin: 2px;padding:3px 0px;} .datetimepicker table tr td.disabled {background-color:#EDEDED !important;} .datetimepicker td, .datetimepicker th {border-radius: 0px !important; font-size:12px;} .datetimepicker thead tr {background-color: #222;color: #E6E6E6;} .datetimepicker thead tr .dow {background-color: #FFFFFF;color: #333; padding:3px 0px;} .datetimepicker thead tr:first-child th:hover, .datetimepicker tfoot th:hover {background-color: #222 !important;} .datetimepicker tfoot .today:hover {background-color: #EEE !important;} .dropdown-menu {border: 1px solid #C5C5C5 !important;} .datetimepicker table tr td.day:hover {background-color: #E6E6E6;} .datetimepicker th.switch {padding: 5px 0px;font-size:14px;} .datetimepicker td.today, .datetimepicker td.today:hover {background-color: #FDE19A !important;background-image: none !important;} .datetimepicker td.active, .datetimepicker td.active:hover {background-color:#00A7AF !important;background-image: none !important;} .datetimepicker .datetimepicker-hours span, .datetimepicker .datetimepicker-minutes span {border: 1px solid #C5C5C5;background-color: #F6F6F6;} .datetimepicker .datetimepicker-hours span.active, .datetimepicker .datetimepicker-hours span.active:hover, .datetimepicker .datetimepicker-minutes span.active, .datetimepicker .datetimepicker-minutes span.active:hover {background-color: #00687f !important;background-image: none !important;} /* 리그포인트 쌓는 방법 팝업 */ .point_popup {display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999;} .point_popup .popup_content {width:840px; height:506px; -webkit-transform:none; transform:none; margin-top:-243px; margin-left:-420px;} .point_popup .pop_cont {height:100%; padding:0;} .point_popup .cont_box {height:100%;} .point_popup .cont_box:after {display:block; clear:both; content:"";} .point_popup .col_mod {position:relative; float:left; width:57%; padding:0 37px; height:100%;} .point_popup .lf_box {position:relative; width:43%; background:#fff160; border-top-left-radius:10px; border-bottom-left-radius:10px;} .point_popup .lf_box:before {position:absolute; top:0; right:20px; width:102px; height:147px; background: url('../img/bg/bg_league_point.png') no-repeat; background-position:0 0; background-size:102px 147px; content:"";} .point_popup .rg_box {width:57%;} .point_popup .tit_wrap {margin-top:55px; font-size:39px; line-height:1.2em; font-weight:bold; text-align:left;} .point_popup .warning {margin-top:50px; text-align:left;} .point_popup .warning .warning_tit {position:relative; padding-left:35px; font-size:18px; font-weight:bold; color:#e50e17;} .point_popup .warning .warning_tit:before {position:absolute; top:-2px; left:0; width:27px; height:26px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-position:-2px -742px; background-size:500px 1250px; content:"";} .point_popup .warning .warning_txt {margin-top:12px; font-size:14px; } .point_popup .warning p {margin-top:2px; font-size:13px; line-height:1.2em;} .point_popup .warning strong {display:inline-block; margin-top:7px; font-size:15px;} .point_popup .em_red {font-weight:bold; color:#e50e17;} .point_popup .em_mint {font-weight:bold; color:#00a7af;} .point_popup .wrpper {display:table; position:absolute; top:0; left:0; width:100%; height:100%;} .point_popup .ol_list {display:table-cell; vertical-align:middle; padding:35px 0;} .point_popup .ol_list li {padding:23px 0 27px; border-bottom:1px solid #e1e1e1;} .point_popup .ol_list li:last-child {border-bottom:0;} .point_popup .ol_list .ol_number {float:left; position:relative; font-family:"Nanum square"; font-size:40px; font-weight:400; color:#ddd; line-height:78px;text-indent:-9999px;} .point_popup .ol_list li .ol_number:before {position:absolute; top:7px; left:0; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-size:500px 1250px; content:"";} .point_popup .ol_list li:nth-child(1) .ol_number:before {width:37px; height:41px; background-position:-2px -782px; content:"";} .point_popup .ol_list li:nth-child(2) .ol_number:before {width:44px; height:41px;background-position:-59px -782px;} .point_popup .ol_list li:nth-child(3) .ol_number:before {width:44px; height:41px; background-position:-123px -783px;} .point_popup .ol_list .ol_mod {padding-left:57px; text-align:left;} .point_popup .ol_list .ol_mod .ol_tit {margin-bottom:11px; font-size:18px; font-weight:bold; color:#000;} .point_popup .ol_list .ol_mod .ol_txt {margin-top:4px; font-size:13px; line-height:1.2em;} .point_popup .ol_list .ol_mod .cmt {margin-top:13px; font-size:12px; line-height:1.2em;} /* 장학리워드 팝업 */ * {box-sizing: border-box; margin: 0; padding: 0;} /* ===== 팝업 오버레이 ===== */ .popup-overlay {display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100; align-items: flex-start; justify-content: center; padding: 30px; overflow-y: auto;} /* ===== 팝업 래퍼 ===== */ .reward_popup {position: relative; display: inline-block; width: 100%; max-width: 1234px; margin: auto;} /* ===== 팝업 열기 버튼 ===== */ .btn-open-popup {padding: 14px 28px; background: #c8004b; color: #fff; border: none; border-radius: 8px; font-family: 'Noto Sans KR', sans-serif; font-size: 16px; font-weight: 700; cursor: pointer; letter-spacing: -0.025em;} .reward_popup .popup {position: relative; width: 100%; height: auto; background: #fff; border-radius: 16px; overflow: visible; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column;} /* ===== 헤더 ===== */ .reward_popup .popup-header {display: flex; align-items: center; padding: 0px 37px; height: auto; min-height: 80px; flex-wrap: wrap; flex-shrink: 0; gap: 20px;} .reward_popup .header-left {display: flex; align-items: center; gap: 13px; align-self: flex-start; margin-top: 25px;} .reward_popup .popup-title {font-size: 27px; font-weight: 700; color: #1a1a1a; letter-spacing: -0.5px;} .reward_popup .year-nav {display: flex; align-items: center; gap: 3px;} .reward_popup .year-nav .btn-arrow {width: 22px; height: 22px; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-top: 7px;} .reward_popup .year-nav .btn-arrow svg {width: 8px; height: 15px;} .reward_popup .year-nav .btn-arrow:disabled {opacity: 0.25; cursor: default;} .reward_popup .year-nav .year-text {font-size: 17px; font-weight: 500; color: #222222;padding-top:7px;} .reward_popup .header-right {display: flex; align-items: center; gap: 5px; margin-left: auto; padding-right: 0; align-self: flex-start; margin-top: 23px; flex-wrap: wrap;} /* ===== 탭 필 버튼 ===== */ .reward_popup .tab-pill {display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; height: 44px; padding: 0 17px; border-radius: 50px; font-family: 'Noto Sans KR', sans-serif; font-size: 15px; font-weight: 700; color: #de0000; letter-spacing: -0.025em; cursor: pointer; white-space: nowrap; line-height: 1; background: #ffd0cb; border: none;} .reward_popup .tab-pill--inactive {width: auto; background: #ffffff; color: #cccccc; border: 2px dashed #dddddd;} .reward_popup .tab-pill--active {width: auto;} .reward_popup .tab-pill .ico-plane {font-size: 13px; line-height: 1;} .reward_popup .tab-pill .ico-check {display: inline-block; width: 20px; height: 17px; background-image: url(/img/sprite/reward.png); background-size: 400px 300px; background-repeat: no-repeat; background-position: -132px -78px; margin-left: 2px;} /* ===== 삼성 배지 ===== */ .reward_popup .badge-samsung {display: inline-flex; align-items: center; gap: 6px; width: auto; height: 44px; padding: 0 14px; border-radius: 22px; background: #c3e1fb; white-space: nowrap; flex-shrink: 0;} .reward_popup .samsung-logo {display: inline-block; width: 85px; height: 13px; background-image: url(/img/sprite/reward.png); background-size: 400px 300px; background-repeat: no-repeat; background-position: -189px -78px; flex-shrink: 0; position: relative; top: 1px;} .reward_popup .ico-plane {display: inline-flex; align-items: center;} .reward_popup .ico-plane-img {display: inline-block; width: 44px; height: 18px; background-image: url(/img/sprite/reward.png?v=04.09); background-size: 400px 300px; background-repeat: no-repeat;} .reward_popup .tab-pill--inactive .ico-plane-img {background-position: -69px -78px;} .reward_popup .tab-pill--active .ico-plane-img {background-position: -5px -78px;} .reward_popup .samsung-label {font-size: 15px; font-weight: 400; color: #222222; line-height: 1; letter-spacing: -0.05em;} .reward_popup .samsung-num {font-size: 20px; font-weight: 700; color: #13289f; line-height: 1;} .reward_popup .samsung-unit {font-size: 15px; font-weight: 400; color: #13289f; line-height: 1; position: relative; top: -1px;} /* ===== 본문 ===== */ .reward_popup .popup-body {flex: 1; display: flex; flex-direction: column; padding: 10px 37px 25px; overflow: visible;} /* ===== 카드 리스트 ===== */ .reward_popup .cards-row {display: flex; gap: 10px; flex-shrink: 0; height: auto; overflow-x: auto; padding: 10px 4px; margin: -10px -4px;} .reward_popup .card {position: relative; flex: 1; min-width: 140px; min-height: 371px; height: auto; flex-shrink: 0; border-radius: 12px; padding: 17px 12px 16px; display: flex; flex-direction: column; align-items: center; border: 1px solid transparent; background: linear-gradient(to bottom, #dcf9ff 0px, #ffffff 123px) padding-box, linear-gradient(to bottom, #39e3f2, #ffffff) border-box; box-shadow: 0 0 9px rgba(0, 0, 0, 0.1), inset 0 0 0 2px rgba(255, 255, 255, 0.8);} /* ===== 알림 뱃지 ===== */ .reward_popup .card-alert {position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; border:1px solid #a9dfe9; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #a9dfe9; line-height: 1; letter-spacing: 0;} /* ===== 카드 툴팁 ===== */ .reward_popup .card-tooltip {display: none; position: absolute; top: 34px; left: 6px; right: 6px; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.13); padding: 13px 14px; font-size: 12px; font-weight: 400; color: #444; line-height: 1.65; z-index: 10; word-break: keep-all; text-align: left;} .reward_popup .card-tooltip.is-visible {display: block;} /* ===== 스프라이트 아이콘 ===== */ .reward_popup .card-icon {width: 60px; height: 60px; background-image: url(/img/sprite/reward.png); background-size: 400px 300px; background-repeat: no-repeat; flex-shrink: 0; margin-bottom: 15px;} .reward_popup .ico-1 {background-position: 5px 5px;} .reward_popup .ico-2 {background-position: -68px 5px; width: 56px;} .reward_popup .ico-3 {background-position: -143px 5px; width: 46px;} .reward_popup .ico-4 {background-position: -209px 5px; width: 39px;} .reward_popup .ico-5 {background-position: -269px 5px; width: 47px;} .reward_popup .ico-6 {background-position: -338px 5px; width: 48px;} /* ===== 카드 제목 ===== */ .reward_popup .card-title {font-size: 18px; font-weight: 700; color: #1a1a1a; text-align: center; line-height: 20px; letter-spacing: -0.025em; word-break: keep-all; margin-bottom: 45px; min-height: 46px; display: flex; align-items: center; justify-content: center;} /* ===== 분석지 버튼 (타이틀 하단) - 타이틀~목록 간격(45px)은 그대로 유지 ===== */ .reward_popup .card-title:has(+ .card-report) {margin-bottom: 10px;} .reward_popup .card-report {width: 78px; height: 24px; margin-bottom: 15px; padding: 0; border-radius: 30px; border: 1px solid #a9dfe9; background: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 1px; font-size: 12px; font-weight: 500; color: #3a9fb3; line-height: 1; letter-spacing: -0.03em; text-decoration: none; flex-shrink: 0; transition: background 0.2s, color 0.2s, border-color 0.2s;} .reward_popup .card-report:hover {background: #3a9fb3; border-color: #3a9fb3; color: #fff;} .reward_popup .card-report svg {width: 15px; height: 15px; flex-shrink: 0;} /* ===== 보상 목록 ===== */ .reward_popup .reward-list {list-style: none; width: 100%; display: flex; flex-direction: column; gap: 4px;} .reward_popup .reward-item {display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 10px 0 6px; border-radius: 20px; background: #FBF6D9; font-size: 12px; font-weight: 400; color: #444; line-height: 15px; flex-shrink: 0;} .reward_popup .reward-item:has(.badge--ivy) {background: #ffe9e7;} /*.reward_popup .reward-item:has(.badge--best) {background: #fff4e8;} .reward_popup .reward-item:has(.badge--ok) {background: #eaf9f1;} .reward_popup .reward-item:has(.badge--math) {background: #faf6e0;} .reward_popup .reward-item:has(.badge--note) {background: #fcf3fe;}*/ .reward_popup .reward-badge {flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1;background:#FFA81D;} /* ===== 배지 색상 ===== */ .reward_popup .badge--ivy {background: #de0000;} /*.reward_popup .badge--best {background: #ff950b;} .reward_popup .badge--ok {background: #60d154;} .reward_popup .badge--math {background: #f3ce00;} .reward_popup .badge--note {background: #d695ff;}*/ .reward_popup .badge-ico {display: inline-block; background-image: url(/img/sprite/reward.png?v=04.09); background-size: 400px 300px; background-repeat: no-repeat;} .reward_popup .badge--ivy .badge-ico {width: 22px; height: 14px; background-position: -5px -115px;} .reward_popup .badge--ntp .badge-ico {width: 21px; height: 18px; background-position: -53px -114px;} .reward_popup .badge--ntk .badge-ico {width: 20px; height: 17px; background-position: -107px -114px;} .reward_popup .badge--sch .badge-ico {width: 20px; height: 17px; background-position: -162px -115px;} .reward_popup .badge--grd .badge-ico {width: 17px; height: 18px; background-position: -216px -113px;} .reward_popup .badge--exl .badge-ico {width: 12px; height: 21px; background-position: -56px -147px;} .reward_popup .badge--gud .badge-ico {width: 14px; height: 18px; background-position: -109px -149px;} .reward_popup .badge--enc .badge-ico {width: 18px; height: 18px; background-position: -161px -148px;} /* ===== 빈 상태 ===== */ .reward_popup .card-empty {flex: 1; display: flex; align-items: center; justify-content: center;} .reward_popup .ico-empty {display: inline-block; width: 76.5px; height: 84px; background-image: url(/img/sprite/reward.png); background-size: 400px 300px; background-repeat: no-repeat; background-position: -299.5px -78px;} .reward_popup .ico-lock {display: inline-block; width: 31px; height: 44px; background-image: url(/img/sprite/reward.png?v=04.08); background-size: 400px 300px; background-repeat: no-repeat; background-position: -5px -149px;} /* ===== 비활성 카드 ===== */ .reward_popup .card--N {background: linear-gradient(to bottom, #f0f0f0 0px, #ffffff 123px) padding-box, linear-gradient(to bottom, #cccccc, #ffffff) border-box; filter: grayscale(1); opacity: 0.55;} /* ===== 페이지네이션 ===== */ .reward_popup .pagination {display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 12px; flex-shrink: 0;} .reward_popup .dot {width: 6px; height: 6px; border-radius: 50%; background: #d0d0d0;} .reward_popup .dot--active {background: #1a1a1a; width: 16px; border-radius: 3px;} /* ===== 1800px 이상: 1.25× 확대 ===== */ @media (min-width: 1800px) { .reward_popup {max-width: 1540px;} .reward_popup .popup-header {padding: 0px 46px; min-height: 100px;} .reward_popup .header-left {gap: 16px; margin-top: 31px;} .reward_popup .popup-title {font-size: 34px;} .reward_popup .year-nav .btn-arrow {width: 28px; height: 28px;} .reward_popup .year-nav .btn-arrow svg {width: 10px; height: 19px;} .reward_popup .year-nav .year-text {font-size: 21px;} .reward_popup .header-right {gap: 6px; margin-top: 29px;} .reward_popup .tab-pill {height: 55px; padding: 0 21px; font-size: 19px; border-radius: 63px;} .reward_popup .tab-pill .ico-check {width: 25px; height: 21px; background-size: 500px 375px; background-position: -165px -98px;} .reward_popup .badge-samsung {height: 55px; padding: 0 18px; border-radius: 28px; gap: 8px;} .reward_popup .samsung-logo {width: 106px; height: 17px; background-size: 500px 375px; background-position: -236px -97px;} .reward_popup .ico-plane-img {width: 55px; height: 23px; background-size: 500px 375px;} .reward_popup .tab-pill--inactive .ico-plane-img {background-position: -86px -98px;} .reward_popup .tab-pill--active .ico-plane-img {background-position: -6px -98px;} .reward_popup .samsung-label {font-size: 19px;} .reward_popup .samsung-num {font-size: 25px;} .reward_popup .samsung-unit {font-size: 19px;} .reward_popup .popup-body {padding: 13px 46px 19px;} .reward_popup .cards-row {gap: 13px;} .reward_popup .card {min-width: 175px; min-height: 463px; padding: 21px 15px 20px; border-radius: 15px;} .reward_popup .card-icon {width: 75px; height: 75px; background-size: 500px 375px; margin-bottom: 19px;} .reward_popup .ico-1 {background-position: 6px 6px;} .reward_popup .ico-2 {background-position: -85px 6px; width: 69px;} .reward_popup .ico-3 {background-position: -179px 6px; width: 58px;} .reward_popup .ico-4 {background-position: -261px 6px; width: 49px;} .reward_popup .ico-5 {background-position: -336px 6px; width: 59px;} .reward_popup .ico-6 {background-position: -423px 6px; width: 60px;} .reward_popup .card-title {font-size: 22px; line-height: 25px; margin-bottom: 56px; min-height: 57px;} .reward_popup .card-title:has(+ .card-report) {margin-bottom: 12px;} .reward_popup .card-report {width: 95px; height: 28px; margin-bottom: 21px; border-radius: 30px; font-size: 13px;} .reward_popup .card-report svg {width: 16px; height: 16px;} .reward_popup .reward-list {gap: 5px;} .reward_popup .reward-item {height: 50px; padding: 0 13px 0 8px; border-radius: 25px; font-size: 15px; gap: 10px;line-height:17px;} .reward_popup .reward-badge {width: 35px; height: 35px;} .reward_popup .badge-ico {background-size: 500px 375px;} .reward_popup .badge-ico{display:inline-block;background-image:url(/img/sprite/reward.png?v=04.09);background-size:500px 375px;background-repeat:no-repeat;} .reward_popup .badge--ivy .badge-ico{width:28px;height:18px;background-position:-6px -144px;} .reward_popup .badge--ntp .badge-ico{width:26px;height:23px;background-position:-66px -143px;} .reward_popup .badge--ntk .badge-ico{width:25px;height:21px;background-position:-134px -143px;} .reward_popup .badge--sch .badge-ico{width:25px;height:21px;background-position:-203px -144px;} .reward_popup .badge--grd .badge-ico{width:21px;height:23px;background-position:-270px -141px;} .reward_popup .badge--exl .badge-ico{width:15px;height:26px;background-position:-70px -184px;} .reward_popup .badge--gud .badge-ico{width:18px;height:23px;background-position:-136px -186px;} .reward_popup .badge--enc .badge-ico{width:23px;height:23px;background-position:-201px -185px;} .reward_popup .ico-empty {width: 96px; height: 105px; background-size: 500px 375px; background-position: -374px -98px;} .reward_popup .ico-lock {width: 39px; height: 55px; background-size: 500px 375px; background-position: -7px -186px;} .reward_popup .card-alert {width: 25px; height: 25px; font-size: 15px; top: 10px; right: 10px;} .reward_popup .card-tooltip {top: 42px; left: 8px; right: 8px; padding: 16px 18px; font-size: 15px; border-radius: 13px;} .reward_popup .pagination {padding-top: 15px; gap: 9px;} .reward_popup .dot {width: 8px; height: 8px;} .reward_popup .dot--active {width: 20px; border-radius: 4px;}} /*학습계획표*/ .sub_wrap.today_todo .sub_content .search_bar ~ section {padding-top:96px;} .today_todo .center_wrap {width:100%;} .today_todo .search_bar {height:96px;} .week_frame {width:100%; height:100%;} .today_todo .card_list {width:100%; height:100%; padding-top:0px; padding-bottom:10px;} .today_todo .card_list:after {display:block; clear:both; content:"";} .today_todo .card_list .item {float:left; position:relative; width: calc(25% - 15px); height:0; padding-bottom:26.6%; margin:0 7.5px 25px; overflow:hidden;} .today_todo .card_body {position:relative; display:table; width:100%; height:81%; padding:0 18px; border-top-right-radius:10px; border-top-left-radius:10px; } .today_todo .card_tit {position:relative; padding-top:8.5%; text-align:center;} .today_todo .card_tit .badge {display:inline-block; padding:0 20px; background:#222; border-radius:25px; font-size:12px; line-height:25px; color:#fff; vertical-align:middle;} .today_todo .card_foot {position:relative; display:table; width:100%; height:19%; border-bottom-right-radius:10px; border-bottom-left-radius:10px; overflow:hidden;} .today_todo .btn_link {display:table-cell; text-align:center; vertical-align:middle; position:relative;} .today_todo .btn_link:nth-child(2):before {content:""; display:block; position:absolute; left:0; top:14px; width:1px; height:calc(100% - 28px); background:rgba(0,0,0,0.1);} .today_todo .btn_link span {position:relative; padding-left:25px; font-size:16px; font-weight:700; color:#fff;} .today_todo .btn_link span:before {position:absolute; top:50%; left:0; display:inline-block; width:18px; height:23px; margin-top:-11px; background-image:url(../img/sprite/sprite.png); background-repeat:no-repeat; background-size:500px 1250px; content:"";} .today_todo .btn_link.ic_solve span:before {margin-top:-10px; background-position:-104px -863px;} .today_todo .btn_link.ic_detail span:before {background-position:-169px -863px;} .today_todo .btn_link .ic_clinic {position:absolute; display:block; width:55px; height:16px; top:0; left:40%;} .today_todo .btn_link .ic_clinic:before {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:block; width:30.5px; height:6.5px; background-position:-169px -838px; background-image:url(../img/sprite/sprite.png); background-repeat:no-repeat; background-size:500px 1250px;} .today_todo .txt_box {display:table-cell; text-align:center; vertical-align:middle; position:relative; padding:0 18px;} .today_todo .txt_box:before {content:""; position:absolute; top:0; left:18px; width:calc(100% - 32px); height:1px; background:rgba(0,0,0,0.3);} .today_todo .txt_box span {position:relative; padding-left:20px; font-size:16px; font-weight:700; color:#ff7d22;} .today_todo .txt_box span:before {position:absolute; top:50%; left:0; display:inline-block; width:14px; height:10px; margin-top:-3px; background-image:url(../img/sprite/sprite.png); background-repeat:no-repeat; background-size:500px 1250px; content:"";} .today_todo .txt_box.ic_complete span:before {background-position: -104px -838px;} /* card */ .today_todo .card {position:absolute; top:0; left:0; width:100%; height:100%;} .today_todo .card .card_tit .level {margin-top:5.5%; font-size:16px;line-height:1em; color:rgba(0,0,0,0.3);} .today_todo .card .card_tit .tit {height:56px; margin-top:3%; font-size:22px; line-height:1.3em; color:#222; -ms-text-overflow:ellipsis; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; word-break:normal; overflow:hidden;} .today_todo .card .card_tit .status {display:inline-block; width:108px; height:34px; margin-top:10%; background:#fff; border:2px solid #e90b0b; border-radius:20px; font-size:17px; font-weight:700; color:#e90b0b;} .today_todo .card .card_tit .status em {font-family:"Roboto";} .today_todo .card .card_bottom {position: absolute; left:0; bottom:25px; padding:0 18px; width:100%; color:#666666; font-size:13px;} .today_todo .item.type_memo .card .card_body {height:100%; display:flex; flex-direction:column; background:#fff9c4; border:1px solid #ffe57f; border-radius:10px;} .today_todo .item.type_memo .card .card_tit {padding-top:8.5%; flex-shrink:0;} .today_todo .item.type_memo .card .card_tit .badge {background:#c62828;} .today_todo .memo_text {flex:1; overflow-y:auto; margin:8px 0 18px; padding:0 2px; font-size:14px; line-height:1.6em; color:#3e2723; word-break:keep-all; white-space:pre-wrap;} .today_todo .card .card_bottom .class_nm {padding-bottom:5px;} .today_todo .card .card_bottom .level {text-overflow:ellipsis; white-space:nowrap; overflow: hidden;} .today_todo .card .card_bottom .chapter {line-height:15px;} .today_todo .item.type0 .card .card_body {background:#e0e4eb; border:1px solid #d5d9e0; border-bottom:0;} .today_todo .item.type0 .card .card_foot {background:#7f8797;} .today_todo .item.type1 .card .card_body {background:#ffe9d9; border:1px solid #fbddc8; border-bottom:0;} .today_todo .item.type1 .card .card_foot {background:#ffe9d9;border: 1px solid #fbddc8; border-top:0;} .today_todo .item.type1 .card .card_foot .btn_link {background:#ff7d22;} .today_todo .item.type1 .btn_link:nth-child(2):before {background:rgba(256,256,256,0.1);} .today_todo .item.type1 .btn_link .ic_clinic {background:rgba(0,0,0,0.7);} .today_todo .item.type2 .card .card_body {background:#def4f6; border:1px solid #ceecef; border-bottom:0;} .today_todo .item.type2 .card .card_foot {background:#00a7af;} .today_todo .item.type2 .btn_link .ic_clinic {background:rgba(0,0,0,0.3);} .today_todo .item.type1.pass .card .card_tit .status , .today_todo .item.type1.fail .card .card_tit .status , .today_todo .item.type1.complete .card .card_tit .status {display:none;} .today_todo .item.type1.pass .card .card_foot .btn_link, .today_todo .item.type1.fail .card .card_foot .btn_link, .today_todo .item.type1.complete .card .card_foot .btn_link {display:none;} /* overlay */ .today_todo .item.type1.pass .overlay , .today_todo .item.type1.fail .overlay , .today_todo .item.type1.complete .overlay {display:block;} .today_todo .overlay {display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); border-radius:10px; z-index:999;} .today_todo .overlay .card_cont {padding-top:6%; text-align:center; font-size:0;} .today_todo .overlay .card_cont i {position:static; display:inline-block; background-image:url(../img/sprite/sprite.png); background-repeat:no-repeat; background-size:500px 1250px;} .today_todo .overlay .card_cont .label_wrap {margin-top:7%;} .today_todo .overlay .card_cont .label_wrap li {position:relative; width:153px; padding-left:7px; margin:0 auto; font-size:15px; line-height:25px; color:#fff; text-align:left;} /* .today_todo .overlay .card_cont .label_wrap li:before {position:absolute; top:50%; left:0; width:2px; height:2px; margin-top:-1px; border-radius:100%; background:#fff; content:"";} */ .today_todo .overlay .card_cont .label_wrap li span {display:inline-block; margin-left:10px; font-family:"Roboto"; font-size:17px; font-weight:400; color:#fff;} .today_todo .overlay .card_cont .label_wrap li em {font-family:inherit; font-size:17px; font-weight:700; color:#fff;} .today_todo .overlay .card_foot .btn_link {background:#2d2826;} .today_todo .overlay .btn_link span:before {background-image:url(../img/sprite/sprite.png); background-size:500px 1250px;} .today_todo .overlay .btn_link.ic_solve span {color:#a1e221;} .today_todo .overlay .btn_link.ic_solve span:before {background-position:-2px -191px;} .today_todo .overlay .btn_link.ic_detail span {color:#ff7d22;} .today_todo .overlay .btn_link.ic_detail span:before {background-position:-46px -155px;} .today_todo .ico_complete {width: 75px;height: 76px;background-position: -3px -838px;} /*재학습*/ .today_todo .type1 .overlay .btn_link.ic_solve span:before {position:absolute; top:50%; left:0; display:inline-block; width:18px; height:23px; margin-top:-11px; background-image:url(../img/sprite/sprite.png); background-repeat:no-repeat; background-size:500px 1250px; content:"";background-position:-294px -557px;} .today_todo .type1 .overlay .btn_link.ic_solve span {color:#fff;} .today_todo .item.type1 .overlay .btn_link.ic_solve span:before {background-position:-104px -863px; margin-top:-10px;} @media (min-width : 1600px) { .today_todo .card_list {margin-right:0;} .today_todo .card_list .item {width:calc(20% - 20px); padding-bottom:21.5%; margin:0 10px 25px;} .today_todo .card_tit {padding-top:8.5%;} .today_todo .card_foot:after {width:88%;} } @media (min-width : 1681px) { .today_todo .card_tit {padding-top:10%;} .today_todo .card .card_tit .sep {margin-top:7%;} .today_todo .card .card_tit .tit {margin-top:5%;} .today_todo .card .card_tit .status {margin-top:12%;} .today_todo .overlay .card_cont {padding-top:8%;} .today_todo .overlay .card_cont .label_wrap {margin-top:9%;} } /* Todo - 타입별 badge 배경색 (Plus card_head 배경색) */ .today_todo .item.plus_a .card_tit .badge {background:#00397f;} .today_todo .item.plus_b .card_tit .badge {background:#007f1a;} .today_todo .item.plus_c .card_tit .badge {background:#7f0076;} /* 완료(type1) 시 badge 배경은 블랙으로 */ .today_todo .item.type1.plus_a .card_tit .badge, .today_todo .item.type1.plus_b .card_tit .badge, .today_todo .item.type1.plus_c .card_tit .badge {background:#222;} /* Todo - 진행중(type2) 카드 배경색 (Plus card_wrap_inner 배경색) */ .today_todo .item.type2.plus_a .card .card_body {background:#e5eff9; border-color:#cdd9ea;} .today_todo .item.type2.plus_a .card .card_foot {background:#00397f;} .today_todo .item.type2.plus_b .card .card_body {background:#e1f5e6; border-color:#cce8d1;} .today_todo .item.type2.plus_b .card .card_foot {background:#007f1a;} .today_todo .item.type2.plus_c .card .card_body {background:#faebf9; border-color:#edd9ec;} .today_todo .item.type2.plus_c .card .card_foot {background:#7f0076;} /*상단 학습계획표*/ .sub_header .util .todo {position:relative; display:inline-block; margin-left:15px;} .sub_header .util .todo:before {display:inline-block; width:23px; height:23px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-size:500px 1250px; background-position:-104px -899px; content:""; vertical-align:middle;} .sub_header .util .todo .num {display:inline-block; width:37px; height:21px; margin-left:6px; background:#FFBA00; border-radius:15px; font-size:16px; font-family:"Roboto"; line-height:21px; font-weight: 700; color:#fff; text-align:center; vertical-align:middle;} /*메인 학습계획표*/ /* ── 오늘의 진도 현황 ── */ .main_slide .card_wrap.type_today .card_body {background:#FFFCDB; box-shadow:none; padding:0; overflow:hidden; display:flex !important; flex-direction:column; align-items:center; justify-content:center;} .main_slide .card_wrap.type_today .card_body .card_tit {display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 0; width:100%; flex:1; min-height:0; overflow:hidden;} .main_slide .card_wrap.type_today .td_label {display:block; margin-bottom:4px; font-size:22px; font-weight:700; color:#222222; flex-shrink:0;} /* 원형 진행률 - 뷰포트 높이에 따라 자동 축소, 580px 이하에서는 145px 고정 */ .main_slide .card_wrap.type_today .td_circle_wrap {position:relative; width:clamp(145px, 25vh, 231px); height:clamp(145px, 25vh, 231px); margin:0 auto; flex-shrink:0;z-index:99999;} .main_slide .card_wrap.type_today .td_circle_svg {width:100%; height:100%;transform:rotate(90deg); transform-origin:50% 50%;} .main_slide .card_wrap.type_today .td_circle_bg {fill:#ffffff; stroke:#EDEAC9; stroke-width:3;} .main_slide .card_wrap.type_today .td_circle_bar {fill:none; stroke:#FF7D22; stroke-width:3; stroke-linecap:round;stroke-dasharray:251.3; stroke-dashoffset:75.4;} .main_slide .card_wrap.type_today .td_count {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);text-align:center; white-space:nowrap; line-height:1;} .main_slide .card_wrap.type_today .td_done {font-family:"Roboto",sans-serif; font-size:30px; font-weight:900; color:#FF7D22;} .main_slide .card_wrap.type_today .td_slash, .main_slide .card_wrap.type_today .td_total {font-family:"Roboto",sans-serif; font-size:30px; font-weight:700;color:#222222; vertical-align:baseline;} /* card_foot */ .main_slide .card_wrap.type_today .card_foot {display:flex !important; align-items:center; padding:0 20px;background:#FFE24D !important; box-shadow:none;} .main_slide .card_wrap.type_today .today_nm {flex:1; min-width:0; display:block !important; text-align:left;} .main_slide .card_wrap.type_today .nm_type {font-size:18px; font-weight:400; color:#222222; line-height:1.2;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .main_slide .card_wrap.type_today .nm_course {font-size:13px; color:#A17939; line-height:1.2; margin-top:12px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} .main_slide .card_wrap.type_today .nm_unit {font-size:13px; color:#A17939; line-height:1.2; margin-top:2px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} /* 우측 원형 버튼 50×50 */ .main_slide .card_wrap.type_today .btn_start {display:inline-flex !important; align-items:center; justify-content:center;width:50px; height:50px; background:#222222; border-radius:50%;flex-shrink:0; cursor:pointer; margin-left:10px;} .main_slide .card_wrap.type_today .btn_start:after {content:""; display:inline-block; width:18px; height:23px; background:url(../img/sprite/sprite.png) no-repeat; background-size:500px 1250px; background-position:-104px -863px;} /* 목록 아이콘 버튼 - card_wrap 기준 우상단 */ .main_slide .card_wrap.type_today {position:relative;} .main_slide .card_wrap.type_today .btn_todo_list {position:absolute; top:10px; right:10px; display:inline-flex; z-index:2; opacity:0.45; filter:brightness(0);} .main_slide .card_wrap.type_today .btn_todo_list:hover {opacity:1;} @media (min-width:1800px){ .main_slide .card_wrap.type_today .td_label {font-size:25px;} } @media only screen and (max-height: 700px) { .main_slide .card_wrap.type_today .td_done {font-size:25px;} .main_slide .card_wrap.type_today .td_slash, .main_slide .card_wrap.type_today .td_total{font-size:25px;} } .ic_todo {display:inline-block; width:23px; height:23px; background: url('../img/sprite/sprite.png?v=06.29') no-repeat; background-size:500px 1250px; background-position:-104px -899px; content:""; vertical-align:middle;} .main_slide .card_wrap.type_today .td_circle_wrap.td_noplan {display:flex; align-items:center; justify-content:center;} .main_slide .card_wrap.type_today .ic_todo_noplan {display:block; width:86px; height:85px; background:url('../img/sprite/sprite.png?v=06.29') no-repeat; background-size:500px 1250px; background-position:-104px -937px;} .main_slide .card_wrap.type_today .td_no_plan {font-size:16px; color:#A17939; text-align:center; width:100%;} /* 오늘의 진도 전체완료 이미지 */ .main_slide .card_wrap.type_today .card_body.all_done:after {position:absolute; bottom:0; left:50%; background:url(../img/bg/bg_main_02.png) no-repeat; width:245px; height:104px; background-size:100%; -webkit-transform:translateX(-50%); transform:translateX(-50%); content:"";} .main_slide .card_wrap.type_today .card_foot.all_done {justify-content:center;} .main_slide .card_wrap.type_today .td_done_inner {display:flex; align-items:center; justify-content:center;} .main_slide .card_wrap.type_today .ic_todo_done {display:inline-block; width:38px; height:37px; background:url(../img/sprite/sprite.png) no-repeat; background-size:500px 1250px; background-position:-234px -838px; flex-shrink:0;} .main_slide .card_wrap.type_today .td_all_done_txt {font-size:16px; font-weight:700; text-align:left; color:#222; padding-left:10px; line-height:1.3;} @media (min-width: 1440px){ .main_slide .card_wrap.type_today .card_body.all_done:after {width:280px; height:117px;} } @media (min-width: 1800px){ .main_slide .card_wrap.type_today .card_body.all_done:after {width:290px; height:122px;} } /* ── 선생님 전달사항 ── */ .main_slide .card_wrap.type_teacher .card_body {background: #FFFCDB; height:100%;} .main_slide .card_wrap.type_teacher .card_tit .tc_msg_wrap {margin-top: 10px;height: 56%;overflow-y: auto;padding: 0px 10px;} @media (min-height: 601px) { .main_slide .card_wrap.type_teacher .card_tit .tc_msg_wrap {height: 54%;} } @media (min-height: 651px) { .main_slide .card_wrap.type_teacher .card_tit .tc_msg_wrap {height: 52%;} } @media (min-height: 701px) { .main_slide .card_wrap.type_teacher .card_tit .tc_msg_wrap {height: 50%;} } @media (min-height: 741px) { .main_slide .card_wrap.type_teacher .card_tit .tc_msg_wrap {height: 48%;} } .main_slide .card_wrap.type_teacher .card_tit .tc_msg {font-size: 15px;color: #222;line-height: 1.7em;text-align: left;word-break: keep-all;} @media (min-width: 1800px) { .main_slide .card_wrap.type_teacher .card_tit .tc_msg {font-size: 16px;} } .main_slide .card_wrap.type_teacher .card_body .card_tit .tit {padding-top: 32px;} /* league2 */ .league2 .ranking .content .top_rank{align-items:stretch !important;} .league2 .ranking .content .top_rank .top_mod:nth-child(1){order:1;} .league2 .ranking .content .top_rank .top_mod:nth-child(2){order:2;} .league2 .ranking .content .top_rank .top_mod:nth-child(3){order:3;} .league2 .ranking .content .top_rank .top_mod{position:relative;height:410px;border-radius:10px;overflow:hidden;} .league2 .ranking .content .top_rank .top_mod .inner{position:relative !important;display:block !important;width:100%;height:100%;margin:0;} .league2 .ranking .content .top_rank .top_mod .img_wrap{position:absolute !important;top:0;left:0;right:0;bottom:0;width:100% !important;height:100% !important;background:linear-gradient(180deg,#e9e9e9 0%,#ffffff 100%) !important;display:flex !important;align-items:center !important;justify-content:center !important;border-radius:0 !important;overflow:hidden !important;} .league2 .ranking .content .top_rank .top_mod .img_wrap img{position:relative !important;width:var(--tm-w,auto) !important;height:70% !important;max-width:70% !important;object-fit:contain !important;object-position:center bottom !important;top:var(--tm-top,0px) !important;left:var(--tm-left,0px) !important;background:none;} .league2 .ranking .content .top_rank .top_mod .img_wrap::after{content:'';position:absolute;bottom:0;left:0;right:0;height:90px;background:rgba(0,0,0,0.5);z-index:1;pointer-events:none;} .league2 .ranking .content .top_rank .top_mod .img_wrap::before{content:'';position:absolute;top:0;left:0;width:115px;height:115px;background-image:url('../img/sprite/sprite.png');background-size:500px 1250px;background-repeat:no-repeat;z-index:3;} .league2 .ranking .content .top_rank .top_mod:nth-child(1) .img_wrap::before{background-position:-2.5px -1044.5px;} .league2 .ranking .content .top_rank .top_mod:nth-child(2) .img_wrap::before{background-position:-132.5px -1044.5px;} .league2 .ranking .content .top_rank .top_mod:nth-child(3) .img_wrap::before{background-position:-262.5px -1044.5px;} .league2 .ranking .content .top_rank .top_mod .txt_wrap{position:absolute !important;bottom:0;left:0;right:0;height:90px;z-index:2;display:grid !important;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;align-content:center;padding:0 18px !important;background:transparent !important;border-radius:0 !important;border-top:none !important;min-height:0 !important;} .league2 .ranking .content .top_rank .top_mod .txt_wrap .rank_num{display:none !important;} .league2 .ranking .content .top_rank .top_mod .txt_wrap .name{grid-column:1;grid-row:1;margin-top:0 !important;font-size:18px !important;font-weight:700;color:#fff !important;text-align:left !important;} .league2 .ranking .content .top_rank .top_mod .txt_wrap .campus{grid-column:1;grid-row:2;font-size:14px !important;color:rgba(255,255,255,.6) !important;text-align:left !important;} .league2 .ranking .content .top_rank .top_mod .txt_wrap .point{grid-column:2;grid-row:1/span 2;align-self:center;margin-top:0 !important;padding-left:8px !important;font-size:24px !important;font-weight:700;color:#7de8ec !important;text-align:right;white-space:nowrap;} .league2 .ranking .content .top_rank .top_mod .txt_wrap .point:before{display:none !important;} .league2 .ranking .rank_list{margin-top:6px;} .league2 .ranking .rank_list li:not(.msg_li){display:grid !important;grid-template-columns:42px 180px 1fr !important;grid-template-rows:auto auto !important;align-items:start !important;padding:15px 16px 15px 8px !important;gap:0 !important;position:relative;} .league2 .ranking .rank_list li .rank_num{grid-column:1 !important;grid-row:1/span 2 !important;align-self:center !important;width:42px !important;font-size:18px !important;font-weight:normal;text-align:center;line-height:1em !important;padding:0;} .league2 .ranking .rank_list li .img_wrap{display:none !important;} .league2 .ranking .rank_list li .info{grid-column:2 !important;grid-row:1 !important;width:100% !important;min-width:0;margin-left:0 !important;line-height:1.4em !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .league2 .ranking .rank_list li .info .name{font-size:14px;font-weight:700;color:#222;} .league2 .ranking .rank_list li .info .campus{display:inline !important;font-size:12px !important;color:#999 !important;margin-top:0 !important;} .league2 .ranking .rank_list li .info .campus::before{content:' ';} .league2 .ranking .rank_list li .point{grid-column:2 !important;grid-row:2 !important;width:auto !important;padding:0 !important;text-align:left !important;font-size:15px !important;line-height:1em !important;white-space:nowrap;align-self:center;} .league2 .ranking .rank_list li .point:before{display:none !important;} .league2 .ranking .rank_list li:not(.on) .point{color:#909195 !important;} .league2 .ranking .rank_list li.on .point{color:#00a7af !important;} .league2 .ranking .rank_list li .bar_area{grid-column:3 !important;grid-row:1/span 2 !important;height:8px;background:#eeeef4;border-radius:6px;margin:0 0 0 16px !important;overflow:visible !important;align-self:center;position:relative;} .league2 .ranking .rank_list li .bar{height:100%;border-radius:6px;display:block;overflow:visible;position:relative;} .league2 .ranking .rank_list li:not(.on) .bar{background:#b0b0b3;} .league2 .ranking .rank_list li.on .bar{background:#00a7af;} .league2 .ranking .rank_list .msg_li{display:table !important;height:46px !important;min-height:46px !important;} /* league2 char_preview_panel */ #char_preview_panel{position:fixed;bottom:0;left:0;right:0;background:rgba(20,20,20,0.92);color:#fff;padding:6px 10px 6px 36px;z-index:9999;font-size:12px;transition:transform .25s;} #char_preview_panel.hidden{transform:translateY(100%);} #char_preview_toggle{position:fixed;bottom:4px;left:6px;background:rgba(20,20,20,0.92);border:1px solid #666;color:#ccc;cursor:pointer;border-radius:3px;font-size:11px;padding:1px 5px;line-height:1;z-index:10000;} #char_preview_inner{display:flex;flex-wrap:wrap;gap:4px 10px;} .cpg{display:flex;align-items:center;gap:3px;} .cpg-label{font-size:10px;color:#aaa;white-space:nowrap;min-width:40px;text-align:right;} .btn-cp{padding:2px 6px;border:1px solid #555;background:#2a2a2a;color:#ccc;cursor:pointer;border-radius:3px;font-size:11px;} .btn-cp:hover{background:#444;} .btn-cp.on{background:#0a7bff;border-color:#0a7bff;color:#fff;} .main_slide .card_wrap.type_teacher .card_body .card_tit .tit:before {width: 38px;height: 23px;background-image: url('../img/sprite/sprite.png?v=06.29');background-position: -206px -899px;background-size: 500px 1250px;background-color: transparent;background-repeat: no-repeat;border-radius: 0;} .main_slide .card_wrap.type_teacher .card_tit .tc_msg_wrap::-webkit-scrollbar-thumb {background: #f1eecf;}