/************************************************* 마지막수정 2026-2-01 **************************************************/ /*기존스타일 덮어쓰기 시작*/ *{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*/} /* #wrap section{margin:5rem 0} */ .grayBox{background-color:#f4f7fb !important} html,body{min-height:100%;height:auto !important} body .img_banner_box{margin:2.5rem 0} body .img_banner_box .slick-list{} body .img_banner_box .slick-list .slick-slide{margin:0 2rem} body .img_banner_box .slick-dots{position:relative;bottom:auto;padding:20px 0 0} body .img_banner_box .slick-dots li + li{margin-left:12px} body .img_banner_box .slick-dots button{width:10px;height:10px;background:#ddd;border:0 !important} body .img_banner_box .slick-dots .slick-active button{background:var(--main-color) !important} body .slick-prev{display:block !important;background:url('/data/images/swiper-prev.png') no-repeat center } body .slick-next{display:block !important;background:url('/data/images/swiper-next.png') no-repeat center } @media all and (max-width:1480px){ body .img_banner_box .slick-list{} body .slick-prev{left:5%;} body .slick-next{right:5%} } @media all and (max-width:1024px){ body .img_banner_box .slick-list{} body .img_banner_box .slick-dots li + li{margin-left:10px} body .img_banner_box .slick-dots button{width:8px;height:8px} } @media all and (max-width:640px){ body .img_banner_box .slick-list{padding:0 0% !important;} body .img_banner_box .slick-list .slick-slide{margin:0 15px} body .slick-prev{display:block !important;left:0;background:url('/data/images/swiper-prev.png') no-repeat center /20px} body .slick-next{display:block !important;right:0;background:url('/data/images/swiper-next.png') no-repeat center /20px} } .login_cont .selectBox.login{top:-60px} select{padding-top:0 !important;padding-bottom:0 !important} .mem_cont input[type="text"], .mem_cont input[type="password"], .mem_cont input[value="우편번호 검색"]{height:40px !important;line-height:40px} /*기존스타일 덮어쓰기 끝*/ /*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} /*common*/ html{line-height:1.4} body{color:#333;font-family:'Pretendard', Pretendard, sans-serif;font-weight:normal;font-size:16px;} a, input[type="button"], input[type="submit"], input[type="reset"], button { cursor: pointer; } 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%} /* radio */ input[type="radio"] {-webkit-appearance:none; appearance:none;width:16px;height:16px;border:1px solid var(--border-color);border-radius:50%;display:inline-block;vertical-align:middle;box-sizing:border-box;background:#fff;position:relative; cursor:pointer;} input[type="radio"]::after {content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:8px; height:8px; border-radius:50%;background:transparent;transition:background 0.12s ease,width 0.12s ease,height 0.12s ease;} input[type="radio"]:checked {border:4px solid var(--main-color);} input[type="radio"]:checked::after {background:#fff; width:6px; height:6px;} input[type="radio"]:focus {outline:none; box-shadow:0 0 0 3px rgba(0,155,255,0.12);} /* checkbox */ input[type="checkbox"]{width:22px;min-width:22px;height:22px;min-height:22px;margin-right:8px; vertical-align:middle;-webkit-appearance:none;appearance:none;border:1px solid #ddd;background:#fff;border-radius:4px;display:inline-block;position:relative; cursor:pointer;} input[type="checkbox"]:after{content:'';position:absolute;left:6.5px; top:3px; width:4.5px; height:8px; border:3px solid transparent; border-left:none; border-top:none; transform:rotate(45deg); opacity:0;} input[type="checkbox"]:checked{background:var(--main-color) !important;border-color:var(--main-color) !important;} input[type="checkbox"]:checked:after{border-color:#fff;opacity:1;} :root{ /*:::color set2-보라색계열::: --main-color:#9a51ff; --main-color-light:#f5edff; --main-color-filter: invert(66%) sepia(95%) saturate(7500%) hue-rotate(246deg) brightness(95%) contrast(105%);*/ /*:::color set3-청록색계열::: --main-color:#00a7c0; --main-color-light:#e5f6f9; --main-color-filter: invert(54%) sepia(95%) saturate(3000%) hue-rotate(150deg) brightness(95%) contrast(100%);*/ /*:::color set4-오렌지색계열::: --main-color:#fdaf22; --main-color-light:#fffaf2; --main-color-filter: invert(62%) sepia(85%) saturate(3200%) hue-rotate(360deg) brightness(105%) contrast(105%);*/ --main-color:#009bff; --main-color-light:#f5fafe; --main-color-light2:#e5f5ff; --main-color-filter:invert(40%) sepia(100%) saturate(3000%) hue-rotate(185deg) brightness(90%) contrast(100%); --ico-color1:#009bff; /*blue*/ --ico-color2:#8839f6; /*purple*/ --ico-color3:#ff4f4f; /*pink*/ --ico-color4:#ff49cd; /*yellow*/ --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 7px rgba(0,0,0,0.15); --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;} input[type="text"], input[type="password"],select {height:40px;line-height:40px;border:1px solid var(--border-color);border-radius:var(--border-radius-small);padding:0 12px;} select{border:1px solid #eee;color:#888;border-radius:5px;height:40px;padding:0 25px 0 5px;background: url('/data/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} .md-input .checkbox input[type="checkbox"]:after{left:4px;top:1px;width:3px;height:6px} .md-input .checkbox label{cursor:pointer} /*_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;max-width:260px;display:inline-block;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;border:1px solid var(--btn-color1)} .c-btn.-bg2{background:var(--btn-color2);color:#fff} .c-btn.-bg3{background:var(--border-color);color:#fff} .c-btn.-closed{background:#4c4c4c;color:#fff;border:1px solid #4c4c4c;} .c-btn.-hide_reply{border:1px solid #ddd;color:#555;} .c-btn.-small{flex:1 1 130px;line-height:2.5rem;font-size:0.94rem} @media all and (max-width:1024px){ .c-btn{max-width:none} } .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-ico b.course{background:#fff;border:1px solid var(--main-color);color:var(--main-color);line-height:1.50rem} .c-wish{position:absolute;z-index:10;right:10px;top:10px;width:20px;height:20px;background:url('/data/images/ico_wish.png') no-repeat center /20px;cursor:pointer} .c-wish img {display:none;} .c-wish.-gray{background-image:url('/data/images/ico_wish-gray.png')} .c-wish.on{background-image: url('/data/images/ico_wish_on.png')} .c-wish.-large{right:1rem;top:1rem;width:23px;height:23px;background:url('/data/images/ico_wish.png') no-repeat center;cursor:pointer} .c-wish.-large.-gray{background-image:url('/data/images/ico_wish-gray.png')} .c-wish.-large.on{background-image: url('/data/images/ico_wish_on.png')} .point-color {color:var(--main-color);} .point-color2 {color:var(--btn-color2);} /* 라인아이콘 */ .line-ico {display:inline-flex;align-items:center;justify-content:center;min-width:4.38rem;padding:0 10px;border:1px solid var(--main-color);border-radius: 20px;background:#fff;font-size:0.88rem;color:var(--main-color);text-align:center;margin-right: 8px;} .nodata{display:flex;text-align: center;background: var(--bg-gray);justify-content: center;align-items:center;width:100%;min-height:100px;border-bottom:none !important;border-radius:5px;margin-bottom:10px;} /*head title*/ .h2_tit{margin:4rem 0 3rem} .h2_tit .tit{font-size:2.25rem;font-weight:800;color:#333;} .h3_tit{margin:2.5rem 0 1.25rem} .h3_tit .tit{font-size:1.56rem;color:#333;} .pg-mypage .h3_tit{margin-top:0.63rem} .h4_tit{display:flex;gap:10px;align-items:baseline;margin:2.5rem 0 0.88rem} .h4_tit .tit{font-size:1.56rem;} .h4_tit .tit.-star{background:url('/data/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*/ body .swiper{padding:1px} body .swiper-button-prev{width:6.25rem;height:6.25rem;background:url('/data/images/swiper-prev.png') no-repeat center;margin:0 !important;left:0 !important;transform: translate(-100%,-50%);} body .swiper-button-next{width:6.25rem;height:6.25rem;background:url('/data/images/swiper-next.png') no-repeat center;margin:0 !important;right:0 !important;transform: translate(100%,-50%)} body .swiper-button-prev svg, body .swiper-button-next svg{display:none} body .swiper-pagination-bullet{width:10px;height:10px;margin:0 6px !important;background:#ddd;opacity:1} body .swiper-pagination-bullet-active{background:var(--main-color)} body .swiper-pagination.-blank .swiper-pagination-bullet{border:1px solid #fff;background:none;opacity:0.6} body .swiper-pagination.-blank .swiper-pagination-bullet-active{background:#fff} body .swiper-controls{position:relative;display:flex;justify-content:center;align-items:center;margin-top:1rem} body .swiper-controls .swiper-pagination{display:flex;align-items:center;position:relative;width:auto;bottom:auto} body .swiper-controls .swiper-pagination-bullet{width:10px;height:10px;margin:0 5px !important;border-radius:10px;transition:0.3s} body .swiper-controls .swiper-button-prev, body .swiper-controls .swiper-button-next{transform: none} body .swiper-controls .swiper-button-prev{position:relative;width:20px;height:20px;background:url('/data/images/swiper-prev.png') no-repeat center /8px} body .swiper-controls .swiper-button-next{position:relative;width:20px;height:20px;background:url('/data/images/swiper-next.png') no-repeat center /8px} body .swiper-controls.-small .swiper-pagination-bullet{width:7px;height:7px;cursor:pointer;margin:0 4px !important} body .swiper-controls.-small .swiper-pagination-bullet-active{width:22px} body .swiper-controls.-small .swiper-button-prev{background:url('/data/images/swiper-prev-small.png') no-repeat center} body .swiper-controls.-small .swiper-button-next{background:url('/data/images/swiper-next-small.png') no-repeat center} body .swiper-prev, body .swiper-next{cursor:pointer} @media all and (max-width:840px){ body .swiper-button-prev, body .swiper-button-next{width:50px;height:50px;background-size:20px} body .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:9998;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('/data/images/ico_home.png') no-repeat center / 14px;text-indent:-9999px} .header .path a{font-size:0.88rem;font-weight:400;background:url('/data/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;font-weight:600;color:var(--main-color);line-height:100px;padding-right:15px;margin-right:15px;background:url('/data/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('/data/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;position: relative;}/*서브메뉴영역수정260110*/ .header .lnb_con .menu > li {position:relative} /*서브메뉴영역수정260110*/ .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 > li{position: static;}/*서브메뉴영역수정260110*/ .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;padding:10px 20px;font-size:0.81rem} .header .md-sub ul{display:none;position:absolute;left:calc(100% + 1px);top:0;width:100%;min-height: 100%;background:#fff;}/*서브메뉴영역수정260110*/ .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{display: flex;align-items: center;justify-content: center;width:54px;height:54px;border-radius:50%;border:3px solid var(--main-color);font-size:1.5rem;font-weight:700;color:#888;background:#f8f8f8;overflow:hidden} .header .my_con .photo.has{background: url(/data/images/my_photo.png) no-repeat center / cover;color: transparent;} .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('/data/images/ico_arrow-menu.png') no-repeat 100% center} .header .my_con:hover .sub{display:block} .header .language_con{margin-right:-20px } .language_con{position:relative;z-index:10;width:90px;height:28px;} .language_con select{height:28px;line-height:28px;border:0;font-size:12px;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('/data/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:9999;left:100%;top:0;width:100%;height:100%;background:#fff;overflow:auto;transition: 0.3s} .aside.on{left:0} .aside section{margin:0} .aside .head_sec{background:/*url('/data/images/aside_head_bg.png') no-repeat center /cover*/ var(--main-color)} .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('/data/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('/data/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;font-size:1rem} .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('/data/images/ico_search.png') no-repeat center} .aside .lnb_sec .menu ul{display:none;background:#f7fafc} .aside .lnb_sec .menu ul ul{background:#edf4f8} .aside .lnb_sec .menu ul ul ul{background:#e5eef4} .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('/data/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('/data/images/aside_arrow_color.png') no-repeat center;transform:rotate(180deg)} .aside .lnb_sec .menu > li > a .count{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('/data/images/msec1_img1.jpg') no-repeat center /cover} .main_sec1 .swiper-slide[data-swiper-slide-index="1"]{background:url('/data/images/msec1_img2.jpg') no-repeat center /cover} .main_sec1 .swiper-slide.nth1{background:url('/data/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)} @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('/data/images/msec1_img1_mo.jpg') no-repeat center /cover} .main_sec1 .swiper-slide[data-swiper-slide-index="1"]{background:url('/data/images/msec1_img2_mo.jpg') no-repeat center /cover} .main_sec1 .slogan{text-align:center;height:50%;transform:translateY(100%)} } @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} } /*visual*/ #visual{} #visual a{display:block;height:100%} #visual .container{display:flex;gap:2rem;height:100%;} #visual .text_con{flex:1;display:flex;height:100%;flex-direction:column;justify-content:center;height:100%;line-height:1.3} #visual .text_con h2{} #visual .text_con h2 > br{display:none} #visual .text_con .tit{font-size:2.5rem;font-weight:800;color:var(--main-color)} #visual .text_con .desc{font-size:1.19rem;color:var(--text-gray);margin-top:1.88rem;font-weight:400} #visual .text_con .more{display:inline-block;margin-top:3rem;line-height:50px;padding:0 20px;font-size:1.19rem;color:var(--main-color);font-weight:600;border:1px solid var(--main-color)} #visual .img_con{flex:1.5;display:flex;justify-content:center;align-items:center;height:100%} #visual .slick-list:after{content:'';display:block;clear:both} #visual .slick-dots{bottom:20px} #visual .slick-dots li{width:10px;height:10px;border-radius:50%;margin:0 5px;background:#ddd} #visual .slick-dots li.slick-active{background:var(--main-color)} #visual .dot_custom .slick-dots li{width:auto;height:auto;border-radius:unset} #visual .dot_custom .slick-dots li a{padding:0 1rem;line-height:2.5rem} @media all and (max-width:1024px){ #visual .sub_imgbox{height:auto !important} #visual .container{flex-direction:column;} #visual .text_con{order:1;text-align:center;} #visual .text_con .tit{font-size:2rem} #visual .text_con .desc{margin-top:1.5rem} #visual .text_con .more{margin-top:1.5rem;line-height:40px} #visual .slick-dots{position:relative;bottom:0;padding:2rem 0;text-align:center} } @media all and (max-width:680px){ #visual .dot_custom .slick-dots li{width:10px;height:10px;border-radius:50%;margin:0 5px;background:#ddd} #visual .dot_custom .slick-dots li a{padding:0 1rem;line-height:2.5rem;font-size:0} #visual .dot_custom .slick-dots li.slick-active{background:var(--main-color)} } .main_sec2 {padding:4rem 0 8rem;} .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 .tit, .main_sec3 .banner_con .swiper-slide h3{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{display:flex;gap:1.88rem;flex-direction:column;justify-content: center;align-items:center;color:#fff;height:100%;padding:25px 2rem 50px} .main_sec3 .banner_con .swiper-slide a > br{display:none} .main_sec3 .banner_con .swiper-slide a .more{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 {padding:4rem 0 8rem;} .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('/data/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_sec5 .list2 strong{font-size:2.5rem;} } .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;} } .main_sec7{padding:4rem 0 8rem} .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:0 1rem;min-height:7rem} .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;min-height:1.56rem} .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{padding:4rem 0 8rem} .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 .calenda_con .calendar{height:auto} .main_sec8 .schedule_con{flex:1 1 500px;max-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('/data/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('/data/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{padding:4rem 0 8rem} .main_sec10 .swiper-wrapper{padding:10px 0 20px} .main_sec10 .swiper-slide{background:var(--bg-gray);border-radius:var(--border-radius);padding:2rem 2.5rem;height:auto} .md-review{display:flex !important;flex-direction:column} .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 .head_con .c-star img {width:18px;height:19px;} .md-review .info_con{flex:1;display:flex;flex-direction:column;align-items:flex-start;margin:2rem 0} .md-review .info_con .subject{font-size:1.31rem;color:#555;} .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;margin-top:auto;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('/data/images/ico_moniter.png') no-repeat 0% center,url('/data/images/ico_arrow-right-gray-large.png') no-repeat 100% center;color:var(--text-gray)} .review_popup{display:none;position:fixed;; left:0;top:0;right:0;bottom:0;z-index:9999;} .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.5);} .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 .box .close{position: absolute;right: 3.13rem;top: 1rem;font-size: 3rem;cursor: pointer;color:#666} .review_popup .md-review .info_con{background:#f4f7fc;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)} @media all and (max-width:1024px){ .review_popup .box{margin:0 10px;padding:2rem} .review_popup .box .close{right:2rem} } .main_sec11{padding:6.25rem 0;background:var(--bg-gray);margin: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('/data/images/btn_video-play.png') no-repeat center /11%} .main_sec11 .video_con a img{border-radius:var(--border-radius-large);display:block;width:100%;height:auto;filter:brightness(0.5)} .main_sec12{padding:4rem 0 8rem} .main_sec13{padding:4rem 0 8rem} .main_sec14{margin:4rem 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 li:nth-child(2)~li{display:none} .main_sec14 .latest_con.gallery .thumb{aspect-ratio:1.6/1} .main_sec14 .latest_con.gallery .thumb a{display:block;height:100%} .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('/data/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('/data/images/ico_calenda.png') no-repeat center;opacity:0.6} @media all and (max-width:880px){ .main_sec14 .latest_con.gallery ul{;flex-wrap:wrap} .main_sec14 .latest_con.gallery li{width:calc((100% - 10px)/2)} } .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.8rem;width:6rem;min-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:4rem 0 8rem;} .main_sec15 .box{display:flex;justify-content:center; background:#333;border-radius:var(--border-radius)} .main_sec15 .box .inner{display:flex;gap:5px;flex-direction: column;justify-content:center; color:#fff;padding:25px 0;padding-left:70px;background:url('/data/images/msec15_em.png') no-repeat 0 center} .main_sec15 .box strong{font-size:1.5rem} .main_sec15 .box p{font-size:1.13rem} @media all and (max-width:640px){ .main_sec15 .box .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('/data/images/ico_wish.png') no-repeat center;cursor:pointer} .md-course.grid1 li .thumb .c-wish.on{background-image: url('/data/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);margin:10px 0} .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:5px;margin-left:auto} .md-course.grid1 li .info .price .buy a{line-height:2.5rem;width:6.25rem;border:1px solid var(--main-color);color:var(--main-color);font-size:12px;text-align:center;border-radius:5px} .md-course.grid1 li .info .price .buy a.bg{background:var(--main-color);color:#fff} .md-course.grid1 li .info .price .buy a.bg2{background:#555;color:#fff;border:0;} .md-course.grid1 li .info .price .buy a.closed{background:#4c4c4c;border:0;color:#fff} .md-course.grid1 li .info .price .buy a.learn{background:var(--ico-color2);border:0;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;height:auto;overflow:hidden} .md-course li:hover{border-color:var(--main-color)} .md-course li.closed{background:#f8f8f8} .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;display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;overflow: hidden;} .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('/data/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('/data/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('/data/images/ico_star.png') no-repeat center} .md-course li .info .price{display:flex;justify-content: flex-end;align-items: baseline;;margin-top:20px;min-height:30px} .md-course li .info .price .sale{color:#aaa;text-decoration:line-through;} .md-course li .info .price .total{font-size:1.63rem;color:var(--main-color);font-weight:800;margin-left:5px} .md-course li .info .desc.webtv {display:flex;justify-content: space-between;align-items:center} .md-course li .info .desc.webtv .date{background:url(/data/images/ico_date.png) no-repeat 0 center;padding-left:20px;} .md-course li .info .desc.webtv .runningtime{background:none;border: 1px solid #eee;border-radius: 30px;height: 24px;line-height: 22px;padding: 0 10px;font-size: 0.75rem;} .md-course.-scale.swiper-wrapper{padding:20px 0} @media all and (min-width:1025px){ .md-course.-scale li.swiper-slide{transform-origin: bottom;transition:transform 0.3s} .md-course.-scale li.swiper-slide-next{transform:scale(1.05);} } .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('/data/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 4rem 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);} .md-course li .info .price{flex-wrap:wrap;} .md-course li .info .price .buy{width:100%;margin-top:10px} .md-course li .info .price .buy a{flex:1} } @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);} } /*SUB 상단영역*/ .sub-header {display: none;} .top-visual {display: flex;justify-content:center;align-items:center;gap:0;flex-direction: column;height: 15.6rem;background-size: cover;background-position: center;} .top-visual .slogan {color: #fff;font-size: 2.19rem;font-weight:700;line-height:1;} .top-visual .desc {color: #fff;font-size: 1.5rem;line-height:1;} .slogan.black, .desc.black {color:#000 !important;} #location .topbg { background-image: url('/data/images/topimg_location.jpg');height:15.6rem;} #teacher .topbg { background-image: url('/data/images/topimg_tutor.jpg');height:15.6rem;} #courseList .topbg { background-image: url('/data/images/sub/dev_visual.jpg');height:15.6rem;} #bookList .topbg { background-image: url('/data/images/sub/book_visual.jpg');height:15.6rem;} #tvList .topbg { background-image: url('/data/images/sub/tv_visual.jpg');height:15.6rem;} #support .topbg { background-image: url('/data/images/topimg_tutor.jpg');height:15.6rem;} #supportRead .topbg { background-image: url('/data/images/topimg_tutor.jpg');height:15.6rem;} /*pg-login******************************************************/ .pg-login {background:#f4f7fc;} .main.loginBox {display:flex;flex-direction:column;gap:30px;justify-content:flex-start;align-items:center;height:calc(100vh - 120px);padding-top:2.5rem;} .main.loginBox .head_tit {width:100%;margin:0 auto;text-align:center;} .main.loginBox .head_tit h1 {font-size:2.25rem;color:#333;} .main.loginBox .head_tit p {font-size:1.5rem;color:#888;} .login_sec{width:100%;max-width:500px;display:flex;flex-direction:column;gap:20px;justify-content:flex-start;align-items:flex-start;height:auto;background:#fff;border-radius:var(--border-radius);box-shadow: 0 0 20px rgba(0,0,0,0.05);padding:20px 40px 40px;} .login_sec .login_con input[type="button"], input[type="submit"], button {border:none;cursor:pointer;} .login_sec .login_con input[type="text"]:focus,.login_sec .login_con input[type="password"]:focus { border: 1px solid var(--main-color); outline: none;} .login_sec .language_con {align-self: flex-end; } .login_sec .top {width:100%;border-bottom:1px dotted var(--border-color);padding-bottom: 20px;} .login_sec .top h2 {margin-bottom:20px;} .login_sec .top h3 {font-size:1.25rem;font-weight:500;} .login_sec .top .desc {color:#888;font-size:0.94rem;} .login_sec .login_con {width:100%;display:flex;flex-direction:column;gap:4px;margin:0;} .login_sec .login_con label {display:block;margin-bottom:4px;font-weight:600;color:#333;} .login_sec .login_con input[type="text"], .login_sec .login_con input[type="password"] {width:100%;height:50px;padding:0 15px;border:1px solid var(--border-color);border-radius:var(--border-radius-small);font-size:1rem;box-sizing: border-box;} .login_sec .login_con p {margin-top:4px;font-size:0.875rem;} .login_sec .login_con .alert {color:#ff2d2d;} .login_sec .login_con .msg a, .login_sec .top a{color:var(--main-color);text-decoration: underline;} .login_sec .login_con.mailLogin {gap:20px;align-items: stretch;} .login_sec .login_con .email.error {border:1px solid #ff2d2d} .login_sec .input-wrapper {position: relative; idth: 100%;} .login_sec .input-wrapper input[type="password"],.input-wrapper input[type="text"] { padding-right: 45px;} .login_sec .toggle-password {position: absolute;top: 50%;right: 15px; transform: translateY(-50%);cursor: pointer;display: flex;align-items: center;} .login_sec .toggle-password img {width: 25px;height: auto;} .login_sec .input-code {display: flex;justify-content: space-between;align-items: center;gap:0;} .login_sec .login_con .input-code input[type="text"] {flex:1;border-radius:5px 0 0 5px;} .login_sec .input-code .c-btn.-code {flex-shrink: 0; height:50px;padding: 0 10px;max-width:110px;font-size:0.875rem;background: #1d2f3b;color:#fff;border:1px solid #1d2f3b;border-radius:0 5px 5px 0;transition: all 0.3s;} .login_sec .btn {width:100%;height:50px;display:flex;justify-content:flex-start;align-items: center;gap:10px;padding-left:20px;font-size:1rem;color:#444;font-weight:500;border-radius:var(--border-radius-small);cursor:pointer;border:1px solid var(--border-color);background:#fff;transition: all 0.3s;} .login_sec .btn img {width:25px;height:25px;} .login_sec .btn:hover {border:1px solid var(--main-color);} .login_sec .foot {width:100%;display:flex;justify-content:space-between;align-items: center;} .login_sec .foot > div a{color:var(--main-color);} .login_sec .c-btn.-signup {max-width:100px;border-radius:5px;} .login_sec .c-btn.-wide {flex:1;width:100%;max-width: none;border-radius:5px;} .login_sec .divider {display: flex;align-items: center;font-weight:600; text-align: center;width: 100%;margin: 10px 0;} .login_sec .divider::before,.divider::after {content: '';flex: 1;border-bottom: 1px dotted var(--border-color);} @media (max-width: 640px) { .main.loginBox {padding: 3rem 1rem 2rem;} .login_sec {padding:20px;} } /*pg-mypage******************************************************/ .pg-mypage .contents{display:flex;min-height:calc(100vh - 100px);align-items:flex-start} .pg-mypage .contents .content{flex:1;min-width:0;display:flex;gap:15px;flex-direction:column;padding:30px 30px 0} /*mypage 좌측메뉴*/ .pg-mypage .sidemenu{position:sticky;top:100px;height:100vh;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;gap:5px;height:60px;line-height:60px;font-size:1.19rem;border-bottom:1px solid var(--border-color)} .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 .count{color:var(--main-color)} .pg-mypage .sidemenu .menu > li.child > a:after{content:'';position:absolute;right:0;width:40px;height:100%;background:url('/data/images/ico_left_arrow.png') no-repeat center;transition:0.3s} .pg-mypage .sidemenu .sub{display:none;padding:20px 40px 45px;} .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 > classroom 좌측메뉴 세부페이지*/ .pg-mypage .sidemenu-sub{position:sticky;top:100px;height:100vh;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 a.ico1:before{content:'';display:inline-block;width:40px;height:100%;background:url('/data/images/ico_left_courses.png') no-repeat center} .pg-mypage .sidemenu-sub .menu a.ico2:before{content:'';display:inline-block;width:40px;height:100%;background:url('/data/images/ico_left_certificate.png') no-repeat center} .pg-mypage .sidemenu-sub .menu a.ico3:before{content:'';display:inline-block;width:40px;height:100%;background:url('/data/images/ico_left_payment_history.png') no-repeat center} .pg-mypage .sidemenu-sub .menu a.ico4:before{content:'';display:inline-block;width:40px;height:100%;background:url('/data/images/ico_left_coupon.png') no-repeat center} .pg-mypage .sidemenu-sub .menu a.ico5:before{content:'';display:inline-block;width:40px;height:100%;background:url('/data/images/ico_left_wishlist.png') no-repeat center} .pg-mypage .sidemenu-sub .menu a.ico6:before{content:'';display:inline-block;width:40px;height:100%;background:url('/data/images/ico_left_account_settings.png') no-repeat center} .pg-mypage .sidemenu-sub .menu a.ico7:before{content:'';display:inline-block;width:40px;height:100%;background:url('/data/images/ico_left_withdrawal.png') no-repeat center} .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;height:60px;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)} .sidemenu_ico1:before{content:'';display:inline-block;width:40px;height:100%;background:url('/data/images/ico_left_courses.png') no-repeat center} .sidemenu_ico2:before{content:'';display:inline-block;width:40px;height:100%;background:url('/data/images/ico_left_certificate.png') no-repeat center} .sidemenu_ico3:before{content:'';display:inline-block;width:40px;height:100%;background:url('/data/images/ico_left_payment_history.png') no-repeat center} .sidemenu_ico4:before{content:'';display:inline-block;width:40px;height:100%;background:url('/data/images/ico_left_coupon.png') no-repeat center} .sidemenu_ico5:before{content:'';display:inline-block;width:40px;height:100%;background:url('/data/images/ico_left_wishlist.png') no-repeat center} .sidemenu_ico6:before{content:'';display:inline-block;width:40px;height:100%;background:url('/data/images/ico_left_account_settings.png') no-repeat center} .sidemenu_ico7:before{content:'';display:inline-block;width:40px;height:100%;background:url('/data/images/ico_left_withdrawal.png') no-repeat center} /*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{flex:1 1 400px;max-width:500px;position:relative;border-radius:var(--border-radius);overflow:hidden;margin:0 auto} .progress_sec .thumb a img{max-height:550px;} .progress_sec .info{flex:1 1 400px;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;color:#333;} .progress_sec .info .period{font-size:1.19rem;padding-left:30px;background:url('/data/images/ico_calenda.png') no-repeat 0 center} .progress_sec .info .point{font-size:1.19rem;padding-left:30px;background:url('/data/images/ico_point.png') no-repeat 0 center} .progress_sec .info .name{font-size:1.13rem;padding-left:30px;background:url('/data/images/ico_person.png') no-repeat 0 center} .progress_sec .info .ratio{font-size: 1.19rem;padding-left:30px;background: url(/data/images/ico_classroom_monitor.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('/data/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;flex-wrap:wrap;gap:10px;;margin-top:20px;} .add_sec{background:var(--bg-gray);padding:20px 20px;font-size:1rem;border-radius:var(--border-radius-small)} @media all and (max-width:640px){ .progress_sec .thumb {width: 100%;max-width:100%;} .progress_sec .more .c-btn {width:100% !important;min-width:100% !important;max-width:100% !important;} .progress_sec .info .remaining {display:none;} .progress_sec .info .done {display:none;} .progress_sec .info .progress .bar {flex:1;} } /*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('/data/images/ico_my_pencil.png') no-repeat center} .my_sec .my_con.item2 a{background:url('/data/images/ico_my_progress.png') no-repeat center} .my_sec .my_con.item3 a{background:url('/data/images/ico_my_expiring.png') no-repeat center} .my_sec .my_con.item4 a{background:url('/data/images/ico_my_complete.png') no-repeat center} @media all and (max-width:640px){ .my_sec .my_con.item1 {display:none;} } /*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;margin:0 5px} .latest_sec li .date{font-size:0.88rem;color:var(--text-gray-light)} @media all and (max-width:640px){ .latest_sec li .info .subject{flex-direction:column;align-items:flex-start} } /*mypage > Enrollment Status/Certificate/보드 */ .control_sec {display: flex;justify-content:space-between;align-items:center;margin-bottom: 20px;} .control_sec .selectBox {/*min-width:200px;*/} .control_sec .selectBox select{} .click_area { cursor:pointer;display:inline-flex;align-items:center;gap:5px;} @media all and (max-width:680px){ .control_sec .selectBox select{height:30px;line-height:30px} } .control_sec.only-right {justify-content:flex-end;} .control_sec div:first-child input {margin-right:10px;} .pg-mypage .search_sec {display:flex;justify-content: center;padding:20px;background: var(--bg-gray);text-align:center;margin-bottom:20px;border-radius:var(--border-radius-small);} .pg-mypage .search_sec > div {display:flex;align-items:center;gap:5px;width:100%} .pg-mypage .search_sec .stitle {font-weight:500;} @media all and (max-width:640px) { .control_sec .search-box span {display:block;margin-bottom:10px;} .my_list .row ul {flex-direction:column;} .my_list .row li .heading {display:none;} .my_list .row li .name {font-size: 1.125rem;} } .small-btn{min-width:60px;height:40px;text-align:center;border-radius:var(--border-radius-small);line-height:40px;padding:0 10px;font-size:0.875rem;color:var(--btn-color1);cursor:pointer;} .small-btn.-border{background:#fff;border:1px solid var(--btn-color1)} .small-btn.-bg{background:var(--btn-color1);color:#fff} .small-btn.-bg2{background:var(--btn-color2);color:#fff} .small-btn.-search {background:var(--btn-color1);color:#fff;padding:0 25px;} /*mypage 쿠폰리스트,결제리스트 외 */ .my_list > ul > li {border:1px solid #ddd;border-radius:var(--border-radius-small);padding:20px;margin-bottom:10px;} .my_list .row ul {display:flex;align-items: flex-start;gap:10px; padding:10px 0;} .my_list .row ul li{flex:1;padding:0 8px;} .my_list .row .title {flex:3;} .my_list .row .benefit {flex:4;} .my_list .row .period {flex:3;} .my_list .row .status {flex:0.8;} .my_list .row li .heading {display:block;font-size:0.94rem;color: var(--text-gray-light);margin-bottom:5px;} .my_list .row li .status-unused { color:var(--btn-color1);font-weight: 500; } .my_list .row li .name {font-weight: 500;} .pg-mypage .coupon_list .search_sec {display:flex;gap:10px;align-items:center;justify-content:center;padding:20px;background: var(--bg-gray);text-align:center;margin-bottom:20px;border-radius:var(--border-radius-small);} .pg-mypage .coupon_list .search_sec > div {display:flex;gap:10px;} .coupon_list .my_list .title .name{background:url('/data/images/ico_coupon_small.png') no-repeat left center;padding-left:20px;} .coupon_list .my_list .use .unused {color:var(--main-color);} .coupon_list .my_list .use .used a {text-decoration:underline;} .coupon_list .my_list .row li span:last-child {font-size: 1.125rem;} .coupon_list .my_list .row li .discount, .coupon_list .my_list .row li .max {font-size:1.125rem;} @media (max-width:640px) { .pg-mypage .coupon_list .search_sec {flex-direction:column;} .pg-mypage .coupon_list .search_sec .stitle {display:block;font-weight:bold;} .pg-mypage .coupon_list .search_sec input {width:100%;} .pg-mypage .coupon_list .search_sec button {width:100%;} .pg-mypage .coupon_list .small-btn {font-size:1rem;} } /*mypage > payment */ .my_payment .my_list .row {transition:0.2s;} .my_payment .my_list .row:hover {border-color:var(--main-color);} .my_payment .row li span:last-child{font-size: 1.125rem;} .my_payment .my_list .item1 .order {background: url(/data/images/ico_paylist.png) no-repeat left center;padding-left:20px;} .flatpickr-btn-today, .flatpickr-btn-clear, .flatpickr-btn-close { background-color:var(--main-color); color: white; border: none; border-radius: 4px; padding: 6px 12px; cursor: pointer; font-size: 14px;} .flatpickr-btn-clear { background-color: #ef0074; } .flatpickr-btn-close { background-color: #9e9e9e; color: white; border: none; border-radius: 3px; cursor: pointer;} div.flatpickr-current-month { font-size: 15px; gap: 1px;} .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {width:36% !important;margin-right:3% !important;} .btn_delivery {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;} .refund_list{line-height: 30px;background:var(--ico-color2);border-radius:var(--border-radius-small);color:#fff;font-size: 0.75rem;padding: 0 10px;} .my_payment .control_sec {display:flex;justify-content:space-between;} .my_payment .control_sec .selectBox select {height:40px;line-height: 40px;} .my_payment .control_sec .search_con {display:flex;align-items:center;gap:5px;} .my_payment .control_sec .calendar input {margin-right:0 !important} .my_payment .my_list .row .item1 {flex:7;} .my_payment .my_list .row .item2 {flex:3;} .my_payment .my_list .row .item3 {flex:4;} .my_payment .my_list .row .item4 {flex:2;} .my_payment .my_list .row .item5 {flex:1.5;} .my_payment .my_list .item5 .pay_status {color:var(--main-color);padding:0;} @media all and (max-width:680px) { .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {width:18px !important;} .ui-datepicker select.ui-datepicker-year {margin-right:2% !important;} .my_payment .control_sec {flex-direction:column;gap:10px;align-items:center;width:100%;} .my_payment .control_sec .search_con {display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;} .my_payment .control_sec .space {display:none;} .my_payment .control_sec .calendar input {width:100% !important;margin-right:0 !important;} .my_payment .control_sec .selectBox {display:flex;flex-direction:column;align-items:flex-end;} /* 강제적으로 100%로 덮어쓰기 */ .my_payment .control_sec .selectBox select {max-width: 100% !important;width: 100% !important;} .my_payment .control_sec .month {display: flex;justify-content: center;gap: 6px;width: 100%;margin: 0 auto 0 auto;} .my_payment .control_sec .month button {flex: 1 1 0;min-width: 0;max-width: 100%;text-align: center;} } /*mypage > payment view page only */ .my_payment.detail .my_list .row .item1 {flex:6;} .my_payment.detail .my_list .row .item2 {flex:3;} .my_payment.detail .my_list .row .item3 {flex:3;} .my_payment.detail .my_list .row .item4 {flex:3;} .my_payment.detail .my_list .row .item5 {flex:2;} .my_payment.detail .mo_ver {width:100%;display:none;} .delivery_con dl {display: flex;width:100%;align-items:center;margin: 0;} .delivery_con dl:first-child {border-top:1px solid #ddd;} .delivery_con dt {background:#f8f8f8;color:#333;font-size:0.95rem;font-weight:500;width:150px;padding:15px 20px;border-bottom: 1px solid #ddd;margin:0;} .delivery_con dd {flex: 1;padding: 15px 20px;font-size:0.95rem;border-bottom: 1px solid #ddd;margin: 0;} .pg-mypage .my_payment.detail .apply-box {padding:10px 0;} .pc_ver.ls0 {color:var(--main-color);} @media all and (max-width:1024px) { .my_payment.detail .table_con {display:none;} .my_payment.detail .mo_ver {display:block;} /* mypage > payment 모바일 */ .my_payment.detail {margin-bottom:20px;} .my_payment.detail .mo_ver { width:100%; background:#f8fafc; border-radius:5px;padding:20px;margin-top:5px;} .my_payment.detail .mo_ver h4 {display: flex;align-items: center;} .my_payment.detail .mo_ver .stit {font-size:1.125rem;color:#555;font-weight:500;margin:0; } .my_payment.detail .mo_ver .order_details li {display:flex;gap:10px;align-items:center;justify-content:flex-start;margin-bottom:10px;} .my_payment.detail .mo_ver .order_details li > span {font-size: 0.95rem;color: var(--text-gray-light);min-width:100px;} .my_payment.detail .mo_ver .order_details div {font-size: 1.125rem;} .my_payment.detail .mo_ver .order_details .discount {font-size: 1.125rem;color:#555;display:block;} .my_payment.detail .mo_ver .order_details .discount .bold {font-weight: bold;margin-left:5px;} .my_payment.detail .mo_ver .order_details .dash {font-size: 0.95rem;text-decoration: line-through;} .pg-mypage .my_payment.detail .mo_ver .status {color:var(--main-color);padding:0;} } @media all and (max-width:640px) { .my_payment.detail .mo_ver .order_details .sale_price span{display:block;} } /*MYPAGE > PAYMENT,REFUND*/ .my_payment.detail { margin-bottom:40px; } .my_payment.detail h4 {margin-bottom:10px;} .table_con { width:100%; border-collapse:collapse; font-family:inherit; color:#333; background:#fff;} .table_con thead th { padding:12px 14px; font-weight:600; font-size:0.95rem; text-align:left; border-bottom:1px solid var(--border-color,#e6e6e6); background:transparent; color:#333; } .table_con thead th.bgGray { background:var(--bg-gray); color:#333; text-align:center; } .table_con tbody tr { border-bottom:1px solid var(--border-color,#eee); } .table_con td { padding:12px 14px; vertical-align:middle; font-size:0.95rem; color:#444; } .table_con td.left { text-align:left; } .table_con td.last { text-align:center; } .table_con td.ls0 { letter-spacing:0; } .table_con .order_view_price i.dash { display:inline-block; color:#999; text-decoration:line-through; font-style:normal; margin-right:6px; font-size:0.9rem; } .my_payment.detail .btn_type1, .my_payment.detail .btn_type2 {display:inline-block;padding:3px 8px; font-size:0.9rem; border-radius:5px; text-decoration:none;} .my_payment.detail .btn_type1 {color:#888;border:1px solid #888;background:#fff;} .my_payment.detail .btn_type2 {color:var(--main-color);border:1px solid var(--main-color);background:#fff;} .table_con .mo_ver { display:none; } .table_con .mo_ver .tit { font-size:1rem; margin-bottom:8px; display:block; } .table_con .mo_ver .bbs_dot { list-style:none; padding:0; margin:0; display:block; } .table_con .mo_ver .bbs_dot li{display:block; padding:8px 0; border-bottom:1px dashed rgba(0,0,0,0.04);font-size:0.95rem; } .table_con .mo_ver .bbs_dot li span { display:inline-block; min-width:110px; color:#666; } .table_con .sale_price p { margin:4px 0; } .my_payment.detail.refund .apply-box {justify-content:flex-start;} .my_payment.detail.refund .c-btn.-list {width:100%;max-width:140px;} .my_payment.detail .selectBox select {height:40px;line-height:40px;} @media (min-width:1024px) { .table_con { table-layout:fixed; } .table_con thead th, .table_con td { text-align:center; } .table_con td.left { text-align:left; } .table_con td .cate { margin-right:6px; color:#888; font-weight:500; } .table_con .pc_ver { display:table-cell; } .table_con .mo_ver { display:none; } } @media (max-width:1023px) { .table_con thead, .table_con tbody tr { display:block; width:100%; } .table_con thead { display:none; } .table_con tbody tr { margin-bottom:12px; border:1px solid rgba(0,0,0,0.04); border-radius:8px; padding:12px; box-shadow:0 1px 2px rgba(0,0,0,0.03); background:#fff; } .table_con td { display:block; padding:8px 0; border:none; text-align:left; } .table_con td.pc_ver { display:none; } .table_con .mo_ver { display:block; } .table_con .mo_ver .order_view_price { font-size:0.95rem; color:#222; } .table_con .mo_ver b { font-size:1.05rem; color:#111; } .table_con .mo_ver .sale_price { margin-top:6px; color:#666; } .table_con .mo_ver .btn_type1, .table_con .mo_ver .btn_type2 { display:inline-block; margin-top:8px; padding:8px 10px; font-size:0.95rem; } } /*MYPAGE > REFUND*/ .refund_con { display:grid; grid-template-columns:repeat(2,1fr); gap:12px 24px; padding:18px; border:1px solid var(--border-color,#ececec); border-radius:8px; background:#fff; box-sizing:border-box; } .refund_con dl { display:flex; align-items:center;gap:12px margin:0;padding:8px 0;border-bottom:1px dashed rgba(0,0,0,0.04); } .refund_con dl:last-child { border-bottom:none; } .refund_con dl dt { flex:0 0 160px; width:160px; font-weight:600; color:#333; font-size:0.95rem; line-height:1.4; } .refund_con dl dd { flex:1 1 auto; margin:0; color:#555; font-size:0.95rem; line-height:1.5; word-break:break-word; } .refund_con dl dd a.btn_type1, .refund_con dl dd a.btn_type2 { margin-left:10px; vertical-align:middle; } @media (max-width:1023px) { .refund_con dl { flex-direction:column; align-items:flex-start; gap:6px; padding:10px 0; } .refund_con dl dt { width:100%; flex:none; font-size:0.95rem; color:#666; } .refund_con dl dd { width:100%; font-size:1rem; color:#222; } .refund_con dl dd a.btn_type1, .refund_con dl dd a.btn_type2{ margin-left:0; margin-top:8px; display:inline-block; } } @media (max-width:640px) { .refund_con { grid-template-columns:1fr;gap:12px 0;} .selectBox select {max-width:100%;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow: hidden;} } /*MYPAGE > 내정보수정/패스워드변경/탈퇴 */ .my_info dl {margin-bottom:40px;} .my_info dl dt{height:30px;font-weight:500;} .my_info .checkbox_group label {display:block;margin-bottom: 5px;} .my_info dl dd .email, .my_info dl dd .phone, .my_info dl dd .birthday {display:flex;align-items: center;} .my_info dl dd .email select {width: 180px !important; margin-left: 5px;} .my_info dl dd .birthday select {width: 180px;margin-right:5px;} .my_info dl dd .phone select {max-width:180px} .my_info .address_box input[type="text"] {margin-bottom:5px;} .my_info .address_box .address1, .my_info .address_box .address2 {width:80%;} .my_info .zipcode_box {display:flex;align-items:flex-start;gap:5px;} .hipen {margin:0 2px;} .point_color {color:#ef0074;} .bold {font-weight:600;} /*MYPAGE > 내정보수정*/ .pg-mypage #uploader {width:100%;height:100px;border:1px solid #DDD;overflow:auto;border-radius:5px;} .pg-mypage .qq-gallery.qq-uploader {line-height:68px;font-size:11px;padding:10px;} .pg-mypage .qq-gallery .qq-upload-button {background:#fff;color:#999;font-size:14px;padding:5px;border:1px solid #DEDEDE;border-radius:5px;} .pg-mypage .qq-gallery .qq-upload-list li {height:78px;} .pg-mypage .qq-gallery .qq-thumbnail-wrapper {width:100px;height:40px;} .pg-mypage .qq-gallery .qq-file-info {padding-top:0;} .pg-mypage .photo_box {width:100%;margin:10px 0 20px 0;padding:30px;background:#fff;border:1px solid var(--border-color-light);border-radius:10px;box-shadow:var(--box-shadow-large);} .pg-mypage .photo_box .photo_con {display:flex;gap:30px;align-items: center;} .pg-mypage .photo_box .photo_con .photo { width: 150px; height: 150px; border-radius: 50%;background: center / cover no-repeat; display: flex; align-items: center; justify-content: center; font-size: 4rem; font-weight: bold; color: #bbb; background-color:#f8f8f8; overflow: hidden; } .pg-mypage .photo_box .photo_con .photo.has { background: url('/data/images/my_photo.png') no-repeat center / cover;color: transparent; } .pg-mypage .photo_box .photo_con .btn {display:flex;gap:10px;margin-bottom:10px;} .pg-mypage .photo_box .photo_con p {font-size:0.875rem;color:#888;} .pg-mypage .my_info dl dt {font-size:1rem;color:#888;} .add_num {width: 120px !important;} @media (max-width: 980px) { .pg-mypage .my_info dl dd .selectBox.birthday {width:100%;} .pg-mypage.my_info dl dd .selectBox.birthday select {width: calc((100% - 30px) / 3) !important;} } @media (max-width:640px) { .pg-mypage .my_info dl dt {width:100% !important;display:block !important;font-size:1rem;} .pg-mypage .my_info dl dd {width:100% !important;display:block !important;padding-top:0 !important;} .pg-mypage .photo_box .photo_con {flex-direction: column;} .pg-mypage .photo_box .photo_con .photo { width: 100px; height: 100px;font-size:3rem; } .pg-mypage .my_info dl dd .birthday {display:flex;flex-direction:column;align-items:flex-start;} .pg-mypage .my_info dl dd .birthday select {width:100% !important;margin-bottom:10px;} .pg-mypage .my_info dl dd .email {display:flex;flex-direction:column;align-items:flex-start;} .pg-mypage .my_info dl dd .email input {width:100% !important;margin-bottom:10px;} .pg-mypage .my_info dl dd .email select {width:100% !important;margin-bottom:10px;margin-left:0;} .pg-mypage .my_info dl dd .email .hipen {display:none;} .pg-mypage .my_info dl dd .phone {display:flex;flex-direction:column;align-items:flex-start;} .pg-mypage .my_info dl dd .phone select {width:100% !important;margin-bottom:10px;} .pg-mypage .my_info dl dd .phone input {width:100% !important;margin-bottom:10px;} .pg-mypage .my_info dl dd .phone .hipen {display:none;} } /*MYPAGE > 내화상강의*/ .mylecture .search_sec {margin-bottom: 40px; } .mylecture .my_list ul li .time strong {margin-right:5px;} /*My classroom***************************/ h1 a img {max-height:55px;} /*클래스룸 로고사이즈*/ .progress_sec .thumb {width:100%;max-width:506px;} .sidemenu-sub .sub dt, .sidemenu-sub .sub dd a {height:60px;line-height:60px;padding:0;} .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('/data/images/ico_arrow-right-gray.png') no-repeat 100% center;font-size:1rem;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;min-width:0;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('/data/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('/data/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('/data/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('/data/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('/data/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.95rem;color:var(--text-gray);} .evaluation_sec .list li a .time{font-size:0.81rem;color:var(--text-gray-light);padding-left:20px;background:url('/data/images/ico_clock_min.png') no-repeat 0 center} /*mypage > my classroom : completion Criteria팝업*/ .completion_popup {width:100%;max-width:700px; padding:30px; background:#fff; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,0.2);display:none; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:10010;} .completion_popup h4 {font-size:1.25rem; font-weight:600; margin-bottom:20px;color:#333;} .popup_close{position:absolute;top:20px;right:20px;width:24px;height:24px;cursor:pointer} .popup_close::before,.popup_close::after{content:'';position:absolute;left:12px;top:0;width:2px;height:24px;background:#333} .popup_close::before{transform:rotate(45deg)} .popup_close::after{transform:rotate(-45deg)} .completion_con {overflow-x:auto; -webkit-overflow-scrolling:touch;} .completion_con table {min-width:600px; width:100%; border-collapse:separate; border-spacing:0; margin-bottom:20px; border:1px solid #ddd; border-radius:5px; overflow:visible;} .completion_con table th, .completion_con table td {border:none; padding:10px; text-align:center;} .completion_con table tr + tr th, .completion_con table tr + tr td {border-top:1px solid #ddd;} .completion_con table th {background-color:var(--bg-gray); font-weight:600;} .completion_popup p {font-size:0.75rem; color:#888;line-height:1.3;} /*mypage > my classroom*/ .syllabus_sec .h3_tit{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:40px;} .syllabus_sec .h3_tit .tit, .syllabus_sec .h3_tit .add, .syllabus_sec .h3_tit .tip, .syllabus_sec .h3_tit .check{line-height:1.56rem} .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: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('/data/images/ico_sylla_tit_check.png') no-repeat 0 center} .syllabus_sec .h3_tit .tip span.is-inProgress{background:url('/data/images/ico_sylla_tit_pro.png') no-repeat 0 center} .syllabus_sec .h3_tit .tip span.is-notSubmitted{background:url('/data/images/ico_sylla_tit_not.png') no-repeat 0 center} .syllabus_sec .h3_tit .tip span.is-currentLesson{background:url('/data/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;height:50px;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('/data/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('/data/images/ico_sylla_tit_check.png') no-repeat center} .syllabus_sec .list .info_con li.is-inProgress .subject:before{background:url('/data/images/ico_sylla_tit_pro.png') no-repeat center} .syllabus_sec .list .info_con li.is-notSubmitted .subject:before{background:url('/data/images/ico_sylla_tit_not.png') no-repeat center} .syllabus_sec .list .info_con li.is-currentLesson .subject:before{background:url('/data/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('/data/images/ico_sylla_nth1.png') no-repeat center} .syllabus_sec .list .info_con li .subject .ico2{background:url('/data/images/ico_sylla_nth2.png') no-repeat center} .syllabus_sec .list .info_con li .subject .ico3{background:url('/data/images/ico_sylla_nth3.png') no-repeat center} .syllabus_sec .list .info_con li .subject .ico4{background:url('/data/images/ico_sylla_nth4.png') no-repeat center} .syllabus_sec .list .info_con li .subject .ico5{background:url('/data/images/ico_sylla_nth5.png') no-repeat center} .syllabus_sec .list .info_con li .subject .ico6{background:url('/data/images/ico_sylla_nth6.png') no-repeat center} .syllabus_sec .list .info_con li .subject .ico7{background:url('/data/images/ico_sylla_nth7.png') no-repeat center} .syllabus_sec .list .info_con li .subject .ico8{background:url('/data/images/ico_sylla_nth8.png') no-repeat center} .syllabus_sec .list .info_con li .subject .ico9{background:url('/data/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('/data/images/ico_sylla_calenda.png') no-repeat 0 center;} .syllabus_sec .list .info_con li .info .desc{display:flex;gap:20px;line-height:26px;} .syllabus_sec .list .info_con li .info .desc .resources{padding-right:30px;background:url('/data/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('/data/images/ico_box_clock.png') no-repeat 100% center} .syllabus_sec .subBox {display:none;width:300px;position:absolute;top:30px;right:0;background-color:#fff;border:1px solid #ccc;box-shadow:0 0 10px rgba(0,0,0,0.1);padding:10px;z-index:1000;text-align:left} .syllabus_sec .subBox .title{font-weight:600;margin-bottom:10px;border-bottom:1px solid var(--border-color);padding:8px 0 8px 30px;} .syllabus_sec .subBox .timebox {background:url('/data/images/ico_count.png') no-repeat 0 50%;} .syllabus_sec .subBox .down {background:url('/data/images/ico_file.png')no-repeat 0 50%;} .syllabus_sec .time, .syllabus_sec .resources{ position: relative; cursor: pointer;line-height:26px;} @media all and (max-width:640px) { .syllabus_sec .list .info_con li{padding:10px 10px} } /*mypage > my classroom > module list */ .evaluation_sec .h3_tit{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:40px;} .evaluation_sec .h3_tit .tip{display:flex;gap:15px;font-size:0.75rem;line-height:1.56rem;padding: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)} .module {display:inline-block;padding:6px 16px;color:#fff;border-radius:20px;} .module.color1 { background: var(--stext-color1); } .module.color2 { background: var(--stext-color2); } .module.color3 { background: var(--stext-color3); } .module.color4 { background: var(--stext-color4); } .module.color5 { background: var(--stext-color5); } .evalution_list dl {position:relative;margin:0 0 20px 0;border:1px solid var(--border-color);border-radius:var(--border-radius-small);color:#333;font-weight:400;transition:border-color 0.3s;} .evalution_list dl.color1:hover {border-color:var(--stext-color1);} .evalution_list dl.color2:hover {border-color:var(--stext-color2);} .evalution_list dl.color3:hover {border-color:var(--stext-color3);} .evalution_list dl.color4:hover {border-color:var(--stext-color4);} .evalution_list dl.color5:hover {border-color:var(--stext-color5);} .status_mandatory {position: absolute;top:0;left:0;background-color:red;color:#fff;font-size:0.875rem;padding:2px 5px;border-radius:0 0 var(--border-radius) 0;} .evalution_list dl a {display:flex;justify-content:space-between;padding:20px 10px;width:100%;} .evalution_list dl a dd {width:80%;} .evalution_list dl a dt {width:20%;} .evalution_list dl a dd {display:flex;gap:10px;padding:0 10px;font-size:0.875rem;} .evalution_list dl a dd > div:nth-of-type(1) {flex: 1 1 0;} .evalution_list dl a dd > div:nth-of-type(2) {flex: 2.8 1 0;} .evalution_list dl a dd > div:nth-of-type(3) {flex: 1.3 1 0;} .evalution_list dl a dd > div:nth-of-type(4) {flex: 1.3 1 0;} .control-box {display:flex;justify-content: space-between} .control-box .h3_tit {display:flex;} .evalution_list .s_tit {font-size:0.875rem;padding:6px 0;} @media (max-width: 1024px) { .evalution_list dl a{flex-direction:column;align-items:flex-start;gap:10px;} .evalution_list dl a dd {display:flex;flex-direction: column;gap:10px;padding:0;width: 100%;} .evalution_list dl a dd > div {flex-basis: auto !important; flex-shrink: 1 !important;width: 100%;} .evalution_list dl a dd > div:nth-of-type(4) {display: flex;align-items: baseline; gap: 10px;} .evalution_list dl a dt {display: flex;align-items: baseline; gap: 10px;} } @media all and (max-width:640px){ .evaluation_sec .list li {flex: 1 1 100%;} .syllabus_sec .list .info_con li .info .desc {line-height:30px;} } /*mypage > my classroom > evaluation*/ .eval_wrap {margin-bottom:30px;} .eval_wrap .eval_header {border-bottom:1px solid var(--border-color);margin-bottom:20px;padding-bottom:20px;} .eval_wrap .eval_header h4 {margin:10px 0;font-size:1.875rem;font-weight:600;color:#555;} .eval_wrap .eval_header .info_box {display:flex;align-items:center;gap:40px;} .info_box > div {display:flex;flex-direction:column;} .info_box > div span {line-height:1.4;} .info_box > div span:first-child {font-size:0.875rem;} .info_box > div span:last-child {font-weight:500;} .info_box .timer {background:url('/data/images/ico_big_timer.png') no-repeat left center; padding-left:45px;} .info_box .question {background:url('/data/images/ico_big_cube.png') no-repeat left center; padding-left:45px;} .info_box .duration {background:url('/data/images/ico_big_calendar.png') no-repeat left center; padding-left:45px;} .info_box .submission {background:url('/data/images/ico_big_check.png') no-repeat left center; padding-left:45px;} .eval_status {display:inline-flex;align-items:center;justify-content:center;min-width:120px;font-size:0.95rem;color: #fff;padding:6px 16px;border-radius:25px;} .eval_result {display:flex;flex-direction:column;gap:10px;width:100%;padding:20px;margin-bottom:20px;background-color:var(--main-color-light);border-radius: var(--border-radius-small);} .eval_result .tit {font-size:1.125rem;color:#333;font-weight:600;} .eval_result .score_tit {font-size:1rem;font-weight:500;background:url('/data/images/ico_document.png') no-repeat center left; padding-left: 25px;} .eval_result .score {font-size:1rem;color:var(--btn-color2);font-weight:600;} .eval_result .count_tit {font-weight:500;background:url(/data/images/ico_timer.png) no-repeat center left;padding-left: 25px;} @media all and (max-width:640px) { .eval_wrap .eval_header .info_box {display:flex;flex-direction:column;gap:10px;align-items:flex-start;justify-content:flex-start;} .info_box > div{flex-direction:column;gap:0;} .info_box .timer{background:url('/data/images/ico_timer.png') no-repeat left top; padding-left:25px;} .info_box .question{background:url('/data/images/ico_cube.png') no-repeat left top; padding-left:25px;} .info_box .duration{background:url('/data/images/ico_date.png') no-repeat left top; padding-left:25px;} .info_box .submission{background:url('/data/images/ico_check.png') no-repeat left top; padding-left:25px;} } /*mypage > my classroom > evaluation > SUVEY */ .submit_box {margin:10px 0;padding:20px;border:1px solid var(--border-color);border-radius:var(--border-radius-small);} .submit_box h5{font-size:1.5rem;line-height:1.5;margin-bottom:20px;} .bg_gray {background:var(--bg-gray);border-radius:5px;} .survey_con h3 {padding:5px 0;} .survey_con .q_text {color:var(--main-color);font-weight:600;margin-right:10px;} .survey_con .survey {margin-bottom:20px;line-height:1.5;} /*mypage > my classroom > evaluation > Discussion view*/ .boardList_sec .info2 span.like:hover, .boardList_sec .info2 span.hate:hover {background-color:var(--main-color-light);} .boardList_sec .info2 .like .tooltip, .boardList_sec .info2 .hate .tooltip {position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;padding:5px 10px;background-color:#333;color:#fff;font-size:0.75rem;border-radius:4px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity 0.3s, visibility 0.3s;pointer-events:none;z-index:10;} .boardList_sec .info2 .like .tooltip:after, .boardList_sec .info2 .hate .tooltip:after {content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#333;} .boardList_sec .info2 .like:hover .tooltip, .boardList_sec .info2 .hate:hover .tooltip {opacity:1;visibility:visible;} .eval_result .stit {font-size:1rem;font-weight:600;} .eval_result .stit::before {content:'·';margin-right:5px;} .eval_result h4 {font-size:1rem;font-weight:600;margin-top:-10px;} .eval_result h4::before {content:'·';margin-right:5px;} .eval_result .opinion {margin-top:10px;background:#fff;border-radius:5px;padding:10px 20px;} .eval_result .down {margin:20px 5px 5px 0;background:#f8f8f8;border-radius:5px;padding:8px 10px;} .eval_result .down img {vertical-align:middle;margin-right:5px;} .eval_result .down a {font-size:0.88rem;} .eval_result .down a.hover {text-decoration:underline;} @media all and (max-width: 480px) { .eval_result .score, .eval_result .stit {display:block;width:100%;} .eval_result .score {margin-left:6px;} } /*CLASSROOM > BOARD VIEW*/ .cview_wrap {margin-bottom:30px;} .cview_wrap .title_box {padding:0 0 20px;border-bottom:1px solid var(--border-color);border-top:1px solid var(--border-color);} .cview_wrap .title_box h4 {font-size:1.875rem;padding:10px 0;color:#555;line-height:1.4;} .cview_wrap .title_box ul {display:flex;align-items:center;gap:30px;margin:0 auto;flex-wrap:wrap;} .cview_wrap .title_box ul li.profile {display: flex; align-items: center; gap: 10px;font-size:0.875rem;color:#888;} .cview_wrap .title_box ul li.profile div {text-align: left;} .cview_wrap .title_box .writer, .cview_wrap .title_box .date, .cview_wrap .title_box .comment_count {min-width:60px;padding-left:20px;} .cview_wrap .title_box .hit {min-width:60px;padding-left:25px;} .cview_wrap .title_box .photo {display: inline-block;width: 50px; height: 50px; border-radius: 50%; overflow: hidden;} .cview_wrap .title_box .photo img {width: 100%; height: 100%; object-fit: cover;} .cview_wrap .title_box .writer{background:url(/data/images/ico_name.png) left center no-repeat; } .cview_wrap .title_box .date {background:url(/data/images/ico_date.png) left center no-repeat; } .cview_wrap .title_box .hit {background:url(/data/images/ico_view.png) left center no-repeat; } .cview_wrap .title_box .comment_count {background: url(/data/images/ico_hit.png) left center no-repeat;} .comment-box {padding:30px 20px;border:1px solid var(--border-color);border-radius:5px;} .comment-box {margin:40px 0; border:1px solid var(--border-color);padding:30px 20px 20px 20px;border-radius: var(--border-radius-small)} .comment-box .comment-body {min-height:80px;margin-bottom:20px; line-height:1.4;} body .cview_wrap .comment-box .title_box {border:none;} .cview_wrap .comment-box .title_box ul .profile {display:flex;align-items:center;gap:20px;} .con_area {min-height:300px; padding:30px 0;} .download-box {margin:20px 0;padding:15px 20px;background-color: var(--bg-gray);border-radius: var(--border-radius-small);} .download-box a {font-size:0.875rem;} .download-box img {margin-right:5px;} .download-box a:hover {text-decoration: underline;} /* CLASSROOM > MATERIALS LIST*/ .material_list ul {display: flex;flex-wrap: wrap;gap:20px; } .material_list ul li {flex: 0 0 calc(50% - 10px); padding:20px;border:1px solid var(--border-color);border-radius: var(--border-radius-small);} .material_list ul li h4 a:hover {color:var(--main-color);} .material_list .down_group a:hover {background-color:var(--main-color-light);} .material_list h4 {font-size: 1.25rem; font-weight:600; margin:10px 0;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow: hidden;text-overflow: ellipsis;} .material_list h4::before{content:'';display:inline-block;width:20px;height: 20px;background:url(/data/images/ico_notice.png) no-repeat center;background-size: contain;margin-right: 8px;vertical-align: middle;} .material_list .material-box {display:flex;align-items:center;justify-content:space-between;} .material_list .material-box .down_group {display:flex;gap:10px;} /* CLASSROOM > REVIEW LIST*/ .boardList_sec .c-star {margin-bottom:10px;} /* CLASSROOM > REVIEW LIST > 그래프*/ .rating-box{display:flex;gap:20px;} .rating-box .total,.rating-box .segment{padding:40px 30px;margin-bottom:50px;background:#f4f7fc;border-radius:var(--border-radius);} .rating-box .total {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0px;} .rating-box .total .score {font-size:3rem;line-height:1;font-weight:700;color:#222;} .rating-box .total .star {margin-bottom:5px;} .rating-box .segment {flex:2;} .rating-box .segment ul li {display:flex;gap:15px;align-items:center;margin-bottom:10px;} .rating-box .segment .bar{display: inline-block;position:relative;width:50%;height:22px;border-radius:12px;background:#fff;overflow: hidden;} .rating-box .segment .bar i {display:block;height:100%;background:var(--main-color);border-radius:12px;} .rating-box .info {font-size:0.88rem;} .rating-box .info em {font-weight:600} @media all and (max-width:640px) { .rating-box{flex-direction:column;gap:20px;} .rating-box .total,.rating-box .segment{padding:30px 20px;margin-bottom:0;} .rating-box .segment {margin-bottom:20px;} .rating-box .segment ul li {flex-direction:column;gap:10px;align-items:flex-start;} .rating-box .segment .bar{width:100%;} } /* CLASSROOM - PLAYER*/ .webtv_cont .title_con{display:flex;align-items:center;gap:20px;height:100px;margin:0 30px;} .webtv_cont .title_con h1{height:50px !important;max-height:50px;line-height:1.2;} .webtv_cont .title_con h2{font-size:1.875rem;color:#222;font-weight:700;line-height:1.2;} .webtv_cont .title_con .btn_resources{margin-left:auto;padding:12px 15px;font-size: 1.125rem;background: #fff;color:#888;border:1px solid #ddd;border-radius:5px;cursor: pointer;display:flex;align-items:center} .webtv_cont .title_con .btn_resources::before{content:"";background:url('/data/images/ico_resource.png') no-repeat center / contain;width:18px;height:20px;margin-right:8px;vertical-align:middle;} .webtv_cont .desc_con{background:#f8f8f8;margin:0 30px 30px 30px;padding:25px;font-size:1rem;color:#888;line-height:1.4;border-radius:10px;} @media (max-width: 640px) { /* CLASSROOM - PLAYER*/ .webtv_cont .title_con { padding:0;flex-direction:column;gap:10px;align-items:flex-start;margin-top:20px;} .webtv_cont .title_con h1 a img {width:100px;} .webtv_cont .title_con .btn_resources {margin-left:0;} .webtv_cont .desc_con {margin-top:80px;} } /*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('/data/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('/data/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('/data/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('/data/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;min-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{width:100%;padding:1.25rem;position:sticky;top:120px;align-self:flex-start} .aside_con__coursesView .tit{font-size:1.06rem;font-weight:600;line-height:1.2} .aside_con__coursesView .sale{display:flex;flex-direction:column;margin:15px 0} .aside_con__coursesView .sale .dc{font-size:max(11px,0.75rem);color:#ff1a1a} .aside_con__coursesView .sale .price{text-align:right} .aside_con__coursesView .sale .price span{font-size:max(12px,0.88rem);color:#aaa;text-decoration:line-through;} .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:max(12px,0.81rem);color:var(--text-gray);margin:5px 0} .aside_con__coursesView .info li .stit, .aside_con__coursesView .info li .price{font-size:max(12px,0.88rem)} .aside_con__coursesView .options {background:#f4f7fb;border:1px solid #eee;border-width:1px 0;padding:0.5rem 1rem;margin-top:5px;} .aside_con__coursesView .options h6 {font-weight:700;margin:5px 0 10px 0;} .aside_con__coursesView .options li {display:flex;flex-direction: column;gap:0;margin-bottom:10px;} .aside_con__coursesView .options li .stit {display:flex;align-items: flex-start;font-size:max(12px,0.88rem);} .aside_con__coursesView .options li .price {display:flex;justify-content:flex-end;align-items:flex-end;gap:3px;margin:0;} .aside_con__coursesView .options li .price .discount {font-size:0.88rem;color:#aaa;font-weight:400;text-decoration:line-through;} .aside_con__coursesView .options li .price .price {color:var(--main-color);font-size:1.19rem;} .aside_con__coursesView .total{display:flex;justify-content: space-between;margin:15px 0;} .aside_con__coursesView .total .stit{font-size:max(12px,0.88rem);color:var(--text-gray)} .aside_con__coursesView .total .price{font-size:1.19rem;color:var(--main-color);font-weight:700;} .aside_con__coursesView .btn{display:flex;gap:5px;width:100%;overflow:hidden} .aside_con__coursesView .btn a{flex:1;line-height:2.5rem} /* .aside_con__coursesView .btn.-right{justify-content:flex-end} .aside_con__coursesView .btn.-right a{flex:0 1 130px;max-width:130px} */ .mo_fixed{display:none !important} @media all and (max-width:1024px){ .mo_fixed{display:flex !important;gap:1rem;align-items:center;position:fixed;z-index:100;left:0;bottom:0;width:100%;background:#fff;padding:1.25rem;border-top:1px solid #eee;box-shadow:0 -10px 10px rgba(0,0,0,0.05)} .mo_fixed .price{font-size: 1.19rem;color: var(--main-color);font-weight: 700;} .aside_con__coursesView .btn a{max-width:none} .aside_layout.-reverse .container{flex-direction:column} .aside_layout.-reverse .aside_con{order:0;width:100% !important;max-width:100%} .aside_con__coursesView{position:static;align-self:stretch} } @media all and (max-width:480px){ .mo_fixed .-border{order:1} } .aside_con__search{display:flex;align-items:center;height:3.13rem;line-height:3.13rem;border-radius:3.13rem;overflow:hidden} .aside_con__search input[type="text"]{flex:1;width:200px;line-height:3.13rem;border:0} .aside_con__search input[type="submit"]{width:50px;height:100%;background:url('/data/images/input-search.png') no-repeat center;border:0;text-indent:-9999px;opacity:0.5;cursor:pointer} .aside_con__search .close{width:50px;height:100%;background:url('/data/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('/data/images/aside_arrow.png') no-repeat calc(100% - 10px) center} .aside_con__category .menu > li.child.on > a{background:url('/data/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('/data/images/aside_plus.png') no-repeat calc(100% - 2px) center} .aside_con__category .menu > li > ul > li.child.on > a{background:url('/data/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 label{display:flex;gap:10px;align-items:center; padding:5px;cursor:pointer;} /*.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:1.88rem;} .top10_sec .htit{font-size:1.44rem;} .top10_sec .htit strong{color:var(--main-color);font-weight:700;} .top10_sec .swiper{margin-top:1.5rem;} .top10_sec .swiper-slide{border-radius:10px;overflow:hidden} .top10_sec .thumb{} .top10_sec .thumb img{width:100%;aspect-ratio:1.7/1} .top10_sec .info{position:absolute;bottom:0;display: flex;flex-direction: column;justify-content: flex-end;width:100%;height:50%;color:#fff;padding:1.25rem;background:linear-gradient(0deg, rgba(0,0,0,0.3), transparent)} .top10_sec .info .subject{font-size:1.06rem} .top10_sec .info .num{padding-left:25px;background:url('/data/images/ico_certificate-w.png') no-repeat 0 center;font-size:0.88rem;margin-top:10px} @media all and (max-width:1024px){ .top10_sec{padding: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('/data/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 .c-wish{right:0;top:0;} .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} } @media all and (max-width:480px){ .topCourse_sec .info_con .share{position:relative} } .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:100px} .md-list.-btn a{position:absolute;right:0;transform:translateY(-100%)} .md-table{margin:0.63rem 0;overflow:auto} .md-table::-webkit-scrollbar { width: 6px; height: 6px;} .md-table::-webkit-scrollbar-thumb {background:var(--main-color);border-radius: 6px;} .md-table::-webkit-scrollbar-track {background: #f5f5f5} .md-table table{border-collapse: collapse;width:100%;min-width:500px} .md-table table tr th:first-child{position:sticky;left:0;background:#f4f7fb;border:1px solid #eee} .md-table table tr th:first-child:before, .md-table table tr th:first-child:after{content:'';position:absolute;top:0;width:1px;height:100%;background:#eee} .md-table table tr th:first-child:before{left:-1px;} .md-table table tr th:first-child:after{right:-1px} .md-table table tr td:first-child{position:sticky;left:0;background:#fff;border:1px solid #eee} .md-table table tr td:first-child:before, .md-table table tr td:first-child:after{content:'';position:absolute;top:0;width:1px;height:100%;background:#eee} .md-table table tr td:first-child:before{left:-1px;} .md-table table tr td:first-child:after{right:-1px} .md-table th, .md-table td{padding:0.63rem 5px;border:1px solid #eee} .md-table th{background:#f4f7fb;font-weight:500} .syllabus_sec--simple .select_custom{width:100%;max-width:none;font-size:0.94rem;height:3rem;line-height:3rem;border:1px solid var(--border-color);border-radius:ver(--border-radius-small);background: #fff url('/data/images/select_arrow.gif') no-repeat calc(100% - 1.25rem) center;color:#000;margin-bottom:1rem;padding:0 1.25rem} .syllabus_sec--simple .list{border:1px solid var(--border-color);border-radius:var(--border-radius-small);overflow:hidden} .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:1rem 1.25rem;cursor:pointer} .syllabus_sec--simple .list .tit_con .subject{display:flex;gap:0.63rem;align-items:center; font-size:0.94rem;font-weight:500} .syllabus_sec--simple .list .tit_con .subject:before{content:'';display:inline-block;width:14px;min-width:14px;height:14px;background:url('/data/images/ico_sylla_tit_arrow.png') no-repeat center} .syllabus_sec--simple .list .tit_con .info{font-size:0.88rem;color:var(--text-gray);text-align:right} .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('/data/images/ico_sylla_nth1.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .ico2{background:url('/data/images/ico_sylla_nth2.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .ico3{background:url('/data/images/ico_sylla_nth3.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .ico4{background:url('/data/images/ico_sylla_nth4.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .ico5{background:url('/data/images/ico_sylla_nth5.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .ico6{background:url('/data/images/ico_sylla_nth6.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .ico7{background:url('/data/images/ico_sylla_nth7.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .ico8{background:url('/data/images/ico_sylla_nth8.png') no-repeat center} .syllabus_sec--simple .list .info_con li .subject .ico9{background:url('/data/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)} .syllabus_sec--simple.-noTab .info_con{display:block;border-top:0;background:#fff} @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 .info{display:none} .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('/data/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('/data/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.book .photo {display:inline-flex;align-items: center;justify-content: center;width: 50px;height: 50px;border-radius: 50%;border: 1px solid #ccc;font-size: 1.25rem;font-weight: 700;color: #999;background: #f8f8f8;overflow: hidden;} .teacher_sec.book .photo.has {background: url(/data/images/my_photo.png) no-repeat center / cover;color: transparent;} .teacher_sec .info_con .name{display:flex;gap:10px;align-items:center;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('/data/images/ico_star.png') no-repeat center} .teacher_sec .info_con .info .courses:before{content:'';display:inline-block;width:20px;height:20px;background:url('/data/images/ico_monitor.png') no-repeat center} .teacher_sec .info_con .info .graduation:before{content:'';display:inline-block;width:20px;height:20px;background:url('/data/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 .title_box {display: flex;justify-content: space-between;align-items: center; margin: 1.5rem 0;} .board_list .title_box .tit {margin: 0;font-size:1.5rem;} .board_list .sort_con{display:flex;gap:20px;align-items:flex-end; margin:0} .board_list .sort_con .type{display:flex;gap:0;cursor:pointer;} .board_list .sort_con .type span{width:40px;height:40px;text-indent:-9999px} .board_list .sort_con .type .grid_cols{background:url('/data/images/ico_grid_cols.png') no-repeat center} .board_list .sort_con .type .grid_cols:hover, .board_list .sort_con .type .grid_cols.on{background:url('/data/images/ico_grid_cols_on.png') no-repeat center} .board_list .sort_con .type .grid_row{background:url('/data/images/ico_grid_row.png') no-repeat center} .board_list .sort_con .type .grid_row:hover, .board_list .sort_con .type .grid_row.on{background:url('/data/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('/data/images/page-prev-group.png') no-repeat center} .board_list .pagination_con .prev{text-indent:-9999px;background:url('/data/images/page-prev.png') no-repeat center;} .board_list .pagination_con a{font-size:0.94rem;color:#888;min-width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%} .board_list .pagination_con a.on{min-width:26px;background:var(--main-color-light);color:var(--main-color)} .board_list .pagination_con .next{text-indent:-9999px;background:url('/data/images/page-next.png') no-repeat center} .board_list .pagination_con .next-group{text-indent:-9999px;background:url('/data/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} .board_list .title_box{flex-direction:column;gap:10px;} .board_list .title_box .tit {align-self: flex-start;} .board_list .title_box .sort_con {display: flex;justify-content:space-between;width:100%;} .board_list.-review .page_bar {margin-top:40px;} } @media all and (max-width:640px){ .board_list .pagination_con{} .board_list .pagination_con a{font-size:1rem} } /*book List***************************************************/ .md-visual.-book {background:url('/data/images/sub/book_visual.jpg') no-repeat center/cover;} .pg-booklist .md-course.book li .thumb {padding:2rem;} .pg-booklist .md-course.book li .thumb img {display:block;margin:0 auto;aspect-ratio: 1 / 1.3;max-width:190px;height:auto;object-fit:cover;border:4px solid #fff;border-radius: var(--border-radius);box-shadow:var(--box-shadow-large);} .pg-booklist .md-course li .info {background:#fff;} .md-course.book li .info .desc .publisher:before{content:'';display:block;width:20px;height:20px;background:url('/data/images/building.png') no-repeat center} .pg-booklist .md-course.grid1.book li .info {padding:20px;} .top10_sec.book .swiper{margin-top:1.5rem;} .top10_sec.book .thumb img {width: 100%;aspect-ratio: 1 / 1.3;} .price .buy a.bg2 {background:#555;color:#fff} @media all and (max-width:640px){ body .top10_sec.book .thumb {aspect-ratio: 1.4/1;} } /*book View*/ .aside_con__coursesView.book .sale{display:flex;flex-direction:column;gap:10px;margin:15px 0} .aside_con__coursesView.book .count {margin-bottom:15px;display:flex;align-items: center; gap:0;} .aside_con__coursesView.book .count input[id="amount"] {width: 60px;height:36px;background: #fff;border: 1px solid #ddd;text-align: center;} .aside_con__coursesView.book .count span {display: inline-block;width: 36px;height: 36px;border:1px solid #ddd;vertical-align: middle;font-size: 0;background: #fff;} .aside_con__coursesView.book .count .plus {border-right:none;border-radius:5px 0 0 5px;} .aside_con__coursesView.book .count .minus {border-left:none;border-radius:0 5px 5px 0;} .topCourse_sec.book .thumb_con {flex:1} .topCourse_sec.book .thumb_con a {aspect-ratio: 0.75 / 1;} .topCourse_sec.book .thumb_con a:before {background:none;} .topCourse_sec.book .thumb_con a img{filter:none;} .topCourse_sec.book .info_con {flex:2; margin-left:30px;} .topCourse_sec.book .info_con .details {width:100%; background:#fff; padding:25px 20px;border-radius: var(--border-radius); box-sizing:border-box;} .topCourse_sec.book .info_con .details dl {display:flex; margin-bottom:5px;font-size:0.88rem;} .topCourse_sec.book .info_con .details dl dt {width:140px; font-weight:500; color:#333;} .topCourse_sec.book .info_con .details dl dd {flex:1;font-weight:400; color:#888;} .topCourse_sec.book .info_con .btn {margin-top:20px;} .top10_sec .info .num.book{background: url(/data/images/ico_booksell.png) no-repeat 0 center;} .tableOfContents_sec dl {margin-bottom:15px;} .tableOfContents_sec dl dt {font-weight: 600;margin-bottom:4px;} .tableOfContents_sec dl dd {color:#888;font-weight:400;} .tableOfContents_sec dl dd::before {content:'· '; margin-right:6px; color:#555;} .teacher_sec.book li {padding: 2rem;} .md-list.border {border:1px solid var(--border-color); border-radius:var(--border-radius); padding:20px;} .md-list.grid2 ul {display: grid;grid-template-columns: repeat(2, 1fr);gap:5px; } /*페이지 이동*/ body .page_box ul li div {position:relative;font-size:0.875rem;height:30px;width:30px;line-height:30px;color:#666;float: left;text-decoration:none;margin:0 3px 0 0;border:none !important;box-sizing:border-box;border-radius:50% !important;} body .page_box ul li div.page_number_btn_on{color:var(--main-color);background-color:var(--main-color-light2)!important;border:1px solid #e5f5ff !important;} /*MICRO LEARNING******************************************/ /*MICRO LEARNING > 상세*/ .webtvWrap {display:flex; flex-wrap:wrap;} .webtvWrap.close .webtv_cont {width:calc(100% - 2px);} .webtvWrap.close .recommend_cont {width:0;} .webtvWrap.close .recommend_cont .tab_button {background:#f4f7fc url('/data/images/tab_Arrow_left.png')no-repeat center; position:absolute; top:25px;left:-20px;} .webtvWrap .webtv_cont {width:calc(100% - 575px);box-sizing:border-box;} .webtvWrap .webtvInfo_sec {width:100%;display:flex;flex-direction: column;} .webtvWrap .webtvInfo_sec .title_con {padding:0 30px; display:flex; align-items:center;gap:20px;} .webtvWrap .webtvInfo_sec .title_con h1 { height: auto;margin:0;padding:0; flex-shrink:0;border-bottom:none;} .webtvWrap .webtvInfo_sec .title_con h1 a{max-height:50px;line-height:1;} .webtvWrap .webtvInfo_sec .title_con h1 a img {max-height:inherit;vertical-align:middle;} .webtvWrap .webtvInfo_sec .title_con h4 {font-size:1.875rem; color:#222; font-weight:700;line-height:1.2;} .webtvWrap .webtvInfo_sec .title_con .util {flex-shrink:0;margin-left:auto;display:flex;align-items:center;gap:10px;} .webtvWrap .webtvInfo_sec .title_con .util span {cursor:pointer;font-weight: 500;} .webtvWrap .webtvInfo_sec .title_con .util .share {position:relative;} .webtvWrap .webtvInfo_sec .title_con .util .share_popup {display:none; position:absolute; top:26px; right:-10px; width:260px; padding:10px; background:#fff; border:1px solid #ddd; border-radius:10px; z-index:10;box-shadow:0 2px 4px rgba(0,0,0,0.2);} .webtvWrap .webtvInfo_sec .title_con .util .share_popup dt {display:inline-block;line-height:30px;font-size:1rem; font-weight:600;} .webtvWrap .webtvInfo_sec .title_con .util .share_popup dd {display:inline-block;line-height:30px; margin-right:3px;} .webtvWrap .webtvInfo_sec .title_con .util .share:hover .share_popup, .webtvWrap .webtvInfo_sec .title_con .util .share_popup:hover {display:block;} .webtvWrap .webtvInfo_sec .info_con {padding:20px 0 30px 30px;} .webtvWrap .webtvInfo_sec .info_con .date {display:flex;gap:30px;font-size:0.875rem;color:#555;font-weight: 500;} .webtvWrap .webtvInfo_sec .info_con .date dl{display:flex;gap:10px;align-items:center;justify-self: center;font-weight:500;} .webtvWrap .webtvInfo_sec .info_con .date dt {display:flex;align-items:center;justify-content: center;line-height:30px;padding:0px 12px; color:#222;border:1px solid #ddd;border-radius:25px;} .webtvWrap .webtvInfo_sec .title_con .v_util .subscribe_notice {right:auto; left:0; display:inline-block; /* vertical-align:bottom; */ z-index:50;} .webtvWrap .webtvInfo_sec .title_con .v_util .subscribe_notice .subscribe_btn {margin:0 0 12px;} .webtvWrap .webtvInfo_sec .title_con .v_util .subscribe_notice .subscribe_notice_in {width:430px; position:absolute; top:45px; right:0;} .webtvWrap .webtvInfo_sec .title_con .v_util span {position:relative; } .webtvWrap .webtvInfo_sec .title_con .v_util .bubble {position:absolute; top:-50px; left:0; display:block; font-size:15px; font-weight:400; width:74px; height:52px; background:url('/theme/6/img/micro/bubble.png')no-repeat center; text-align:center; line-height:40px; font-style:normal; transform:translateX(-30%);} .webtvWrap .description {margin:0 30px 30px;padding:30px; background:var(--bg-gray); border-radius:10px; box-sizing:border-box;} .webtvWrap .description .hashtag {margin-top:30px;} .webtvWrap .description .hashtag span {display:inline-block;font-size:0.875rem;line-height:1.1;margin-right:5px;} .description .view_file {margin-top:50px;} .estimate_state {position:absolute; top:135px; right:50px;} .estimate_state li {display:inline-block; vertical-align:middle; font-size:15px; font-weight:400; letter-spacing:-0.7pt; margin-right:14px;} .estimate_state li:last-child {margin-right:0;} .webtvWrap .webtv_cont .frame {width:100%;padding:30px;} .webtvWrap .webtv_cont .wbt {position:relative;width:100%;padding-top:56.25%;background:#fff; text-align:center;border-radius:10px; overflow:hidden;} .webtvWrap .webtv_cont .wbt iframe{ position:absolute;top:0; left:0;width:100%; height:100%;} .webtvWrap .webtv_cont .wbt .wbt_txt {width:100%; height:100%; position:absolute; left:0; top:0; display:flex; flex-wrap:wrap; justify-content: center; align-items: center;} .webtvWrap .webtv_cont .wbt .wbt_txt p {font-size:1.176rem; letter-spacing:-0.6pt; line-height:1.4; color:#Fff; font-weight:500; margin:28px 0 0;} .webtvWrap .webtv_cont .wbt .wbt_txt .applyBtn {position:relative; display:block; width:200px; height:60px; line-height:58px; border-radius:50px; background-color:#fff; color:#fff; text-align:left; letter-spacing:-0.3pt; font-weight:400; box-sizing:border-box; padding-left:35px; box-sizing:border-box; background-repeat:no-repeat; text-align:left !important; margin:30px auto 0;} .webtvWrap .webtv_cont .wbt .wbt_txt .applyBtn .svg {width:20px; position:relative; top:3px; margin-right:24px; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(208deg) brightness(140%) contrast(101%);} .webtvWrap .comment_sec {display:flex; flex-direction:column; gap:20px; margin:0 30px 50px; } .webtvWrap .comment_sec h4 {font-size:1.5rem; color:#222; font-weight:600; line-height:1.1;} .webtvWrap .comment_sec h4 span {font-size:1.125rem; color:var(--main-color);font-weight:400; margin-left:10px;} .webtvWrap .comment_sec .input_con {display:flex; gap:10px;} .webtvWrap .comment_sec .input_con input {flex-grow:1; height:45px; padding:0 15px; border:1px solid #ddd; border-radius:5px; font-size:1rem; color:#555;} .webtvWrap .comment_sec .input_con button {max-width:120px !important;line-height:45px;} .webtvWrap .comment_sec .comment_box {border:1px solid #ddd;padding:20px;border-radius:10px;} .webtvWrap .comment_sec .reply_box .comment_con {} .webtvWrap .comment_sec .reply_box {background:#f8f8f8;padding:20px;border-radius:5px;} .webtvWrap .comment_sec .reply_box .desc {margin:0;padding-left:60px;} .webtvWrap .comment_sec .info_con {display: flex;gap:10px; align-items:center; font-size:0.875rem; color:#888; font-weight:500;} .webtvWrap .comment_sec .info_con .info2{display:flex;gap:10px;align-items:center;font-size:0.875rem;color:#888;font-weight:500;} .webtvWrap .comment_sec .info_con .photo {flex-shrink:0; width:50px; height:50px; border-radius:50%; overflow:hidden;} .webtvWrap .comment_sec .info_con .photo img {width:100%; height:100%; object-fit:cover;} .webtvWrap .comment_sec .info_con .author {color:var(--main-color);border:1px solid var(--main-color);padding:0 8px; border-radius: 25px;line-height:25px;} .webtvWrap .comment_sec .info_con .delete {display:inline-block;width: 3.13rem;height:25px;background: url(/data/images/input-close.png) no-repeat center;} .webtvWrap .comment_sec .comment_con .mention{color:var(--main-color);} .webtvWrap .comment_sec .regi_con {display:flex; gap:10px;background: #f8f8f8;padding:20px;border-radius:5px;} .webtvWrap .comment_sec .regi_con input {flex:1; min-width:0; width:100%; height:40px; padding:0 15px; border:1px solid #ddd; border-radius:5px;} .webtvWrap .comment_sec .regi_con button {flex-shrink:0; max-width:100px !important; height:40px;font-size:0.875rem;} /*MICRO LEARNING 코멘트 영역*/ .webtvWrap .page_num {padding-bottom:120px;} .webtvWrap .recommend_cont {position:relative; width:575px; border-left:1px solid #ddd;background:#f4f7fc; box-sizing:border-box; min-height:100vh; z-index:999;} .webtvWrap .recommend_cont .recommend {overflow:hidden;} .webtvWrap .recommend_cont .tab_button {display:block; width:20px; height:35px; border-radius:10px 0 0 10px; border:1px solid #bcbcbc; border-right:0; background:#f4f7fc url('/data/images/tab_Arrow.png')no-repeat center;position:absolute; top:25px; left:-20px;} .webtvWrap .recommend_cont .recom_tit_wrap{display:flex;justify-content:space-between;align-items:center;column-gap:8px;padding:16px 30px;height:80px;border-bottom:1px solid #ddd;overflow:hidden;box-sizing:border-box;} .webtvWrap .recommend_cont .recom_tit{font-size:1.176rem; color:#222; letter-spacing:-0.7pt; line-height:1.2; font-weight:500;} .webtvWrap .recom_tit_wrap .tab_close{flex-shrink:0;min-width:90px; height:45px;line-height:45px;background:#fff; border:1px solid #555555; border-radius:5px; font-size:1.125rem; font-weight:500; text-align:center; padding:0 10px;} .webtvWrap .recom_tit_wrap .tab_close img {width:14px; margin-right:10px;} .recommend_in {padding:30px; box-sizing:border-box; overflow-y:auto;} .recommend_in dl {margin:0 0 20px;} .recommend_in dl a {display:table; width:100%;} .recommend_in dl a dt {display:table-cell; width:180px; vertical-align:middle; border-radius:15px; overflow:hidden;} .recommend_in dl a dt img {width:100%; background-position:center; background-repeat:no-repeat; background-size:cover;} .recommend_in dl a dd {display:table-cell; width:calc(100% - 180px); vertical-align:middle; word-break:break-all;} .recommend_in dl a dd .hashtag span {display:inline-block;font-size:0.875rem;line-height:1.1;margin-right:5px;} .recommend_in dl a dd h4 {color:#222; line-height:1.2; font-weight:300;} .recommend_in dl a dd p {display:flex;align-items:center;justify-content:space-between;font-size:0.875rem;font-weight:400; line-height:1.2;margin:13px 0 0;} .recommend_in dl a dd .time {background:url(/data/images/ico_date.png) no-repeat left center;color:#888;padding-left:25px;} .recommend_in dl a dd .running_time {background: #fff;border:1px solid #cbc9cc; padding:0 8px; border-radius: 25px;line-height:25px;} /*MICRO LEARNING 추천*/ @media (max-width: 640px) { .webtvWrap .webtv_cont {width: 100% !important;} } /* SUPPORT *****************************************/ .pg-board {margin-bottom:60px;} .pg-board h2 {color:#333;font-size:2.25rem;padding:60px 0 30px 0} .pg-board h2 .total {display:inline-block; margin-left: 10px;font-size: 1.5rem;font-weight: 400;} body .pg-board .apply-box {margin-bottom:0 !important;} /* SUPPORT 공통 카테고리 탭 스타일 */ .topCate_tab {margin: 0 0 25px 0;} .topCate_tab ul {display:flex;flex-wrap:wrap;gap:5px;} .topCate_tab ul li {display:flex;align-items:center;justify-content:center;border:1px solid var(--main-color);border-radius:20px;transition:background-color 0.3s,border-color 0.3s;} .topCate_tab ul li a {color:var(--main-color);font-size:0.875rem;white-space:nowrap;padding:7px 15px;transition:color 0.3s;} .topCate_tab ul li.active {background-color:var(--main-color);border-color:var(--main-color);border-radius:20px;} .topCate_tab ul li.active a {color:#fff !important;} .topCate_tab ul li:hover {background-color:var(--main-color);border-color:var(--main-color);} .topCate_tab ul li:hover a {color:#fff;} /* MYPAGE,SUPPORT 하위메뉴 공통 */ input[type="text"], input[type="password"],select {height:40px;line-height:40px;border:1px solid var(--border-color);border-radius:var(--border-radius-small);padding:0 12px;} button, input[type="button"] {cursor:pointer;} input[type="checkbox"] {padding:6px;margin-right:8px;} select {position: relative;width:100%;max-width:200px;vertical-align: middle;z-index: 95;background: #fff url(/data/images/select_arrow.gif) no-repeat right 20px center;padding: 0 35px 0 20px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;} .control-box {display: flex;justify-content:space-between;align-items:center;margin-bottom: 20px;} .control-box.only-right { justify-content: flex-end;} .control-box div:first-child input {margin-right:10px;} .control-box select {height:35px;line-height:35px;} .apply-box {display:flex;justify-content:center;gap:10px;padding:30px 0;} .only-right { justify-content: flex-end;} .both { justify-content: space-between;} /*SUPPORT,CLASSROOM 공통 */ .bd_searchbox {position:relative;display:inline-block;} .bd_searchbox .btn_search {position: absolute; top:50%; left:10px;transform: translateY(-50%); width:19px; height:19px;} .clear-btn {position: absolute;right: 10px;top:50%;transform: translateY(-50%);width:20px;height:20px;cursor: pointer;} .bd_searchbox input.search_input {width:250px;height:38px;padding:0 30px 0 35px;border:1px solid var(--border-color);border-radius: 18px;} .boardList_sec ul {display: flex;flex-wrap: wrap;gap:20px; } .boardList_sec ul li.board {flex: 0 0 calc(50% - 10px);padding:0;min-width:0;} .boardList_sec ul li {position:relative} .boardList_sec ul li a {display:block;margin:0;width:100%;height:100%;padding:20px;position:relative;overflow:hidden;border:1px solid var(--border-color);border-radius: var(--border-radius-small);} .boardList_sec ul li a:hover {border-color:var(--main-color);box-shadow: var(--box-shadow-hover);} .boardList_sec .notice {background-color:#fff;border-color:var(--main-color);} .notice-flag {position: absolute;top: -3px;right: 10px;width:20px;height:25px;} .notice-flag-body {fill: var(--main-color);} .boardList_sec h3 {font-size: 0.88rem;color:#888;font-weight:600;margin:5px 0;} .boardList_sec .tit {display:flex;align-items:center;gap:10px;} .boardList_sec h4 {font-size: 1.25rem;font-weight:600;color:#555;line-height:1.4;margin-bottom:10px;white-space: nowrap;overflow: hidden;text-overflow:ellipsis;min-width:0; } .boardList_sec h4::before, .material_list h4::before{content:'';display:inline-block;width:20px;height: 20px;background: url(/data/images/ico_notice.png) no-repeat center;background-size: contain;margin-right: 8px;vertical-align: middle;} .boardList_sec h4 span {margin-left:8px;} .boardList_sec .tit .mo_file {display:none;} .boardList_sec .desc {font-size: 0.95rem;color:#888;margin-bottom:15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow: ellipsis;} .boardList_sec .info_group {display: flex; justify-content: space-between; align-items: center;margin-bottom:0;} .boardList_sec .info span {display:inline-block;margin-right:15px;padding-left:25px;font-size:0.875rem;font-weight:500;line-height:1.6;color:var(--text-gray-light);} .boardList_sec .info .writer {background: url(/data/images/ico_name.png) left center no-repeat; } .boardList_sec .info .date {background: url(/data/images/ico_date.png) left center no-repeat; } .boardList_sec .info .hit {background: url(/data/images/ico_view.png) left center no-repeat; } .boardList_sec .info .comment {background: url(/data/images/ico_hit.png) left center no-repeat;padding-left:20px !important;} .boardList_sec .info2 {display:flex;gap:10px;} .boardList_sec .info2 span {display:flex;align-items:center;justify-content:center;width:50px;height:50px;background-color:var(--bg-gray);border:1px solid var(--border-color);border-radius:50%;position:relative;transition:background-color 0.3s;cursor:pointer;} .qna_wrap .boardList_sec ul {display: flex;flex-wrap: wrap;gap:20px; } .qna_wrap .boardList_sec ul li.qna {flex: 0 0 calc(50% - 10px); padding:0;min-width:0;height:auto;} .qna_wrap .boardList_sec ul li a {display: block;min-height:160px;margin:0;padding:20px;position: relative;overflow: hidden;} .qna_wrap .boardList_sec ul li a:hover {border-color:var(--main-color);box-shadow: var(--box-shadow-hover);} .qna_wrap .boardList_sec ul li .tit {display:flex;align-items:center;gap:10px;} .qna_wrap .boardList_sec ul li .mo_lock {display:none;} .qna_wrap .boardList_sec ul li .mo_file {display:none;} .qna_wrap .info_group {line-height:50px;margin-top:20px;} /*추가*/ .ico_board_new {display:inline-flex;align-items:center;justify-content:center;min-width:22px;width:22px;height:22px;background:var(--main-color);color:#fff;font-size:0.88rem;border-radius:50%;padding:0 2px;} .material-box:hover { border-color:var(--main-color); } @media all and (max-width: 640px) { .pg-board {margin-bottom:30px;} .pg-board h2 {font-size:1.5rem;padding:30px 0 20px 0;} .pg-board h2 .total {font-size:1.125rem;margin-left:5px;} .topCate_tab {margin:0 0 15px 0;} .topCate_tab ul {gap:5px;} .topCate_tab ul li a {padding:5px 10px;} .boardList_sec ul li a {min-height:0;} .boardList_sec ul li .tit .mo_lock{flex-shrink:0;} .boardList_sec .tit {align-items:flex-start;} .boardList_sec .tit .mo_file {display:inline-block;} .boardList_sec .info_group {flex-direction:column;align-items:flex-start;gap:10px;} .boardList_sec .info {display:flex;flex-wrap:wrap;width:100%;align-items:center;} .boardList_sec .info span {margin-right:10px;padding-left:20px;background-size:16px;line-height:20px;background-position:left center;} .boardList_sec .info2 span {display:none;} .notice-flag {width:16px;height:20px;right:8px;} .apply-box {padding:20px 0;gap:8px;} .boardList_sec .mo_lock img{width:auto;height:19px;max-width:100%;max-height:100%;vertical-align: middle;display:inline-block;} /*SUPPORT > QNA LIST*/ .qna_wrap .boardList_sec ul li.qna {flex:0 0 100%;height:auto;} .qna_wrap .boardList_sec ul li a {height:auto;min-height:80px;padding:15px;} .qna_wrap .boardList_sec ul li .tit span {align-self:flex-start;} .qna_wrap .boardList_sec ul li .mo_lock {display:inline-block;} .qna_wrap .boardList_sec ul li .mo_file {display:inline-block;} .qna_wrap .boardList_sec .info2 span {display:none;} /*FAQ*/ .faq_list > dl > dd > div {font-size:1rem;} /*게시판 VIEW*/ .pg-board .boardView_sec .title_box .status {display:none;} } /* SUPPORT,CLASSROOM 공통 > VIEW */ .boardView_sec{width:100%;height:auto;position:relative;border-radius:0 0 10px 10px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);background:#fff;} .boardView_sec .title_box{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;position: absolute;top:-200px; left: 0; right: 0; text-align: center; width:100%;height:200px;padding:20px;background: #fff;border-bottom: 1px solid var(--border-color-light);border-radius:10px 10px 0 0;font-size:1rem;} .boardView_sec .title_box h3{display:flex;flex-direction:row;align-items:center;gap:10px;} .boardView_sec .title_box h3 .tit{display:flex;align-items:center;gap:10px;color:#333;font-size:1.75rem;line-height:1.1;} .pg-board .category {font-size:1.125rem;color:#888;font-weight:600;} .pg-board .status {display:inline-flex;align-items:center;justify-content:center;width:fit-content;height:1.63rem;font-size:0.88rem;color:#fff;font-weight:300;padding:3px 10px;border-radius:20px;} .pg-board .status.answered {background-color: var(--main-color);} .pg-board .status.pending {background-color: var(--ico-color2);} /*보드 > 프로필박스*/ .pg-board .profile_box {display:flex;justify-content:center;align-items:center;gap:30px;margin:0 auto;} .pg-board .profile_box li {display:flex;gap:10px;} .pg-board .profile_box li.profile {display: flex;align-items:center;justify-content:flex-start;gap:10px;font-size:0.875rem;color:#888;} .pg-board .profile_box li.profile .info {display:flex;flex-direction:column;justify-content:flex-start!important;} .pg-board .profile_box li.profile .writer {color:#555;font-weight:500;font-size:1rem;} .pg-board .profile_box li .view::before {content:'';display:inline-block;width:19px;height:14px;background:url('/data/images/ico_view.png') no-repeat left center;vertical-align: middle;margin-right:8px;} .pg-board .profile_box li .comment::before {content:'';display:inline-block;width:13px;height:13px;background:url('/data/images/ico_comment.png') no-repeat left center;vertical-align: middle;margin-right:8px;} /*보드 > 프로필박스 > 프로필사진*/ .pg-board .photo{display:flex;align-items:center;justify-content:center;width: 50px;height: 50px;border-radius:50%;border: 1px solid #ccc;font-size:1.25rem;font-weight:700;color:#999;background: #f8f8f8;overflow: hidden;} .pg-board .photo.has {background: url(/data/images/my_photo.png) no-repeat center / cover;color: transparent;} .boardView_sec .view_con {width:100%;height:auto;padding:30px;} .boardView_sec .view_con .user_con {min-height:250px;} .boardView_sec .view_con .download {margin-top:20px;padding:15px 20px;background-color:var(--bg-gray);border-radius:var(--border-radius-small);} .boardView_sec .view_con .download a {font-size:0.875rem;} .boardView_sec .view_con .download img {margin-right:5px;} .boardView_sec .view_con .download a:hover {text-decoration: underline;} .boardView_sec .apply-box {padding-bottom:30px;margin-bottom:30px;} .comment_sec {display:flex; flex-direction:column; gap:20px; margin:0 0px 50px; } .comment_sec h4 {font-size:1.5rem; color:#222; font-weight:600; line-height:1.1;} .comment_sec h4 span {font-size:1.125rem; color:var(--main-color);font-weight:400; margin-left:10px;} .comment_sec .input_con {display:flex; gap:10px;} .comment_sec .input_con input {flex-grow:1; height:45px; padding:0 15px; border:1px solid #ddd; border-radius:5px; font-size:1rem; color:#555;} .comment_sec .input_con button {max-width:120px !important;line-height:40px;} .comment_sec .comment_box {display:flex;flex-direction:column;gap:10px;border:1px solid #ddd;padding:20px;border-radius:10px;} .pg-board .comment_sec .waiting {border:1px solid #ddd;border-radius:10px; padding:20px;} .comment_sec .info_con {display: flex;gap:10px; align-items:center; font-size:0.875rem; color:#888; font-weight:500;} .comment_sec .info_con .info {display:flex;flex-direction:column;gap:5px;} .comment_sec .info_con .info .writer {color:#333;} .comment_sec .info_con .author {color:var(--main-color);border:1px solid var(--main-color);padding:0 8px; border-radius: 25px;line-height:25px;} .comment_sec .divider {width:100%;height:1px;background:#ddd;} .comment_sec .delete {width: 3.13rem;height:25px;background: url(/data/images/input-close.png) no-repeat center;} .comment_sec .download_con {padding:10px;background-color:var(--bg-gray);border-radius:var(--border-radius-small);margin-top:10px;} .comment_sec .download_con a {font-size:0.875rem;} .comment_sec .reply_con {display:flex; gap:10px;background: #f8f8f8;padding:20px;border-radius:5px;} .comment_sec .reply_con input {flex-grow:1; height:40px; padding:0 15px; border:1px solid #ddd; border-radius:5px;} .comment_sec .reply_con button {max-width:100px !important; height:40px;font-size:0.88rem;} .comment_sec .replyChain_con {margin-top:20px;} .comment_sec .replyChain_con .open {min-width:100px;text-align:center;border:1px solid var(--border-color);border-radius:5px;padding:0 1.5rem;line-height:2.4rem;} .comment_sec .replyChain_con .open span {color:var(--main-color);} .comment_sec .replyChain_con .open::after { content:'';display: inline-block; width: 11px;height:7px;margin-left: 6px;background: url('/data/images/ico_arrow_down.png') center / contain no-repeat;} .comment_sec .replyChain_con .replyChain {font-size:0.875rem;background:#f8f8f8;margin-top:10px;padding:10px;border-radius:5px;} .comment_sec .replyChain_con.off .open::after{transform:rotate(180deg)} @media all and (max-width: 640px) { /* Board > View 타이틀 박스 */ .pg-board.view .boardView_sec .title_box {top:-180px;height:180px;padding:15px;} .pg-board.view .boardView_sec .title_box h3 {flex-direction:column;gap:8px;} .pg-board.view .boardView_sec .title_box h3 .tit {word-break:break-word;} .pg-board.view .pg-board.view .profile_box {justify-content:flex-start !important;} .pg-board.view .pg-board.view .status {height:1.4rem;padding:2px 8px;} /* Board > View 프로필 박스 */ .pg-board.view .profile_box li.profile {gap:8px;} .pg-board .profile_box li.profile .info {flex-direction:column;align-items:flex-start;gap:3px;} .pg-board.view .profile_box li.profile .writer {font-size:0.875rem;} .pg-board.view .photo {width:40px;height:40px;font-size:1rem;} /* Board > View 본문영역*/ .pg-board.view .boardView_sec .view_con {padding:20px 15px;} .pg-board.view .boardView_sec .view_con .user_con {min-height:150px;} .pg-board.view .boardView_sec .view_con .download {padding:12px 15px;} .pg-board.view .boardView_sec .view_con .download a {font-size:0.88rem;} /* Board > Comment Section*/ .pg-board.view .comment_sec .waiting {flex-direction:column;align-items:flex-start;} .pg-board.view .comment_sec .waiting span {font-size:1rem;} .pg-board.view .comment_sec {margin:0 0 30px;} .pg-board.view .comment_sec .input_con {flex-direction:column;gap:8px;} .pg-board.view .comment_sec .input_con input {width:100%;height:40px;font-size:0.875rem;} .pg-board.view .comment_sec .input_con button { flex: 0 0 auto;height:40px;} .pg-board.view .comment_sec .comment_box {padding:15px;} .pg-board.view .comment_sec .info_con {flex-wrap:wrap;gap:6px;} .pg-board.view .comment_sec .info_con .author {padding:0 6px;line-height:20px;} .pg-board.view .comment_sec .reply_con {flex-direction:column;padding:15px;gap:8px;} .pg-board.view .comment_sec .reply_con input {width:100%;height:38px;} .pg-board.view .comment_sec .reply_con button {flex: 0 0 auto;height:40px;} .pg-board.view .comment_sec .replyChain_con .open {padding:0 1rem;line-height:2rem;} .pg-board.view .comment_sec .replyChain {font-size:0.95rem;} .pg-board.view .comment_sec .download_con a {font-size:0.88rem;} .pg-board.view .comment_sec .comment_box .desc {font-size:0.95rem;} } /*CLASSROOM > BOARD */ .classroom.board .control-box .h3_tit {margin:1.25rem 0 !important;display:flex;align-items:center;gap:20px;} .classroom.board .control-box, .qna_wrap .control-box{margin-top:20px;} /*CLASSROOM > QNA */ .qna_wrap.classroom .boardList_sec .tit {margin-top:5px;} .qna_wrap .control-box .h3_tit {margin:1.25rem 0 !important;display:flex;align-items:center;gap:20px;} .pg-mypage .status {display: inline-flex;align-items:center;justify-content:center;height:1.63rem;font-size: 0.88rem;color: #fff;font-weight:300;padding:3px 10px;border-radius: 20px;} .pg-mypage .status.answered {background-color: var(--main-color);} .pg-mypage .status.pending {background-color: var(--ico-color2);} /*FAQ*/ .faq_list { border-top: 1px solid var(--border-color-light);} .faq_list dl {overflow: hidden;} .faq_list dt {padding: 17px 20px 17px 60px;box-sizing: border-box;border-bottom: 1px solid var(--border-color-light);line-height:30px;position: relative; cursor: pointer;font-size: 1rem;font-weight:600;: break-all;} .faq_list dt:before { content: '';position: absolute; top: 50%; right: 27px;transform: translateY(-50%);width: 8px;height: 8px;border-top: 2px solid #999; /* 위쪽 대각선 */ border-right: 2px solid #999; transform: translateY(-50%) rotate(45deg);transition: transform 0.3s;} .faq_list dt.on:before {transform: translateY(-50%) rotate(135deg); transition: all 0.3s;} .faq_list dl dd {font-weight:400;border-bottom: 1px solid var(--border-color-light); padding: 25px 35px 25px 60px;display: none;border-top: 0;position: relative;width: 100%; box-sizing: border-box; word-break: keep-all;} .faq_list .question, .faq_list .answer {font-family: 'Arial', sans-serif; font-size: 1rem;font-weight:600;position: absolute;left: 20px;} .faq_list .question {top: 16px;color:var(--main-color)} .faq_list .answer {top: 28px;color:var(--btn-color2);} .faq_list .file-box {margin-top: 15px;padding:15px; background-color: var(--bg-color-light);border-radius:var(--border-radius)} /*SUPORT > GALLERY BOARD */ .pg-board .gallery_list {display: grid;grid-template-columns: repeat(3, 1fr); gap: 20px; } .pg-board .gallery_list .item {width:100%; box-sizing:border-box;border: 1px solid var(--border-color);border-radius: var(--border-radius);} .pg-board .gallery_list .item a {display: block;margin:0;position:relative;overflow:hidden;} .gallery_list .item a:hover {border-color:var(--main-color);box-shadow: var(--box-shadow-hover);} .gallery_list .item.notice-item {border:1px solid var(--main-color);background-color: var(--bg-gray);} .gallery_list .item .img_box {width:100%;aspect-ratio: 4 / 2.5;position:relative;overflow:hidden;border-radius:var(--border-radius) var(--border-radius) 0 0;} .gallery_list .item .img_box img {width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;} .gallery_list .item .img_box .cate.notice {position: absolute; top: 10px; left: 10px; background-color: #ff5e5e; color: #fff; padding: 2px 6px;} .gallery_list .item .con_box{display:flex;flex-direction:column;gap:10px;padding:20px;justify-content:flex-start;height:auto;} .gallery_list .item .con_box h3 {font-size: 0.88rem;color:#888;font-weight:600;margin:0 0 0 0;} .gallery_list .item .con_box .tit {display:flex;align-items:center;gap:10px;} .gallery_list .item .con_box .tit h4 {font-size:1.25rem;margin:0;line-height:1.2;overflow: hidden; text-overflow: ellipsis;white-space:nowrap;} .gallery_list .item .con_box .tit span {line-height:1.2;} .gallery_list .profile_box {justify-content:flex-start;margin:0;padding-top:20px;} .gallery_list .item .con_box h4 .comment_cnt {background-color: #eee; color: #666; font-size: 0.875rem; padding: 2px 4px; margin-left: 5px; border-radius: 3px;} @media all and (max-width:1200px) { .gallery_list .item .con_box .tit h4 {white-space: normal;word-break: break-all;} } @media all and (max-width: 640px) { .pg-board .gallery_list {grid-template-columns:repeat(2, 1fr);gap:5px;} .gallery_list .item {min-width:0;} .gallery_list .item a {min-width:0;} .gallery_list .profile_box {padding-top:10px;} .gallery_list .profile_box li .view {display:none;} /* GALLERY ITEM */ .gallery_list .item .img_box {padding-bottom:65%;} .gallery_list .item .con_box {padding:15px 10px;} .gallery_list .item .con_box h3 {font-size:0.88rem;margin:0 0 -5px 0;} .gallery_list .item .con_box .tit {align-items:flex-start;} .gallery_list .item .con_box .tit h4 {margin:0 0 8px 0;gap:4px;white-space:normal;word-break:break-word;line-height:1.3;flex-wrap:wrap;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow: hidden;} .gallery_list .item .con_box .tit span{flex-shrink:0;} .gallery_list .item .con_box .tit span img{width:14px;height:14px;} .boardView_sec .view_con .user_con p img {height:auto;} .pg-board .page_bar {margin-top:20px;} } /*SUPORT - BLOG - WEBZINE */ .webzine_list .item a {display: flex;border: 1px solid var(--border-color);margin-bottom: 20px;padding:0;border-radius:var(--border-radius);} .webzine_list .item a:hover {border-color:var(--main-color);box-shadow: var(--box-shadow-hover);} .webzine_list .item .img_box {width:30%;aspect-ratio: 4 / 2.5;position:relative;border-radius:var(--border-radius) 0 0 var(--border-radius);overflow:hidden;} .webzine_list .item .img_box img {width:100%;height:100%; object-fit:cover;} .webzine_list .item .con_box {display:flex;flex-direction:column;gap:10px;padding:20px;justify-content:flex-start;height:auto;width:70%;} .webzine_list .item .con_box h3 {font-size: 0.88rem;color:#888;font-weight:600;margin-bottom:3px;} .webzine_list .item .con_box .tit {display:flex;align-items:center;gap:10px;} .webzine_list .item .con_box .tit h4 {font-size:1.25rem;margin:0;line-height:1.2;overflow: hidden; text-overflow: ellipsis;white-space:nowrap;} .webzine_list .item .con_box .tit span {line-height:1.2;} .webzine_list .item .con_box .mo_file {display:none;} .webzine_list .desc {font-size:0.95rem;color:#888;display:-webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow:hidden;text-overflow:ellipsis;} .webzine_list .item .con_box .info_con {display:flex;justify-content:space-between;align-items:center;} .webzine_list .item .con_box .info2 {display:flex;gap:10px;} .webzine_list .item .con_box .info2 span {display:flex;align-items:center;justify-content:center;width:50px;height:50px;background-color:var(--bg-gray);border: 1px solid var(--border-color);border-radius: 50%;} .pg-board .apply-box.webzine {padding-top:10px;} .webzine_list .profile_box li.profile .info {display:flex;flex-direction:column;gap:5px;align-items:center;} .webzine_list .profile_box .view {line-height:14px;} @media all and (max-width: 640px) { .pg-board .apply-box.webzine {padding-top:0;} /* 웹진 리스트 */ .webzine_list .item a {flex-direction:column;max-height:none;} .webzine_list .item .img_box {width:100%;border-radius:var(--border-radius) var(--border-radius) 0 0;} .webzine_list .item .con_box {width:100%;padding:15px;} .webzine_list .item .con_box h3 {margin-bottom:5px;} .webzine_list .item .con_box h4 {margin:0 0 10px 0;white-space:normal;word-break:break-word;line-height:1.3;} .webzine_list .item .con_box p {margin-bottom:12px;-webkit-line-clamp:2;} .webzine_list .item .con_box .info_con {flex-direction:column;gap:10px;align-items:flex-start;} .webzine_list .item .con_box .info2 {justify-content:flex-start;} .webzine_list .item .con_box .info2 span {display:none;} .webzine_list .item .con_box .mo_file {display:inline-block} /* 웹진 프로필 박스 */ .webzine_list .profile_box {flex-direction:row!important;gap:20px;align-items:center!important;} .webzine_list .profile_box li.profile .info {gap:2px;} .webzine_list .profile_box li.profile {gap:8px;flex-direction:row;} .webzine_list .photo {width:35px;height:35px;} } /* SUPPORT - MAIL INQUIRY */ .pg-email h2 {font-size:1.875rem;color:#333;} .pg-email .desc {font-size:1rem;color:#888;font-weight:300;} .pg-email .form_table2 dl {margin:10px 0 20px 0;} .pg-email .form_table2 dl dt {font-size:0.95rem;font-weight:500;margin-bottom:5px;} .pg-email .form_table2 dl dd input {width:100%;max-width:400px;} .pg-email .form_table2 dl dd textarea {width:100%;min-height:160px;border:1px solid #ddd;border-radius:5px;padding:10px;color:#888;} .pg-email .mo_tit {display: none;} @media all and (max-width: 640px) { /* 문의하기 페이지 */ .pg-email .aside_con.-pc {display: none;} .pg-email .mo_tit {display: block;margin-bottom: 30px;padding: 0;} .pg-email .mo_tit h2 {margin-bottom: 15px;color: #333;} .pg-email .mo_tit .desc {line-height: 1.6;color: #666;} .pg-email .form_table2 dl dd select.input {width: 100% !important;} } /* SUPPORT, CLASSROOM WRITE */ .form_table {} .form_table dl {display:table; width:100%; border-bottom:1px solid #ddd; padding:15px 0; box-sizing:border-box;} .form_table dl dt {display:table-cell; vertical-align:middle; width:140px; font-weight:400; color:#222; letter-spacing:-0.5pt; line-height:1; padding:0;} .form_table dl dt span {display:inline-block; margin-left:3px;} .form_table dl dd {display:table-cell; vertical-align:middle; width:100%;} .form_table dl dd.middle {vertical-align:middle;} .form_table dl dd .hipen {display:inline-block; vertical-align:middle; width:15px; text-align:center; font-size:1rem;} .form_table dl dd .email {display:inline-block; vertical-align:middle; font-size:1rem;} .form_table dl dd .input {display:inline-block; height:50px; border:1px solid #ddd; border-radius:5px; box-sizing:border-box; padding:0 15px;} .form_table dl dd label {font-size:15px; font-weighT:400; letter-spacing:-0.5pt; line-height:1; margin-right:50px; vertical-align:middle; position:relative; top:8px;} .form_table dl dd textarea {width:100%; height:160px; border-radius:5px; border:1px solid #ddd; box-sizing:border-box; padding:15px; word-break:break-all;} .form_table dl dd div {word-break:break-all;} .form_table dl dd input[id='name'] {width:420px;} .form_table dl dd input[id='email_input'] {width:180px;} .form_table dl dd .input_num {width:130px;} .form_table dl dd select {height:50px; border:1px solid #ddd; border-radius:5px; box-sizing:border-box; padding:0 15px;} .form_table dl dd select[id='input_num'] {width:130px;} .form_table dl dd select[id='email'] {margin-left:5px;} .form_table dl dd input[name='upfile1'] {width:505px; padding:7px; box-sizing:border-box; height:auto; font-size:13px;} .form_table dl dd .input_l {width:100% !important;} .form_table dl dd input[type="radio"] {display:inline-block; width:20px; height:20px; border:1px solid #aaa; border-radius:100%; position:relative; top:-3px; margin-right:5px;} .form_table dl dd input[type="radio"]:checked {border:5px solid var(--main-color);} /*FORUM VIEW > READ */ .cview_wrap .recommend {margin-left:auto;display:flex;gap:10px;position:relative;} .cview_wrap .recommend span {display:flex;align-items: center;justify-content:center;width:50px;height:50px;background-color: var(--bg-gray);border: 1px solid var(--border-color);border-radius:50%;position:relative;transition: background-color 0.3s;cursor:pointer;} .cview_wrap .recommend span.like:hover, .cview_wrap .recommend span.hate:hover {background-color:var(--main-color-light);} .cview_wrap .recommend .like .tooltip, .cview_wrap .recommend .hate .tooltip {position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;padding:5px 10px;background-color:#333;color:#fff;font-size:0.75rem;border-radius:4px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity 0.3s, visibility 0.3s;pointer-events:none;z-index:10;} .cview_wrap .recommend .like .tooltip:after, .cview_wrap .recommend .hate .tooltip:after {content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#333;} .cview_wrap .recommend .like:hover .tooltip, .cview_wrap .recommend .hate:hover .tooltip {opacity:1;visibility:visible;} @media all and (max-width: 640px) { .cview_wrap .recommend {margin-left:0;} } @media all and (max-width: 640px) { /*게시판 - WRITE 페이지 */ .board_write .form_table dl {display: block;padding: 15px 0;} .board_write .form_table dl dt {display: block;width: 100%;padding: 0 0 8px 0;} .board_write .form_table dl dd {display: block;width: 100%;} .board_write .form_table dl dd .category label {display:inline-block;margin-bottom: 10px;line-height:20px;font-size:1.25rem;} .board_write .form_table dl dd.tit {display: flex;flex-direction:column;align-items:flex-start;gap:10px;} .board_write .form_table dl dd.tit input.input {width: 100% !important;} .board_write .form_table dl dd.tit label {margin:0;top:0;line-height:30px;} .board_write .form_table dl dd .input {width: 100%;height: 40px;} .board_write .form_table dl dd textarea {height: 200px;font-size: 0.875rem;} .board_write .form_table dl dd input[id='name'] {width: 100%;} .board_write .form_table dl dd input[id='email_input'] {width: 100%;} .board_write .form_table dl dd .input_num {width: 100%;} .board_write .form_table dl dd select {width: 100%;height: 40px;font-size: 0.875rem;} .board_write .form_table dl dd select[id='input_num'] {width: 100%;} .board_write .form_table dl dd select[id='email'] {margin-left: 0;margin-top: 5px;} .board_write .form_table dl dd input[name='upfile1'] {width: 100%;} .board_write .file_txt table th {font-size:0.88rem;} .form_table .secret {margin-top:10px;} /*CLASSROOM > BOARD, QNA */ .boardList_sec ul li.board {flex: 0 0 100%;} .evaluation_sec .control-box .selectbox {flex: 1 1 100%;align-self: flex-end;} .classroom.board .control-box .bd_searchbox, .qna_warp .control-box .bd_searchbox {width:100%;} .classroom.board .control-box .h3_tit {flex:1;align-self:flex-start;} .qna_warp .control-box .h3_tit {flex:1;align-self:flex-start;} .qna_wrap .boardList_sec ul li.qna {flex: 0 0 100%;} .qna_wrap .boardList_sec ul li.qna .qna_label {margin-bottom:5px;} .classroom.board .control-box, .qna_wrap .control-box {margin-top:0;} .classroom.board .control-box, .evaluation_sec .control-box{flex-direction:column;margin:10px 0;} .classroom.board .page_bar, .qna_wrap .page_bar {margin-top:20px;} .qna_wrap .control-box {flex-direction:column;margin:10px 0;} .qna_wrap .control-box .h3_tit {flex:1;align-self:flex-start;} .qna_wrap .control-box .bd_searchbox {flex:1 1 100%;width:100%;} .bd_searchbox input.search_input{width:100%;} /*CLASSROOM > BOARD */ .material_list ul li {flex: 0 0 100%;} .material_list .material-box {flex-direction:column;align-items:flex-start;} body .page_box {margin: 0 0 20px 0 !important;} .conArea p img {width:100%;} /*FORUM VIEW*/ .boardList_sec .info2 span img {pointer-events:none;} } /*CART*********************************************/ .pg-cart .h2_tit {display:flex;justify-content:space-between;margin:0 auto;line-height:1;padding:60px 40px 20px;} .pg-cart .h2_tit span {font-size:1.25rem;font-weight:400;margin-left:3px;} .pg-cart .h2_tit .control {display:flex;gap:20px;align-items:center;padding-right:330px;} .pg-cart .h2_tit .control > div {min-width:80px;display:flex;align-items: center;gap:5px;} .pg-cart .aside_layout {padding-top:0;} .pg-cart .aside_layout .aside_con .tit {font-size:1.25rem;margin-bottom:20px;} .pg-cart .aside_layout .aside_con .total {padding:0 10px;} .cart_sec .-border1 {border-bottom:1px solid var(--border-color);} .cart_sec{margin-bottom:0.63rem} .cart_sec > ul{display:flex;flex-direction: column;gap:0.63rem} .cart_sec > ul > li:first-child{border-top:1px solid var(--border-color);} .cart_sec li{display:flex;gap:2rem;align-items:center; padding:20px} .cart_sec .thumb_con{flex:4 4 200px;position:relative;background:var(--bg-gray);text-align:center;max-width:200px} .cart_sec .thumb_con a{display:block;padding:1.5rem} .cart_sec .thumb_con a img{width:100%;max-width:150px;border-radius:var(--border-radius);box-shadow:var(--box-shadow-large)} .cart_sec li.course .thumb_con a{display:block;padding:0;} .cart_sec li.course .thumb_con a img {max-width:210px;} .cart_sec .info_con{flex:8;} .cart_sec .info_con .subject{font-size:1.31rem;font-weight:600;margin:1rem 0 0.4rem} .cart_sec .info_con .dc{font-size:0.88rem;color:#ff1a1a} .cart_sec .info_con .info{display:flex;gap:15px;align-items:center; margin-top:1rem;color:var(--text-gray-light);font-size:0.88rem} .cart_sec .info_con .info span{display:flex;gap:5px;align-items:center;} .cart_sec .info_con .info .writer::before{content:'';display:block;width:20px;height:20px;background: url(/data/images/ico_name.png) no-repeat center;} .cart_sec .info_con .info .time::before{content:'';display:block;width:20px;height:20px;background: url(/data/images/ico_clock.png) no-repeat center;opacity: 0.6;} .cart_sec .info_con .info .star::before{content:'';display:block;width:20px;height:20px;background:url('/data/images/ico_star.png') no-repeat center} .cart_sec .price_con{flex:4;} .cart_sec .price_con .info li{display:flex;align-items:flex-start;justify-content:space-between;margin:5px 0;padding:0 10px;} .cart_sec .price_con .info li span strong{display:inline-block;font-size:0.75rem;color:#888;font-weight:400;text-decoration: line-through;margin-right:5px;} .c-btn.-widebg {max-width:none !important;background: var(--btn-color1);color: #fff;} .cart_sec .price_con .total {padding:0 10px;display:flex;align-items:center;justify-content:space-between;margin-top:20px;} .cart_sec .price_con .total .price {font-size:1.55rem;color:var(--main-color);font-weight:700;} .cart_sec .price_con .stit {font-size:0.95rem;color:#888;} .cart_sec .select_con{flex:0.5;} /*CART - 체크박스*/ input[type="checkbox"].cart_check{width:24px;height:24px;margin-right:8px;vertical-align:middle;-webkit-appearance:none;appearance:none;border:1px solid #ddd;background:#fff;border-radius:4px;display:inline-block;position:relative;cursor:pointer;padding:0} input[type="checkbox"].cart_check:after{content:'';position:absolute;left:7.5px;top:3px;width:4.5px;height:8px;border:3px solid transparent;border-left:none;border-top:none;transform:rotate(45deg);opacity:0} input[type="checkbox"].cart_check:checked{background:#009bff;border-color:#009bff} input[type="checkbox"].cart_check:checked:after{border-color:#fff;opacity:1} .cart_sec .info_con .count {display:flex;align-items: center; gap:0;margin-top:20px;} .cart_sec .info_con .count input[id="amount"] {width: 60px;height:36px;background: #fff;border: 1px solid #ddd;text-align: center;} .cart_sec .info_con .count span {display: inline-block;width: 36px;height: 36px;border:1px solid #ddd;vertical-align: middle;font-size: 0;background: #fff;} .cart_sec .info_con .count .plus {border-right:none;border-radius:5px 0 0 5px;} .cart_sec .info_con .count .minus {border-left:none;border-radius:0 5px 5px 0;} .cart_sec .quantity {display:flex;align-items: stretch;border-radius:4px;margin-top:20px;overflow: hidden;} .cart_sec .quantity .btn {flex: 0 0 36px!important;width:36px;height:36px;background-color: #fff;border: 1px solid #ccc;font-size:1rem; line-height:1;padding: 0;box-sizing: border-box;} .cart_sec .quantity .btn, .cart_sec .quantity .count { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; box-sizing: border-box; font-size: 1rem; line-height: 1; border: 1px solid #ccc;} .cart_sec .quantity .btn.plus {border-right:none;} .cart_sec .quantity .btn.minus {border-left:none;} .cart_empty {display:flex;flex-direction:column;gap:20px;justify-content:center;align-items:center;} .cart_empty h4 {font-size:2.25rem;font-weight:600;} .cart_empty p {font-size:1.25rem;color:#888;text-align:center;line-height:1.5;} .cart_empty .btn_con {margin-top:60px;} @media all and (max-width:1024px){ .pg-cart .h2_tit .control {padding-right:0;} .pg-cart .mo_fixed {flex-direction:column;} .pg-cart .mo_fixed .total {display:flex;justify-content:space-between;width:100%;margin:0;padding:0 10px;} } @media all and (max-width:640px){ .pg-cart .h2_tit {flex-direction:column;gap:10px;padding:60px 20px 20px;} .pg-cart .h2_tit .tit {font-size:1.5rem;} .pg-cart .h2_tit label {font-size:1.125rem;} .cart_sec ul > li{flex-direction:column; align-items:unset; position:relative; padding-top:50px;} .cart_sec .price_con .info li{flex-direction:row} .cart_sec .thumb_con{flex:1;max-width:none} .cart_sec li.course .thumb_con a img{max-width:none} .cart_sec .info_con{padding:5px} .cart_sec .select_con{position:absolute; top:20px; left:20px;} .cart_empty {padding:0 20px;} .cart_empty h4 {font-size:1.75rem;text-align:center;} .cart_empty p {font-size:1rem;} .cart_empty .btn_con {margin-top:30px;} } /* PEYMENT ********************************************/ .payment_wrap .clear {display:inline-block;width:16px;height:16px;background:url('/data/images/input-close.png') no-repeat center center;background-size:contain;vertical-align:middle;margin-right:8px;} .wrap-layer {position:fixed !important;top:50% !important;left: 50% !important;transform:translate(-50%, -50%) !important;width:800px;max-width:100%;} .pop-frame {width:100%;} .payment_con input[type="radio"] {-webkit-appearance:none; appearance:none;width:16px; height:16px; border:1px solid var(--border-color);border-radius:50%; display:inline-block; vertical-align:middle; box-sizing:border-box; background:#fff; position:relative; cursor:pointer; } .payment_con input[type="radio"]::after {content:'';position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:8px; height:8px; border-radius:50%;background:transparent;transition:background 0.12s ease,width 0.12s ease,height 0.12s ease; } .payment_con input[type="radio"]:checked {border:4px solid var(--main-color);} .payment_con input[type="radio"]:checked::after {background:#fff; width:6px; height:6px;} .payment_con input[type="radio"]:focus {outline:none; box-shadow:0 0 0 3px rgba(0,155,255,0.12);} .payment_con input[type="text"], .payment_con input[type="tel"], .payment_con input[type="email"]{height:45px;line-height:45px;border:1px solid #ddd;border-radius: var(--border-radius-small);padding:10px;} .payment_con textarea {width:100%;height:120px;line-height:1.4;border:1px solid #ddd;border-radius: var(--border-radius-small);padding:10px;} .payment_wrap .clear {display:inline-block;width:16px;height:16px;background:url('/data/images/input-close.png') no-repeat center center;background-size:contain;vertical-align:middle;margin-right:8px;} /*라인아이콘*/ .line-ico {display:inline-flex;align-items:center;justify-content:center;min-width:4.38rem;padding:0 10px;border:1px solid var(--main-color);border-radius: 20px;background:#fff;font-size:0.88rem;color:var(--main-color);text-align:center;margin-right: 8px;} .pg-payment {padding-top:60px} .pg-payment .aside_con__coursesView .tit {margin-bottom:20px;} .pg-payment .aside_con.payment .agree {font-size:0.8rem;color:#888;margin-bottom:20px;text-align:center;} .aside_con.payment .agree a {color:#555;text-decoration:underline;} .aside_con.payment .c-btn {width:100%;max-width:none;} .payment_con {margin:0;padding:30px 10px;border-bottom:1px solid #ddd;} .payment_con:first-child {border-top:1px solid #ddd;} .payment_con h3 {font-size:1.5rem;margin-bottom:20px;} .payment_con dl {margin-bottom:10px;} .payment_con dt {color:#555;} .payment_con .order_items .item {display:inline-block;height:1.63rem;line-height:1.63rem;min-width:4.38rem;padding:0 10px;border:1px solid var(--main-color);border-radius:20px;background:#fff;font-size:0.88rem;color:var(--main-color);text-align:center;margin-right:8px;} .payment_con .order_items .sale {color:#888;font-size:0.875rem;font-weight:400;margin-right:8px;text-decoration: line-through;} .payment_con .order_items dl {display:flex;align-items:center;justify-content:space-between;gap:50px;} .payment_con .order_items dl dt,.payment_con.coupon dt{color:#888;font-weight:500;} .payment_con .order_items dd {display:flex;justify-content:flex-end;} .payment_con .order_items .price {font-size:1.125rem;color:#333;font-weight:600;white-space:nowrap;} .payment_con.coupon dd {font-size:1.125rem;color:#333;font-weight:600;} .payment_con.coupon > div {display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;} .payment_con.coupon > div h3 {margin:0;} .payment_con.coupon > div h3 span {color:var(--main-color);font-size:1rem;font-weight:400;margin-left:5px;} .payment_con.coupon > dl {display:flex;align-items:center;justify-content:space-between;} .payment_con.coupon .c-btn {flex: 0 0 130px;max-width: 130px;display:inline-flex;align-items: center;justify-content: center;text-align: center;} .payment_con.guide p{font-size:0.95rem;color:#888;} .payment_con.requests .desc {font-size:0.875rem;color:#888;} /* Shipping form layout */ .payment_con.shipping .input.error {border:1px solid #ff2d2d;} .payment_con.shipping fieldset {border:0;padding:0;margin:0;} .payment_con.shipping .form-row {display:flex;align-items:center;gap:16px;margin-bottom:12px;} .payment_con.shipping .form-row label {width:140px;flex:0 0 140px;font-weight:500;} .payment_con.shipping .form-row .alert {font-size:0.875rem;color:#ff2d2d;margin-top:3px;} .payment_con.shipping .form-row input, .payment_con.shipping .form-row select, .payment_con.shipping textarea {flex:1;} @media all and (max-width:480px){ .pg-payment .contents.aside_layout {flex-direction: column;} .pg-payment .aside_con.payment {order: 2;} .pg-payment .content {order: 1;} .payment_con.shipping .form-row{flex-direction:column;align-items:stretch;gap:5px;margin-bottom:15px;} .payment_con.shipping .form-row label{width:auto;font-size:0.9rem;flex:none !important;} /* flex:none으로 세로 레이아웃에서 높이 확장 방지 */ .payment_con.shipping .form-row input, .payment_con.shipping .form-row select{height:42px !important;line-height:42px;font-size:0.95rem;flex:none !important;} .payment_con.shipping .form-row .alert {font-size:0.8rem;margin-top:3px;} .payment_con.shipping input#fullName, .payment_con.shipping input#phone, .payment_con.shipping input#email, .payment_con.shipping input#zipcode, .payment_con.shipping select#country {flex:none !important;width:100% !important;height:42px !important;} .payment_con.shipping textarea {height:100px;font-size:0.95rem;} .pg-payment {padding-top:20px;} .payment_con {padding:20px 15px;} .payment_con h3 {font-size:1.25rem;margin-bottom:15px;} .payment_con .order_items dl {flex-direction:column;align-items:flex-start;gap:10px;} .payment_con .order_items dl dt {width:100%;display:flex;flex-wrap:wrap;gap:5px;} .payment_con .order_items dd {font-size:1rem;} .payment_con.coupon > div {flex-direction:column;align-items:flex-start;gap:10px;} .payment_con.coupon > div h3 {margin-bottom:10px;} .payment_con.coupon .c-btn {flex:none;max-width:none;width:100%;} .payment_con.coupon > dl {flex-direction:column;align-items:flex-start;gap:5px;} .payment_con.guide p {font-size:0.875rem;line-height:1.6;} .payment_con.requests .desc {font-size:0.8rem;} .payment_con .method .method-option {padding:12px 15px;} .payment_con .method .method-option label {width:150px;font-size:0.9rem;} .payment_con .method .card_info {padding:16px 15px;} .aside_con.payment .btn {display:flex;flex-direction:column;gap:10px;} .aside_con.payment .c-btn {width:100%;} .aside_con.payment .agree {font-size:0.7rem;line-height:1.5;} } .payment_con .address{width:100%;} .payment_con .method {display:flex;flex-direction:column;border:1px solid #ddd;border-radius:var(--border-radius);padding:0;} .payment_con .method input[type="text"] {width:100%;} .payment_con .method .method-option {display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid #eee;} .payment_con .method .method-option input[type="radio"] {width:18px; height:18px; margin:0;} .payment_con .method .card_info {background:#f8f8f8;border-top:0;margin:0;padding:16px 20px;} .payment_con .method .card_info label {font-size:0.875rem;color:#555;font-weight:400;display:block;margin: 0 0 4px;} .payment_con .method .card_info .form-row {display: flex;flex-direction: column;gap:5px;margin-bottom: 20px;} .payment_con .method .method-option label {display: inline-block;width:200px;height:30px;line-height:30px;} .payment_con .method .card_info .num {background: url('/data/images/logo_visa.png') no-repeat right 12px center;background-size: 72px 16px; padding-right:30px;background-color:#fff;} .payment_con .method .method-option .vnpay {background: url('/data/images/logo_vnpay.png') no-repeat left center;background-size: 66px 20px; background-color:#fff;} .payment_con .method .method-option .paypal {background: url('/data/images/logo_paypal.png') no-repeat left center;background-size: 69px 20px;background-color:#fff;} .payment_con .method .method-option .gpay {background: url('/data/images/logo_gpay.png') no-repeat left center;background-size: 50px 20px;background-color:#fff;} .payment_con .method .center {display:flex;gap:12px;} .payment_con .method .form-row.small label {width:120px;} .payment_con .method .form-row.small input {max-width:160px;} .payment_con .method .center .form-row.small {display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:50%;} .payment_con .method .center .form-row.small label {width:auto;margin:0;font-weight:500;} .payment_con .method .center .form-row.small input {width:100%;max-width:none;height:40px;line-height:40px;padding:0 10px;} @media all and (max-width:768px){ .payment_con.shipping input#fullName, .payment_con.shipping input#phone, .payment_con.shipping input#email {flex: 1 1 auto;width:100%;} } @media all and (max-width:480px){ .payment_con .method .center{flex-direction:column;} .payment_con .method .center .form-row.small{width:100%;} } .payment_con .method .card_info .form-row input, .payment_con .method .card_info .form-row select, .payment_con .method .card_info .form-row textarea {height: 45px;line-height: 45px;padding: 0 10px;box-sizing: border-box;} .payment_con.shipping input#fullName, .payment_con.shipping input#phone, .payment_con.shipping input#email, .payment_con.shipping input#zipcode, .payment_con.shipping select#country {flex: 0 0 350px;width:350px;max-width:100%;} /*GREETING******************************************/ .greeting {width:100%;height:31.2rem;background-image: url('/data/images/topimg_greeting.jpg');position:relative;padding:7.5rem;} .greeting .slogan {color: #fff;font-size: 2.19rem;font-weight:700;} .greeting .desc {color: #fff;font-size: 1.5rem;font-weight:500;} .greeting .overview {position: absolute;left: 50%;bottom: 0;transform: translate(-50%, 50%);width:100%;} .greeting .overview ul {display: flex; flex-wrap:wrap;gap: 24px;padding:50px 60px;background-color: #fff;border-radius: 20px;box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);} .greeting .overview li {flex: 1 1 200px;text-align: center; } .greeting .overview h6 {font-size: 3.5rem;font-weight: 800;margin: 0 0 8px;background: linear-gradient(to bottom, #438dfd, #7c59f8);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} .greeting .overview p {color:#888;} .welcome {display:flex;align-items:center;gap:120px;padding-top:210px;} .welcome h2, .offer h2, .ux h2, .bottom h2{color:#333;font-size:2.25rem;font-weight:700;margin-bottom:30px;} section p {color:#888;line-height:1.4;} .welcome .welcome_text p{font-size:1.125rem;} .welcome .welcome_img {flex: 0 0 400px;height:400px;border-radius:50%;overflow: hidden;margin: 0;} .welcome .welcome_img img {width: 100%;height: 100%;object-fit: cover;} .welcome .welcome_text p{font-size:1.125rem;} .offer {margin-top:160px;} .offer .companytitle {text-align:center;} .offer ul {display: flex;justify-content: space-between;gap:20px;flex-wrap: wrap;list-style: none;padding: 0;} .offer_item {flex: 1;gap:20px;text-align: center;border:1px solid #ddd;padding:50px 25px;box-sizing:border-box;} .offer_icon {width: 100px;height: 100px;margin: 0 auto 15px;} .offer_item .subtitle {color:#333;margin-top:30px;} .offer_item .desc {color:#555;line-height:1.2;margin-top:10px;} .offer .feature {margin-top:20px;} .offer .feature ul {display: grid;grid-template-columns: repeat(3, 1fr); gap: 20px;} .offer .feature_item {display: flex;align-items: center;border: 1px solid #ddd;padding:15px;} .offer .feature_item .icon {flex: 0 0 60px;height:60px;display:flex;align-items:center;justify-content:center;margin-right:15px;} .offer .feature_item .desc {flex: 1;font-size: 0.88rem;line-height: 1.3;} .ux {margin-top:135px;} .ux ul {display:flex;flex-flow:row wrap;gap:80px;align-items:flex-start;justify-content:space-between;margin-top:30px;box-sizing:border-box;} .ux .ux_item { flex: 1;padding:25px 0;text-align: center;} .ux .ux_item > div img{border-radius:50%;} .ux .ux_item > p {margin-top:20px;font-size:1rem;} .bottom {display:flex;flex-direction:column;justify-content:center;align-items:center;height:350px;margin-top:160px;background:url(/data/images/bg_about_bottom.jpg) no-repeat center top; background-size: cover; text-align: center; color: #fff;} .bottom h2 {color:#fff;text-shadow: 0 0 8px rgba(0,0,0,0.2);} .bottom p {color:#fff;font-size:1.875rem} /*LOCATION***********************************************/ .companyLocation {margin:50px 0 190px;} .companyLocation .tit {font-size: 2.25rem;color:#333333; font-weight:600;} .companyLocation .desc {font-size: 1.0rem; color: #555555;margin-bottom:50px;} .companyLocation .info {margin:50px 0 0;color:#555;} .companyLocation .info ul {list-style: none;margin:0; padding: 0;} .companyLocation .info li:first-child {border-top:1px solid #eee;} .companyLocation .info li {display:flex;align-items:flex-start;width: 100%;padding: 12px 0;border-bottom: 1px solid #eeeeee;} .companyLocation .info .icon {flex: 0 0 30px; text-align: center;margin-right: 8px;} .companyLocation .info .title {flex: 0 0 100px;font-weight:600; margin-right: 8px;} .companyLocation .info address,.location-info p{flex: 1;margin: 0;font-style: normal;} /*TEACHER LIST*******************************************/ .pg-tutor {margin:60px 0 140px} .pg-tutor h2 {color:#333;font-size:2.25rem;} .pg-tutor h3 {color:#333;font-size:1.875rem;} .cate_tab {margin-top:25px;} .cate_tab ul {display:flex;flex-wrap:wrap;gap:5px;} .cate_tab ul li{display:flex;align-items:center;justify-content:center;border:1px solid var(--main-color);border-radius:20px;} .cate_tab ul li a {color:var(--main-color);font-size:0.875rem;white-space: nowrap;padding:7px 15px;transition: color 0.3s, background-color 0.3s;} .cate_tab ul li.on {background-color: var(--main-color);border-color: var(--main-color);} .cate_tab ul li.on a {color:#ffffff;} .cate_tab ul li:hover {background-color: var(--main-color);border-color: var(--main-color);} .cate_tab ul li:hover a {color:#ffffff;} .teacher_con {margin-top:60px;} /*TEACHER LIST BOX 공통*/ .teacher_item {display:flex;flex-direction: row;gap:45px;border:1px solid #ddd;padding:20px 60px;margin-bottom:20px;transition: background-color 0.3s, border-color 0.3s;} .teacher_item:hover {border-color: var(--main-color);background-color: #f4f7fc;} .teacher_item .img_box {flex: 0 0 auto;width:200px;height:200px;overflow: hidden;border-radius:50%;} .teacher_item .img_box img {width:100%;height:100%;object-fit: cover;display: block;} .teacher_item .con_box h4{font-size:1.56rem;color:#555;} .teacher_item .con_box h4 .tutor_field {display:inline-block;margin-left:10px;font-size:1rem;font-weight:400;} .teacher_item .con_box .course_intro {color:#555;margin-top:20px;} .teacher_item .con_box .course_result {margin:15px 0;font-weight:500;} .course_result span {display:inline-block;margin-right:25px;font-size:0.875rem;color:#555;font-weight:500;line-height:1.2;padding-left:25px;} .course_result .review {background: url(/data/images/ico_star.png) left center no-repeat;} .course_result .num {background: url(/data/images/ico_course.png) left center no-repeat;} .course_result .student {background: url(/data/images/ico_graduation_cap.png) left center no-repeat;} .btn_view {display:inline-block;padding:8px 22px 10px 22px;color:#fff;background-color: var(--main-color);border:none;line-height:1;} /*TEACHER VIEW*/ .teacher_box {width:100%;background:#f4f7fc;padding:50px 0 0 0;} .teacher_box .teacher_in {max-width:1370px;padding:0 40px;margin:0 auto;display:flex;gap:30px;} .teacher_box .teacher_in .imgCont {flex:0 0 350px;height:350px;} .teacher_box .teacher_in .txtCont .title {font-size:1.875rem;color:var(--main-color);} .teacher_box .teacher_in .txtCont .desc {font-size: 1rem;color:#555;font-weight:normal !important;} .teacher_box .teacher_in .txtCont .info {width:100%;margin:25px 0;padding:20px 100px 20px 20px;background:#fff;border-radius:8px;box-sizing:border-box;} /*.teacher_box .teacher_in .txtCont .info ul {display:flex;flex-direction: row;gap:45px;}*/ .teacher_box .teacher_in .txtCont .info ul li h5 {font-size:1.125rem;color:#282828;} /*.teacher_box .teacher_in .txtCont .info ul li p {font-size:0.77rem;color:#555;}*/ .teacher_box .teacher_in .txtCont .course_result {margin-bottom:50px;} /*TEACHER VIEW - COURSE LIST*/ .course_sec {width:100%;margin:0 auto;background:#fff;} .courselist.wide {display:flex; flex-wrap:wrap; } .courselist.wide .nodata{border-top:1px solid #222;} .courselist.wide .item {position:relative; margin-right:20px; width:calc((100% - 20px) / 2); border:1px solid #ddd; box-sizing:border-box;margin-bottom:20px;} .courselist.wide .item:not(.slick-slide):nth-child(2n){margin-right:0;} .courselist.wide .item a {position:relative; display:block;} .courselist.wide .item:hover {border-color: var(--main-color);background-color:#f4f7fc;} .courselist.wide .item .img_box{position:relative;width:100%;aspect-ratio: 2.8 / 1;background-position: center center;padding:20px;box-sizing:border-box;} .courselist.wide .item .img_box > img {width:100%;height:100%;object-fit:cover;display: block;} .courselist.wide .item .con_box {position:relative; padding:20px 15px; box-sizing:border-box;} .courselist.wide .item .con_box h4 {font-size:1.5rem; color:#333;font-weight:600; line-height:1.8;margin-bottom:20px;} .courselist.wide .item .con_box p {font-size:1rem;color:#555;line-height:1.3;margin-bottom:20px;} .courselist.wide .item .con_box .course_info {padding-bottom:20px;} .courselist.wide .item .con_box .price {position:absolute;right:25px;bottom:30px;display:flex;align-items:center;} .courselist.wide .item .con_box .sale{color:#aaa;text-decoration:line-through;} .courselist.wide .item .con_box .total{font-size:1.63rem;color:var(--main-color);font-weight:800;margin-left:5px} .courselist.wide .con_box .info ul{display:flex;justify-content: space-between;} .courselist.wide .con_box .info .label_con {display:flex;flex-direction:row;gap: 5px;} .courselist.wide .con_box .info .label_con .custom {color:#fff;font-size:0.875rem;line-height:25px;padding:0 12px;border-radius:25px;} .courselist.wide .con_box .info .label_con .pick {color:#fff;font-size:0.875rem;background:var(--main-color);line-height:25px;padding:0 12px;border-radius:25px;} .courselist.wide .con_box .info .review_con .review {background: url('/data/images/ico_star.png') no-repeat left center;padding-left:25px;} .courselist.wide .btn_box {display:flex;width: 100%;} .courselist.wide .btn_box button {flex: 1;padding:15px 0;font-size:1.25rem;cursor:pointer;} .courselist.wide .btn_box button:first-child {color:var(--main-color);background:#fff;border:1px solid var(--main-color);} .courselist.wide .course_info {margin-bottom:25px;} .courselist.wide .course_info .tutor, .courselist.wide .course_info .date {font-size:0.875rem;padding-left: 1.5em;background-size: 1em;margin-right:10px;} .courselist.wide .course_info .tutor {background: url('/data/images/ico_man.svg') no-repeat left center;} .courselist.wide .course_info .date {background: url('/data/images/ico_time.svg') no-repeat left center;} /*TEACHER LIST BOX 공통*/ .teacher_item {display:flex;flex-direction: row;gap:45px;border:1px solid #ddd;padding:20px 60px;margin-bottom:20px;transition: background-color 0.3s, border-color 0.3s;} .teacher_item:hover {border-color: var(--main-color);background-color: #f4f7fc;} .teacher_item .img_box {flex: 0 0 auto;} .teacher_item .img_box img {width:210px;height:210px;margin:0;border-radius:50%;} .teacher_item .con_box h4{font-size:1.56rem;color:#555;} .teacher_item .con_box h4 .tutor_field {display:inline-block;margin-left:10px;font-size:1rem;font-weight:400;} .teacher_item .con_box .course_intro {font-size:0.88rem;margin-top:20px;} .teacher_item .con_box .course_result {margin:15px 0;font-weight:500;} .teacher_item .course_result span {display:inline-block;margin-right:25px;font-size:0.875rem;color:#555;font-weight:500;line-height:1.2;padding-left:2em;} .teacher_item .num {background: url(/data/images/ico_course.png) left center no-repeat;} .teacher_item .student {background: url(/data/images/ico_graduation_cap.png) left center no-repeat;} .teacher_item .btn_view {display:inline-block;padding:8px 22px 10px 22px;color:#fff;background-color: var(--main-color);border:none;line-height:1;} /*TEACHER VIEW > TUTOR REVIEW*/ .review_sec {margin:60px 0;} .review_sec .h3_tit .tit {display:flex;align-items:center;gap:3px;} .review_con {display: flex;gap:20px;flex-wrap: wrap;} .review_box {width:calc(50% - 10px);padding:20px;background: var(--bg-gray);display:flex;flex-direction: column;gap:20px;justify-content:flex-start;border:1px solid var(--border-gray);border-radius:var(--border-radius);} .review_box .head_con{display:flex;gap:10px;align-items:center} .review_box .head_con .photo{border-radius: 50%;overflow:hidden;width:52px;height:52px;} .review_box .head_con .info{display:flex;flex-direction: column;gap:5px} .review_box .head_con .name{display:flex;gap:20px;font-size:1.06rem;color:var(--text-gray)} .review_box .info_con .subject{font-size:1.31rem} .review_box .info_con .desc{font-size:1.06rem;color:var(--text-gray-light);margin:1rem 0;height:95px;overflow:auto;} .review_box .bottom_con {border-top:1px dotted var(--border-color);padding-top:20px;} .review_box .bottom_con .more{display:block;line-height:20px;padding-left:30px;background:url('/data/images/ico_moniter.png') no-repeat 0% center;} @media (max-width: 768px) { .teacher_item {flex-direction:column;gap:20px;padding:20px;align-items:center;} .teacher_item .con_box {text-align:center;} .teacher_item .con_box h4 .tutor_field {display:block;} .teacher_item .con_box .course_intro {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .teacher_con .item {display:flex;flex-direction:column;} .teacher_con .item .img_box {text-align:center;} .teacher_box .teacher_in {flex-direction:column; align-items: center;} .teacher_box .teacher_in .imgCont {flex: 0 0 auto;width: 100%;height: auto;text-align:center;} .teacher_box .teacher_in .txtCont {width: 100%;} .courselist.wide .item {margin:10px 0 10px; width:calc(100% - 10px);} .review_box {width:100%;} } @media (max-width: 1024px) { .greeting .overview ul {gap:10px;margin:0 20px;} .greeting .overview li { flex: 1 1 calc(25% - 10px);} .greeting .overview h6 {font-size: 2.25rem;font-weight: 700;} .welcome {gap:20px;} .welcome .welcome_text p{margin-top:30px;font-size:1rem;} .welcome .welcome_img {flex: 0 0 200px;height:200px;} .offer_item {flex: 0 0 calc(50% - 10px);} .offer .feature ul {grid-template-columns:repeat(2, 1fr);} .ux ul {flex-wrap:wrap; gap:20px;} .ux .ux_item {flex: 0 0 calc(50% - 20px);padding:15px 0;} } @media (max-width: 640px) { .greeting {padding:3rem;} .greeting .slogan {font-size:1.875rem} .greeting .desc {display:none;font-size:1.25rem} .greeting .overview ul {flex-wrap:wrap;gap:12px;padding:20px;} .greeting .overview li { flex: 1 1 calc(50% - 12px);} .greeting .overview h6 {font-size:1.875rem;} .greeting .overview p {font-size:0.95rem;} .welcome h2, .offer h2, .ux h2, .bottom h2 {font-size:1.875rem} .welcome .welcome_img {display:none;} .offer ul {display:grid; grid-template-columns:repeat(2,1fr);} .offer .offer_item{padding:15px;} .offer .offer_item .subtitle {margin-top:10px;} .offer, .ux, .bottom {margin-top:60px;} .offer .feature ul {grid-template-columns:1fr;} .bottom p {padding:0 20px;font-size:1.25rem} } /*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('/data/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} } /*footer> Terms, Privacy, Cookies Policy, Refund Policy*/ .pg-footer .toc h3 {font-weight:500;} .pg-footer .toc ul {padding:20px 30px;font-size:0.875rem; line-height:1.8;} .pg-footer .toc ul li a {text-decoration:underline;color:#555;} .pg-footer .footer_con {color:#888; line-height:1.6;} .pg-footer .footer_con h2 {font-size:1.875rem;color:#333;margin-bottom:20px;} .pg-footer .footer_con h3 {color:#555;margin-bottom:10px;} .pg-footer .footer_con h4 {padding-left:1rem;} .pg-footer .footer_con h4:first-of-type {padding-top:10px;} .pg-footer .footer_con .head_text {color:#555;} .pg-footer .footer_con p.date {font-size:0.95rem;color:#555;font-weight:500;margin-bottom:5px;} .pg-footer .footer_con p {padding-left:1rem;} .pg-footer .footer_con div {margin-bottom:30px;font-size:0.95rem;padding-left:1rem;} .pg-footer .footer_con ul {padding:1rem 0 1rem 2rem;} .pg-footer .footer_con ul li::before {content:'·';margin-right:10px;} .pg-footer .footer_con a {color:#666;text-decoration:underline;} .pg-footer .footer_con table {margin:0 1rem;width:95%;} .pg-footer .footer_con .email {color:#555;} .pg-footer .refund_amount {max-width:720px;background:#e5f5ff;margin:10px 0;margin-left:1rem;padding:20px;border-radius:5px;color:var(--main-color);font-weight:600;text-align:center;} .pg-footer .cookie_table {border-collapse: collapse;width: 100%;font-size:0.875rem;} .pg-footer .cookie_table th, .cookie_table td {border: 1px solid #ddd;padding:10px;text-align: left;} .pg-footer .cookie_table th {background-color: #e5f5ff;} .pg-footer .cookie_table td:first-child {background-color: #f8f8f8;font-weight:500;} /* Sticky aside for desktop inside the page layout @media (min-width: 1024px) { .contents.aside_layout .container {display: flex;align-items: flex-start;gap: 30px; } .contents.aside_layout .aside_con.-pc { position: sticky;top: 100px; align-self: flex-start;z-index: 5; }*/ /* COOKIE SETTING POPUP */ .cookie_popup{display:none;position:fixed;top: 50%; left: 50%; transform: translate(-50%, -50%);z-index: 1000; width:100%;max-width: 600px;height:auto; overflow: auto; padding:30px; border-radius:5px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); background: #fff;z-index:9999;} .cookie_popup.on{display:block} .cookie_popup .close{position:absolute;top:20px;right:20px;width:24px;height:24px;cursor:pointer} .cookie_popup .close::before,.cookie_popup .close::after{content:'';position:absolute;left:12px;top:0;width:2px;height:24px;background:#333} .cookie_popup .close::before{transform:rotate(45deg)} .cookie_popup .close::after{transform:rotate(-45deg)} .cookie_popup h2{width:100%;margin:10px auto;font-size:1.5rem;color:#333;text-align:center;} .cookie_popup .info_box{font-size:0.875rem;color:#888;padding:20px 30px;margin-bottom:20px;background:#f4f7fb;} .cookie_popup .info_box > div {margin-top:10px;display:flex;flex-direction:row !important;justify-content:center;gap:10px;} .cookie_popup .info_box .small-btn {max-width:140px;} .cookie_popup h4{margin:20px 0 10px 0;font-size:1.125rem;color:#333;} .cookie_popup .cookie_list {border:1px solid #ddd;} .cookie_popup dl{border-top:1px solid #eee;padding:12px 0} .cookie_popup dl:first-of-type{border-top:0} .cookie_popup dl dt{display:flex;align-items:center;gap:12px;padding:0 20px 0 15px;cursor:pointer} .cookie_popup dl dt .tit{margin:0;font-size:1rem;font-weight:500;padding-left:10px;} .cookie_popup dl dt span.open {width: 12px;height: 12px;position: relative;display: inline-flex; align-items: center; justify-content: center;} .cookie_popup dl dt span.open::before,.cookie_popup dl dt span.open::after { content: ''; position: absolute; background: #999; transition: opacity 0.4s ease;} .cookie_popup dl dt span.open::before {width:12px; height: 1px;} .cookie_popup dl dt span.open::after { width: 1px; height: 12px;} .cookie_popup dl.is-on dt span.open::after { opacity: 0;} .cookie_popup dl dd{display:none;color:#888;font-size:0.88rem;padding:10px 10px 10px 23px;overflow:auto;} .cookie_popup dl.is-on dd{color:#888;font-size:0.88rem;max-height:400px;padding:10px 10px 10px 23px;} /* toggle switch */ .cookie-switch, .always-active{font-size:0.95rem;font-weight:600;color:var(--main-color);margin-left:auto;display:inline-flex;align-items:center;flex:0 0 auto} .cookie-switch input{position:absolute;opacity:0;width:0;height:0} .cookie-switch .switch{width:44px;height:24px;background:#cfe6ff;border-radius:999px;display:inline-block;position:relative;transition:background .18s;border:1px solid rgba(0,0,0,0.06)} .cookie-switch .switch::after{content:'';position:absolute;left:3px;top:1px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,0.12);transition:transform .18s} .cookie-switch input:checked + .switch{background:var(--main-color);} .cookie-switch input:checked + .switch::after{transform:translateX(18px)} .cookie-switch input[disabled] + .switch{opacity:0.6;cursor:not-allowed} /* small screen adjustments */ @media(max-width:480px){ .cookie_popup{width:calc(100% - 24px);padding:16px} } /*SEARCH RESULT****************************************/ .search_tit h2 {color: #333;font-size: 2.25rem;padding:60px 0 20px 0;} .searchCate ul {display:flex;flex-wrap:wrap;gap:15px;margin-bottom:50px;} .searchCate ul li {font-size:1rem;font-weight:400;} .searchResult_sec {width:100%;margin-bottom:60px;} .searchResult_sec .search_top {display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;} .searchResult_sec .search_top h3 {font-size:1.125rem;font-weight:600;} .searchResult_sec .search_top span a{color:var(--main-color);font-size:0.875rem;font-weight:500;} .searchResult_sec .md-course li .info {background:#fff;} .searchResult_sec .md-course li .info .desc .publisher:before{content:'';display:block;width:20px;height:20px;background:url('../images/ico_publisher.png') no-repeat center} .searchResult_sec .md-course.book li .thumb {padding: 1rem 2rem;aspect-ratio: 4 / 3;} .searchResult_sec .md-course.book li .thumb a {border:1px solid var(--border-color);border-radius:var(--border-radius-small);} .searchResult_sec .md-course.book li .thumb a img {object-fit:contain;} .searchResult_sec.review_sec .info_con .desc p {font-size:1rem;color:#888;line-height:1.5;max-height:4.8rem;overflow:auto;text-overflow:ellipsis;} .container.search .boardList_sec ul {display:grid; grid-template-columns:repeat(2,1fr);} .container.search .review_box .info_con .desc {height:auto;} .container.search .page_box{margin: 0px 0 50px 0 !important;} @media(max-width:640px){ .container.search .boardList_sec ul {grid-template-columns:1fr;} } /*Responsive */ @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} } @media all and (max-width:1280px){ html{font-size:14px} .syllabus_sec .list .info_con li .info .desc{flex-direction:column;gap:2px;text-align:right} } @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;gap:10px;} } @media all and (max-width:640px) { html{font-size:12px} .container{padding:0 15px} .c-btn{max-width:none;line-height:40px} .progress_sec li{gap:20px} .syllabus_sec .list .tit_con{padding:10px 10px;line-height:20px} .syllabus_sec .list .info_con li{flex-direction: column} } /*캘린더*/ .order_calenda{border:1px solid #ddd;border-radius:5px;background:#fff} .order_calenda #sdate, .order_calenda #edate[type=text]{width:11rem;border:0;background:url('/data/images/ico_calenda.png') no-repeat calc(100% - 10px) center #fff} @media all and (max-width:640px){ .order_calenda{all:unset} .order_calenda #sdate, .order_calenda #edate[type=text]{border:1px solid #ddd;margin:2px 0;} }