/* Reset */ /*기존스타일 덮어쓰기 시작*/ *{margin:0;padding:0;box-sizing:border-box;font-family:'Pretendard', Pretendard, sans-serif} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {line-height:unset} #wrap{padding:0} #wrap > div{position:relative;z-index:0} html{line-height:1.4} body{color:#333;font-family:'Pretendard', Pretendard, sans-serif;font-weight:normal} /*기존스타일 덮어쓰기 끝*/ /*common*/ a {color: inherit; text-decoration: inherit;} li {list-style: none;} address, em, i {font-style: normal;} button {background: none; border: none;} img {vertical-align: middle;max-width:100%} /*font*/ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); @font-face { font-family: 'GMarketSans'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: 700; font-display: swap; } .enfont{font-family:'GMarketSans',sans-serif} :root{ --main-color:#009bff; --main-color-light:#f5fafe; --main-color-filter:invert(40%) sepia(100%) saturate(3000%) hue-rotate(185deg) brightness(90%) contrast(100%); --ico-color1:#009bff; --ico-color2:#8839f6; --ico-color3:#ff4f4f; --ico-color4:#ff49cd; --stext-color1:#00c9ff; --stext-color2:#32d484; --stext-color3:#8839f6; --stext-color4:#fdaf22; --stext-color5:#333; --btn-color1:#009bff; --btn-color2:#ef0074; --border-color:#ddd; --border-color-light:#eee; --border-radius:10px; --border-radius-small:5px; --border-radius-large:1.25rem; --text-gray:#555; --text-gray-light:#888; --bg-gray:#f8f8f8; --box-shadow:0 0 5px rgba(0,0,0,0.2); --box-shadow-large:0 0 30px rgba(0,0,0,0.1); --enfont:'GMarketSans'; } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .center{text-align:center} .container{position:relative;max-width:1370px;padding:0 40px;margin-left:auto !important;margin-right:auto !important;} /*input*/ input::placeholder, textarea::placeholder {color:#aaa;} select{border:1px solid #eee;color:#888;border-radius:5px;height:40px;padding:0 25px 0 5px;background: url('../images/input-select-arrow.png') no-repeat calc(100% - 5px) center #fff;-webkit-appearance: none;-moz-appearance: none;appearance: none;} .md-input .checkbox{display:flex;gap:5px;align-items:center} .md-input .checkbox input[type="checkbox"]{width:16px;height:16px;border:1px solid #ddd} /*_pc*/ html{font-size:16px;} .displaynone{display:none !important} .spacer50{height:2.5rem} .spacer100{height:5.63rem} .-hide{display:none} .-shadow{background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.1)} .-round{border-radius:10px;overflow:hidden} .-border{border:1px solid #dddddd;} .-mt0{margin-top:0 !important} .c-star{display:flex;gap:2px} .c-star img{width:1.25rem} .c-btn{flex:1 1 170px;display:inline-block;max-width:170px;text-align:center;;border-radius:var(--border-radius-small);line-height:3.13rem;padding:0 1.5rem;font-size:1rem;color:var(--btn-color1);white-space:nowrap} .c-btn.-border{border:1px solid var(--btn-color1)} .c-btn.-bg{background:var(--btn-color1);color:#fff} .c-btn.-bg2{background:var(--btn-color2);color:#fff} .c-btn.-small{flex:1 1 130px;line-height:2.5rem;font-size:0.94rem} .c-ico{display:flex;gap:5px;} .c-ico b{height:1.63rem;line-height:1.63rem;min-width:4.38rem;padding:0 10px;border-radius:20px;background:var(--main-color);font-size:0.88rem;color:#fff;text-align:center} .c-ico b.pick{background:var(--main-color)} .c-ico b.off{background:#8a38f5} .c-ico b.best{background:#ff2525} .c-ico b.event{background:#8a38f5} .c-ico b.notice{background:var(--main-color)} .c-wish{position:absolute;z-index:10;right:10px;top:10px;width:20px;height:20px;background:url('../images/ico_wish.png') no-repeat center /20px;cursor:pointer} .c-wish.-gray{background-image:url('../images/ico_wish-gray.png')} .c-wish.on{background-image: url('../images/ico_wish_on.png')} .c-wish.-large{right:1rem;top:1rem;width:23px;height:23px;background:url('../images/ico_wish.png') no-repeat center;cursor:pointer} .c-wish.-large.-gray{background-image:url('../images/ico_wish-gray.png')} .c-wish.-large.on{background-image: url('../images/ico_wish_on.png')} .nodata{display:flex;text-align: center;background: var(--bg-gray);justify-content: center;align-items:center; min-height:100px} /*head title*/ .h2_tit{margin:3rem 0} .h2_tit .tit{font-size:2.25rem;font-weight:800;} .h3_tit{margin:2.5rem 0 1.25rem} .h3_tit .tit{font-size:1.56rem;font-weight:500} .h4_tit{display:flex;gap:10px;align-items:baseline;margin:2.5rem 0 0.88rem} .h4_tit .tit{font-size:1.5rem;} .h4_tit .tit.-star{background:url('../images/ico_star-large.png') no-repeat 0 center /auto 1.5rem;padding-left:2rem} .h4_tit .desc{font-size:0.94rem;color:var(--text-gray)} p.desc{line-height:1.4;font-size:0.94rem;color:var(--text-gray);margin:1rem 0} /*swiper*/ .swiper{padding-left:1px;padding-right:1px} .swiper-button-prev{width:6.25rem;height:6.25rem;background:url('../images/swiper-prev.png') no-repeat center;margin:0 !important;left:0 !important;transform: translate(-100%,-50%);} .swiper-button-next{width:6.25rem;height:6.25rem;background:url('../images/swiper-next.png') no-repeat center;margin:0 !important;right:0 !important;transform: translate(100%,-50%)} .swiper-button-prev svg, .swiper-button-next svg{display:none} .swiper-pagination-bullet{width:10px;height:10px;margin:0 6px !important;background:#ddd;opacity:1} .swiper-pagination-bullet-active{background:var(--main-color)} .swiper-pagination.-blank .swiper-pagination-bullet{border:1px solid #fff;background:none;opacity:0.6} .swiper-pagination.-blank .swiper-pagination-bullet-active{background:#fff} .swiper-controls{position:relative;display:flex;justify-content:center;align-items:center;margin-top:1rem} .swiper-controls .swiper-pagination{position:relative;width:auto;bottom:auto} .swiper-controls .swiper-pagination-bullet{width:7px;height:7px;margin:0 4px !important;border-radius:8px;transition:0.3s} .swiper-controls .swiper-pagination-bullet-active{width:22px} .swiper-controls .swiper-button-prev, .swiper-controls .swiper-button-next{transform: none} .swiper-controls .swiper-button-prev{position:relative;width:20px;height:20px;background:url('../images/swiper-prev-small.png') no-repeat center} .swiper-controls .swiper-button-next{position:relative;width:20px;height:20px;background:url('../images/swiper-next-small.png') no-repeat center} @media all and (max-width:840px){ .swiper-button-prev, .swiper-button-next{width:50px;height:50px;background-size:20px} .swiper-pagination-bullet{width:8px;height:8px;margin:0 5px !important;} } /*header*/ .topBanner_sec{background:var(--main-color);height:60px;color:#fff} .topBanner_sec .container{height:100%} .topBanner_sec .inner{display:flex;gap:18px;align-items:center;justify-content: center;height:100%;} .topBanner_sec strong{font-size:1.38rem} .topBanner_sec .desc{font-size:0.88rem} .topBanner_sec .btn{background:#282828;border-radius:var(--border-radius-small);font-size:1rem;font-weight:600;line-height:35px;padding:0 50px;white-space: nowrap} @media all and (max-width:1024px){ .topBanner_sec{height:50px} .topBanner_sec .desc{display:none} .topBanner_sec .btn{padding:0 15px} } @media all and (max-width:640px){ .topBanner_sec a strong{font-size:14px} } .header{position:sticky;top:0;z-index:200;background:#fff} .header.bg{border-bottom:1px solid #ddd;background:var(--main-color-light)} .header .container{display:flex;gap:1.88rem;justify-content:space-between;align-items:center;height:100px;max-width:none;} .header .h1{width:360px} .header .path{flex:1;display:flex;gap:10px;align-items:center;} .header .path .home{width:25px;height:25px;background:url('../images/ico_home.png') no-repeat center;text-indent:-9999px} .header .path a{font-size:0.88rem;font-weight:400;background:url('../images/ico_arrow-right.png') no-repeat 0 center;padding-left:15px} .header .path a:nth-child(2){padding-left:0;background:none} .header .course_con .tit{font-size:1.56rem;color:var(--main-color);line-height:100px;padding-right:20px;background:url('../images/ico_arrow-right-color.png') no-repeat 100% center;} .header .course_con:hover .md-sub{display:block} .header .search_con{position:relative;width:13rem;margin-left:-20px} .header .search_con input[type="text"]{width:100%;height:40px;line-height:40px;background:#f5f5f5;border-radius:var(--border-radius-small);border:0;padding:0 40px 0 10px;box-sizing:border-box} .header .search_con input[type="submit"]{position:absolute;right:0;top:0;width:40px;height:40px;background:url('../images/input-search.png') no-repeat center;border:0;font-size:0;cursor:pointer} .header .lnb_con{flex:1;} .header .lnb_con .menu{display:flex;gap:2.5rem} .header .lnb_con .menu > li {position:relative} .header .lnb_con .menu > li:hover .md-sub{display:block} .header .lnb_con .menu > li > a{font-size:1.06rem;line-height:100px;white-space:nowrap} .header .md-sub{display:none;position:absolute;top:90px;width:160px;border-radius:var(--border-radius);background:var(--main-color-light);box-shadow:var(--box-shadow)} .header .md-sub, .header .md-sub ul{border-radius:var(--border-radius);;box-shadow:var(--box-shadow)} .header .md-sub li:first-child a{border-top-left-radius:10px;border-top-right-radius:10px} .header .md-sub li:last-child a{border-bottom-left-radius:10px;border-bottom-right-radius:10px} .header .md-sub li:hover > a{background:var(--main-color);color:#fff} .header .md-sub li:hover > ul{display:block} .header .md-sub a{display:block;line-height:30px;padding:0 20px;font-size:0.81rem} .header .md-sub ul{display:none;position:absolute;left:calc(100% + 1px);top:0;width:100%;background:#fff;} .header .md-sub ul ul li:hover > a{background:#f5f5f5;color:var(--main-color)} .header .gnb_con ul{display:flex;gap:15px;align-items:center} .header .gnb_con .cart{position:relative;} .header .gnb_con .cart span{position:absolute;display:flex;justify-content:center;align-items:center; right:-5px;top:-2px;min-width:14px;height:14px;padding:0 2px;background:var(--main-color);color:#fff;font-size:9px;border-radius:50%} .header .my_con{position:relative;display:flex;align-items:center; height:100px} .header .my_con .photo{width:54px;height:54px;border-radius:50%;border:3px solid var(--main-color);overflow:hidden} .header .my_con .sub{display:none;position:absolute;left:50%;transform:translateX(-50%);top:90px;width:164px;border-radius:var(--border-radius);background:#fff;box-shadow:var(--box-shadow);font-size:0.75rem;overflow:hidden} .header .my_con .sub .info{display:flex;gap:5px;align-items:center;padding:12px 12px;background:var(--main-color-light)} .header .my_con .sub .info > div{flex:1} .header .my_con .sub .info strong{font-size:0.81rem;font-weight:500} .header .my_con .sub .info span{display:block;color:var(--text-gray);margin-top:3px} .header .my_con .sub .info .modify{display:flex;justify-content:center;align-items:center; width:25px;height:25px;min-width:auto;border-radius:50%;box-shadow:var(--box-shadow);background:#fff} .header .my_con .sub ul{padding:4px 0} .header .my_con .sub li{padding:8px 20px} .header .my_con .sub li a{display:block;} .header .my_con .sub li a:hover{color:var(--main-color);background:url('../images/ico_arrow-menu.png') no-repeat 100% center} .header .my_con:hover .sub{display:block} .header .language_con{margin-right:-20px } .language_con select{height:28px;border:0;font-size:0.75rem;border-radius:28px;padding:0 25px 0 15px;box-shadow:var(--box-shadow);background-position:calc(100% - 10px) center} .language_con select option{line-height:28px;height:28px} .language_con{position:relative;z-index:10;width:90px;height:28px;} .language_con:hover li{display:block} .language_con ul{position:absolute;display:flex;flex-direction:column;width:100%;;border-radius:15px;background:#fff;box-shadow:var(--box-shadow)} .language_con li{display:none} .language_con li.on{display:block;order:0;background:url('../images/ico_arrow-down.png') no-repeat calc(100% - 10px) center;} .language_con li.on a{pointer-events:none} .language_con li{order:1;height:28px;line-height:28px;padding:0 10px;font-size:0.75rem;text-transform: uppercase} .language_con li a{display:flex;gap:5px;align-items:center; } .header .log_con{display:flex;gap:5px} .header .log_con a{line-height:30px;border:1px solid var(--main-color);border-radius:var(--border-radius-small);color:var(--main-color);font-size:0.75rem;padding:0 10px} .header .log_con a.bg{background:var(--main-color-light)} .header .-pc .toggle_con{display:none} @media all and (max-width:1600px){ .header .search_con{width:11rem} .header .lnb_con .menu{gap:2rem} } @media all and (max-width:1400px){ .header.yesLnb .-pc .gnb_con, .header.yesLnb .-pc .my_con, .header.yesLnb .-pc .language_con, .header.yesLnb .-pc .log_con{display:none} .header.yesLnb .-pc .toggle_con{display:block} } /*aside*/ .aside{position:fixed;z-index:300;left:100%;top:0;width:100%;height:100%;background:#fff;overflow:auto;transition: 0.3s} .aside.on{left:0} .aside .head_sec{background:url('../images/aside_head_bg.png') no-repeat center /cover} .aside .head_sec .info_con{display:flex;gap:10px;align-items:center;padding:20px} .aside .head_sec .info_con .photo{width:40px;height:40px;background:#fff;border:1px solid #fff;border-radius:50%;overflow:hidden} .aside .head_sec.-in .info_con .photo img{width:100%;height:100%;object-fit: cover} .aside .head_sec.-out .info_con .photo{background:url('../images/aside_ico_person.png') no-repeat center} .aside .head_sec .info_con .info{display:flex;flex-direction: column;gap:2px;color:#fff} .aside .head_sec .info_con .info .name{font-size:16px} .aside .head_sec .info_con .info .emal{font-size:13px} .aside .head_sec .info_con .menu{display:flex;gap:10px;margin-left:20px} .aside .head_sec .info_con .close{margin-left:auto;width:20px;height:20px;background:url('../images/aside_close.png') no-repeat center} .aside .head_sec .gnb_con ul{display:flex;flex-wrap:wrap;color:#fff;border-top:1px solid rgba(255,255,255,0.5)} .aside .head_sec .gnb_con li{flex:1 1 33.33%;min-width:110px;text-align:center;border:1px solid rgba(255,255,255,0.5);line-height:40px;border-width:0 1px 1px 0} .aside .head_sec.-out .gnb_con ul{background:#fff;border-top:0} .aside .head_sec.-out .gnb_con li{border-color:var(--main-color);color:var(--main-color);font-size:14px;} .aside .head_sec.-out .gnb_con li:last-child{border-right:0} .aside .search_sec{background:var(--bg-gray);padding:10px} .aside .search_sec .inner{position:relative} .aside .search_sec input[type="text"]{display:block;width:100%;border:1px solid var(--border-color);line-height:40px;padding:0 20px;border-radius:var(--border-radius-small)} .aside .search_sec input[type="submit"]{position:absolute;border:0;text-indent:-9999px;top:0;right:10px;width:40px;height:40px;background:url('../images/ico_search.png') no-repeat center} .aside .lnb_sec .menu ul{display:none} .aside .lnb_sec .menu li{border-bottom:1px solid #eee} .aside .lnb_sec .menu li a{display:flex;align-items:center;line-height:50px;padding:0 20px;font-size:16px} .aside .lnb_sec .menu li.on > a{color:var(--main-color)} .aside .lnb_sec .menu li.child > a:after{content:'';display:inline-block;width:20px;height:20px;background:url('../images/aside_arrow.png') no-repeat center;margin-left:auto} .aside .lnb_sec .menu li.child.on > a:after{content:'';display:inline-block;width:20px;height:20px;background:url('../images/aside_arrow_color.png') no-repeat center;transform:rotate(180deg)} .aside .lnb_sec .menu > li > a .cnt{color:var(--main-color);margin:0 5px} .aside .lnb_sec .sub{background:#f7fafc;border-top:1px solid #eee} .aside .lnb_sec .sub li a{line-height:40px;font-size:14px} .aside .lnb_sec .sub li.child > a:after{transform:rotate(-90deg)} .aside .lnb_sec .sub li.child.on > a:after{transform:rotate(0deg)} .aside .lnb_sec .sub ul{background:#edf4f8;padding:10px 0} .aside .lnb_sec .sub ul li{border:0} .aside .lnb_sec .sub ul a{line-height:30px;} .aside .lnb_sec .sub ul ul{display:none} .aside .lnb_sec-sub{display:flex;border-top:1px solid var(--border-color)} .aside .lnb_sec-sub .menu{background:#fff;padding:0 10px;border-right:1px solid var(--border-color)} .aside .lnb_sec-sub .menu > li{width:40px} .aside .lnb_sec-sub .menu > li > a{display:flex;align-items:center;height:50px;line-height:50px;font-size:1.19rem;border-bottom:1px solid var(--border-color);font-size:0} .aside .lnb_sec-sub .menu > li.on > a{color:var(--main-color)} .aside .lnb_sec-sub .menu > li.on > a:before{filter:var(--main-color-filter)} .aside .lnb_sec-sub .sub{flex:1;padding:0 20px;line-height:50px} .aside .lnb_sec-sub .sub dt{font-size:1.31rem;color:#000} .aside .lnb_sec-sub .sub dd a{display:flex;gap:10px;align-items:center; font-size:1.19rem;border-bottom:1px solid var(--border-color)} .aside .lnb_sec-sub .sub dd a .cnt{color:var(--main-color);margin-left:-5px} .aside .lnb_sec-sub .sub dd a:before{content:'';display:inline-block;width:5px;height:5px;background:#555;border-radius:50%} .aside .lnb_sec-sub .sub dd a:hover{color:var(--main-color)} .aside .lnb_sec-sub .sub dd a:hover:before{background:var(--main-color)} .aside .language_con{float:right;margin:20px 20px;} .aside .language_con ul{bottom:0} .aside .language_con li.on{order:99} /*main************************************************************/ .main_sec1 .swiper-slide{height:550px} .main_sec1 .swiper-slide[data-swiper-slide-index="0"]{background:url('../images/msec1_img1.jpg') no-repeat center /cover} .main_sec1 .swiper-slide[data-swiper-slide-index="1"]{background:url('../images/msec1_img2.jpg') no-repeat center /cover} .main_sec1 .swiper-slide.nth1{background:url('../images/msec1_img1.jpg') no-repeat center /cover} .main_sec1 .slogan{display:flex;height:100%;flex-direction:column;justify-content:center;height:100%;line-height:1.3} .main_sec1 .slogan .tit{font-size:2.5rem;font-weight:800;color:var(--main-color)} .main_sec1 .slogan .desc{font-size:1.19rem;color:var(--text-gray);margin-top:1.88rem} .main_sec1 .slogan .more{margin-top:3rem} .main_sec1 .slogan .more a{display:inline-block;line-height:50px;padding:0 20px;font-size:1.19rem;color:var(--main-color);font-weight:600;border:1px solid var(--main-color)} .main_sec1 .swiper-button-prev{width:6.25rem;height:6.25rem;background:url('../images/swiper-prev.png') no-repeat center;margin:0 !important;left:0 !important;transform: translate(100%,-50%);} .main_sec1 .swiper-button-next{width:6.25rem;height:6.25rem;background:url('../images/swiper-next.png') no-repeat center;margin:0 !important;right:0 !important;transform: translate(-100%,-50%)} @media all and (max-width:1024px){ .main_sec1 .swiper-slide{height:auto;aspect-ratio:640/853} .main_sec1 .swiper-slide[data-swiper-slide-index="0"]{background:url('../images/msec1_img1_mo.jpg') no-repeat center /cover} .main_sec1 .swiper-slide[data-swiper-slide-index="1"]{background:url('../images/msec1_img2_mo.jpg') no-repeat center /cover} .main_sec1 .slogan{text-align:center;height:50%;transform:translateY(100%)} .main_sec1 .swiper-button-prev{display:none} .main_sec1 .swiper-button-next{display:none} } @media all and (max-width:640px){ .main_sec1 .slogan .tit{font-size:2rem} .main_sec1 .slogan .desc{margin-top:1.5rem} .main_sec1 .slogan .more{margin-top:1.5rem} .main_sec1 .slogan .more a{line-height:40px} } .main_sec3{background:var(--main-color-light);overflow:hidden} .main_sec3 .container{max-width:1310px} .main_sec3 .inner{display:flex;justify-content:space-between} .main_sec3 .banner_con{width:32%;border-radius:var(--border-radius);overflow:hidden;text-align:center} .main_sec3 .banner_con .swiper, .main_sec3 .banner_con .swiper-wrappper, .main_sec3 .banner_con .swiper-slide{height:100%} .main_sec3 .banner_con .swiper-slide{display:flex;gap:1.88rem;flex-direction:column;justify-content: center;align-items:center;color:#fff;padding:25px 2rem 50px} .main_sec3 .banner_con .swiper-slide .tit{font-family:var(--enfont);font-size:2.5rem;;line-height:1.2;text-shadow:0 0 5px rgba(0,0,0,0.4)} .main_sec3 .banner_con .swiper-slide .desc{} .main_sec3 .banner_con .swiper-slide a{background:#000;border-radius:var(--border-radius-small);padding:10px 20px;font-weight:600} .main_sec3 .course_con{width:60%;position:relative} .main_sec3 .course_con .swiper-slide{height:auto} .main_sec3 .course_con .swiper-slide .subject{white-space:nowrap;text-overflow:ellipsis;overflow:hidden} @media all and (max-width:1024px){ .main_sec3 .inner{display:block;} .main_sec3 .banner_con{width:auto;} .main_sec3 .course_con{width:auto;width:75%;max-width:730px;margin:2.5rem auto;} } @media all and (max-width:640px){ .main_sec3 .course_con{} } .main_sec4 .container{} .main_sec4 .course_con{position:relative;width:85%;margin:0 auto} .main_sec4 .course_con .swiper-wrapper{align-items:flex-end} @media all and (max-width:1024px){ .main_sec4 .course_con{width:75%;max-width:730px;margin:2.5rem auto;} } @media all and (max-width:640px){ .main_sec4 .container{padding:0} .main_sec4 .course_con{width:100%;max-width:730px;margin:2.5rem auto;} .main_sec4 .swiper-button-prev, .main_sec4 .swiper-button-next{display:none} } .main_sec5{background:url('../images/msec5_bg.jpg') no-repeat center bottom /cover;padding:6.25rem 0} .main_sec5 .h2_tit .tit{font-size:2.81rem;} .main_sec5 .desc{font-size:1.56rem;color:var(--text-gray-light);margin:10px 0} .main_sec5 .list1{display:flex;gap:50px;align-items:center} .main_sec5 .list1 ul{flex:1;display:flex;gap:50px;flex-wrap:wrap;} .main_sec5 .list1 li{display:flex;gap:15px;align-items:center;width:calc((100% - 50px)/2);min-width:200px} .main_sec5 .list1 li .ico{display:flex;justify-content:center;align-items:center; width:5rem;height:5rem;background:var(--main-color);border-radius:var(--border-radius);padding:10px} .main_sec5 .list1 li .ico img{max-height:100%} .main_sec5 .list1 li .info{flex:1} .main_sec5 .list1 li .info .tit{font-size:1.44rem;color:var(--main-color)} .main_sec5 .list1 li .info p{color:var(--text-gray-light);font-size:0.94rem;margin-top:5px} .main_sec5 .list1 .img{flex:0.6;text-align:right;margin-top:-20px} .main_sec5 .list2{margin-top:20px} .main_sec5 .list2 ul{display:flex;background:#fff;border-radius:var(--border-radius);text-align:center;padding:3rem 0} .main_sec5 .list2 li{flex:1;padding:0 3rem;} .main_sec5 .list2 strong{font-size:3.75rem;color:var(--main-color)} .main_sec5 .list2 p{color:var(--text-gray-light);line-height:1.4} @media all and (max-width:1024px){ .main_sec5 .h2{font-size:2.25rem;text-align:center} .main_sec5 .desc{text-align:center} .main_sec5 .list1{display:block;padding:0 40px} .main_sec5 .list1 ul{margin:30px 0} .main_sec5 .list1 .img{text-align:center;margin:30px 0;padding:0 20px} .main_sec5 .list2 ul{flex-wrap:wrap;gap:20px} .main_sec5 .list2 ul li{flex:none;width:calc((100% - 20px)/2);padding:0 20px} } @media all and (max-width:640px){ .main_sec5 .list1 ul{gap:10px} .main_sec5 .list1 li{width:100%} } .main_sec6{margin:8rem 0} .main_sec6 .swiper-slide{display:flex;gap:1.88rem;align-items:center; background:var(--bg-gray);border-radius:30px;padding:2.5rem 1.88rem;} .main_sec6 .swiper-slide .ico{} .main_sec6 .swiper-slide .info{} .main_sec6 .swiper-slide .tit{font-size:2rem} .main_sec6 .swiper-slide .desc{font-size:1.5rem;margin-top:1.25rem;color:var(--text-gray)} .main_sec6 .swiper-button-prev, .main_sec6 .swiper-button-next{width:55px;height:55px;;background-color:#fff;border-radius:50%;border:1px solid var(--border-color);background-size:12px} .main_sec6 .swiper-button-prev{left:27% !important} .main_sec6 .swiper-button-next{right:27% !important;} @media all and (max-width:1024px){ .main_sec6 .swiper-slide{flex-direction:column;text-align:center;border-radius:15px} .main_sec6 .swiper-slide .ico{width:50%;margin:0 auto} .main_sec6 .swiper-slide .desc br{display:none} .main_sec6 .swiper-button-prev, .main_sec6 .swiper-button-next{width:40px;height:40px;;background-color:#fff;border-radius:50%;border:1px solid var(--border-color);background-size:8px} .main_sec6 .swiper-button-prev{left:15% !important} .main_sec6 .swiper-button-next{right:15% !important;} } /* swiper 변경전 .main_sec7{margin:8rem 0} .main_sec7 .container{display:flex;gap:3.13rem;align-items:center} .main_sec7 .tit_con{width:26%} .main_sec7 .tit_con .tit{font-size:1.69rem} .main_sec7 .tit_con .desc{font-size:1.06rem;margin:1.5rem 0;width:80%;line-height:1.5;color:var(--text-gray)} .main_sec7 .tit_con .more a{display:inline-block;line-height:40px;padding:0 25px;border:1px solid var(--main-color);color:var(--main-color);} .main_sec7 .info_con{flex:1} .main_sec7 .info_con ul{display:flex;gap:10px;text-align:center;color:#fff} .main_sec7 .info_con li{border-radius:var(--border-radius);overflow:hidden} .main_sec7 .info_con li .thumb{} .main_sec7 .info_con li .info{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem 1rem;} .main_sec7 .info_con li .info .name{font-size:1.38rem} .main_sec7 .info_con li .info .desc{font-size:1.13rem;margin-top:0.5rem} .main_sec7 .info_con li:nth-child(1) .info{background:#27c590} .main_sec7 .info_con li:nth-child(2) .info{background:#ffa943} .main_sec7 .info_con li:nth-child(3) .info{background:#7f9fff} @media all and (max-width:1024px){ .main_sec7 .container{flex-direction: column} .main_sec7 .tit_con{width:100%;text-align:center} .main_sec7 .tit_con .desc{width:100%} } @media all and (max-width:640px){ .main_sec7 .tit_con{text-align:left} .main_sec7 .info_con ul{flex-direction: column} .main_sec7 .info_con li{display:flex;} .main_sec7 .info_con li .thumb{flex:1;height:35vw} .main_sec7 .info_con li .info{flex:1;position:relative;height:auto;align-items:flex-start;text-align:left} } */ .main_sec7{margin:8rem 0} .main_sec7 .container{display:flex;gap:3.13rem;align-items:center} .main_sec7 .tit_con{width:26%} .main_sec7 .tit_con .tit{font-size:1.69rem} .main_sec7 .tit_con .desc{font-size:1.06rem;margin:1.5rem 0;width:80%;line-height:1.5;color:var(--text-gray)} .main_sec7 .tit_con .more a{display:inline-block;line-height:40px;padding:0 25px;border:1px solid var(--main-color);color:var(--main-color);} .main_sec7 .info_con{flex:1;padding-bottom:40px} .main_sec7 .info_con ul{text-align:center;color:#fff} .main_sec7 .info_con li{border-radius:var(--border-radius);overflow:hidden} .main_sec7 .info_con li .thumb{} .main_sec7 .info_con li .thumb img{width:100%} .main_sec7 .info_con li .info{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem 1rem;} .main_sec7 .info_con li .info .name{font-size:1.38rem} .main_sec7 .info_con li .info .desc{font-size:1.13rem;margin-top:0.5rem} .main_sec7 .info_con li:nth-last-of-type(3n) .info{background:#27c590} .main_sec7 .info_con li:nth-last-of-type(3n+1) .info{background:#ffa943} .main_sec7 .info_con li:nth-last-of-type(3n+2) .info{background:#7f9fff} @media all and (max-width:1024px){ .main_sec7 .container{display:block;} .main_sec7 .tit_con{width:100%;text-align:center;margin-bottom:3rem} .main_sec7 .tit_con .desc{width:100%} } .main_sec8{margin:8rem 0} .main_sec8 .box{display:flex;gap:3rem;background:#fff;border-radius:var(--border-radius-large);padding:10px 1.88rem;border:1px solid var(--border-color)} .main_sec8 .calenda_con{} .main_sec8 .schedule_con{flex:1 1 500px;height:400px;overflow:auto} .main_sec8 .schedule_con ul{position:relative;display:flex;flex-direction: column;gap:2.5rem;padding:0 10px;padding-left:3.5rem} .main_sec8 .schedule_con ul:before{content:'';position:absolute;left:10px;top:0;height:100%;border-left:1px solid #eee} .main_sec8 .schedule_con li{position:relative;background:#f4f7fb;border:1px solid #c8e0f0;border-radius:var(--border-radius);padding:1.5rem 2rem;border-radius:var(--border-radius-large)} .main_sec8 .schedule_con li:before{content:'';position:absolute;left:calc(-3.5rem + 10px);top:50%;width:12px;height:12px;background:#9acdfe;border-radius:50%;transform:translate(-50%,-50%)} .main_sec8 .schedule_con li:after{content:'';position:absolute;width:20px;height:20px;left:-11px;top:calc(50% - 10px);border:1px solid #c8e0f0;background:#f4f7fb;border-radius:5px;border-width:1px 0 0 1px;;transform:rotate(-45deg)} .main_sec8 .schedule_con li .date{display:flex;align-items:center;gap:10px} .main_sec8 .schedule_con li .date .today{display:inline-block;height:20px;line-height:22px;color:#fff;font-size:9px;border-radius:20px;padding:0 10px;background:var(--main-color)} .main_sec8 .schedule_con li .subject{font-size:1.25rem;margin:5px 0;padding-right:5rem} .main_sec8 .schedule_con li .time{margin-top:15px;font-size:0.88rem;background:url('../images/ico_clock.png') no-repeat 0 center /17px;padding-left:22px;min-height:17px;color:#666} .main_sec8 .schedule_con li .more{position:absolute;right:2rem;width:5rem;line-height:2.19rem;font-size:0.88rem;border:1px solid var(--main-color);color:var(--main-color);text-align:center;top:50%;transform:translateY(-50%)} .main_sec8 .schedule_con li:nth-child(2n){background:#f9f5ff;border:1px solid #eadbfd} .main_sec8 .schedule_con li:nth-child(2n):before{background:#c89eff} .main_sec8 .schedule_con li:nth-child(2n) .more{border-color:#8a38f5;color:#8a38f5} .main_sec8 .schedule_con li:nth-child(2n):after{border-color:#eadbfd;background:#f9f5ff} @media all and (max-width:1024px){ .main_sec8 .box{flex-direction:column} .main_sec8 .box .calenda_con{text-align:center} .main_sec8 .schedule_con ul{padding:0 15px;gap:1rem} .main_sec8 .schedule_con ul:before{display:none;} .main_sec8 .schedule_con li:before{display:none} } @media all and (max-width:480px){ .main_sec8 .box{padding:10px} } .main_sec9{margin:8rem 0} .main_sec9 .swiper-wrapper{padding:6.25rem 0 40px} .main_sec9 .swiper-slide{background:url('../images/msec9_bg.jpg') no-repeat center /100% 100%;border-radius:1.88rem;padding:2.5rem;color:#fff} .main_sec9 .swiper-slide .inner{width:55%} .main_sec9 .swiper-slide .tag{display:flex;gap:10px;font-size:1rem} .main_sec9 .swiper-slide .tit{font-size:1.5rem;margin:1rem 0} .main_sec9 .swiper-slide .desc{font-size:1rem;line-height:1.5} .main_sec9 .swiper-slide .img{position:absolute;width:40%;right:1rem;bottom:1rem;text-align:right} @media all and (max-width:640px){ .main_sec9 .swiper-wrapper{padding:0} .main_sec9 .swiper-slide .inner{width:100%} .main_sec9 .swiper-slide .img{position:relative;width:100%;right:-1rem;bottom:-1rem;margin-top:1rem} .main_sec9 .swiper-slide .img img{width:70%} } .main_sec10{margin:8rem 0} .main_sec10 .swiper-wrapper{padding:10px 0 50px} .main_sec10 .swiper-slide{background:var(--bg-gray);border-radius:var(--border-radius);padding:2rem 2.5rem} .md-review > li{border:1px solid #eee;border-radius:var(--border-radius);padding:2rem 2.5rem} .md-review .head_con{display:flex;gap:10px;align-items:center} .md-review .head_con .photo{border-radius: 50%;overflow:hidden;width:52px;height:52px;} .md-review .head_con .info{display:flex;flex-direction: column;gap:5px} .md-review .head_con .name{display:flex;gap:20px;font-size:1.06rem;color:var(--text-gray)} .md-review .info_con{margin:2rem 0} .md-review .info_con .subject{font-size:1.31rem} .md-review .info_con .desc{font-size:1.06rem;color:var(--text-gray-light);margin:1rem 0} .md-review .info_con .more{display:inline-block;font-size:1.06rem;color:var(--main-color);border-bottom:1px solid var(--main-color)} .md-review .bottom_con{border-top:1px solid;border-image: repeating-linear-gradient(to right,#ddd 0,#ddd 5px,transparent 3px,transparent 8px) 1 stretch;padding-top:1.5rem} .md-review .bottom_con .more{display:block;line-height:20px;padding-left:30px;background:url('../images/ico_moniter.png') no-repeat 0% center,url('../images/ico_arrow-right-gray-large.png') no-repeat 100% center;color:var(--text-gray)} .review_popup{display:none;position:fixed;z-index:100;; left:0;top:0;right:0;bottom:0} .review_popup.on{display:flex;justify-content:center;align-items: center} .review_popup .bg{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.3)} .review_popup .box{position:relative;width:100%;max-width:700px;background:#fff;border-radius:var(--border-radius-large);background:#fff;padding:3.13rem} .review_popup .md-review .info_con{background:var(--bg-gray);padding:1.18rem;max-height:300px;overflow:auto} .review_popup .md-review .info_con .subject{font-size:1.88rem} .review_popup .md-review .info_con .desc{font-size:1.13rem} .review_popup .md-review .info_con .date{margin-top:2rem;text-align:right;color:var(--text-gray-light)} .main_sec11{padding:6.25rem 0;background:var(--bg-gray);margin:8rem 0} .main_sec11 .container{display:flex;gap:4rem;align-items:center;flex-wrap:wrap} .main_sec11 .container > div{flex:1 1 400px} .main_sec11 .tit_con{} .main_sec11 .tit_con .h2_tit{margin:0} .main_sec11 .tit_con .desc{font-size:1.19rem;color:var(--text-gray-light);margin:2.25rem 0 3rem} .main_sec11 .tit_con .more{display:inline-block;line-height:50px;background:var(--main-color);color:#fff;padding:0 20px;font-size:1.13rem;} .main_sec11 .video_con{max-width:670px;margin:0 auto} .main_sec11 .video_con a{display:block;position:relative;;border-radius:var(--border-radius-large);overflow:hidden} .main_sec11 .video_con a:before{content:'';position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;background:url('../images/btn_video-play.png') no-repeat center /11%} .main_sec11 .video_con a img{filter:brightness(0.5)} .main_sec13{margin:8rem 0} .main_sec14{margin:8rem 0} .main_sec14 .container{display:flex;gap:20px;flex-wrap:wrap} .main_sec14 .latest_con .h2_tit{display:flex;align-items:center} .main_sec14 .latest_con .h2_tit .more{margin-left:auto;width:2.5rem} .main_sec14 .latest_con{flex:1 1 400px} .main_sec14 .latest_con .h2_tit{margin-bottom:1.25rem} .main_sec14 .latest_con.gallery ul{display:flex;gap:10px} .main_sec14 .latest_con.gallery li{width:calc((100% - 10px)/2);border:1px solid #ddd;border-radius:var(--border-radius);background:#fff;overflow:hidden} .main_sec14 .latest_con.gallery .thumb{aspect-ratio:1.6/1} .main_sec14 .latest_con.gallery .thumb a{display:block} .main_sec14 .latest_con.gallery .thumb img{width:100%;height:100%;object-fit:cover} .main_sec14 .latest_con.gallery .info{position:relative;display:flex;flex-direction: column;gap:15px;justify-content: space-between;padding:1.88rem 1.25rem 1.25rem} .main_sec14 .latest_con.gallery .info .c-ico{position:absolute;display:flex;gap:5px;top:0;transform:translateY(-50%)} /* .main_sec14 .latest_con.gallery .info .ico b{height:1.63rem;line-height:1.63rem;width:4.38rem;border-radius:20px;background:var(--ico-color2);font-size:0.88rem;color:#fff;text-align:center} .main_sec14 .latest_con.gallery .info .ico b.notice{background:var(--ico-color1)} */ .main_sec14 .latest_con.gallery .info .subject{font-size:1.25rem;font-weight:600} .main_sec14 .latest_con.gallery .info .writer{display:flex;justify-content: space-between;color:var(--text-gray-light);} .main_sec14 .latest_con.gallery .info .writer span{display:flex;gap:5px;align-items:center;font-size:0.88rem;margin:5px 0} .main_sec14 .latest_con.gallery .info .writer .name:before{content:'';display:block;width:20px;height:20px;background:url('../images/ico_person.png') no-repeat center;opacity:0.6} .main_sec14 .latest_con.gallery .info .writer .date:before{content:'';display:block;width:20px;height:20px;background:url('../images/ico_calenda.png') no-repeat center;opacity:0.6} .latest_con.board{display:flex;flex-direction: column;} .latest_con.board ul{flex:1;border:1px solid #ddd;border-radius:var(--border-radius);background:#fff;padding:1.1rem 1.25rem} .latest_con.board li{display:flex;gap:10px;align-items:center; border-bottom:1px dashed #ddd;padding:0.8rem 0} .latest_con.board li:last-child{border-bottom:0} .latest_con.board li .status{height:1.63rem;line-height:1.63rem;border-radius:30px;color:#fff;font-size:0.88rem;width:6rem;text-align:center} .latest_con.board li .status.answered{background:var(--ico-color1)} .latest_con.board li .status.pending{background:var(--ico-color2)} .latest_con.board li a{} .latest_con.board li .date{margin-left:auto;font-size:0.88rem;color:var(--text-gray-light)} .main_sec15{margin:8rem 0} .main_sec15 .banner{display:flex;justify-content:center; background:#333;border-radius:var(--border-radius)} .main_sec15 .banner .inner{display:flex;gap:5px;flex-direction: column;justify-content:center; color:#fff;padding:25px 0;padding-left:70px;background:url('../images/msec15_em.png') no-repeat 0 center} .main_sec15 .banner strong{font-size:1.5rem} .main_sec15 .banner p{font-size:1.13rem} @media all and (max-width:640px){ .main_sec15 .banner .inner{padding:25px 15px;padding-top:90px;background-position:center 20px;text-align:center} } /*pg-index*******************************************************/ .md-course{} .md-course.grid1{display:flex;flex-direction: column;gap:10px} .md-course.grid1 li{display:flex;flex-direction: row; gap:1rem;width:100%;padding:10px} .md-course.grid1 li .-hide{display:block} .md-course.grid1 li .thumb{flex:1;max-width:420px} .md-course.grid1 li .thumb img{border-radius:var(--border-radius);overflow:hidden} .md-course.grid1 li .thumb .c-wish{right:1rem;top:1rem;width:23px;height:23px;background:url('../images/ico_wish.png') no-repeat center;cursor:pointer} .md-course.grid1 li .thumb .c-wish.on{background-image: url('../images/ico_wish_on.png')} .md-course.grid1 li .info{flex:1;gap:5px;padding:1rem 1rem 0.5rem} .md-course.grid1 li .info .tag{font-size:0.88rem;color:var(--text-gray);margin:10px 0 5px} .md-course.grid1 li .info .c-ico{position:relative;transform: none} .md-course.grid1 li .info .cont{font-size:0.88rem;color:var(--text-gray)} .md-course.grid1 li .info .desc{display:flex;gap:1rem;} .md-course.grid1 li .info .desc .star{order:-1} .md-course.grid1 li .info .price{align-items:center} .md-course.grid1 li .info .price .buy{display:flex;gap:10px;margin-left:auto} .md-course.grid1 li .info .price .buy a{line-height:2.25rem;width:6.25rem;border:1px solid var(--main-color);color:var(--main-color);font-size:0.75rem;text-align:center} .md-course.grid1 li .info .price .buy a.bg{background:var(--main-color);color:#fff} .md-course.grid3, .md-course.grid4{display:flex;flex-wrap:wrap;gap:10px;} .md-course.grid3 li{width:calc((100% - 10px * 2)/3);} .md-course.grid4 li{width:calc((100% - 10px * 3)/4);} .md-course li{position:relative;display:flex;flex-direction: column;border:1px solid #eee;border-radius:var(--border-radius);background:#fff;overflow:hidden} .md-course li:hover{border-color:var(--main-color)} .md-course li.closed{background:#f8f8f8} .md-course li.closed .price .buy a.closed{background:#4c4c4c;border:0;color:#fff} .md-course li.closed:hover{border-color:#888} .md-course li .thumb{position:relative;aspect-ratio:1.6/1} .md-course li .thumb a{display:block} .md-course li .thumb img{width:100%;height:100%;object-fit:cover} .md-course li .info{flex:1;position:relative;display:flex;flex-direction: column;;justify-content: space-between;padding:1.88rem 1.25rem 1.25rem} .md-course li .info .c-ico{position:absolute;display:flex;gap:5px;top:0;transform:translateY(-50%)} .md-course li .info .subject{font-size:1.25rem;font-weight:600} .md-course li .info .desc{color:var(--text-gray-light);margin:10px 0 0} .md-course li .info .desc span{display:flex;gap:5px;align-items:center;font-size:0.88rem;margin:5px 0;line-height:20px} .md-course li .info .desc .name:before{content:'';display:block;width:20px;height:20px;background:url('../images/ico_person.png') no-repeat center;opacity:0.6} .md-course li .info .desc .time:before{content:'';display:block;width:20px;height:20px;background:url('../images/ico_clock.png') no-repeat center;opacity:0.6} .md-course li .info .desc .star:before{content:'';display:block;width:20px;height:20px;background:url('../images/ico_star.png') no-repeat center} .md-course li .info .price{display:flex;justify-content: flex-end;align-items: baseline;;margin-top:auto} .md-course li .info .price .sale{color:#aaa} .md-course li .info .price .total{font-size:1.63rem;color:var(--main-color);font-weight:800;margin-left:5px} .md-course.video .thumb a{position:relative} .md-course.video .thumb a:before{content:'';position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;background:url('../images/btn_video-play.png') no-repeat center /16%} .md-course.video .thumb a img{filter:brightness(0.5)} .md-course.video .info .desc{display:flex;justify-content: space-between;align-items:center} .md-course.video .info .desc .time:before{display:none} .md-course.video .info .desc .time{background:none;border:1px solid #eee;border-radius:30px;height:24px;line-height:22px;padding:0 10px;font-size:0.75rem} .md-course.book li{background:var(--bg-gray)} .md-course.book li .thumb{padding:2rem 2rem 3rem} .md-course.book li .thumb a{display:block;max-width:190px;margin:0 auto;border-radius:var(--border-radius);box-shadow:var(--box-shadow-large)} .md-course.book li .info .subject{font-size:1.13rem} @media all and (max-width:1024px){ .md-course.grid4 li{width:calc((100% - 10px * 2)/3);} } @media all and (max-width:640px){ .md-course.grid1 li{flex-direction: column} .md-course.grid1 li .thumb{;max-width:none} .md-course.grid3, .md-course.grid4{flex-wrap:wrap;gap:5px;} .md-course.grid3 li{width:calc((100% - 10px * 1)/2);} .md-course.grid4 li{width:calc((100% - 5px * 1)/2);} } /*pg-mypage******************************************************/ .pg-mypage .contents{display:flex;} .pg-mypage .contents .content{flex:1;display:flex;gap:15px;flex-direction:column;padding:30px 30px 0} /*mypage 좌측메뉴*/ .pg-mypage .sidemenu{padding:30px 20px;width:400px;border-right:1px solid #ddd;background:var(--main-color-light)} .pg-mypage .sidemenu .menu{} .pg-mypage .sidemenu .menu > li{position:relative;} .pg-mypage .sidemenu .menu > li > a{display:flex;align-items:center;height:60px;line-height:60px;font-size:1.19rem;border-bottom:1px solid var(--border-color)} .menu_ico1:before{content:'';display:inline-block;width:40px;height:100%;background:url('../images/ico_left_courses.png') no-repeat center} .menu_ico2:before{content:'';display:inline-block;width:40px;height:100%;background:url('../images/ico_left_certificate.png') no-repeat center} .menu_ico3:before{content:'';display:inline-block;width:40px;height:100%;background:url('../images/ico_left_payment_history.png') no-repeat center} .menu_ico4:before{content:'';display:inline-block;width:40px;height:100%;background:url('../images/ico_left_coupon.png') no-repeat center} .menu_ico5:before{content:'';display:inline-block;width:40px;height:100%;background:url('../images/ico_left_wishlist.png') no-repeat center} .menu_ico6:before{content:'';display:inline-block;width:40px;height:100%;background:url('../images/ico_left_account_settings.png') no-repeat center} .menu_ico7:before{content:'';display:inline-block;width:40px;height:100%;background:url('../images/ico_left_withdrawal.png') no-repeat center} .pg-mypage .sidemenu .menu > li.on > a{color:var(--main-color)} .pg-mypage .sidemenu .menu > li.on > a:before{filter:var(--main-color-filter)} .pg-mypage .sidemenu .menu > li.on > a:after{filter:var(--main-color-filter);transform:rotate(180deg)} .pg-mypage .sidemenu .menu > li > a .cnt{color:var(--main-color);margin:0 5px} .pg-mypage .sidemenu .menu > li.child > a:after{content:'';position:absolute;right:0;width:40px;height:100%;background:url('../images/ico_left_arrow.png') no-repeat center;transition:0.3s} .pg-mypage .sidemenu .sub{display:none;padding:20px 40px 40px;} .pg-mypage .sidemenu .sub li{} .pg-mypage .sidemenu .sub li a{display:block;line-height:30px;font-size:1rem} .pg-mypage .sidemenu .sub li a:hover{color:var(--main-color)} /*mypage 좌측메뉴 세부페이지*/ .pg-mypage .sidemenu-sub{display:flex;width:400px;border-right:1px solid var(--border-color);background:var(--main-color-light)} .pg-mypage .sidemenu-sub .menu{background:#fff;padding:0 10px;border-right:1px solid var(--border-color)} .pg-mypage .sidemenu-sub .menu > li{width:40px} .pg-mypage .sidemenu-sub .menu > li > a{display:flex;align-items:center;height:60px;line-height:60px;font-size:1.19rem;border-bottom:1px solid var(--border-color);font-size:0} .pg-mypage .sidemenu-sub .menu > li.on > a{color:var(--main-color)} .pg-mypage .sidemenu-sub .menu > li.on > a:before{filter:var(--main-color-filter)} .pg-mypage .sidemenu-sub .sub{flex:1;padding:0 20px;line-height:60px} .pg-mypage .sidemenu-sub .sub dt{font-size:1.31rem;color:#000} .pg-mypage .sidemenu-sub .sub dd a{display:flex;gap:10px;align-items:center; font-size:1.19rem;border-bottom:1px solid var(--border-color)} .pg-mypage .sidemenu-sub .sub dd a .cnt{color:var(--main-color);margin-left:-5px} .pg-mypage .sidemenu-sub .sub dd a:before{content:'';display:inline-block;width:5px;height:5px;background:#555;border-radius:50%} .pg-mypage .sidemenu-sub .sub dd a:hover{color:var(--main-color)} .pg-mypage .sidemenu-sub .sub dd a:hover:before{background:var(--main-color)} /*mypage 프로그래스 게시판*/ .progress_sec ul{display:flex;flex-direction: column;gap:20px} .progress_sec li{display:flex;gap:30px;align-items:center;flex-wrap:wrap; border:1px solid var(--border-color);border-radius:var(--border-radius);padding:20px} .progress_sec .thumb{position:relative;border-radius:var(--border-radius);overflow:hidden;margin:0 auto} .progress_sec .info{flex:1 1 450px;display:flex;flex-direction:column;gap:10px} .progress_sec .info .ico span{display:inline-block;line-height:30px;padding:0 15px;border-radius:30px;color:#fff;font-size:0.88rem;background:var(--ico-color2)} .progress_sec .info .subject{font-size:2rem;font-weight:500} .progress_sec .info .period{font-size:1.19rem;padding-left:30px;background:url('../images/ico_calenda.png') no-repeat 0 center} .progress_sec .info .name{font-size:1.13rem;padding-left:30px;background:url('../images/ico_person.png') no-repeat 0 center} .progress_sec .info .progress{display:flex;gap:10px;align-items:center;font-size:0.88rem;color:var(--main-color);margin-top:20px;padding-left:30px;background:url('../images/ico_progress.png') no-repeat 0 center} .progress_sec .info .progress .bar{display:inline-block;position:relative;width:50%;height:32px;border-radius:30px;background:#f2f2f2;overflow:hidden} .progress_sec .info .progress .bar i{display:block;height:100%;background:var(--main-color);border-radius:30px} .progress_sec .info .more{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;} .add_sec{background:var(--bg-gray);padding:20px 20px;font-size:1rem;border-radius:var(--border-radius-small)} /*mypage 정보*/ .my_sec{display:flex;gap:10px;flex-wrap:wrap;} .my_sec .my_con{flex:1 1 300px;display:flex;gap:10px;align-items:center; border:1px solid #ddd;border-radius:var(--border-radius-small);padding:20px;} .my_sec .my_con .result{display:flex;justify-content:center;align-items:center;width:54px;font-size:1.88rem;font-weight:600;color:var(--main-color);height:54px;border-radius:50%;box-shadow:0 0 10px rgba(1,135,248,0.2);overflow:hidden} .my_sec .my_con .result img{width:100%;height:100%;object-fit: cover} .my_sec .my_con .tit{flex:1;font-size:1rem} .my_sec .my_con .tit .name{display:block;font-size:1.13rem} .my_sec .my_con .tit .mail{display:block;font-size:0.88rem;color:var(--text-gray)} .my_sec .my_con a{display:flex;justify-content:center;align-items:center;background:var(--main-color);width:45px;height:45px;border-radius:50px;text-indent:-9999px;} .my_sec .my_con.item1 a{background:url('../images/ico_my_pencil.png') no-repeat center} .my_sec .my_con.item2 a{background:url('../images/ico_my_progress.png') no-repeat center} .my_sec .my_con.item3 a{background:url('../images/ico_my_expiring.png') no-repeat center} .my_sec .my_con.item4 a{background:url('../images/ico_my_complete.png') no-repeat center} /*mypage 최신글*/ .latest_sec{display:flex;gap:20px;flex-wrap:wrap;} .latest_sec > div{flex:1 1 450px;display:flex;flex-direction: column} .latest_sec ul{flex:1;border:1px solid #ddd;border-radius:var(--border-radius-small);padding:20px;min-height:160px} .latest_sec ul li.nodata{text-align:center;background:var(--bg-gray);justify-content:center;height:100%} .latest_sec li{display:flex;gap:20px;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding:15px 10px} .latest_sec li:last-child{border-bottom:0} .latest_sec li .category{display:block;font-size:0.94rem;color:var(--text-gray-light)} .latest_sec li .info{flex:1} .latest_sec li .info .subject{display:flex;gap:10px;align-items:center; font-size:1.06rem;margin-top:5px} .latest_sec li .info .subject .status{display:inline-block;height:20px;line-height:20px;font-size:11px;color:#fff;background:var(--ico-color1);padding:0 10px;border-radius:20px} .latest_sec li .info .subject .pending{background:var(--ico-color4)} .latest_sec li .info .subject .ico{flex-shrink:0} .latest_sec li .date{font-size:0.88rem;color:var(--text-gray-light)} /*mypage > my classroom*/ .evaluation_sec .h3_tit{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap} .evaluation_sec .h3_tit .tip{display:flex;gap:15px;font-size:12px;padding:2px 0} .evaluation_sec .h3_tit .tip span{display:flex;align-items:center;gap:5px} .evaluation_sec .h3_tit .tip span:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#333} .evaluation_sec .h3_tit .tip .color1{color:var(--stext-color1)} .evaluation_sec .h3_tit .tip .color1:before{background:var(--stext-color1)} .evaluation_sec .h3_tit .tip .color2{color:var(--stext-color2)} .evaluation_sec .h3_tit .tip .color2:before{background:var(--stext-color2)} .evaluation_sec .h3_tit .tip .color3{color:var(--stext-color3)} .evaluation_sec .h3_tit .tip .color3:before{background:var(--stext-color3)} .evaluation_sec .h3_tit .tip .color4{color:var(--stext-color4)} .evaluation_sec .h3_tit .tip .color4:before{background:var(--stext-color4)} .evaluation_sec .h3_tit .tip .color5{color:var(--stext-color5)} .evaluation_sec .h3_tit .tip .color5:before{background:var(--stext-color5)} .evaluation_sec .h3_tit a{display:inline-block;padding-right:15px;background:url('../images/ico_arrow-right-gray.png') no-repeat 100% center;font-size:1.25rem;color:var(--text-gray-light);margin-left:auto} .evaluation_sec .list{display:flex;gap:10px;flex-wrap:wrap} .evaluation_sec .list li{flex:1 1 250px;border:1px solid #333;border-radius:var(--border-radius-small);padding:10px 20px} .evaluation_sec .list li.color1{border-color:var(--stext-color1)} .evaluation_sec .list li.color1 a .tit{color:var(--stext-color1)} .evaluation_sec .list li.color1 a .tit:after{content:'';padding-right:15px;background:url('../images/ico_arrow-right-color1.png') no-repeat 100% 60%} .evaluation_sec .list li.color2{border-color:var(--stext-color2)} .evaluation_sec .list li.color2 a .tit{color:var(--stext-color2)} .evaluation_sec .list li.color2 a .tit:after{content:'';padding-right:15px;background:url('../images/ico_arrow-right-color2.png') no-repeat 100% 60%} .evaluation_sec .list li.color3{border-color:var(--stext-color3)} .evaluation_sec .list li.color3 a .tit{color:var(--stext-color3)} .evaluation_sec .list li.color3 a .tit:after{content:'';padding-right:15px;background:url('../images/ico_arrow-right-color3.png') no-repeat 100% 60%} .evaluation_sec .list li.color4{border-color:var(--stext-color4)} .evaluation_sec .list li.color4 a .tit{color:var(--stext-color4)} .evaluation_sec .list li.color4 a .tit:after{content:'';padding-right:15px;background:url('../images/ico_arrow-right-color4.png') no-repeat 100% 60%} .evaluation_sec .list li.color5{border-color:var(--stext-color5)} .evaluation_sec .list li.color5 a .tit{color:var(--stext-color5)} .evaluation_sec .list li.color5 a .tit:after{content:'';padding-right:15px;background:url('../images/ico_arrow-right-color5.png') no-repeat 100% 60%} .evaluation_sec .list li a{display:flex;gap:10px;flex-direction: column} .evaluation_sec .list li a .tit{font-size:1.13rem;font-weight:600} .evaluation_sec .list li a .info{min-height:40px;font-size:0.88rem;color:var(--text-gray)} .evaluation_sec .list li a .time{font-size:0.81rem;color:var(--text-gray-light);padding-left:20px;background:url('../images/ico_clock_min.png') no-repeat 0 center} /*mypage > my classroom*/ .syllabus_sec .h3_tit{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap} .syllabus_sec .h3_tit .add{font-size:0.94rem;color:var(--main-color);font-weight:500} .syllabus_sec .h3_tit .tip{flex:1;display:flex;gap:15px;font-size:0.75rem;padding:2px 0;} .syllabus_sec .h3_tit .tip span{display:flex;align-items:center;gap:5px;padding-left:15px} .syllabus_sec .h3_tit .tip span.is-completed{background:url('../images/ico_sylla_tit_check.png') no-repeat 0 center} .syllabus_sec .h3_tit .tip span.is-inProgress{background:url('../images/ico_sylla_tit_pro.png') no-repeat 0 center} .syllabus_sec .h3_tit .tip span.is-notSubmitted{background:url('../images/ico_sylla_tit_not.png') no-repeat 0 center} .syllabus_sec .h3_tit .tip span.is-currentLesson{background:url('../images/ico_sylla_tit_cor.png') no-repeat 0 center} .syllabus_sec .h3_tit .check{display:flex;gap:4px;align-items:center;font-size:12px;color:var(--text-gray-light)} .syllabus_sec .list{border:1px solid var(--border-color);border-radius:var(--border-radius-small)} .syllabus_sec .list > li{border-bottom:1px solid var(--border-color);} .syllabus_sec .list > li:last-child{border-bottom:0} .syllabus_sec .list .tit_con{display:flex;justify-content:space-between;align-items:center;padding:0 20px;line-height:50px;cursor:pointer} .syllabus_sec .list .tit_con .subject{display:flex;gap:10px;align-items:center; font-size:0.94rem} .syllabus_sec .list .tit_con .subject:before{content:'';display:inline-block;width:20px;height:20px;background:url('../images/ico_sylla_tit_arrow.png') no-repeat center} .syllabus_sec .list .tit_con .info{font-size:0.81rem;color:var(--text-gray-light)} .syllabus_sec .list .info_con{display:none;background:var(--bg-gray);color:var(--text-gray)} .syllabus_sec .list .info_con li{display:flex;gap:10px;border-top:1px dashed var(--border-color);line-height:26px;font-size:0.88rem;padding:10px 20px} .syllabus_sec .list .info_con li:first-child{border-top:1px solid var(--border-color)} .syllabus_sec .list .info_con li .subject{flex:1;display:flex;gap:10px;align-items:center; font-size:0.88rem} .syllabus_sec .list .info_con li .subject:before{content:'';display:inline-block;width:20px;height:20px;} .syllabus_sec .list .info_con li.is-completed .subject:before{background:url('../images/ico_sylla_tit_check.png') no-repeat center} .syllabus_sec .list .info_con li.is-inProgress .subject:before{background:url('../images/ico_sylla_tit_pro.png') no-repeat center} .syllabus_sec .list .info_con li.is-notSubmitted .subject:before{background:url('../images/ico_sylla_tit_not.png') no-repeat center} .syllabus_sec .list .info_con li.is-currentLesson .subject:before{background:url('../images/ico_sylla_tit_cor.png') no-repeat center} .syllabus_sec .list .info_con li .subject .icos{display:inline-block;width:20px;height:20px} .syllabus_sec .list .info_con li .subject .ico1{background:url('../images/ico_sylla_nth1.png') no-repeat center} .syllabus_sec .list .info_con li .subject .ico2{background:url('../images/ico_sylla_nth2.png') no-repeat center} .syllabus_sec .list .info_con li .subject .ico3{background:url('../images/ico_sylla_nth3.png') no-repeat center} .syllabus_sec .list .info_con li .subject .ico4{background:url('../images/ico_sylla_nth4.png') no-repeat center} .syllabus_sec .list .info_con li .subject .ico5{background:url('../images/ico_sylla_nth5.png') no-repeat center} .syllabus_sec .list .info_con li .subject .ico6{background:url('../images/ico_sylla_nth6.png') no-repeat center} .syllabus_sec .list .info_con li .subject .ico7{background:url('../images/ico_sylla_nth7.png') no-repeat center} .syllabus_sec .list .info_con li .subject .ico8{background:url('../images/ico_sylla_nth8.png') no-repeat center} .syllabus_sec .list .info_con li .subject .ico9{background:url('../images/ico_sylla_nth9.png') no-repeat center} .syllabus_sec .list .info_con li .info{flex:1;display:flex;gap:20px;justify-content:flex-end;align-items:center;} .syllabus_sec .list .info_con li .info .period{flex:1;padding-left:20px;background:url('../images/ico_sylla_calenda.png') no-repeat 0 center;} .syllabus_sec .list .info_con li .info .desc{display:flex;gap:20px} .syllabus_sec .list .info_con li .info .desc .resources{padding-right:30px;background:url('../images/ico_box_down.png') no-repeat 100% center;cursor:pointer} .syllabus_sec .list .info_con li .info .desc .time{padding-right:30px;background:url('../images/ico_box_clock.png') no-repeat 100% center} /*mypage 카피라이터*/ .copyright_sec{background:var(--bg-gray);text-align:center;padding:25px 0;margin-top:20px;font-size:1.19rem} /*경고창*/ .alert_win{display:none;position:fixed;justify-content: center;align-items:center;left:0;right:0;top:0;bottom:0} .alert_win.on{display:flex;} .alert_win .box{position:relative;width:min(90vw,660px);background:#fff;border-radius:30px;box-shadow:var(--box-shadow-alert);padding:25px;} .alert_win .box .close{position:absolute;right:25px;top:25px;width:22px;height:22px;background:url('../images/btn_close.png') no-repeat center;cursor:pointer} .alert_win .box p{font-size:1.44rem;;font-weight:600;padding:30px 20px 60px} .alert_win .box .more{display:flex;justify-content: flex-end;gap:10px} .alert_win .box .more a{line-height:40px;padding:0 30px;font-size:1.06rem;border:1px solid var(--border-color);border-radius:var(--border-radius-small)} .alert_win .box .more a.ok{background:var(--main-color);border:0;color:#fff} /*devlopment*/ .md-visual{display:flex;justify-content: center;align-items: center;gap:0.3rem;flex-direction: column;height:15.6rem;background:url('../images/sub/dev_visual.jpg') no-repeat center /cover} .md-visual .slogan{color:#fff;font-size:2.19rem} .md-visual .desc{color:#fff;font-size:1.5rem} .md-path{background:var(--bg-gray);border:1px solid #eee;border-width:1px 0} .md-path .container{flex:1;display:flex;gap:8px;align-items:center;line-height:3.75rem} .md-path .home{width:20px;height:20px;background:url('../images/ico_home.png') no-repeat center /14px;text-indent:-9999px;opacity:0.6} .md-path a{font-size:0.88rem;font-weight:400;background:url('../images/ico_arrow-path.png') no-repeat 0 center;padding-left:12px;color:var(--text-gray-light)} .aside_layout{padding:3.75rem 0} .aside_layout .container{display:flex;gap:30px} .aside_layout .aside_con{display:flex;flex-direction: column;gap:20px;width:300px} .aside_layout .content{flex:1;min-width:0}/*늘어남방지*/ .aside_layout.-reverse .aside_con{order:1} .aside_con__coursesView{padding:1.25rem} .aside_con__coursesView .tit{font-size:1.06rem;font-weight:600;line-height:1.2} .aside_con__coursesView .sale{display:flex;justify-content:space-between;margin:15px 0} .aside_con__coursesView .sale .dc{font-size:0.69rem;color:#ff1a1a} .aside_con__coursesView .sale .price{text-align:right} .aside_con__coursesView .sale .price span{font-size:0.88rem;color:#aaa} .aside_con__coursesView .sale .price strong{color:var(--main-color);font-size:1.19rem;} .aside_con__coursesView .info{background:#f5f5f5;border:1px solid #eee;border-width:1px 0;padding:0.5rem 1rem} .aside_con__coursesView .info li{display:flex;justify-content: space-between;font-size:0.81rem;color:var(--text-gray);margin:5px 0} .aside_con__coursesView .info li .stit{} .aside_con__coursesView .info li .price{} .aside_con__coursesView .total{display:flex;justify-content: space-between;margin:15px 0;} .aside_con__coursesView .total .stit{font-size:0.88rem;color:var(--text-gray)} .aside_con__coursesView .total .price{font-size:1.19rem;color:var(--main-color)} .aside_con__coursesView .btn{display:flex;gap:5px} .aside_con__coursesView .btn a{flex:1;line-height:2.5rem} @media all and (max-width:1024px){ .aside_layout.-reverse .container{flex-direction:column} .aside_layout.-reverse .aside_con{order:0;width:auto} } .aside_con__search{display:flex;height:3.13rem;line-height:3.13rem;border-radius:3.13rem;overflow:hidden} .aside_con__search input[type="text"]{flex:1;line-height:3.13rem;width:auto;border:0} .aside_con__search input[type="submit"]{width:3.13rem;height:100%;background:url('../images/input-search.png') no-repeat center;border:0;text-indent:-9999px;opacity:0.5;cursor:pointer} .aside_con__search .close{width:3.13rem;height:100%;background:url('../images/input-close.png') no-repeat center} .aside_con__category{} .aside_con__category .tit{background:var(--main-color);text-align:center;font-size:1.13rem;color:#fff;line-height:3.75rem} .aside_con__category .menu{padding:0 10px} .aside_con__category .menu ul{display:none} .aside_con__category .menu > li {border-top:1px solid #eee} .aside_con__category .menu > li a{display:block;padding:0 10px} .aside_con__category .menu > li.child > a{background:url('../images/aside_arrow.png') no-repeat calc(100% - 10px) center} .aside_con__category .menu > li.child.on > a{background:url('../images/aside_arrow-up.png') no-repeat calc(100% - 10px) center} .aside_con__category .menu > li:first-child{border-top:0} .aside_con__category .menu > li > a{line-height:55px;font-size:1rem} .aside_con__category .menu > li > ul > li{background:#f8f8f8;border-radius:5px;margin:5px 0;padding:0 10px} .aside_con__category .menu > li > ul > li.on{background:var(--main-color-light)} .aside_con__category .menu > li > ul > li > a{line-height:50px;font-size:0.94rem} .aside_con__category .menu > li > ul > li.child > a{background:url('../images/aside_plus.png') no-repeat calc(100% - 2px) center} .aside_con__category .menu > li > ul > li.child.on > a{background:url('../images/aside_minus.png') no-repeat calc(100% - 2px) center} .aside_con__category .menu > li > ul > li > ul{border-top:1px solid #eee;padding:10px 0} .aside_con__category .menu > li > ul > li > ul > li > a{line-height:30px;;font-size:0.94rem} .aside_con__category .menu > li > ul > li > ul > li > a:hover{color:var(--main-color)} .aside_con__ratings{padding:10px} .aside_con__ratings .tit{border-bottom:1px solid #eee;line-height:2.5rem;padding:0 10px;font-weight:500} .aside_con__ratings ul{padding:10px 0} .aside_con__ratings li{display:flex;gap:10px;align-items:center; padding:5px;} .aside_con__ratings li:before{content:'';width:10px;height:10px;border-radius:50%;border:1px solid #ddd} .aside_con__ratings li .vote{font-size:0.88rem} .aside_con__ratings li .vote i{font-size:12px;color:#666;margin:0 5px} .top10_sec{position:relative;padding:30px;} .top10_sec .htit{font-size:1.44rem;} .top10_sec .htit strong{color:var(--main-color)} .top10_sec .swiper{margin-top:1.5rem;} .top10_sec .thumb{} .top10_sec .thumb img{width:100%} .top10_sec .info{position:absolute;width:100%;bottom:0;color:#fff;padding:1.25rem;background:linear-gradient(0deg, rgba(0,0,0,0.1), transparent)} .top10_sec .info .subject{font-size:1.06rem} .top10_sec .info .num{padding-left:25px;background:url('../images/ico_certificate-w.png') no-repeat 0 center;font-size:0.88rem;margin-top:10px} .topCourse_sec{background:var(--main-color-light);padding:3rem 0 3rem;border-bottom:1px solid #eee} .topCourse_sec .container{display:flex;gap:2rem} .topCourse_sec .thumb_con{flex:1} .topCourse_sec .thumb_con a{display:block;position:relative;border-radius:var(--border-radius-large);overflow:hidden;;aspect-ratio:1/0.7;} .topCourse_sec .thumb_con a:before{content:'';position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;background: url('../images/btn_video-play.png') no-repeat center /11%;} .topCourse_sec .thumb_con a img{width:100%;height:100%;object-fit: cover; filter:brightness(0.4)} .topCourse_sec .info_con{position:relative;flex:1.3;display:flex;flex-direction: column;gap:10px;font-size:1rem;color:var(--text-gray)} .topCourse_sec .info_con .wish{position:absolute;z-index:10;right:0;top:0;width:23px;height:21px;background:url('../images/ico_wish-gray.png') no-repeat center;cursor:pointer} .topCourse_sec .info_con .wish.on{background-image: url('../images/ico_wish_on.png')} .topCourse_sec .info_con .subject{font-size:1.88rem;color:var(--main-color);font-weight:600} .topCourse_sec .info_con .desc{} .topCourse_sec .info_con .tag{} .topCourse_sec .info_con .my{margin-top:10px;display:flex;gap:10px;align-items: center;} .topCourse_sec .info_con .my .photo{width:44px;height:44px;border-radius:50%;overflow: hidden;border:1px solid #ddd} .topCourse_sec .info_con .my .name{} .topCourse_sec .info_con .rate{display:flex;gap:10px;font-size:0.81rem} .topCourse_sec .info_con .rate .star{display:flex;gap:5px;align-items:center} .topCourse_sec .info_con .rate .vote{text-decoration:underline} .topCourse_sec .info_con .share{display:flex;gap:5px;align-items:center; position:absolute;right:0;bottom:0} .topCourse_sec .info_con .share dt{margin-right:10px} @media all and (max-width:840px){ .topCourse_sec .container{flex-direction: column} } .reviewInfo_sec{background:#1d2f3b;padding:10px 0;color:#fff} .reviewInfo_sec .container{display:flex;} .reviewInfo_sec .container > div{flex:1;display:flex;justify-content:center;align-items:center; gap:15px; border-left:1px solid rgba(255,255,255,0.5)} .reviewInfo_sec .container > div:first-child{border-left:0} .reviewInfo_sec .info{display:flex;flex-direction: column;padding:10px 0} .reviewInfo_sec .tit{font-size:0.88rem} .reviewInfo_sec .result{font-size:1.38rem;font-weight:600;margin-top:-5px} @media all and (max-width:840px){ .reviewInfo_sec .container{flex-wrap:wrap;gap:5px 0} .reviewInfo_sec .container > div{flex:none;;width:50%} .reviewInfo_sec .container > div:nth-child(2n+1){border-left:0} } .md-listIco ul{display:flex;gap:0.63rem;text-align:center} .md-listIco ul li{flex:1;border:1px solid #ddd;border-radius:0.63rem;padding:1rem 5px} .md-listIco ul li .ico{padding:10px 0} .md-listIco ul li .desc{font-size:0.88rem;color:var(--text-gray)} @media all and (max-width:840px){ .md-listIco ul{flex-wrap:wrap} .md-listIco ul li{flex:none;width:calc((100% - 0.63rem)/2)} } .md-banner{margin:0.88rem 0} .md-list{position:relative;margin:0.63rem 0} .md-list ul{font-size:0.94rem;color:var(--text-gray);} .md-list li{margin:2px 0} .md-list .-dot li{padding-left:10px;text-indent:-5px;} .md-list .-dot li:before{display:inline-block;content:'ㆍ';font-weight:800;} .md-list.-btn ul{padding-right:200px} .md-list.-btn a{position:absolute;right:0;transform:translateY(-100%)} .md-table{margin:0.63rem 0} .md-table table{border-collapse: collapse;width:100%} .md-table th, .md-table td{padding:0.63rem 2px;border:1px solid #eee} .md-table th{background:#f4f7fb;font-weight:500} .syllabus_sec--simple .list{border:1px solid var(--border-color);border-radius:var(--border-radius-small)} .syllabus_sec--simple .list > li{border-bottom:1px solid var(--border-color);} .syllabus_sec--simple .list > li:last-child{border-bottom:0} .syllabus_sec--simple .list .tit_con{display:flex;justify-content:space-between;align-items:center;padding:0 20px;line-height:50px;cursor:pointer} .syllabus_sec--simple .list .tit_con .subject{display:flex;gap:10px;align-items:center; font-size:0.94rem;font-weight:500} .syllabus_sec--simple .list .tit_con .subject:before{content:'';display:inline-block;width:20px;height:20px;background:url('../images/ico_sylla_tit_arrow.png') no-repeat center} .syllabus_sec--simple .list .tit_con .info{font-size:0.88rem;color:var(--text-gray)} .syllabus_sec--simple .list .info_con{display:none;background:var(--bg-gray);color:var(--text-gray);padding:10px 20px;border-top:1px solid var(--border-color)} .syllabus_sec--simple .list .info_con li{display:flex;gap:10px;font-size:0.88rem;padding:5px 0} .syllabus_sec--simple .list .info_con li .subject{flex:1;display:flex;gap:10px;align-items:center} .syllabus_sec--simple .list .info_con li .subject .icos{display:inline-block;width:20px;height:20px} .syllabus_sec--simple .list .info_con li .subject .ico1{background:url('../images/ico_sylla_nth1.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .ico2{background:url('../images/ico_sylla_nth2.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .ico3{background:url('../images/ico_sylla_nth3.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .ico4{background:url('../images/ico_sylla_nth4.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .ico5{background:url('../images/ico_sylla_nth5.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .ico6{background:url('../images/ico_sylla_nth6.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .ico7{background:url('../images/ico_sylla_nth7.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .ico8{background:url('../images/ico_sylla_nth8.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .ico9{background:url('../images/ico_sylla_nth9.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .cont{} .syllabus_sec--simple .list .info_con li .subject .cont .em{display:inline-block;height:18px;line-height:18px;border:1px solid var(--main-color);color:var(--main-color);border-radius:20px;padding:0 5px;margin-right:3px;font-size:11px} .syllabus_sec--simple .list .info_con li .info{flex:1;display:flex;gap:20px;justify-content:flex-end;align-items:center;color:var(--text-gray-light)} @media all and (max-width:1024px){ .syllabus_sec--simple .h3_tit .tip{flex-wrap:wrap;flex:1 1 100%} .syllabus_sec--simple .list .info_con li{} .syllabus_sec--simple .list .info_con li .info{flex-direction: column;gap:2px;align-items:flex-end} } @media all and (max-width:640px) { .syllabus_sec--simple .list .tit_con{padding:10px 10px;line-height:20px} .syllabus_sec--simple .list .info_con li{flex-direction: column} } .textbook_sec{margin:0.63rem 0} .textbook_sec ul{display:flex;flex-direction: column;gap:0.63rem} .textbook_sec li{display:flex;gap:2rem;align-items:center; padding:0.63rem} .textbook_sec .thumb_con{flex:1;position:relative;background:var(--bg-gray);text-align:center;max-width:250px} .textbook_sec .thumb_con a{display:block;padding:1.5rem} .textbook_sec .thumb_con a img{width:100%;max-width:150px;border-radius:var(--border-radius);box-shadow:var(--box-shadow-large)} .textbook_sec .info_con{flex:1;} .textbook_sec .info_con .subject{font-size:1.31rem;font-weight:600;margin:1rem 0 0.63rem} .textbook_sec .info_con .desc{font-size:0.94rem;color:var(--text-gray)} .textbook_sec .info_con .info{display:flex;gap:15px;align-items:center; margin-top:2rem;color:var(--text-gray-light);font-size:0.88rem} .textbook_sec .info_con .info span{display:flex;gap:5px;align-items:center} .textbook_sec .info_con .info .writer:before{content:'';display:inline-block;width:20px;height:20px;background:url('../images/ico_person.png') no-repeat center;opacity:0.5} .textbook_sec .info_con .info .company:before{content:'';display:inline-block;width:20px;height:20px;background:url('../images/ico_company.png') no-repeat center;opacity:0.5} @media all and (max-width:480px){ .textbook_sec li{flex-direction: column;align-items:unset} .textbook_sec li .thumb_con{max-width:none} .textbook_sec .info_con{padding:5px} } .teacher_sec{margin:0.63rem 0} .teacher_sec ul{display:flex;flex-direction: column;gap:0.63rem} .teacher_sec li{display:flex;gap:2rem;align-items:center; padding:2rem 0.63rem} .teacher_sec .thumb_con{flex:1;max-width:250px;text-align:center} .teacher_sec .thumb_con img{width:100%;max-width:150px;} .teacher_sec .info_con{flex:1;} .teacher_sec .info_con .name{display:flex;gap:10px;align-items: baseline; font-size:1.56rem;font-weight:600} .teacher_sec .info_con .name span{font-size:1rem;font-weight:400;color:var(--text-gray)} .teacher_sec .info_con .desc{font-size:1rem;color:var(--text-gray);margin:0.63rem 0} .teacher_sec .info_con .info{display:flex;gap:15px;align-items:center; margin:1.5rem 0;color:var(--text-gray);font-size:0.88rem} .teacher_sec .info_con .info span{display:flex;gap:5px;align-items:center} .teacher_sec .info_con .info .star:before{content:'';display:inline-block;width:20px;height:20px;background:url('../images/ico_star.png') no-repeat center} .teacher_sec .info_con .info .courses:before{content:'';display:inline-block;width:20px;height:20px;background:url('../images/ico_monitor.png') no-repeat center} .teacher_sec .info_con .info .graduation:before{content:'';display:inline-block;width:20px;height:20px;background:url('../images/ico_gHat.png') no-repeat center} .teacher_sec .info_con .more{} .teacher_sec .info_con .more a{display:inline-block;font-size:12px;color:#fff;line-height:30px;background:var(--main-color);padding:0 20px;font-weight:600} @media all and (max-width:480px){ .teacher_sec li{flex-direction: column;align-items:unset} .teacher_sec .thumb_con{max-width:none} .teacher_sec .info_con{padding:5px} } .packages_sec .h4_tit{display:flex;justify-content:space-between} .packages_sec .h4_tit .controls{display:flex;gap:5px} .topRatedCourse_sec{background:var(--main-color-light);padding:1px 0 5rem;border-bottom:1px solid #eee} .topRatedCourse_sec .course_con{position:relative;width:90%;margin:0 auto} .topRatedCourse_sec .course_con .swiper-wrapper{align-items:flex-end} @media all and (max-width:1024px){ .topRatedCourse_sec .course_con{width:75%;max-width:730px;margin:2.5rem auto;} } @media all and (max-width:640px){ .topRatedCourse_sec .container{padding:0} .topRatedCourse_sec .course_con{width:100%;max-width:730px;margin:2.5rem auto;} .topRatedCourse_sec .swiper-button-prev, .topRatedCourse_sec .swiper-button-next{display:none} } .board_list{margin:3rem 0} .board_list .sort_con{display:flex;justify-content:space-between;align-items:flex-end; margin:1.5rem 0} .board_list .sort_con .type{display:flex;gap:0} .board_list .sort_con .type span{width:30px;height:30px;text-indent:-9999px} .board_list .sort_con .type .grid_cols{background:url('../images/ico_grid_cols.png') no-repeat center} .board_list .sort_con .type .grid_cols.on{background:url('../images/ico_grid_cols_on.png') no-repeat center} .board_list .sort_con .type .grid_row{background:url('../images/ico_grid_row.png') no-repeat center} .board_list .sort_con .type .grid_row.on{background:url('../images/ico_grid_row_on.png') no-repeat center} .board_list .pagination_con{display:flex;justify-content:center;gap:2px; margin:2rem 0;} .board_list .pagination_con .prev-group{text-indent:-9999px;background:url('../images/page-prev-group.png') no-repeat center} .board_list .pagination_con .prev{text-indent:-9999px;background:url('../images/page-prev.png') no-repeat center;margin-right:10px} .board_list .pagination_con a{font-size:0.88rem;color:#888;min-width:25px;height:25px;line-height:25px;text-align:center;border-radius:50%} .board_list .pagination_con a.on{min-width:25px;background:var(--main-color-light);color:var(--main-color)} .board_list .pagination_con .next{text-indent:-9999px;background:url('../images/page-next.png') no-repeat center;margin-left:10px} .board_list .pagination_con .next-group{text-indent:-9999px;background:url('../images/page-next-group.png') no-repeat center} .board_list.-review{margin-top:1.25rem} .board_list.-review .md-review{display:flex;flex-direction: column;gap:1.25rem} .board_list.-review .md-review > li{padding:1.5rem 2rem} .board_list.-review .md-review .info_con{padding-left:62px;margin:1rem 0} .board_list.-review .md-review .info_con .desc{display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden;} .board_list.-review .md-review .info_con.on .desc{display:block} .board_list.-review .md-review .info_con .more .on{display:none} .board_list.-review .md-review .info_con.on .more .on{display:block} .board_list.-review .md-review .info_con.on .more .off{display:none} @media all and (max-width:640px){ .board_list.-review .md-review .info_con{padding-left:0;} .board_list.-review .md-review .name{flex-direction: column;gap:5px} } @media all and (max-width:640px){ .board_list .pagination_con{gap:0;} .board_list .pagination_con a{min-width:20px} } /*footer***************************************************/ .footer {background: #1d2f3b;} .footer_sec1{padding:3.13rem 0} .footer_sec1 .sitemap .main-menu {display: flex;justify-content: space-between;} .footer_sec1 .sitemap .main-menu > li {} .footer_sec1 .sitemap .main-menu > li .tit {color:#fff;font-size:1.69rem;font-weight:600;} .footer_sec1 .sitemap .sub-menu {margin-top: 1.5rem;} .footer_sec1 .sitemap .sub-menu li {margin: 0.7rem 0;} .footer_sec1 .sitemap .sub-menu li a {color:#fff;font-size:1.13rem} .footer_sec2{border-top:1px solid rgba(255,255,255,0.1);padding:3.13rem 0} .footer_sec2 .inner{display:flex;gap:30px;align-items:center} .footer_sec2 .logo{} .footer_sec2 .copyright{font-size:0.85rem;color:#0585d9} .footer_sec2 .menu{flex:1;display:flex;gap:25px} .footer_sec2 .menu a{font-size:0.9rem;color:#fff;text-decoration:underline;text-underline-offset:5px} .footer_sec2 .sns{display:flex;gap:10px} .footer_sec2 .add{font-size:0.8rem;color:#fff;opacity:0.5;margin-top:10px} @media all and (max-width:1024px){ .footer_sec1 .sitemap .main-menu{display:block} .footer_sec1 .sitemap .main-menu > li{border-bottom:1px solid rgba(255,255,255,0.2)} .footer_sec1 .sitemap .main-menu > li .tit{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:400;padding:15px 5px;} .footer_sec1 .sitemap .main-menu > li .tit:after{content:'';width:20px;height:20px;background:url('../images/aside_arrow.png') no-repeat center;transition:0.3s} .footer_sec1 .sitemap .main-menu > li.is-on .tit:after{transform:rotate(180deg)} .footer_sec1 .sitemap .sub-menu{display:none;margin:0;padding:0 5px 10px;} .footer_sec1 .sitemap .sub-menu li a{opacity:0.7} .footer_sec2{border-top:0;padding-top:0} .footer_sec2 .inner{flex-wrap:wrap} .footer_sec2 .inner .logo img{max-height:40px} .footer_sec2 .inner .menu{flex:none;width:100%;gap:15px;flex-wrap:wrap} .footer_sec2 .add{margin-top:20px} } @media all and (max-width:1480px){ html{font-size:15px} .pg-mypage .header .h1{width:260px} .pg-mypage .sidemenu, .pg-mypage .sidemenu-sub{width:300px} .syllabus_sec .list .info_con li .info .desc{flex-direction:column;gap:2px;text-align:right} } @media all and (max-width:1280px){ html{font-size:14px} } @media all and (min-width:1025px){ .-mo{display:none !important} } /*이하 모바일*/ @media all and (max-width:1024px){ html{font-size:13px} .-pc{display:none !important} .container{padding:0 30px} .header .container{display:flex;justify-content:space-between;height:60px} .header .container h1 img{max-height:36px} .pg-mypage .contents .content{padding:15px 15px 0} .latest_sec ul{padding:5px} .progress_sec li{padding:10px} .syllabus_sec .h3_tit .tip{flex-wrap:wrap;flex:1 1 100%} .syllabus_sec .list .info_con li{} .syllabus_sec .list .info_con li .info{flex-direction: column;gap:2px;align-items:flex-end} .evaluation_sec .h3_tit .tip{order:3;width:100%;flex-wrap:wrap} } @media all and (max-width:640px) { html{font-size:12px} .container{padding:0 15px} .c-btn{max-width:none;line-height:40px} .syllabus_sec .list .tit_con{padding:10px 10px;line-height:20px} .syllabus_sec .list .info_con li{flex-direction: column} }