@charset "utf-8"; #container {position:relative; min-height:calc(100vh - 270px);} /* Arrows / Dots */ .slick-prev, .slick-next {position:absolute; top:0%; font-size:0; width:25px; height:25px; outline:none; border:0; cursor:pointer; z-index:10;background-size:20px !important; border-radius:50%; } .slick-prev {right:32px; background:#333 url('/images/arrow_left.png')no-repeat center; } .slick-next {right:0%; background:#333 url('/images/arrow_right.png')no-repeat center;} .slick-prev:hover, .slick-next:hover { background-color:#000 !important;} .slick-dots {position:absolute; z-index:10;width:100%; bottom:25px; left:0%; font-size:0;display:flex; gap:10px; justify-content:center;} .slick-dots li { cursor:pointer; width:14px; height:14px; background:#fff;border:1px #c4c4c5 solid; text-align:center;border-radius:100%; box-sizing:border-box;} .slick-dots li button{opacity:0; position:relative;padding:0px; z-indeX:-10;} .slick-dots li.slick-active {background:#3e4146;border:1px #3e4146 solid;} .arrow_left, .arrow_right {position:absolute; top:0%; font-size:0; width:25px; height:25px; outline:none; border:0; cursor:pointer; z-index:10;background-size:20px !important; border-radius:50%;} .arrow_left {right:32px;background:#dcdcdc url('/images/arrow_left.png') 50% 50% no-repeat;} .arrow_right {right:0px;background:#dcdcdc url('/images/arrow_right.png') 50% 50% no-repeat;} .arrow_left:hover, .arrow_right:hover {background-color:#dcdcdc !important;} .slick-arrow {display: block;opacity:1;} .slick-disabled {opacity:0.5;} /* 버튼 */ .button {width:auto;min-width:150px; display:flex; flex-wrap:nowrap; gap:5px; justify-content:center; align-items:center; text-align:center; padding:0px 30px; border:none; border-radius:5px;background:var(--main); font-size:17px; color:#fff; line-height:45px; } .button i {width:18px; height:18px; background:url('/images/arrow_right.png') 50% 50% no-repeat;background-size:cover !important; } .button:hover {background:var(--mainHover); color:#fff; } /* 과정 버튼 */ .button_course {display:flex; justify-content:center; align-items:center; gap:5px; width:100%; font-size:17px; font-weight:600; line-height:50px;text-align:center; border-radius:5px;text-align:center;border:1px #21277d solid;color:#21277d; background:#fff; } .button_sample {color:#21277d; background:#fff;} .button_enroll {color:#fff; background:#21277d;} .button_enroll2 {color:#fff; background:#145082;border-color:#145082;} .button_ready {color:#fff; background:#7073a4;border-color:#7073a4;} .button_course:hover {background:#21277d;color:#fff;}/* eaf1ff*/ .button_sample:hover {background:#7f96cf; border-color:#7f96cf;color:#fff;} .button_enroll:hover {border-color:#070d64; background:#070d64;color:#fff;} .button_enroll2:hover {border-color:#0c4370; background:#0c4370;color:#fff;} .button_ready:hover {background:#595c90;border-color:#595c90;color:#fff;} .button_ceri {color:#e74946; background:#fff;border-color:#e74946;} .button_ceri:hover {background:#e74946; border-color:#e74946;color:#fff;} /* 게시판 버튼 */ .button_board {display:flex; justify-content:center; align-items:center; gap:5px; width:100%; max-width:120px;padding:0px 25px; font-size:16px; font-weight:600; line-height:36px;text-align:center; border-radius:5px;text-align:center;border:1px #aaa solid;color:#333; background:#fff; } .button_board:hover {color:#000; border-color:#444;} .button_file {min-width:50px;font-size:14px;line-height:30px; padding:0px 10px;background:#fff; color:#000; border:1px #aaa solid;} .button_file:hover {background:#fff; color:#000; border:1px #888 solid;} /* 버튼 컬러 */ .button_gray {background:#edeff2;color:#333; } .button_gray:hover {background:#d6dce4; color:#000; } .button_blue {background:var(--main); border-color:var(--main);} .button_blue:hover {background:var(--mainHover); border-color:var(--mainHover);color:#fff; } .button_navy {background:#21277d;border-color:#21277d; color:#fff; } .button_navy:hover {background:#070d64;border-color:#070d64; color:#fff; } .button_black {background:#333;border-color:#333; } .button_black:hover {background:#000;border-color:#000; color:#fff; } .button_disable {background:#a8a8a8;border-color:#a8a8a8; } .button_disable:hover {background:#a8a8a8;border-color:#a8a8a8; color:#fff; } .button_line {background:#fff; color:#21277d; border:1px #21277d solid; } .button_line:hover {background:#070d64; color:#fff; } .button_small {min-width:50px;font-size:15px;line-height:30px; padding:0px 10px;} .button_sm {min-width:50px; font-size:16px;line-height:35px; padding:0px 20px;} .button_medium {min-width:50px; font-size:16px;line-height:35px; padding:0px 20px;} .button_large {min-width:50px; font-size:17px;line-height:60px; padding:0px 20px;} .button_round {border-radius:50px;} button.button:disabled, button.button[disabled] {background:#a8a8a8 !important; cursor:normal; } /*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ MAIN @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@--> /* 메인 상단 비주얼 */ #visual {position:relative; width:100%; height:400px; overflow:hidden;} #visual .main_visual:not(:has(.slick-list)) .text_area {display:none;} #visual .main_visual:not(:has(.slick-list)) .section {display:none;} #visual .main_visual {position:relative; z-index:10; height:100%;} #visual .main_visual li {position:relative;display:block;width:100%;height:100%;} #visual .main_visual li a {position:relative; display:block;width:100%;height:100%; background-size:cover !important; background-repeat:no-repeat !important; background-position:center !important;} #visual .main_visual .section { position:absolute; top:0%; left:0%; width:100%; height:100%; background-size:cover !important; background-repeat:no-repeat !important; background-position:center !important;} #visual .main_visual .mv_num {display:none;position:absolute; bottom:30px; left:50%;font-size:15px;transform:translateX(-40px); font-weight:bold; } #visual .slick-prev, #visual .slick-next {right:0px; left:50%; top:auto; bottom:30px;width:22px; height:22px; background-color:rgba(0,0,0,0.3);} #visual .slick-prev {transform:translateX(-10px);} #visual .slick-next {transform:translateX(44px);} #visual .slick-list, #visual .slick-track, #visual .slick-slide {position:relative; height:100%;} #visual .slick-dots {width:auto;bottom:30px;left:50%;transform:translateX(-70px);font-size:15px;} #visual .slick-dots li {display: none;width:auto;font-size:1em;font-weight:600; color: #575757; background:none;border:none; text-align:center;border-radius:0%;} #visual .slick-dots li.slick-active { display: flex; gap:0px; flex-wrap:nowrap;} #visual .slick-dots li span { color: #575757; font-weight:600;} #visual .slick-dots li em {display: inline-block;width:12px;font-weight: 600; font-size:1em; color: #575757; } #visual .controller {transform:translateX(17px); position:absolute; width:22px;height:22px;padding:0px;margin:0px; bottom:30px; left:50%; font-size:0; display:flex; justify-content:center; z-index:50;} #visual .controller button {font-size: 0;line-height: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%;border:none;padding:0px;margin:0px;background-color:rgba(0,0,0,0.3); background-size:90% !important; background-repeat:no-repeat !important; background-position:center !important; transition:all 0.3s; border-radius:50%; } #visual .controller button:hover {background-color:rgba(0,0,0,0.5) !important;} #visual .controller button.play {background-image:url('/images/arrow_stop.png');} #visual .controller button.stop {background-image:url('/images/arrow_play.png');} #visual .main_visual#mobile_visual {display:none;} @media all and (max-width:1240px) { #visual {height:calc( 400 / 1200 * 100vw * 0.9 ) !important;} } @media all and (max-width:680px) { .slick-dots { bottom:15px; gap:5px; justify-content: flex-start; left:7%; width:85%;} .slick-dots li {width:10px; height:10px;} #visual .main_visual#mobile_visual {display:block;} #visual .main_visual#main_visual {display:none;} #visual {height:calc( 1100 / 1000 * 100vw * 1.0 ) !important;} #visual .slick-prev, #visual .slick-next {left:70px; bottom:20px; width:18px; height:18px;} #visual .slick-prev {transform:translateX(0px);} #visual .slick-next {transform:translateX(40px);} #visual .slick-dots { left:20px; bottom:18px; transform:translateX(0px); font-size:13px;} #visual .controller {left:90px;bottom:20px; transform:translateX(0px); width:18px; height:18px;} } .layer { position:absolute; left:0px; top:50px;visibility: hidden; opacity: 0;z-index: 1; transition:opacity 0.3s; width:350px; padding:30px;font-size:15px;line-height:1.6; border-radius:6px;box-shadow:0px 0px 7px rgba(0,0,0,0.15); background:#fff; border:1px var(--border2) solid; } .main_guide {position:relative; padding:20px 0px; margin:-20px 0px;} .main_guide:hover .layer, .main_guide:hover .layer:hover { visibility: visible; opacity: 1;} .main_title { position:relative;display:flex; gap:10px; justify-content:space-between;align-items:flex-end; font-size:22px; font-weight:600; color:#000; text-align:left; margin-bottom:30px; margin-right:70px; } .main_title h2 {display:flex; gap:10px; flex-wrap:nowrap; align-items:center; width:70%; font-weight:600; font-size:22px; color:#000; } .main_title span.sub_txt {display:block; font-size:18px; font-weight:400; color:#666;} .main_more { font-size:16px; color:#333; text-decoration:underline;} .main_title.webzine_title { margin-right:0px; } .main_toparea {width:100%; display:flex; gap:30px; flex-wrap:nowrap; justify-content:space-between;} .main_myinfo {position:relative;display:flex; flex-wrap:wrap; width:calc(58% - 30px); border-radius:15px; background:#3e4146;} .main_myinfo .main_myinfo_title {display:flex; flex-wrap:nowrap;justify-content:space-between; width:100%; height:60px; font-size:20px; line-height:30px; color:#fff; padding:15px 40px; } .main_myinfo .main_myinfo_title h2 {position:relative;font-size:1em; padding-left:14px;} .main_myinfo .main_myinfo_title h2:before {content:''; position:absolute; left:0px; top:50%;transform:translateY(-50%); width:4px;height:18px;border-radius:3px;background:#fff;} .main_myinfo .main_myinfo_title a.main_more {color:#fff;} .main_myinfo .main_myinfo_cont {position:relative; display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:0px 30px; width:100%; height:calc(100% - 60px); background:#fff; border-radius:15px; border:1px var(--border) solid; overflow:hidden; } .main_myinfo .mmc_title {width:100%;display:flex; justify-content:center; align-items:center; flex-wrap:nowrap; gap:20px; } .main_myinfo .mmc_title h2 { position:relative; font-size:20px; line-height:30px; color:#000; font-weight:500; } .main_myinfo .mmc_title .mmc_icon { width:110px;height:110px; border-radius:50%; background:#f3f3f3 url('/images/mmc_icon.png') 50% 50% no-repeat; background-size:cover !important; } .main_myinfo .mmc_btn {width:100%;display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; margin-top:30px; } .main_myinfo .mmc_btn .mmc_btn_login {width:auto;min-width:150px; text-align:center; padding:0px 30px; border-radius:50px;font-size:17px;line-height:45px; } .main_myinfo .mmc_bflogin {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 20px; margin:0px; padding:30px 50px;} .main_myinfo .mmc_bflogin .mmc_title h2 {width:auto;} .main_myinfo .mmc_atlogin {width:100%;display:inline-block; margin:0px;} .main_myinfo .mmc_atlogin .item { width:100%; display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:30px; padding:30px 50px;} .main_myinfo .mmc_atlogin .slick-prev, .main_myinfo .mmc_atlogin .slick-next {bottom:auto; top:50%;transform:translateY(-50%); width:56px; height:50px; border-radius:50px; border:2px #e2e2e2 solid; box-shadow:0px 0px 8px rgba(0,0,0,0.1); background-size:28px !important} .main_myinfo .mmc_atlogin .slick-prev {right:auto;left:-25px;background:#fff url('/images/arrow_left2.png') 90% 50% no-repeat; } .main_myinfo .mmc_atlogin .slick-next {right:-25px;background:#fff url('/images/arrow_right2.png') 10% 50% no-repeat; } .main_myinfo .mmc_atlogin .slick-prev:hover, .main_myinfo .mmc_atlogin .slick-next:hover { background-color:#f7f7f7 !important;} .main_myinfo .mmc_state { width:200px;} .main_myinfo .mmc_state .c100 { font-size:200px;} .main_myinfo .mmc_state .c100 > span {padding:50px 40px; font-size:1.07rem;} .main_myinfo .mmc_state .c100 > span strong {height:60px;font-size:30px;line-height:40px;} .main_myinfo .mmc_state .c100 > span strong.percent {height:60px;font-size:50px;} .main_myinfo .mmc_state .c100 > span strong.percent::after { font-size:26px;} .main_myinfo .mmc_state .c100 > span small {font-size:17px;} .main_myinfo .mmc_inner {width:calc(100% - 230px); display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0px;} .main_ban {width:42%; border-radius:15px; position:relative; overflow:hidden;} .main_ban ul {width:100%; border-radius:15px; overflow:hidden; } .main_ban li img {width:100%; background-position:center; background-repeat:no-repeat; background-size:cover;} .main_ban#mobile_ban {display:none;} .main_bottom {width:100%; display:flex; flex-wrap:nowrap; gap:20px; } .main_bottom > div {position:relative; width:calc((100% - 40px) / 3); height:280px;} .main_bottom > div h4 {position:relative; font-size:22px; font-weight:600; color:#000; margin-bottom:20px; line-height:1; } .main_board {position:relative; padding:30px; position:relative; border-radius:10px; border:1px var(--border) solid; overflow:hidden;} .main_board h4 {display:inline-block; width:auto; padding:6px 12px 6px 0px;} .main_board h4:before {content:''; position:absolute; right:0px; top:0px; width:8px;height:8px;border-radius:50%; background:var(--main);} .main_board .mboard_more {position:absolute; right:0px; top:0px; width:35px; height:35px; background:#000 url('/images/more.png') 50% 50% no-repeat; background-size:12px !important; text-indent:-9999px; font-size:0px; } .main_board ul {width:100%; display:flex; flex-wrap:wrap;} .main_board li {width:100%; display:flex;} .main_board li a {position:relative; display:block; line-height:25px;} .mb_list {gap:10px;} .mb_list li a {white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:20px;} .mb_list li a:before { content:''; position:absolute;left:8px; top:11px; width:3px;height:3px;background:#000;} .mb_faq {gap:0px;} .mb_faq li a { padding-left:32px; display: -webkit-box; white-space:normal; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient: vertical;} .mb_faq li a:before {position:absolute; left:0px; top:0px; width:22px;height:22px;line-height:22px; font-size:15px;color:#fff; font-weight:600; text-align:center; border-radius:3px;} .mb_faq li.q { padding-bottom:15px; border-bottom:1px var(--border) solid; } .mb_faq li.a { padding-top:15px;} .mb_faq li.q a {-webkit-line-clamp: 2;} .mb_faq li.a a {-webkit-line-clamp: 3;} .mb_faq li.q a:before {content:'Q';background:#3973ff;} .mb_faq li.a a:before {content:'A';background:#ff0000;} .main_cs {border-top:5px var(--main) solid; } .main_cs h4 {display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; height:30px; padding-left:14px; margin-top:25px;} .main_cs h4 a {font-size:15px; color:#666; font-weight:normal; border:1px var(--border) solid; border-radius:4px; padding:0px 10px; line-height:28px;} .main_cs h4 a:hover {border-color:#666;} .main_cs_cont {position:relative; display:flex; flex-wrap:wrap; gap:10px; height:200px; padding:30px 20px 20px; border-radius:10px; border:1px var(--border) solid; text-align:center; } .main_cs_cont .mcs_tel { display:inline-block; width:auto; font-size:35px; color:#333; font-weight:800; padding:0px 36px; background:url('/images/mcs_title.png') 0px 50% no-repeat; margin:0px auto ;} .main_cs_cont .mcs_mail {width:100%; font-size:20px; color:#666;font-weight:500;} .main_cs_cont p {width:100%; font-size:15px; color:#666;} .main_cs_cont ul {width:100%; display:flex; flex-wrap:nowrap; gap:15px;} .main_cs_cont li {width:100%; } .main_cs_cont li a {display:block;font-size:17px; color:#fff; font-weight:600; line-height:50px; border-radius:5px;text-align:center; background:#444;} .main_cs_cont li a:hover {background:#000;} .main_cs_cont li a.bgColor:hover {background:var(--mainHover) !important;} i.guide {display:inline-block;width:20px; height:20px; line-height:20px; text-align:center; font-size:14px;font-weight:600; color:#fc398d; border:1px #fc398d solid; border-radius:50%; font-style:normal; cursor:pointer;} .hash {width:100%; display:flex; flex-wrap:wrap; gap:5px; height:24px; overflow:hidden;} .hash span {font-size:14px; color:#333; line-height:24px; padding:0px 7px;background:#ecf0f3; border-radius:3px; } .category {width:100%; display:flex; flex-wrap:nowrap; gap:17px; font-size:15px;} .category span {position:relative;display:inline-block; line-height:19px;color:#666} .category span:before {content:''; position:absolute; right:-17px; top:0px; width:17px;height:19px;background:url('/images/cate_arrow.png') 50% 50% no-repeat;} .category span:last-child:before {display:none;} .category b {display:inline-block; line-height:19px; color:#000; } .category .slt {display:inline-block; line-height:19px; color:#000; font-weight:500;} .main_list {position:static !important;} .item_list .slick-list {overflow:hidden;} .item_list .item {position:relative;background:#fff;} .item_list .item .con_img i.wish {position:absolute;right:10px; bottom:10px; width:20px; height:20px; cursor:pointer;} .item_list .item .con_txt h3 { font-size:20px; font-weight:600; color:#000; line-height:1.4; height:2.8em; display: -webkit-box; white-space:normal; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .item_list .item .con_txt ul {width:100%; display:flex;flex-wrap:wrap; gap:5px; margin:20px 0px;} .item_list .item .con_txt li {position:relative; width:100%;padding-left:70px; font-size:15px;color:#777; line-height:20px;box-sizing:border-box;} .item_list .item .con_txt li span {position:absolute;left:0px; top:0px; width:70px;line-height:20px;font-size:1em; color:#000;} .item_list .item .con_txt .hash {margin-bottom:5px;} .gallery_list {display:inline-block; width:calc(100% + 30px); margin-right:-30px; text-align:left; } .gallery_list .item {float:left;width:calc((100% - 90px) / 3); margin-right:30px; border:1px var(--border) solid; border-radius:10px; overflow:hidden; } .gallery_list .item:hover {border-color:#666;} .gallery_list .item .con_img {position:relative;width:100%; border-bottom:1px var(--border) solid; border-radius:10px 10px 0px 0px; overflow:hidden;} .gallery_list .item .con_img img {width:100%; border-radius:10px 10px 0px 0px; background-size:cover !important; background-repeat:no-repeat !important; background-position:center !important; transition: all 0.3s linear;} .gallery_list .item:hover .con_img img {transform:scale(1.1);} .gallery_list .item .con_txt { width:100%;padding:20px 30px; box-sizing:border-box;} .webzine_list {display:flex; width:100%; gap:20px; flex-wrap:wrap;} .webzine_list .item {position:relative; display:flex;display:flex; gap:20px; flex-wrap:nowrap; align-items:flex-start; width:calc((100% - 20px) / 2); padding:20px; margin:0px; border:1px var(--border) solid; border-radius:10px; overflow:hidden; } .webzine_list .item:hover {border-color:#666;} .webzine_list .item .con_img {position:relative;width:240px; height:auto; border-radius:8px;overflow:hidden;transition: all 0.3s linear; } .webzine_list .item .con_img img {width:100%; border-radius:8px; border:1px var(--border) solid; background-size:cover !important; background-repeat:no-repeat !important; background-position:center !important; transition: all 0.3s linear;} .webzine_list .item:hover .con_img img {transform:scale(1.1);} .webzine_list .item .con_txt { width:calc(100% - 260px);padding:0px; box-sizing:border-box;} .webzine_list .item .con_txt h3 { font-size:18px;} .webzine_list .item .con_txt ul { margin:20px 0px;} .webzine_list .item .con_txt li {display:none;} .webzine_list .item .con_txt li:first-child {display:block;} /*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ SUB 공통 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/ /* 페이징 */ .page_bar {position: relative; text-align: center; margin:30px 0px; } .page_box { position: relative; width: 100%; text-align: center; display: flex;justify-content:center;} .page_box ul { width:auto;display: flex; justify-content:center;gap:20px; padding:0; margin: 0px 20px; font-size:0;} .page_box ul li { display: inline-block; } .page_box div { position: relative; font-size:15px; height:35px; width:35px; line-height:35px; color: #666;text-decoration: none; margin: 0 0px 0 0; box-sizing:border-box; border-radius:4px; background-size:16px !important; cursor:pointer;} .page_box ul li.page_margin {width:10px;} .page_box ul li div.page_number_btn {width:auto; padding:0px 3px;} .page_box ul li div.page_number_btn.on {color: #000; font-weight: bold; } .page_box ul li div.page_number_btn.on:before {content:''; position:absolute; left:0%; bottom:5px; width:100%; height:2px; background:#000;} .page_box .page_btn {opacity:0.5; margin:0px 1px;border:1px #bbb solid; } .page_box .page_btn a {display:block;} .page_box .page_btn:hover {opacity:1; border-color:#000;} .page_box .page_first_btn { background:url('/images/arrow_first.png') center no-repeat; } .page_box .page_prev_btn { background:url('/images/arrow_left2.png') center no-repeat;} .page_box .page_next_btn { background:url('/images/arrow_right2.png') center no-repeat;} .page_box .page_last_btn { background:url('/images/arrow_last.png') center no-repeat;} /* 댓글 */ .comment {padding:0px 0px;} .comment .util_profile { width:35px; height:35px;} .comment_input_wrap { width:100%; padding:10px; background:#f9fafc; border:1px var(--border) solid; border-radius:10px; margin-bottom:30px;} .comment_input {width:100%; display:flex; flex-wrap:nowrap; gap:10px; } .comment_input textarea {width:calc(100% - 120px); height:35px; border: 1px solid var(--border); border-radius:5px;font-size:15px; box-sizing: border-box;padding:7px 10px; max-height: 96px;overflow-y: hidden; box-sizing:border-box; } .cmt_btn_submit { width:auto; background:#ffffff; border:1px #aaaaaa solid;line-height:33px;font-size:15px; border-radius:5px; padding:0px 16px; color:#000; } .comment_num {border-bottom:1px var(--border) solid; padding-bottom:10px;} .comment_num span {color:#3973ff;} .comment_box {border-bottom:1px var(--border) solid; padding:20px 10px;} .comment_header {position:relative;display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center;} .comment_writer_area {position:relative;display:flex; flex-wrap:nowrap; gap:10px; align-items:center;} .comment_writer_area .comment_user {display:inline-block; color:#3973ff; font-weight:400; line-height:1;} .comment_writer_area .comment_date {display:inline-block; font-size:15px; color:#666; font-weight:400; line-height:1; margin:0px;} .comment_icon_area { display:flex; flex-wrap:nowrap;align-items:center; gap:10px; } .comment_icon_area a {display:inline-block;width:22px; height:22px; } .comment_icon { display:inline-block; cursor:pointer; width:22px; height:22px; background-size:cover !important; background-repeat:no-repeat !important; background-position:center !important;opacity:0.7; } .comment_icon_wish {background-image:url('/images/icon_wish.png');} .comment_icon_wish_on {background-image:url('/images/icon_wish_on.png');opacity:1 !important; } .comment_icon_reply {background-image:url('/images/icon_reply.png');} .comment_icon_del {background-image:url('/images/icon_del.png');} .comment_wish { display:flex; flex-wrap:nowrap; align-items:center;gap:8px; color:#ff2400;} .comment_wish > .comment_icon {width:20px; height:20px; } .comment_body { padding-left:45px;} .comment_body .comment_content {letter-spacing:-0.5pt; line-height:1.4; margin:3px 0px;} .reply_box {position:relative;padding:20px 0px 0px 35px;} .reply_box::before { content:''; position:absolute; left:5px; top:15px; width:20px;height:20px; border-left:1px var(--border2) solid; border-bottom:1px var(--border2) solid; } /* 서브페이지 */ .sub_title {font-size:30px; font-weight:600; color:#000;line-height:1.2; margin-bottom:30px;} /* 검색페이지 */ .search_box_wrap {padding:40px;background:#f1f4f7;border-radius:10px;} .search_box {position:relative; width:100%; max-width:600px; height:70px; background:#fff; border-radius:50px; padding:15px 45px; margin:0px auto;} .search_box input.searchInput {border:none !important; width:calc(100% - 40px); height:40px; line-height:40px; background:#fff;} .search_box .searchBtn {position:absolute; right:40px; top:50%;transform:translateY(-50%); width:30px;height:30px;background:url('/images/search_icon.png') 50% 50% no-repeat;background-size:cover !important; text-indent:-9999px; overflow:hidden; } .search_result {padding:30px;width:100%; text-align:center;font-size:25px; font-weight:500;color:#000;} /*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 과정 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/ /* 과정목록 */ .course_toparea {position:relative; padding:50px 0px;background: #f9fafc;} .course_toparea .category {margin-bottom:20px;} .course_toparea .sub_title {margin-bottom:15px;} .course_toparea .allcategory {position:absolute; right:0px; top:40px;; } .course_toparea .allcategory a {position:relative;display:inline-block; width:auto; padding:8px 10px 8px 30px; border-radius:3px; font-size:1rem; color:#666666; transition:all 0.3s;} .course_toparea .allcategory a:before {content:'';position:absolute; left:10px; top:50%; transform:translateY(-50%);width:13px; height:13px; background:url('/images/cate_icon.png') 50% 50% no-repeat;background-size:cover !important;} .course_toparea .allcategory a:hover {background:#dcdfe5;} .course_toparea .all_category {left:auto; right:0px; top:90px;width:752px;} .category_list {width:100%; } .category_list ul {display:flex; flex-wrap:wrap; gap:10px;} .category_list li a {display:block; width:auto; border:1px #d6dbe2 solid; font-size:15px; color:#000; line-height:34px;padding:0px 14px; border-radius:50px; white-space:nowrap;} .category_list li.active a, .category_list li a:hover {background:#d6dbe2;} .course_content {padding:50px 0; } .control_util {width:100%; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; margin-bottom:30px; font-size:15px; } .control_util > div { width:auto;display:flex; flex-wrap:nowrap; align-items:center; } .control_util .select_box {gap:20px;} .control_util .search {gap:10px;} .control_util .search input.input_search { width: 220px;height:40px; font-size:1em; color: #333; border: 1px var(--border) solid; padding: 5px 10px 5px 45px; border-radius: 5px;background: #fff url('/images/search_icon.png') 15px 50% no-repeat; background-size:20px !important;} .control_util .search input::placeholder {font-size:1em; color:#888;} .control_util .search .btn_search {display:block; width:auto; height:40px; font-size:1em; color:#000; border:1px #aaaaaa solid; padding:0px 25px;border-radius: 5px;background:#fff; } .control_util .search .btn_search:hover {border-color:#000;color:#000;} .control_util_total {width:100%; padding:15px 0px;} .course_list {display:flex; width:100%; flex-wrap:wrap; gap:0px;border-top:2px #000 solid;} .course_list .item {width:100%; margin:0px; padding:40px 20px;border-bottom:1px var(--border) solid; display:flex; flex-wrap:nowrap; gap:50px; align-items:center; transition:all .3s linear;} .course_list .item:hover {background:#f1f2f5;} .course_list .item .con_img {position:relative;width:380px; border:1px var(--border) solid; border-radius:10px; overflow:hidden; background-size:cover !important; background-repeat:no-repeat !important; background-position:center !important;} .course_list .item .con_img a {display:block;transition:all .3s linear;} .course_list .item .con_img img {width:100%; border-radius:10px; background-size:cover !important; background-repeat:no-repeat !important; background-position:center !important; transition:all .3s linear; } .course_list .item:hover .con_img img {transform:scale(1.1);} .course_list .item .con_txt { width:calc(100% - 630px);padding:0px; box-sizing:border-box;} .course_list .item .con_txt h3 { line-height:1.4; height:auto; max-height:auto; -webkit-line-clamp:2; margin-bottom:10px;} .course_list .item .con_btn {width:150px; display:flex; flex-wrap:wrap; gap:10px;} .course_list .item .con_btn a {display:block; } /* 과정 상세 */ .course_view_wrap { padding-bottom:50px;} .course_view_toparea {padding:50px 0px;} .course_view_toparea .category {margin-bottom:10px;} .course_view{display:flex; width:100%; flex-wrap:wrap; gap:0px;} .course_view .item {width:100%; margin:0px; padding:0px 0px; display:flex; flex-wrap:nowrap; gap:50px; align-items:center;} .course_view .item .con_img {position:relative;width:480px; border:1px var(--border) solid; border-radius:10px; } .course_view .item .con_img img {width:100%; border-radius:10px; background-size:cover !important; background-repeat:no-repeat !important; background-position:center !important; max-width:478px !important; max-height:286px !important;} .course_view .item .con_txt { width:calc(100% - 830px);display:flex; flex-wrap:wrap; gap:50px;} .course_view .item .con_txt .category, .course_view .item .con_txt h3 {display:none;} .course_view .item .con_txt ul {width:100%; display:flex;flex-wrap:wrap; gap:10px; margin:0px;} .course_view .item .con_txt li {position:relative; display:flex;flex-wrap:nowrap; gap:10px; width:100%;font-size:17px;color:#777; padding:0px !important; line-height:20px;box-sizing:border-box;} .course_view .item .con_txt li span {position:relative;display:inline-block;width:70px;line-height:20px;font-size:1em; color:#000;} .course_view .item .con_txt li span:before {content:''; position:absolute; right:0px; top:2px; width:1px; height:16px; background:#d2d2d2;} .course_view .item .con_txt .hash {margin-bottom:5px;} .course_view .item .con_right {position:relative;width:250px; padding-left:50px;} .course_view .item .con_btn {width:150px; display:flex; flex-wrap:wrap; gap:10px; text-align:center;} .con_right_arrow { display:none;} .con_state {width:100%; text-align:center; } .con_state:before {content:''; position:absolute; left: 0px; top:0px; width:1px; height:100%; background:var(--border);} .con_state_tab {width:100%;display:flex;flex-wrap:nowrap; background:#ecf0f3; border-radius:30px;} .con_state_tab li {line-height:30px; width:100%;border-radius:30px; color:#666666; text-align:center; } .con_state_tab li.active {background:#484848; color:#fff;} .con_state_con { margin:18px 0px; } .con_state_btn { display:inline-block;text-align:center;} .con_state_btn .button:hover {background:#21277d; color:#fff;} .course_view_content {position:relative;padding:0px;} .course_view_tab {border-top: 1px solid #000000;border-bottom:1px #e3e3e3 solid; display:flex; flex-wrap:nowrap; padding:0px; } .course_view_tab ul { display:flex; flex-wrap:nowrap; gap:36px;padding:0px 36px; } .course_view_tab li {width:auto;} .course_view_tab li a {position:relative;display:block;width:auto; padding:0px 5px; transition: 0.3s; font-size:18px; line-height:60px; font-weight:; color:#333; white-space:nowrap;} .course_view_tab li a:hover { color:#000; } .course_view_tab li a.active:before {content:'';position:absolute;left:0px; bottom:0px; width:100%; height:3px; background:var(--main);} .tabcontent { position:relative; margin-top:40px;} .cv_title { font-size:20px; font-weight:600; color:#000;line-height:1.2; margin-bottom:15px;} .cv_cont {font-size:17px;color:#333;line-height:30px; } .cv_cont .point {display:inline-block; padding:0px 10px; border-radius:30px;font-size:0.95rem; background:var(--main); color:#fff;} .cv_cont small {font-size:0.95rem; color:#666;} .cv_cont .cv_cont_ul li { padding-left:10px; position:relative;} .cv_cont .cv_cont_ul li:before {content:''; position:absolute; left:0px; top:13px;width:3px; height:3px; border-radius:50%; background:#333;} .cv_btn { display:flex; justify-content:center;align-items:center; gap:10px; } .cv_btn .button_course {max-width:150px;} .cv_btn .button_course i.wish {position:relative;background-image:url('/images/icon_wish_red.png') !important;} .cv_board {width:100%;} .cv_note {position:absolute; right:0px; top:0px; width:auto; display:flex; justify-content:flex-end; gap:20px;} .cv_note a {position:relative;display:inline-block; padding-left:22px; font-size:15px; line-height:20px; color:#666666;} .cv_note a:before {content:''; position:absolute; left:0px; top:50%;transform:translateY(-50%); width:18px; height:18px; background-size:cover !important;} .cv_note a.note {color:#ec4822;} .cv_note a:hover {font-weight:800;} .cv_note a.note:before {background:url('/images/icon_note.png') 50% 50% no-repeat;} .cv_note a.refresh:before {background:url('/images/icon_refresh.png') 50% 50% no-repeat;opacity:0.5;} .cv_note a.refresh:hover {color:#333;} .cv_note a.refresh:hover:before {opacity:1;} .button_cv {display:inline-block; width:auto; min-width:50px; font-size:16px;line-height:35px; padding:0px 20px;border-radius:50px; background:#248cce; color:#fff; } .button_cv.bc_gray {background:#bdbdbd;} .button_cv.bc_red {background:#ec4822;} .button_cv.bc_navy {background:#273e73;} .button_cv.bc_navy2 {background:#4a6095;} .button_cv.bc_review {background:#4a6095;} .button_cv.bc_orange {background:#ec4822;} .button_cv.bc_green {background:#1b6508;} .button_cv.bc_ygreen {background:#2d8715;} .button_cv.bc_brown {background:#8c5d02;} .button_cv.bc_blue {background:#248cce;} .button_cv.bc_purple {background:#ab4ea6;} .button_cv.bc_expect {background:#fff; border:1px #000 solid; color:#000;} .button_cv:hover {background:#076cac; color:#fff; } .button_cv.bc_gray:hover {background:#9d9d9d;} .button_cv.bc_red:hover {background:#cc2e09;} .button_cv.bc_navy:hover {background:#10224b;} .button_cv.bc_navy2:hover {background:#2a3e6d;} .button_cv.bc_review:hover {background:#2a3e6d;} .button_cv.bc_orange:hover {background:#ec4822;} .button_cv.bc_green:hover {background:#0e3e02;} .button_cv.bc_ygreen:hover {background:#1d6c08;} .button_cv.bc_brown:hover {background:#5a3c01;} .button_cv.bc_blue:hover {background:#106ba5;} .button_cv.bc_purple:hover {background:#84307f;} .button_cv.bc_expect:hover {background:#efefef; border:1px #000 solid; color:#000;} /* 강의목차 */ #cv_home > .popup_wrap#caution {position:absolute; top:30px; left:auto; right:0px; max-width:500px; transform: translate(0%, 0%);} .cv_lecture {width:100%; display:flex; flex-wrap:wrap; } .cv_lecture li {position:relative;width:100%; padding:25px 10px; min-height:130px; border-bottom:1px var(--border) solid; display:flex; align-items:center; justify-content:space-between; gap:20px; } .cv_label { display:inline-block; width:auto; padding:0px 14px;line-height:24px;font-size:14px; color:#fff;background:#99abd7; border-radius:30px;} .cvl_title {width:70%; padding-left:130px; display:flex; flex-wrap:wrap;align-items:center; gap:8px;} .cvl_title h3 {width:100%;font-size:20px; line-height:1.2; font-weight:600; color:#000;} .cvl_title p {width:100%;font-size:15px; line-height:1.2; color:#666;} .cvl_title p.fontColor {color:#2b5acd;} .cvl_btn {width:30%; display:flex; flex-wrap:nowrap;align-items:center; justify-content:flex-end; gap:20px; } .cvl_btn span {width:auto; min-width:110px; display:inline-block; text-align:right;color:#000;} .cvl_btn span.fontColor {color:#ec4822 !important;} .cvl_icon { position:absolute; left:10px; top:50%;transform:translateY(-50%); display:inline-block; width:80px; height:80px; border-radius:50%; background-size:cover !important; } .cvl_icon.icon_certify {background:#e6dcf8 url('/images/icon_certify.png') 50% 50% no-repeat;} /* 본인인증 */ .cvl_icon.icon_evaluate {background:#f2eccc url('/images/icon_evaluate.png') 50% 50% no-repeat;} /* 평가 */ .cvl_icon.icon_survey {background:#e0efe3 url('/images/icon_survey.png') 50% 50% no-repeat;} /* 과정만족도 조사 */ .cvl_icon.icon_lecture {background:#ddeef8 url('/images/icon_lecture.png') 50% 50% no-repeat;} /* 강의 */ /* 학습정보 */ .cv_info_inner { position:relative; padding:40px 0px; border-bottom:1px #ddd solid; } .cv_info_inner:first-child {padding-top:0px;} .cv_info_inner:last-child, .cv_info_inner.last{border:none; padding-bottom:0px;} .cv_info_inner .cv_title {margin-bottom:15px;} .cv_info_inner .arrow_left, .cv_info_inner .arrow_right, .cv_info_inner .slick-arrow {top:40px;} /* 학습정보 내용 없을때 */ .cv_info_nodata { padding:40px 0px; text-align:center;} .cv_info_nodata p { width:100%;text-align:center; padding-top:130px; background:url('/images/cv_info_nodata.png') 50% 0% no-repeat; } /* 만족도 조사 & 평가 */ .cvw_exam {padding-bottom:0px;} .exam_toparea {background:#fff;} .exam_toparea .cvl_icon { width:100px; height:100px;} .exam_toparea .cvl_title {width:calc(100% - 140px);} .exam_toparea .cvl_title h3 {font-size:30px;} .exam_toparea .cvl_index { cursor:pointer; position:absolute; right:0px; top:15px; display:inline-block;width:auto; line-height:30px; padding:0px 15px 0px 35px; border-radius:30px;background:url('/images/icon_index.png') 10px 50% no-repeat; background-size:30px !important; border:1px var(--border2) solid;} .exam_toparea .cvl_index:hover {background-color:#f1f5f8 !important; border-color:#000 !important;} .exam_content {position:relative;background:#f8fafc; padding:40px 0px;} .exam_top {background:#fff; border:1px #888888 solid; border-radius:20px; padding:40px 80px; margin-bottom:20px;} .exam_top dl {display:flex; flex-wrap:warp; gap:10px; margin:10px 0px; font-size:17px;} .exam_top dt {width:160px;color:#666;} .exam_top dd {width:calc(100% - 180px); color:#000;} .exam_body {background:#fff; display:flex; flex-wrap:wrap; gap:60px; border-radius:20px; padding:40px;} .exam_list {position:relative;width:100%; display:flex;flex-wrap:wrap; gap:25px; } .exam_list .question {width:100%; padding-left:20px; display:flex; gap:5px; } .exam_list .question h2 {font-size:20px; line-height:1.2; font-weight:600; color:#000;} .exam_list .answer {width:100%; padding-left:40px;} .exam_list .answer ul {width:100%; display:flex; flex-wrap:wrap; gap:15px; } .exam_list .answer li {width:100%; display:flex; flex-wrap:nowrap; gap:10px; color:#000; } .exam_list:before {content:'';position:absolute; left:-5px; top:-19px; width:60px; height:60px; } .exam_list.marking1:before{background:url('/images/marking1.png') 50% 50% no-repeat;} .exam_list.marking2:before{background:url('/images/marking2.png') 50% 50% no-repeat;} .exam_list.marking3:before{background:url('/images/marking3.png') 50% 50% no-repeat;} .solution_box {width:100%;display:flex; flex-wrap:wrap; gap:10px; border-radius:20px; background:#e5edfb; padding:30px 40px;} .solution_box .result {width:100%;font-size:24px; color:#ec4822; font-weight:600;} .solution_box .solution {width:100%;font-size:20px; color:#000; line-height:1.4;} /* 선택 표지판 */ .exam_select {width:440px; height:auto;display:flex; flex-wrap:wrap; gap:20px; padding-bottom:30px; position:fixed;top:30px;right:20px;transform:translateY(0px); background:#fff;box-shadow:0px 0px 10px rgba(0,0,0,0.15); border: 1px var(--border) solid; z-index:100; border-radius:10px;} .exam_select_mobile_title {display:none;} .exam_select_title {position:relative;width:100%; padding:20px 30px;border-bottom:1px var(--border) solid; } .exam_select_title h2 {line-height:20px; font-size:20px; font-weight:600; color:#000; padding:0px;} .exam_select_title .es_num {position:absolute;transform:translateY(-50%);top:50%; right:50px;font-size:16px;} .exam_select_title .es_num b {color:#000;} .exam_select_title .es_close {position:absolute;transform:translateY(-50%);top:50%; right:26px; width:20px; height:20px;background:url('/images/arrow_top2.png') center no-repeat; background-size:cover !important; text-indent:-999px; font-size:0px;cursor:pointer;} .exam_select_title .active {position:absolute;transform:translateY(-50%);top:50%; right:26px; width:20px; height:20px;background:url('/images/arrow_bottom2.png') center no-repeat; background-size:cover !important; text-indent:-999px; font-size:0px;cursor:pointer;} .exam_select_time {display:inline-block;margin:0px auto;width:70%; padding:10px 30px; line-height:40px; font-size:35px; text-align:center;border-radius:8px; background: linear-gradient(to top, #163f73, #396293);} .exam_select_time h2 { display:inline-block;width:auto; font-size:1em;font-weight:800; color:#fff;letter-spacing:0em; padding-left:50px;background:url('/images/icon_time.png') left center no-repeat;} .exam_select_cont {width:100%;padding:0px 30px;} .exam_select_cont ul {display:flex; flex-wrap:wrap; gap:10px;} .exam_select_cont li {width:calc((100% - 40px) / 5); height:28px; line-height:28px;padding:0px 15px;border-radius:30px;font-size:15px; color:#000;background:#e9edf2 url('/images/check_w.png') center right 10px no-repeat; background-size:10px !important; cursor:pointer;} .exam_select_cont li a {display:block;} .exam_select_cont li.check {background:#d5e1ff url('/images/check.png') center right 10px no-repeat; background-size:10px !important;} .exam_select_btn {width:100%;padding:0px 30px;display:flex; flex-wrap:nowrap; gap:5px; padding-left:35%;} .exam_select_btn .button {width:50%;} .es_mobile {display:none;} /* 교과목 목차 */ .exam_index {width:500px; height:auto;display:flex; flex-wrap:wrap; gap:10px; padding-bottom:10px; position:absolute;top:70px;right:0px; background:#fff;box-shadow:0px 0px 10px rgba(0,0,0,0.15); border: 1px var(--border) solid; z-index:101; border-radius:10px;} .exam_index_title {position:relative;width:100%; padding:20px 30px;border-bottom:2px var(--main) solid; } .exam_index_title h2 {line-height:20px; font-size:20px; font-weight:600; color:#000; padding:0px;} .exam_index_cont {width:100%;padding:0px s0px;} .exam_index_cont ul {display:flex; flex-wrap:wrap; gap:0px;} .exam_index_cont li { position:relative; width:100%;display:flex; flex-wrap:nowrap;align-items:center; gap:30px; line-height:1.4;padding:15px 30px;font-size:17px; color:#000; border-bottom:1px var(--border) solid;} .exam_index_cont li span{display:inline-block;width:50px; height:24px;line-height:24px;font-size:15px; text-align:center; border-radius:30px; background:#99abd7;color:#fff;} .exam_index_cont li.active {background:#f5f8fe;} .exam_index_cont li.active:before {content:''; position:absolute; left:0px; top:0px; width:4px; height:100%;background:#3973ff;} .exam_index_btn {width:100%;padding:20px 30px; display:flex; justify-content:flex-end;} .exam_index_btn .ei_close {display:block; width:20px; height:20px;background:url('/images/icon_close.png') center no-repeat; background-size:cover !important; opacity:0.3; text-indent:-999px; font-size:0px;} .exam_index_btn .ei_close:hover { opacity:0.6;} /*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 게시판 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/ /* 게시판 상단 탭 */ .board_tab {position:relative; display:flex; flex-wrap:nowrap; padding:0px; margin-bottom:24px; margin-top:60px;} .board_tab::before {content:''; position:absolute; left:0px; bottom:0px; width:100%; height:1px; background:#e3e3e3;} .board_tab ul { display:flex; flex-wrap:nowrap; gap:0px; } .board_tab li {width:auto;} .board_tab li a {position:relative;display:block;width:auto;min-width:100px; padding:0px 20px;font-size:18px; line-height:60px; color:#000;text-align:center;white-space:nowrap;} .board_tab li a:hover { color:#000; } .board_tab li a.active {border:1px #e3e3e3 solid; color:var(--main); border-bottom:1px #fff solid; } .board_tab li a.active:before {content:'';position:absolute;left:0px; top:0px; width:100%; height:4px; background:var(--main);} .board_cs {position:absolute; right:0px; top:0px; width:100%; max-width:370px; border:1px #ddd solid; border-radius:10px; display:flex; flex-wrap:nowrap; align-items:center; } .board_cs h2 {width:130px; text-align:center; padding:52px 10px 0px 10px; background:url('/images/board_cs.png') 50% 0% no-repeat; font-size:18px;color:#000;font-weight:600;} .board_cs .board_cs_inner {width:calc(100% - 130px); background:#f5f5f5; height:100%; padding:15px 20px; } .board_cs .board_cs_inner b {display:block; width:100%; font-size:22px;font-weight:800; margin-bottom:10px;} .board_cs .board_cs_inner p {font-size:14px; line-height:1.3;} .control_board {position:relative;width:100%; display:flex; flex-wrap:nowrap; align-items:center; gap:10px; justify-content:flex-end;margin-bottom:15px; font-size:15px; } .control_board > div { width:auto;display:flex; flex-wrap:nowrap; align-items:center; } .control_board .control_total {position:absolute; left:0px; top:50%; transform:translateY(-50%); } .control_board .select_box select {width:auto;} .control_board .search {width:100%; max-width:300px; gap:0px; border: 1px var(--border) solid; border-radius:5px; overflow:hidden; } .control_board .search input.input_search { width:calc(100% - 38px);height:38px; font-size:1em; color: #333; padding: 5px 10px;border:none; background: #fff; text-indent:10px;} .control_board .search input::placeholder {font-size:1em; color:#888;} .control_board .search .btn_search {display:block; width:38px; height:38px;border:none; font-size:0px; padding:0px; border-radius:5px;background:url('/images/search_icon.png') 50% 50% no-repeat; background-size:20px !important; } span.debate {display:flex; width:23px !important; height:23px !important; border-radius:5px; background:#fe7563;background-size:cover !important;margin:0px; } span.debate img {width:23px !important;height:auto !important; margin:0px !important; padding:0px !important;} /* 게시판 목록 */ .board_list {width:100%; border-collapse:separate; border-spacing:0; border-top:2px solid #222; overflow: hidden; word-break: break-all;} .board_list th {font-size:1em; background:#fff; color:#000; font-weight:600; text-align:center; padding:20px 0; border-bottom:1px solid #aaaaaa; line-height:1.2;} .board_list th:last-child {border-right:none; } .board_list td { position:relative;font-size:1em; padding:10px;margin:0px; line-height:24px; text-align:center; vertical-align:middle; border-bottom:1px solid #ddd; letter-spacing:-0.5pt; color:#666; } .board_list td a{width:auto;letter-spacing:-0.5pt; vertical-align:middle;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; height:24px;line-height:24px; padding:0px; margin:0px;} .board_list td .icon_data {display:inline-block; width:24px;height:24px;border-radius:4px; border:1px #474747 solid;background:url('/images/icon_file.png') 50% 50% no-repeat;background-size:cover !important; } .board_list td span {display:inline-block; width:auto;line-height:20px; height:20px;} .board_list td span.new {font-size:12px;font-weight:bold;padding:0px 8px; background:#e51717;color:#fff; border-radius:30px; } .board_list td span.lock {width:15px;padding:0px 7px; background:url('/images/icon_lock.png') 50% 50% no-repeat;background-size:auto 14px !important; font-size:0px;} .board_list td span.comment_cnt {font-weight:500;color:#e51717; } .board_list td span.reply {display:inline-block; width:45px; line-height:20px; height:20px; padding:0px 7px; border-radius:4px; font-style:normal;font-size:12px;color:#fff;white-space:nowrap; background:#777; text-align:center;} .board_list td.last {border-right:none;} .board_list td.left {text-align:left;} .board_list td.right {text-align:right;} .board_list tr.notice, .board_list tr.notice td{background:#f6fafe;} .board_list tr.notice td#no { background:url('/images/icon_noti.png') 50% 50% no-repeat;background-size:22px !important; font-size:0px;} .board_list td#subject {text-align:left;} .board_list td#subject .subject_wrap {display:flex; align-items:center; gap:6px; text-align:left;} .board_list td#subject .subject_wrap a {} .board_list td#reply {} .board_list td#reply span { display:inline-block; width:auto; height:20px; line-height:20px; padding:0px 8px; border-radius:4px; font-size:11px; color:#fff; } .board_list td#reply span.reply_no {background:#c6c6d0;} .board_list td#reply span.reply_ok {background:#fe7563;} .board_list td#reply small {width:100%; display:block; font-size:11px;text-align:center; line-height:1; margin-top:5px;} .faq_tab {position:relative; display:flex; flex-wrap:nowrap; background:#f9f9f9; padding:0px; border-bottom:1px #e3e3e3 solid; margin:30px 0px;} .faq_tab::before {content:''; position:absolute; left:0px; bottom:0px; width:100%; height:1px; background:#e3e3e3;} .faq_tab ul {width:100%; display:flex; flex-wrap:nowrap; gap:0px; justify-content:space-around; } .faq_tab li {width:100%;} .faq_tab li a {position:relative;display:block;width:100%;padding:15px 10px;font-size:17px; line-height:30px; color:#000;text-align:center;white-space:nowrap;} .faq_tab li a:hover { color:#000; } .faq_tab li a.active { background:var(--main);color:#fff; } .faq_cont {font-size:17px; display:none; } .faq_cont dl {overflow:hidden;border-bottom:1px solid #ddd;} .faq_cont dt {padding:20px 40px 20px 0px; box-sizing:border-box; color:#000; letter-spacing:-0.7pt; line-height:1.4; position:relative; cursor:pointer; font-size:1em;word-break: break-all;} .faq_cont dt:before {content:''; width:25px; height:25px; background:url('/images/arrow_bottom2.png') 50% 50% no-repeat; background-size:cover !important; position:absolute; top:15px; right:0px; transition:all 0.3s;} .faq_cont dt.active:before {background-image:url('/images/arrow_top.png');} .faq_cont dt span {color:#ff2400; padding-right:5px;} .faq_cont dd {position:relative; padding:30px; background:#f6fafe; display:none;width:100%; color:#666; box-sizing:border-box;font-size:1em; line-height:1.6; word-break: keep-all;} .faq_cont dd img{max-width:100%;} .event_list {display:flex; flex-wrap:wrap; width:100%; gap:30px; margin:0px;text-align:left; } .event_list .item {width:calc((100% - 60px) / 3); margin:0px;border:1px var(--border) solid; border-radius:10px; overflow:hidden; } .event_list .item:hover {border-color:#666;} .event_list .item .con_img {position:relative;width:100%; border-bottom:1px var(--border) solid; border-radius:10px 10px 0px 0px; } .event_list .item .con_img img {width:100%; border-radius:10px 10px 0px 0px; background-size:cover !important; background-repeat:no-repeat !important; background-position:center !important; } .event_list .item .con_txt { width:100%;padding:20px 30px; box-sizing:border-box;} .event_list .item .con_txt ul {width:100%; display:flex; flex-wrap:nowrap;justify-content:space-between; gap:0px; margin:20px 0px 0px 0px;} .event_list .item .con_txt li { display:flex; flex-wrap:nowrap; width:auto;padding:0px !important;} .event_list .item .con_txt li span {position:relative;left:0px; top:0px; width:auto !important;line-height:20px; margin-right:6px !important;} .event_list .item.end .con_img {background:#000;} .event_list .item.end .con_img:after {content:'종료된 이벤트'; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); white-space:nowrap; color:#fff; font-weight:bold; font-size:24px;} .event_list .item.end .con_img img {opacity:0.4;} .event_list .item.end .con_txt {opacity:0.5;} /* 게시판 상세 */ .board_view {} .board_view_title{border-bottom:1px solid #aaaaaa; padding:0px 0px 20px 0px; position: relative;} .board_subject{display:block; font-size:24px; line-height:1.3; font-weight:600; color:#000;} .board_subject span {display:inline-block; width:auto;line-height:20px; height:24px;} .board_subject span.new {font-size:12px;font-weight:bold;padding:0px 8px; background:#e51717;color:#fff; border-radius:30px; } .board_subject span.lock {width:15px;padding:0px 7px; background:url('/images/icon_lock.png') 50% 50% no-repeat;background-size:auto 14px !important; font-size:0px;} .board_detail {margin:10px 0 0; display:flex; justify-content:space-between;} .board_detail ul {width:auto;display:flex; } .board_detail li{font-size:17px; color:#666; line-height:1.3;padding:0 40px 0 0; position:relative;} .board_detail li span { font-size:17px; line-height:inherit;color:#333; display:inline-block; padding-right:10px; } .board_detail li:last-child{padding:0;} .board_detail li:after{content:''; display:block; width:1px; height:16px; background:#ccc; position:absolute; right:20px; top:50%; transform:translateY(-50%);} .board_detail li:last-child:after{display:none;} .board_detail ul.board_detail_icon {width:auto;display:flex; justify-content:flex-end;gap:20px; } .board_detail ul.board_detail_icon li {padding:0px 0px 0px 30px;} .board_detail ul.board_detail_icon li:after {display:none;} .board_detail ul.board_detail_icon li.hit {background:url('/images/icon_hit.png') 0% 50% no-repeat;background-size:24px !important; padding-left:32px; opacity:0.6;color:#000;} .board_detail ul.board_detail_icon li.reply {background:url('/images/icon_reply.png') 0% 50% no-repeat;background-size:20px !important;} .board_body .board_view_title {padding-top:20px;} .board_view_content {padding:0px;border-bottom:1px solid var(--border);font-size:17px;} .board_view_content dl {border-bottom:1px solid var(--border); padding:25px 0px; display:flex; flex-wrap:nowrap; align-items:center;} .board_view_content dl:last-child {border:none;} .board_view_content dt {width:80px; color:#000;} .board_view_content dd {width:calc(100% - 80px); color:#666; line-height:1.8;} .board_view_content dd.full {width:100%;} .board_view_content dl.bv_course dd { color:#222;} .board_view_content dl.bv_file {padding:15px 0px !important;} .board_view_content dl.bv_file dd a {width:100%; display:inline-block; padding-left:24px;color:#3973ff; text-decoration:underline;background:url('/images/file.png') 0% 50% no-repeat;} .board_view_content dl.bv_reply {} .board_view_content dl.bv_reply .bv_reply_wrap { width:100%; margin-bottom:10px;} .board_view_content dl.bv_reply .bv_reply_wrap span { display:inline-block; width:auto; height:24px; line-height:24px; padding:0px 8px; border-radius:4px; font-size:13px; color:#fff; } .board_view_content dl.bv_reply .reply_no {background:#c6c6d0;} .board_view_content dl.bv_reply .reply_ok {background:#fe7563;} .board_view_content dl.bv_reply .bv_reply_wrap span.reply_date { border-radius:0px;font-size:14px;color:#666 !important; } .board_view_content p, .board_view_content span { font-size:1rem; line-height:1.4; } .board_view_content img{max-width:100%; height:auto !important;} .bv_vote_wrap {width:100%; padding:50px; border:1px #ddd solid; border-radius:10px;} .bv_vote_wrap ul {width:100%; display:flex; flex-wrap:wrap; gap:20px; margin:10px 0px; } .bv_vote_wrap li {width:100%; display:flex; flex-wrap:nowrap; gap:10px; align-items:flex-start;} .vote_cont {width:calc( 100% - 40px ); display:flex; flex-wrap:wrap; gap:5px; } .vote_cont .vote_txt {width:100%; line-height:20px; color:#000;} .vote_bar { position:relative; display:flex; align-items:center; gap:20px; width:100%; height:20px; font-size:14px; } .vote_bar .bar {position:relative; display:inline-block; width:calc(100% - 150px); height:20px; line-height:20px;background:#f1f1f1;border-radius:3px;} .vote_bar .slice {position:relative; display:inline-block; height:20px; border-radius:3px;} .bv_vote_wrap li:nth-child(1) .vote_bar .slice {background:#ffbc00;} .bv_vote_wrap li:nth-child(2) .vote_bar .slice {background:#41b1ff;} .bv_vote_wrap li:nth-child(3) .vote_bar .slice {background:#fe7563;} .bv_vote_wrap li:nth-child(4) .vote_bar .slice {background:#7dbd1d;} .bv_vote_wrap li:nth-child(5) .vote_bar .slice {background:#051d55;} /* .bv_vote_wrap li:nth-child(11) .vote_bar .slice, .bv_vote_wrap li:nth-child(14) .vote_bar .slice, .bv_vote_wrap li:nth-child(17) .vote_bar .slice, .bv_vote_wrap li:nth-child(20) .vote_bar .slice, .bv_vote_wrap li:nth-child(23) .vote_bar .slice, .bv_vote_wrap li:nth-child(26) .vote_bar .slice, .bv_vote_wrap li:nth-child(29) .vote_bar .slice, .bv_vote_wrap li:nth-child(32) .vote_bar .slice, .bv_vote_wrap li:nth-child(35) .vote_bar .slice, .bv_vote_wrap li:nth-child(38) .vote_bar .slice, .bv_vote_wrap li:nth-child(41) .vote_bar .slice {background:#7dbd1d;} .vote_bar .slice.color1{background:#ffbc00;} .vote_bar .slice.color2{background:#7dbd1d;} .vote_bar .slice.color3{background:#41b1ff;} */ .vote_bar button {color:#777;white-space:nowrap; border:none; background:none; } .bv_vote_btn {width:100%; display:flex; justify-content:center; gap:10px; align-items:center; margin-top:50px;} .bv_vote_btn .button {width:170px;} /* 게시판 글쓰기 팝업 */ .popup_wrap.board_write {max-width:1000px; } .board_write {padding:0px;font-size:17px;} .board_write dl {padding:10px 0px; display:flex; flex-wrap:nowrap; } .board_write dt {width:80px; color:#000; line-height:30px;} .board_write dt span.pointColor {margin-left:5px; color:#ff2400;} .board_write dd {width:calc(100% - 80px); color:#666;} .board_write dl dd .txt_byte {display:inline-block;width:100%; text-align:right;font-size:13px;font-weight:400; color:#777; } .board_write dl dd .txt_byte b {font-weight:400;color:#000;} .board_write dl.bw_course dd { color:#222; line-height:30px;} .board_write dl.bw_file dd { display:flex; align-items:center; gap:10px;} .board_write dl.bw_file dd .txt_byte {width:auto; } .board_write dl.bw_vote dd {display:flex; flex-wrap:wrap; gap:10px;} .board_write dl.bw_vote dd .vote_check {width:100%; display:flex; flex-wrap:nowrap; align-items:center; gap:6px; height:30px;} .board_write dl.bw_vote dd .vote_radio {width:100%; display:flex;justify-content:flex-end; flex-wrap:nowrap; align-items:center;gap:6px;} .board_write dl.bw_vote dd .add_vote {width:100%; height:40px; line-height:40px; text-align:center; background:#dcdcdc; color:#333;border-radius:5px !important; } .board_write dl.bw_vote dd .add_vote:hover {background:#cbcbcb;} .input_write { height:34px; border:none; border-bottom:1px #ddd solid;} .input_vote { height:32px; border:1px #ddd solid; border-radius:5px !important; padding:0px 10px;} .textarea_write { border:1px #ddd solid;} .board_btn { margin-top:20px;} .board_btn .button_course {width:150px;} .cv_board .board_btn {width:100%; display:flex;flex-wrap:nowrap; gap:5px;justify-content:flex-end; } .page_bar .board_btn { position:absolute; right:0px; top:0px; margin:0px; width:auto; min-width:130px;} .board_body .board_btn {width:100%; display:flex;flex-wrap:nowrap; gap:5px;justify-content:flex-end; } /* 과정 내 게시판 상세 들여쓰기 */ .board_view .board_view_title, .board_view .board_view_content dt, .board_view .board_view_content dd {padding-left:15px;} .board_view .board_view_content dd.full {padding:0px 15px;} .board_comment {margin-top:40px;} .mobile_title {display:none;} /*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 나의학습 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/ .my_tab {position:relative; display:flex; flex-wrap:nowrap; padding:0px; margin-bottom:40px; overflow-x:auto; -webkit-overflow-scrolling: touch !important; -webkit-scrollbar-width: none !important; scrollbar-width: none !important; perspective: 1px;} .my_tab::before {content:''; position:absolute; left:1px; bottom:0px; width:calc(100% - 1px); height:2px; background:#3973ff; z-index:5; } .my_tab ul {width:auto; display:flex; flex-wrap:nowrap; gap:0px; border-top:1px #ddd solid; border-radius:8px 8px 0px 0px; will-change: transform, contents; transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden;} .my_tab li:first-child a {border-left:1px #ddd solid; } .my_tab li {min-width:130px; backface-visibility: hidden;} .my_tab li a {position:relative;display:block;width:100%; border-radius:8px 8px 0px 0px; padding:0px 20px;font-size:17px; line-height:50px; color:#000; border-right:1px #ddd solid; text-align:center;white-space:nowrap; will-change: transform, contents; transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden;} .my_tab li a:hover { color:var(--main); } .my_tab li a.active {border-color:var(--main); background:var(--main);color:#fff; will-change: transform, contents; transform: translateZ(0); -webkit-transform: translateZ(0); } .my_tab li a.active:before {content:''; position:absolute; left:-10px;top:0px;width:10px;height:100%;background:#fff; will-change: transform, contents; transform: translateZ(0); -webkit-transform: translateZ(0);} .my_tab li:first-child a.active:before {display:none !important; } .my_category_list {width:100%; } .my_category_list ul {display:flex; flex-wrap:wrap; gap:10px;} .my_category_list li a {display:block; width:auto; background:#f1f4f9; font-size:1rem; color:#000; line-height:45px;padding:0px 20px; border-radius:5px; white-space:nowrap;} .my_category_list li.active a, .my_category_list li a:hover {background:#d6dbe2;} .my_notice_box {width:100%; display:flex; flex-wrap:wrap; gap:5px; border:1px var(--border) solid;padding:30px 30px; background:#fcfcfc;border-radius:10px; margin-bottom:30px;} .my_notice_box p {width:100%;font-size:1em;color:#000; } .my_notice_box dl{ padding-left:20px;} .my_notice_box dd {position:relative; padding-left:15px; color:#555;} .my_notice_box dd:before {content:''; position:absolute; left:0px; top:50%;transform:translateY(-50%); width:3px; height:3px; background:#454545;} .control_my {position:relative;width:100%; padding:20px 30px; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; border:1px #ddd solid; border-radius:10px; margin:30px 0px; font-size:15px; } .control_my > div { width:100%;display:flex; flex-wrap:nowrap; align-items:center;gap:20px; } .control_my .control_my1 {} .control_my .control_my2 {justify-content:flex-end;} .control_my ul {display:flex; flex-wrap:nowrap; ;} .control_my li {position:relative;width:auto; color:#000; line-height:20px;} .control_my li a {position:relative;display:block; line-height:20px;} .control_my li a:hover {color:#000 !important; text-decoration:underline;} .control_my li a.active:hover { text-decoration:none;} .control_my li a:before {content:''; position:absolute; top:50%;transform:translateY(-50%);} .control_my .ing {gap:25px;} .control_my .ing li a{padding-left:12px; font-size:1rem;} .control_my .ing li a:before {left:0px; width:5px;height:5px;border-radius:50%;background:#000;} .control_my .ing li a.active {color:var(--main); text-decoration:underline;} .control_my .ing li a.active:before {background:var(--main);} .control_my .sort {gap:15px;} .control_my .sort li a {font-size:15px; color:#666;} .control_my .sort li a.active {color:#000;font-weight:600;} .control_my .sort li a:before {right:-8px; width:1px;height:14px;background:#cccccc;} .control_my .sort li:last-child a:before {display:none;} .control_my .search {width:100%; max-width:300px;display:flex; flex-wrap:nowrap; align-items:center; gap:0px; border: 1px var(--border) solid; border-radius:5px; overflow:hidden; } .control_my .search input.input_search { width:calc(100% - 38px);height:38px; font-size:1em; color: #333; padding: 5px 10px;border:none; background: #fff; text-indent:10px;} .control_my .search input::placeholder {font-size:1em; color:#888;} .control_my .search .btn_search {display:block; width:38px; height:38px;border:none; font-size:0px; padding:0px; border-radius:5px;background:url('/images/search_icon.png') 50% 50% no-repeat; background-size:20px !important; } .mycourse_list {display:flex; width:100%; gap:20px; flex-wrap:wrap;} .mycourse_list .item {position:relative; display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start; width:calc((100% - 20px) / 2); padding:30px 20px 110px 20px; margin:0px; border:1px var(--border) solid; border-radius:10px; overflow:hidden; } .mycourse_list .item:hover {border-color:#666;} .mycourse_list .item .con_img {position:relative;width:240px; height:auto; border-radius:8px; } .mycourse_list .item .con_img img {width:100%; border-radius:8px; border:1px var(--border) solid; background-size:cover !important; background-repeat:no-repeat !important; background-position:center !important; } .mycourse_list .item .con_txt { width:calc(100% - 260px);padding:0px; box-sizing:border-box;} .mycourse_list .item .con_txt h3 {font-size:18px; margin:10px 0px 15px 0px !important;} .mycourse_list .item .con_txt ul {width:100%; display:flex;flex-wrap:wrap; gap:0px 15px !important; margin:0px !important;} .mycourse_list .item .con_txt li {position:relative; width:auto;padding:0px !important; font-size:15px;color:#777; line-height:20px;box-sizing:border-box;} .mycourse_list .item .con_txt li span {position:absolute;left:0px; top:0px; width:auto !important;line-height:20px;font-size:1em; color:#000;} .mycourse_list .item .con_txt li em {color:var(--main); font-style:normal; } .mycourse_list .item .con_txt li:first-child {width:100%;} .mycourse_list .item .con_txt li:last-child:before {content:''; position:absolute;left:-7px; top:50%;transform:translateY(-50%);width:1px;height:14px;background:#cdcdcd;} .mycourse_list .item .con_btn {position:absolute;left:0px; bottom:0px;width:100%; padding:15px; text-align:center; display:flex; justify-content:center; gap:10px; border-top:1px var(--border) solid;} .mycourse_list .item .con_btn .button_course {max-width:150px;} .mycerti_header {display:flex; width:100%; gap:20px; flex-wrap:wrap; border-top:3px #000 solid; border-bottom:1px var(--border) solid;} .mycerti_header h1 {font-size:17px; color:#000; padding:15px 0px; text-align:center; } .mycerti_header h1:nth-child(1) {width:calc(100% - 440px);} .mycerti_header h1:nth-child(2) {width:250px;} .mycerti_header h1:nth-child(3) {width:150px;} .mycerti_list {display:flex; width:100%; gap:0px; flex-wrap:wrap;} .mycerti_list .item { position:relative; display:flex; gap:20px; flex-wrap:nowrap; align-items:center; width:100%; padding:20px 0px; margin:0px; border-bottom:1px var(--border) solid; overflow:hidden; } .mycerti_list .item .con_img {width:200px;} .mycerti_list .item .con_img img {width:100%; border-radius:8px; background-size:cover !important; background-repeat:no-repeat !important; background-position:center !important; } .mycerti_list .item .con_txt { width:calc(100% - 660px);height:auto;padding:0px; box-sizing:border-box;} .mycerti_list .item .con_txt h3 {font-size:18px;line-height: 1.4; height:auto; max-height:auto; -webkit-line-clamp:2; margin-top:7px;} .mycerti_list .item .con_date { width:250px;} .mycerti_list .item .con_date ul {width:100%;height:auto; display:flex; flex-wrap:wrap; justify-content:center; gap:0px 15px !important; margin:0px !important;} .mycerti_list .item .con_date li {position:relative; width:auto;padding:0px !important; font-size:15px;color:#777; line-height:20px;box-sizing:border-box;} .mycerti_list .item .con_date li span {position:absolute;left:0px; top:0px; width:auto !important;line-height:20px;font-size:1em; color:#000;} .mycerti_list .item .con_date li em {color:var(--main); font-style:normal; } .mycerti_list .item .con_date li:first-child {width:100%; text-align:center;} .mycerti_list .item .con_date li:last-child:before {content:''; position:absolute;left:-7px; top:50%;transform:translateY(-50%);width:1px;height:14px;background:#cdcdcd;} .mycerti_list .item .con_btn {width:150px; display:flex; flex-wrap:wrap; gap:10px;} .popup_wrap.popup_certificate {} .popup_wrap.popup_certificate .popup_title {background:#edeff2;} .popup_wrap.popup_certificate .popup_cont {padding: 30px 70px; text-align:center;} .popup_wrap.popup_certificate .popup_cont_inner {width:100%; max-width:350px; margin:0px auto;} .popup_wrap.popup_certificate .popup_txt {position:relative; width:100%; padding-bottom:141%; height:0px; overflow:hidden;} .popup_wrap.popup_certificate .popup_txt .certificate {position:absolute !important; left:50% !important; transform:translateX(-50%);top:0px !important;} .textarea1 {border:1px #ddd solid; border-radius:4px; padding:8px 10px; height:40px; min-height:0px; max-height:200px;overflow-y: auto; resize: none; margin:10px 0px; box-sizing:border-box;} .tooltip {position:fixed; left:50%; bottom:20px; transform:translateX(-50%); width:100%; display:none;opacity:1; z-index:100;} .tooltip_wish { display:flex; flex-wrap:wrap;justify-content:center;align-items:center; gap:50px; padding:18px; width:94%; max-width:400px; margin:0px auto; border-radius:10px; font-size:16px; color:#fff; background:rgba(33,39,125,0.6); transition:all 0.3s;} .tooltip.on {display:block; opacity:1;} .btn_tooltip {width:auto; border:1px #fff solid;color:#fff; padding:0px 16px; font-size:14px; line-height:30px;border-radius:30px;;} .btn_tooltip:hover {background:#fff; color:#3e438e;} .tooltip { &.showing { opacity: 1; } &.show { display: block; opacity: 1; } &.hide { display: none; } } /*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 회원 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/ .member_wrap {position:relative;display:flex; width:100%; height:auto; min-height:calc(100vh - 120px); margin:0px; vertical-align:top;} .login_wrap {position:relative;width:100%; height:calc(100vh - 120px); min-height:600px;} .login_wrap_bg {background:url('/images/login_bg.webp') 50% 50% no-repeat; background-size:cover !important;} .member_back {width:auto; position:absolute; left:30px; top:30px;} .member_back .btn_member_back {display:inline-block;width:auto; line-height:34px; border-radius:30px;color:#000;border:1px #ddd solid; padding:0px 20px 0px 40px;background:url('/images/arrow2.png') 15px 50% no-repeat; background-size:20px !important;} .member_back .btn_member_back:hover {border-color:#333;} .login_box {width:100%; max-width:520px;padding:60px;background:#fff; border-radius:10px; position:relative; top:50%; left:50%; transform:translate(-50%,-50%); min-width:320px;} .login_inner {width:100%; max-width:400px; margin:0 auto; box-sizing:border-box; text-align:center; display:flex; flex-wrap:wrap; gap:0px; } .login_inner h1 {width:100%; position:relative; text-align:center;} .login_inner h1 a {width:100%; display:block;} .login_inner h1 .img_logo {max-height:60px;} .login_inner h2 {width:100%; font-size:30px; text-align:center;color:#000; line-height:1; font-weight:600; margin:20px 0 50px;} .login_inner h2 span {color:#e45e28;} .login_inner h2 p {font-size:1rem; font-weight:normal; color:#333;margin-top:20px; display:block;text-align:center; } .login_form {display:flex; flex-wrap:wrap; gap:10px;} .login_form > div {width:100%;} .login_form .input_login { padding:0px 20px;} .login_form input{ width:100%;height:50px;font-size:1rem;color:#000; border:none; border-bottom:1px #bbb solid;} .btn_login {font-size:20px;height:60px; line-height:60px; border-radius:50px; margin-top:30px;} .login_ul {width:100%; display:flex; flex-wrap:wrap; margin:40px 0px 0 0px; padding:0px 10px;} .login_ul li {width:100%;display:block;position:relative;font-size:15px; text-align:left; color:#000; box-sizing:border-box; margin:0 0 10px;} .login_ul li span {position:relative; font-size:1em; padding-left:12px;} .login_ul li a {display:block;width:120px;text-align:left; position:absolute; right:0; top:0; color:var(--main); font-size:inherit; font-weight:inherit; letter-spacing:inherit; text-decoration:underline;} .login_ul li:last-child {margin:0;} .login_ul li span:after {content:''; width:4px; height:4px; border-radius:100%; background:#b6b6b6; position:absolute; top:50%;transform:translateY(-50%); left:0;} .member_box {width:100%; max-width:800px;padding:0px;position:relative; min-width:320px; margin:80px auto;} .member_box .login_inner {max-width:460px;} .member_process {width:100%;display:flex; flex-wrap:nowrap;justify-content:center; gap:60px; margin-bottom:50px; } .member_process dl {position:relative; display:flex; flex-wrap:wrap;gap:15px;justify-content:center; width:100px; text-align:center; vertical-align:top;} .member_process dl:after {content:''; width:30px; height:30px; background:url('/images/arrow_right2.png')no-repeat center; background-size:cover; position:absolute; right:-30px; top:20px; transform:translateX(50%); opacity:0.3;} .member_process dl:last-child:after {display:none;} .member_process dl dt {width:60px;height:60px;border-radius:50%;background-color:#bbbbbb;} .member_process dl dt img {max-width:100%;} .member_process dl dd {width:100%;font-size:1rem; font-weight:400; color:#000;line-height:1;} .member_process dl.active dt {background-color:#051d55 !important;} .member_title {width:100%;display:flex; flex-wrap:nowrap; align-items:center; gap:10px; font-size:24px; color:#000; font-weight:600; line-height:1.3; margin-bottom:20px;} .member_title .sub_txt {width:auto;font-size:15px; font-weight:400; color:#777;} .member_title .sub_txt em {color:#ff2400; font-style:normal;} .member_agree {width:100%;border:1px #ddd solid; border-radius:5px;} .member_agree dl {position:relative; border-bottom:1px dashed #d1d1d1; padding:20px 10px 20px 57px; box-sizing:border-box;} .member_agree dl.all_check {border-bottom:1px solid #e0e0e0;} .member_agree dl:last-child {border-bottom:0;} .member_agree dl dt {position:Absolute;width:24px;height:24px; top:50%; left:25px;transform:translateY(-50%);} .member_agree dl dd a {font-size:18px; font-weight:400; color:#000; letter-spacing:-0.6pt; line-height:1.4;} .member_agree dl dd a b {color:#ff2400; font-size:inherit; font-weighT:inherit; letter-spacing:inherit; line-height:inherit;} .member_form {width:100%;border:1px #ddd solid; padding:25px 40px; } .member_form dl {position:relative; display:flex; flex-wrap:nowrap; gap:20px; border-bottom:1px solid #d1d1d1; padding:15px 0px; box-sizing:border-box;} .member_form dl:last-child, .member_form dl.last { border:none !important; } .member_form dt { width:130px; line-height:40px; font-size:18px; color:#000; font-weight:600; } .member_form dt em {color:#ff2400; font-style:normal;} .member_form dd { width:calc(100% - 150px); display:flex; flex-wrap:wrap; gap:5px 10px; align-items:center; } .member_form dd span { position:relative; display:block; width:100%; font-size:15px; color:#666; padding-left:10px;margin-top:5px;} .member_form dd span.error {color:#f55555;} .member_form dd span.possible {color:#3973ff;} .member_form dd span.check {padding-left:26px; color:#bbbbbb;line-height:20px;} .member_form dd span.check.on {color:#000;} .member_form dd span.check:before {content:''; position:absolute; left:0px;top:1px;width:18px;height:18px;border-radius:50%;background:#bbbbbb url('/images/check_icon.png') 50% 50% no-repeat; background-size:cover !important;} .member_form dd span.check.on:before {background-color:#051d55;} .member_form dd > div {display:flex; flex-wrap:nowrap; gap:10px; align-items:center; } .member_form dd select { border: 1px #ddd solid !important; border-radius:4px !important;} .input_member {width:100%; max-width:300px; height: 40px; color:#333 !important; border: 1px #ddd solid !important; border-radius:4px !important; text-indent:12px !important;} .input_member::placeholder {font-size:14px; } .input_member:focus {outline:1px #333 solid !important;} .zipcode {width:70px; height: 40px;line-height: 40px;color:#000 !important; background:#fff !important; border: 1px #aaa solid !important; border-radius:4px !important; text-align:center;} .w100 {width:100px !important;} .w300 {width:300px !important;} .w100p {width:100% !important;max-width:100% !important;} .button.btn_pw {width:auto; padding:0px 16px;background:#e5edff; color:#000; border:none;} .button.btn_pw:hover {background:#cfdaf5; color:#000; } .member_notice {display:flex;justify-content:flex-end; align-items:center; gap:6px;font-size:15px; font-weight:400; color:var(--main); line-height:1.6; margin:10px 0 0px;} .member_notice i {width:20px; height:20px; text-align:center; font-size:13px;font-weight:600; line-height:19spx; color:var(--main); border:1px var(--main) solid; font-style:normal; display:inline-block; border-radius:100%; box-sizing:border-box;} .member_keyword {width:100%;border:1px #ddd solid; padding:40px;} .member_keyword_title {width:100%;display:flex; flex-wrap:nowrap; gap:30px; margin-bottom:50px;} .member_keyword_title h2 {width:auto; white-space:nowrap;color:#000;font-size:20px;} .member_keyword_title dl {width:100%;display:flex; flex-wrap:wrap; gap:5px;} .member_keyword_title dd {position:relative; width:100%; padding-left:12px;line-height:20px;} .member_keyword_title dd:before {content:''; position:absolute; left:0px; top:7px; width:5px; height:5px; border-radius:50%;background:#bbb;} .keyword_list {display:flex; flex-wrap:wrap; gap:10px;} .keyword_list li {width:auto;background:#f1f4f9; font-size:15px; color:#000; line-height:45px;border-radius:5px; white-space:nowrap;} .keyword_list li a {display:block; width:100%; font-size:inherit; color:inherit; line-height:inherit;padding:0px 20px; border-radius:5px; white-space:nowrap;} .keyword_list li:hover {background:#e1e9f8;} .keyword_list li.active, .keyword_list li.active:hover {background:#051d55; color:#fff;} .member_success {width:100%;border:1px #ddd solid; padding:40px; min-height:260px; display:flex; align-items:center;justify-content:center; text-align:center; font-size:20px;color:#000; line-height:1.7;} .member_tab { width:100%; display:flex; flex-wrap:nowrap; margin-bottom:60px; } .member_tab li { width:100%;} .member_tab li a {display:block;width:100%; padding:20px; line-height:30px;font-size:20px;color:#000; background:#f1f4f9; border:1px #d2d2d2 solid; text-align:center;} .member_tab li#findid a { border-radius:10px 0px 0px 10px;} .member_tab li#findpw a { border-radius:0px 10px 10px 0px;} .member_tab li a.active { border-color:var(--main);background:#fff;color:var(--main);} .member_find {display:none;} .member_find_result {width:100%;background:#f1f4f9;border:1px #ddd solid; padding:40px; text-align:center; font-size:30px;color:#3973ff; font-weight:800; line-height:1.7;} .member_btn { position:relative;width:100%;display:flex; flex-wrap:nowrap;justify-content:center; align-items:center; gap:10px; margin-top:40px;} .button_member {display:block; width:100%; max-width:200px;padding:0px 25px; font-size:16px; font-weight:600; line-height:50px;text-align:center; border-radius:50px; text-align:center;border:1px var(--main) solid; color:#fff; background:var(--main); overflow:hidden; -webkit-border-radius:50px !important; } .button_member:hover {border-color:var(--mainHover);color:#fff;background:var(--mainHover); } .button_white {border:1px var(--border) solid; color:#666; background:#fff; } .button_white:hover {border-color:#666; color:#000; background:#fff; } .button_member.out {position:absolute; right:0px; top:0px; width:auto; max-width:none; border-radius:5px !important; line-height:45px;border:1px var(--border) solid; color:#666; background:#f4f4f4;} .button_member.out:hover {border-color:#666; color:#000; background:#f4f4f4; } .my_body > .member_form {border-radius:10px; margin-bottom:30px} .my_body > .member_keyword {border-radius:10px;} .my_body .member_keyword_title {margin-bottom:20px;} .popup_wrap.change_pw {max-width:800px;} .popup_wrap.change_pw .popup_title {border:none;} /* 주소검색 팝업 */ .popup_wrap.popup_addr {max-width:550px; height:650px;} .popup_wrap.popup_addr .popup_inner {height:100%;} .popup_wrap.popup_addr .popup_title {justify-content:flex-start; gap:10px;} .popup_wrap.popup_addr .popup_title a.close { position:absolute;right:30px; top:20px;} .popup_wrap.popup_addr .popup_title i.ic_back {width:20px; height:20px;} .popup_wrap.popup_addr .popup_cont {max-height: calc(100% - 61px);} .addr_search {width:100%; display:flex; flex-wrap:nowrap; gap:10px;} .addr_ment {padding:15px;display:flex; flex-wrap:wrap; gap:10px;} .addr_ment p {font-size:15px !important;width:100%;color:#666;line-height:1 !important; } .addr_ment p span {color:#ff2400;} .addr_ment dl {position:relative;width:100%; padding-left:10px; font-size:14px !important;} .addr_ment dl:before {content:''; position:absolute; left:0px;top:9px; width:3px; height:3px;background:#000; } .addr_ment dt {width:100%;color:#000; line-height:22px; font-size:1em;} .addr_ment dd {width:100%;color:#777; line-height:22px; font-size:1em;} .addr_list {width:100%; border-top:1px #ddd solid;} .addr_list ul {width:100%; display:flex; flex-wrap:wrap;} .addr_list li {position:relative;width:100%; padding:18px 60px 18px 0px;border-bottom:1px #ddd solid; } .addr_list li .btn_sel {position:absolute; right:0px; top:12px; width:auto; padding:0px 10px; line-height:34px; border-radius:3px;background:#e5edff; color:#000; font-size:15px;} .addr_list li h2 {font-size:1rem;color:#000; margin-bottom:12px;} .addr_list li dl { width:100%;display:flex; flex-wrap:wrap; gap:5px;} .addr_list li dd { width:100%;display:inline-block;font-size:14px !important; line-height:16px !important; color:#777;} .addr_list li dd span {float:left;display:inline-block; width:auto;border:1px #dcdee0 solid; padding:0px 3px; font-size:11px; line-height:16px; border-radius:2px; margin-right:6px;} /* 이용약관, 개인정보처리방침 */ .privacy {width:100%; } .privacy h3 {font-size:20px; color:#000; font-weight:600; margin-bottom:15px; line-height:1.1; } .privacy p {font-size:1rem; color:#333; line-height:1.5; margin-bottom:40px;} .privacy ol {width:100%; margin-bottom:40px; list-style:none;} .privacy li {font-size:1rem; color:#333; line-height:1.5; list-style:none;} .privacy li::marker {display:none !important;} .privacy ol li ol {padding-left:15px; margin-bottom:0px;} .privacy table {width:100%; border-left:1px #ddd solid; border-top:1px #ddd solid; margin:10px 0px;} .privacy th { padding:7px 10px; text-align:center; color:#000; font-size:1rem;font-weight:500; border-right:1px #ddd solid;border-bottom:1px #ddd solid; background:#f7f7f7;} .privacy td { padding:7px 10px; text-align:center; color:#666; font-size:1rem;border-right:1px #ddd solid;border-bottom:1px #ddd solid;} @media all and (max-width:1200px) { .course_view .item .con_img {width:40%;} .course_view .item .con_txt { width:calc(60% - 200px);gap:20px;} .course_view .item .con_right {width:200px; padding-left:30px;} } @media all and (max-width:1024px) { .main_toparea {gap:20px; flex-wrap:nowrap;} .main_myinfo .main_myinfo_title {font-size:18px; line-height:30px;padding:10px 30px; height:50px;} .main_myinfo .main_myinfo_cont {height:auto; } .main_myinfo {width:calc(58% - 20px);} .main_myinfo .mmc_state { width:170px;} .main_myinfo .mmc_state .c100 { font-size:170px;} .main_myinfo .mmc_state .c100 > span {padding:40px 30px; font-size:1rem;} .main_myinfo .mmc_state .c100 > span strong {height:50px;font-size:27px;line-height:30px;} .main_myinfo .mmc_state .c100 > span strong.percent {height:55px;font-size:45px;} .main_myinfo .mmc_state .c100 > span strong.percent::after { font-size:22px;} .main_myinfo .mmc_state .c100 > span small {font-size:1em;} .main_myinfo .mmc_inner {width:calc(100% - 190px);} .item_list .item .con_txt ul {gap:0px;margin:15px 0px;} .item_list .item .con_txt li {padding-left:60px;} .item_list .item .con_txt li span {width:60px;} .gallery_list {width:calc(100% + 20px); margin-right:-20px; } .gallery_list .item {width:calc((100% - 60px) / 3); margin-right:20px;} .gallery_list .item .con_txt {padding:20px;} .gallery_list .item .con_txt h3 { font-size:18px;} .webzine_list .item .con_img {width:45%;} .webzine_list .item .con_txt { width:calc(55% - 20px);} .webzine_list .item .con_txt h3 { font-size:17px;} .course_toparea .allcategory {display:none;} .course_list .item {padding:30px 0px; gap:40px;} .course_list .item .con_img {width:35%;} .course_list .item .con_txt { width:calc(65% - 230px);} .course_view .item {gap:30px;} .course_view_tab ul {gap:20px; padding:0px 20px;} .course_view_tab li a {font-size:18px; line-height:50px;} .course_view_tab li a.active:before {height:3px;} .cv_lecture li {padding:25px 0px; min-height:110px;gap:20px; } .cvl_icon {width:60px; height:60px; left:0px;} .cvl_title {padding-left:80px;} .cvl_btn {flex-wrap:wrap; gap:5px 15px;} .cvl_btn span { font-size:15px; min-width:60px;} .exam_toparea {padding:30px 0px;} .exam_toparea .cvl_icon { width:60px; height:60px;} .exam_toparea .cvl_title h3 {font-size:20px;} .exam_top {padding:20px 40px;} .exam_top dt {width:100px;} .exam_top dd {width: calc(100% - 130px);} .exam_body {padding:20px 40px;} .exam_list .question h2 {font-size:18px;} .event_list {gap:20px;} .event_list .item {width:calc((100% - 40px) / 3);} .event_list .item .con_txt {padding:20px;} .event_list .item .con_txt h3 { font-size:18px;} .event_list .item .con_txt ul {margin-top:15px;} } @media all and (max-width:980px) { .main_toparea {flex-wrap:wrap;} .main_myinfo {width:100%;} .main_ban {width:100%;} .main_ban#main_ban {display:none;} .main_ban#mobile_ban {display:block;} .main_ban {border-radius:10px;} .main_ban ul {border-radius:10px;} .main_ban li img {aspect-ratio: 10 / 4 !important;} .main_bottom {flex-wrap:wrap; gap:20px; } .main_bottom > div.main_board {width:calc(50% - 10px);} .main_bottom > div.main_cs {width:100%; height:auto;} .item_list .item .con_txt h3 {font-size:18px;} /* 게시판 관련 */ .board_tab li a {min-width:50px; padding:0px 15px;font-size:16px; line-height:50px;} .board_tab li a.active:before {top:-1px;height:3px;} .board_list colgroup, .board_list thead {display:none;} .board_list tbody tr {display:flex; flex-wrap:wrap; gap:3px 15px; padding:15px 5px; border-bottom:1px #ddd solid;} .board_list td {width:auto; border:none; padding:0px; font-size:14px;height: 20px; line-height: 20px;} .board_list td a {height: 20px; line-height: 20px;} .board_list td#no {display:none;} .board_list td#subject {width:100%;} .board_list td#file .icon_data {width:18px;height:18px;} .board_list td#subject a {font-size:16px; font-weight:600; color:#000;} .board_list td span.new {font-size:11px;padding: 0px 7px;line-height:17px; height:16px;} .board_list td::before {content:''; position:absolute; right:-8px; top:50%;transform:translateY(-50%); width:1px; height:12px; background:#d0d0d0;} .board_list td#file, .board_list td#cate::before, .board_list td#subject::before, .board_list td:last-child::before {display:none;} .board_list td#cate {color:var(--main);} span.debate, span.debate img { width:20px !important; height:20px !important; line-height:20px !important; border-radius:3px;} .board_list td span.debate { float:left; } .board_list tr.notice td#no {background-size:20px !important;} .board_list td#reply {display:flex; width:auto;} .board_list td#reply small {width:auto; display:inline-block; margin:0px 5px; } .board_btn .button_course {width:100px;} .faq_tab { margin:15px -15px 15px -15px; width:calc(100% + 30px); overflow-x:auto; -webkit-overflow-scrolling: touch !important; -webkit-scrollbar-width: none !important; scrollbar-width: none !important; } .faq_tab::-webkit-scrollbar { width:0px;} .faq_tab li a {padding:10px 15px;font-size:15px; line-height:24px;} .faq_cont {font-size:15px;} .faq_cont dl {overflow:hidden;border-bottom:1px solid #ddd;} .faq_cont dt {padding:15px 30px 15px 0px;} .faq_cont dt:before {width:20px; height:20px;top:15px;} .faq_cont dd {position:relative; padding:20px;} .my_tab ul {flex-wrap:nowrap; border-top:1px #ddd solid; border-radius:8px 8px 0px 0px;} .my_tab li:first-child a {border-left:1px #ddd solid; } .my_tab li {width:auto;min-width:50px;} .my_tab li a {border-radius:8px 8px 0px 0px; padding:0px 20px;font-size:16px; line-height:50px; border-right:1px #ddd solid; } .mycourse_list .item { gap:20px;width:100%; } .mycourse_list .item .con_img {width:40%;} .mycourse_list .item .con_txt {width:calc(60% - 20px);} .mycourse_list .item .con_txt h3 { font-size:18px;} .mycerti_header{display:none;} .mycerti_list {gap:20px;} .mycerti_list .item { gap:10px; flex-wrap:wrap; padding:0px 170px 20px 170px; } .mycerti_list .item .con_img {position:absolute; left:0px; top:0px;width:150px;} .mycerti_list .item .con_txt { width:100%;} .mycerti_list .item .con_txt h3 {font-size:18px;} .mycerti_list .item .con_date { width:100%;} .mycerti_list .item .con_date ul {justify-content:flex-start;} .mycerti_list .item .con_date li:first-child {text-align:left;} .mycerti_list .item .con_btn {position:absolute; right:0px;} } @media all and (max-width:680px) { .mobile_title {position:relative; display:flex;text-align:center; padding:20px 15px;border-bottom:1px var(--border) solid; } .mobile_title h2 {width:320px; display:inline-block; line-height:1; position:relative;font-size:18px; font-weight:600; color:#000; margin:0px auto;} .mobile_title .back {position:absolute; left:15px; top:50%; transform:translateY(-50%); font-size:0px; width:20px;height:20px;} .main_title {font-size:20px;margin-bottom:20px; margin-right:0px; } .main_title h2 {gap:10px; width:80%; font-size:20px;font-weight:bold; } .main_title span.sub_txt {font-size:1rem;} .main_more {font-size:1rem;} .main_guide {position:static;} .layer { left:10%;top:30px; width:80%;max-width:320px; padding:20px;} .main_list .slick-prev, .main_list .slick-next, .arrow_left, .arrow_right {display:none !important;} .main_myinfo {border-radius:10px;} .main_myinfo .main_myinfo_title {font-size:16px;line-height:25px;padding:10px 25px; height:45px;} .main_myinfo .main_myinfo_title h2 {padding-left:11px;} .main_myinfo .main_myinfo_title h2:before { height:14px;width:3px;} .main_myinfo .main_myinfo_cont {height:auto;border-radius:10px;} .main_myinfo .mmc_title .mmc_icon {width:50px; height: 50px;} .main_myinfo .mmc_title h2 {width:100%;font-size:18px; line-height:1.4;} .main_myinfo .mmc_btn {margin-top:10px; } .main_myinfo .mmc_btn .mmc_btn_login {min-width:100px;padding:0px 20px;font-size:15px;line-height:35px;} /* 로그인 전 */ .main_myinfo .mmc_bflogin {padding:20px;} .main_myinfo .mmc_bflogin .mmc_title {gap:15px;} .main_myinfo .mmc_bflogin .mmc_title h2 {width:calc(100% - 60px);font-size:16px;} /* 로그인 후 */ .main_myinfo .mmc_atlogin {} .main_myinfo .mmc_atlogin .item {flex-wrap:wrap; gap:20px; padding:25px 30px;} .main_myinfo .mmc_atlogin .slick-prev, .main_myinfo .mmc_atlogin .slick-next {width:45px; height:35px; background-size:20px !important} .main_myinfo .mmc_atlogin .slick-prev {left:-22px;} .main_myinfo .mmc_atlogin .slick-next {right:-22px;} .main_myinfo .mmc_state { width:100%;} .main_myinfo .mmc_state .c100 { font-size:130px;} .main_myinfo .mmc_state .c100 > span {padding:30px 25px; font-size:13px;} .main_myinfo .mmc_state .c100 > span strong {height:40px;font-size:22px;line-height:22px;} .main_myinfo .mmc_state .c100 > span strong.percent {height:40px;font-size:32px;} .main_myinfo .mmc_state .c100 > span strong.percent::after { font-size:18px;} .main_myinfo .mmc_state .c100 > span small {font-size:15px; padding-top:8px;} .main_myinfo .mmc_inner {width:100%;} .main_myinfo .mmc_inner .category {justify-content:center;} .main_myinfo .mmc_inner .mmc_title h2 {text-align:center; line-height:1.2;} .item_list .item .con_img i.wish {width:15px; height:15px;} .item_list .item .con_txt h3 { font-size:17px; font-weight:bold; } .item_list .item .con_txt ul {gap:0px ;margin:15px 0px;} .item_list .item .con_txt li {padding-left:50px; font-size:14px;} .item_list .item .con_txt li span {width:50px;} .item_list .item .con_txt .hash span {font-size:13px;} .gallery_list {width:190%; margin-right:0px; } .gallery_list .item {width:calc((100% - 30px) / 2); margin-right:15px;} .gallery_list .item .con_txt {padding:20px;} .webzine_list .item {width:100%; padding:15px;gap:15px;} .webzine_list .item .con_img {width:40%;} .webzine_list .item .con_txt { width:calc(60% - 15px);} .webzine_list .item .con_txt h3 { font-size:16px } .webzine_list .item .con_txt ul { margin:15px 0px;} .main_bottom > div {width:100%; height:auto;} .main_bottom > div h4 {font-size:18px; font-weight:bold; margin-bottom:13px;} .main_bottom > div.main_board {width:100%;} .main_board h4 { padding:3px 10px 3px 0px;} .main_board h4:before {width:5px; height: 5px} .main_board {padding:20px;} .main_board .mboard_more {width:30px; height:30px;} .main_board li a {line-height:20px;} .main_cs h4 {margin-top:15px; margin-bottom:10px !important;} .mb_list {gap:7px;} .mb_list li a {font-size:1rem; padding-left:10px;} .mb_list li a:before {left:0px;} .mb_faq li a {font-size:1rem;padding-left:28px;} .mb_faq li a:before {width:20px;height:20px;line-height:20px; font-size:1rem;} .main_cs h4 a {font-size: 13px; line-height:22px;} .main_cs_cont {gap:6px; padding:20px 15px; height:auto;} .main_cs_cont ul {margin-top:10px;} .main_cs_cont li a {font-size:16px; line-height:40px;} .main_cs_cont .mcs_tel {font-size:30px; line-height:30px;} .main_cs_cont .mcs_mail {font-size:18px; line-height:1.2;} /* 버튼 */ .button {min-width:100px; padding:0px 15px;font-size:16px;line-height:40px; } .button_sm { font-size:15px;line-height:30px; padding:0px 15px;} .button_round {border-radius:50px;} .button_course {font-size:15px;line-height:34px; } .button_board {max-width:70px;font-size:15px;line-height:30px; padding:0px 15px;} /* 페이징 */ .page_bar {margin:20px 0px;} .page_box div { font-size:13px; height:25px; width:25px; line-height:25px; background-size:12px !important; } .page_box ul {gap:10px; margin: 0px 10px;} .page_box ul li div.page_number_btn.on:before {bottom:1px; height:1px;} /* 댓글 */ .comment .util_profile { width:30px; height:30px;} .comment_input_wrap { margin-bottom:20px;} .comment_input {gap:5px; } .comment_input textarea {width:calc(100% - 75px);height:32px; font-size:14px;padding:7px 10px; max-height: 96px;} .cmt_btn_submit {line-height:30px;font-size:13px; padding:0px 8px; } .comment_box {padding:12px 0px;} .comment_writer_area {gap:8px;} .comment_writer_area .comment_user {font-size:15px;} .comment_writer_area .comment_date {font-size:13px;} .comment_icon_area { gap:8px; } .comment_icon { width:18px; height:18px;} .comment_wish > .comment_icon {width:16px; height:16px; } .comment_body { padding:0px 0px 0px 38px;} .reply_box {padding:15px 0px 0px 0px;} .reply_box::before {display:none;} /* 서브페이지 */ .sub_title {font-size:20px;margin-bottom:15px;} /* 검색페이지 */ .wrap_search .sub_title {display:none;} .wrap_search .compd {padding:15px 0px;} .search_box_wrap { padding:0px; border-radius:0px;background:#fff;} .search_box {height:40px;padding:5px 10px; background:#f1f4f7;} .search_box input.searchInput {width:calc(100% - 30px); height:30px; line-height:30px;background:#f1f4f7;} .search_box .searchBtn {right:15px; width:20px;height:20px;} .search_result {padding:20px 0px;font-size:16px;} /* 과정목록 */ .category { gap:15px; font-size:1rem;} .category span, .category b { line-height:18px;} .category span:before {right:-15px;width:15px;height:18px;} .course_toparea {padding:25px 0px;} .course_toparea .basic_inner { width:100% !important; } .course_toparea .category {margin:0px 15px 5px 15px;} .course_toparea .sub_title {margin:0px 15px 10px 15px;} .category_list {width:100%; overflow-y:hidden; overflow-x:auto;-webkit-overflow-scrolling: touch; scrollbar-width: none; height:35px; } .category_list::-webkit-scrollbar { width:0px;} .category_list ul {width:auto;flex-wrap:nowrap; gap:5px; margin-left:15px;} .category_list li a {font-size:1rem;line-height:32px; white-space:nowrap;} .course_content {padding:20px 0; } .control_util { margin-bottom:0px; gap:10px; font-size:13px; } .control_util > div { width:100%;} .control_util .select_box {gap:0px;} .control_util .select_box span {display:none;} .control_util .search {gap:0px;border: 1px var(--border) solid; padding:0px ; border-radius: 5px;} .control_util .search input.input_search { width:calc(100% - 34px);height:34px; border:none; padding:5px 10px; border-radius:0px; background:none;} .control_util .search .btn_search {width:34px; height:34px; font-size:0px; color:#000; border:none;background: url('/images/search_icon.png') 50% 50% no-repeat; background-size:20px !important;padding:0px ;border-radius:0px;} .control_util_total {width:calc(100% + 30px); padding:15px; margin:0px -15px; background:#f1f4f7;} .control_util.control_util_my {margin:-12px 0px 20px;} .control_util.control_util_my select {width:100% !important;} .course_list {border:none;} .course_list .item {display:inline-block; padding:25px 0px; gap:20px;} .course_list .item:hover {background:#fff;} .course_list .item .con_img { position:absolute; right:0px; bottom:90px; width:180px; border-radius:6px;} .course_list .item .con_img img { border-radius:6px;} .course_list .item .con_txt { width:100%;} .course_list .item .con_txt .category {position:absolute; left:0px; top:25px;} .course_list .item .con_txt h3 {font-size:17px;line-height:1.2; margin-top:25px; margin-bottom:5px;} .course_list .item .con_txt ul {width:calc(100% - 200px);margin: 10px 0px;} .course_list .item .con_txt .hash {width:calc(100% - 200px);margin:0px;} .course_list .item .con_btn {width:100%;flex-wrap:nowrap; gap:10px; margin-top:20px;} .course_list .item .con_btn a {font-size:15px;line-height:34px; } /* 과정 상세 */ .course_view_wrap {padding-bottom:150px;} .course_view_wrap #header_wrap, .course_view_wrap #header, .course_view_wrap .menuMb {display:none !important;} .course_view_wrap .basic_inner { width:100%;padding:0px;} .course_view_toparea {padding:0px;} .course_view_toparea .category, .course_view_toparea .sub_title {display:none;} .course_view .item {display:flex; flex-wrap:wrap; gap:0px; align-items:center;} .course_view .item .con_img {width:100%; border-radius:0px;} .course_view .item .con_img img { border-radius:0px;} .course_view .item .con_txt {width:100%; gap:5px; padding:20px 15px;} .course_view .item .con_txt .category {display:flex; margin:0px;} .course_view .item .con_txt h3 { display:block;font-size:18px;line-height:1.2; font-weight:600; color:#000; font-weight:bold; } .course_view .item .con_txt ul {gap:3px ;margin:15px 0px;} .course_view .item .con_txt li { font-size:15px;} .course_view .item .con_right {position:fixed; left:0px; bottom:0px; width:100%; padding:15px 15px; background:#ecf0f3; border-radius:10px 10px 0px 0px; z-index:100; border-top:1px #ccc solid; box-shadow: 0 -10px 12px rgb(0 0 0 / 5%);} .con_right_arrow {cursor:pointer; left:50%;transform:translateX(-50%); width:60px;height:20px; background-color:#ecf0f3; border-radius:10px 10px 0px 0px; border:1px #ccc solid;border-bottom:none; z-index:102; font-size:0px;} .con_right_arrow:before {content:''; position:absolute; left:20px;top:0px; width:20px;height:20px;background-position:center; background-repeat:no-repeat; background-size:18px !important; opacity:0.5;} .con_right_arrow.con_right_arrow_down {display:block;position:absolute; top:-19px;} .con_right_arrow.con_right_arrow_down:before { background-image:url('/images/arrow_bottom2.png');} .con_right_arrow.con_right_arrow_up {display:none;position:fixed; bottom:-1px;} .con_right_arrow.con_right_arrow_up:before { background-image:url('/images/arrow_top2.png');} .course_view .item .con_btn {width:100%;flex-wrap:nowrap; } .course_view .item .con_btn a {font-size:15px;line-height:38px; } .con_state {text-align:left;} .con_state:before {display:none;} .con_state_tab {display:inline-block;width:auto; background:#fff;margin:0px auto 10px 0px;} .con_state_tab li {float:left;width:auto;padding:0px 14px;font-size:14px;line-height:26px;} .con_state_btn {position:absolute; right:15px; top:15px;} .con_state_btn .button.button_medium { min-width:50px !important;font-size: 14px; line-height:24px;padding: 0px 10px;} .con_state_con {margin:0px;} .con_state_con .c100 {font-size:45px; width:100%;border-radius:0px;background:none;margin:0px; } .con_state_con .c100 > span {padding:0px; text-align:left; font-size:14px; color:#000;} .con_state_con .c100:after {display:none;} .con_state_con .c100 > span strong {border:none; margin:8px 0px 0px; padding:0px; background:#fff; border-radius:4px; height:22px; line-height:22px; font-size:13px; text-align:center;font-weight:500;} .con_state_con .c100 > span strong.percent {position:relative;height:22px;font-size:13px;line-height:22px;font-weight:500; background:#fff; border-radius:4px; overflow:hidden; } .con_state_con .c100 > span strong.percent::after { display:none !important;} .con_state_con .c100 > span strong.percent em {position:absolute; left:0;top:0;display:inline-block;background:#fe7563; height:22px; color:#fff;text-align:center;font-style:normal; } .con_state_con .c100 > span strong.percent em::after { content:'%';font-size:13px;font-weight:500; color:#fff;} .con_state_con .c100 > span small {display:none !important;} .con_state_con .c100 .slice, .con_state_con .c100 .bar {display:none !important;} .con_state_con .c100 > span strong.percent.p1{width:1%;} .course_view_tab {overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch !important; -webkit-scrollbar-width: none !important; scrollbar-width: none !important; height:52px; } .course_view_tab::-webkit-scrollbar { width:0px;} .course_view_tab ul {width: auto; flex-wrap: nowrap; gap:0px; padding:0px 0px;} .course_view_tab li a {font-size:16px; line-height:50px;padding:0px 20px;} .course_view_tab li a.active:before {height:2px;} .course_view_content { padding:0px 0px;} .tabcontent {margin-top:20px;} .tabcontent#cv_home > .popup_wrap#caution {right:15px;} .cv_title {font-size:18px; padding:0px 15px; margin-bottom:15px;} .cv_cont {font-size:1rem;line-height:22px;} .cv_cont .cv_cont_ul li:before {top:9px;} .cv_btn { gap:5px; padding:0px 15px;} .cv_btn .button_course {max-width:150px;} .cv_note {gap:15px; right:15px;} .cv_note a {font-size:1rem;} .cv_board { padding:0px 15px;} /* 강의목차 */ .cv_lecture {gap:0px;} .cv_lecture li{flex-wrap:wrap; padding:20px 15px;min-height:110px; gap:15px; border-color:#ccc;} .cv_label { padding:0px 10px;line-height:20px;font-size:13px;} .cvl_icon {width:50px; height:50px; left:15px; top:20px;transform: translateY(0%);} .cvl_title {width:100%; padding-left:70px; gap:5px;} .cvl_title h3 {font-size:16px;} .cvl_title p {font-size:1rem;} .cvl_btn { gap:5px 15px; justify-content: center; width:100%; padding-top:15px; border-top:1px #eee solid; /*width:calc(100% + 30px); margin:0px -15px -20px -15px;background:#f6f6f6; padding:15px 15px 20px 15px; */ } .cvl_btn span {width:auto;font-size:1rem; text-align:center;} .cvl_btn span.span_btn {width:100%;} .button_cv {width:100% !important;} /* 학습정보 */ .cv_info_inner { padding:25px 15px;} .cv_info_inner .cv_title {margin-bottom:10px; padding:0px;} .cv_info_nodata p {padding:100px; background-size:auto 80px !important; } /* 만족도 조사 & 평가 */ .cvw_exam {padding-bottom:40px;} .cvw_exam #footer{display:none;} .exam_toparea {padding:15px 20px; border-bottom:1px var(--border2) solid;} .exam_toparea .cvl_icon { width:50px; height:50px; left:0px;top:0%; transform: translateY(0%); } .exam_toparea .cvl_title {width:100%;} .exam_toparea .cvl_title h3 {font-size:18px;} .exam_toparea .cvl_index {display:none;} .exam_select {width:100%; gap:0px; padding:0px; position:static; bottom:auto; right:auto; transform: translateX(0%); border-radius:0px; border:none;box-shadow:none;} .exam_select_title {padding:10px 20px;} .exam_select_title .es_num {position:relative;left:0;top:0px;transform: translateY(0%);} .exam_select .exam_select_title h2, .exam_select .exam_select_title .es_close, .exam_select .exam_select_cont, .exam_select .exam_select_btn {display:none;} .exam_select_time {width:100%;padding:15px 20px; border-radius:0px;line-height:25px; font-size:25px;} .exam_select_time h2 { background-size:25px !important; padding-left:35px;} .exam_select_btn.es_mobile { display:flex; padding:0px 20px; } .exam_select_mobile_title {display:block; padding:10px 20px;border-bottom:1px var(--border) solid; background:#f7f7f7;} .exam_select_mobile_title b {color:#000;} .exam_content {padding:0px;} .exam_top {padding:15px 20px; border-radius:0px; border:none; background:#f7f7f7; margin:0px;} .exam_top dl {font-size:15px; } .exam_top dt {width:60px;} .exam_top dd {width: calc(100% - 70px);} .exam_body {padding:30px 15px;border-radius:0px; gap:30px;} .exam_list .question {padding-left:10px;} .exam_list .question h2 {font-size:16px;} .exam_list .answer {padding-left:20px;} .exam_list .answer ul {gap:10px;} .exam_list:before {left:-5px; top:-10px; width:40px; height:40px; background-size:cover !important; } .solution_box { border-radius:10px;padding:15px 20px;} .solution_box .result {font-size:17px;} .solution_box .solution {font-size:14px;} /* 게시판 관련 */ .board_tab {margin:0px 0px 15px 0px;} .board_tab:before { left:-15px; width:calc(100% + 30px);} .board_tab ul {width:100%;} .board_tab li {width:100%;} .board_tab li a {padding:0px 10px;font-size:15px; line-height:36px;} .board_tab li a.active:before {top:-1px;height:3px;} .board_cs {position:relative; max-width:100%; margin-bottom:15px; overflow:hidden;} .board_cs h2 {width:110px;font-size:16px;} .board_cs .board_cs_inner {width:calc(100% - 110px); padding:10px 15px;} .board_cs .board_cs_inner b {font-size:18px;} .board_cs .board_cs_inner p {font-size:13px;} .control_board {flex-wrap:wrap;} .control_board .control_total {width:100%; position:relative; top:0px; transform: translateY(0%); font-size:14px;} .control_board .control_total .button_board {width:100%;max-width:100%;} .control_board .select_box {display:none;} .control_board .search {max-width:100%;} .control_board .search input.input_search { width:calc(100% - 34px);height:34px;text-indent:0px} .control_board .search .btn_search {width:34px; height:34px;} .board_view {} .board_subject{font-size:18px; line-height:22px;} .board_subject span {margin:1px 0px;} .board_detail li{font-size:14px;padding:0 20px 0 0;} .board_detail li:after{right:10px;} .board_detail li span { display:none; font-size:15px; } .board_detail ul.board_detail_icon {display:none;} .board_view_content {font-size:15px;} .board_view_content dl {padding:20px 0px;} .board_view_content dt {display:none;} .board_view_content dd {width:100%;} .board_view_content dl.bv_file {padding:10px 0px !important;} .bv_vote_wrap {padding:15px;} .bv_vote_wrap ul {gap:10px;} .vote_cont {width:calc( 100% - 30px );gap:0px; } .vote_bar .slice {height:10px;} .bv_vote_btn {flex-wrap:wrap; margin:30px 0px 10px 0px;} .board_comment .cv_title {padding:0px; margin-bottom:10px;} .popup_wrap.board_write {width:100%; max-height:100vh; border-radius:0px; border:none; top: 0%;left: 0%; transform: translate(0%, 0%); overflow-y:auto;} .popup_wrap.board_write.popup_wrap_back::before {display:none;} .popup_wrap.board_write .popup_cont {max-height:none;} .board_write {;font-size:15px;} .board_write dl {padding:10px 0px;flex-wrap:wrap;} .board_write dt {width:100%;} .board_write dd {width:100%; flex-wrap:wrap;} .board_write dl.bw_file dd input.input_write {width:calc(100% - 70px) !important;} .board_write dl dd .txt_byte {font-size:11px;} .button_file {min-width:50px;padding: 0px 5px; font-size: 13px; line-height:26px;} .page_bar .board_btn { position:relative; right:auto;left:0px; top:0px; margin-top:20px;} .page_bar .board_btn .button_board, .board_btn .button_course {width:100%; max-width:100%;} .event_list {gap:10px;} .event_list .item {width:calc((100% - 10px) / 2);} .event_list .item .con_txt {padding:12px 15px;} .event_list .item .con_txt h3 { font-size:16px; font-weight:bold; } .event_list .item .con_txt ul {flex-wrap:wrap; margin:10px 0px 0px 0px;} .event_list .item .con_txt li {width:100%;} .event_list .item.end .con_img:after {font-size:16px;} /* 과정 내 게시판 상세 들여쓰기 */ .cv_board .board_view .board_view_title, .cv_board .board_view .board_view_content dt, .cv_board .board_view .board_view_content dd {padding-left:3px;} .cv_board .board_view .board_view_content dd.full {padding:0px 3px;} /* 마이 학습 */ .my_tab {margin-bottom:15px; overflow-x:auto; -webkit-overflow-scrolling: touch !important; -webkit-scrollbar-width: none !important; scrollbar-width: none !important; } .my_tab ul {width:100%; border-top:1px #ddd solid; border-radius:5px 5px 0px 0px;} .my_tab li {width:100%;} .my_tab li a {display:flex; justify-content:center; align-items:center; height:100%;white-space: normal;border-radius:5px 5px 0px 0px; padding:12px 5px;font-size:13px; line-height:1.2;} .my_tab li a.active:before { width:5px; left:-5px;} .my_category_list {width:calc(100% + 30px); margin:0px -15px; padding:0px 15px;overflow-y:hidden; overflow-x:auto;-webkit-overflow-scrolling: touch !important; -webkit-scrollbar-width: none !important; scrollbar-width: none !important; height:34px; } .my_category_list::-webkit-scrollbar { width:0px;} .my_category_list ul {width:auto;flex-wrap:nowrap; gap:5px;} .my_category_list li a {font-size:14px;padding:0px 10px; line-height:34px; white-space:nowrap;} .my_category_list li:last-child {margin-right:15px; } .my_notice_box {padding:15px; margin-bottom:15px;} .control_my {padding:0px; border:none; border-radius:0px; gap:10px;flex-wrap:wrap;margin:20px 0px; } .control_my > div {gap:0px; } .control_my .control_my1 {} .control_my .control_my2 {justify-content:flex-end;} .control_my .ing {gap:13px;} .control_my .ing li a { padding-left:8px;} .control_my .ing li a:before {width:3px; height:3px;} .control_my .sort {position:absolute; top:0px; right:0px;} .control_my .sort li a {font-size:14px;} .control_my .search { max-width:100%;} .mycourse_list .item {padding:0px 0px 70px 0px; gap:15px; border-radius:0px; border:none; border-bottom:1px var(--border) solid;} .mycourse_list .item .con_img { width:140px;} .mycourse_list .item .con_txt { width:calc(100% - 155px);} .mycourse_list .item .con_txt h3 { font-size:17px;margin:5px 0px 10px 0px !important; } .mycourse_list .item .con_btn {border-top:none; padding:0px; bottom:20px;} .mycourse_list .item .con_btn .button_course {max-width:100%;} .mycerti_list {gap:20px;} .mycerti_list .item { gap:10px; flex-wrap:wrap; padding:0px 0px 70px 155px; } .mycerti_list .item .con_img {position:absolute; left:0px; top:0px; width:140px;} .mycerti_list .item .con_txt h3 {margin-top:5px;} .mycerti_list .item .con_btn {position:absolute; width:100%; right:0px; bottom:20px;} .tooltip { bottom:30px;} .tooltip_wish {gap:30px; padding:10px;border-radius:10px; font-size:15px;} .btn_tooltip {padding:0px 12px; font-size:13px; line-height:28px;} /* 회원관련 */ .member_wrap { min-height:calc(100vh - 135px); } .member_back {position:relative;left:0px; top:0px; padding:20px 20px 0px 20px;} .member_back .btn_member_back {line-height:30px;font-size:14px;padding:0px 12px 0px 26px;background-position:12px 50% !important; background-size:14px !important;} .login_wrap {height:calc(100vh - 135px);} .login_wrap_bg {padding:20px;} .login_wrap .login_box {padding:30px; top:30px; left:0%; transform:translate(0%,0%);} .login_wrap_bg .login_box {top:50%; left:50%; transform:translate(-50%, -50%);} .login_inner h1 .img_logo {max-height:30px;} .login_inner h2 {font-size:20px; margin:15px 0 30px;} .login_form input{height:40px;font-size:16px;} .login_form .input_login {padding:0px;} .btn_login {font-size:18px;height:50px; line-height:50px;margin-top:25px;} .login_ul {margin:30px 0 0; flex-wrap:nowrap; } .login_ul li {font-size:15px;} .login_ul li:before {content:''; position:absolute; right:0px;top:50%;transform:translateY(-50%);width:1px;height:16px;background:#ccc;} .login_ul li:last-child:before {display:none;} .login_ul li span {display:none; } .login_ul li a {position:relative;width:100%;text-align:center; color:#666; text-decoration:none;} .login_ul li a:hover {color:#000;text-decoration:underline;} .member_wrap {display:block;} .member_box {padding:0px 20px; margin:40px auto;} .member_process {gap:20px; margin-bottom:40px; } .member_process dl { gap:10px; width:90px;} .member_process dl:after {width:20px; height:20px;right:-10px; top:10px;} .member_process dl dt {width:45px;height:45px;} .member_title {font-size:18px; flex-wrap:wrap; gap:5px 10px;} .member_title .sub_txt {white-space:nowrap;font-size:14px;} .member_agree dl {padding:10px 10px 10px 48px; box-sizing:border-box;} .member_agree dl dt {width:20px;height:20px;left:20px;} .member_agree dl dd a {font-size:15px;} .member_form {padding:10px 0px 0px; border:none; border-top:1px #ddd solid; } .member_form dl {flex-wrap:wrap; gap:10px; padding:15px 0px; border:none;} .member_form dl:last-child, .member_form dl.last {padding-bottom:0px;} .member_form dt { width:100%; line-height:1.2; font-size:15px;} .member_form dd { width:100%; gap:5px 5px;} .member_form dd span {font-size:14px;} .member_form dd span.check {padding-left:24px;} .member_form dd span.check:before {top:2px;width:16px;height:16px;} .member_form dd > div {gap:5px;} .input_member {max-width:100%;} .member_form dd .mobile {width:100% !important;} .w300 {width:100%;} .member_keyword {padding:20px 0px 0px; border:none; border-top:1px #ddd solid;} .member_keyword_title {flex-wrap:wrap; gap:10px; margin-bottom:20px;} .member_keyword_title h2 {width:100%;font-size:16px;} .member_keyword_title dl {width:100%; gap:0px;} .keyword_list {gap:6px;} .keyword_list li {font-size:14px;line-height:35px;border-radius:5px;} .keyword_list li a {padding:0px 10px; border-radius:4px;} .member_success {width:100%;border:1px #ddd solid; padding:30px; min-height:200px;font-size:16px;} .member_tab { margin-bottom:40px; } .member_tab li a {padding:10px; line-height:25px;font-size:16px;} .member_find_result {font-size:24px;} .member_btn { margin-top:30px;} .member_btn2 { padding-bottom:47px;} .button_member {padding:0px 20px; font-size:15px;line-height:40px; } .button_member.out {right:auto; left:50%; top:auto; bottom:0px;transform:translateX(-50%); min-width:45%; font-size:14px; line-height:35px;} .privacy h3 {font-size:16px;} .popup_wrap.change_pw {width:100%;height:100vh; max-height:100vh; border-radius:0px; border:none; top: 0%;left: 0%; transform: translate(0%, 0%); overflow-y:auto;} .popup_wrap.change_pw.popup_wrap_back::before {display:none;} .popup_wrap.change_pw .popup_cont {max-height:none;} /* 주소검색 팝업 */ .popup_wrap.popup_addr {width:100%;height:100vh; max-height:100vh; border-radius:0px; border:none; top: 0%;left: 0%; transform: translate(0%, 0%); overflow-y:auto;} .popup_wrap.popup_addr.popup_wrap_back::before {display:none;} .popup_wrap.popup_addr .popup_cont {max-height:none;} .popup_wrap.popup_certificate {width:100%;height:100vh; max-height:100vh; border-radius:0px; border:none; top: 0%;left: 0%; transform: translate(0%, 0%); overflow-y:auto;} } @media all and (max-width:480px) { .main_title h2 { gap:2px 15px; flex-wrap:wrap;} .main_title span.sub_txt {font-size:13px;} .gallery_list .item .con_txt h3 { font-size:15px;} .webzine_list .item {padding-bottom:55px;} .webzine_list .item .con_img i.wish {right:6px; bottom: 6px;} .webzine_list .item .con_txt h3 { font-size:1rem;} .webzine_list .item .con_txt ul {margin-bottom:0px;} .webzine_list .item .con_txt li { font-size:13px;} .webzine_list .item .con_txt .hash {position:absolute; left:15px; bottom:15px; width:100%; margin:0px;} .course_list .item .con_img { width:130px;} .course_list .item .con_txt ul {width:calc(100% - 140px);} .course_list .item .con_txt .hash {width:calc(100% - 140px);} } @media all and (max-width:360px) { .main_myinfo .mmc_title .mmc_icon {width:40px; height: 40px;} .main_myinfo .mmc_title h2 { width:calc(100% - 50px);font-size:15px;} .main_myinfo .mmc_title h2 br {display:none;} .hash {height:22px;} .hash span {font-size:13px; line-height:22px; padding:0px 5px;} .board_cs h2 {width:90px;font-size:15px;} .board_cs .board_cs_inner {width:calc(100% - 90px); padding: 10px;} .board_cs .board_cs_inner b {font-size:17px;} .board_cs .board_cs_inner p {font-size:13px;} .my_tab li a { font-size:12px;} } /* 학습창 */ /* .study_wrap {position:fixed;left:0px; top:0px;width:100vw; height:100vh; background:rgba(0,0,0,0.75); z-index: 10000;} .study_inner {position:fixed; left:50%; top:20px; transform:translateX(-50%); width:auto; max-width:calc(100vw - 40px); height:auto; display:flex; flex-wrap:nowrap;background: #fff; border-radius:20px;max-height:calc(100vh - 40px); overflow:hidden;} .study_cont_wrap {position:relative;width:auto; max-width:calc(100vw - 590px); padding:40px 30px; overflow:auto;} */ .study_body {background: #757575;} .study_wrap {position:relative;width:100%; overflow:hidden;} .study_inner {position:relative;width:100%; display:flex; flex-wrap:nowrap;} .study_cont_wrap {position:relative;width:calc(100% - 550px); padding:0px; overflow:auto;} .study_list_wrap {position:relative;width:550px; border-left: 1px solid #ddd; background: #fff; min-height: 100vh; z-index: 999;} .study_title_wrap {width:100%; padding:10px 30px; display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; background:#fff; border-bottom:1px #ddd solid;} .study_title {width:calc(100% - 300px);} .study_title h2 {font-size:24px;color:#000; font-weight:600; margin-bottom:15px;} .study_title .study_time {display:flex; flex-wrap:nowrap; gap:20px;font-size:17px;color:#000;} .study_title .study_time span {position:relative;} .study_title .study_time span:before {content:''; position:absolute;right:-10px; top:50%; transform:translateY(-50%); width:1px;height:14px;background:#bebebe;} .study_title .study_time span:last-child:before {display:none;} .study_btn_mobile {display:none; } .study_btn {width:280px;display:flex; flex-wrap:nowrap; gap:10px; justify-content:flex-end; align-items:center;} a.st_btn {width:124px;height:40px;border-radius:4px; border:1px #bebebe solid; font-size:15px; color:#000; padding:0px 5px; display:flex;flex-wrap:nowrap; gap:6px; justify-content:center; align-items:center;flex-direction:row-reverse;} a.st_btn i { display:flex; text-align:center;width:16px;height:16px; opacity:0.6;} a.st_btn i img {width:100%; } a.st_btn:hover {background:#f1f5f8; } a.st_btn.btn_index {background:#333; border-color:#000; color:#fff;} a.st_btn.btn_index i {opacity:1; -webkit-filter:invert(100%) grayscale(100%) contrast(75%); filter:invert(100%) grayscale(100%) contrast(75%) brightness(100%); } .study_title_mobile {display:none;} .study_content {width:100%; padding:20px;} .study_video {width:1280px; height:720px; text-align:center; margin:20px auto;} .video_arrow {display:none;} .video {position:relative;width:100%; padding-bottom:56.25%; height:0px; background:#000; } .video video, .video iframe {position:absolute; left:0; top:0px;width:100% !important;height:100% !important;} .study_page {width:100%; text-align:center;} .study_page ul { width:100%; display:flex; lex-wrap:nowrap; gap:10px; justify-content:center;} .study_page li { font-size:15px; height:34px; width:34px; line-height:34px; color: #fff; background:#a1a1a1; border-radius:50%;text-align:center; } .study_page li a {display:block;font-size:15px; height:34px; width:34px; line-height:34px; color: #fff; border-radius:50%; } .study_page li.already {background: #333; } .study_page li.complete {background: #0020ff; } .study_page li.ing {background: #81a0eb; } .study_page li.now {background:coral; } .sl_button {display: block; width:25px; height:40px;border-radius: 10px 0 0 10px; border-right: 0; background: #3973ff url('/images/arrow_last2.png') no-repeat center; background-size:20px !important; position: absolute; top: 40px; left: -24px;} .study_list {width:100%;} .study_list_title {width:100%; height:80px; padding:20px 30px;display:flex;align-items:center;font-size:20px; color:#fff;background: #3973ff; font-weight:600; line-height:1.2;} .study_list ul {width:100%;display:flex; flex-wrap:wrap; max-height:calc(100vh - 120px); overflow-y:auto; } .study_list li {position:relative;width:100%; border-bottom:1px #ddd solid; padding:20px 30px; min-height:90px;background:#fff; display:flex; flex-wrap:nowrap; gap:15px; align-items:center; } .study_list li span {position:relative;font-size:15px; color:#fff; text-align:center;} .study_list li span.type {width:50px; height:50px; border-radius:50%;line-height:50px; background:#7f9dd0;} .study_list li span.type.course { background:#7f9dd0;} .study_list li span.type.evaluate { background:#ad9e4f;} .study_list li span.type.survey { background:#6cb073;} .study_list li span.state {position:absolute; right:30px;top:50%;transform:translateY(-50%); height:20px; border-radius:30px;line-height:20px;font-size:0px;} .study_list li span.state.complete {width:20px; background:#555 url('/images/check_icon.png') 50% 50% no-repeat; background-size:80% !important;} .study_list li span.state.ing {width:40px; background:#ec4822; padding-left:12px;text-align:left;} .study_list li span.state.ing:before {content:'LIVE'; font-size:10px; font-weight:500; color:#fff;} .study_list li span.state.ing:after {content:''; position:absolute; left:5px; top:50%; transform:translateY(-50%); width:4px; height:4px; border-radius:100%; background:#fff; } .study_list li h2 {width:calc(100% - 110px); color:#000;font-size:18px; line-height:1.4; font-weight:500; overflow-y:auto;} .study_list li.finish h2 {opacity:0.4;} .study_list li.view {background:#d8e0f0;} .study_wrap.close .study_inner {} .study_wrap.close .study_cont_wrap {width: calc(100% - 1px);} .study_wrap.close .study_list_wrap {width:0;} .study_wrap.close .sl_button { position: absolute; top: 40px; left: -25px; background-image:url('/images/arrow_first2.png');} .study_wrap.close a.btn_index {background:#fff; border-color:#bebebe; color:#000;} .study_wrap.close a.btn_index i {opacity:0.6;-webkit-filter:none; filter:none; } .study_wrap.close a.btn_index:hover {background:#f1f5f8;} @media all and (max-width:1400px) { .study_inner {width:100%;} .study_video {width:100%;max-width:1180px; height:auto;} } @media all and (max-width:1200px) { .study_body {} .study_inner {width:100%; height:100vw; margin:0px;flex-wrap:wrap;} .study_cont_wrap {width:100%;} .study_list_wrap {width:450px;position:fixed; right:0px; top:0px;} .study_title_wrap { padding:20px;} .study_title h2 {font-size:24px;} .study_title .study_time {font-size:16px;} .study_list_title {height:100px; padding:20px 20px;font-size:20px;} .study_list ul {max-height:calc(100vh - 100px);} .study_list li {padding:20px; min-height:70px;} .study_list li span.state {right:20px; } .sl_button {top:30px;} .study_wrap.close .sl_button {top:30px;} } @media all and (max-width:980px) { .study_wrap { height:100vh;} .study_inner {width:100%; margin:0px;flex-wrap:wrap;} .study_list_wrap {width:80%; max-width:380px;} .study_cont_wrap {} .study_content {display:flex;flex-wrap:wrap; align-content:center; align-items:center; gap:20px; padding:0px; /*height:calc(100vh - 80px);*/} .study_title_wrap {position:relative;flex-wrap:wrap; gap:0px;padding:15px 20px;} .study_title {order:1; width:100%; padding-right:55px; height:auto;} .study_title h2 {font-size:20px;margin-bottom:0px;} .study_title .study_time {font-size:14px; margin-top:5px;} .study_btn {display:none;} .study_btn_mobile {display:inline-block; width:auto;position:absolute; right:30px; top:50%; transform:translateY(-50%);} .study_btn_mobile a.st_btn { border:none; padding:0px; width:auto; height:20px; line-height:20px; gap:6px; font-size: 14px; opacity:0.7} .study_btn_mobile a.st_btn i {width:14px; height:14px;opacity:1;} .study_btn_mobile a.st_btn:hover {opacity:1;background:#fff;} .study_video {margin:0px;} .video_arrow {position:absolute;top:50%;transform:translateY(-50%);display:inline-block;width:30px;height:30px; border-radius:50%;background-size:80% !important; background-color:rgba(0,0,0,0.5) !important;font-size:0px;z-index:1000;} .video_arrow.prev { left:5px; background:url('/images/arrow_left.png') 50% 50% no-repeat;} .video_arrow.next {right:5px; background:url('/images/arrow_right.png') 50% 50% no-repeat;} .video_arrow:hover {background-color:rgba(0,0,0,0.9) !important;} .study_page {width:100%; text-align:center;} .study_page ul { width:100%; display:flex; lex-wrap:nowrap; gap:10px; justify-content:center;} .study_page li, .study_page li a {font-size:12px; height:24px; width:24px; line-height:24px; } .sl_button {width: 20px;height:36px; background-size:15px !important;top:22px;left: -20px !important;} .study_list_title {font-size:18px; height:80px;padding:10px 15px;} .study_list ul {max-height:calc(100vh - 80px);} .study_list li {gap:10px; padding:15px;} .study_list li h2 {width: calc(100% - 100px); font-size:15px;} .study_list li span.type {width:40px;height:40px;line-height:40px; font-size:12px;} .study_list li span.state {right:15px; } .study_wrap.close .sl_button {top:22px;} } @media all and (max-width:680px) { /* .study_title_mobile {width:100%;position:relative; display:flex;justify-content: space-between; height:60px;padding: 20px 15px;background:#fff; border-bottom: 1px var(--border) solid;} .study_title_mobile h2 { width:100%;font-size:18px;color:#000; font-weight:600;text-align:center;} .study_title_mobile a.st_btn {position:absolute; right:15px; top:20px; border:none; padding:0px; width:auto; height:20px; line-height:20px; gap:6px; font-size: 14px; opacity:0.7} .study_title_mobile a.st_btn i {width:14px; height:14px;opacity:1;} .study_title_mobile a.st_btn:hover {opacity:1;} */ }