@charset "utf-8"; .M_body {position:relative;width:100%;margin:80px auto 0 auto;padding-top:45px;} .honey_area {max-width:1000px;margin:0 auto;padding-top:48.50%;position:relative;} .honey_area #tip-video {position:absolute; left:0; top:0; width:100%; height:auto;} .level_area {position:relative;max-width:1330px;width:100%;margin:0 auto 40px auto;height:75px;text-align:center;} .level_area .menu {} .level_area .menu li {display:inline-block;} .level_area .menu li ~li {margin-left:10px;} .level_area .menu a {display:block;font-size:22px;font-family:'NanumSquare';color:#9aafdb;font-weight:700;background:#dce4f5;line-height:75px;border-radius:40px;padding:0 45px;letter-spacing:0;} .level_area .menu a.off span {position:relative;padding-right:35px;} .level_area .menu a.off span:after {content:'';position:absolute;right:0;top:-3px;width:24px;height:29px;background:url('../images/learning/content/ico_off.png') no-repeat 50% 50%;} .level_area .menu li:first-child a {border-radius:20px 50px 50px 45px;} .level_area .menu li:last-child a {border-radius:50px 45px 20px 50px;} .level_area .menu a.active {font-size:24px;background:#004eff; color:#fff;} .level_area .menu a.active span {color:#fff600;} .level_area .percent {position:absolute;right:0;bottom:0px;width:230px;text-align:left;display:flex;flex-wrap: wrap;align-items:center;justify-content: space-between;} .level_area .percent > p {font-size:22px;font-family:'Jalnan';color:#191919;width:100%;letter-spacing:-1px;margin-bottom:-15px;} .level_area .percent > p > span {color:#fdca00;font-size:34px;margin-left:10px;} .level_area .percent .bar {position:relative;width:110px;height:8px;background:#dce4f5;border-radius:8px;} .level_area .percent .bar_1 {position:relative;height:8px;background:#004eff;border-radius:8px;} .level_area .percent .txt > p {font-size:17px;font-family:'NanumSquare';color:#111;font-weight:700;display:flex;align-items:center;} .level_area .percent .txt > p > span {font-size:26px;color:#004eff;margin-left:5px;} /* level unit */ .level_Con {position:relative;width:100%;background:#004eff;padding:55px 0 160px 0;display:none;} .level_Con.view {display:block;} .level_Con:after {z-index:0;position:absolute;content:'';right:50px;bottom:30px;width:973px;height:286px;background:url('../images/learning/content/bg.png') no-repeat 50% 100%;} .level_Unit {position:relative;max-width:1330px;width:100%;margin:0 auto;} .U_menu {display:flex;justify-content:center;position:relative;} .U_menu li ~li {margin-left:50px;} .U_menu li a {position:relative;font-size:38px;font-family:'Jalnan';color:#fff;opacity:0.3;} .U_menu li a.active {opacity:1;border-bottom:2px solid #fff;padding-bottom:2px;} .U_menu li a span {color:#fff600;} .U_menu i {z-index:5;position:absolute;top:-20px;right:-20px;cursor:pointer;font-size:0;width:28px;height:28px;background:url('../images/learning/content/ico_ballon.png') no-repeat 50% 50%;font-style:normal;} .U_menu i span {position:relative;} .U_menu li .ballon {display:none;position:absolute;top:-70px;left:-20px;width:500px;background:#191919;padding:20px;font-family:'NanumGothic';font-weight:400;font-size:15px;color:#fff;border-radius:20px;} .U_menu .ballon:after {content:'';position:absolute;bottom:-9px;left:30px;width:0;height:0;border-right:9px solid transparent;border-top:9px solid #191919;border-left:9px solid transparent;transition:all 0.2s ease-in-out;} .U_menu .ballon.view {display:block;} .U_menu li:last-child .ballon {width:410px;} .level_Unit .Vocab {position:absolute;right:0;top:10px;line-height:56px;padding:0 20px 0 55px;border-radius:30px;font-size:20px;font-family:'NanumSquare';color:#004eff;font-weight:700;background:url('../images/learning/content/ico_vocab.png') no-repeat 18px 50% #fff;} .level_card {position:relative;max-width:1330px;width:100%;margin:30px auto 0 auto;} .level_card .ex {display:block;text-align:right;} .level_card .ex span {display:inline-block;position:relative;font-size:17px;font-family:'NanumSquare';color:#fff;font-weight:400;padding-left:20px;} .level_card .ex span:before {content:'';position:absolute;left:0;top:0;width:16px;height:16px;border-radius:100%;background:#fde200;} .level_card .ex span.normal:before {background:#ffa800;} .level_card .ex span ~span {margin-left:20px;} .level_card .Card_unit {display:flex;width:100%;flex-wrap: wrap;margin-top:10px;display:none;} .level_card .Card_unit.div_view {display:flex !important;} .level_card .Card_unit a {z-index:5;position:relative;width:calc(100%/4 - (30px/4));display:block;background:#fde200;border-radius:20px;padding:20px;min-height:162px;margin-bottom:12px;} .level_card .Card_unit a.normal {background:#ffa800;} .level_card .Card_unit a ~a {margin-left:10px;} .level_card .Card_unit a:nth-child(4n+1){margin-left:0;} .level_card .Card_unit a:hover {z-index:6;transform: scale(1.04, 1.04);transition:all 0.2s ease;box-shadow:5px 5px 10px rgb(0 0 0 / 30%);} .level_card .Card_unit a > p {color:#093291;font-size:20px;font-family:'NanumSquare';font-weight:600;display:flex;align-items:center;} .level_card .Card_unit a > p > span {margin:0 10px;font-size:30px;font-weight:700;} .level_card .Card_unit a > p > i {position:relative;font-family:'NanumGothic';font-weight:400;font-size:13px;color:#093291;font-style:normal;padding-left:3px;} .level_card .Card_unit a > p > i:before {content:'';position:absolute;left:0;top:2px;width:1px;height:11px;border-left:1px dotted #111;} .level_card .Card_unit a > div {word-break:break-all;margin-top:10px;background:#fff;width:100%;text-align:center;color:#111;font-size:21px;font-family:'NanumSquare';font-weight:600;border-radius:10px;padding:25px 10px;/*box-shadow: 1px 4px 4px rgba(0,0,0,0.1);*/} .level_card .Card_unit a .okay {position:absolute;top:30px;right:20px;font-family:'pretendard';font-weight:600;font-size:22px;color:#093291;} .level_card .Card_unit a .okay.on {top:10px;font-size:0;width:35px;height:48px;background:url('../images/learning/content/ico_okay.png') no-repeat 50% 0;} /* 모의고사 - 레벨선택 */ .levelM_area {width:1330px;margin:0 auto;font-family:'NanumSquare';font-weight:400;} .levelM_area .ex {display:block;text-align:right;padding-right:10px;} .levelM_area .ex span {display:inline-block;position:relative;font-size:17px;color:#fff;padding-left:20px;} .levelM_area .ex span:before {content:'';position:absolute;left:0;top:0;width:16px;height:16px;border-radius:100%;background:#516897;} .levelM_area .ex span.ing:before {background:#dce4f5;} .levelM_area .ex span.end:before {background:#fde200;} .levelM_area .ex span ~span {margin-left:20px;} .levelM_area .text {margin-top:-20px;font-size:18px;color:#fff;position:relative;padding-left:40px;display:block;} .levelM_area .text:before {position:absolute;content:'';left:0;top:-7px;width:34px;height:34px;background:url('../images/learning/content/ico_text01.png') no-repeat 50% 50%;} .mock_card {display:flex;width:100%;flex-wrap: wrap;margin-top:25px;} .mock_card li {z-index:5;position:relative;width:calc(100%/5 - (40px/5));display:block;background:#dce4f5;border-radius:20px;padding:40px 20px;min-height:250px;margin-bottom:15px;text-align:center;} .mock_card li.normal {background:#ffa800;} .mock_card li ~li {margin-left:10px;} .mock_card li:nth-child(5n+1){margin-left:0;} .mock_card li:hover {z-index:6;transform: scale(1.04, 1.04);transition:all 0.2s ease;box-shadow:5px 5px 10px rgb(0 0 0 / 30%);} .mock_card li p {font-size:30px;color:#093291;font-weight:700;} .mock_card li a {display:inline-block;line-height:50px;height:50px;font-size:17px;color:#093291;background:#fff;border-radius:10px;width:calc(100%/2 - 6px);font-weight:600;box-shadow: 1px 4px 4px rgba(0,0,0,0.1);} .mock_card li a:hover {transform: scaleX(1);border-radius:30px 0px 30px 0px;transition:all 0.2s ease;} .mock_card li a ~a {margin-left:6px;} .mock_card li a.btn_all {width:100%;} .mock_card li a.btn_all:hover {border-radius:50px 0px 50px 0px;} .mock_card li a.view {background:#004eff;color:#fff;} .mock_card li.end {background:#fde200;} .mock_card li.off {background:#516897;} .mock_card li.off:before {position:absolute;content:'';left:50%;top:50%;transform: translate(-50%, -50%);margin-top:20px;width:90px;height:90px;background:url('../images/learning/content/ico_mock_off.png') no-repeat 50% 50%;} .mock_card li.off a {display:block;width:calc(100% + 40px);height:calc(100% + 80px);background:none;margin:-40px 0 0 -20px;box-shadow:none;} .mock_card li.off a:hover {box-shadow:none;} .mock_card li.off p {color:#333;padding-top:40px;} .mock_card li .bar {position:relative;overflow:hidden;width:80%;height:40px;border:6px solid #002271;background:#dce4f5;line-height:40px;font-size:0;border-radius:20px;margin:30px auto;box-shadow:inset 2px 2px 10px rgb(0 0 0 / 30%);} .mock_card li.end .bar:before {position:absolute;content:'';left:0;top:2px;width:calc(100% - 8px);height:calc(100% - 8px);background:url('../images/learning/content/ico_barin.png') repeat-x 0 0;border:2px solid #dce4f5;border-radius:24px;} .mock_card li.ing .bar:before {position:absolute;content:'';left:0;top:2px;width:113px;height:100%;background:url('../images/learning/content/ico_barin_ing.png') no-repeat 0 0;} /* 모의고사 */ .mock_title {display:block;position:relative;max-width:1330px;margin:0 auto 60px auto;font-size:46px;font-family:'Jalnan';color:#222;text-align:center;} .mock_title span {display:block;color:#555;font-size:17px;font-family:'NanumSquare';font-weight:600;} .start_area {width:100%;background:#fdca00;padding:90px 0;} .level_st {max-width:1330px;margin:0 auto;display:flex;justify-content: center;} .level_st > a {position:relative;overflow:hidden;text-align:center;min-height:370px;display:block;width:calc(100%/3 - (100px/3));max-width:350px;background:#fff;border-radius:20px 95px 60px 60px;box-shadow: 1px 4px 4px rgba(0,0,0,0.1);} .level_st > a ~a {margin-left:50px;} .level_st > a > p {position:absolute;left:0;bottom:0;width:100%;height:90px;line-height:90px;color:#9aafdb;font-size:28px;font-family:'Jalnan';background:#e6ecf8;} .level_st > a > span {position:absolute;left:30px;top:10px;color:#9aafdb;font-size:33px;font-family:'Jalnan';} .level_st > a > span > strong {margin-left:5px;font-size:55px;} .level_st .level1 {background:url('../images/learning/content/ico_start01.png') no-repeat 50% 70px #fff;} .level_st .level2 {background:url('../images/learning/content/ico_start02.png') no-repeat 50% 70px #fff;} .level_st .level3 {background:url('../images/learning/content/ico_start03.png') no-repeat 50% 70px #fff;} .level_st .off {pointer-events: none;} .level_st .off:before {z-index:1;position:absolute;left:0;top:0;width:100%;height:100%;content:'';background:rgba(0, 0, 0, 0.5);} .level_st .off:after {z-index:2;content:'';position:absolute;left:0;top:70px;width:100%;height:171px;background:url('../images/learning/content/ico_start_off.png') no-repeat 50% 50%;} .level_st .off a:hover {transform: scaleX(0);border-radius:30px 0px 30px 0px;transition:all 0.2s ease;} .level_st a:hover {transform: scale(1.04, 1.04);transition:all 0.2s ease;} /* 모의고사 - 리포트 */ .report .pop_area {width:1330px;height:calc(100% - 100px);padding:40px 60px;font-family:'NanumSquare';font-weight:400;} .report_title {font-family:'Jalnan';font-size:38px;color:#004eff;letter-spacing:-2px;} .report_title span {color:#ffa800;margin:0 5px;} .report .percent {position:absolute;right:100px;top:20px;width:280px;text-align:left;display:flex;flex-wrap: wrap;align-items:center;justify-content: space-between;} .report .percent > p {font-size:22px;font-family:'Jalnan';color:#191919;width:100%;letter-spacing:-1px;margin-bottom:-15px;} .report .percent > p > span {color:#fdca00;font-size:34px;margin-left:10px;} .report .percent .bar {position:relative;width:110px;height:8px;background:#dce4f5;border-radius:8px;} .report .percent .bar_1 {position:relative;height:8px;background:#004eff;border-radius:8px;} .report .percent .txt > p {font-size:17px;font-family:'NanumSquare';color:#111;font-weight:700;display:flex;align-items:center;} .report .percent .txt > p > span {font-size:26px;color:#004eff;margin-left:5px;} .report_comment {margin-top:15px;display:flex;width:100%;min-height:80px;padding:10px;border-radius:15px 80px 80px 50px;background:#004eff;justify-content:center;align-items:center;flex-wrap:wrap;} .report_comment p {position:relative;color:#fff;font-size:18px;padding-left:40px;} .report_comment p:before {position:absolute;content:'';left:0;top:-3px;width:34px;height:34px;background:url('../images/learning/content/ico_text01.png') no-repeat 50% 50%;} .report_comment p span {color:#fde200;font-weight:600;} .report_comment p span.big {font-size:28px;font-weight:600;} .report_scroll {margin-top:30px;padding:0 30px;width:calc(100% + 60px);height:calc(100% - 190px);overflow:auto;margin-left:-20px;} .h5_title {font-size:20px;color:#004eff;font-weight:700;margin-bottom:10px;} .h5_title span {color:#002271;} .h5_title span.small {font-size:15px;font-weight:600;font-family:'NanumGothic';} .score_area {display:flex;align-items: stretch;margin-bottom:30px;} .score_area > div ~div {margin-left:10px;} .score_area .score_bar {width:calc(100% - 430px);max-width:900px;padding:20px 30px;border-radius:20px;background:#f0f3f9;} .score_area .score_percentage {min-width:420px;padding:30px 15px;border-radius:20px;background:#f0f3f9;} .score_bar > div {min-height:90px;padding-right:50px;} .score_area .text {font-size:17px;color:#093291;font-weight:700;margin-bottom:35px;} .score_area .text span {font-size:20px;color:#004eff;} .score_area .bar {position:relative;height:16px;background:#d3dcf0;border-radius:8px;} .score_area .bar_1 {position:relative;height:16px;background:#004eff;border-radius:8px;} .score_area .bar > p {width: 74px;;position:absolute;right:-80px;top:-10px;text-align:left;color:#093291;font-size:14px;font-weight:600;font-family:'NanumGothic';margin-top:10px;letter-spacing:-1px;} .score_area .bar_1 > p {position:absolute;right:80px;color:#093291;font-size:14px;font-weight:600;font-family:'NanumGothic';margin-top:10px;letter-spacing:-1px;} .score_area .bar_1 > p span {position:relative;} .score_area .bar_1 > p span:before {content:'';position:absolute;left:50%;transform:translateX(-50%);width:0;height:0;border-top:8px solid #004eff;border-left:5px solid transparent;border-right:5px solid transparent;} .bar_text {top:-40px;} .bar_text span:before {bottom:-12px;} .bar_score {top:16px;} .bar_score span:before {top:-8px;margin-left:-3px;transform:rotate(180deg) !important;} .score_area .Number {margin-top:25px;} .Number .text span {color:#fea700;} .Number .bar_1 {background:#fea700;} .Number .bar_1 > p span:before {border-top:8px solid #fea700;} .score_percentage .img {position:relative;background:url('../images/learning/content/img_score_percentage.png') no-repeat 50% 50%;height:95px;margin:20px 0 40px 0;} .bar_line {position:absolute;left:50%;top:0;width:3px;height:100%;background:#f54900;color:#f54900;font-size:14px;font-weight:600;font-family:'NanumGothic';letter-spacing:-1px;} .bar_line span {position:absolute;bottom:-28px;margin-left:-8px;} .bar_line span:before {content:'';position:absolute;bottom:17px;margin-left:5px;width:0;height:0;border-bottom:8px solid #f54900;border-left:5px solid transparent;border-right:5px solid transparent;} .bar_line span.per {bottom:auto;top:-28px;margin-left:-11px;} .bar_line span.per:before {top:17px;margin-left:7px;transform:rotate(180deg) !important;} .bar_line.me {color:#004eff;background:#004eff;left:auto;} .bar_line.me span {margin-left:-5px;} .bar_line.me span:before {border-bottom:8px solid #004eff;margin-left:1px;} .bar_line.me span.per {margin-left:-11px;} .bar_line.me span.per:before {margin-left:7px;} .score_percentage .my {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;min-height:42px;padding:5px;background:#fff;border-radius:84px;font-size:17px;color:#093291;text-align:center;font-weight:600;box-shadow: 1px 4px 4px rgba(0,24,79,0.05);} .score_percentage .my span {color:#ffa800;} .score_percentage .my span.big {color:#004eff;font-size:20px;} .bogang_area {display:flex;flex-wrap: wrap;} .bogang_area .B_unit {position:relative;width:calc(100%/3 - 20px/3);color:#093291;background:#f0f3f9;border-radius:25px;padding:25px 15px 25px 120px;margin-right:10px;margin-bottom:15px;} .bogang_area .B_unit:before {content:'';position:absolute;left:30px;top:50%;transform:translateY(-50%);width:70px;height:70px;border-radius:100%;background-color:#fff;background-position:50% 50%;background-repeat:no-repeat;} .bogang_area .B_unit:nth-child(3n) {margin-right:0;} .bogang_area p ~p {margin-top:10px;} .bogang_area .B_tit {font-size:20px;font-weight:700;} .bogang_area .B_tex {font-size:14px;font-weight:400;font-family:'NanumGothic';} .bogang_area .B_diff {font-size:14px;font-weight:600;font-family:'NanumGothic';color:#004eff;} .bogang_area .B_diff span {font-weight:600;color:#f54900;margin-left:5px;} .bogang_area .B_unit101:before {background-image:url('../images/learning/content/ico_B_unit101.png');} .bogang_area .B_unit102:before {background-image:url('../images/learning/content/ico_B_unit102.png');} .bogang_area .B_unit103:before {background-image:url('../images/learning/content/ico_B_unit103.png');} .bogang_area .B_unit104:before {background-image:url('../images/learning/content/ico_B_unit104.png');} .bogang_area .B_unit105:before {background-image:url('../images/learning/content/ico_B_unit105.png');} .bogang_area .B_unit106:before {background-image:url('../images/learning/content/ico_B_unit106.png');} .bogang_area .B_unit107:before {background-image:url('../images/learning/content/ico_B_unit107.png');} .bogang_area .B_unit108:before {background-image:url('../images/learning/content/ico_B_unit108.png');} .bogang_area .B_unit109:before {background-image:url('../images/learning/content/ico_B_unit109.png');} .bogang_area .B_unit110:before {background-image:url('../images/learning/content/ico_B_unit110.png');} .bogang_area .B_unit111:before {background-image:url('../images/learning/content/ico_B_unit111.png');} .bogang_area .B_unit112:before {background-image:url('../images/learning/content/ico_B_unit112.png');} .bogang_area .B_unit113:before {background-image:url('../images/learning/content/ico_B_unit113.png');} .bogang_area .B_unit114:before {background-image:url('../images/learning/content/ico_B_unit114.png');} .bogang_area .B_unit115:before {background-image:url('../images/learning/content/ico_B_unit115.png');} .bogang_area .B_unit116:before {background-image:url('../images/learning/content/ico_B_unit116.png');} .bogang_area .B_unit117:before {background-image:url('../images/learning/content/ico_B_unit117.png');} .bogang_area .B_unit118:before {background-image:url('../images/learning/content/ico_B_unit118.png');} .bogang_area .B_unit119:before {background-image:url('../images/learning/content/ico_B_unit119.png');} .bogang_area .B_unit120:before {background-image:url('../images/learning/content/ico_B_unit120.png');} .bogang_area .B_more {display:inline-block;padding:0 35px 0 15px;background:#d3dcf0;line-height:30px;border-radius:30px;margin:0 auto;} .bogang_area .B_more.none {display:none;} .bogang_area .B_more span {position:relative;color:#004eff;font-size:13px;font-weight:400;font-family:'NanumGothic';} .bogang_area .B_more span:before {content:'';position:absolute;right:-15px;top:7px;width:7px;height:2px;border-radius:2px;background:#004eff;transform:rotate(45deg);} .bogang_area .B_more span:after {content:'';position:absolute;right:-19px;top:7px;width:7px;height:2px;border-radius:2px;background:#004eff;transform:rotate(130deg);} .bogang_area .B_more.add span:before {transform:rotate(130deg);} .bogang_area .B_more.add span:after {transform:rotate(45deg);} .bogang_area .B_more.add {position:absolute;left:50%;bottom:0;} .Bmore_area {width:100%;flex-wrap: wrap;display:none;position:relative;padding-bottom:30px;margin-bottom:20px;} .Bmore_area.more {display:flex;} .graf_area {width:100%;padding:30px;border-radius:20px;background:#f0f3f9;margin-bottom:30px;height:300px;} .graf_scroll {width:100%;overflow-x:auto;} .correct_ara {width:100%;margin-bottom:20px;} .correct_ara table {border-top:2px solid #004eff;border-bottom:1px solid #004eff;text-align:center;color:#004eff;font-size:17px;font-family:'NanumSquare';font-weight:500;} .correct_ara table th {line-height:30px;border-bottom:1px solid #004eff;padding:10px;font-weight:600;} .correct_ara table td {line-height:42px;position:relative;} .correct_ara table tr:nth-child(even) td {background:#f0f3f9;} .correct_ara .B_view {display:inline-block;position:relative;padding:0 10px 0 28px;line-height:30px;background:#fff;border-radius:5px;border:1px solid #004eff;color:#004eff;font-size:13px;font-weight:400;font-family:'NanumGothic';} .correct_ara .B_view:before {position:absolute;content:'';left:7px;top:7px;width:16px;height:16px;background:url('../images/learning/content/ico_Bview.png') no-repeat 0 0;} .correct_ara .B_view:hover {color:#fff;background:#004eff;} .correct_ara .B_view:hover::before {background-image:url('../images/learning/content/ico_Bview_on.png');} .correct_ara td span {line-height:42px;font-size:0;position:relative;} .correct_ara td span.correct:before {content:'';position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);width:12px;height:12px;border:4px solid #6ebb1d;border-radius:100%;} .correct_ara td span.incorrect:before, .correct_ara td span.incorrect:after {content:'';top:50%;left:50%;margin:-11px 0 0 -2px;position:absolute;width:4px;height:20px;border-radius:2px;background:#d9281a;} .correct_ara td span.incorrect:before {transform:rotate(45deg);} .correct_ara td span.incorrect:after {transform:rotate(135deg);} .report_closed {display:block;width:200px;text-align:center;margin:30px auto;padding:0 40px;border-radius:40px;line-height:60px;background:#004eff;color:#fff;font-size:18px;font-family:'NanumSquare';font-weight:600;} /* 수준평가 리포트 */ .pop_layer .levelreport .pop_cont, .pop_cont {max-width:1040px;} .pop_layer .title.levelreport {text-align:center;display:block;font-size:28px;} .levelreport_sec1 {display:flex;margin-bottom:35px;} .levelreport_sec1 .evaluation_area {width:calc(65% - 10px);} .levelreport_sec1 .analysis_area {width:35%;margin-left:10px} .levelreport_sec1 .evaluation, .levelreport_sec1 .analysis {position:relative;width:100%;background:#f0f3f9;border-radius:20px;min-height:225px;} .evaluation {padding-left:220px;} .evaluation:before {content:'';position:absolute;left:0;top:0;width:200px;height:100%;} .evaluation.level1:before {background:url('../images/learning/content/ico_levelreport_01.png') no-repeat 50% 50%;} .evaluation.level2:before {background:url('../images/learning/content/ico_levelreport_02.png') no-repeat 50% 50%;} .evaluation.level3:before {background:url('../images/learning/content/ico_levelreport_03.png') no-repeat 50% 50%;} .evaluation .le_title {padding-top:40px;color:#333;font-size:27px;font-family:'NanumSquare';font-weight:600;margin-bottom:25px;} .evaluation .le_title b {font-weight:700;} .evaluation .le_title span {color:#004eff;font-weight:700;} .evaluation .le_text {color:#555;font-size:17px;font-family:'NanumSquare';font-weight:500;padding-bottom:40px;line-height:28px;padding-right:30px;} .analysis {padding-top:20px;text-align:center;padding-left:20px;min-width:250px;} /*********************************************** Evaluation에서 가져온 css *********************************************************************************************/ .Cont {position:relative;width:100%;display:none;} .Cont.div_view {display:block;} .area {padding:0 20px;width:100%;} /* button style */ .button_area {margin-top:60px;position:relative;width:100%;text-align:right;display:block;} .button_area > a, .button_area > span {display:inline-block; text-align:center;height:70px;line-height:70px;padding:0 65px;border:1px solid #dcdce2;background:#fff;box-shadow: 8px 8px 10px rgba(1,78,255,0.05);border-radius:35px 8px 35px 45px;} .button_area > span {padding:0 65px 0 85px;} .button_area > a > span, .button_area > span > a {cursor:pointer;position:relative;color:#969696;font-size:24px;font-family:'Jalnan';/*display:block;*/} .button_area > a > span:after, .button_area > span > a:after {content:'';position:absolute;right:-18px;top:8px;width:8px;height:2px;background:#969696;transform:rotate(45deg);} .button_area > a > span:before, .button_area > span > a:before {content:'';position:absolute;right:-18px;top:13px;width:8px;height:2px;background:#969696;transform:rotate(135deg);} .button_area > a ~a {margin-left:20px;} .button_area > a.off {pointer-events:none;} .button_area > a.on > span, .button_area > span > a.on {color:#014eff;} .button_area > a.on > span:after, .button_area > a.on > span:before, .button_area > span > a.on:after, .button_area > span > a.on:before {background:#014eff;} .button_area > a.type1 {box-shadow: 8px 8px 10px rgba(1,78,255,0.05);padding:0 45px 0 65px;} .button_area > span > a.type1 {box-shadow:none;padding:0;} .button_area > a.type1 > span, .button_area > span > a.type1 {color:#969696;} .button_area > a.type1 > span:after, .button_area > a.type1 > span:before, .button_area > span > a.type1:after, .button_area > span > a.type1:before {left:-18px;background:#969696;} .button_area > a.type1 > span:after, .button_area span > a.type1:after {transform:rotate(135deg);} .button_area > a.type1 > span:before, .button_area > span > a.type1:before{transform:rotate(45deg);} .button_area > a.type1.on > span, .button_area > span > a.type1.on {color:#014eff;} .button_area > a.type1.on > span:after, .button_area > a.on > span:before, .button_area > span > a.type1.on:after, .button_area > span > a.type1.on:before {background:#014eff;} .button_area.tac {text-align:center;} .button_area.tac a {min-width:200px;} .button_area.type2 a {box-shadow: 8px 8px 10px rgba(253,221,0,0.05);background:#fddd00;border:none;} .button_area.type2 a span {color:#000;} .button_area.type2 a span:after, .button_area.type2 span:before {right:-18px;background:#000;} .button_area.add {position:fixed;bottom:0;transition: bottom .2s ease-in-out, opacity .2s ease-in-out; opacity: 1; } /* 유형점검 */ .Q {position:relative;width:calc(100% - 200px);font-size:30px;color:#333;font-family:'NanumSquare';font-weight:700;line-height:50px;} .cont_play {display:inline-block;border:2px solid #014eff;position:relative;cursor:pointer;margin-left:20px;line-height:50px;min-width:50px;width:50px;height:50px;border-radius:10px;background:#014eff;font-size:20;text-indent:-5000px;} .cont_play:before {content:'';position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);width:0;height:0;border-bottom:8px solid transparent;border-left:12px solid #fff;border-top:8px solid transparent;} .cont_play.stop {border:2px solid #014eff;background:#fff;} .cont_play.stop:before {content:'';position:absolute;left:16px;top:16px;margin-top:0;margin-left:0;width:4px;height:16px;border:none;background:#014eff;border-radius:2px;transform:none;} .cont_play.stop:after {content:'';position:absolute;left:26px;top:16px;margin-top:0;margin-left:0;width:4px;height:16px;border:none;background:#014eff;border-radius:2px;} .q_num {position:absolute;right:0;top:0;font-size:26px;color:#939393;font-family:'pretendard';font-weight:400;line-height:55px;display:flex;} .q_num b {color:#000;font-weight:700;line-height:55px;} .q_num span {color:#b2b2b2;line-height:55px;margin:0 10px;} .q_num .eye {display:inline-block;cursor:pointer;margin-right:20px;width:55px;height:55px;border-radius:100%;border:1px solid #014eff;background:url('../images/evaluation/content/ico_eye.png') no-repeat 50% 50% #fff;font-size:0;} .q_num .eye.active {border:1px solid #014eff;background:url('../images/evaluation/content/ico_eye_on.png') no-repeat 50% 50% #014eff;box-shadow: 8px 8px 10px rgba(1,78,255,0.05);} .Q_area {margin-top:50px;} .Q_area .Q_type1 {display:flex;justify-content: space-around;text-align:center;} .Q_area .Q_type1 li {margin-bottom:30px;position:relative;padding-bottom:30px;} .Q_area .Q_type1 a {display:block;} .Q_area .Q_type1 a > p {display:block;margin:0 auto;overflow:hidden;width:170px;height:170px;border:1px solid #cecece;border-radius:20px;background:#fff;text-align:center;} .Q_area .Q_type1 a > p img {width:100%;height:auto;} .Q_area .Q_type1 a > span {display:block;width:55px;height:55px;border:1px solid #adadad;border-radius:100%;text-align:center;line-height:55px;color:#555;font-size:30px;font-family:'pretendard';font-weight:400;background:#fff;margin:20px auto 0 auto;} .Q_area .Q_type1 a.active > p {border:2px solid #014eff;box-shadow: 8px 8px 10px rgba(1,78,255,0.05);} .Q_area .Q_type1 a.active > span {border:none;background:#014eff;color:#fff;font-weight:700;} .Q_area .eye_area {margin-top:20px;text-align:center;display:none;} .Q_area .eye_area.view {display:block;position:absolute;left:50%;bottom:0;transform: translateX(-50%);} .Q_area .eye_area button {z-index:10;margin:0 auto;display:block;width:32px;height:18px;background:url('../images/evaluation/content/ico_eye_no.png') no-repeat 50% 50%;font-size:0;} .Q_area .eye_area button.on {background-image:url('../images/evaluation/content/ico_eye_yes.png');} /* 유형점검 > 오답체크 */ .title_check {display:block;position:relative;margin-bottom:60px;padding-top:220px;text-align:center;font-size:34px;color:#333;font-family:'NanumSquare';font-weight:400;} .title_check:before {content:'';position:absolute;top:0;left:50%;transform: translateX(-50%);width:185px;height:185px;border-radius:100%;background:url('../images/evaluation/content/ico_check.png') no-repeat 50% 50% #d8e0f2;box-shadow: 8px 8px 10px rgba(0,0,0,0.05);} .title_check b {font-weight:700;} .check_comment {display:flex;justify-content: space-evenly;} .check_comment li {width:230px;} .check_comment a {overflow:hidden;position:relative;display:block;width:100%;min-height:280px;border:1px solid #dcdce2;background:#fff;border-radius:25px;text-align:center;} .check_comment a i {position:absolute;left:15px;top:15px;width:45px;height:45px;border-radius:100%;background:#e8eaf0;font-size:27px;color:#555;font-family:'pretendard';font-weight:600;line-height:45px;font-style:normal;} .check_comment a .view_comment {position:absolute;left:0;bottom:0;width:100%;height:58px;background:#e8eaf0;} .check_comment a .view_comment span {position:relative;display:inline-block;font-size:22px;color:#444;font-family:'Jalnan';padding-left:30px;line-height:58px;} .check_comment a .view_comment span:before {content:'';position:absolute;left:0;top:0;width:23px;height:100%;background:url('../images/evaluation/content/ico_comment.png') no-repeat 50% 50%;} .check_comment a .correct, .check_comment a .wrong {position:relative;width:100%;height:calc(100% - 58px);background:url('../images/evaluation/content/img_correct.png') no-repeat 50% 50%;font-size:0;} .check_comment a .wrong {background-image:url('../images/evaluation/content/img_wrong.png');} .check_comment a:hover {box-shadow: 10px 10px 12px rgba(1,78,255,0.1);} /* 유형점검_type02 */ .Q_img {width:900px;padding:30px;border:1px solid #cecece;background:#fff;border-radius:25px;margin:0 auto 20px auto;display:block;text-align:center;} .Q_img img {max-width:100%;} .Q_area .Q_type1.Q_type02 {flex-wrap: nowrap !important;} .Q_area .Q_type1.Q_type02 li {width:100%;} /* 유형점검_type04 */ .Q_area .Q_type1.Q_type04 a {display:block;text-align:left;} .Q_area .Q_type1.Q_type04 a > p, .Q_area .Q_type1.Q_type04 a > span {display:inline-block;} .Q_area .Q_type1.Q_type04 a > p {overflow:visible;border:0;border-radius:0;background:0;width:auto;height:auto;margin-top:20px;margin-left:10px;font-size:26px;color:#333;font-family:'NanumSquare';font-weight:600;} .pop_layer .Q_area .Q_type1.Q_type05 a > p, .pop_layer .Q_area .Q_type1.Q_type04 a > p {margin-top:0;width:auto !important;height:auto !important;max-width:100%;margin-left:10px;} .Q_area .Q_type04 .eye_area button {margin-left:10px;} .Q_area .Q_type1.Q_type04.add {flex-wrap: wrap;justify-content: flex-start} .Q_area .Q_type1.Q_type04.add li {width:calc(100%/3)} .Q_area .Q_type1.Q_type04.add.li2 li {width:calc(100%/2)} .Q_area .Q_type1.Q_type04 a.active > p, .Q_area .Q_type1.Q_type05 a.active > p {border:none;box-shadow:none;} .Q_area .Q_type1.Q_type04 .eye_area.view {left:0;transform: translateX(0);} .Q_area .Q_type05 .eye_area, .Q_area .Q_type1.Q_type04 .eye_area.view {margin-top:0px;position:absolute;left:-30px;top:20px;transform: translateX(-50%);} .Q_area .Q_type05 .eye_area button, .Q_area .Q_type04 .eye_area button {margin:0;} /* 유형점검_type05 */ .Q_text {display:flex;position:relative;width:650px;height:70px;line-height:70px;border:1px solid #cecece;background:#fff;border-radius:35px;margin:0 auto 30px auto;padding-left:35px;font-size:22px;color:#555;font-family:'NanumSquare';font-weight:700;} .Q_text:before {z-index:9;content:'';position:absolute;left:40px;bottom:12px;width:calc(100% - 80px);height:1px;border-bottom:2px dashed #222;} .Q_text span {z-index:10;position:relative;color:#000;background:#fff;padding-right:5px;} .Q_area .Q_type1.Q_type05, .Q_area .Q_type1.Q_type04 {flex-wrap:wrap !important;justify-content:space-between;} .Q_area .Q_type1.Q_type05 li {width:100%;margin-left:45px;position:relative;padding-bottom:10px;} .Q_area .Q_type1.Q_type04 li {margin-left:45px;padding-bottom:10px;} .Q_area .Q_type1.Q_type05 a, .Q_area .Q_type1.Q_type04 a {text-align:left;display:flex;align-items: center;} .Q_area .Q_type1.Q_type05 a > span, .Q_area .Q_type1.Q_type04 a > span {margin:0;min-width:55px;} .Q_area .Q_type1.Q_type05 a > p, .Q_area .Q_type1.Q_type04 a > p {width:auto !important;height:auto !important;text-align:left;overflow:visible;border:0;border-radius:0;background:0;width:auto;height:auto;margin-top:15px;margin-left:10px;font-size:26px;color:#333;font-family:'NanumSquare';font-weight:600;} /* 유형학습완료 */ .completion p {font-size:28px;color:#333;font-family:'NanumSquare';font-weight:500;text-align:center;} p.great {font-size:44px;color:#014eff;font-family:'Jalnan';display:block;text-align:center;margin-bottom:20px;} p.great:before {content:'';display:block;margin:0 auto;width:100%;height:36px;background:url('../images/evaluation/content/ico_completion.png') no-repeat 50% 0;} .blackboard {display:block;margin:35px auto;width:620px;height:405px;position:relative;background:url('../images/evaluation/content/completion_bg.png') no-repeat 50% 50%;padding-top:40px;} .blackboard.okay:after {content:'';position:absolute;top:80px;right:80px;width:222px;height:223px;background:url('../images/evaluation/content/completion_bg1.png') no-repeat 50% 50%;} .blackboard ul {margin-left:85px;} .blackboard ul li {position:relative;font-size:26px;color:#fff;font-family:'Jalnan';display:block;line-height:32px;padding:10px 0 10px 40px;} .blackboard ul li:before {content:'';position:absolute;top:13px;left:0;width:27px;height:27px;border:2px solid #9ab8b0;border-radius:8px;box-sizing:border-box;} .blackboard ul li.on:after {content:'';position:absolute;top:14px;left:3px;width:28px;height:20px;background:url('../images/evaluation/content/completion_check.png') no-repeat 50% 50%;} /* 어휘뽀개기 - 확인 */ .Break {text-align:right;max-width:840px;margin:0 auto;padding:0;} .step_3 {display:block;} .step_3 li {position:relative;line-height:55px;font-size:21px;color:#a9a9a9;font-family:'Jalnan';display:inline-block;background:#ebebed;padding:0 20px 0 50px;border-radius:10px;} .step_3 li ~li {margin-left:30px;} .step_3 li.on {border:1px solid #014eff;background:#fff;color:#014eff;box-shadow:3px 3px 5px rgb(1 78 255 / 30%);} .step_3 li:after {content:'';position:absolute;right:-20px;top:0;width:8px;height:100%;background:url('../images/evaluation/content/ico_arrow.png') no-repeat 50% 50%;} .step_3 li:last-child::after {display:none;} .step_3 li.tep_1 {background:url('../images/evaluation/content/ico_step1.png') no-repeat 20px 50% #ebebed;} .step_3 li.tep_2 {background:url('../images/evaluation/content/ico_step2.png') no-repeat 20px 50% #ebebed;} .step_3 li.tep_3 {background:url('../images/evaluation/content/ico_step3.png') no-repeat 20px 50% #ebebed;} .step_3 li.tep_1.on {background:url('../images/evaluation/content/ico_step1_on.png') no-repeat 20px 50% #fff;} .step_3 li.tep_2.on {background:url('../images/evaluation/content/ico_step2_on.png') no-repeat 20px 50% #fff;} .step_3 li.tep_3.on {background:url('../images/evaluation/content/ico_step3_on.png') no-repeat 20px 50% #fff;} .Break_area {display:block;max-width:840px;margin:30px auto 0;} .Break_area .item {position:relative;font-size:28px;color:#333;font-family:'NanumSquare';font-weight:600;text-align:left;} .Break_area .item ~.item {margin-top:20px;} .Break_area .item i {z-index:5;position:absolute;cursor:pointer;right:40px;top:-3px;font-size:0;width:30px;height:40px;background:url('../images/evaluation/content/ico_bookmark.png') no-repeat 50% 50%;} .Break_area .item i.on {background-image:url('../images/evaluation/content/ico_bookmark_on.png')} .Break_area .item > a {transition: all .5s;position:relative;display:block;line-height:110px;height:110px;border:1px solid #cecece;background:#fff;border-radius:20px;} .Break_area .item p {display:none;} .Break_area .item p.active {display:block;width:100%;height:100%;padding-left:40px;} .Break_area .item p.eng {/*background:#f2fbff;*/border:1px solid #014eff;border-radius:20px;} .Btn_more {text-align:center;display:block;width:100%;margin-top:40px;} .Btn_more span {position:relative;display:inline-block;font-size:20px;color:#014eff;font-family:'Jalnan';border-bottom:2px solid #7186db;margin-right:30px;} .Btn_more span:after {content:'';position:absolute;right:-30px;top:0;width:17px;height:100%;background:url('../images/evaluation/content/ico_arrow01_on.png') no-repeat 50% 50%} .Btn_more.off span {color:#555;border-bottom:2px solid #b3b3b3;pointer-events: none;} .Btn_more.off span:after {background-image:url('../images/evaluation/content/ico_arrow01.png');} .Btn_more.none {display:none !important;} .more_area {display:none;margin-top:20px;} .more_area.more {display:block; transition: top .2s ease-in-out, opacity .2s ease-in-out;} /* 어휘뽀개기 - 연습 */ .exer_area {display:block;width:480px;margin:30px auto 0;} .exercise i.bookmark {z-index:5;position:absolute;cursor:pointer;left:20px;top:-3px;font-size:0;width:30px;height:40px;background:url('../images/evaluation/content/ico_bookmark.png') no-repeat 50% 50%;} .exercise i.bookmark.on {background-image:url('../images/evaluation/content/ico_bookmark_on.png')} .exercise {position:relative;display:block;width:100%;border:1px solid #cecece;background:#fff;border-radius:20px;/*overflow:hidden;*/font-family:'NanumSquare';font-weight:400;} .exercise .top_area {border-bottom:1px solid #e6e6e6;line-height:70px;position:relative;color:#777;font-family:'pretendard';font-size:22px;text-align:center;} .exercise .top_area span {color:#111;} .exercise .top_area .speaker {position:absolute;font-size:0;right:20px;top:20px;width:33px;height:31px;background:url('../images/evaluation/content/ico_speaker.png') no-repeat 50% 50%} .exercise .top_area .speaker.on {background:url('../images/evaluation/content/ico_speaker_on.png') no-repeat 50% 50%} .exercise .exer_con {min-height:200px;width:100%;display:flex;align-items: center;} .exercise .exer_con p {font-size:30px;color:#333;font-weight:700;text-align:center;width:100%;} .exercise .exer_exam {padding:35px 20px 40px 20px;border-top:1px solid #e6e6e6;background:#f7f9ff;text-align:left;border-radius:0 0 20px 20px;} .exer_exam .text {color:#555;font-size:18px;} .exer_exam a {display:block;margin-top:20px;text-align:center;width:100%;line-height:80px;height:80px;font-weight:600;background:#fff;box-shadow: 1px 4px 4px rgba(0,0,0,0.1);border-radius:10px;color:#333;font-size:22px;} .exer_exam a.correct {background:#eaf3ff;color:#014eff;border:1px solid #014eff;} .exer_exam a.incorrect {background:#fff1f0;color:#f11e1e;border:1px solid #f11e1e;} .button_area.exer {margin-top:40px;} /* 어휘뽀개기 - 퀴즈 */ .quiz_area {width:100%;display:block;padding:0 50px;} .Q_quiz {display:block;position:relative;width:100%;padding-bottom:10px;border-bottom:2px solid #000;} .Q_quiz .Q_quizarea {display:flex;text-align:left;padding-right:50px;position:relative;flex-wrap:wrap;} .Q_quiz .word_Q {line-height:45px;font-size:32px;color:#000;font-family:'NanumSquare';font-weight:700;padding-right:1px;} .Q_quiz .txtcorrect span.word_Q {color:#014eff;} .Q_quiz .txtincorrect span.word_Q {color:#f11e1e;} .Q_quiz .correct {display:none;position:absolute;left:0;top:5px;opacity:0;font-size:32px;font-family:'NanumSquare';font-weight:700;} .Q_quiz .correct.hint_ani {display:inline-block;position:relative;animation: fade 1.5s ease-out; -webkit-animation: fade 1.5s ease-out; -moz-animation: fade 1.5s ease-out;} @keyframes fade { 0% {opacity:0;} 50% {opacity:0.5;} 100% {opacity:0;} } .Q_quiz .num {position:absolute;right:0;top:20px;color:#a3a3a3;font-family:'pretendard';font-size:16px;letter-spacing:0;} .Q_quiz .num span {color:#111;letter-spacing:4px;} .btn_hint {cursor:pointer;margin-top:10px;display:inline-block;padding:0 15px;line-height:30px;height:30px;color:#fff;font-size:16px;font-family:'NanumGothic';font-weight:600;background:#f98a00;border-radius:4px;} .btn_hint.off {color:#e6e6e6;background:#aeaeae;pointer-events: none;} .Q_spelling {margin-top:55px;position:relative;padding:60px 0;} .Q_spelling .text{position:absolute;left:0;top:0;color:#555;font-size:18px;font-family:'NanumSquare';} .sp_card {display:block;position:relative;width:100%;display:flex;} .sp_card button {width:70px;height:70px;text-align:center;border-radius:15px;border:1px solid #bcbcbc;box-shadow: 1px 4px 4px rgba(0,0,0,0.1);font-size:40px;color:#777;font-family:'NanumSquare';font-weight:700;} .sp_card button ~button {margin-left:6px;} .sp_card button.del {position:absolute;right:0;top:0;font-size:0;background:url('../images/evaluation/content/ico_del.png') no-repeat 50% 50% #555;border-color:#555;} .sp_card button.active, .sp_card button:active {background:#eee;box-shadow: 0 5px #eee;transform: translateY(2px);} /* 어휘뽀개기 - 귀트이기 */ .ear_area {width:700px;margin:0 auto;} .ear_area .q {font-size:26px;font-weight:400;} .ear_area .q b {font-weight:600;} .ear_area .q_num {font-size:19px;font-family:'pretendard';} .q_num .q_num b {font-weight:400;} .audio_area {position:relative;margin:20px auto 0 auto;display:block;width:calc(100% - 20px);background:#fff;border-radius:20px;border:1px solid #cecece;padding:30px;} .audio_area audio {width:100%;} .audio_area .play {display:block;position:relative;width:24px;height:36px;margin:20px auto;font-size:0;} .audio_area .play:before {content:'';position:absolute;left:0;top:0;width:0;height:0;border-bottom:18px solid transparent;border-left:22px solid #014eff;border-top:18px solid transparent;border-radius:4px;} .audio_area .pause:before {content:'';position:absolute;left:0;top:7px;width:5px;height:22px;background:#014eff;border-radius:2px;transform:none;border:none;} .audio_area .pause:after {content:'';position:absolute;left:12px;top:7px;width:5px;height:22px;background:#014eff;border-radius:2px;} .audio_area .replay {position:absolute;right:30px;top:50px;color:#606060;font-size:14px;font-weight:400;font-family:'NanumGothic';padding-left:28px;background:url('../images/evaluation/content/ico_repeat.png') no-repeat 0 0;line-height:21px;} .audio_area .replay span {position:relative;} .audio_area .replay span:before {content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:#dedede;} .audio_area .replay.on {color:#014eff;background:url('../images/evaluation/content/ico_repeat_on.png') no-repeat 0 0;} .ear_q {margin-top:40px;display:flex;flex-wrap:wrap;} .ear_q > p {font-size:22px;color:#555;font-weight:600;line-height:46px;width:100%;} .ear_q > p ~p {margin-top:10px;} .ear_q > p span {margin:5px 10px;position:relative;padding:0 20px;display:inline-block;} .ear_q > p span:before {position:absolute;content:'';left:0;top:0;width:100%;height:100%;border:1px solid #666;background:#fff;border-radius:5px;} .ear_q > p span.off {pointer-events: none;} .ear_q > p span.off:before {background:#d1d1d1;} .ear_q > p span.okay {color:#014eff;} .ear_q > p span.okay:before {z-index:-1;background:#eaf3ff;border:1px solid #014eff;} .ear_card {display:flex;flex-wrap:wrap;margin-top:40px;padding:0 10px;} .ear_card button {word-break:break-all;width:calc(100%/3 - (40px/3));margin-right:20px;font-size:22px;color:#333;font-weight:600;text-align:center;display:block;background:#fff;box-shadow: 0px 4px 10px rgba(0,0,0,0.1);padding:25px 10px;border-radius:10px;margin-top:20px;} .ear_card button:nth-child(3n) {margin-right:0;} .ear_card button.active {background:#e7e7e7;color:#9d9d9d;} #wordSlider .button_area {padding-right:10px;} #wordSlider .relative, #wordSlider .ear_q, #wordSlider .mouse_q, #wordSlider .mouse_A {width:calc(100% - 20px);margin-right:auto;margin-left:auto;} #wordSlider .slick-slide {height:auto;} /* 어휘뽀개기 - 입트이기 */ .mouse_area {width:1100px;margin:0 auto;} .mouse_q {position:relative;padding-left:160px;} .mouse_q:before {position:absolute;left:0;top:0;content:'';width:128px;height:128px;border-radius:100%;background:url('../images/evaluation/content/ico_mouse1.png') no-repeat 50% 50% #d8e0f2;box-shadow: 0px 4px 10px rgba(0,0,0,0.1);} .mouse_q > p {padding-top:20px;font-size:26px;color:#333;font-weight:500;padding-right:80px;} .mouse_q .num {position:absolute;right:0;top:30px;font-size:19px;color:#a3a3a3;} .mouse_q .num span {color:#111;} .mouse_q .mouse_q_area {display:flex;justify-content:center;align-items:center;margin-top:25px;width:100%;padding:20px;min-height:110px;background:#fff;border-radius:10px;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);} .mouse_q .mouse_q_area p {font-size:31px;color:#333;font-weight:700;line-height:40px;} .mouse_q .mouse_q_area p span {position:relative;background:#b7b7b7;color:#b7b7b7;padding:2px;} /*.mouse_q .mouse_q_area p span:before {content:'';position:absolute;left:0;top:-5px;width:100%;height:40px;background:#b7b7b7;}*/ .mouse_A {position:relative;padding:0 160px;margin:80px 0;min-height:130px;} .mouse_A:before {position:absolute;right:0;top:0;content:'';width:128px;height:128px;border-radius:100%;background:url('../images/evaluation/content/ico_mouse2.png') no-repeat 50% 50% #d8e0f2;box-shadow: 0px 4px 10px rgba(0,0,0,0.1);} .mouse_A > p {padding-top:20px;font-size:26px;color:#333;font-weight:500;} .mouse_A .mouse_A_area {display:flex;justify-content:center;align-items:center;justify-content: space-around;margin-top:50px;width:100%;} .mouse_A .mouse_A_area div.play {position:relative;display:flex;align-items: center;justify-content: center;width:133px;height:133px;background-position:50% 50%;background-repeat:no-repeat;border-radius:100%;overflow:hidden;font-size:0;background-image:url('../images/evaluation/content/ico_mouse.png');} .mouse_A .mouse_A_area a.mike {display:block;width:100%;height:100%;background-image:url('../images/evaluation/content/ico_mouse_mike.png');} .mouse_A .mouse_A_area a.mike.pluse {background:url('../images/evaluation/content/ico_mike_stop.png') no-repeat 50% 50%;} .mouse_A .bg, .mouse_A .innerCircle{display: flex;align-items: center;justify-content: center;} .mouse_A .bg{background-color: lightgray;width: 133px;height: 133px; flex-direction: column;row-gap: 10px;} .mouse_A .innerCircle{width: 105px;height: 105px;border-radius: 50%;position: relative;} .mouse_A .innerCircle .pg_v{ position: relative;} .mouse_A .innerCircle:before{content:'';width:95px;height:95px;border-radius:100%;position:absolute;background-image:url('../images/evaluation/content/ico_mouse_bg.png');} .mouse_A button {position:absolute;left:0;top:0;width:100%;height:100%;background:url('../images/evaluation/content/ico_mouse_play.png') no-repeat 50% 50%;} .mouse_A button.action {background-image:url('../images/evaluation/content/ico_mouse_stop.png');} .mouse_A .answer button {background-image:url('../images/evaluation/content/ico_mouse_play_1.png');} .mouse_A .answer button.action {background-image:url('../images/evaluation/content/ico_mouse_stop_1.png');} /* 모의고사_문제 */ .mock .area {padding:0;} .note_title {color:#333;font-size:33px;font-family:'NanumSquare';font-weight:400;display:block;text-align:center;margin-bottom:50px;} .note_title:before {display:block;margin:0 auto 30px auto;content:'';width:176px;height:176px;background:url('../images/evaluation/content/ico_note.png') no-repeat 50% 50% #d8e0f2;overflow:hidden;border-radius:100%;box-shadow: 1px 4px 4px rgba(0,0,0,0.1);} .note_check {display:flex;flex-wrap:wrap;width:100%;border:1px solid #cecece;border-radius:15px;background:#fff;overflow:hidden;} .note_check a {width:calc(100%/10);border-right:1px solid #e3e3e3;text-align:center;} .note_check a:nth-child(10n) {border-right:none;} .note_check a:nth-child(-n+10) {border-bottom:1px solid #e3e3e3;} .note_check a p {line-height:50px;color:#333;font-family:'pretendard';font-size:20px;background:#f1f5fc;border-bottom:1px solid #e3e3e3;} .note_check a span {line-height:80px;font-size:0;position:relative;} .note_check a span.correct:before {content:'';position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);width:16px;height:16px;border:5px solid #0176f4;border-radius:100%;} .note_check a span.incorrect:before, .note_check a span.incorrect:after {content:'';top:50%;left:50%;margin:-13px 0 0 -2px;position:absolute;width:4px;height:24px;border-radius:2px;background:#fa7b08;} .note_check a span.incorrect:before {transform:rotate(45deg);} .note_check a span.incorrect:after {transform:rotate(135deg);} /* 수준평가 */ .tutorial {z-index:999999;position:absolute;top:0;left:0;width:100%;height:100%;padding:0;display:block;overflow:auto;} .tutorial:after {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba( 0, 55, 137, 0.7);} .tutorial img {z-index:100;position:relative;max-width:100%;} .tutorial .tut_img {z-index:999999;position:absolute;top:0;left:0;} .tut_area {width:1200px;margin:0 auto;position:relative;height:100%;} .tutorial .start {z-index:9999999;position:absolute;left:50%;transform: translateX(-50%);bottom:100px;width:100%;text-align:center;width:250px;height:70px;line-height:70px;display:block;border:1px solid #dcdce2;background:#ffef82;box-shadow: 8px 8px 10px rgba(1,78,255,0.05);border-radius:35px 8px 35px 45px;} .tutorial .start > span {position:relative;display:inline-block;color:#014eff;font-size:24px;font-family:'Jalnan';} .tutorial .start > span:after {content:'';position:absolute;right:-18px;top:32px;width:8px;height:2px;background:#014eff;transform:rotate(45deg);} .tutorial .start > span:before {content:'';position:absolute;right:-18px;top:37px;width:8px;height:2px;background:#014eff;transform:rotate(135deg);} .tutorial_bg img {max-width:100%;} .tutorial_bg .pc_img, .tutorial .pc_img {display:block;} .tutorial_bg .mobile_img, .tutorial .mobile_img {display:none;} /*.Tutorial_item {position:absolute;margin-left:75px;font-family:'pretendard';font-weight:400;} .Tutorial_item i {position:absolute;width:60px;height:60px;border:3px dotted #fff;border-radius:10px;font-size:0;} .Tutorial_item p {position:relative;display:flex;align-items: center;text-align:left;padding:10px 10px 10px 80px;margin-top:65px;margin-left:-230px;width:260px;background:#fff;min-height:80px;border-radius:40px 0 20px 40px;color:#014eff;font-size:15px;} .Tutorial_item p:before {content:'';position:absolute;left:0;top:0;width:65px;height:65px;background:url('../images/learning/content/ico_tutorial.png') no-repeat 50% 50%;border:6px solid #fff;border-radius:100%;} .Tutorial_item p:after {content:'';position:absolute;right:0;top:-20px;width:25px;height:20px;background:url('../images/learning/content/ico_tutorial_after.png') no-repeat 50% 50%;} .Tutorial_item.num2 i {width:66px;height:66px;} .Tutorial_item.num2 p {margin-top:-90px;border-radius:40px 20px 0 40px;} .Tutorial_item.num2 p:after {top:auto;bottom:-22px;right:-3px;transform:rotate(267deg);} .Tutorial_item.num2.width i {width:212px;height:85px;} .Tutorial_item.num2.width p {margin-top:-90px;} .Tutorial_item.num3 i {width:85px;height:45px;} .Tutorial_item.num3 p {margin-top:55px;margin-left:65px;border-radius:0 40px 40px 20px;padding-left:10px;padding-right:80px;} .Tutorial_item.num3 p:before {left:auto;right:0;} .Tutorial_item.num3 p:after {top:-20px;right:auto;left:0;transform:rotateY(180deg);} .Tutorial_item.num3.width i {width:185px;height:185px;} .Tutorial_item.num3.width p {margin-top:190px;margin-left:115px;} .Tutorial_item.num4 i {width:120px;height:30px;} .Tutorial_item.num4 p {margin-top:-90px;margin-left:65px;border-radius:20px 40px 40px 0;padding-left:10px;padding-right:80px;} .Tutorial_item.num4 p:before {left:auto;right:0;} .Tutorial_item.num4 p:after {top:auto;bottom:-20px;transform:rotate(180deg);right:auto;left:0;}*/ /* 학교제휴 */ .cooperation header {position:relative;width:100%;height:285px;border-bottom:none;background:none;} .cooperation header:before {content:'';position:absolute;left:0;top:0;width:50%;height:285px;background:#004eff;} .cooperation header .header {position:relative;margin:0 auto;width:1330px;height:100%;background:#004eff;border-radius: 0 0 200px 0;} .cooperation header .header:after {content:'';position:absolute;right:-150px;bottom:-135px;width:875px;height:375px;background:url('../images/cooperation/bg.png') no-repeat 100% 100%;} .cooperation header h1 {position:absolute;left:0;top:20px;width:168px;height:58px;background:url('../images/cooperation/logo.png') no-repeat 0 0;font-size:0;} .cooperation header a {z-index:5;position:absolute;right:50px;top:25px;display:block;line-height:45px;background:#ffe325;border-radius:25px;box-shadow: 4px 4px 5px rgba(0,0,0,0.12);padding:0 20px;} .cooperation header a span {position:relative;padding-right:12px;font-size:15px;color:#004eff;letter-spacing:-1px;font-family:'Jalnan';} .cooperation header a span:before {content:'';position:absolute;right:0;top:2px;width:2px;height:6px;background:#004eff;transform:rotate(130deg)} .cooperation header a span:after {content:'';position:absolute;right:0;top:6px;width:2px;height:6px;background:#004eff;transform:rotate(45deg)} .cooperation header .tit_text {z-index:5;position:absolute;left:60px;bottom:40px;font-size:47px;color:#fff;letter-spacing:-1px;font-family:'Jalnan';line-height:68px;} .cooperation header .tit_text span b {color:#ffe325;} .coop_body {width:100%;} .coop_body .box_area {position:relative;z-index:100;width:1330px;margin:0 auto;display:flex;padding:50px 0 70px 0;} .N_borad {position:relative;width:calc(100% - 450px);} .N_borad .title {font-size:25px;color:#222;letter-spacing:-1px;font-family:'Jalnan';} .N_borad a.more {position:absolute;right:5px;top:10px;} .N_borad a.more span {position:relative;padding-right:12px;font-size:15px;color:#797979;letter-spacing:-1px;font-family:'Jalnan';} .N_borad a.more span:before {content:'';position:absolute;right:0;top:2px;width:2px;height:6px;background:#797979;transform:rotate(130deg)} .N_borad a.more span:after {content:'';position:absolute;right:0;top:6px;width:2px;height:6px;background:#797979;transform:rotate(45deg)} .N_borad .slick-track {display:flex;margin-top:15px;} .N_borad .slick-list {overflow:visible;} .N_borad .slick-slide ~.slick-slide {margin-left:15px;} .N_borad .slick-slide a {position:relative;border:1px solid #e0e0e2;display:block;border-radius:20px;padding:25px;min-height:150px;transition:all 0.2s ease-in-out;} .N_borad .slick-slide a p {color:#222;font-size:18px;line-height:26px;font-family:'NanumSquare';font-weight:600;white-space:normal; display:-webkit-box; text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .N_borad .slick-slide a span {position:absolute;left:25px;bottom:20px;color:#777;font-size:14px;font-family:'NanumGothic';font-weight:400;} .N_borad .slick-slide a:hover {border-color:#004eff;background:#004eff;} .N_borad .slick-slide a:hover p, .N_borad .slick-slide a:hover span {color:#fff;} .N_borad .slick-slide a:hover p {text-decoration:underline;} .box_area .guide {margin-top:56px;border:1px solid #e0e0e2;display:flex;align-items: center;justify-content: space-around;border-radius:20px;margin-left:30px;height:150px;width:420px;padding:0 30px;} .box_area .guide a {display:block;text-align:center;color:#222;font-size:17px;font-family:'NanumSquare';font-weight:600;} .box_area .guide a:before {display:block;content:'';width:80px;height:70px;background:url('../images/cooperation/guide_ico01.png') no-repeat 50% 100%;margin-bottom:5px;} .box_area .guide a:hover {color:#004eff;text-decoration:underline;} .box_area .guide a:nth-child(2)::before {background-image:url('../images/cooperation/guide_ico02.png')} .box_area .guide a:nth-child(3)::before {background-image:url('../images/cooperation/guide_ico03.png')} .gray_area {width:100%;background:#f5f6f9;padding:70px 0 100px 0;} .memH4_tit {font-size:40px;color:#333;letter-spacing:-1px;font-family:'Jalnan';margin-bottom:50px;} .memH4_tit span {color:#004eff;} .per_chk {text-align:center;margin-top:20px;} .per_chk .chkWrap label {color:#222;font-size:18px;font-family:'NanumSquare';font-weight:600;} .agree_box .scroll {overflow-y:auto;height:150px;} .agree_box .scroll p {color:#555;font-size:14px;line-height:24px;font-family:'NanumGothic';font-weight:400;} dl +.memH5_tit {margin-top:50px;} .memH5_tit {position:relative;padding-left:10px;font-size:15px;color:#222;font-family:'NanumGothic';font-weight:600;padding-top:10px;text-align:left;} .memH5_tit:before {position:absolute;content:'';width:5px;height:5px;left:0;top:5px;background:#004eff;border-radius:100%;} .pop_layer.newboard .pop_area {width:1200px;height:calc(100% - 100px);background:#fff;} .newboard_scroll {width:calc(100% - 10px);height:calc(100% - 120px);overflow-y:auto;padding:40px 35px;margin-left:auto;margin-right:auto;} i.i_new {font-size:0;display:inline-block;margin-left:8px;height:100%;width:16px;background:url('../images/common/ico_new.png') no-repeat 0 0;} .view_list {margin-top:10px;width: 100%; display: block;border-top: 2px solid #014eff;border-bottom: 1px solid #020202;font-family:'NanumGothic';} .view_list li {border-bottom: 1px solid #e7e7e7;} .view_list li.li_file p {display: inline-block;line-height:50px;} .view_list .other {display: block;padding-left:20px;} .view_list .other span, .view_list .file {min-width:65px;display: inline-block;line-height:50px;color: #555;font-size:14px; position: relative;} .view_list .other span:last-child {margin-right:0;} .view_list .other span.name, .view_list .file {font-weight:600;margin-top:0;} .view_list .other span.date {margin-right:50px;} .view_list li.li_file {display:flex; align-items: baseline;padding-left:20px;padding-bottom:15px;} .view_list li.li_file a {display:block;color: #555;font-size:14px;line-height:30px;} .view_list a:hover {text-decoration: underline;} .view_list li.memo {color: #555; line-height: 34px; font-size: 16px;border-bottom: none;padding:30px 20px;} .view_list .view_tit {background:#f7f9ff;color:#111;font-size:25px;font-family:'NanumSquare';font-weight:700;border-bottom:1px solid #eaeaea;padding:20px;} /* 이용약관 */ .policy h3 {font-size:22px;color:#222;font-weight:700;margin-bottom:30px;} .policy h4 {font-size:20px;color:#111;font-weight:700;margin-bottom:15px;} .policy h5 {font-size:17px;color:#111;font-weight:600;margin-bottom:10px;} .policy p {font-size:17px;color:#333;font-weight:400;line-height:34px;} .policy div + h5, .policy ul + h5, .policy p + h5, .policy p + h4, .policy ul + h4, .policy div + h4 {margin-top:40px;} .policy ul {margin-left:20px;text-align:left;} .policy li {position:relative; padding-left:10px;line-height:34px;letter-spacing:-1.5px;font-size:17px;color:#333;font-weight:400;} .policy li:before {content:'';position:absolute;left:0;top:14px;width:4px;height:4px;background:#9296af;border-radius:100%;} .policy .none li {padding-left:0;color:#555;} .policy .none li:before {display:none;} .board.type1 {border-top:1px solid #004eff;} .board.type1 thead th {background:#e9eef9;border-right:1px solid #cfcfcf;} .board.type1 thead th:last-child, .board.type1 tbody td:last-child {border-right:none;} .board.type1 tbody td {border-bottom:1px solid #cfcfcf;border-right:1px solid #cfcfcf;font-size:17px;color:#555;font-weight:400;} .board.type1 tbody tr:nth-child(even) td {background:#fff;} .board.type1 tbody td.border {border-right:1px solid #cfcfcf;} .policy table ul {margin-left:0;} .board.type1.tal td {text-align:left;} td.tac {text-align:center !important;} .policy .line {display:inline-block;margin-left:5px;color:#111;text-decoration:underline;} .policy .title_name {color:#004eff;font-weight:600;} .policy .title_center {color:#333;font-weight:600;text-decoration:underline;margin-top:20px;} .mbo40 {margin-bottom:40px;} .email_policy {background:#f8f8f9;padding:20px 40px;border-radius:20px;display:block;} .email_policy p {color:#333;font-size:17px;font-family:'NanumSquare';font-weight:500;line-height:34px;padding-left:125px;position:relative;min-height:100px;display:flex;align-items: center;} .email_policy p:before {position:absolute;left:0;top:0;content:'';width:100px;height:100px;border-radius:100%;background:url('../images/common/ico_permail.png') no-repeat 50% 50% #fff;} @media (max-width: 1560px) { .pop_layer .logo {left:20px;} .pop_layer .title {margin-left:160px;} .pop_layer.mock .title {margin-left:160px} .pop_layer.mock .title.levelreport {margin-left:0;} /*.tutorial img {max-width:calc(100% + 30px);}*/ } @media (max-width: 1330px) { .level_card {max-width:100%;padding-left:20px;padding-right:20px;} .mock_title, .level_st {max-width:100%;} /* 모의고사 - 리포트 */ .report .pop_area {width:calc(100% - 40px);} .score_area .score_bar {width:calc(60% - 10px);} .score_area .score_percentage {min-width:auto;width:40%} .report_scroll {padding:0 30px 0 20px;width:calc(100% + 60px);} .cooperation header .header, .coop_body .box_area {width:100%;} } @media (max-width: 1300px) { .level_area {max-width:100%;} .level_area .menu {margin-right:230px;} .level_area .menu a {padding:0 35px;letter-spacing:-1px;} .level_area .menu i {cursor:pointer;font-size:0;} .levelM_area {width:100%;} } @media (max-width: 1200px) { .pop_layer.mock .title {margin-left:160px;max-width:100%;background:none;} .tut_area {width:100%;} .pop_layer.newboard .pop_area {width:calc(100% - 40px);} } @media (max-width: 1010px) { /* 해설 - 레이어 팝업 */ .explain .pop_area {width:calc(100% - 40px);} } @media (max-width: 1100px) { /* 어휘뽀개기 - 입트이기 */ .mouse_area {width:100%;padding:0;} } @media (max-width: 1000px) { .level_area .menu {margin-right:230px;display:flex;justify-content: center;} .level_area .menu a {font-size:19px;} .level_area .menu a.active {font-size:20px;} .level_area .menu li ~li {margin-left:5px;} .level_area .percent {position:relative;left:50%;transform: translateX(-50%);} .pop_layer .levelreport .pop_cont, .pop_cont {max-width:100%;} } /* for mobile */ @media (max-width: 900px) { .honey_area {width:calc(100% - 40px);margin:0 auto;} /* 튜도리얼 */ .tutorial_bg .pc_img, .tutorial .pc_img {display:none;} .tutorial_bg .mobile_img, .tutorial .mobile_img {display:block;} .tutorial .start {bottom:15%;line-height:60px;height:60px;width:200px;} .tutorial .start > span {font-size:20px;} .tutorial .start > span:before {top:31px;} .tutorial .start > span:after {top:26px;} /* 어휘뽀개기 - 입트이기 */ .mouse_area .button_area {width:calc(100% + 40px);left:-20px;} /* 학교제휴 */ .cooperation header {height:390px;} .cooperation header:before {display:none;} .cooperation header .header {width:calc(100% - 40px);margin:0;} .cooperation header .header:before {content:'';position:absolute;left:0;bottom:0;width:100%;height:76px;background:url('../images/cooperation/bg_m01.png') no-repeat 0 100%;} .cooperation header .header:after {content:'';position:absolute;right:-40px;bottom:-99px;width:100%;height:371px;background:url('../images/cooperation/bg_m.png') no-repeat 100% 100%;} .cooperation header h1 {left:30px;} .cooperation header a {right:30px;} .cooperation header .tit_text {left:50px;bottom:80px;} .coop_body .box_area {width:calc(100% - 60px);display:block;padding:60px 0 50px 0;} .N_borad {width:100%;} .box_area .guide {margin-top:30px;margin-left:0;width:100%;} .gray_area {padding:30px 20px 80px 20px;} .level_area {height:auto;padding:0 20px;margin-bottom:40px;} .level_area .menu li {width:calc(100% - (10px/3));} .level_area .menu {margin-top:0px;margin-right:0px;justify-content: space-between;} .level_area .menu a {font-size:17px;line-height:76px;padding:0 30px;letter-spacing:0;} .level_area .menu a.active {font-size:18px;} .level_card {padding:0;margin-top:30px;} .level_card .Card_unit a {position:relative;width:calc(100%/3 - (24px/3));} .level_card .Card_unit a:nth-child(4n+1){margin-left:12;} .level_card .Card_unit a:nth-child(3n+1){margin-left:0;} .level_Con {padding:50px 20px 80px 20px;} .level_Con:after {right:0px;width:90%;bottom:30px;background-size:100% auto;} .level_Unit {text-align:right;} .U_menu li ~li {margin-left:40px;} .U_menu li a {font-size:28px;} .U_menu i {width:25px;height:25px;background-size:100% auto;} .U_menu li .ballon {text-align:left;font-size: 11px;padding:15px;border-radius:10px;top:-75px;left:-140px;width:320px;line-height:18px;} .U_menu li:last-child .ballon {width:320px;left:auto;right:-40px;top:-60px;} .U_menu li .ballon:after {left:120px;} .U_menu li:last-child .ballon:after {left:265px;} .level_Unit .Vocab {position:relative;display:inline-block;right:0;margin-top:10px;line-height:55px;padding:0 25px 0 70px;font-size:17px;} .level_card .ex span {font-size:17px;} /* 모의고사 */ .level_st {width:calc(100% - 40px);} .level_st > a {max-width:100%;} .level_st > a {min-height:320px;width:calc(100%/3 - (60px/3));} .level_st > a ~a {margin-left:30px;} .level_st a {background-size: 120px 120px !important;background-position:50% 90px !important;} .level_st .off:after {top:90px;height:120px;background-size: auto 100%;} /* 모의고사 - 레벨선택 */ .levelM_area .ex span {font-family:'NanumGothic';font-size:15px;padding-left:20px;font-weight:400;} .levelM_area .ex span:before {top:3px;width:12px;height:12px;} .levelM_area .ex span ~span {margin-left:10px;} .mock_card {display:flex;width:100%;flex-wrap: wrap;margin-top:25px;} .mock_card li {width:calc(100%/3 - (20px/3));padding:30px 20px;min-height:200px;} .mock_card li:nth-child(5n+1){margin-left:10px;} .mock_card li:nth-child(3n+1){margin-left:0;} .mock_card li.off a {height:calc(100% + 60px);margin-top:-30px;} /* 모의고사 - 리포트 */ .pop_layer .levelreport a.close {background-size:20px auto;top:0;right:0;} .report .pop_area {padding:40px;} .report .explain .pop_area {height:100%;width:100%;padding:0;} .pop_area .explain .exp_scroll, .pop_area .newboard .exp_scroll {padding:20px;} .pop_area .explain .exp_scroll, .pop_area .newboard .exp_scroll {height:calc(100% - 120px);} .pop_area .explain .h2_title, .pop_area .newboard .h2_title {width:calc(100% - 40px);margin-left:20px;} .pop_layer .explain .h2_title span, .pop_layer .newboard .h2_title span {font-size:16px;} .report_title {font-size:30px;} .report .percent {width:250px;top:30px;right:60px;} .report .percent > p {font-size:18px;} .report .percent > p > span {font-size:28px;} .report .percent .txt > p {font-size:14px;font-family:'NanumGothic';font-weight:600;} .report .percent .txt > p > span {font-size:17px;} .report_comment {min-height:65px;padding:5px 10px;} .report_comment p {font-size:13px;font-family:'NanumGothic';font-weight:600;padding-left:30px;} .report_comment p span.big {font-family:'NanumSquare';font-size:19px;} .report_comment p:before {width:22px;height:22px;background-size:100% auto;} .h5_title {font-size:18px;} .report_scroll {width:calc(100% + 50px);padding-right:20px;height:calc(100% - 150px);} .score_area .score_bar {padding:20px;} .score_bar > div {padding-right:40px;} .score_area .text {font-size:14px;font-family:'NanumGothic';font-weight:600;} .score_area .text span {font-size:17px;font-family:'NanumSquare';} .score_area .bar {height:10px;} .score_area .bar_1 {height:10px;} .score_area .bar > p {font-size:12px;top:-12px;right:-40px;} .score_area .bar_1 > p {font-size:12px;} .score_percentage .img {height:85px;} .bar_line {font-size:12px;font-weight:400;} .score_percentage .my {font-size:14px;font-family:'NanumGothic';font-weight:600;min-height:35px;} .score_percentage .my span.big {font-size:17px;font-family:'NanumSquare';} .bogang_area .B_unit {position:relative;width:calc(100%/3 - 20px/3);padding:15px 15px 15px 75px;} .bogang_area .B_unit:before {left:15px;width:50px;height:50px;background-size:22px auto;} .bogang_area .B_tit {font-size:17px;font-weight:700;} .bogang_area .B_tex {font-size:12px;} .bogang_area .B_diff {font-size:12px;} .bogang_area .B_more span {font-size:12px;} .graf_area {padding:20px;} .correct_ara .B_view {font-size:12px;padding-left:22px;} .correct_ara .B_view:before {left:6px;top:9px;width:12px;height:12px;background-size: 100% auto;} .report_closed {margin:30px auto 20px auto;line-height:45px;font-size:15px;font-family:'NanumGothic';} /* 수준평가 리포트 */ .pop_layer .title.levelreport {font-size:20px;margin-left:0 !important;} .levelreport_sec1 .evaluation_area {width:calc(100% - 310px);} .levelreport_sec1 .analysis_area {width:300px;} .evaluation {padding-left:130px;} .evaluation:before {width:120px; background-size:90px auto !important;} .evaluation .le_title {font-size:20px;margin-bottom:15px;} .evaluation .le_text {font-size:15px;font-family:'NanumGothic';line-height:25px;padding:0 20px 20px 0;} .analysis {padding-left:10px;} /*********************************************** Evaluation에서 가져온 css *********************************************************************************************/ /* button style */ .button_area {bottom:0;margin-top:50px;height:70px;border-top:1px solid #dcdce2;background:#fff;/*box-shadow: -8px -8px 10px rgba(1,78,255,0.05);*/text-align:center;} .button_area.evaluation {padding-left:0;padding-top:0;} .button_area > a, .button_area > span {height:70px;line-height:70px;padding:0 40px 0 20px;border:none;background:none;box-shadow: none;border-radius:0;} .button_area > span {padding:0;} .button_area > a > span, .button_area > span > a {font-size:20px;} .button_area > a > span:before, .button_area > span > a:before {top:13px;} .button_area > a > span:after, .button_area > span > a:after {top:8px;} .button_area a.type1 {box-shadow:none;} .button_area a.type1 {padding:0;} .button_area.type2 {position:fixed;bottom:0;background:#fddd00;} /* 유형점검 */ h2 {display:block;width:100%;} .cont_play {margin-left:10px;} .q_num {line-height:35px;font-size:20px;} .q_num b {line-height:35px;} .q_num span {line-height:35px;} /* 유형점검_type02 */ .Q_img {width:100%;} .Q_area .Q_type1 {flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;} .Q_area .Q_type1 li {width:calc(100%/3);padding:0 10px 25px 10px;} .Q_area .Q_type1 a > p {width:100% !important;height:auto !important;} .Q_area .Q_type1 a > span {min-width:35px !important;width:35px;height:35px;line-height:35px;font-size:20px;} /* 유형점검_type04 */ .Q_area .Q_type1.Q_type04 a > p {font-size:17px;margin-top:0;letter-spacing:-1px;} .Q_area .Q_type04 .eye_area button {margin-left:0px;} .Q_area .Q_type1.Q_type04 li {margin-bottom:5px;} .Q_area .Q_type1.Q_type05 li {margin-bottom:25px;} /* 유형점검_type05 */ .Q_text {width:90%;height:60px;line-height:60px;font-size:19px;padding-left:30px;} .Q_area .Q_type1.Q_type05 a > span {margin:0;min-width:35px;} .Q_area .Q_type1.Q_type05 a > p {margin-top:10px;font-size:18px;} .Q_area .Q_type05 .eye_area button {margin-left:0;} .Q {display:block;width:100%;font-size:18px;line-height:30px;padding-top:50px;} .cont_play {min-width:30px;width:30px;height:30px;line-height:30px;} .cont_play:before {border-bottom:6px solid transparent;border-left:10px solid #fff;border-top:6px solid transparent;margin-left:1px;} .cont_play.stop:before {left:9px;top:7px;height:12px;width:3px;} .cont_play.stop:after {left:15px;top:7px;height:12px;width:3px;} .q_num .eye {width:35px;height:35px;background-size: 60% auto !important;margin-right:15px;} /* 유형점검 > 오답체크 */ .title_check {padding-top:20px;padding-left:120px;font-size:22px;line-height:35px;margin-bottom:40px;text-align:left;min-height:100px;} .title_check:before {left:0;width:100px;height:100px;background-size:100% auto;transform:none;} .title_check b {font-weight:700;} .title_check span {display:block;} .check_comment a {min-height:200px;height:200px;} .check_comment a i {width:35px;height:35px;font-size:20px;line-height:35px;} .check_comment a .view_comment {height:40px;} .check_comment a .view_comment span {font-size:14px;line-height:40px;} .check_comment a .view_comment span:before {width:19px;background-size:100% auto;} .check_comment a .correct, .check_comment a .wrong {height:calc(100% - 50px);background-size:50% auto;background-position:50% 100%;} .ear_area .q {padding-top:0;} } @media (max-width: 840px) { /* 어휘뽀개기 */ .Break {padding:0 20px;} .Break, .Break_area {max-width:100%;} /* 어휘뽀개기 - 입트이기 */ .mouse_q {padding-left:120px;} .mouse_q:before {width:100px;height:100px;background-size:100% auto;} .mouse_q > p {font-size:21px;padding-right:60px;} .mouse_q .num {top:50px;font-size:16px;} .mouse_q .mouse_q_area p {font-size:25px;line-height:35px;} .mouse_q .mouse_q_area p span:before {height:35px;} .mouse_A {padding:0 120px;} .mouse_A:before {width:100px;height:100px;background-size:100% auto;} .mouse_A > p {font-size:21px;} .mouse_A .mouse_A_area a {width:90px;height:90px;background-size:100% auto;} } @media (max-width: 700px) { /* 어휘뽀개기 - 귀트이기 */ .ear_area {width:100%;} .ear_area .button_area {width:calc(100% + 40px);left:-20px;} .ear_area #wordSlider .button_area {width:100%;left:0;} } @media (max-width: 640px) { .M_body {padding-top:30px;} .level_area .menu a {font-family:'NanumGothic';font-weight:600;font-size:12px;padding:0 10px;letter-spacing:-1px;line-height:50px;} .level_area .menu a.active {font-size:14px;} .level_area .menu a.off span {padding-right:18px;} .level_area .menu a.off span:after {width:14px;background-size:100% auto;top:-7px;} .level_area .percent > p, .report .percent > p {font-size:18px;} .level_area .percent > p > span, .report .percent > p > span {font-size:30px;} .level_area .percent .txt > p, .report .percent .txt > p {font-size:18px} .level_area .percent .txt > p > span, .report .percent .txt > p > span {font-size:25px;margin-left:5px;} .level_card .Card_unit a {position:relative;width:calc(100%/2 - (12px/2));} .level_card .Card_unit a:nth-child(3n+1){margin-left:12;} .level_card .Card_unit a:nth-child(2n+1){margin-left:0;} .U_menu li:last-child .ballon {right:-20px;} .U_menu li:last-child .ballon:after {left:280px;} .level_Unit .Vocab {line-height:40px;background-size:18px auto;padding:0 15px 0 35px;background-position:15px 50%;} .level_card .ex span {font-size:13px;font-family:'NanumGothic';padding-left:20px;} .level_card .ex span:before {width:14px;height:14px;} .level_card .ex span ~span {margin-left:10px;} .level_card .Card_unit a {padding:15px;min-height:auto;} .level_card .Card_unit a .okay {right:15px;} .level_card .Card_unit a > p {font-size:13px;font-family:'NanumGothic';} .level_card .Card_unit a > p > span {font-size:18px;margin:0 3px 0 2px;letter-spacing:-1.5px;} .level_card .Card_unit a > p > i {font-size:11px;} .level_card .Card_unit a > p > i:before {height:9px;} .level_card .Card_unit a .okay {font-size:17px;top:15px;} .level_card .Card_unit a .okay.on {width:25px;background-size:100% auto;} .level_card .Card_unit a > div {font-size:14px;font-family:'NanumGothic';padding:10px;margin-top:15px;line-height:21px;} /* 모의고사 */ .mock_title {font-size:30px;margin-bottom:30px;padding:0 20px;} .mock_title span {font-size:15px;font-family:'NanumGothic';font-weight:400;} .start_area {padding:50px 0;} .level_st {display:block;} .level_st > a {width:100%;min-height:250px;} .level_st > a ~a {margin-left:0px;margin-top:20px;} .level_st > a > p {height:60px;line-height:60px;font-size:20px;} .level_st > a > span {font-size:25px;} .level_st > a > span > strong {font-size:45px;} .level_st a {background-position:50% 60px !important;} .level_st .off:after {top:60px;} /* 모의고사 - 레벨선택 */ .levelM_area .ex span {font-family:'NanumGothic';font-size:14px;padding-left:15px;font-weight:400;} .levelM_area .ex span:before {top:3px;width:12px;height:12px;} .levelM_area .ex span ~span {margin-left:10px;} .levelM_area .text {margin-top:20px;font-family:'NanumGothic';font-size:16px;padding-left:30px;} .levelM_area .text:before {top:-5px;width:25px;height:25px;background-size:100% auto;} .mock_card {display:flex;width:100%;flex-wrap: wrap;margin-top:25px;} .mock_card li {width:calc(100%/2 - 5px);padding:20px 15px;min-height:160px;} .mock_card li:nth-child(3n+1){margin-left:10px;} .mock_card li:nth-child(2n+1){margin-left:0;} .mock_card li p {font-size:22px;} .mock_card li.off:before {margin-top:10px;width:65px;height:65px;background-size:100% auto;} .mock_card li.off p {padding-top:20px;} .mock_card li .bar {width:100%;height:35px;border:4px solid #002271;line-height:35px;margin:15px auto;} .mock_card li a {font-family:'NanumGothic';font-size:12px;line-height:40px;height:40px;} .mock_card li a ~a {margin-left:2px;} /* 모의고사 - 리포트 */ .report .pop_area {padding:20px;height:calc(100% - 40px)} .report_title {font-size:25px;} .report .percent {position:relative;width:230px;top:0;right:0px;} .report .percent > p {font-size:16px;} .report .percent > p > span {font-size:20px;} .report .percent .bar {margin-top:8px;height:5px;} .report .percent .bar_1 {height:5px;} .report .percent .txt > p {font-size:12px} .report .percent .txt > p > span {font-size:16px;} .report_comment {padding:10px;} .report_comment p {font-size:13px;font-family:'NanumGothic';font-weight:600;padding-left:30px;line-height:22px;} .report_comment p span.big {font-family:'NanumSquare';font-size:19px;} .report_comment p:before {width:22px;height:22px;background-size:100% auto;top:0;} .h5_title {font-size:18px;} .report_scroll {width:calc(100% + 35px);padding-right:10px;height:calc(100% - 210px);margin-top:20px;} .score_area {display:block;} .score_area .score_bar {width:100%;padding:10px 20px;} .score_bar > div {min-height:95px;} .score_area .text {font-size:13px;font-family:'NanumGothic';font-weight:600;margin-bottom:30px;} .score_area .text span {font-size:15px;font-family:'NanumGothic';} .score_area > div ~div {margin-left:0;margin-top:10px;} .score_area .score_percentage {width:100%;} .score_percentage .my span.big {font-size:16px;font-family:'NanumGothic';} .bogang_area {margin-bottom:20px;} .bogang_area .B_unit {width:100%;margin-right:0px;margin-bottom:10px;} .bogang_area .B_unit:nth-child(3n) {margin-right:10px;} .bogang_area .B_unit:nth-child(2n) {margin-right:0px;} .bogang_area .B_unit:before {left:15px;width:50px;height:50px;background-size:22px auto;} .bogang_area .B_tit {font-size:17px;font-weight:700;} .bogang_area .B_tex {font-size:12px;} .bogang_area .B_diff {font-size:12px;} .bogang_area .B_more span {font-size:12px;} .correct_ara table th {font-size:13px;font-family:'NanumGothic';font-weight:600;} .correct_ara table td {font-size:13px;font-family:'NanumGothic';font-weight:600;} .correct_ara .B_view {line-height:28px;} .correct_ara .B_view:before {top:8px} .report_closed {line-height:40px;font-size:14px;width:120px;} /* 수준평가 리포트 */ .levelreport_sec1 {display:block;} .levelreport_sec1 .evaluation_area, .levelreport_sec1 .analysis_area {width:100%;margin-left:0;} .evaluation {padding-left:0;padding-top:80px;} .evaluation:before {top:10px;width:100%;height:80px;background-size: auto 100% !important;} .evaluation .le_title {text-align:center;} .evaluation .le_text {padding-left:20px;font-size:13px;font-weight:600;} .analysis_area {margin-top:30px;} /*********************************************** Evaluation에서 가져온 css *********************************************************************************************/ /* button style */ .button_area, .button_area > a, .button_area > span {height:60px;line-height:60px;} .pop_layer.mock .button_area {width:calc(100% + 20px);margin-left:-10px;} .button_area > a > span, .button_area > span > a {font-size:15px;} .button_area > a ~a {margin-left:0;} .Q_area .eye_area {margin-top:10px;} .Q_area .Q_type1.Q_type04 .eye_area.view, .Q_area .Q_type1.Q_type05 .eye_area.view {/*margin-left:10px;*/} .Q_area .Q_type05 .eye_area, .Q_area .Q_type1.Q_type04 .eye_area.view {top:10px;left:-15px;} .Q_area .Q_type1.Q_type04 li, .Q_area .Q_type1.Q_type05 li {margin-left:30px;} .explain .Q_area .Q_type1.Q_type04 li, .Q_area .Q_type1.Q_type05 li {margin-left:0;} /* 유형점검 > 오답체크 */ .check_comment li {max-width:100%;} .check_comment li ~li {margin-left:20px;} .check_comment a i {top:10px;left:10px;width:28px;height:28px;line-height:28px;font-size:17px;} .check_comment a {min-height:160px;height:160px;} .check_comment a .view_comment span:before {width:16px !important;} .check_comment a .view_comment span {padding-left:20px;font-size:13px;} /* 유형점검_type04 */ .Q_area .Q_type1.Q_type04 li, .Q_area .Q_type1.Q_type04.add li {width:100% !important;} .Q_area .Q_type1.Q_type04.add a > p {margin-left:10px;margin-top:0;} /* 유형점검_type05 */ .Q_text {width:95%;font-size:17px;padding-left:25px;height:50px;line-height:50px;} .Q_area .Q_type1.Q_type05 a > p {margin-top:5px;font-size:17px;} /* 유형학습완료 */ .completion {padding: 0 20px;} .completion p {font-size:20px;} p.great {font-size:35px;} .blackboard {max-width:620px;width:100%;height:350px;background-size:100% 100%;} .blackboard.okay:after {top:50px;right:50px;width:180px;background-size:100% auto;} .blackboard ul {margin-left:35px;} .blackboard ul li {font-size:20px;padding:5px 0 5px 35px;} .blackboard ul li:before {top:10px;width:22px;height:22px;border-radius:4px;} .blackboard ul li.on:after {top:7px;left:4px;width:21px;background-size:100% auto;} /* 어휘뽀개기 */ .step_3 {margin-right:20px;} .step_3 li {line-height:40px;font-size:16px;padding:0 15px 0 38px;} .step_3 li ~li {margin-left:20px;} .step_3 li {background-size:16px auto !important;background-position:15px 50% !important;} .step_3 li.tep_3 {background-size:14px auto !important;} .Break_area .item {font-size:20px;} .Break_area .item ~.item {margin-top:15px;} .Break_area .item > a {line-height:80px;height:80px;} .Break_area .item p.active {padding-left:30px;} .Btn_more span {font-size:16px} .Btn_more span:after {right:-25px;width:14px;background-size:100% auto;} .Break_area .item i {right:20px;} /* 어휘뽀개기 - 연습 */ .exer_area {width:100%;} .area.break {padding:0;} .Break_area .item, .exercise {width:calc(100% - 40px);margin:20px auto;} .exercise .top_area {line-height:60px;font-size:18px;} .exercise .top_area span {color:#111;} .exercise .top_area .speaker {top:15px;right:20px;width:20px;background-size:100% auto !important;} .exercise .exer_con {min-height:150px;padding:0 20px;} .exercise .exer_con p {font-size:22px;} .exercise .exer_exam {padding-top:25px;} .exer_exam .text {font-size:16px;} .exer_exam a {margin-top:15px;line-height:70px;height:70px;font-size:18px;} .button_area.exer {margin-top:20px;} .button_area.area {width:calc(100% + 40px);margin-left:-20px;} .button_area > a {width:calc(50% - 20px);} .button_area > a ~a {border-left:1px solid #dcdce2;} .button_area.Evaluation > a ~a {border-left:none;} /* 어휘뽀개기 - 퀴즈 */ .quiz_area {padding:0 20px;} .Q_quiz .Q_quizarea {display:block;text-align:left;padding-right:45px;} .Q_quiz .Q_quizarea .word {display:inline-block;} .Q_quiz .word_Q {font-size:23px;} .Q_quiz .correct {font-size:23px;top:0;} .Q_quiz .num {top:20px;font-size:14px;letter-spacing:3px;} .Q_quiz .num span {letter-spacing:3px;} .btn_hint {font-size:14px;padding:0 10px;} .Q_spelling {margin-top:30px;position:relative;padding:50px 0;} .Q_spelling .text{font-size:13px;font-family:'NanumGothic';} .sp_card {display:block;position:relative;width:100%;display:flex;} .sp_card button {width:calc(100%/5 - 24px/5);height:60px;font-size:25px;} .sp_card button ~button {margin-left:6px;} .sp_card button.del {background-size:25px auto;} /* 어휘뽀개기 - 입트이기 */ .mouse_q {padding-left:0;} .mouse_q:before {width:80px;height:80px;} .mouse_q > p {font-size:20px;padding-right:60px;padding-left:90px;} .mouse_q .num {font-size:15px;} .mouse_q .num span {color:#111;} .mouse_q .mouse_q_area p {font-size:21px;} .mouse_A {padding:0;} .mouse_A:before {width:80px;height:80px;} .mouse_A > p {font-size:20px;padding-right:90px;} .mouse_A .mouse_A_area a {width:90px;height:90px;background-size:100% auto;} /* 모의고사_문제 */ .note_title {font-size:22px;margin-bottom:30px;} .note_title:before {width:120px;height:120px;background-size:100% auto;margin-bottom:20px;} .note_check a {width:calc(100%/5);} .note_check a:nth-child(5n) {border-right:none;} .note_check a:nth-child(-n+15) {border-bottom:1px solid #e3e3e3;} .note_check a p {line-height:40px;font-size:18px;} .note_check a span {line-height:60px;} .note_check a span.correct:before {margin-top:0px;width:12px;height:12px;border:4px solid #0176f4;} .note_check a span.incorrect:before, .note_check a span.incorrect:after {margin-top:-10px;width:4px;height:20px;} .memH4_tit {font-size:35px;margin-bottom:30px;} .view_list {margin-top:0;} .view_list li.li_file p {line-height:45px;} .view_list .other span, .view_list .file {line-height:45px;color: #555;font-size:13px;} .view_list .other span.date {margin-right:20px;} .view_list li.li_file {padding-bottom:10px;} .view_list li.li_file a {font-size:13px;line-height:25px;} .view_list li.memo {line-height:28px; font-size: 14px;padding:15px 10px;} .view_list .view_tit {font-size:20px;} /* 이용약관 */ .policy h3 {font-size:18px;} .policy h4 {font-size:17px;} .policy h5 {font-size:15px;font-family:'NanumGothic';} .policy p, .policy li {font-size:13px;font-family:'NanumGothic';line-height:25px;} .policy div + h5, .policy ul + h5, .policy p + h5, .policy p + h4, .policy ul + h4, .policy div + h4 {margin-top:30px;} .policy ul {margin-left:15px;} .policy li {padding-left:8px;} .policy li:before {top:9px;width:3px;height:3px;} .policy .none li {padding-left:0;color:#555;} .policy .none li:before {display:none;} .board.type1 tbody td {font-size:13px;font-family:'NanumGothic';line-height:25px;} /*.board.type1 table {min-width:auto;}*/ .mbo40 {margin-bottom:20px;} .email_policy {padding:20px 20px;} .email_policy p {font-size:15px;font-family:'NanumGothic';font-weight:500;line-height:22px;padding-left:90px;min-height:80px;} .email_policy p:before {width:80px;height:80px;background-size:50px auto;} } @media (max-width: 460px) { /* 어휘뽀개기 - 귀트이기 */ .ear_area .q {font-size:18px;} .ear_area .q_num {font-size:15px;} .ear_area .q_num span {margin:0;} .audio_area {padding:20px;} .audio_area .play {margin:10px auto;} .audio_area .replay {right:20px;top:40px;} .ear_q > p {font-size:17px;line-height:35px;} .ear_card button {font-size:15px;font-family:'NanumGothic';} .mouse_A .mouse_A_area div.play {width:80px;height:80px;background-size:100% auto;} .button_area > a > span:before, .button_area > span > a:before {top:8px;} .button_area > a > span:after, .button_area > span > a:after {top:4px;} /* 학교제휴 */ .cooperation header {height:300px;} .cooperation header .header {width:calc(100% - 30px);} .cooperation header .header:before {height:40px;background-size: auto 100%;} .cooperation header .header:after {right:-30px;bottom:-59px;height:220px;background-size: auto 100%;} .cooperation header h1 {left:20px;height:30px;background-size: auto 100%;} .cooperation header a {right:20px;line-height:35px;border-radius:20px;padding:0 10px;} .cooperation header a span {font-size:13px;} .cooperation header a span:before {top:0;} .cooperation header a span:after {top:4px;} .cooperation header .tit_text {left:30px;bottom:90px;font-size:20px;line-height:40px;} .cooperation header .tit_text span {font-size:32px;display:block;} .coop_body .box_area {width:calc(100% - 40px);} .boardSlider {width:140%;} .N_borad .slick-slide ~.slick-slide {margin-left:10px;} .N_borad .slick-slide a {padding:15px;min-height:120px;} .N_borad .slick-slide a p {font-size:13px;font-family:'NanumGothic';font-weight:600;line-height:19px;} .N_borad .slick-slide a span {left:15px;bottom:15px;font-size:12px;} .box_area .guide {padding:0 20px;} .memH4_tit {font-size:25px;margin-bottom:30px;} .complete .pop_area {width:calc(100% - 40px);} .forced .pop_area {width:calc(100% - 40px);} } @media (max-width: 430px) { /* 유형점검 > 오답체크 */ .check_comment a {min-height:140px;height:140px;} /* 유형학습완료 */ .blackboard.okay:after {top:30px;right:25px;width:120px;} .blackboard ul {margin-left:25px;} .blackboard ul li {font-size:18px;padding-left:30px;} } @media (max-width: 360px) { .ear_card button {margin:15px 10px 0 0;width:calc(100%/3 - (20px/3));font-size:14px;} /* 학교제휴 */ .cooperation header .header {border-radius: 0 0 100px 0;} .cooperation header .header:after {right:-30px;bottom:-49px;height:180px;} .cooperation header .tit_text {font-size:18px;line-height:35px;} .cooperation header .tit_text span {font-size:28px;} .coop_body .box_area {padding:40px 0;} .box_area .guide {height:auto;padding:20px;} .box_area .guide a {font-size:13px;font-family:'NanumGothic';font-weight:600;} .box_area .guide a:before {height:45px;background-size: auto 100%;} .U_menu li ~li {margin-left:30px;} .level_area, .level_Con {padding-left:10px;padding-right:10px;} .level_area .menu a {font-size:11px;} .level_area .menu a.active {font-size:12px;} .level_area .menu a.off span {padding-right:14px;} .level_area .menu a.off span:after {width:12px;top:-8px;} .U_menu li a {font-size:20px} .U_menu li .ballon {left:-180px;} .U_menu li .ballon:after {left:160px;} .level_card .Card_unit a {padding:15px 10px;} .level_card .Card_unit a .okay {right:10px;} /* 모의고사 - 리포트 */ .report .pop_area {padding:20px;height:calc(100% - 20px);width:calc(100% - 20px);} .report_title {margin-top:15px;} .report .percent {width:210px;} .report .percent .bar {width:85px;} .report .percent .txt > p > span {font-size:14px;} .report_comment p {font-size:11px;} .report_scroll {height:calc(100% - 220px);} .report_closed {font-size:12px;} .correct_ara table th {font-size:12px;padding:5px;line-height:25px;} .correct_ara .B_view {font-size:11px;padding:0 5px 0 20px;} .correct_ara .B_view:before {top:7px;} .report_closed {margin-top:20px;} .email_policy {padding:15px 10px;} .email_policy p {font-size:12px;line-height:22px;padding-left:65px;min-height:60px;} .email_policy p:before {width:60px;height:60px;background-size:40px auto;} } @media (max-width: 320px) { /*header {height:130px;}*/ header .logo a {left:10px;width:120px;top:10px;} header a.close {right:10px;width:20px;height:20px;top:22px;} .gnbMenu {top:65px;height:65px;} .gnbMenu:before {height:50px;} header .header {height:130px;} .gnbMenu .gnb > li {height:50px;line-height:50px;font-size:17px;} .gnbMenu .gnb > li > a {height:50px;line-height:50px;} .contents {top:130px;} .area {padding:0 10px;} /* 유형점검 */ span.Q {font-size:18px;} .Q_area .Q_type1 li {padding:0 5px;margin-bottom:30px;} /* 유형점검 > 오답체크 */ .check_comment li ~li {margin-left:5px;} .check_comment a {min-height:120px;height:120px;border-radius:15px;} .check_comment a i {top:5px;left:5px;width:25px;height:25px;line-height:25px;font-size:16px;} .check_comment a .view_comment span {padding-left:16px;font-size:12px;} .check_comment a .view_comment span:before {width:14px !important;} /* 유형점검_type04 */ .Q_area .Q_type1 a > span {min-width:30px !important;width:30px;height:30px;line-height:30px;font-size:18px;} .Q_area .Q_type1.Q_type04 a > p {font-size:12px;font-family:'NanumGothic';font-weight:600;} /* 유형점검_type05 */ .Q_text {width:100%;font-size:15px;font-family:'NanumGothic';font-weight:600;padding-left:20px;} .Q_text span {margin-left:5px;} .Q_area .Q_type1.Q_type05 a > span {margin:0;min-width:30px;} /* 유형학습완료 */ .completion {padding: 0 10px;} .completion p {font-size:18px;} p.great {font-size:30px;margin-bottom:10px;} .blackboard {margin-top:20px;height:280px;padding-top:20px;} .blackboard.okay:after {top:20px;right:20px;width:95px;} .blackboard ul {margin-left:20px;} .blackboard ul li {font-size:17px;padding:2px 0 2px 22px;} .blackboard ul li:before {top:10px;width:16px;height:16px;} .blackboard ul li.on:after {top:5px;left:3px;width:14px;background-size:100% auto;} /* 어휘뽀개기 */ .Break_area .item, .exercise {width:calc(100% - 20px);margin:10px auto;} .exer_exam .text {font-size:13px;} .exercise .exer_exam {padding:20px 10px;} .exercise .exer_con {min-height:100px;} .exer_exam a {line-height:60px;height:60px;font-size:17px;} .step_3 li {font-size:14px;padding:0 15px 0 30px;} .step_3 li ~li {margin-left:15px;} .step_3 li {background-position:10px 50% !important;} .step_3 li:after {right:-15px;width:5px;background-size:100% auto;} /* 어휘뽀개기 - 퀴즈 */ .Q_quiz .word_Q {font-size:20px;line-height:40px;} .btn_hint {font-size:13px;padding:0 10px;} .Q_spelling {margin-top:30px;position:relative;padding:40px 0;} .Q_spelling .text{font-size:11px;} .sp_card button {width:calc(100%/5 - 16px/5);height:45px;font-size:22px;} .sp_card button ~button {margin-left:4px;} .sp_card button.del {background-size:16px auto;} #doughnutChart {max-width:95%;} } @media (max-width: 280px) { .level_area .menu a {padding:0 8px;} .level_area .menu a {font-size:9px;} .level_area .menu a.active {font-size:10px;} .level_area .menu a.off span {padding-right:12px;} .level_area .menu a.off span:after {width:10px;top:-10px;} .level_card .Card_unit a > p {font-size:11px;} .level_card .Card_unit a > p > span {margin-left:2px;font-size:15px;} .level_card .Card_unit a > p > i {font-size:0px;} .level_card .Card_unit a > p > i b {font-size:11px;} .level_card .Card_unit a .okay {font-size:15px;top:15px;} .level_card .Card_unit a .okay.on {width:20px;} .level_card .Card_unit a > div {font-size:13px;line-height:18px;} .mouse_A .mouse_A_area div.play {width:70px;height:70px;} /* 모의고사 - 레벨선택 */ .levelM_area .ex span {font-size:12px;} .levelM_area .text {font-size:15px;} .mock_card li a {width:100%;line-height:35px;height:35px;} .mock_card li a ~a {margin-left:0;margin-top:5px;} .mock_card li .bar {height:30px;line-height:30px;} .mock_card li.off:before {width:60px;height:60px;} .mock_card li.end .bar:before {background-size: auto 100%;} .mock_card li.ing .bar:before {width:70%;background-size: 100% 80%;} /* 모의고사 - 리포트 */ .report .percent .bar {margin-top:12px;} .report_scroll {height:calc(100% - 240px);} .h5_title {font-size:17px;} .report_comment {border-radius:15px 60px 60px 50px;padding:15px;} .report_comment p {line-height:20px;} .score_percentage .my {font-size:12px;letter-spacing:-1px;} .score_percentage .my span.big {font-size:13px;} .bogang_area .B_tit {font-size:14px;font-family:'NanumGothic';font-weight:600;} .correct_ara table th:nth-child(3) {min-width:70px;} .correct_ara table td:last-child {min-width:60px;} .correct_ara table th {font-size:10px;} .correct_ara table td {line-height:35px;font-size:11px;} .correct_ara td span.incorrect:before, .correct_ara td span.incorrect:after {height:16px;width:3px;} .correct_ara td span.correct:before {width:10px;height:10px;border:3px solid #6ebb1d} .correct_ara .B_view {padding:0 2px 0 12px;line-height:22px;font-size:10px;} .correct_ara .B_view:before {left:2px;top:7px;width:8px;height:8px;} .report_closed {line-height:35px;width:100px;} }