/*************************************************
마지막수정 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*/}
/* 검색 팝업과 그 딤(mask)은 화면 전체를 덮는 오버레이라 fixed를 유지해야 한다.
   위 규칙에 걸려 relative가 되면
     - searchWrap: 숨겨진 상태로도 문서 흐름에서 426px를 차지해 헤더와 서브비주얼 사이가 벌어지고
     - mask: height:100% 가 0 으로 잡혀 딤이 아예 안 깔린다
   메인(#wrap 없음)에서만 멀쩡해 보였던 이유다. */
#wrap > div.searchWrap,
#wrap > div.mask,
#wrap > div.mask_pro{position:fixed}
/*
#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('/theme/7/img/common/swiper-prev.png') no-repeat center }
body .slick-next{display:block !important;background:url('/theme/7/img/common/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('/theme/7/img/common/swiper-prev.png') no-repeat center /20px}
  body .slick-next{display:block !important;right:0;background:url('/theme/7/img/common/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);
	--box-shadow-hover:0 6px 18px rgba(0,0,0,0.08);
	--box-shadow-alert:0 10px 30px rgba(0,0,0,0.15);
	--bg-color-light:var(--bg-gray);
	--border-gray:var(--border-color);
	--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('/theme/7/img/common/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('/theme/7/img/book/ico_wish.png') no-repeat center /20px;cursor:pointer}
.c-wish img {display:none;}
.c-wish.-gray{background-image:url('/theme/7/img/common/ico_wish-gray.png')}
.c-wish.on{background-image: url('/theme/7/img/common/ico_wish_on.png')}

.c-wish.-large{right:1rem;top:1rem;width:23px;height:23px;background:url('/theme/7/img/book/ico_wish.png') no-repeat center;cursor:pointer}
.c-wish.-large.-gray{background-image:url('/theme/7/img/common/ico_wish-gray.png')}
.c-wish.-large.on{background-image: url('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/swiper-prev.png') no-repeat center /8px}
body .swiper-controls .swiper-button-next{position:relative;width:20px;height:20px;background:url('/theme/7/img/common/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('/theme/7/img/common/swiper-prev-small.png') no-repeat center}
body .swiper-controls.-small .swiper-button-next{background:url('/theme/7/img/common/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('/theme/7/img/layout/ico_home.png') no-repeat center / 14px;text-indent:-9999px}
.header .path a{font-size:0.88rem;font-weight:400;background:url('/theme/7/img/common/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('/theme/7/img/common/ico_arrow-right-color.png') no-repeat 100% center;}
.header .course_con:hover .md-sub{display:block}	

.header .search_con{position:relative;flex:0 0 auto;width:13rem;margin-left:-20px}  /* 아이콘·구분선이 들어가 여유가 없으므로 좁은 PC 폭에서 눌리지 않게 shrink 를 막는다 */
.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 44px;box-sizing:border-box}
.header .search_con input[type="submit"]{position:absolute;right:0;top:0;width:40px;height:40px;background:url('/theme/7/img/common/input-search.png') no-repeat center;border:0;font-size:0;cursor:pointer}
/* 상세검색 팝업 여는 아이콘 — 입력칸 앞(왼쪽)에 두고 1px 선으로 검색 실행 버튼과 갈라 놓는다.
   theme/7 에 쓸 만한 필터 아이콘 파일이 없어 인라인 SVG 로 넣었다(top.html). */
.header .search_con .detail_search{position:absolute;left:0;top:0;width:34px;height:40px;display:flex;align-items:center;justify-content:center;color:#7b828a;cursor:pointer}
.header .search_con .detail_search:hover{color:var(--main-color)}
.header .search_con .detail_search::after{content:'';position:absolute;right:0;top:11px;width:1px;height:18px;background:#dcdfe3}
.header .search_con .detail_search svg{display:block}



.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}
/*My page 버튼 — 시안상 GNB 메뉴 마지막 항목 옆에 이어서 노출(로그인 전/후 공통)*/
.header .lnb_con .menu > li.my_page_btn{display:flex;align-items:center}
.header .lnb_con .menu > li.my_page_btn > a{line-height:2.25rem;height:2.25rem;padding:0 1.13rem;border-radius:20px;background:var(--main-color);color:#fff;font-size:1rem}
.header .lnb_con .menu > li.my_page_btn > a:hover{opacity:.85}
.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(/theme/7/img/common/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:220px;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;min-width:0}
.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}
/* 이메일이 길면 드롭다운(overflow:hidden) 밖으로 나가 잘린 채 끝났다.
   폭을 220px 로 넓혀 흔한 길이는 한 줄에 담고, 그보다 길면 말줄임으로 끝을 알린다. */
.header .my_con .sub .info .email{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/course/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}
/* 프로필 미등록 시 이니셜(SYS_USERINITIAL)이 들어오므로 중앙정렬한다 — PC 헤더 .my_con .photo와 동일 규격 */
.aside .head_sec .info_con .photo{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#fff;border:1px solid #fff;border-radius:50%;font-size:1rem;font-weight:700;color:#888;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('/theme/7/img/course/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('/theme/7/img/course/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('/theme/7/img/common/ico_search.png') no-repeat center}
.aside .search_sec .detail_search{display:inline-block;margin-top:8px;font-size:1rem;color:var(--text-gray);text-decoration:underline;text-underline-offset:3px}

.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('/theme/7/img/course/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('/theme/7/img/course/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('/theme/7/img/main/msec1_img1.jpg') no-repeat center /cover}
.main_sec1 .swiper-slide[data-swiper-slide-index="1"]{background:url('/theme/7/img/main/msec1_img2.jpg') no-repeat center /cover}
.main_sec1 .swiper-slide.nth1{background:url('/theme/7/img/main/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('/theme/7/img/main/msec1_img1_mo.jpg') no-repeat center /cover}
	.main_sec1 .swiper-slide[data-swiper-slide-index="1"]{background:url('/theme/7/img/main/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('/theme/7/img/main/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('/theme/7/img/common/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('/theme/7/img/main/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('/theme/7/img/common/ico_moniter.png') no-repeat 0% center,url('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/main/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}
/* 웹진형 카드 — 시안(references/2.디자인시안/01.서브페이지/Webzine List.png)은
   썸네일 높이에 카드 높이를 맞추고 내용을 위에서부터 쌓는다.
   기본값(썸네일 420px + space-between)은 항목이 적은 카드에서 가운데가 140px 가까이 빈다.
   썸네일 <a> 높이는 아래 .md-course:not(.book) li .thumb a 에서 공통으로 처리한다. */
.md-course.grid1:not(.book) li .thumb{max-width:320px}
.md-course.grid1:not(.book) li .info{justify-content:flex-start;gap:8px}
.md-course.grid1:not(.book) li .info .price{margin-top:auto}
.md-course.grid1 li .thumb .c-wish{right:1rem;top:1rem;width:23px;height:23px;background:url('/theme/7/img/book/ico_wish.png') no-repeat center;cursor:pointer}
.md-course.grid1 li .thumb .c-wish.on{background-image: url('/theme/7/img/common/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}
/* .thumb 와 이미지 사이에 링크용 <a> 가 끼어 있어, <a> 에 높이를 주지 않으면
   img{height:100%} 가 auto 로 풀린다. 그러면 원본 비율대로 렌더돼
   (1) .thumb 의 aspect-ratio(1.6/1)가 이미지에 전달되지 않고
   (2) 남는 세로 공간이 링크 밖이라 클릭이 죽는다
       — 1920x250 배너는 283px 폭에서 37px 로 눌려 아래 140px 가 먹통이 된다.
   도서(.book)는 제외 — .md-course.book li .thumb a{max-width:190px;margin:0 auto} 로
   세로 표지를 가운데 띄우는 구조라 높이를 채우면 표지가 잘린다. */
.md-course:not(.book) li .thumb a{height:100%}
.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%)}
/* 시안 3-2-5) 과정명 2줄 제한 — 넘치면 말줄임 */
.md-course li .info .subject{font-size:1.25rem;font-weight:600;display: -webkit-box;-webkit-line-clamp:2;-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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/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(/theme/7/img/common/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('/theme/7/img/common/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}
/* 찜 아이콘(ico_wish.png)이 순백색이라 어두운 썸네일 위를 전제로 만들어졌다.
   도서 카드만 배경이 밝은 회색(--bg-gray)이라 하트가 그대로 묻힌다.
   켜진 상태(.on)는 빨강이라 건드리지 않는다. */
.md-course.book li .thumb .c-wish:not(.on){filter:invert(1) opacity(0.42)}
.md-course.book li .thumb .c-wish:not(.on):hover{filter:invert(1) opacity(0.7)}

/* 강사 카드 — 인물 사진이라 기본 1.6:1 로 자르지 않고 원형으로 담는다 */
.md-course.tutor li .thumb{aspect-ratio:auto;padding:1.75rem 1.75rem 0}
.md-course.tutor li .thumb a{aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--bg-gray)}
.md-course.tutor li .info{justify-content:center;padding:1.25rem;text-align:center}
.md-course.tutor 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 상단영역*/
/* 서브 비주얼은 관리자 배너 설정(banner_sub_list.html)이 담당한다.
   페이지 유형별 하드코딩 배경(#teacher·#courseList 등)은 목업이라 제거했다. */
.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;}


/*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_con 의 gap 은 form 바깥 형제에만 먹는다 — form 내부 필드가 붙어버려 여기서 다시 준다 */
.login_sec .login_con.mailLogin form {display:flex;flex-direction:column;gap:20px;}
.login_sec .login_con.mailLogin form > input[type="submit"],
.login_sec .login_con.mailLogin form > input[type="button"] {margin-top:4px;}
.login_sec .login_con .email.error {border:1px solid #ff2d2d}
.login_sec .input-wrapper {position: relative; width: 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:8px;}
/* 입력창에 붙여 한쪽만 각지게 두지 않고 이메일 행과 같은 간격으로 떼어 둔다 — 네 귀퉁이 모두 라운드 */
.login_sec .login_con .input-code input[type="text"] {flex:1;min-width:0;}
/* box-sizing 없으면 보더 2px만큼 입력창(border-box 50px)보다 높아져 위아래로 튀어나온다 */
.login_sec .input-code .c-btn.-code {flex:0 0 auto;box-sizing:border-box;height:50px;line-height:48px;padding:0 14px;max-width:110px;font-size:0.875rem;background:#1d2f3b;color:#fff;border:1px solid #1d2f3b;border-radius:var(--border-radius-small);transition: all 0.3s;}
.login_sec .input-code .c-btn.-code:hover {background:#2c4453;border-color:#2c4453;}
.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);}
/* 라벨 길이에 맞춰 늘어나게 둔다. 100px로 고정하면 '회원가입'·다국어 라벨이 안쪽 여백을 넘어 오른쪽으로 밀린다 */
.login_sec .c-btn.-signup {flex:0 0 auto;max-width:none;border-radius:5px;}
.login_sec .c-btn.-wide {flex:1;width:100%;max-width: none;border-radius:5px;}
.login_sec .back, .login_sec .result_img {width:100%;}
.login_sec .result_img {text-align:center;}
.login_sec .sns_cont {width:100%;}
/* 선택 UI라 버튼 두 개가 아닌 세그먼트 토글로 보여야 한다. JS가 붙이는 -bg(선택)/-border(비선택) 클래스는 그대로 쓰고 여기서 덮어쓴다 */
.login_sec .tab_sec {width:100%;display:flex;gap:0;padding:4px;background:#f1f3f5;border-radius:8px;box-sizing:border-box;}
.login_sec .tab_sec .c-btn {flex:1;max-width:none;box-sizing:border-box;line-height:2.75rem;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--text-gray-light);font-weight:500;cursor:pointer;transition:all 0.2s;}
.login_sec .tab_sec .c-btn.-border {background:transparent;color:var(--text-gray-light);}
.login_sec .tab_sec .c-btn.-border:hover {color:var(--text-gray);}
.login_sec .tab_sec .c-btn.-bg {background:#fff;color:var(--main-color);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,0.12);}
.login_sec .email_row {display:flex;align-items:center;gap:8px;}
.login_sec .email_row .at {flex-shrink:0;color:#888;}
.login_sec .login_con .email_row input[type="text"] {flex:1;min-width:0;}

.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;}
}

/*레이어 팝업(layout_poplayer) 헤더*/
/* OpenLayer가 닫기(X)를 우측 상단 15px에 절대배치하므로 제목 오른쪽을 60px 비워 겹치지 않게 한다 */
.poplayer_head {padding:22px 60px 16px 30px; border-bottom:1px solid var(--border-color);}
.poplayer_head h2 {font-size:1.25rem; font-weight:600; color:#333;}
/* 헤더가 붙은 경우에만 본문 여백을 준다 — 헤더가 없는 팝업(자체 여백 보유)은 영향받지 않는다 */
.poplayer_head + * {display:block; padding:25px 30px 30px;}


/*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('/theme/7/img/common/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)}
/* 지금 보고 있는 하위 메뉴를 표시한다 — 상위만 파랗게 되면 어느 항목인지 알 수 없다. */
.pg-mypage .sidemenu .sub li a.on{color:var(--main-color);font-weight:600}

/*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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/ico_left_courses.png') no-repeat center}
.sidemenu_ico2:before{content:'';display:inline-block;width:40px;height:100%;background:url('/theme/7/img/common/ico_left_certificate.png') no-repeat center}
.sidemenu_ico3:before{content:'';display:inline-block;width:40px;height:100%;background:url('/theme/7/img/common/ico_left_payment_history.png') no-repeat center}
.sidemenu_ico4:before{content:'';display:inline-block;width:40px;height:100%;background:url('/theme/7/img/common/ico_left_coupon.png') no-repeat center}
.sidemenu_ico5:before{content:'';display:inline-block;width:40px;height:100%;background:url('/theme/7/img/common/ico_left_wishlist.png') no-repeat center}
.sidemenu_ico6:before{content:'';display:inline-block;width:40px;height:100%;background:url('/theme/7/img/common/ico_left_account_settings.png') no-repeat center}
.sidemenu_ico7:before{content:'';display:inline-block;width:40px;height:100%;background:url('/theme/7/img/common/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('/theme/7/img/common/ico_calenda.png') no-repeat 0 center}
/* 남은일수 — 기간 옆 보조 정보. 640px 이하에서는 숨긴다(아래 미디어쿼리) */
.progress_sec .info .period .remaining{margin-left:8px;font-size:0.94rem;color:var(--main-color);font-weight:500}
.progress_sec .info .point{font-size:1.19rem;padding-left:30px;background:url('/theme/7/img/common/ico_point.png') no-repeat 0 center}
.progress_sec .info .name{font-size:1.13rem;padding-left:30px;background:url('/theme/7/img/common/ico_person.png') no-repeat 0 center}
.progress_sec .info .ratio{font-size: 1.19rem;padding-left:30px;background: url(/theme/7/img/common/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('/theme/7/img/common/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;}
/* 학습 진입은 1차 액션이라 부가 버튼 행에서 빼내 카드 우측에 단독 배치한다 (시안 GLT-08-01 항목 3-4) */
.progress_sec .learn{flex:0 0 150px;align-self:stretch;display:flex}
.progress_sec .learn_btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:150px;padding:20px 10px;border-radius:var(--border-radius);background:var(--btn-color1);border:1px solid var(--btn-color1);color:#fff;font-size:1.13rem;font-weight:500;line-height:1.3;text-align:center;word-break:keep-all}
.progress_sec .learn_btn .ico{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.7);font-size:1.13rem;line-height:1;padding-left:4px;box-sizing:border-box}

.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;}
  /* 카드가 한 줄로 쌓이므로 학습 버튼은 가로 전체를 쓰고 아이콘·문구를 한 행에 둔다 */
  .progress_sec .learn {flex:1 1 100%;}
  .progress_sec .learn_btn {flex-direction:row;gap:10px;min-height:0;padding:12px 10px;}
  .progress_sec .learn_btn .ico {width:28px;height:28px;font-size:0.88rem;border-width:1px}
}


/*mypage 정보*/
.my_sec{display:flex;gap:10px;flex-wrap:wrap;}
/* min-width:0 필수 — 생략하면 flex 기본값 auto(=min-content)라 프로필 카드가 basis 아래로 못 줄고 3+1로 흐른다 */
.my_sec .my_con{flex:1 1 calc(25% - 7.5px);min-width:0;display:flex;gap:10px;align-items:center; border:1px solid #ddd;border-radius:var(--border-radius-small);padding:20px;position:relative;}
/* 링크가 우측 아이콘 하나뿐이라 숫자·글자를 눌러도 넘어가지 않았다 —
   아이콘 모양은 그대로 두고 투명 오버레이로 카드 전체를 클릭 영역으로 넓힌다. */
.my_sec .my_con > a::after{content:'';position:absolute;left:0;top:0;right:0;bottom:0}
.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('/theme/7/img/common/ico_my_pencil.png') no-repeat center}
.my_sec .my_con.item2 a{background:url('/theme/7/img/common/ico_my_progress.png') no-repeat center}
.my_sec .my_con.item3 a{background:url('/theme/7/img/common/ico_my_expiring.png') no-repeat center}
.my_sec .my_con.item4 a{background:url('/theme/7/img/common/ico_my_complete.png') no-repeat center}

/* LNB가 자리를 차지해 4열 카드가 좁아지는 구간 — 3+1로 흘러 4번째가 전폭이 되는 것을 막고 2x2로 간다.
   1400px는 헤더 우측메뉴가 접히는 기존 브레이크포인트와 같은 값이다 */
@media all and (max-width:1400px){
  .my_sec .my_con{flex-basis:calc(50% - 5px)}
}
@media all and (max-width:640px){
  .my_sec .my_con.item1 {display:none;}
  .my_sec .my_con{flex-basis:100%}
}

/*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:22px 24px;background:#fff;border:1px solid var(--border-color-light);box-shadow:var(--box-shadow-large);text-align:center;margin-bottom:20px;border-radius:var(--border-radius);}
/* 셀렉트 하나 때문에 회색 바가 통째로 서 있었다 */
.pg-mypage .coupon_list .control_sec {background:none;padding:0;margin-bottom:12px;}
.pg-mypage .coupon_list .search_sec > div {display:flex;gap:10px;} 
.coupon_list .my_list .title .name{background:url('/theme/7/img/common/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 .nodata {background:none;min-height:260px;flex-direction:column;gap:14px;
	border-top:1px solid var(--border-color-light);margin:0;color:var(--text-gray);font-size:1.06rem;}
.coupon_list .nodata:before {content:'';width:64px;height:64px;border-radius:50%;opacity:0.6;
	background:var(--bg-gray) url('/theme/7/img/common/ico_left_coupon.png') no-repeat center / 28px;}
.coupon_list .my_list .row li span:last-child {font-size: 1.125rem;}
/* 쿠폰 카드 — 라벨과 값이 같은 크기로 흩어져 읽기 어려웠다 */
.coupon_list .my_list > ul > li.row {background:#fff;border-color:var(--border-color-light);border-radius:var(--border-radius);box-shadow:var(--box-shadow-large);padding:20px 24px;margin-bottom:12px;}
.coupon_list .my_list .row li .heading {font-size:0.81rem;color:var(--text-gray-light);margin-bottom:4px;}
.coupon_list .my_list .title .name {font-size:1.06rem;font-weight:600;color:#222;}
.coupon_list .my_list .row li .discount {color:var(--main-color);font-weight:600;}
/* '주문 사용중' 이 두 줄로 접혔다 */
.coupon_list .my_list .use span {white-space:nowrap;}
.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(/theme/7/img/common/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 > 내정보수정/패스워드변경/탈퇴 */
/* 항목이 20개 가까이 이어지는 폼이라 라벨/입력 경계가 없으면 어디까지가 한 항목인지 읽히지 않는다.
   카드 + 좌측 고정폭 라벨 + 행 구분선으로 항목 경계를 만든다. */
.my_info {background:#fff;border:1px solid var(--border-color-light);border-radius:var(--border-radius);box-shadow:var(--box-shadow-large);padding:5px 30px;}
.my_info + .my_info {margin-top:20px;}
/* modify_passwd/modify_verify 처럼 .my_info 가 중첩된 화면에서 카드가 이중으로 그려지는 것 방지 */
.my_info .my_info {background:none;border:0;box-shadow:none;border-radius:0;padding:0;margin-top:0;}

/* 그룹 제목(기본정보·연락처·추가정보·환경설정)이 항목 라벨과 구별되지 않았다.
   제목 14.8px/700 vs 항목 라벨(dt) 13.6px/600 — 차이가 1.2px 뿐이고,
   항목마다 #f1f3f5 실선이 있는데 정작 그룹 경계에는 선이 없어
   오히려 항목 경계가 더 뚜렷하게 읽혔다.
   그룹마다 카드로 나눠 경계를 물리적으로 만든다.

   그룹이 있는 화면은 modify2 뿐이다. 바깥 .my_info 가 이미 카드라
   그대로 두면 카드가 이중이 되므로 :has() 로 바깥 카드를 벗긴다.
   그룹이 없는 화면(modify/modify_passwd/modify_verify/out)은 기존 한 장 카드 유지. */
.my_info:has(.my_group) {background:none;border:0;box-shadow:none;border-radius:0;padding:0;}
.my_info .my_group {background:#fff;border:1px solid var(--border-color-light);border-radius:var(--border-radius);box-shadow:var(--box-shadow-large);padding:0 30px 6px;overflow:hidden;}
.my_info .my_group + .my_group {margin-top:16px;}
/* 제목은 카드 헤더 — 좌우 패딩을 상쇄해 카드 폭을 꽉 채운다 */
.my_info .group_tit {display:flex;align-items:center;gap:9px;margin:0 -30px;padding:15px 30px;background:#fafbfc;border-bottom:1px solid #eef1f4;font-size:1.06rem;font-weight:700;color:#222;}
.my_info .group_tit:before {content:'';width:4px;height:16px;border-radius:2px;background:var(--main-color);}
.my_info .notice_box {padding:22px 0 6px;line-height:1.6;}
.my_info .notice_box .tit {display:block;font-size:1.06rem;font-weight:700;color:#222;}
.my_info .notice_box p {color:var(--text-gray);}
/* 조건부로 전 항목이 숨겨진 그룹은 제목만 남으므로 통째로 감춘다 */
.my_info .my_group:not(:has(dl)) {display:none;}

.my_info dl {display:flex;align-items:flex-start;gap:24px;margin:0;padding:18px 0;border-bottom:1px solid #f1f3f5;}
.my_info dl:last-of-type {border-bottom:0;}
.my_info dl dt {flex:0 0 180px;width:180px;height:auto;padding-top:10px;font-size:0.97rem;font-weight:600;color:#333;line-height:1.35;word-break:keep-all;}
.my_info dl dd {flex:1 1 auto;min-width:0;padding:0;}
.my_info dl dd > p {padding-top:10px;margin:0;color:var(--text-gray);}

/* 입력 요소 폭을 400px 로 통일 — 항목마다 제각각이면 정돈되어 보이지 않는다 */
.my_info dd input[type="text"], .my_info dd input[type="password"], .my_info dd select {width:100%;max-width:400px;}
.my_info dd input[type="text"]:focus, .my_info dd input[type="password"]:focus, .my_info dd select:focus {outline:none;border-color:var(--main-color);box-shadow:0 0 0 3px var(--main-color-light);}
.my_info dd input[readonly] {background:#f8f9fa;color:var(--text-gray);cursor:pointer;}
.my_info dd .selectBox {display:flex;flex-wrap:wrap;gap:8px;max-width:400px;margin-left:0;}
/* common.css 의 `.selectBox select {max-width:150px !important}` 류(반응형 구간마다 값이 다름)를 무력화해야
   생년월일 3분할·언어/시간대 2분할이 컨테이너 폭에 맞게 균등 분배된다 */
.my_info dd .selectBox select {flex:1 1 0;min-width:0;max-width:none !important;width:auto !important;height:40px;padding:0 30px 0 12px;}
.my_info dd .selectBox + .selectBox {margin-top:8px;}

.my_info .email_box, .my_info .phone_box {display:flex;align-items:center;gap:8px;max-width:400px;}
.my_info .email_box input[type="text"], .my_info .phone_box input[type="text"], .my_info .phone_box select {flex:1 1 0;min-width:0;}
.my_info .hipen, .my_info .hipen2 {flex:none;margin:0;color:var(--text-gray-light);}
.my_info .verify_box {display:flex;align-items:center;gap:8px;max-width:400px;margin-top:8px;}
.my_info .verify_box input[type="text"] {flex:1 1 0;min-width:0;}
.my_info .verify_box .c-btn {flex:none;max-width:none;}

.my_info .address_box {display:flex;flex-direction:column;gap:8px;max-width:400px;}
.my_info .address_box input[type="text"] {margin-bottom:0;width:100%;}
.my_info .zipcode_box {display:flex;align-items:center;gap:8px;}
.my_info .zipcode_box input[type="text"] {flex:none;}
.my_info .zipcode_box .c-btn {flex:none;max-width:none;line-height:38px;padding:0 16px;}

/* `.check_box` 는 member.css 전용이라 마이페이지 레이아웃에서는 로드되지 않는다 — 여기서 정의한다 */
.my_info .check_box {display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;min-height:40px;}
.my_info .checkbox_group {display:flex;flex-direction:column;gap:10px;padding-top:10px;}
.my_info .check_box label, .my_info .checkbox_group label {display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--text-gray);cursor:pointer;}
.my_info .desc {display:block;margin-top:8px;font-size:0.88rem;color:var(--text-gray-light);line-height:1.5;}
/* 비밀번호 규칙 안내 — `.bad`(불일치/규칙위반)는 스크립트가 토글한다 */
.my_info dd .input_msg {display:flex;align-items:flex-start;gap:6px;padding-top:8px;font-size:0.88rem;color:var(--text-gray-light);line-height:1.5;}
.my_info dd .input_msg i {flex:none;font-style:normal;font-weight:700;}
.my_info dd .input_msg .bad {color:#e5484d;}
.my_info .check_box + .desc, .my_info .selectBox + .desc {margin-top:6px;}
.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('/theme/7/img/common/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;}
    .add_num {width: 120px !important;}
    /* 라벨을 위로 올리고 입력은 전체폭으로 — 좁은 폭에서 2단 배치는 입력창이 너무 좁아진다 */
    @media (max-width:768px) {
        .my_info {padding:5px 18px;}
        /* 카드 좌우 패딩이 줄어드는 만큼 헤더의 상쇄 마진도 같이 줄인다 */
        .my_info .my_group {padding:0 18px 6px;}
        .my_info .group_tit {margin:0 -18px;padding:13px 18px;}
        .my_info dl {flex-direction:column;align-items:stretch;gap:8px;padding:16px 0;}
        .my_info dl dt {flex:none;width:100%;padding-top:0;font-size:0.94rem;color:#666;}
        .my_info dl dd {width:100%;}
        .my_info dl dd > p {padding-top:0;}
        .my_info dd input[type="text"], .my_info dd input[type="password"], .my_info dd select,
        .my_info dd .selectBox, .my_info .email_box, .my_info .verify_box, .my_info .address_box {max-width:none;}
    }
    @media (max-width:480px) {
        .my_info .email_box, .my_info .zipcode_box {flex-wrap:wrap;}
        .my_info .email_box input[type="text"] {flex:1 1 100%;}
        .my_info .email_box .hipen2 {display:none;}
        .my_info .zipcode_box input[type="text"] {flex:1 1 auto;width:auto !important;}
    }
    @media (max-width:640px) {
        .pg-mypage .photo_box .photo_con {flex-direction: column;}
        .pg-mypage .photo_box .photo_con .photo { width: 100px; height: 100px;font-size:3rem; }
    }



/*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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/ico_arrow-right-gray.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('/theme/7/img/common/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('/theme/7/img/layout/ico_sylla_tit_check.png') no-repeat 0 center}
.syllabus_sec .h3_tit .tip span.is-inProgress{background:url('/theme/7/img/layout/ico_sylla_tit_pro.png') no-repeat 0 center}
.syllabus_sec .h3_tit .tip span.is-notSubmitted{background:url('/theme/7/img/layout/ico_sylla_tit_not.png') no-repeat 0 center}
.syllabus_sec .h3_tit .tip span.is-currentLesson{background:url('/theme/7/img/layout/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('/theme/7/img/course/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)}
/* 섹션(챕터) 미편성 과정은 아코디언 트리거(.tit_con)가 없어 항상 펼쳐둔다 */
.syllabus_sec .list > li.no_title .info_con{display:block}
.syllabus_sec .list > li.no_title .info_con li:first-child{border-top:0}
.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('/theme/7/img/layout/ico_sylla_tit_check.png') no-repeat center}
.syllabus_sec .list .info_con li.is-inProgress .subject:before{background:url('/theme/7/img/layout/ico_sylla_tit_pro.png') no-repeat center}
.syllabus_sec .list .info_con li.is-notSubmitted .subject:before{background:url('/theme/7/img/layout/ico_sylla_tit_not.png') no-repeat center}
.syllabus_sec .list .info_con li.is-currentLesson .subject:before{background:url('/theme/7/img/layout/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('/theme/7/img/course/ico_sylla_nth1.png') no-repeat center}
.syllabus_sec .list .info_con li .subject .ico2{background:url('/theme/7/img/course/ico_sylla_nth2.png') no-repeat center}
.syllabus_sec .list .info_con li .subject .ico3{background:url('/theme/7/img/course/ico_sylla_nth3.png') no-repeat center}
.syllabus_sec .list .info_con li .subject .ico4{background:url('/theme/7/img/course/ico_sylla_nth4.png') no-repeat center}
.syllabus_sec .list .info_con li .subject .ico5{background:url('/theme/7/img/course/ico_sylla_nth5.png') no-repeat center}
.syllabus_sec .list .info_con li .subject .ico6{background:url('/theme/7/img/course/ico_sylla_nth6.png') no-repeat center}
.syllabus_sec .list .info_con li .subject .ico7{background:url('/theme/7/img/course/ico_sylla_nth7.png') no-repeat center}
.syllabus_sec .list .info_con li .subject .ico8{background:url('/theme/7/img/course/ico_sylla_nth8.png') no-repeat center}
.syllabus_sec .list .info_con li .subject .ico9{background:url('/theme/7/img/course/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('/theme/7/img/course/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('/theme/7/img/common/ico_box_down.png') no-repeat 100% center;cursor:pointer}
.syllabus_sec .list .info_con li .info .desc .time{padding-right:30px;background:url('/theme/7/img/common/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;}
/* 아이콘 원본이 24px이라 제목 텍스트보다 커 보인다 — 자료 아이콘(ico_file 19px)과 같은 크기로 맞춘다 */
.syllabus_sec .subBox .timebox {background:url('/theme/7/img/common/ico_count.png') no-repeat 0 50%; background-size:19px;}
.syllabus_sec .subBox .down {background:url('/theme/7/img/common/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('/theme/7/img/common/ico_big_timer.png') no-repeat left center; padding-left:45px;}
.info_box .question {background:url('/theme/7/img/common/ico_big_cube.png') no-repeat left center; padding-left:45px;}
.info_box .duration {background:url('/theme/7/img/common/ico_big_calendar.png') no-repeat left center; padding-left:45px;}
.info_box .submission {background:url('/theme/7/img/common/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('/theme/7/img/common/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(/theme/7/img/common/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('/theme/7/img/common/ico_timer.png') no-repeat left top; padding-left:25px;}
  .info_box .question{background:url('/theme/7/img/common/ico_cube.png') no-repeat left top; padding-left:25px;}
  .info_box .duration{background:url('/theme/7/img/common/ico_date.png') no-repeat left top; padding-left:25px;}
  .info_box .submission{background:url('/theme/7/img/common/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(/theme/7/img/common/ico_name.png) left center no-repeat; }
.cview_wrap .title_box .date {background:url(/theme/7/img/common/ico_date.png) left center no-repeat; }
.cview_wrap .title_box .hit {background:url(/theme/7/img/layout/ico_view.png) left center no-repeat; }
.cview_wrap .title_box .comment_count {background: url(/theme/7/img/common/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;}
/* 안내문이 없을 수 있는 영역(시험 상세)은 내용 높이만큼만 차지한다 */
.con_area.-auto {min-height: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(/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/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('/theme/7/img/layout/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('/theme/7/img/common/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}
/* 과정상세 A형(기본형): 신청 영역을 사이드바에서 분리해 본문 아래 전체폭 세로 배치 */
.aside_layout.-stack .container{flex-direction:column}
.aside_layout.-stack .aside_con{order:1;width:100%;min-width:0;max-width:100%}
.aside_layout.-stack .aside_con__coursesView{position:static;top:auto;max-width:520px;margin:0 auto}
/* 과정상세 C형(커리큘럼형): 본문 위쪽 정렬 2단 배치.
   원래는 aside 에 flex:1 을 줘 본문과 50:50 으로 나눴는데, 신청 영역에 들어가는 건
   결제 박스 하나(높이 260px 안팎)뿐이라 570px 폭에 그 내용만 담겼다.
   라벨은 왼쪽 끝, 금액은 오른쪽 끝으로 밀려 사이가 텅 비고 성글게 읽혔다.
   시안(references/2.디자인시안/01.서브페이지/Courses View.png)도
   본문:신청 ≈ 3:1 이고, 같은 박스를 쓰는 도서상세(300px)와도 폭이 어긋나 있었다.
   폭 override 를 걷어내 기본 사이드바 폭(300px)을 그대로 쓴다. */
.aside_layout.-split .container{gap:30px;align-items:flex-start}
.aside_layout.-split .content{flex:1;min-width:0}
@media (max-width: 980px) {
  /* 세로 전환 시 PC용 align-items:flex-start가 남아 있으면 본문이 stretch되지 않고 내용 폭으로 줄어든다 */
  .aside_layout.-split .container{flex-direction:column;align-items:stretch}
  .aside_layout.-split .aside_con{width:100% !important;max-width:100%}
  .aside_layout.-split .content{width:100%;max-width:100%}
}

/*.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)}

/* 옵션은 원가·할인금액과 같은 회색 덩어리로 읽혀야 한다.
   기존엔 .info(#f5f5f5) 와 .options(#f4f7fb) 가 5px 떨어진 서로 다른 색 박스라
   위계가 흐려졌고, li 가 flex-column 이라 금액이 라벨 아래 우측으로 떨어져
   어느 항목의 값인지 붙어 읽히지 않았다. margin-top:-1px 로 두 박스의
   1px 경계선을 겹쳐 한 줄로 만든다. */
.aside_con__coursesView .options {background:#f5f5f5;border:1px solid #eee;border-width:1px 0;padding:0.5rem 1rem;margin-top:-1px;}
/* h6.tit 이 .aside_con__coursesView .tit(1.06rem) 에 걸려 과정명만큼 커져 있었다 */
.aside_con__coursesView .options h6.tit {font-size:max(12px,0.81rem);font-weight:600;color:#333;line-height:1.2;margin:2px 0 8px 0;}
/* baseline 정렬은 여기서 못 쓴다 — .stit 이 flex 컨테이너라 그 베이스라인이
   첫 항목인 체크박스(22px, 텍스트 없음)의 아래변에서 합성된다.
   그 결과 금액이 라벨보다 11px 내려앉아 같은 줄로 안 읽혔다. */
.aside_con__coursesView .options li {display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;}
/* 정가·판매가를 가로로 늘어놓으니 좁은 패널(237px)에서 제목이 91px 로 눌려 두 줄이 됐다.
   금액을 세로로 쌓고 남는 폭을 제목에 준다. */
.aside_con__coursesView .options li .stit {display:flex;flex:1;min-width:0;align-items:flex-start;font-size:max(12px,0.88rem);}
.aside_con__coursesView .options li .price {display:flex;flex:0 0 auto;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:0;line-height:1.3;margin:0;white-space:nowrap;}
.aside_con__coursesView .options li .price .discount {font-size:max(11px,0.75rem);color:#aaa;font-weight:400;text-decoration:line-through;}
/* 옵션 금액이 총 결제금액과 같은 크기·색(1.19rem 파랑)이라 서로 경쟁했다 */
.aside_con__coursesView .options li .price .price {color:var(--text-gray);font-size:max(12px,0.88rem);font-weight:600;}
/* 자릿수가 달라도 금액의 오른쪽 끝이 맞도록 */
.aside_con__coursesView .sale .price,
.aside_con__coursesView .info li .price,
.aside_con__coursesView .options li .price,
.aside_con__coursesView .total .price{font-variant-numeric:tabular-nums}
.aside_con__coursesView .info li .price.-minus{color:#e0243c}
.aside_con__coursesView .info li .price.-minus:not(:empty)::before{content:"\2212\00a0"}
.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;}
  /* 고정바가 페이지 최하단(주로 푸터)을 가리지 않도록 바 높이만큼 여백 확보. 바가 있는 화면에만 적용된다 */
  body:has(.mo_fixed){padding-bottom:110px}
  
  .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}
/* 도서목록은 검색박스가 폼 밖에 있어 submit 대신 button 으로 submitSearch() 를 부른다 */
.aside_con__search input[type="submit"],
.aside_con__search input[type="button"]{width:50px;height:100%;background:url('/theme/7/img/common/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('/theme/7/img/common/input-close.png') no-repeat center;cursor:pointer}
/* 정액권 목록의 검색어 지우기 X — 스타일이 없어 폭 0px 로 안 보였다.
   .search 가 block 이고 입력칸이 폭을 다 쓰므로 입력칸 안쪽 우측에 겹쳐 놓는다. */
.sort_con .search{position:relative}
.sort_con .search input[type="text"]{padding-right:36px}
.sort_con .search .close{position:absolute;right:0;top:0;width:36px;height:100%;cursor:pointer;
	background:url('/theme/7/img/common/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('/theme/7/img/course/aside_arrow.png') no-repeat calc(100% - 10px) center}
.aside_con__category .menu > li.child.on > a{background:url('/theme/7/img/course/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('/theme/7/img/course/aside_plus.png') no-repeat calc(100% - 2px) center}
.aside_con__category .menu > li > ul > li.child.on > a{background:url('/theme/7/img/course/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}
.aside_con__ratings .rating_reset{display:inline-block;margin:5px 10px 5px;padding:6px 16px;border:1px solid #ddd;border-radius:20px;background:#fff;color:#666;font-size:0.82rem;line-height:1.4;cursor:pointer;transition:border-color .15s,color .15s}
.aside_con__ratings .rating_reset:hover{border-color:var(--main-color);color:var(--main-color)}


.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('/theme/7/img/common/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('/theme/7/img/common/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)}
/* 맛보기 강의가 없는 과정은 재생버튼·딤 처리를 빼고 썸네일만 보여준다 (시안 '미리보기 영상 혹은 섬네일' 2번) */
.topCourse_sec .thumb_con a.-noplay:before{display:none}
.topCourse_sec .thumb_con a.-noplay img{filter:none}


.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 .rate .vote.-link{cursor:pointer}
.topCourse_sec .info_con .rate .vote.-link:hover{color:var(--main-color)}
.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:var(--border-radius-small);background: #fff url('/theme/7/img/common/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('/theme/7/img/course/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('/theme/7/img/course/ico_sylla_nth1.png') no-repeat center}
.syllabus_sec--simple .list .info_con li .subject .ico2{background:url('/theme/7/img/course/ico_sylla_nth2.png') no-repeat center}
.syllabus_sec--simple .list .info_con li .subject .ico3{background:url('/theme/7/img/course/ico_sylla_nth3.png') no-repeat center}
.syllabus_sec--simple .list .info_con li .subject .ico4{background:url('/theme/7/img/course/ico_sylla_nth4.png') no-repeat center}
.syllabus_sec--simple .list .info_con li .subject .ico5{background:url('/theme/7/img/course/ico_sylla_nth5.png') no-repeat center}
.syllabus_sec--simple .list .info_con li .subject .ico6{background:url('/theme/7/img/course/ico_sylla_nth6.png') no-repeat center}
.syllabus_sec--simple .list .info_con li .subject .ico7{background:url('/theme/7/img/course/ico_sylla_nth7.png') no-repeat center}
.syllabus_sec--simple .list .info_con li .subject .ico8{background:url('/theme/7/img/course/ico_sylla_nth8.png') no-repeat center}
.syllabus_sec--simple .list .info_con li .subject .ico9{background:url('/theme/7/img/course/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}
/* 잠긴 차시의 사유 안내 — 제목 아래 한 줄. 줄바꿈(\n)이 들어오므로 pre-line으로 살린다 */
.syllabus_sec--simple .list .info_con li .subject .cont .lock_msg{display:block;margin-top:4px;font-size:0.81rem;line-height:1.45;color:var(--text-gray-light);white-space:pre-line}

.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('/theme/7/img/common/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('/theme/7/img/common/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(/theme/7/img/common/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('/theme/7/img/common/ico_star.png') no-repeat center}
.teacher_sec .info_con .info .courses:before{content:'';display:inline-block;width:20px;height:20px;background:url('/theme/7/img/common/ico_monitor.png') no-repeat center}
.teacher_sec .info_con .info .graduation:before{content:'';display:inline-block;width:20px;height:20px;background:url('/theme/7/img/common/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}
.aside_layout .content > .board_list:first-child{margin-top:0}/*TOP10 섹션이 없을 때(=board_list가 첫 요소) 상단 여백 제거*/
/* 위 한 줄만으로는 위로 붙지 않는다 — .board_list 에 border/padding 이 없어
   자식 .title_box 의 margin-top(1.5rem=21px)이 margin collapsing 으로 빠져나와
   .board_list 자체를 밀어낸다. 그 결과 TOP10 이 없는 목록에서 우측 콘텐츠가
   좌측 패널보다 21px 내려가 어긋나고, 서브배너와의 여백도 그만큼 넓어 보였다. */
.aside_layout .content > .board_list:first-child .title_box{margin-top: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('/theme/7/img/common/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('/theme/7/img/common/ico_grid_cols_on.png') no-repeat center}
.board_list .sort_con .type .grid_row{background:url('/theme/7/img/common/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('/theme/7/img/common/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('/theme/7/img/common/page-prev-group.png') no-repeat center}
.board_list	.pagination_con .prev{text-indent:-9999px;background:url('/theme/7/img/common/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('/theme/7/img/common/page-next.png') no-repeat center}
.board_list	.pagination_con .next-group{text-indent:-9999px;background:url('/theme/7/img/common/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('/theme/7/img/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('/theme/7/img/common/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(/theme/7/img/common/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('/theme/7/img/common/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/7/img/course/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(/theme/7/img/common/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('/theme/7/img/webtv/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(/theme/7/img/common/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(/theme/7/img/common/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(/theme/7/img/common/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(/theme/7/img/common/ico_name.png) left center no-repeat; }
.boardList_sec .info .date {background: url(/theme/7/img/common/ico_date.png) left center no-repeat; }
.boardList_sec .info .hit {background: url(/theme/7/img/layout/ico_view.png) left center no-repeat; }
.boardList_sec .info .comment {background: url(/theme/7/img/common/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 */

/* 제목 박스를 position:absolute; top:-200px 로 끌어올려 서브배너 위에 얹고 있었다.
   배너(#sub_banner)가 정확히 200px, 제목 박스도 200px 이라 배너가 통째로 가려지고,
   배너 바로 아래 breadcrumb(.md-path, 55px)까지 흰 박스에 덮여 아예 안 보였다.
   시안(2.디자인시안/02.추가페이지/공지사항.png)·스토리보드 모두
   배너 → breadcrumb → 카드 순으로 겹치지 않는다. 문서 흐름으로 되돌린다. */
.boardView_sec{width:100%;height:auto;position:relative;border-radius: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;text-align: center; width:100%;min-height:200px;padding:30px 20px;background: #fff;border-bottom: 1px solid var(--border-color-light);border-radius:10px 10px 0 0;font-size:1rem;}
/* 목록은 .pg-board h2{padding:60px 0 30px} 로 배너와 간격을 벌리는데
   상세에는 h2 가 없어 카드가 breadcrumb 에 딱 붙는다 */
.pg-board.view{margin-top:60px;}
.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('/theme/7/img/layout/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('/theme/7/img/layout/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(/theme/7/img/common/my_photo.png) no-repeat center / cover;color: transparent;}
/* .photo 안의 img 에 크기 규칙이 없어 원본 크기(ico_man.svg 는 48x53)로 나온다.
   50x50 원을 세로로 넘쳐 overflow 로 잘리고 비율도 어긋났다.
   테마의 다른 .photo(1752·2372·412행)와 같은 처리를 준다. */
.pg-board .photo img{width:100%;height:100%;object-fit:cover}
/* 게시글 상세 작성자 아이콘이 이름+날짜 두 줄(37px)보다 커 보였다.
   스토리보드(자유게시판 View)는 아이콘:텍스트 ≈ 1.2 인데 50px 은 1.35 다.
   640px 이하에서 이미 40px 을 쓰고 있어(아래 미디어쿼리) 그 값에 맞춘다. */
.boardView_sec .title_box .photo{width:40px;height:40px}  
  
.boardView_sec .view_con {width:100%;height:auto;padding:30px;}
/* 250px 이면 두 줄짜리 공지(본문 실측 45px)에도 카드 아래로 200px 넘게 빈다.
   카드가 얇아지지 않을 만큼만 남긴다 (640px 이하는 아래에서 150px). */
.boardView_sec .view_con .user_con {min-height:180px;}
.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(/theme/7/img/common/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('/theme/7/img/common/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 {margin-top:30px;}
    .pg-board.view .boardView_sec .title_box {min-height:auto;padding:20px 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;word-break: 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 .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(/theme/7/img/common/ico_name.png) no-repeat center;}
.cart_sec .info_con .info .time::before{content:'';display:block;width:20px;height:20px;background: url(/theme/7/img/common/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('/theme/7/img/common/ico_star.png') no-repeat center}  
/* 금액 열이 flex:4 라 목록 폭에 따라 160px 안팎으로 눌렸다. 그 폭에서는
   "총 결제금액" 라벨이 두 줄로 깨지고 정가 취소선도 판매가와 따로 떨어졌다.
   시안(2.디자인시안/02.추가페이지/장바구니)처럼 라벨 왼쪽·금액 오른쪽으로
   정렬되도록 고정폭을 주고 줄바꿈을 막는다. */
.cart_sec .price_con{flex:0 0 210px;}
.cart_sec .price_con .info li{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:5px 0;padding:0;}
.cart_sec .price_con .info li .stit{white-space:nowrap;}
.cart_sec .price_con .info li .price{text-align:right;white-space:nowrap;}
.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:12px 0 0;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;border-top:1px solid var(--border-color-light);}
.cart_sec .price_con .total .stit, .cart_sec .price_con .total .price {white-space:nowrap;}
.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}
/* member.css 의 전역 input[type=checkbox]{position:relative;top:-3px} 이 여기까지 따라온다.
   인라인 텍스트 옆에 놓였을 때 쓰던 보정인데, 이 화면의 래퍼는 flex+align-items:center 라
   이미 중앙에 맞아 있다 — -3px 만큼 위로 뜬 채로 라벨과 어긋난다.
   flex 아이템이라 자리가 좁으면 24px 정사각형이 눌려 찌그러지므로 크기도 함께 고정한다. */
input[type="checkbox"].cart_check{top:0;flex:0 0 auto;min-width:24px;min-height:24px}
/* 체크 표시의 상자를 한가운데(top:5.5px) 놓으면 오히려 아래로 처져 보인다 —
   ✓ 는 border-right/bottom 만 그린 ㄱ자를 45도 돌린 것이라 잉크가 상자 안에서
   오른쪽 아래로 쏠려 있고, 회전하면 그 쏠림이 아래로 간다(실측 +2.2px).
   잉크 무게중심이 상자 중심과 맞는 값으로 잡는다(실측 편차 y -0.28 / x -0.14). */
input[type="checkbox"].cart_check:after{left:7.25px;top:3px}
.pg-cart .h2_tit .control label{line-height:1}
/* min-width:80px 이 내용(약 96px)보다 좁아 라벨이 래퍼를 넘쳐 [선택삭제] 버튼에 붙었다.
   gap 20px 이 설계값인데 실제로는 4px 밖에 남지 않았다. 폭은 내용이 정하게 둔다. */
.pg-cart .h2_tit .control > div{min-width:0;flex:0 0 auto}
.cart_sec .select_con{display:flex;align-items:center;justify-content:center}
/* 홀로 놓인 체크박스라 오른쪽 여백이 항목을 왼쪽으로 밀 뿐이다. */
.cart_sec .select_con input[type="checkbox"].cart_check{margin-right:0}

.cart_sec .info_con .count {display:flex;align-items: center; gap:0;margin-top:20px;align-self:flex-start;width:max-content;max-width:100%;}
.cart_sec .info_con .count input.input,
.cart_sec .info_con .count input[id^="qty_"] {width:52px;min-width:48px;max-width:64px;flex:0 0 auto;box-sizing:border-box;height:36px;background:#fff;border:1px solid #ddd;text-align:center;padding:0 6px;}
.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;} 
  
/* 이 블록은 </main> 밖에 있어 본문 높이를 스스로 잡아야 한다 —
   안 그러면 브레드크럼 바로 아래 붙고 버튼이 푸터에 닿는다.
   글자·아이콘도 과하게 커서 다른 빈 상태 화면과 톤을 맞춘다. */
.cart_empty {display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:center;
	min-height:520px;padding:100px 20px;}
.cart_empty img {width:110px;height:auto;opacity:0.85;}
.cart_empty h4 {font-size:1.75rem;font-weight:600;}
.cart_empty p {font-size:1rem;color:#888;text-align:center;line-height:1.5;}
.cart_empty .btn_con {margin-top:14px;}
.cart_empty .btn_con .c-btn {padding:0 34px;line-height:48px;}
  
@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 {min-height:400px;padding:60px 20px;}
  .cart_empty img {width:88px;}
  .cart_empty h4 {font-size:1.38rem;text-align:center;}
  .cart_empty p {font-size:0.94rem;}
  .cart_empty .btn_con {margin-top:10px;}
}

/* PEYMENT ********************************************/
.payment_wrap .clear {display:inline-block;width:16px;height:16px;background:url('/theme/7/img/common/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('/theme/7/img/common/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;}

/* .contents.aside_layout 이 이미 padding:3.75rem 0(52.5px)을 갖는데
   여기서 60px 을 더해 서브배너와의 간격이 112.5px 로 벌어졌다.
   과정목록·도서목록 등 같은 레이아웃을 쓰는 화면은 52.5px 이다. */
.pg-payment {padding-top:0}
.pg-payment .aside_con__coursesView .tit {margin-bottom:20px;}
/* 할인 내역 줄 — 합계(할인금액) 아래로 한 단 들여쓰고 톤을 낮춰 하위임을 보인다 */
.pg-payment .aside_con.payment .info li.sub {font-size:max(11px,0.75rem);color:#8a9299;margin:2px 0;}
.pg-payment .aside_con.payment .info li.sub .stit {padding-left:12px;position:relative;}
.pg-payment .aside_con.payment .info li.sub .stit:before {content:'';position:absolute;left:2px;top:50%;width:5px;height:1px;background:#c4cad0;}
/* 체크박스가 달린 동의 항목이라 가운데 정렬하면 좌측 기준선이 없어 읽기 불편하다 */
.pg-payment .aside_con.payment .agree {font-size:0.8rem;color:#888;margin-bottom:20px;text-align:left;}
/* 두 동의 줄이 붙어 있고(간격 0) 체크박스와 문구 사이도 5px 뿐이라 답답했다 */
.pg-payment .aside_con.payment .agree p + p {margin-top:9px;}
.pg-payment .aside_con.payment .agree input[type="checkbox"] {margin-right:9px;}
.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;}
	/* 위와 같은 이유 — .aside_layout 의 패딩만 쓴다 */
	.pg-payment {padding-top:0;}
	.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('/theme/7/img/common/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('/theme/7/img/common/logo_vnpay.png') no-repeat left center;background-size: 66px 20px; background-color:#fff;}
.payment_con .method .method-option .paypal {background: url('/theme/7/img/common/logo_paypal.png') no-repeat left center;background-size: 69px 20px;background-color:#fff;}
.payment_con .method .method-option .gpay {background: url('/theme/7/img/common/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('/theme/7/img/main/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(/theme/7/img/common/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} 

/* 히어로 배경사진이 밝아 흰 글씨가 묻힌다. 왼쪽이 진한 스크림을 깔아 카피만 살린다. */
.greeting {background-image:linear-gradient(90deg, rgba(18,26,36,0.68) 0%, rgba(18,26,36,0.34) 55%, rgba(18,26,36,0.12) 100%), url('/theme/7/img/main/topimg_greeting.jpg');background-size:cover;background-position:center;}

/* 회사소개 본문 리듬 — p 마진이 전역에서 0이라 CMS 로 넣은 문단이 전부 붙어 나온다.
   문단 사이 간격은 콘텐츠가 아니라 디자인이 정할 몫이라 여기서 준다. */
.greeting .desc {margin-top:0.75rem;}
.welcome .welcome_text p + p {margin-top:1.125rem;}
.welcome .welcome_text .sign {margin-top:1.875rem;color:#555;}
.offer .companytitle p {max-width:46rem;margin:0 auto;}
.offer_item .desc {line-height:1.5;}
.bottom .c-btn {margin-top:1.5rem;flex:0 0 auto;background:#fff;color:var(--btn-color1);border-color:#fff;}

/*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(/theme/7/img/common/ico_star.png) left center no-repeat;}
  .course_result .num {background: url(/theme/7/img/common/ico_course.png) left center no-repeat;}
  .course_result .student {background: url(/theme/7/img/common/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*/ 
  /* 강사 상세 하단 — 아래에 아무것도 없이 푸터가 바로 붙는다.
     과정이 0건이면 제목만 남아 더 심하다(리스트·페이징이 통째로 비어 높이 0). */
  .course_sec {width:100%;margin:0 auto;padding-bottom:5.5rem;background:#fff;} 
  .courselist.wide {display:flex; flex-wrap:wrap; }
  /* theme/7 의 .nodata 는 그 자체로 둥근 회색 박스라(theme7.css:220)
     theme/6 식 상단 실선을 얹으면 박스 위에 선 하나가 떠 있는 꼴이 된다. */
  .courselist.wide .nodata{border-top:0;}
  .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('/theme/7/img/common/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('/theme/7/img/common/ico_man.svg') no-repeat left center;}
  .courselist.wide .course_info .date {background: url('/theme/7/img/common/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(/theme/7/img/common/ico_course.png) left center no-repeat;}
  .teacher_item .student {background: url(/theme/7/img/common/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('/theme/7/img/common/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}
  /* 사이트 로고(TB_SITE.LOGO)는 흰 배경 헤더용이라 짙은 푸터에 그대로 얹으면 대비가 나쁘다. 흰 칩 위에 올린다 */
  .footer_sec2 .logo{background:#fff;padding:8px 12px;border-radius:6px;display:inline-flex;align-items:center;flex:none}
  .footer_sec2 .logo img{height:34px;width:auto;display:block}
  .footer_sec2 .copyright{flex:1;font-size:0.85rem;color:#0585d9}
  /* 링크마다 글자수가 달라, 폭이 모자라면 '쿠키 정책'처럼 항목 안에서 줄바꿈돼 높이가 제각각이 된다. 항목은 통째로 넘긴다 */
  .footer_sec2 .menu{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 25px}
  .footer_sec2 .menu a{font-size:0.9rem;color:#fff;text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
  .footer_sec2 .sns{display:flex;gap: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('/theme/7/img/course/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> 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;}
/* 검색 결과 없음 — 목록이 통째로 비어 페이지가 접히므로 본문에 최소 높이를 준다.
   회색 박스(.nodata)는 이 자리에서 "컴포넌트가 빠진 것" 처럼 읽혀 배경 없이 가운데로 세운다. */
.searchNodata {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
	width:100%;min-height:240px;border-top:1px solid var(--border-color-light);margin:20px 0 60px;}
.searchNodata .ico {width:64px;height:64px;border-radius:50%;opacity:0.6;
	background:var(--bg-gray) url('/theme/7/img/common/ico_search.png') no-repeat center / 26px;}
.searchNodata .msg {font-size:1.13rem;color:var(--text-gray);}
@media all and (max-width:768px){
	.searchNodata {min-height:180px;margin:16px 0 40px;}
	.searchNodata .ico {width:52px;height:52px;background-size:22px;}
	.searchNodata .msg {font-size:1rem;}
}
.searchResult_sec {width:100%;margin-bottom:60px;}
/* 검색상세(search_detail)는 통합검색과 달리 .search_tit 가 없어 본문이 브레드크럼에 바로 붙는다 */
.container.search > .searchResult_sec:first-child {margin-top: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('/theme/7/img/common/building.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--simple에는 이미 있던 규칙) */
  .syllabus_sec .list .tit_con .info{display:none}
	.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('/theme/7/img/common/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;}
}

/*사이트맵(main/sitemap.jsp)*/
/* 푸터의 6컬럼 메뉴(.footer_sec1 .sitemap)와 같은 구성을 본문 배색으로 펼친다 */
.pg-sitemap .contents {padding:40px 0 60px;}
.sitemap_sec .main-menu {display:flex; flex-wrap:wrap; gap:30px 20px;}
.sitemap_sec .main-menu > li {flex:1 1 calc(33.333% - 20px); min-width:200px;}
.sitemap_sec .main-menu > li .tit {font-size:1.25rem; font-weight:600; color:#333; padding-bottom:12px; border-bottom:2px solid var(--main-color);}
.sitemap_sec .sub-menu {margin-top:15px;}
.sitemap_sec .sub-menu li {margin:10px 0;}
.sitemap_sec .sub-menu li a {font-size:1rem; color:var(--text-gray); word-break:keep-all;}
.sitemap_sec .sub-menu li a:hover {color:var(--main-color); text-decoration:underline;}

@media all and (max-width:980px) {
  .sitemap_sec .main-menu > li {flex:1 1 calc(50% - 20px);}
}
@media all and (max-width:640px) {
  .sitemap_sec .main-menu {gap:25px 0;}
  .sitemap_sec .main-menu > li {flex:1 1 100%;}
}

/*CMS 웹페이지(main/page.jsp) 본문*/
/* 관리자가 등록한 콘텐츠는 컨테이너 클래스를 안 붙이는 경우가 많다 — 여백을 여기서 보장한다 */
.pg-cms {padding-top:50px; padding-bottom:70px;}
.pg-cms img {max-width:100%; height:auto;}
.pg-cms table {max-width:100%;}

@media all and (max-width:640px) {
  .pg-cms {padding-top:30px; padding-bottom:50px;}
}